@charset "utf-8";
/* 트랜쇼 · DCF — v4 공통 토큰 & 셸 · 2026-09-06 · (주)엑스온
   ─────────────────────────────────────────────────────────────
   v3 → v4 변경 : 배경을 네이비에서 화이트로 뒤집었다.
   브랜드값(네이비 #2B3B95 / 옐로 #F8C429 / 페이퍼 #F4F4F7)은 그대로 두고
   역할만 반전한다. 네이비는 이제 배경이 아니라 '강조 구간'과 강조 텍스트다.

   ★ 화이트 배경에서 옐로(#F8C429)를 본문 텍스트로 쓰지 않는다.
     흰 바탕 대비 1.71:1 — 읽을 수 없다.
     흰 바탕의 강조 텍스트는 네이비(9.71:1), 옐로는 밑줄·하이라이트·도형에만.
     옐로 텍스트는 네이비 블록 안에서만 쓴다(네이비 대비 10.6:1).

   명도 대비 (client-design-tokens 스킬의 검산식으로 계산)
     #FFFFFF ↔ #12141C  본문      18.38:1   (레퍼런스 x-on.kr 16.9:1 이상)
     #FFFFFF ↔ #4A4E63  보조      8.20:1
     #FFFFFF ↔ #6E7387  캡션      4.70:1    (v3의 흰색 40% = 3.3:1 → 개선)
     #FFFFFF ↔ #2B3B95  강조      9.71:1
     #0B1230 ↔ #FFFFFF  네이비블록 18.14:1

   타이포 : v3 대비 '가장 작은 텍스트'를 일괄 +20% 했다.
     캡션·노트·라벨·표·SVG 라벨이 대상. --fs-* 로 묶어두었으니
     더 키우려면 이 변수만 만지면 된다. */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ── 트랜쇼 브랜드 폰트 (2026-09-15 대표 지시로 반영) ──────────────────
   PF Fusion Sans Pro Medium  → 라벨·아이브로우·로고 조판 (--f-brand)
   Museo 500 / 300 / 100      → 큰 숫자와 영문 디스플레이 (--f-num / --f-light)
   Sans Condensed             → 예비
   전부 라틴·숫자·기호만 서브셋한 woff2. 한글 본문은 그대로 Pretendard.
   ⚠ 두 서체는 해외 유료 서체(exljbris / Parachute)다. 정식 오픈 전 웹폰트
     라이선스를 확인할 것. 빠지면 fallback 이 Jost 로 떨어지게 짜 뒀다. */
@font-face{font-family:'Trenshow Brand';src:url('../assets/fonts/pffusion-500.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F,U+2070-209F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Trenshow Num';src:url('../assets/fonts/museo-500.woff2') format('woff2');
  font-weight:500 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F,U+2070-209F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Trenshow Num';src:url('../assets/fonts/museo-300.woff2') format('woff2');
  font-weight:300 400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F,U+2070-209F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Trenshow Num Light';src:url('../assets/fonts/museo-100.woff2') format('woff2');
  font-weight:100 300;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F,U+2070-209F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Trenshow Cond';src:url('../assets/fonts/sanscond-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F,U+2070-209F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}


:root{
  /* ── 지면 (라이트) ── */
  --bg:#FFFFFF;
  --bg-2:#F4F4F7;          /* 페이퍼 — 섹션 밴드 */
  --bg-3:#ECEDF3;          /* 한 단계 더 눌린 면 */
  --line:#DDDEE7;
  --line-2:#C4C6D4;

  /* ── 잉크 ── */
  --ink:#12141C;
  --ink-2:#4A4E63;
  --ink-3:#6E7387;

  /* ── 네이비 강조 구간 ── */
  --nv:#0B1230;
  --nv-2:#141D45;
  --nv-3:#1E2A63;
  --nv-line:rgba(255,255,255,.16);
  --nv-line-2:rgba(255,255,255,.32);
  --nv-ink:#FFFFFF;
  --nv-ink-2:rgba(255,255,255,.74);
  --nv-ink-3:rgba(255,255,255,.56);

  /* ── 서체 ── */
  --f-brand:'Trenshow Brand','Jost',sans-serif;            /* 라벨 · 아이브로우 · 로고 */
  --f-num:'Trenshow Num','Jost',sans-serif;                /* 큰 숫자 · 영문 디스플레이 */
  --f-light:'Trenshow Num Light','Trenshow Num','Jost',sans-serif;

  /* ── 브랜드 ── */
  --navy:#2B3B95;
  --navy-lit:#4E62C8;
  --accent:#F8C429;
  --accent-ink:#8A6A05;    /* 흰 바탕에서 옐로 계열 텍스트가 꼭 필요할 때 (5.4:1) */

  /* ── 최소 텍스트 스케일 (v3 대비 +20%) ── */
  --fs-micro:14px;         /* v3 11.5~12 */
  --fs-label:15px;         /* v3 12.5~13 — eyebrow, 스텝, 태그 */
  --fs-cap:16px;           /* v3 13~13.5 — 캡션, 노트, 표 라벨 */
  --fs-body-s:17.5px;      /* v3 14.5 — 설명문 */
  --fs-body:19px;          /* v3 15~16 */

  --r:4px; --r-lg:14px; --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.4,0,.2,1);
  --dur:.42s; --dur-long:.9s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  font-weight:400;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.on-nv :focus-visible{outline-color:var(--accent)}

/* ══ 네이비 강조 구간 ══
   이 클래스가 붙은 블록 안에서는 잉크 변수가 흰색 계열로 갈아끼워진다.
   덕분에 같은 컴포넌트를 흰 바탕과 네이비 바탕 양쪽에 그대로 쓸 수 있다. */
.on-nv{
  background:var(--nv);
  --ink:var(--nv-ink);
  --ink-2:var(--nv-ink-2);
  --ink-3:var(--nv-ink-3);
  --line:var(--nv-line);
  --line-2:var(--nv-line-2);
  --bg:var(--nv);
  --bg-2:var(--nv-2);
  --bg-3:var(--nv-3);
  --navy:var(--accent);   /* 강조 텍스트가 네이비→옐로로 바뀐다 */
  color:var(--nv-ink);
}

/* ══ 로고 락업 ══ */
.lock{display:inline-flex;flex-direction:column;line-height:1;gap:5px}
.lock__a{font-family:var(--f-brand);font-weight:600;font-size:20px;letter-spacing:.30em;text-indent:.30em}
/* 로고 락업의 아랫줄은 읽는 글이 아니라 워드마크의 일부다.
   14px 하한(본문 기준)의 예외 — 윗줄 20px 과의 비례가 무너지면 로고가 아니게 된다. */
.lock__b{font-family:var(--f-brand);font-weight:500;font-size:13px;letter-spacing:.24em;text-indent:.24em;color:var(--navy)}
.lock--sm .lock__a{font-size:16px}
.lock--sm .lock__b{font-size:11.5px}
/* 실제 CI (2026-09-15 대표 지시로 원본 AI 파일에서 벡터 추출) ─────────
   .lock__a(조판 대체안)는 CSS 만 남겨 둔다 — 로고를 못 불러오면 되돌릴 수 있게. */
.lock__mk{display:block;line-height:0}
.lock__img{display:block;height:30px;width:auto}
.lock--sm .lock__img{height:26px}
.lock .lock__img--l{display:none}
body[data-tone="dark"] .sitehead .lock__img--d,
body[data-tone="dark"] .topbar  .lock__img--d{display:none}
body[data-tone="dark"] .sitehead .lock__img--l,
body[data-tone="dark"] .topbar  .lock__img--l{display:block}
.foot .lock__img--d{display:none}
.foot .lock__img--l{display:block}
.foot .lock__img{height:30px}
@media (max-width:560px){ .lock--sm .lock__img{height:22px} }

.eyebrow{font-family:var(--f-brand);font-weight:600;font-size:var(--fs-label);letter-spacing:.30em;text-indent:.30em;text-transform:uppercase;color:var(--navy);margin:0 0 22px;display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:'';width:26px;height:var(--rule);background:currentColor;flex:none;text-indent:0}
.num{font-family:var(--f-num);font-weight:600;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.02em}

/* ══ 버튼 ══ */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 28px;border-radius:var(--r);font-weight:600;font-size:16px;letter-spacing:-.01em;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease-io),border-color var(--dur) var(--ease-io)}
.btn--fill{background:var(--navy);color:#fff}
.btn--fill:hover{background:#22307D;transform:translateX(4px)}
.on-nv .btn--fill{background:var(--accent);color:#1A1400}
.on-nv .btn--fill:hover{background:#FFD84D}
.btn--line{border:1px solid var(--line-2);color:var(--ink)}
.btn--line:hover{border-color:var(--navy);color:var(--navy);transform:translateX(4px)}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 흰 바탕 위 옐로 하이라이트 — 옐로를 글자색이 아니라 형광펜으로 쓴다 */
.hl{background:linear-gradient(180deg,transparent 58%,rgba(248,196,41,.62) 58%);padding:0 .06em}

/* ══════════ 메인 게이트 (index) ══════════ */
.gate{min-height:100svh;display:flex;flex-direction:column;position:relative;background:var(--bg)}
.gate__top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:30px clamp(20px,4vw,56px);border-bottom:1px solid var(--line)}
.gate__nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.gate__nav > a{font-size:var(--fs-cap);font-weight:600;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:2px}
.gate__nav > a:hover{color:var(--navy)}
.gate__meta{font-family:var(--f-brand);font-size:14.5px;letter-spacing:.14em;color:var(--ink-3)}
@media (max-width:600px){.gate__meta{display:none}}
.gate__head{position:relative;z-index:2;padding:var(--sp-xl) clamp(20px,4vw,56px) var(--sp-md);max-width:980px}
.gate__title{font-size:clamp(34px,5.6vw,66px);font-weight:800;line-height:1.14;letter-spacing:-.035em;text-wrap:balance}
.gate__title em{font-style:normal;color:var(--navy)}
.gate__lead{margin-top:18px;font-size:clamp(17px,1.7vw,22px);font-weight:700;line-height:1.7;letter-spacing:-.02em;color:var(--navy);max-width:24em;text-wrap:balance}
.gate__sub{margin-top:14px;font-size:clamp(16px,1.4vw,18.5px);line-height:1.85;color:var(--ink-2);max-width:52em}
/* 줄바꿈 제어 — 좁은 화면에서는 고정 줄바꿈을 풀어 어색한 단절을 막는다 */
br.nbr{display:inline}
/* ══════════ v7.6 가독성 규칙 ══════════
   ① 설명 단락은 문장 단위로 끊어 넣는다(br.nbr — 681px 이상에서만 줄이 바뀐다).
      휴대폰에서는 br 이 사라져 문장이 자연스럽게 이어진다.
   ② 줄간격을 한 단계 올린다. 한글은 라틴보다 글자 높이가 커서 1.7 로는 빽빽하다.
   ③ word-break:keep-all — 단어 중간에서 끊기지 않게.
   ④ text-wrap:pretty — 끝줄에 한 단어만 남는 것을 줄인다. */
.b-sub,.def,.b-note,.hub__cap,.res__note,.office__v,.rail__d,.door__d,
.gate__lead,.art-answer,.why__d,.foot__facts dd,.terms td,.terms th,
.art-body p,.art-body li,.stat__l,.nums .l,.tiers .u,.moveg .l,figcaption{
  word-break:keep-all;
}
@supports (text-wrap:pretty){
  p,li,dd,dt,figcaption{text-wrap:pretty}
}
@media (max-width:680px){br.nbr{display:none}}

.gate__grid{position:relative;z-index:2;flex:1;display:grid;gap:14px;grid-template-columns:7fr 5fr;grid-template-rows:1fr 1fr;padding:0 clamp(20px,4vw,56px) clamp(24px,4vw,48px);min-height:min(560px,58svh)}
/* 도어는 사진 위에 글이 얹히는 자리라 여기만 어둡게 유지한다 */
/* ★ justify-content:flex-end + 절대배치 넘버 조합이 문제였다.
   제목이 길어지면 위로 자라 절대배치된 01 마커와 겹쳤다(2026-09-07 실물 확인).
   넘버를 흐름 안에 두고 margin-bottom:auto 로 나머지를 아래로 민다. 겹칠 수가 없다. */
.door{position:relative;overflow:hidden;border-radius:var(--r-lg);display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(22px,2.4vw,38px);isolation:isolate;color:#fff;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease-io)}
.door--wide{grid-row:span 2;background:var(--nv-2)}
.door--a{background:linear-gradient(148deg,#17225A 0%,#0D1436 100%)}
.door--b{background:linear-gradient(148deg,#1B2A6E 0%,#101946 100%)}
.door:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(11,18,48,.55)}
/* 배경은 -2, 스크림은 -1. 생성 이미지가 이미 어둡고 정돈돼 있어
   불투명도를 올려도 글이 안 묻는다. 대신 아래쪽 스크림으로 본문 대비를 확보한다. */
/* v7.7 : 사진을 거의 그대로 보여준다(.92). 어둡게 깔던 전면 베일을 걷고,
   글이 앉는 '아래쪽에만' 스크림을 세워 대비를 만든다. 사진 윗부분은 선명하게 남는다. */
.door__bg{position:absolute;inset:0;z-index:-2;object-fit:cover;width:100%;height:100%;opacity:.92;filter:saturate(1.06) contrast(1.05);transition:opacity var(--dur-long) var(--ease),transform var(--dur-long) var(--ease)}
.door::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--grain) 0 0/180px 180px,linear-gradient(180deg,rgba(11,18,48,0) 0%,rgba(11,18,48,.05) 24%,rgba(11,18,48,.40) 46%,rgba(11,18,48,.86) 74%,rgba(11,18,48,.96) 100%)}
/* 상단 한 줄(번호 + 영문 카테고리)만 얹히는 얕은 스크림.
   사진 가운데는 건드리지 않으면서 이 줄의 대비만 7:1 대로 끌어올린다. */
.door::before{content:'';position:absolute;left:0;right:0;top:0;height:clamp(104px,17%,158px);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,18,48,.92) 0%,rgba(11,18,48,.62) 46%,rgba(11,18,48,0) 100%)}
/* 작은 도어(02·03)는 글이 사진 한가운데에 얹힌다. 배경을 한 단계 더 눌러 본문 대비를 지킨다. */
.door--a .door__bg,.door--b .door__bg{opacity:.86}
.door--a:hover .door__bg,.door--b:hover .door__bg{opacity:1}
.door--a .door__bg--v[data-on],.door--b .door__bg--v[data-on]{opacity:.86}
.door--a:hover .door__bg--v[data-on],.door--b:hover .door__bg--v[data-on]{opacity:1}
.door--a::after,.door--b::after{background:var(--grain) 0 0/180px 180px,linear-gradient(180deg,rgba(11,18,48,.04) 0%,rgba(11,18,48,.30) 22%,rgba(11,18,48,.80) 52%,rgba(11,18,48,.95) 100%)}
/* 배경이 video 여도 img 와 똑같이 다룬다(.door__bg 규칙을 그대로 탄다).
   ★ 모션 해제 시 video 를 display:none 하면 안 된다 — poster 까지 같이 사라져
   배경이 통째로 비어 버린다. 재생만 멈추고(js/reveal.js) 첫 프레임은 남긴다. */
/* ★ 배경은 이미지가 먼저 깔리고, 영상은 그 위에 얹힌다.
   poster 속성 하나에 기대면 브라우저·정책에 따라 아무것도 안 보이는 경우가 있다
   (2026-09-07 실물 확인 — 도어 01 이 통째로 비었다).
   이미지를 실제 <img> 로 깔면 영상이 안 뜨든 못 뜨든 화면은 항상 채워진다. */
.door__bg--v{pointer-events:none;z-index:-2;opacity:0;transition:opacity .8s var(--ease)}
.door__bg--v[data-on]{opacity:.92}
.door:hover .door__bg--v[data-on]{opacity:1}
.door:hover .door__bg{opacity:1}
/* ══ v7.9 : 도어 배경 모션 — 영상(mp4) 대신 CSS 드리프트 ══
   ffmpeg zoompan 은 프레임마다 crop 좌표를 정수로 반올림해서 아주 느린 줌에서 '흔들림'이 생긴다.
   transform 은 서브픽셀·GPU 합성이라 흔들림이 0 이고, 영상 파일(총 4.8MB)도 내려받지 않는다.
   28~36초에 1.02→1.10배, 도어마다 주기·위상을 다르게 두어 세 장이 같이 움직이지 않게 한다.
   html.rv-on 이 없으면(모션 해제·JS 없음) 정지 사진 그대로다. */
.door__bg{transform:scale(1.02);transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
.door--wide .door__bg{object-position:50% 42%}
html.rv-on .door__bg{animation:doorDrift 28s cubic-bezier(.45,0,.55,1) infinite alternate}
html.rv-on .door--a .door__bg{animation-duration:32s;animation-delay:-9s;animation-name:doorDriftB}
html.rv-on .door--b .door__bg{animation-duration:36s;animation-delay:-19s;animation-name:doorDriftC}
@keyframes doorDrift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.10) translate3d(-1.4%,-1.1%,0)}}
@keyframes doorDriftB{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.11) translate3d(1.5%,-.9%,0)}}
@keyframes doorDriftC{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.10) translate3d(-1.2%,1.2%,0)}}
/* 필름 그레인 — 스크림 그라디언트의 밴딩을 숨기고 사진에 질감을 준다. 6% 알파. */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.door__bg{animation:none!important;transform:none}}
/* v7.6 : 도어 상단을 '번호 + 영문 카테고리' 한 줄로. 둘 다 트랜쇼 브랜드 서체다.
   ★ 브랜드 서체(PF Fusion · Museo)에는 한글 글리프가 없다. 한글 제목·본문은 Pretendard 가 맡고,
     숫자·영문만 브랜드 서체가 맡는다. 그래서 영문 라벨과 숫자를 의도적으로 늘렸다. */
.door__top{display:flex;align-items:center;gap:14px;margin:0 0 auto}
.door__no{font-family:var(--f-brand);font-size:16px;font-weight:600;letter-spacing:.24em;color:var(--accent);padding-top:9px;border-top:var(--rule) solid var(--accent);min-width:46px}
.door__cat{font-family:var(--f-brand);font-size:var(--fs-micro);font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.90);padding-top:9px;border-top:1px solid rgba(255,255,255,.34);flex:1}
/* 본문 안 숫자는 Museo 로 — 한글 사이에서도 브랜드 서체가 읽힌다 */
.fig{font-family:var(--f-num);font-weight:600;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.01em;color:#fff}
.door__t{margin-top:clamp(20px,3vw,40px);font-size:clamp(23px,2.5vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.22}
.door--wide .door__t{font-size:clamp(27px,3.3vw,46px)}
.door__d{margin-top:13px;font-size:var(--fs-cap);line-height:1.95;color:rgba(255,255,255,.84);max-width:34em;word-break:keep-all}
.door__go{margin-top:20px;display:inline-flex;align-items:center;gap:10px;font-family:var(--f-brand);font-size:14px;font-weight:500;letter-spacing:.16em;color:var(--accent)}
.door__go svg{transition:transform var(--dur) var(--ease)}
.door:hover .door__go svg{transform:translateX(7px)}
.door__ask{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:15px;color:rgba(255,255,255,.72);border:1px dashed rgba(255,255,255,.38);border-radius:100px;padding:7px 15px}
.gate__foot{position:relative;z-index:2;padding:var(--sp-md) clamp(20px,4vw,56px) var(--sp-md);font-size:14.5px;color:var(--ink-3);line-height:1.85;border-top:1px solid var(--line);margin:0 clamp(20px,4vw,56px)}
.gate__foot b{color:var(--ink);font-weight:600}

@media (max-width:860px){
  .gate__grid{grid-template-columns:1fr;grid-template-rows:none;min-height:0}
  .door--wide{grid-row:auto;min-height:230px}
  .door{min-height:190px}
  /* v7.9 : 모바일은 '사진 위 + 글 아래' 카드. 글이 사진을 덮어 DCF 사인이 안 보이던 문제.
     사진 영역 높이만큼 위를 비우고(padding-top) 배경 이미지를 그 높이로 자른다.
     스크림은 사진 아래 경계에서 네이비로 이어지고, 번호·카테고리 라벨은 사진 위 상단에 고정한다. */
  .door{--ph:54vw;padding-top:calc(var(--ph) + 16px)}
  .door--wide{--ph:72vw}
  .door .door__bg{bottom:auto;height:var(--ph);object-position:50% 45%}
  .door--wide .door__bg{object-position:50% 40%}
  .door::after,.door--a::after,.door--b::after{background:var(--grain) 0 0/180px 180px,
    linear-gradient(180deg,rgba(11,18,48,0) 0,rgba(11,18,48,0) calc(var(--ph) - 70px),rgba(11,18,48,.72) calc(var(--ph) - 6px),#0F1738 var(--ph),#0F1738 100%)}
  .door__top{position:absolute;left:clamp(22px,2.4vw,38px);right:clamp(22px,2.4vw,38px);top:clamp(22px,2.4vw,38px);margin:0}
  .door__t{margin-top:0}
}

/* ══════════ 공통 푸터 ══════════ */
.foot{background:var(--nv);color:var(--nv-ink);padding:var(--sp-lg) clamp(20px,4vw,56px) var(--sp-md)} /* v7.3 : 한 단계 축소 */
.foot__in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between}
.foot__addr{font-style:normal;font-size:var(--fs-cap);line-height:1.95;color:var(--nv-ink-2)}
.foot__nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:var(--fs-cap);color:var(--nv-ink-2)}
.foot__nav a{display:inline-block}
.foot__nav a:hover{color:var(--accent)}
.foot__legal{max-width:var(--maxw);margin:34px auto 0;font-size:var(--fs-micro);color:var(--nv-ink-3);line-height:1.8}

/* ══════════════════════════════════════════════════════════════
   v7 (2026-09-07) — 전역 GNB · 푸터 재구성 · 가독성 · 인포그래픽
   ──────────────────────────────────────────────────────────────
   v6 문제 : 페이지마다 상단 바가 달랐다.
     index      .gate__top   — 링크 1개(인사이트)
     about/move/grow .topbar — '처음으로' 만. 인사이트로 갈 방법이 없다
     insights/글 .sitehead   — 4개 메뉴. 여기만 제대로였다
   → .sitehead 하나로 통일한다. 어느 화면에서든 4개 메뉴 + 상담 CTA 가 항상 보인다.
   ══════════════════════════════════════════════════════════════ */

:root{
  --gnb-h:64px;              /* GNB 실제 높이 — 레이아웃 계산에 쓴다 */
  --measure:36em;            /* 본문 한 줄 최대 길이. 한글은 36em 넘으면 눈이 줄을 놓친다 */
  --measure-s:30em;          /* 리드문 · 큰 활자용 */
}

/* 키보드 사용자를 위한 본문 바로가기 — 메뉴가 5개로 늘어 반드시 필요해졌다 */
.skip{
  position:absolute;left:12px;top:-60px;z-index:80;
  background:var(--navy);color:#fff;padding:11px 18px;border-radius:var(--r);
  font-size:var(--fs-cap);font-weight:600;transition:top .2s var(--ease-io);
}
.skip:focus{top:12px}

/* ══════════ 전역 GNB ══════════ */
.sitehead{
  position:sticky;top:0;z-index:45;
  background:rgba(255,255,255,.90);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:background .28s linear,box-shadow .28s linear;
}
.sitehead__in{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  padding:13px clamp(20px,4vw,56px);
  transition:padding .28s var(--ease);
}
/* v7.9 : 데스크톱에서 대분류 메뉴를 화면 정중앙에. 로고 | 메뉴 | CTA 3열 그리드 (양끝 1fr 이라 메뉴가 진짜 중앙에 온다) */
@media (min-width:861px){
  .sitehead__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .sitehead__in > .lock{justify-self:start}
  .sitehead__nav{justify-self:center;margin-right:0}
  .sitehead__end{justify-self:end}
}
.sitehead[data-scrolled]{box-shadow:0 6px 22px -18px rgba(11,18,48,.55)}
.sitehead[data-scrolled] .sitehead__in{padding-top:9px;padding-bottom:9px}

.sitehead__nav{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);
  margin-right:auto;font-size:var(--fs-cap);color:var(--ink-2);
}
.sitehead__nav a{position:relative;padding:6px 0;font-weight:500;white-space:nowrap}
.sitehead__nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--navy);transition:right .3s var(--ease);
}
.sitehead__nav a:hover{color:var(--navy)}
.sitehead__nav a:hover::after{right:0}
/* 현재 위치는 색만으로 알리지 않는다 — 밑줄이 함께 켜진다 */
.sitehead__nav a[aria-current="page"]{color:var(--navy);font-weight:700}
.sitehead__nav a[aria-current="page"]::after{right:0;background:var(--accent);height:3px}

.sitehead__end{display:flex;align-items:center;gap:12px;flex:none}
.sitehead__cta{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:0 18px;border-radius:100px;
  background:var(--navy);color:#fff;font-size:15px;font-weight:600;white-space:nowrap;
  transition:background .28s var(--ease-io),transform .28s var(--ease);
}
.sitehead__cta:hover{background:#22307D;transform:translateY(-1px)}

/* 스크롤 진행 — GNB 아래쪽 1.5px 띠. 별도 고정 요소를 하나 더 띄우지 않는다 */
.sitehead__pg{height:2px;background:transparent}
.sitehead__pg i{display:block;height:100%;width:0;background:var(--navy);transition:width .12s linear}

.sitehead__burger{display:none;width:42px;height:42px;padding:0;place-items:center}
.sitehead__burger i{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s linear}
.sitehead__burger i + i{margin-top:5px}
.sitehead__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sitehead__burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.sitehead__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 어두운 장(about 비트) 위에서는 GNB 도 같이 뒤집는다.
   흰 막대가 네이비 화면 위에 그대로 남으면 화면이 잘려 보인다. */
body[data-tone="dark"] .sitehead{background:rgba(11,18,48,.88);border-bottom-color:var(--nv-line)}
body[data-tone="dark"] .sitehead__nav{color:var(--nv-ink-2)}
body[data-tone="dark"] .sitehead__nav a:hover,
body[data-tone="dark"] .sitehead__nav a[aria-current="page"]{color:var(--accent)}
body[data-tone="dark"] .sitehead__nav a::after{background:var(--accent)}
body[data-tone="dark"] .sitehead .lock__a{color:var(--nv-ink)}
body[data-tone="dark"] .sitehead .lock__b{color:var(--accent)}
body[data-tone="dark"] .sitehead__cta{background:var(--accent);color:#1A1400}
body[data-tone="dark"] .sitehead__cta:hover{background:#FFD84D}
body[data-tone="dark"] .sitehead__burger i{background:var(--nv-ink)}
body[data-tone="dark"] .sitehead__pg i{background:var(--accent)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sitehead{background:var(--bg)}
  body[data-tone="dark"] .sitehead{background:var(--nv)}
}

/* ── 모바일 : 메뉴를 서랍으로 ── */
@media (max-width:860px){
  .sitehead__burger{display:grid}
  .sitehead__cta{display:none}
  .sitehead__in{gap:12px;justify-content:space-between}
  .sitehead__nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:6px clamp(20px,4vw,56px) 14px;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .34s var(--ease),visibility 0s linear .34s;
  }
  .sitehead__nav a{padding:14px 0;font-size:var(--fs-body-s);border-bottom:1px solid var(--line)}
  .sitehead__nav a::after{display:none}
  .sitehead__nav a[aria-current="page"]{border-left:var(--rule) solid var(--accent);padding-left:12px}
  .sitehead__nav[data-open]{max-height:420px;visibility:visible;transition-delay:0s}
  body[data-tone="dark"] .sitehead__nav{background:var(--nv)}
}

/* ══════════ 푸터 재구성 ══════════
   v6 : 주소 한 덩어리 + 링크 한 줄 + 작은 글씨 3줄. 어디를 봐야 할지 알 수 없었다.
   v7 : 브랜드 / 둘러보기 / 한눈에 보는 기준 3열. 법적 고지는 선 아래로 분리한다. */
.foot__cols{
  max-width:var(--maxw);margin:0 auto;
  display:grid;gap:clamp(30px,4vw,64px);
  grid-template-columns:minmax(280px,1.3fr) minmax(150px,.75fr) minmax(220px,1fr);
}
.foot__col{min-width:0}
.foot__col .lock{margin-bottom:20px}
.foot__h{
  font-family:var(--f-brand);font-size:var(--fs-label);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--nv-line);
}
.foot__list{display:flex;flex-direction:column;gap:11px;font-size:var(--fs-cap);color:var(--nv-ink-2)}
.foot__list a{display:inline-block;padding:1px 0;border-bottom:1px solid transparent}
.foot__list a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot__ext{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:var(--fs-cap);color:var(--nv-ink-2);border-bottom:1px solid var(--nv-line-2);padding-bottom:3px;
}
.foot__ext:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot__facts{display:flex;flex-direction:column;gap:0}
.foot__facts > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:var(--hair) solid var(--nv-line);
}
.foot__facts > div:last-child{border-bottom:0}
.foot__facts dt{font-size:var(--fs-cap);color:var(--nv-ink-3)}
.foot__facts dd{
  margin:0;font-family:var(--f-brand);font-weight:600;font-size:var(--fs-body-s);
  color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.foot__legal{
  max-width:var(--maxw);margin:clamp(32px,4vw,52px) auto 0;
  padding-top:22px;border-top:1px solid var(--nv-line);
  font-size:var(--fs-micro);color:var(--nv-ink-3);line-height:1.9;
}
.foot__legal b{color:var(--nv-ink-2);font-weight:500}
@media (max-width:860px){
  .foot__cols{grid-template-columns:1fr;gap:34px}
}
@media (min-width:861px) and (max-width:1023px){
  .foot__cols{grid-template-columns:1fr 1fr;gap:34px}
  .foot__col--brand{grid-column:1 / -1}
}

/* ══════════ 게이트 : 문단 → 인포그래픽 ══════════
   v6 게이트 하단은 수치가 두 줄 문장으로 눌려 있었다. 읽히지 않는다.
   숫자는 문장이 아니라 눈금으로 보여준다. */
.gate{min-height:calc(100svh - var(--gnb-h))}
.gate__sub{max-width:var(--measure)}

.gate__data{
  position:relative;z-index:2;
  padding:var(--sp-md) clamp(20px,4vw,56px);
  margin:0 clamp(20px,4vw,56px);
  border-top:1px solid var(--line);
}

/* ── 계측값 4개 ── */
.kpi{
  display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(4,1fr);border:1px solid var(--line);
}
.kpi > div{background:var(--bg);padding:clamp(16px,2vw,24px) clamp(14px,1.6vw,22px)}
.kpi__n{
  font-family:var(--f-brand);font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;font-size:clamp(26px,3.1vw,42px);line-height:1.05;color:var(--navy);
}
.kpi__l{margin-top:9px;font-size:var(--fs-cap);font-weight:600;line-height:1.5;color:var(--ink)}
.kpi__s{margin-top:5px;font-size:var(--fs-micro);line-height:1.6;color:var(--ink-3)}
@media (max-width:860px){
  .kpi{grid-template-columns:repeat(2,1fr)}
}

/* ── 여덟 공정 레일 ──
   문장으로 "여덟 공정을 한 건물에서" 라고 쓰는 대신, 여덟 칸을 실제로 그린다.
   선이 왼쪽에서 오른쪽으로 차오르며 공정이 이어져 있다는 걸 보여준다. */
.gate__proc{margin-top:clamp(22px,3vw,38px)}
.proc__t{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:var(--fs-cap);color:var(--ink-2);margin-bottom:14px;
}
.proc__t b{font-weight:700;color:var(--ink)}
.proc{
  position:relative;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(124px,1fr);gap:0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;padding-bottom:4px;
}
/* 선은 첫 칸 가운데에서 마지막 칸 가운데까지 (8칸 → 반 칸 = 100/16%) */
.proc::before{
  content:'';position:absolute;left:calc(100%/16);right:calc(100%/16);top:6px;height:1px;background:var(--line-2);
}
/* ── v7.6 : 여덟 공정 아이콘 (24 그리드 · stroke 1.6 · currentColor) ── */
.icx{position:absolute;width:0;height:0;overflow:hidden}
.icx g{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pic{width:1em;height:1em;display:block;overflow:visible}
.pic use{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* v7.7 : 점·아이콘·번호·이름을 칸 가운데로 맞춘다 */
.proc__i{position:relative;padding:26px 8px 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
/* 아이콘 노드 : 선 위에 얹혀 순서대로 켜진다 */
.proc__i > .pic{
  font-size:22px;color:var(--line-2);margin:0 0 10px;
  transition:color .45s var(--ease),transform .45s var(--ease-io);
  transform:translateY(5px) scale(.84);transform-origin:center center;
}
html.rv-on .proc.is-in .proc__i > .pic{color:var(--navy);transform:none}
.proc__i:nth-child(2) > .pic{transition-delay:.10s}.proc__i:nth-child(3) > .pic{transition-delay:.20s}
.proc__i:nth-child(4) > .pic{transition-delay:.30s}.proc__i:nth-child(5) > .pic{transition-delay:.40s}
.proc__i:nth-child(6) > .pic{transition-delay:.50s}.proc__i:nth-child(7) > .pic{transition-delay:.60s}
.proc__i:nth-child(8) > .pic{transition-delay:.70s}
.proc__i::before{
  content:'';position:absolute;left:50%;top:0;width:13px;height:13px;border-radius:50%;
  background:var(--bg);border:var(--rule) solid var(--line-2);transform:translateX(-50%);
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
/* 진행 점이 켜질 때 옐로 헤일로 한 겹 — 흐름이 '지나간다'는 느낌을 준다 */
html.rv-on .proc.is-in .proc__i:nth-child(odd)::before{box-shadow:0 0 0 4px rgba(248,196,41,.30)}
.proc__i:first-child::before,.proc__i:last-child::before{border-color:var(--navy)}
html.rv-on .proc.is-in .proc__i::before{border-color:var(--navy)}
html.rv-on .proc.is-in .proc__i:nth-child(odd)::before{transform:translateX(-50%) scale(1.12)}
/* v7.3 : 레일이 왼쪽에서 오른쪽으로 그려지고, 점이 공정 순서대로 켜진다 */
html.rv-on .proc::before{transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--ease)}
html.rv-on .proc.is-in::before{transform:none}
.proc__i:nth-child(2)::before{transition-delay:.12s}.proc__i:nth-child(3)::before{transition-delay:.24s}.proc__i:nth-child(4)::before{transition-delay:.36s}
.proc__i:nth-child(5)::before{transition-delay:.48s}.proc__i:nth-child(6)::before{transition-delay:.6s}.proc__i:nth-child(7)::before{transition-delay:.72s}.proc__i:nth-child(8)::before{transition-delay:.84s}
/* 결과 화면 이유 목록 안에 들어가는 레일 (move 현장 트랙) */
.proc--in{margin-top:18px;max-width:46em;grid-auto-columns:minmax(86px,1fr)}
.proc--in .proc__i{padding-left:4px;padding-right:4px}
.proc__k{
  display:block;font-family:var(--f-brand);font-size:var(--fs-micro);font-weight:600;letter-spacing:.18em;
  color:var(--ink-3);font-variant-numeric:tabular-nums;line-height:1;
}
html.rv-on .proc.is-in .proc__k{color:var(--navy)}
.proc__n{display:block;margin-top:7px;font-size:var(--fs-cap);font-weight:700;line-height:1.45;color:var(--ink);word-break:keep-all}
@media (prefers-reduced-motion:reduce){
  .proc__i::before{transition:none}
}

/* ══════════ 마감 CTA 밴드 : 빈 오른쪽 절반을 절차 인포그래픽으로 채운다 ══════════
   v6 : 네이비 밴드가 화면 폭을 다 쓰는데 글은 왼쪽 55% 에만 있었다.
   오른쪽 절반이 비어 "아직 안 만든 화면"처럼 보였다.
   → 무엇을 하면 무엇이 돌아오는지 3단계로 세운다. 문장 대신 절차를 보여준다. */
.art-cta__in,
.res__cta .res__in{
  display:grid;gap:0 clamp(30px,4vw,64px);
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);   /* v7.3 : 버튼 3개 + '질문 다시 하기'가 한 줄에 들어가게 왼쪽 열을 넓혔다 */
  align-items:start;
}
.art-cta__in > *,
.res__cta .res__in > *{grid-column:1}
/* ★ 앞 규칙(.res__cta .res__in > *)이 특이도 0,2,0 이라 .ctaflow 한 개로는 못 이긴다.
   같은 형태로 맞춰 준다. 이걸 놓치면 인포그래픽이 왼쪽 열로 떨어진다.
   ★ v7.3 (2026-09-10) 여백 사고 — row-gap 이 64px 인 상태에서 span 9 를 주면
   왼쪽 열에 항목이 2~3개뿐이라도 빈 행 사이 간격 8개(최대 512px)가 그대로 밴드 높이가 됐다.
   row-gap 을 0 으로 내리고(왼쪽 항목은 이미 자기 margin-top 을 갖고 있다) span 도 3 으로 줄였다. */
.art-cta__in > .ctaflow,
.res__cta .res__in > .ctaflow{grid-column:2;grid-row:1 / span 3;align-self:start}
.ctaflow{display:flex;flex-direction:column;gap:0}
.ctaflow__i{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:start;
  padding:0 0 clamp(22px,3vw,32px) 0;
}
.ctaflow__i:last-child{padding-bottom:0}
/* 단계를 잇는 세로선 — 마지막 항목에는 그리지 않는다 */
.ctaflow__i:not(:last-child)::before{
  content:'';position:absolute;left:16px;top:34px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--accent),rgba(248,196,41,.18));
}
/* 기본값은 네이비다. 흰 바탕에 잘못 놓여도 읽힌다(옐로였다면 대비 1.71:1 로 안 읽힌다). */
.ctaflow__k{
  grid-row:1 / span 2;width:33px;height:33px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  border:1px solid var(--navy);color:var(--navy);background:transparent;
  font-family:var(--f-brand);font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;
}
/* 어두운 밴드 안에서만 옐로로 바꾼다 */
.art-cta .ctaflow__k,
.res__cta .ctaflow__k{border-color:var(--accent);color:var(--accent);background:var(--nv)}
.ctaflow__t{font-size:var(--fs-body-s);font-weight:700;line-height:1.45;color:var(--nv-ink);padding-top:5px}
.ctaflow__d{margin-top:6px;font-size:var(--fs-cap);line-height:1.7;color:var(--nv-ink-3)}
@media (max-width:1023px){
  .art-cta__in,.res__cta .res__in{grid-template-columns:1fr}
  .art-cta__in > *,.res__cta .res__in > *{grid-column:1}
  .art-cta__in > .ctaflow,
  .res__cta .res__in > .ctaflow{grid-column:1;grid-row:auto;margin-top:8px;padding-top:26px;border-top:1px solid var(--nv-line)}
}

/* ══════════ 가로 스크롤 힌트 ══════════
   좁은 화면에서 여덟 공정 레일은 옆으로 밀린다. 밀 수 있다는 걸 오른쪽 페이드로 알린다. */
@media (max-width:860px){
  .gate__proc{position:relative}
  .gate__proc::after{
    content:'';position:absolute;right:0;top:0;bottom:8px;width:44px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),var(--bg));
  }
}

/* CTA 밴드가 그리드로 바뀌면서 링크가 열 전체 폭을 먹었다.
   밑줄이 화면을 가로지르고 클릭 영역도 글자 밖까지 잡힌다. 글자 폭만 쓴다. */
.res__cta .res__redo,
.res__cta .res__in > a{justify-self:start}

/* ══════════ 진단 시작 페이지 (start.html) ══════════
   GNB 의 '물류 진단 시작' 이 여기로 온다. 갈림길만 있는 화면이라
   선택지를 좌우로 나란히 놓고 크기를 같게 준다. 어느 쪽도 기본값이 아니다.
   컨테이너에 .gate__grid 를 같이 붙여 reveal.js 의 리빌 대상(.gate__grid > .door)을 그대로 탄다. */
.pick{grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:clamp(12px,1.6vw,20px)}
.pick .door{min-height:min(440px,52svh)}
.pick .door__t{font-size:clamp(26px,3vw,42px)}
.pick .door__d{font-size:var(--fs-body-s);max-width:26em}
/* 구분선이 글자 폭에서 끊기면 미완성으로 보인다. max-width 를 걸지 않고
   컨테이너 폭 전체를 쓰되, 문장 자체가 짧아 두 줄을 넘지 않는다. */
.pick__note{
  position:relative;z-index:2;
  padding:clamp(20px,2.4vw,30px) 0 var(--sp-lg);
  margin:0 clamp(20px,4vw,56px);border-top:1px solid var(--line);
  font-size:var(--fs-cap);line-height:1.85;color:var(--ink-3);
}
.pick__note a{color:var(--navy);font-weight:600;border-bottom:1px solid currentColor;padding-bottom:1px}
@media (max-width:860px){
  .pick{grid-template-columns:1fr;grid-template-rows:none}
  .pick .door{min-height:210px}
}

/* ══ v8.0 (2026-09-21) 브랜드 숫자 서체 통일 ══
   계측값·푸터 At a glance 처럼 숫자가 주인공인 자리는 전부 트랜쇼 숫자 서체(Museo)로.
   한글 단위(건·벌·개사)는 Museo 에 글리프가 없어 본문 서체로 자연스럽게 넘어간다. */
.kpi__n,.foot__facts dd,.num,.fig{font-family:'Trenshow Num','Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif}
.kpi__n{font-weight:600;letter-spacing:-.025em}
.foot__facts dd{font-weight:600;letter-spacing:-.005em}

/* ══ v8.0 게이트 설명문 — 여섯 줄이 되어 줄간격을 넓히고 첫 문장에 무게를 싣는다 ══ */
.gate__sub{line-height:2;margin-top:18px;max-width:44em}
.gate__k{font-weight:700;color:var(--ink)}

/* ══ v8.1 숫자는 어디서든 트랜쇼 숫자 서체(Museo) ══
   라벨·태그·아이브로우 서체(PF Fusion · Sans Condensed) 안의 숫자까지 Museo 로 바꾼다.
   같은 family 를 숫자 범위만 다시 선언하면 브라우저가 숫자 글자만 이 파일에서 가져온다.
   (★ font-weight 범위를 원래 선언과 똑같이 맞춰야 한다. 다르면 브라우저가 굵기로 먼저 골라 숫자 면이 무시된다 — 실제로 밟음.
    같을 때는 나중에 선언한 쪽이 겹치는 범위에서 이긴다. 이 블록은 반드시 위 @font-face 들보다 뒤에) */
@font-face{font-family:'Trenshow Brand';src:url('../assets/fonts/museo-500.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0025,U+002B-002E,U+0030-0039}
@font-face{font-family:'Trenshow Cond';src:url('../assets/fonts/museo-500.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0025,U+002B-002E,U+0030-0039}

/* ══ v8.2 상담 문의 접수 (네이비 CTA 안, 전 상담 페이지 공통) ══ */
.inq{margin-top:clamp(34px,4vw,56px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--nv-line);color:var(--nv-ink)}
.inq__k{font-family:var(--f-brand);font-size:var(--fs-label);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.inq__t{margin-top:10px;font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.25}
.inq__d{margin-top:10px;font-size:var(--fs-cap);line-height:1.8;color:var(--nv-ink-2);word-break:keep-all}
.inq__grid{margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1080px}
.inq__f{display:flex;flex-direction:column;gap:7px}
.inq__f--wide{grid-column:1/-1}
.inq__f > span{font-size:var(--fs-micro);color:var(--nv-ink-2)}
.inq__f b,.inq__agree b{color:var(--accent);font-weight:600}
.inq input,.inq select,.inq textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--nv-line-2);border-radius:var(--r);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:16px;outline:0;transition:border-color .2s var(--ease-io),background .2s var(--ease-io)}
.inq textarea{min-height:88px;resize:vertical;line-height:1.6}
.inq select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F8C429' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.inq select option{color:#12141C}
.inq input::placeholder,.inq textarea::placeholder{color:rgba(255,255,255,.38)}
.inq input:focus,.inq select:focus,.inq textarea:focus{border-color:var(--accent);background:rgba(255,255,255,.1)}
.inq.is-try input:invalid,.inq.is-try textarea:invalid{border-color:#FF8A80}
.inq__agree{margin-top:16px;display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-micro);line-height:1.7;color:var(--nv-ink-2);max-width:1080px;cursor:pointer}
.inq__agree input{width:18px;height:18px;min-height:0;margin-top:3px;flex:none;accent-color:var(--accent);padding:0}
.inq__foot{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.inq__btn{min-height:56px;padding:0 32px}
.inq__btn[disabled]{opacity:.6}
.inq__msg{font-size:var(--fs-cap);color:var(--nv-ink-2)}
.inq__msg.is-bad{color:#FFB4AB}
.inq__done{margin-top:20px;padding:24px 26px;border:1px solid var(--accent);border-radius:var(--r-lg);max-width:640px}
.inq__done b{font-size:var(--fs-body);color:var(--accent)}
.inq__done p{margin-top:10px;font-size:var(--fs-cap);line-height:1.8;color:var(--nv-ink-2)}
.inq__no{font-family:var(--f-brand);letter-spacing:.1em}
.inq__no span{font-family:var(--f-num);color:#fff;margin-left:6px}
@media (max-width:980px){.inq__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.inq__grid{grid-template-columns:1fr;gap:12px}.inq__btn{width:100%;justify-content:center}}
/* v8.2 : 오른쪽 열의 3단계 인포그래픽(.ctaflow)이 상담 접수 폼으로 바뀌어 밴드는 한 열로 돌아간다 */
.art-cta__in,.res__cta .res__in{grid-template-columns:1fr}
.art-cta__in > .inq,.res__cta .res__in > .inq{grid-column:1/-1}

/* ══════════════════════════════════════════════════════════════
   v8.2 (2026-09-21) 모바일 가독성 — 갤럭시 폴드7 접은 화면(약 380~412px, 세로가 긴 화면) 기준
   ① 화면에 보이는 글자는 14px 미만을 두지 않는다 (라벨·태그 12.5 → 14)
   ② 누르는 것은 44px 이상 (푸터 링크·칩·READ)
   ③ 푸터는 세 묶음 아코디언 — 회사 정보만 펼쳐 두고 Menu · At a glance 는 눌러서 연다
   ④ 좁은 폭에서 문장이 한두 글자만 다음 줄로 떨어지지 않게 keep-all + pretty
   ══════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  :root{--fs-micro:14px;--fs-label:14px;--fs-cap:15.5px;--fs-body-s:17px;--fs-body:18px}
  .lock__b,.lock--sm .lock__b{font-size:12px;letter-spacing:.2em}   /* 로고 밑 워드마크 — 장식 텍스트, 예외 */
  .art__pl,.mag .art__pl{font-size:13px;letter-spacing:.16em}
  .eyebrow{letter-spacing:.24em;text-indent:.24em}
  h1,h2,h3,p,li,dd,dt,figcaption{word-break:keep-all;overflow-wrap:anywhere}
  .gate__title{font-size:clamp(30px,8.6vw,38px)}
  .gate__sub{font-size:16px;line-height:1.85}
  .kpi > div{padding:16px 14px}
  .kpi__n{font-size:26px}
  /* 여덟 공정 레일 : 옆으로 미는 대신 4×2 로 접는다 — 폴드 접은 화면에서 옆 스크롤은 잘 안 쓴다 */
  .proc{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;row-gap:12px}
  .proc::before{display:none}
  .proc__i{padding-top:10px}
  .gate__proc::after{display:none}
  /* 칩·READ·FAQ 링크 — 손가락 크기 */
  .chip{min-height:44px;padding:0 16px}
  .mag .art__go,.news__go,.mag__faq__all,.foot__ext{min-height:44px;align-items:center}
  .mag__faq__list a{min-height:56px}
  .btn{min-height:52px;width:100%;justify-content:center}
  .res__cta .row,.art-cta .row{flex-direction:column;align-items:stretch}
  .res__cta .row .res__redo{margin:8px 0 0;align-self:center}
  /* 푸터 아코디언 */
  .foot{padding:34px clamp(20px,4vw,56px) 24px}
  .foot__cols{gap:0}
  .foot__col{border-top:1px solid var(--nv-line);padding:4px 0}
  .foot__col--brand{border-top:0;padding:0 0 18px}
  .foot__h{margin:0;position:relative;display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .foot__h::after{content:'';width:9px;height:9px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:4px}
  .foot__col[data-open] .foot__h::after{transform:rotate(-135deg)}
  .foot__list,.foot__facts{display:none;padding:0 0 18px}
  .foot__col[data-open] .foot__list{display:flex;gap:0}
  .foot__col[data-open] .foot__facts{display:flex}
  .foot__list a{display:block;padding:12px 0;border-bottom:1px solid var(--nv-line);font-size:var(--fs-body-s)}
  .foot__list li:last-child a{border-bottom:0}
  .foot__facts > div{padding:13px 0}
  .foot__legal{margin-top:18px;padding-top:16px}
  .foot__addr{font-size:15px}
}
/* 폴드7 접은 화면 · 소형 폰(≤400px) : 한 글자 더 여유 */
@media (max-width:400px){
  body{--pad-x:18px}
  .gate__title{font-size:31px}
  .door__t{font-size:24px}
  .kpi{grid-template-columns:repeat(2,1fr)}
  .proc__n{font-size:13.5px}
  .shelf__t{font-size:21px}
  .inq input,.inq select,.inq textarea{font-size:16px}  /* iOS 확대 방지 + 가독 */
}
/* v8.3 : 상담 폼 — 수치 3칸 삭제 후 2열(회사·담당자 / 연락처·유형) + 문의 내용 */
.inq__grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.inq__agree{max-width:820px}

/* ══ v8.5 · 2026-09-22 — 인포그래픽(.ifx)
   x-edit(GPT Image 2.5)로 만든 설명 그림. 회사 사진만 있던 자리에 "그 페이지가 말하는 것"을 그림으로 둔다.
   그림 안 글자와 같은 내용을 alt·figcaption 에도 적는다(검색·스크린리더·GEO).
   폰(≤680px)에서는 그림을 720px 로 두고 옆으로 밀어 보게 한다 — 줄이면 작은 글자가 읽히지 않는다. ══ */
.ifx{margin:0 auto;padding:clamp(28px,5vw,64px) clamp(16px,4vw,56px);max-width:calc(var(--maxw) + 112px);box-sizing:border-box}
.ifx__sc{border-radius:var(--r-lg)}
.ifx__im{display:block;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid #E6E7EE;
  box-shadow:0 1px 0 rgba(18,20,28,.04),0 22px 50px -30px rgba(43,59,149,.5)}
.ifx__im img{display:block;width:100%;height:auto}
.ifx figcaption{margin-top:14px;font-size:var(--fs-cap);line-height:1.75;color:var(--ink-3);text-align:center;word-break:keep-all}
.ifx__hint{display:none;margin-top:8px;font-size:var(--fs-micro);color:var(--ink-3);text-align:center}
.gate__data .ifx{padding:clamp(22px,3vw,38px) 0 0;max-width:none}
@media (max-width:680px){
  .ifx__sc{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .ifx__sc .ifx__im{width:720px;max-width:none}
  .ifx__hint{display:block}
}
.res__sec .ifx--in{padding:clamp(20px,3vw,32px) 0 0;max-width:none}
.art-body .ifx{padding:0;max-width:none;margin:0 0 28px}

/* ══ v8.6 · 2026-09-22 — 폰에서 그림이 옆으로 밀리지 않는다
   인포그래픽(.ifx)은 폰용 세로 그림(-m.webp, 4:5, 글자 큼)으로 바꿔 끼우고 화면 폭에 맞춘다.
   넓은 도해(.ig--wide · .figscroll)도 폭에 맞추고, 누르면 가로로 눕혀 크게 본다(js/zoom.js). ══ */
@media (max-width:680px){
  .ifx__sc{overflow:visible}
  .ifx__sc .ifx__im{width:auto;max-width:100%}
  .ifx__hint{display:none!important}
  .ifx{padding-left:16px;padding-right:16px}
  .figscroll{overflow:visible}
  .figscroll svg{min-width:0!important;width:100%;height:auto}
  .ig--wide{overflow:visible}
  .ig--wide svg{min-width:0!important}
  .zoomable{position:relative;cursor:zoom-in}
  .zoomable::after{content:'눌러서 크게 보기';position:absolute;right:8px;bottom:8px;padding:5px 10px;border-radius:999px;
    background:rgba(18,20,28,.72);color:#fff;font-size:13px;line-height:1.2;pointer-events:none}
}
.zoom{position:fixed;inset:0;z-index:9999;background:rgba(11,18,48,.94);display:flex;align-items:center;justify-content:center}
.zoom[hidden]{display:none!important}
.zoom__stage{transform:rotate(90deg);background:#fff;border-radius:10px;padding:0;flex:none}
.zoom__stage svg{display:block;width:100%;height:100%;font-family:'Pretendard Variable',Pretendard,sans-serif}
.zoom__x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:#fff;color:#12141C;font-size:15px;font-weight:700}
html.zoom-on,html.zoom-on body{overflow:hidden}