/* VEXPLOR 홈페이지 v2 — 1안 「도면의 진화」 (대표 2026-11-12 「추천대로」)
   색 · 서체는 site.css(디자인 가이드 v5.1 다크 도면)와 같다. 이 파일은 그 위에 얹는다 — site.css 는 고치지 않는다.
   다 옮긴 뒤 한 번에 병합한다(기획 §6). 머리 · 바닥 마크업은 scripts/v2_frame.py 가 넣는다.
   금지: 그림자 · 그라데이션 · 라운드 · 블러(머리 반투명 제외 — site.css 기존값) · 박스 왼쪽 굵은 색 띠 · 캡션색 본문 */
:root {
  --raised: #1B1C22;
  --cap: #807E75;      /* 캡션 전용 — 본문에 쓰지 않는다 */
  --amberT: #FFB84D;   /* 어두운 바탕 위 앰버 글자 */
  --cta-ink: #1A1204;
}
a:focus-visible, button:focus-visible { outline: 1px solid var(--amberT); outline-offset: 3px; }

/* 머리 — 메뉴 다섯 · 버튼 하나 */
.gnb .gnb-in.gnb-v2 { gap: clamp(24px, 3vw, 44px); }
.gnb .gnb-v2 .brand { font-size: 17px; }
.gnb .gnb-v2 nav { gap: clamp(18px, 2.2vw, 32px); font-size: 14.5px; }
.gnb .gnb-v2 nav > .has-sub > a { color: var(--tx2); }
.gnb .gnb-v2 nav > .has-sub > a:hover, .gnb .gnb-v2 nav > .has-sub > a.on { color: var(--tx); }
.gnb .gnb-v2 nav > .has-sub > a::after { content: none; }
.gnb .gnb-v2 .sub { min-width: 270px; }
.gnb .gnb-v2 .right { gap: 22px; }
.gnb .gnb-v2 .cta { height: 40px; padding: 0 18px; font-size: 14px; font-weight: 700; color: var(--cta-ink); white-space: nowrap; }
.gnb .gnb-v2 .cta:hover { background: var(--amberT); }
/* 메뉴가 다섯이라 햄버거 분기를 늦춘다(site.css 1080px · 일본어 1200px). 아래는 v2 머리에만 */
@media (min-width: 900px) and (max-width: 1080px) {
  .gnb .gnb-v2 nav, .gnb .gnb-v2 .right { display: flex; }
  .gnb .gnb-v2 .nav-burger { display: none; }
}

/* 바닥 */
.ft-v2 { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; }
.ft-v2 .tag { color: var(--tx2); max-width: 360px; line-height: 1.7; }
.ft-v2 h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faintd); font-weight: 400; }
.ft-v2 ul li { color: var(--tx2); }
.ft-v2 ul a:hover { color: var(--tx); }
@media (max-width: 1000px) { .ft-v2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ft-v2 { grid-template-columns: 1fr; } }

/* 홈 첫 화면 — 1안 (시안_전면디자인_2026-11-12 sian.html?v=1 이식). 옛 .hero 와 겹치지 않게 .hv2 로만 쓴다 */
.hv2 { position: relative; min-height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line); padding: 0; }
.hv2 .poster { position: absolute; inset: 0; background: var(--bg) url(/assets/v2/hero-poster.webp) center/cover no-repeat; }
.hv2 canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .2s ease; }
.hv2 canvas.live { opacity: 1; }
.hv2 .wrap { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.hv2 .wrap * { pointer-events: auto; }
.hv2 .htxt { max-width: 560px; }
.hv2 .eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--amberT); padding-left: 12px; border-left: 1px solid var(--amber); margin-bottom: 22px; }
.hv2 h1 { font-size: clamp(40px, 4.6vw, 64px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 24px; color: var(--tx); word-break: keep-all; text-wrap: balance; }
.hv2 .lead { font-size: 18px; line-height: 1.7; color: var(--tx2); margin-bottom: 22px; max-width: 520px; word-break: keep-all; }
.hv2 .fact { display: flex; gap: 14px; align-items: baseline; margin-bottom: 34px; color: var(--tx); font-weight: 600; }
.hv2 .fact b { font-size: 22px; font-weight: 800; }
.hv2 .act { display: flex; align-items: center; gap: 18px; }
.hv2 .act .btn { white-space: nowrap; }
.hv2 .why { font-size: 14px; color: var(--tx2); max-width: 260px; line-height: 1.5; word-break: keep-all; }
.hv2 .meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faintd); }
.hv2 .staged { position: absolute; right: clamp(24px, 3vw, 40px); bottom: 150px; z-index: 2; }
.hv2 .rail { position: absolute; right: clamp(24px, 3vw, 40px); bottom: 174px; z-index: 2; color: var(--cap); background: var(--bg); padding: 6px 10px; }
.hv2 .rail b { color: var(--tx); font-weight: 400; }
.hv2 .rail span { color: var(--amberT); }
.hv2 .hero-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.hv2 .awards { border-top: 1px solid var(--line); background: var(--bg); }
.hv2 .awards .wrap { display: flex; align-items: center; gap: 22px; padding-top: 16px; padding-bottom: 16px; }
.hv2 .awards img.ces { height: 64px; width: auto; flex: none; border: 1px solid rgba(255,255,255,.7); }
.hv2 .awards .des { color: var(--tx); font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.hv2 .awards .list { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--tx); font-size: 13.5px; font-weight: 700; }
.hv2 .awards .list i { font-style: normal; color: var(--faintd); font-weight: 400; }
.hv2 .awards .list img { display: inline-block; height: 14px; width: auto; vertical-align: -2px; margin-right: 6px; }
.hv2 .awards .disc { font-size: 12px; line-height: 1.5; color: var(--cap); max-width: 820px; margin-top: 6px; }
@media (max-width: 1000px) {
  .hv2 { display: block; min-height: 0; }
  .hv2 canvas { position: relative; height: 52vh; }
  .hv2 .poster { inset: auto; top: 0; left: 0; right: 0; height: 52vh; }
  .hv2 > .wrap { margin-top: -8vh; }
  .hv2 .htxt { max-width: none; padding-bottom: 40px; }
  .hv2 h1 { font-size: 34px; margin-bottom: 16px; }
  .hv2 .eyebrow { letter-spacing: .12em; font-size: 10.5px; }
  .hv2 .rail { display: none; }
  .hv2 .staged { top: 12px; bottom: auto; }
  .hv2 .act { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hv2 .hero-bottom { position: static; }
  .hv2 .awards .wrap { flex-wrap: wrap; padding-top: 22px; }
  .hv2 .awards .list { flex-direction: column; }
  .hv2 .awards .list i { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hv2 canvas { display: none; } }

/* 홈 첫 화면 — 3안 「불 꺼진 공장」 (대표 2026-11-12 「v=3 이게 좋겠다」). 장면이 화면 전체 · 글은 아래 차콜 띠 위 */
.hv2.v3 { justify-content: flex-end; min-height: calc(100vh - 64px); }
.hv2.v3 .poster { background-image: url(/assets/v2/hero-poster-v3.webp); }
.hv2.v3 > .wrap { max-width: none; padding: 0; background: rgba(14,15,18,.62); border-top: 1px solid var(--line); }
.hv2.v3 > .wrap > .htxt { max-width: 1280px; margin: 0 auto; padding: 30px clamp(24px, 3vw, 40px); display: grid; grid-template-columns: auto 1fr; gap: 16px 64px; align-items: end; }
.hv2.v3 .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.hv2.v3 h1 { font-size: clamp(36px, 3.8vw, 54px); margin-bottom: 0; }
.hv2.v3 .lead { font-size: 15.5px; max-width: 440px; margin-bottom: 0; }
.hv2.v3 .fact { margin-bottom: 0; }
.hv2.v3 .staged { bottom: auto; top: 32px; }
.hv2.v3 .rail { bottom: auto; top: 60px; }
.hv2.v3 .hero-bottom { position: static; }
@media (max-width: 1000px) {
  .hv2.v3 { display: block; min-height: 0; }
  .hv2.v3 > .wrap { margin-top: 0; background: transparent; border-top: 0; }
  .hv2.v3 > .wrap > .htxt { display: block; padding: 24px clamp(24px, 3vw, 40px) 40px; }
  .hv2.v3 h1 { font-size: 34px; margin-bottom: 16px; }
  .hv2.v3 .lead { margin-bottom: 18px; }
  .hv2.v3 .fact { margin-bottom: 24px; }
  .hv2.v3 .staged { top: 12px; }
}

/* 홈 이야기 여섯 장면 — 어제 시안 home.html 이식(대표 2026-11-12 「3안 첫 화면 + 아래 여섯 장면」). 장면은 머리 아래에 붙어 있고 글이 그 위로 지나간다 */
.sv2 { position: relative; border-bottom: 1px solid var(--line); }
.sv2 .stage { position: sticky; top: 64px; height: calc(100vh - 64px); overflow: hidden; }
.sv2 .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; transition: opacity .6s cubic-bezier(.22,1,.36,1); }
.sv2.dim .stage canvas { opacity: .16; }
.sv2 .labs { position: absolute; inset: 0; pointer-events: none; transition: opacity .5s; }
.sv2.dim .labs { opacity: 0; }
.sv2 .lab { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cap); background: rgba(14,15,18,.82); padding: 2px 6px; }
.sv2 .lab.k { color: var(--tx); }
.sv2 .gate { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--bg); background: var(--amber); padding: 5px 10px; white-space: nowrap; opacity: 0; pointer-events: none; }
.sv2 .say { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cap); white-space: nowrap; transition: opacity .4s; }
.sv2.dim .say { opacity: 0; }
.sv2 .say b { color: var(--amberT); font-weight: 500; }
.sv2 .secs { position: relative; z-index: 2; margin-top: calc(-100vh + 64px); pointer-events: none; }
.sv2 .secs > section { min-height: calc(100vh - 64px); display: flex; align-items: center; padding: 80px 0; position: relative; }
.sv2 .secs > section > .wrap { width: 100%; position: relative; }
.sv2 .col { width: min(440px, 100%); pointer-events: auto; }
.sv2 .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--amberT); margin-bottom: 20px; }
.sv2 h2 { color: var(--tx); font-size: clamp(27px, 2.6vw, 38px); font-weight: 700; line-height: 1.24; letter-spacing: -.025em; margin: 0; word-break: keep-all; }
.sv2 .col p { margin-top: 20px; font-size: 17px; line-height: 1.72; color: var(--tx2); word-break: keep-all; }
.sv2 .pair, .sv2 .steps { position: absolute; right: clamp(24px, 3vw, 40px); top: 50%; transform: translateY(-50%); width: min(760px, calc(100% - 540px)); pointer-events: auto; }
:is(.sv2, .qa) .ask { border: 1px solid var(--line2); padding: 14px 18px; color: var(--tx); font-size: 16px; line-height: 1.5; margin-bottom: 14px; background: var(--bg); }
:is(.sv2, .qa) .ask .mono { display: block; margin-bottom: 6px; font-size: 10.5px; color: var(--cap); text-transform: uppercase; }
:is(.sv2, .qa) .ans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
:is(.sv2, .qa) .card { border: 1px solid var(--line); padding: 18px; background: rgba(14,15,18,.86); }
:is(.sv2, .qa) .card.yes { border-color: var(--amber); }
:is(.sv2, .qa) .card h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cap); font-weight: 500; margin: 0 0 12px; }
:is(.sv2, .qa) .card.yes h3 { color: var(--amberT); }
:is(.sv2, .qa) .card p { font-size: 14.5px; line-height: 1.7; color: var(--tx2); margin: 0; }
:is(.sv2, .qa) .card.yes p { color: var(--tx); }
:is(.sv2, .qa) .card em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--amberT); border: 1px solid rgba(245,166,35,.5); padding: 1px 5px; margin-left: 4px; white-space: nowrap; }
:is(.sv2, .qa) .card .verdict { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--tx2); }
:is(.sv2, .qa) .card.yes .verdict { color: var(--amberT); }
:is(.sv2, .qa) .note { margin-top: 10px; text-align: right; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--cap); }
.sv2 .lv { margin-top: 26px; display: grid; border-top: 1px solid var(--line); }
.sv2 .lv button { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; gap: 4px 10px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); width: 100%; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sv2 .lv button i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--faintd); }
.sv2 .lv button b { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--cap); }
.sv2 .lv button span { grid-column: 2; font-size: 14.5px; color: var(--tx2); line-height: 1.5; }
.sv2 .lv button:hover b { color: var(--tx); }
.sv2 .lv button.on i, .sv2 .lv button.on b { color: var(--amberT); }
.sv2 .lv button.on span { color: var(--tx); }
.sv2 .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sv2 .steps div { border: 1px solid var(--line); padding: 20px 18px; background: rgba(14,15,18,.86); }
.sv2 .steps div:nth-child(2) { border-color: var(--amber); }
.sv2 .steps i { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--cap); }
.sv2 .steps div:nth-child(2) i { color: var(--amberT); }
.sv2 .steps h3 { margin: 12px 0 0; color: var(--tx); font-size: 19px; font-weight: 700; }
.sv2 .steps p { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--tx2); }
.sv2 .credit { position: relative; z-index: 2; padding-bottom: 26px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--cap); }
@media (max-width: 1000px) {
  .sv2 .stage { height: 60vh; }
  .sv2 .stage canvas { opacity: .5; }
  .sv2 .labs, .sv2 .say { display: none; }
  .sv2 .secs { margin-top: -60vh; }
  .sv2 .secs > section { min-height: 0; padding: 64px 0; display: block; }
  .sv2 .col { width: 100%; }
  .sv2 h2 { font-size: 24px; }
  .sv2 .col p { font-size: 15px; }
  .sv2 .pair, .sv2 .steps { position: static; transform: none; width: 100%; margin-top: 22px; }
  .sv2 .ans, .sv2 .steps { grid-template-columns: 1fr; }
}

/* 홈 본문(원고 v3) 보조 — 세 줄 목록 · 두뇌 행 · 모듈 역할 한 줄 */
.why-list { list-style: none; margin: 22px 0 6px; padding: 0; border-top: 1px solid var(--line); }
.why-list li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--tx2); line-height: 1.65; word-break: keep-all; }
.why-list li b { color: var(--tx); }
.ledger-row.is-brain .name, .ledger-row.is-brain .spec { color: var(--amberT); }
.ledger-row.is-brain { border-bottom-color: var(--amber); }
.ledger-row .name .role { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--amberT); letter-spacing: 0; word-break: keep-all; }
/* 07절 손 · 눈 · 기억 · 두뇌 — 「답하는 질문」을 셋째 칸으로 크게(종전 이름 밑 작은 글씨) */
.ledger-row.q3 { grid-template-columns: 200px minmax(0,1fr) minmax(0,1.3fr); grid-template-rows: auto; align-items: baseline; }
.ledger-row.q3 .name, .ledger-row.q3 .desc, .ledger-row.q3 .spec { grid-column: auto; grid-row: auto; }
.ledger-row.q3 .spec { font-family: inherit; font-size: 17px; letter-spacing: 0; text-transform: none; text-align: left; color: var(--tx); line-height: 1.6; word-break: keep-all; }
.ledger-row.q3.hd { padding-top: 0; padding-bottom: 12px; }
.ledger-row.q3.hd span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--cap); font-weight: 500; }
.ledger-row.q3.is-brain .spec { color: var(--amberT); font-weight: 700; }
@media (max-width: 1000px) { .ledger-row.q3 { grid-template-columns: 1fr; } .ledger-row.q3.hd { display: none; } }

/* 02 같은 질문, 다른 답 — 장면 없이 정적으로(기획 §4-2 순서 3) */
.qa .pair { margin-top: 44px; }
@media (max-width: 1000px) { .qa .ans { grid-template-columns: 1fr; } }
/* 06 권한 다섯 단계 — 이름은 /levels 와 같다 */
.lv5 { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.lv5 li { padding: 22px 18px 24px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.lv5 li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.lv5 i { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--amberT); }
.lv5 b { color: var(--tx); font-size: 19px; font-weight: 700; }
.lv5 span { color: var(--tx2); font-size: 14.5px; line-height: 1.6; word-break: keep-all; }
@media (max-width: 1000px) { .lv5 { grid-template-columns: 1fr; } .lv5 li + li { padding-left: 0; border-left: 0; } }
/* 맺음 = 세 걸음 */
.close3 .steps3 { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.close3 .steps3 div { border: 1px solid var(--line); padding: 22px 20px; }
.close3 .steps3 div:nth-child(2) { border-color: var(--amber); }
.close3 .steps3 i { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--cap); }
.close3 .steps3 div:nth-child(2) i { color: var(--amberT); }
.close3 .steps3 h3 { margin: 12px 0 0; color: var(--tx); font-size: 20px; font-weight: 700; }
.close3 .steps3 p { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--tx2); word-break: keep-all; }
.close3 .row p { color: var(--tx2); }
@media (max-width: 1000px) { .close3 .steps3 { grid-template-columns: 1fr; } }
/* 홈 모바일 제목 — 낱말 중간에서 끊지 않고, 데스크톱용 줄바꿈은 접는다 */
.home-v2 h2.big, .home-v2 .hv2 h1 { word-break: keep-all; overflow-wrap: break-word; }
@media (max-width: 640px) { .home-v2 h2.big br { display: none; } .home-v2 h2.big { font-size: 30px; line-height: 1.3; } }
/* 모바일 03 · 04 — 장면과 글을 겹치지 않게 위아래로(사용자 관점 검수 2026-11-12: 겹친 글 대비 1.9:1) */
@media (max-width: 1000px) {
  .sv2 .stage { position: relative; top: 0; height: 56vh; }
  .sv2 .stage canvas { opacity: 1; }
  .sv2 .secs { margin-top: 0; }
  .sv2 .secs > section { padding: 40px 0; }
}
/* 한글 낱말 중간에서 줄을 가르지 않는다(시각 검수 F4 2026-11-12) — 홈 본문 · 공통 바닥 */
.home-v2 p, .home-v2 h3, .home-v2 li, .home-v2 .desc, .home-v2 .stat span, .home-v2 .case-card, .ft-v2 { word-break: keep-all; overflow-wrap: break-word; }
/* 그림 높이는 폭에 맞춘다 — width/height 속성은 자리 잡기용(01절 그림이 1200px로 늘어난 일 2026-11-12) */
.ph-frame img { display: block; width: 100%; height: auto; }