@charset "UTF-8";
/* =========================================================
   INDEX2 — 메인 (압구정 현대 스타일 스터디 · about2와 통일)
   about2.css를 먼저 로드한 뒤 이 파일을 로드할 것
========================================================= */

/* ---------- 헤더: 히어로 위 투명 + 흰 글자, 스크롤 시 화이트 ---------- */
body.i2 .a2-logo .lg-light{display:block}
body.i2 .a2-logo .lg-dark{display:none}
body.i2 .a2-header.on .lg-light{display:none}
body.i2 .a2-header.on .lg-dark{display:block}
body.i2 .a2-header:not(.on) .a2-gnb a,
body.i2 .a2-header:not(.on) .a2-hd-tel{color:#fff}
body.i2 .a2-header:not(.on) .a2-hd-login{color:rgba(255,255,255,.82)}
body.i2 .a2-header:not(.on) .a2-hd-login:hover{color:#fff}
body.i2 .a2-header:not(.on) .a2-hd-cta{border-color:rgba(255,255,255,.55);color:#fff}
body.i2 .a2-header:not(.on) .a2-hd-cta:hover{background:#fff;color:var(--ink)}
body.i2 .a2-header:not(.on) .a2-burger span{background:#fff}

/* =========================================================
   HERO — 풀스크린 워드마크
========================================================= */
.i2-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;padding:120px var(--pad) 100px}
.i2-hero__bg{position:absolute;inset:0;pointer-events:none}
.i2-hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.i2-hero__scrim{position:absolute;inset:0;background:linear-gradient(160deg,rgba(15,27,46,.78) 0%,rgba(15,27,46,.55) 45%,rgba(20,28,46,.82) 100%)}
.i2-hero__inner{position:relative}
.i2-hero .a2-label{justify-content:center;color:var(--accent-l)}
.i2-hero .a2-label::before{background:var(--accent-l)}
.i2-hero__tit{margin-top:30px;font-family:var(--eng);font-weight:400;font-size:clamp(3rem,11vw,9rem);line-height:1.04;letter-spacing:.015em;text-transform:uppercase}
.i2-hero__tit .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.i2-hero__tit .ch{display:inline-block;transform:translateY(120%) rotate(7deg);transform-origin:0 100%;transition:transform 1.2s var(--ease)}
.i2-hero.in .ch{transform:none}
.i2-hero__sub{margin-top:28px;font-size:clamp(1.05rem,1.6vw,1.35rem);color:rgba(255,255,255,.85);letter-spacing:-.01em;opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease) 1s,transform 1s var(--ease) 1s}
.i2-hero.in .i2-hero__sub{opacity:1;transform:none}
.i2-hero__btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:clamp(34px,4.5vw,56px);opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease) 1.25s,transform 1s var(--ease) 1.25s}
.i2-hero.in .i2-hero__btns{opacity:1;transform:none}
.i2-hero__scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font-family:var(--eng);font-size:.88rem;letter-spacing:.34em;color:rgba(255,255,255,.75)}
.i2-hero__scroll::after{content:"";width:1px;height:46px;background:linear-gradient(to bottom,rgba(255,255,255,.9),transparent);animation:i2drop 2s var(--ease) infinite}
@keyframes i2drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================
   공통 섹션 헤드(행 정렬)
========================================================= */
.i2-sechead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(40px,5.5vw,84px)}
.i2-sechead p.desc{max-width:460px;font-size:1.14rem;line-height:1.85;color:var(--gray);word-break:keep-all}

/* =========================================================
   PRESS — 언론보도
========================================================= */
.i2-press{padding:clamp(90px,12vw,190px) 0}
.i2-press__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,30px) clamp(14px,1.6vw,24px)}
.i2-press__grid a{display:block}
.i2-press .pic{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--paper);clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ease);transition-delay:var(--d,0s)}
.i2-press a.in .pic{clip-path:inset(0 0 0 0)}
.i2-press .pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.25);transition:transform 1.4s var(--ease);transition-delay:var(--d,0s)}
.i2-press a.in .pic img{transform:scale(1)}
.i2-press a.in:hover .pic img{transform:scale(1.06);transition-duration:.8s}
.i2-press .pic .play{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(15,27,46,.55);backdrop-filter:blur(6px);color:#fff;transition:background .4s}
.i2-press .pic .play svg{width:18px;height:18px}
.i2-press a:hover .pic .play{background:var(--accent)}
.i2-press .cap{display:flex;gap:12px;align-items:baseline;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.i2-press .cap i{font-style:normal;font-family:var(--eng);font-size:.9rem;font-weight:500;letter-spacing:.1em;color:var(--accent);white-space:nowrap}
.i2-press .cap .t{font-size:1.08rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.i2-press .cap .s{display:block;margin-top:3px;font-size:.97rem;font-weight:400;color:var(--gray)}

/* =========================================================
   SERVICE — 이미지 오버레이 카드
========================================================= */
.i2-svc{padding:clamp(90px,12vw,190px) 0;background:var(--cream)}
.i2-svc__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,32px)}
/* clip-path는 IO 관찰 대상(.a2-reveal 래퍼)이 아닌 내부 카드에만 — 완전히 클립된 요소는 교차 판정이 안 됨 */
.i2-svc__card{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease);transition-delay:var(--d,0s);will-change:clip-path}
.a2-reveal.in .i2-svc__card{clip-path:inset(0 0 0 0)}
.i2-svc__card img{width:100%;height:100%;object-fit:cover;transform:scale(1.28);transition:transform 1.5s var(--ease);transition-delay:var(--d,0s);will-change:transform;backface-visibility:hidden}
.a2-reveal.in .i2-svc__card img{transform:scale(1)}
.a2-reveal.in .i2-svc__card:hover img{transform:scale(1.05);transition-duration:.9s}
.i2-svc__card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,27,46,.86) 0%,rgba(15,27,46,.34) 46%,rgba(15,27,46,.08) 70%)}
.i2-svc__body{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:clamp(20px,2.4vw,36px)}
.i2-svc__body h3{font-size:clamp(1.3rem,2vw,1.8rem);font-weight:600;color:#fff;letter-spacing:-.02em}
.i2-svc__body p{margin-top:10px;max-width:540px;font-size:clamp(1rem,1.12vw,1.1rem);line-height:1.7;color:rgba(255,255,255,.78);word-break:keep-all}
.i2-svc__arrow{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.5);color:#fff;transition:background .4s,border-color .4s,transform .5s var(--ease)}
.i2-svc__arrow svg{width:20px;height:20px}
.i2-svc__card:hover .i2-svc__arrow{background:var(--accent);border-color:var(--accent);transform:rotate(-45deg)}
.i2-svc__num{position:absolute;left:clamp(20px,2.4vw,36px);top:clamp(16px,2vw,28px);z-index:1;font-family:var(--eng);font-size:1.02rem;letter-spacing:.18em;color:rgba(255,255,255,.85)}

/* =========================================================
   SCOPE — 복구 범위 (미니멀 아카이브)
========================================================= */
.i2-scope{padding:clamp(90px,12vw,190px) 0}
.i2-scope__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
.i2-scope__grid li{padding:clamp(24px,2.6vw,40px) clamp(14px,1.6vw,26px);border-bottom:1px solid var(--line-l);border-right:1px solid var(--line-l)}
.i2-scope__grid li:nth-child(4n){border-right:0}
.i2-scope__grid i{font-style:normal;font-family:var(--eng);font-size:.92rem;letter-spacing:.14em;color:var(--accent)}
.i2-scope__grid em{display:block;margin-top:14px;font-style:normal;font-family:var(--eng);font-size:clamp(1.05rem,1.4vw,1.3rem);font-weight:500;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
.i2-scope__grid span{display:block;margin-top:6px;font-size:1.05rem;color:var(--gray)}

/* =========================================================
   OFFER — 특별행사 프라이스 카드
========================================================= */
.i2-offer{padding:clamp(90px,12vw,190px) 0;background:var(--cream)}
.i2-offer__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,28px)}
.i2-offer__card{background:#fff;border:1px solid var(--line);padding:clamp(26px,3vw,44px)}
.i2-offer__tag{display:inline-block;padding:8px 18px;border:1px solid var(--accent);border-radius:999px;font-size:.95rem;font-weight:600;color:var(--accent);letter-spacing:-.01em}
.i2-offer__card h4{margin-top:22px;font-size:clamp(1.15rem,1.5vw,1.42rem);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.i2-offer__card .desc{margin-top:8px;font-size:1.06rem;color:var(--gray);word-break:keep-all;line-height:1.7}
.i2-offer__price{display:flex;align-items:baseline;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-l)}
.i2-offer__price .now{font-family:var(--eng);font-size:clamp(2rem,3.2vw,2.9rem);font-weight:500;color:var(--ink);letter-spacing:-.01em}
.i2-offer__price .unit{font-size:1.05rem;color:var(--ink);font-weight:600}
.i2-offer__price .was{font-size:1.06rem;color:var(--gray-l);text-decoration:line-through}
.i2-offer__note{margin-top:10px;font-size:.99rem;color:var(--gray)}
.i2-offer__note.ok{display:flex;align-items:center;gap:8px;color:var(--accent);font-weight:600}
.i2-offer__note.ok svg{width:17px;height:17px;flex:none}
.i2-offer__foot{margin-top:clamp(30px,3.6vw,50px);text-align:center;font-size:1.05rem;color:var(--gray)}

/* =========================================================
   BOARD — 복구 문의 현황 (롤링)
========================================================= */
.i2-board{padding:clamp(90px,12vw,190px) 0}
.i2-board__live{display:inline-flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:600;color:var(--accent)}
.i2-board__live i{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:i2pulse 1.6s ease infinite}
@keyframes i2pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.35)}50%{box-shadow:0 0 0 7px rgba(37,99,235,0)}}
.i2-board__panel{border-top:1px solid var(--ink)}
.i2-board__viewport{height:392px;overflow:hidden}
.i2-board__track{will-change:transform} /* 한 줄씩 스텝 롤링 — js/index2.js 티커가 제어 */
.i2-board__row{display:grid;grid-template-columns:90px 1fr 110px 116px;align-items:center;gap:14px;height:58px;border-bottom:1px solid var(--line-l);font-size:1.06rem}
.i2-board__row .no{font-family:var(--eng);color:var(--gray-l);font-size:.98rem}
.i2-board__row .tit{color:var(--ink-2);font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i2-board__row .writer{color:var(--gray);font-size:1rem;text-align:center}
.i2-board__row .stat{text-align:right}
.i2-board__row .stat em{display:inline-block;font-style:normal;font-size:.94rem;font-weight:600;padding:5px 13px;border-radius:999px}
.i2-board__row .is-done{color:var(--accent-d);background:var(--beige)}
.i2-board__row .is-live{color:var(--accent);background:rgba(37,99,235,.09)}
.i2-board__row .is-new{color:#fff;background:var(--accent)}

/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:1024px){
  .i2-press__grid{grid-template-columns:repeat(2,1fr)}
  .i2-svc__grid{grid-template-columns:1fr}
  .i2-scope__grid{grid-template-columns:repeat(2,1fr)}
  .i2-scope__grid li:nth-child(2n){border-right:0}
  .i2-offer__grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .i2-hero{min-height:100svh;padding-top:100px}
  .i2-press__grid{grid-template-columns:1fr}
  .i2-scope__grid{grid-template-columns:1fr}
  .i2-scope__grid li{border-right:0}
  .i2-board__row{grid-template-columns:1fr 96px;height:auto;padding:14px 0}
  .i2-board__row .no,.i2-board__row .writer{display:none}
  .i2-board__viewport{height:420px}
}