/* v2 시안: 구역 모양은 4가지만 — ① 큰 제목 + 기기 줄 ② 글 + 화면 하나 ③ 세 칸(상자 없이) ④ 상담 띠
   구역 구분은 흰색 / 연회색 띠, 번호 제목 없음. 기기는 새로 렌더한 흰색 제품군에 우리 화면 합성(assets/v2/dev-*, _src/mock/dev_screens.py), 화면은 읽히는 크기로(ui-*) */
:root{--band:#F5F6F8}
.v2 section{padding:140px 0}
.v2 .v2-band{background:var(--band)}
.v2-eb{font-size:16px;font-weight:700;color:var(--gray);margin-bottom:16px}
.v2-h{font-size:clamp(30px,3.4vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1.3}
.v2-p{font-size:18px;color:var(--gray);margin-top:20px;line-height:1.7}
.v2-more{display:inline-flex;align-items:center;gap:6px;margin-top:28px;font-weight:700;font-size:17px}
.v2-more::after{content:"→";transition:transform .25s var(--ease)}
.v2-more:hover::after{transform:translateX(4px)}

/* ① 머리말 + 기기 줄 */
.v2-hero{padding:136px 0 0!important;text-align:center;overflow:hidden}
.v2-hero h1{font-size:clamp(38px,5vw,68px);font-weight:700;letter-spacing:-.045em;line-height:1.2}
.v2-hero .v2-p{font-size:19px}
.v2-hero .hero-cta{margin-top:36px;justify-content:center}
/* 머리말 기기: 큰 기기 하나를 가운데, 탭으로 넘겨 보기(app.js) */
.v2-show{max-width:1000px;margin:36px auto 0}
.v2-show-stage{position:relative;height:clamp(260px,28vw,400px)}
.v2-show-panel{position:absolute;inset:0;visibility:hidden;opacity:0;transform:translateY(8px) scale(.99);transition:opacity 180ms cubic-bezier(.22,1,.36,1),transform 180ms cubic-bezier(.22,1,.36,1);pointer-events:none}
.v2-show-panel.on{visibility:visible;opacity:1;transform:none;pointer-events:auto}
.v2-show-panel.leaving{visibility:visible;opacity:0;transform:translateY(-4px) scale(.995);transition-duration:120ms}
.v2-show-panel a{display:flex;align-items:flex-end;justify-content:center;height:100%}
.v2-show-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
/* Sliding selection pill adapted from transitions.dev, 16-tabs-sliding (Jakub Antalik). */
.v2-show-tabs{position:relative;isolation:isolate;display:inline-flex;gap:4px;padding:5px;margin-top:26px;border-radius:999px;background:#F2F4F6}
.v2-show-pill{position:absolute;top:5px;bottom:5px;left:0;width:0;opacity:0;border-radius:999px;background:#fff;box-shadow:0 2px 10px rgba(17,19,24,.08);pointer-events:none;transition:transform 250ms cubic-bezier(.22,1,.36,1),width 250ms cubic-bezier(.22,1,.36,1)}
.v2-show-tabs.has-pill .v2-show-pill{opacity:1}
.v2-show-tabs button{position:relative;z-index:1;padding:10px 20px;border-radius:999px;font-size:15px;font-weight:700;color:var(--gray);transition:color 160ms ease-out}
.v2-show-tabs button.on{color:var(--ink)}
.v2-show-tabs:not(.has-pill) button.on{background:#fff;box-shadow:0 2px 10px rgba(17,19,24,.08)}
.v2-show-tabs button:focus-visible,.v2-show-panel a:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.v2-show.is-instant .v2-show-panel,.v2-show.is-instant .v2-show-tabs button{transition:none}
@media(prefers-reduced-motion:reduce){.v2-show-panel,.v2-show-pill,.v2-show-tabs button{transition:none}.v2-show-panel{transform:none}}
@media(max-width:600px){.v2-show{margin-top:28px}.v2-show-tabs{margin-top:18px}.v2-show-tabs button{padding:8px 12px;font-size:13px}}
@media(max-width:360px){.v2-show-tabs button{padding-inline:7px}}
.v2-hero .v2-sub{border-top:1px solid var(--line);margin-top:48px;padding:28px 0 36px;font-size:16px;color:var(--gray)}
.v2-hero .v2-sub a{color:var(--ink);font-weight:700;margin-left:10px}

/* 로고 띠 */
.v2 .logo-strip{padding:0 0 24px}
.v2 .logo-band{margin-top:0}

/* ② 글 + 화면 하나 */
.v2-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}
.v2-split.rev{grid-template-columns:1.15fr .85fr}
.v2-split.rev .v2-txt{order:2}
.v2-shot img{width:100%;height:auto;border-radius:22px;box-shadow:0 30px 60px -20px rgba(17,19,24,.25),0 0 0 1px rgba(17,19,24,.06)}
.v2-pts{list-style:none;margin-top:32px;border-top:1px solid var(--line)}
.v2-pts li{padding:16px 0;border-bottom:1px solid var(--line);font-size:16px}
.v2-pts b{display:block;font-size:17px}
.v2-pts span{color:var(--gray)}

/* ③ 세 칸 (상자 없이, 위 선 + 로고) */
.v2-three{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:72px}
.v2-three>a{display:block;color:var(--ink);border-top:2px solid var(--ink);padding-top:28px}
.v2-three .lg{display:flex;align-items:center;gap:14px;height:56px}
.v2-three .lg img{height:28px;width:auto;min-width:0;object-fit:contain}
.v2-three .lg img.ic{height:44px;border-radius:11px}
.v2-three b{display:block;font-size:21px;margin-top:24px}
.v2-three p{color:var(--gray);margin-top:8px;font-size:16px}
.v2-three .go{display:inline-block;margin-top:18px;font-weight:700;font-size:15px}
.v2-three>a:hover .go{color:var(--brand)}

/* 센터: 글 + 지도 */
.v2 .map-wrap{display:block}
.v2-facts{list-style:none;margin-top:36px}
.v2-facts li{display:grid;grid-template-columns:120px 1fr;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px}
.v2-facts li:first-child{border-top:1px solid var(--line)}
.v2-facts span{color:var(--gray)}

/* 자주 묻는 질문 */
.v2-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.v2 .faq{border-top:1px solid var(--ink)}
.v2 .fq-head{grid-template-columns:1fr 24px}

/* ④ 상담 띠 */
.v2-cta{text-align:center}
.v2-cta .phones{margin-top:48px}

@media(max-width:900px){
  .v2 section{padding:88px 0}
  .v2-hero{padding-top:112px!important}
  .v2-split,.v2-split.rev,.v2-faq{grid-template-columns:1fr;gap:40px}
  .v2-split.rev .v2-txt{order:0}
  .v2-three{grid-template-columns:1fr;gap:40px;margin-top:48px}
}
@media(max-width:600px){.v2-p,.v2-hero .v2-p{font-size:16px}.v2-facts li{grid-template-columns:96px 1fr}}

/* 큰 숫자 줄: 그라데이션 Black 숫자 + 보일 때 올라가는 효과(app.js data-count) */
.v2 .v2-nums{padding:72px 0 64px}
.v2-num{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.v2-num li+li{border-left:1px solid var(--line)}
.v2-num b{font-size:clamp(34px,3.4vw,48px);line-height:1.1;font-variant-numeric:tabular-nums}
.v2-num span{display:block;margin-top:10px;font-size:15px;color:var(--gray)}
/* 브랜드 문구: 아주 큰 그라데이션 Black */
.v2 .v2-brand{text-align:center;padding:150px 0}
.v2-big{font-size:clamp(56px,10.5vw,156px);line-height:1.1;letter-spacing:-.05em}
.v2-brand .v2-p{margin-top:28px}
@media(max-width:900px){.v2-num{grid-template-columns:1fr 1fr;row-gap:36px}.v2-num li:nth-child(3){border-left:0}.v2 .v2-brand{padding:96px 0}}
