@charset "UTF-8";
/* ============================================================================
   newsite01 — BORDER PRESS / 국경활자 · 야간판
   설계: GDWEB 수상작 12곳 실측 기반 (2026-09-08)
   원칙: box-shadow 0 · 중간 크기 활자 없음 · 카드 대신 헤어라인 · 1800px 지면
   ========================================================================== */

/* ── 토큰 ────────────────────────────────────────────────────────────── */
:root{
  /* 지면 — KRDS 그레이. 배경은 흰 → f8 → f0 한 단계씩만 */
  --paper:#FFFFFF;      --paper-2:#F8F8F8;   --paper-3:#F0F0F0;
  --ink:#1D1D1D;        --ink-2:#555555;     --ink-3:#6B6B6B; /* #717171→#6B6B6B: paper-3(#F0F0F0) 위 4.5:1 확보 */
  --night:#1D1D1D;      --abyss:#1D1D1D;
  --cream:#FFFFFF;      --cream-2:#D8D8D8;

  /* 액센트 1색. 화면 색 사용의 5% 이하로만 투입 */
  --accent:#A3252F;     --accent-deep:#7E1C24;  --accent-soft:#FBF1F2;

  /* 괘선 */
  --line:#D8D8D8;
  --line-dark:rgba(255,255,255,.22);
  --rule-hair:transparent;
  --rule-hair-dark:transparent;
  --rule-bold:3px;

  /* 챕터 런타임 변수 */
  --bg:var(--paper);  --fg:var(--ink);  --fg-2:var(--ink-2);
  --acc:var(--accent);  --acc-link:var(--accent);
  --line-c:var(--line);  --rule-c:transparent;
  --grain:0;

  /* 활자 — 여섯 단계뿐. 사이 값을 만들지 않는다 */
  --fz-label:13px;
  --fz-body:17px;
  --fz-lead:clamp(16px,1.2vw,18px);
  --fz-h2:clamp(21px,2.1vw,32px);
  --fz-display:clamp(28px,3.9vw,64px);
  --fz-mega:clamp(40px,5vw,80px);
  --fz-stat:clamp(32px,3.4vw,54px);

  --f-sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
           'Apple SD Gothic Neo',system-ui,sans-serif;
  --f-disp:'Plus Jakarta Sans','Pretendard Variable',Pretendard,var(--f-sans);
  --f-mono:'IBM Plex Mono','Pretendard Variable',Pretendard,
           'SFMono-Regular',Consolas,monospace;

  /* 지면 규격 */
  --cols:12;
  --gutter:clamp(16px,3.2vw,64px);
  --container:min(calc(100% - 2 * var(--gutter)),1160px);
  --pad-sec:clamp(52px,5vw,88px);
  --header-h:72px;

  /* 모션 */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-ui:cubic-bezier(.22,.61,.36,1);
  --e-chapter:cubic-bezier(.4,0,.2,1);
  --d-hover:.2s; --d-reveal:.001s; --d-mask:.001s; --d-chapter:.2s;
  --stagger:.05s; --blur-in:0px; --y-in:10px;
}
@media (max-width:1024px){ :root{ --cols:8 } }
@media (max-width:768px){  :root{ --cols:4; --header-h:60px } }

/* ── 리셋 ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{word-break:keep-all}
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
  background:var(--bg); color:var(--fg);
  transition:background-color var(--d-chapter) var(--e-chapter),
             color var(--d-chapter) var(--e-chapter);
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-sans); font-size:var(--fz-body);
  line-height:1.7; letter-spacing:0;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,video{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.3}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--acc); outline-offset:2px;
  box-shadow:0 0 0 4px rgba(163,37,47,.24)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 지면 ────────────────────────────────────────────────────────────── */
.wrap{width:var(--container); margin-inline:auto;
  padding-inline:max(0px,env(safe-area-inset-left))}
.bleed{width:var(--container); margin-inline:auto; padding-inline:0}
.full{width:100%}   /* 배경 띠만 전폭. 내용은 .bleed 로 감싼다 */
.section{padding-block:var(--pad-sec); position:relative}

/* 12컬럼 관통 괘선 */
.rules{display:none}

/* ── 활자 유틸 ───────────────────────────────────────────────────────── */
.display{font-family:var(--f-disp); font-size:var(--fz-display);
  font-weight:700; letter-spacing:-.02em; line-height:1.3; text-wrap:balance}
.mega{font-family:var(--f-disp); font-size:var(--fz-mega); font-weight:800;
  letter-spacing:-.05em; line-height:.86; pointer-events:none}
.h2{font-size:var(--fz-h2); letter-spacing:-.02em; line-height:1.35; text-wrap:balance}
.lead{font-size:var(--fz-lead); letter-spacing:0; line-height:1.65; color:var(--fg-2)}
.label{font-family:var(--f-mono); font-size:var(--fz-label); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2)}
.idx{font-family:var(--f-mono); font-size:var(--fz-label); font-weight:500;
  letter-spacing:.06em; color:var(--acc); font-variant-numeric:tabular-nums}
.outline{-webkit-text-stroke:1.5px currentColor;
  -webkit-text-fill-color:transparent; paint-order:stroke fill}
@supports not (-webkit-text-stroke:1px black){ .outline{-webkit-text-fill-color:currentColor; opacity:.5} }

/* ── 버튼 (pill · 반전) ──────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:12px;
  padding:13px 26px; border-radius:6px; border:1px solid var(--acc); color:var(--acc);
  background:transparent; font-size:16px; font-weight:700; letter-spacing:-.02em;
  transition:background-color var(--d-hover) var(--e-ui),
             color var(--d-hover) var(--e-ui);
  will-change:background-color}
.btn:hover,.btn:focus-visible{background:currentColor}
.btn:hover span,.btn:focus-visible span{color:var(--bg)}
.btn .arw{width:18px;height:1.25px;background:currentColor;position:relative;
  transition:width var(--d-hover) var(--e-ui)}
.btn .arw::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:1.25px solid currentColor;border-right:1.25px solid currentColor;
  transform:translateY(-50%) rotate(45deg)}
.btn:hover .arw{width:28px}
.btn:hover .arw,.btn:hover .arw::after{background-color:var(--bg);border-color:var(--bg)}

/* ── 리빌 ────────────────────────────────────────────────────────────── */
/* 스크롤 등장 애니메이션 없음 (발주처 지시). 마크업은 유지해 언제든 되살릴 수 있다. */
[data-reveal]{opacity:1; transform:none; filter:none}
[data-reveal="line"]{display:block}
[data-reveal="line"] > span{display:block}

/* ── 헤더 ────────────────────────────────────────────────────────────── */
.site-header{position:fixed; inset:0 0 auto; z-index:200; height:var(--header-h);
  display:flex; align-items:center; padding-inline:var(--gutter);
  mix-blend-mode:difference; color:#fff;
  transition:transform .45s var(--e-ui)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header.is-stuck{mix-blend-mode:normal; background:var(--bg); color:var(--fg);
  border-bottom:1px solid var(--line-c);
  transition:transform .45s var(--e-ui), background-color var(--d-chapter) var(--e-chapter),
             color var(--d-chapter) var(--e-chapter)}
.brand{display:flex; align-items:baseline; gap:10px;
  font-weight:800; font-size:19px; letter-spacing:-.04em}
.brand small{font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; opacity:.7}
.gnb{margin-inline-start:auto; display:flex; align-items:center; gap:4px}
.gnb a{font-size:15px; font-weight:600; letter-spacing:-.02em; padding:8px 14px;
  position:relative}
.gnb a::after{content:""; position:absolute; left:14px; right:14px; bottom:4px;
  height:1px; background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-hover) var(--e-ui)}
.gnb a:hover::after,.gnb a[aria-current="page"]::after{transform:scaleX(1)}
.nav-toggle{display:none; width:44px; height:44px; margin-left:auto;
  align-items:center; justify-content:center}
.nav-toggle i{display:block; width:22px; height:1.5px; background:currentColor;
  position:relative}
.nav-toggle i::before,.nav-toggle i::after{content:""; position:absolute; left:0;
  width:22px; height:1.5px; background:currentColor; transition:transform var(--d-hover) var(--e-ui)}
.nav-toggle i::before{top:-7px} .nav-toggle i::after{top:7px}

/* ── 00 HERO ─────────────────────────────────────────────────────────── */
.hero{position:relative; height:clamp(480px,64svh,620px); min-height:460px; overflow:clip;
  background:var(--night); color:var(--cream); isolation:isolate}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__shot{position:absolute; inset:0; background-size:cover; background-position:center;
  filter:grayscale(.35) contrast(1.06); opacity:0; visibility:hidden;
  transition:opacity .8s var(--e-chapter), visibility .8s}
.hero__shot.is-on{opacity:1; visibility:visible}
.hero__scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,15,26,.72) 0%,rgba(11,15,26,.18) 30%,
                             rgba(11,15,26,.78) 68%,rgba(11,15,26,.94) 100%)}
.hero .rules{z-index:2}
.hero__type{position:absolute; z-index:3; left:calc(var(--gutter) + 74px);
  right:var(--gutter); bottom:calc(52px + env(safe-area-inset-bottom))}
.hero__type .display{max-width:min(100%,15em); margin-bottom:18px}
.hero__type .label{color:rgba(236,232,224,.62); margin-bottom:14px; display:block}

.hero__type .lead{color:rgba(236,232,224,.82); max-width:40em; font-size:clamp(15px,1.2vw,17px); margin-bottom:24px}
.hero__meta{position:absolute; z-index:3; right:var(--gutter);
  bottom:calc(52px + env(safe-area-inset-bottom)); text-align:right;
  display:grid; gap:9px}
.hero__meta span{font-family:var(--f-mono); font-size:var(--fz-label);
  letter-spacing:.06em; color:var(--cream-2)}
.hero__meta b{color:var(--cream); font-weight:500}
.hero__scroll{position:absolute; z-index:3; left:var(--gutter); top:50%;
  transform:translateY(-50%); display:flex; flex-direction:column;
  align-items:center; gap:16px}
.hero__scroll .w{writing-mode:vertical-rl; font-family:var(--f-mono);
  font-size:11px; letter-spacing:.28em; color:var(--cream-2)}
.hero__scroll--off .ln{width:1px; height:64px; background:var(--line-dark); position:relative;
  overflow:hidden}
.hero__scroll--off .ln::after{content:""; position:absolute; inset:0; background:var(--cream);
  animation:scrollLn 2.4s var(--e-chapter) infinite}
@keyframes scrollLn{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* 슬라이드 인덱스 레일 (슬라이드 모드에서만) */
.hero__rail{position:absolute; z-index:4; left:calc(var(--gutter) + 74px); bottom:20px;
  display:flex; gap:20px; align-items:center}
.hero__rail button{font-family:var(--f-mono); font-size:12px; letter-spacing:.06em;
  color:var(--cream-2); position:relative; padding-bottom:9px;
  transition:color var(--d-hover) var(--e-ui)}
.hero__rail button::after{content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--line-dark)}
.hero__rail button.is-on{color:var(--cream)}
.hero__rail button.is-on::after{background:var(--acc); transform-origin:left;
  animation:railBar var(--hero-dur,6500ms) linear forwards}
@keyframes railBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero.is-paused .hero__rail button.is-on::after{animation-play-state:paused}
.hero__nav{position:absolute; z-index:4; right:var(--gutter); top:50%;
  transform:translateY(-50%); display:grid; gap:10px}
.hero__nav button{width:42px; height:42px; border:1px solid var(--line-dark);
  border-radius:6px; display:grid; place-items:center;
  transition:background-color var(--d-hover) var(--e-ui)}
.hero__nav button:hover{background:rgba(236,232,224,.14)}
.hero__nav button i{width:8px;height:8px;border-top:1.25px solid var(--cream);
  border-right:1.25px solid var(--cream)}
.hero__nav .up i{transform:rotate(-45deg); margin-top:3px}
.hero__nav .dn i{transform:rotate(135deg); margin-bottom:3px}

/* ── 01 마퀴 티커 ────────────────────────────────────────────────────── */
.ticker{position:relative; z-index:5; overflow-x:clip;
  background:var(--accent); color:var(--cream);
  border-top:var(--rule-bold) solid var(--accent);
  height:clamp(64px,7vw,104px); display:flex; align-items:center}
.ticker .mq{display:flex; width:max-content; will-change:transform;
  animation:mq 28s linear infinite;
  animation-duration:calc(28s / var(--mq-speed,1))}
.ticker:hover .mq{animation-duration:calc(80s / var(--mq-speed,1))}
@keyframes mq{to{transform:translateX(-50%)}}
.ticker .g{display:flex; align-items:center; flex:0 0 auto}
.ticker .g > span{font-family:var(--f-disp); font-weight:800;
  font-size:clamp(30px,5vw,80px); letter-spacing:-.03em; line-height:1;
  padding-inline:.36em; white-space:nowrap; flex:0 0 auto}
.ticker .g > span:nth-of-type(2n){-webkit-text-stroke:1.5px var(--cream);
  -webkit-text-fill-color:transparent}
.ticker .g > i{width:6px; height:6px; border-radius:50%; background:var(--cream);
  flex:0 0 auto; opacity:.75; padding:0; margin:0}

/* ── 02 NUMBERS ──────────────────────────────────────────────────────── */
.numbers{position:relative; overflow:clip}
.numbers .mega-bg{position:absolute; right:-6vw; top:14%; z-index:0;
  color:var(--fg); opacity:.05; white-space:nowrap;
  transform:translateX(var(--px,0))}
.numbers .grid{position:relative; z-index:2; display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:0}
.numbers .cell{padding:22px clamp(14px,2vw,30px); border-left:1px solid var(--line-c)}
.numbers .cell:first-child{border-left:0; padding-left:0}
.numbers .cell:nth-child(1),.numbers .cell:nth-child(3){align-self:start}
.numbers .cell:nth-child(2),.numbers .cell:nth-child(4){align-self:end;
  padding-top:clamp(20px,2.6vw,44px)}
.numbers b{display:block; font-family:var(--f-disp); font-size:var(--fz-stat);
  font-weight:800; letter-spacing:-.05em; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--fg)}
.numbers b em{font-style:normal; font-size:.24em; letter-spacing:-.02em;
  margin-left:.12em; vertical-align:baseline}
.numbers .nm{display:block; margin-top:14px; font-size:16px; font-weight:700;
  letter-spacing:-.025em; color:var(--fg)}
.numbers .nt{display:block; margin-top:7px; font-size:14.5px;
  letter-spacing:-.015em; color:var(--fg-2); line-height:1.65}

/* ── 03 PURPOSE (전폭 반전 리스트) ───────────────────────────────────── */
.purpose{position:relative}
.plist{position:relative; z-index:2; border-top:1px solid var(--line-c)}
.prow{position:relative; border-bottom:1px solid var(--line-c);
  transition:opacity var(--d-hover) var(--e-ui)}
.prow > a{display:grid; align-items:center;
  width:var(--container); margin-inline:auto; position:relative; z-index:2}
.prow .idx{align-self:center}
.prow .nm{font-size:var(--fz-h2); font-weight:800; letter-spacing:-.038em; line-height:1.1}
.prow .sm{font-size:16px; color:var(--fg-2); line-height:1.7; letter-spacing:-.02em}
.prow .go{justify-self:end; width:40px; height:1px; background:var(--fg-2);
  position:relative; transition:width var(--d-hover) var(--e-ui),
    background-color var(--d-hover) var(--e-ui)}
.prow .go::after{content:""; position:absolute; right:0; top:50%; width:8px; height:8px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  color:var(--fg-2); transform:translateY(-50%) rotate(45deg)}
.prow::before{content:""; position:absolute; inset:0; z-index:0; background:var(--fg);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--e-ui)}
.plist:hover .prow{opacity:.38}
.plist .prow:hover,.plist .prow:focus-within{opacity:1}
.prow:hover::before,.prow:focus-within::before{transform:scaleY(1); transform-origin:top}
.prow:hover .nm,.prow:hover .sm,.prow:focus-within .nm,.prow:focus-within .sm{color:var(--bg)}
.prow:hover .go,.prow:focus-within .go{width:64px; background:var(--bg)}
.prow:hover .go::after,.prow:focus-within .go::after{color:var(--bg)}
.prow .nm,.prow .sm,.prow .go{transition:color var(--d-hover) var(--e-ui)}

/* ── 04 GUIDE 6 (핀 고정 가로 레일) ──────────────────────────────────── */
.chapter{position:relative}
.stage{position:static; height:auto; overflow:visible;
  display:block; padding-block:var(--pad-sec)}
.stage-head{width:var(--container); margin:0 auto clamp(22px,2.6vw,36px)}
.rail{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px); width:var(--container); margin-inline:auto}
.panel{background:var(--paper-2); display:flex; flex-direction:column;
  border-radius:0; min-height:0}
.panel .idx{margin-bottom:auto}
.panel h3{font-size:clamp(24px,2.8vw,42px); letter-spacing:-.038em; margin:32px 0 14px}
.panel p{font-size:16px; color:var(--fg-2); line-height:1.75}
.panel .go{margin-top:26px; font-family:var(--f-mono); font-size:var(--fz-label);
  letter-spacing:.08em; text-transform:uppercase; color:var(--acc)}
.seg{display:none}

/* ── 05 COMPARE (신문 조판표) ────────────────────────────────────────── */
.press-table{position:relative; z-index:2; overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 92%,transparent 100%)}
.press-table table{border-collapse:collapse; width:100%; min-width:640px}
.press-table th,.press-table td{text-align:left; padding:26px 22px;
  border-bottom:1px solid var(--line-c); vertical-align:top;
  font-size:17px; line-height:1.6; letter-spacing:-.02em}
.press-table thead th{font-family:var(--f-mono); font-size:var(--fz-label);
  font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-2); padding-block:14px 16px;
  border-bottom:3px solid var(--fg)}
.press-table tbody th{font-weight:700; position:sticky; left:0;
  background:var(--bg); font-size:16px; white-space:nowrap}
.press-table tbody tr{transition:background-color .25s var(--e-ui)}
.press-table tbody tr:hover{background:var(--paper-2)}
.press-table tbody tr:hover th{background:var(--paper-2)}
.press-table td{font-variant-numeric:tabular-nums}

/* ── 06 PROCESS (260px 인덱스 교체 핀) ──────────────────────────────── */
.proc .stage{display:block; padding-inline:var(--gutter)}
.proc-idx{flex:0 0 42%; position:relative; height:clamp(120px,20vw,300px)}
.proc-idx span{position:absolute; inset:0; display:flex; align-items:center;
  font-family:var(--f-disp); font-size:var(--fz-mega); font-weight:800;
  letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums;
  color:var(--acc); opacity:0; visibility:hidden;
  transform:translateY(40%); filter:blur(6px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out),
             filter .5s var(--e-out), visibility .5s}
.proc-idx span.is-on{opacity:1; visibility:visible; transform:none; filter:none}
.proc-idx span.is-out{opacity:0; visibility:hidden; transform:translateY(-40%); filter:blur(6px)}
.proc-body{flex:1 1 auto; min-width:0; border-left:1px solid var(--line-c);
  padding-left:clamp(20px,3vw,52px); position:relative}
.proc-body::before{content:""; position:absolute; left:-1px; top:0; width:2px;
  height:calc(var(--p,0) * 100%); background:var(--acc)}
.proc-body article{position:absolute; top:0; left:0; right:0;
  opacity:0; visibility:hidden; transform:translateY(24px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out), visibility .5s;
  pointer-events:none; max-width:46ch}
.proc-body article.is-on{position:relative; opacity:1; visibility:visible;
  transform:none; pointer-events:auto}
.proc-body h3{font-size:clamp(28px,5vw,72px); letter-spacing:-.045em; margin-bottom:20px}
.proc-body p{font-size:var(--fz-lead); color:var(--fg-2); line-height:1.7}

/* ── 07 CAUTION (심연) ──────────────────────────────────────────────── */
.caution{position:relative; overflow:clip}
.caution .mega-bg{position:absolute; left:-4vw; bottom:-2vw; z-index:0;
  color:var(--fg); opacity:.06; white-space:nowrap}
.caution .inner{position:relative; z-index:2; display:grid;
  grid-template-columns:96px minmax(0,1fr); gap:clamp(20px,2.6vw,44px);
  width:var(--container); margin-inline:auto}
.caution .vlabel{writing-mode:vertical-rl; font-family:var(--f-mono);
  font-size:var(--fz-label); letter-spacing:.3em; color:var(--acc);
  position:sticky; top:calc(var(--header-h) + 60px); height:max-content}
.caution li{border-top:1px solid var(--line-c); padding:clamp(28px,3.4vw,52px) 0;
  display:grid; grid-template-columns:76px minmax(0,1fr); gap:clamp(12px,2vw,36px)}
.caution li:last-child{border-bottom:1px solid var(--line-c)}
.caution h3{font-size:clamp(24px,3.4vw,44px); letter-spacing:-.038em; margin-bottom:14px}
.caution p{font-size:17px; line-height:1.85; color:var(--fg-2); max-width:56ch}

/* ── 08 FAQ ─────────────────────────────────────────────────────────── */
.qa{position:relative; z-index:2; border-top:1px solid var(--line-c)}
.qa details{border-bottom:1px solid var(--line-c); position:relative}
.qa details::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--acc); transform:scaleY(0); transform-origin:top;
  transition:transform var(--d-hover) var(--e-ui)}
.qa details:hover::before,.qa details[open]::before{transform:scaleY(1)}
.qa summary{list-style:none; cursor:pointer; display:grid;
  grid-template-columns:76px minmax(0,1fr) 40px; align-items:start;
  gap:clamp(12px,2vw,28px); padding:clamp(18px,1.8vw,26px) 0;
  width:var(--container); margin-inline:auto;
  transition:color var(--d-hover) var(--e-ui)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .q{font-size:clamp(19px,2.4vw,32px); font-weight:700;
  letter-spacing:-.035em; line-height:1.35}
.qa details[open] summary .q{color:var(--acc); font-weight:800}
.qa .sign{justify-self:end; margin-top:.5em; width:18px; height:18px; position:relative;
  transition:transform .4s var(--e-ui)}
.qa .sign::before,.qa .sign::after{content:""; position:absolute; inset:0; margin:auto;
  background:currentColor}
.qa .sign::before{width:18px; height:1.25px}
.qa .sign::after{width:1.25px; height:18px}
.qa details[open] .sign{transform:rotate(45deg); color:var(--acc)}
.qa .a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--e-out)}
.qa details[open] .a{grid-template-rows:1fr}
.qa .a > div{overflow:hidden}
.qa .a p{width:var(--container); margin-inline:auto;
  padding:0 0 clamp(22px,2.4vw,34px) calc(76px + 2vw);
  font-size:17px; line-height:1.85; color:var(--fg-2); max-width:min(46em,100%)}

/* ── 10 COLOPHON ────────────────────────────────────────────────────── */
.colophon{position:relative; overflow:clip; padding-top:var(--pad-sec)}
.colophon .cta{width:var(--container); margin-inline:auto; padding-bottom:clamp(30px,3.4vw,52px)}
.colophon .cta a{font-family:var(--f-disp); font-size:clamp(34px,6vw,96px);
  font-weight:800; letter-spacing:-.045em; line-height:1.05;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%; background-size:0 1px;
  transition:background-size .45s var(--e-ui)}
.colophon .cta a:hover{background-size:100% 1px}
.colophon .rule-bold{height:var(--rule-bold); background:var(--acc);
  transform-origin:left}
.colophon .map{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px); width:var(--container); margin-inline:auto;
  padding:clamp(32px,3.6vw,52px) 0 0}
.colophon .map h4{font-family:var(--f-mono); font-size:var(--fz-label);
  font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-2); margin-bottom:18px}
.colophon .map li{margin-bottom:10px}
.colophon .map a{font-size:17px; letter-spacing:-.02em;
  transition:color var(--d-hover) var(--e-ui)}
.colophon .map a:hover{color:var(--acc)}
.colophon .word{padding-top:clamp(56px,8vw,120px); overflow:clip}
.colophon .word b{display:block; font-family:var(--f-disp); font-size:var(--fz-mega);
  font-weight:800; letter-spacing:-.055em; line-height:.8; white-space:nowrap;
  margin-inline:calc(var(--gutter) * -1); text-align:center;
  transform:translateX(var(--px,0))}
.colophon .foot{width:var(--container); margin-inline:auto;
  padding:clamp(20px,2.4vw,32px) 0;
  border-top:1px solid var(--line-c); font-family:var(--f-mono);
  font-size:var(--fz-label); color:var(--fg-2); letter-spacing:.02em;
  display:flex; gap:clamp(12px,3vw,40px); flex-wrap:wrap}

/* ── 챕터 지면 ──────────────────────────────────────────────────────── */
.chapter-dark{background-color:var(--paper-2); color:var(--ink)}
.chapter-dark .lead,.chapter-dark p{color:var(--ink-2)}
.chapter-paper2{background:var(--paper-2)}
.chapter-paper3{background:var(--paper-3)}

/* ── 반응형 ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .numbers .grid{grid-template-columns:1fr 1fr; row-gap:clamp(32px,5vw,56px)}
  .numbers .cell:nth-child(3){border-left:0; padding-left:0}
  .numbers .cell:nth-child(2),.numbers .cell:nth-child(4){padding-top:30px; align-self:start}
  .prow > a{grid-template-columns:64px minmax(0,1fr) 40px; row-gap:8px}
  .prow .sm{grid-column:2 / 3}
  .caution .inner{grid-template-columns:1fr}
  .caution .vlabel{writing-mode:horizontal-tb; position:static}
}
@media (max-width:900px){
  /* 핀 해제 → 네이티브 가로 스크롤 */
  .chapter{height:auto !important}
  .stage{position:static; height:auto; padding-block:var(--pad-sec)}
  .rail{width:auto; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:8px; transform:none !important;
    -webkit-overflow-scrolling:touch}
  .panel{flex:0 0 78vw; scroll-snap-align:start}
  .seg{display:none}
  .proc .stage{flex-direction:column; align-items:stretch; gap:0}
  .proc-idx{display:none}
  .proc-body{border-left:1px solid var(--line-c)}
  .proc-body article{position:relative !important; opacity:1 !important;
    transform:none !important; pointer-events:auto; padding-block:clamp(28px,5vw,48px);
    border-bottom:1px solid var(--line-c)}
  .proc-body article::before{content:attr(data-n); display:block;
    font-family:var(--f-mono); font-size:var(--fz-label); color:var(--acc);
    margin-bottom:14px; letter-spacing:.08em}
}
@media (max-width:768px){
  .nav-toggle{display:flex}
  .gnb{position:fixed; inset:var(--header-h) 0 auto; flex-direction:column;
    align-items:stretch; gap:0; background:var(--abyss); color:var(--cream);
    padding:12px var(--gutter) 28px; display:none; mix-blend-mode:normal}
  .gnb.is-open{display:flex}
  .gnb a{padding:15px 0; font-size:19px; border-bottom:1px solid var(--line-dark)}
  .gnb a::after{display:none}
  .hero__meta,.hero__scroll,.hero__nav{display:none}
  .hero__type{left:var(--gutter); right:var(--gutter); bottom:calc(14vh + env(safe-area-inset-bottom))}
  .hero__type .display{max-width:none}
  .hero__rail{left:var(--gutter); bottom:calc(14vh - 42px)}
  .colophon .map{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .numbers .grid{grid-template-columns:1fr}
  .numbers .cell{border-left:0; padding-left:0;
    border-top:1px solid var(--line-c); padding-top:26px}
  .numbers .cell:first-child{border-top:0; padding-top:0}
  .prow > a{grid-template-columns:52px minmax(0,1fr); min-height:0;
    padding-block:26px}
  .prow .go{display:none}
  .caution li,.qa summary{grid-template-columns:52px minmax(0,1fr)}
  .qa summary{grid-template-columns:52px minmax(0,1fr) 24px}
  .qa .a p{padding-left:calc(var(--gutter) + 52px + 2vw)}
  .colophon .map{grid-template-columns:1fr}
  .ticker{border-top-width:4px}
}

/* ── 모션 최소화 ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;
    animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-reveal]{opacity:1 !important; transform:none !important; filter:none !important}
  [data-reveal="line"] > span{transform:none !important}
  .hero__shot{transform:none !important}
  .ticker .mq{animation:none; transform:none}
}

/* ── 챕터 지면색 (JS가 html 에 클래스 부여) ─────────────────────────── */
/* 지면 반전 연출 제거 — 공공 수상작 0건 */

/* ── 섹션 이미지 ─────────────────────────────────────────────────────── */
/* 목적 리스트 썸네일 — 상시 노출(호버 추종 없음. 절제) */
.prow .thumb{position:relative; width:clamp(96px,9vw,164px); aspect-ratio:3/2;
  overflow:hidden; background:var(--paper-2); flex:0 0 auto}
.prow .thumb img{width:100%; height:100%; object-fit:cover;
  filter:grayscale(.45) contrast(1.02); transition:transform .6s var(--e-out),
    filter var(--d-hover) var(--e-ui)}
.prow:hover .thumb img,.prow:focus-within .thumb img{transform:scale(1.05); filter:grayscale(0)}

/* 정보 패널 이미지 */
.panel{padding:0; overflow:hidden}
.panel .pic{position:relative; width:100%; aspect-ratio:3/2; overflow:hidden;
  background:var(--paper-2)}
.panel .pic img{width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) contrast(1.03); transition:transform .8s var(--e-out),
    filter .5s var(--e-ui)}
.panel:hover .pic img{transform:scale(1.04); filter:grayscale(0)}
.panel .body{padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column; flex:1}
.panel .body h3{margin:14px 0 12px}
.panel .body .go{margin-top:auto; padding-top:22px}

/* ── 01 FACT BAR (정지형. 마퀴 대체) ─────────────────────────────────── */
.factbar{background:var(--ink); color:var(--cream); position:relative; z-index:5}
.factbar ul{display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  width:var(--container); margin-inline:auto}
.factbar li{padding:20px 20px 22px; border-left:1px solid rgba(236,232,224,.14);
  display:flex; flex-direction:column; gap:5px}
.factbar li:first-child{border-left:0; padding-left:0}
.factbar span{font-family:var(--f-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cream-2)}
.factbar b{font-size:clamp(17px,1.5vw,21px); font-weight:700; letter-spacing:-.025em}

/* ── 03 목적 리스트: 썸네일 포함 그리드 ─────────────────────────────── */
.prow > a{grid-template-columns:44px 132px minmax(150px,.62fr) minmax(0,1fr) 32px;
  min-height:0; padding-block:clamp(14px,1.4vw,20px); gap:clamp(12px,1.6vw,26px)}
.prow .nm{font-size:clamp(20px,1.9vw,28px)}
.prow .sm{font-size:15.5px}

/* ── 04 정보 패널 그리드 ────────────────────────────────────────────── */
.panel .body .idx{margin-bottom:0}
.panel .body h3{font-size:clamp(19px,1.7vw,24px); letter-spacing:-.03em}
.panel .body p{font-size:15.5px; line-height:1.7}
.panel .body .go{font-family:var(--f-mono); font-size:12px; letter-spacing:.06em;
  color:var(--acc); text-transform:none}

/* ── 06 절차: 세로 목록 ─────────────────────────────────────────────── */
.steps{border-top:1px solid var(--line-c)}
.steps li{display:grid; grid-template-columns:64px minmax(0,1fr);
  gap:clamp(14px,2vw,32px); padding:clamp(20px,2.2vw,30px) 0;
  border-bottom:1px solid var(--line-c)}
.steps h3{font-size:clamp(18px,1.7vw,24px); letter-spacing:-.03em; margin-bottom:8px}
.steps p{font-size:16px; line-height:1.75; color:var(--fg-2); max-width:60ch}

/* ── 주의사항·FAQ 밀도 조정 ─────────────────────────────────────────── */
.caution li{padding:clamp(20px,2.2vw,32px) 0}
.caution h3{font-size:clamp(20px,2vw,30px)}
.caution p{font-size:16px; line-height:1.75}
.qa summary{padding:clamp(18px,1.8vw,26px) var(--gutter)}
.qa summary .q{font-size:clamp(17px,1.6vw,22px)}
.qa .a p{font-size:16px; line-height:1.8}

/* ── 반응형 보정 ───────────────────────────────────────────────────── */
@media (max-width:1024px){
  .factbar ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .factbar li:nth-child(4){border-left:0; padding-left:0}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .factbar ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .factbar li:nth-child(odd){border-left:0; padding-left:0}
  .factbar li{padding:15px 14px 16px}
  .prow > a{grid-template-columns:44px 92px minmax(0,1fr); row-gap:6px}
  .prow .sm{grid-column:2 / -1}
}
@media (max-width:560px){
  .rail{grid-template-columns:1fr}
  .factbar ul{grid-template-columns:1fr 1fr}
  .prow > a{grid-template-columns:40px minmax(0,1fr)}
  .prow .thumb{display:none}
  .steps li{grid-template-columns:44px minmax(0,1fr)}
}

/* ══ 공공기관 기준 보정 ══════════════════════════════════════════════ */

/* 본문 바로가기 (KWCAG 필수) */
/* left:-9999px 로 숨기면 RTL(dir=rtl)에서 그 방향이 문서 끝이 되어
   1만 px 짜리 가로 스크롤이 생긴다. 크기를 0 으로 접는 방식으로 숨긴다. */
.skip{position:absolute; left:0; top:0; z-index:500;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  background:var(--accent); color:#fff; padding:12px 20px; font-weight:700;
  border-radius:0 0 6px 0}
.skip:focus{width:auto; height:auto; overflow:visible; clip-path:none}

/* 헤더: difference 합성 제거, 항상 지면 위 */
.site-header{mix-blend-mode:normal; background:var(--paper); color:var(--ink);
  border-bottom:1px solid var(--line); position:sticky}
.site-header.is-stuck{background:var(--paper); color:var(--ink)}
.site-header.is-hidden{transform:none}
.brand small{opacity:1; color:var(--ink-3)}
.gnb a{color:var(--ink-2)}
.gnb a:hover,.gnb a[aria-current="page"]{color:var(--accent)}
.gnb a::after{background:var(--accent); height:2px; bottom:2px}

/* 히어로: 스크림 완화, 텍스트 블록 정돈 */
.hero{background:var(--ink); color:#fff;
  height:clamp(400px,52svh,520px); min-height:380px}
.hero__scrim{background:linear-gradient(90deg,rgba(29,29,29,.86) 0%,
  rgba(29,29,29,.60) 46%,rgba(29,29,29,.30) 100%)}
.hero__shot{filter:none}
.hero__type{left:0; right:0; bottom:auto; top:calc(50% - 22px);
  transform:translateY(-50%); padding-inline:0;
  width:var(--container); margin-inline:auto}
.hero__type .display{max-width:20ch; margin-bottom:14px}
.hero__type .lead{max-width:52ch; color:rgba(255,255,255,.86)}
.hero__type .label{color:rgba(255,255,255,.72)}
.hero .btn{border-color:#fff; color:#fff}
.hero .btn:hover{background:#fff}
.hero .btn:hover span{color:var(--ink)}
.hero__meta{display:none}
.hero__scroll{display:none}
.hero__nav{right:var(--gutter)}

/* 캐러셀 제어: 정지 버튼이 첫 조작 요소 */
.hero__ctrl{position:absolute; z-index:6; left:0; right:0;
  bottom:104px; padding-inline:0; text-align:right;
  width:var(--container); margin-inline:auto; pointer-events:none}
.hero__ctrl > *{pointer-events:auto}
.hero-stop{display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border:1px solid rgba(255,255,255,.5); border-radius:6px;
  font-size:13px; font-weight:600; color:#fff; background:rgba(0,0,0,.28)}
.hero-stop:hover{background:rgba(255,255,255,.16)}
.hero-stop i{width:9px; height:11px; border-left:3px solid #fff; border-right:3px solid #fff}
.hero-stop[aria-pressed="true"] i{width:0; height:0; border:6px solid transparent;
  border-left:9px solid #fff; border-right:0}
.hero__rail{left:0; right:0; bottom:22px; padding-inline:0;
  width:var(--container); margin-inline:auto}
.hero__rail button{color:rgba(255,255,255,.66)}
.hero__rail button.is-on{color:#fff}
.hero__rail button.is-on::after{background:#fff; animation:none; transform:scaleX(1)}
.hero__rail button::after{background:rgba(255,255,255,.3)}

/* 정보 바: 밝은 회색 */
.factbar{background:var(--paper-3); color:var(--ink); border-bottom:1px solid var(--line)}
.factbar li{border-left:1px solid var(--line)}
.factbar span{color:var(--ink-2)} /* 12px 라벨: paper-3 위 6.5:1 (ink-3 은 4.3:1 로 WCAG 미달이었음) */
.factbar b{color:var(--ink)}

/* 목적 리스트: 배경 반전 제거(호버 전용 인터랙션 금지) */
.plist:hover .prow{opacity:1}
.prow::before{display:none}
.prow{background:var(--paper)}
.prow:hover,.prow:focus-within{background:var(--accent-soft)}
.prow:hover .nm,.prow:focus-within .nm{color:var(--accent)}
.prow:hover .sm,.prow:focus-within .sm{color:var(--ink-2)}
.prow:hover .go,.prow:focus-within .go{width:40px; background:var(--accent)}
.prow:hover .go::after,.prow:focus-within .go::after{color:var(--accent)}
.prow .thumb img{filter:none}
.prow:hover .thumb img{transform:none}

/* 패널: 6px 라운드, 흑백 필터 제거 */
.panel{background:var(--paper); border:1px solid var(--line); border-radius:6px}
.panel:hover{border-color:var(--accent)}
.panel .pic img{filter:none}
.panel:hover .pic img{transform:scale(1.02)}
.panel .body .go{color:var(--accent)}
.idx{color:var(--accent)}

/* 표: 파란 헤더 밑줄 */
.press-table thead th{border-bottom:2px solid var(--accent); color:var(--ink-2)}
.press-table tbody tr:hover,.press-table tbody tr:hover th{background:var(--accent-soft)}
.press-table{-webkit-mask-image:none; mask-image:none}

/* FAQ */
.qa details::before{background:var(--accent)}
.qa details[open] summary .q{color:var(--accent)}
.qa details[open] .sign{color:var(--accent)}

/* 푸터: 진회색 (공공 표준) */
.colophon{background:var(--ink); color:#fff; padding-top:clamp(40px,4vw,64px)}
.colophon .cta a{font-family:var(--f-sans); font-size:clamp(20px,2vw,30px);
  font-weight:700; letter-spacing:-.02em}
.colophon .rule-bold{height:2px; background:rgba(255,255,255,.24); transform:none}
.colophon .map h4{color:rgba(255,255,255,.62)}
.colophon .map a{color:rgba(255,255,255,.88); font-size:15.5px}
.colophon .map a:hover{color:#fff; text-decoration:underline}
.colophon .foot{border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.62)}
.colophon .label{color:rgba(255,255,255,.62)}

@media (max-width:768px){
  .hero__type{top:auto; bottom:96px; transform:none}
  .hero__ctrl{bottom:86px}
  .hero__rail{bottom:18px}
  .hero__nav{display:none}
}

/* ══ 섹션 재설계 (03~08) ═════════════════════════════════════════════ */

/* 공통 섹션 헤더 */
.sec-head{margin-bottom:clamp(22px,2.4vw,34px)}
.sec-head .label{display:block; margin-bottom:10px; color:var(--accent)}
.sec-head .h2{max-width:26ch}
.sec-head--row{display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap}
.sec-link{font-size:15px; font-weight:600; color:var(--accent); white-space:nowrap}
.sec-link:hover{text-decoration:underline}

/* ── 03 방문 목적: 박스 4개 일렬 ─────────────────────────────────── */
.pgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.pcard{display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
  transition:border-color var(--d-hover) var(--e-ui),
             background-color var(--d-hover) var(--e-ui)}
.pcard:hover{border-color:var(--accent); background:var(--accent-soft)}
.pcard .pic{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--paper-3)}
.pcard .pic img{width:100%; height:100%; object-fit:cover}
.pcard .pbody{display:flex; flex-direction:column; flex:1; padding:18px 18px 20px}
.pcard .idx{display:block; margin-bottom:10px}
.pcard h3{font-size:18px; letter-spacing:-.02em; margin-bottom:8px}
.pcard em{font-style:normal; display:inline-block; align-self:flex-start;
  font-size:12.5px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border-radius:4px; padding:4px 8px; margin-bottom:10px}
.pcard p{font-size:14.5px; line-height:1.65; color:var(--ink-2)}
.pcard .go{margin-top:auto; padding-top:16px; font-size:13.5px;
  font-weight:700; color:var(--accent)}

/* ── 04 정보 페이지: 슬라이더 ─────────────────────────────────────── */
.sl-ctrl{display:flex; align-items:center; gap:10px}
.sl-count{font-family:var(--f-mono); font-size:13px; color:var(--ink-3); margin-right:4px}
.sl-count b{color:var(--ink); font-size:15px}
.sl-btn{width:42px; height:42px; border:1px solid var(--line); border-radius:6px;
  display:grid; place-items:center; background:var(--paper);
  transition:border-color var(--d-hover) var(--e-ui), background-color var(--d-hover) var(--e-ui)}
.sl-btn:hover:not(:disabled){border-color:var(--accent); background:var(--accent-soft)}
.sl-btn:disabled{opacity:.35; cursor:default}
.sl-btn i{width:8px; height:8px; border-top:1.6px solid var(--ink); border-right:1.6px solid var(--ink)}
.sl-prev i{transform:rotate(-135deg); margin-left:3px}
.sl-next i{transform:rotate(45deg); margin-right:3px}
.sl-track{display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * 18px) / 3); gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding-bottom:2px}
.sl-track::-webkit-scrollbar{display:none}
.sl-track .panel{scroll-snap-align:start}
.sl-bar{height:2px; background:var(--line); margin-top:18px; position:relative}
.sl-bar span{position:absolute; left:0; top:0; bottom:0; width:50%;
  background:var(--accent); transition:width .25s var(--e-ui), left .25s var(--e-ui)}

/* ── 05 비교: 2단 비교 카드 ───────────────────────────────────────── */
.vs{display:grid; grid-template-columns:1fr 56px 1fr; align-items:stretch; gap:0}
.vs-card{border:1px solid var(--line); border-radius:6px; background:var(--paper);
  display:flex; flex-direction:column; overflow:hidden}
.vs-card.is-primary{border-color:var(--accent)}
.vs-top{padding:22px 24px 20px; border-bottom:1px solid var(--line)}
.vs-card.is-primary .vs-top{background:var(--accent); color:#fff; border-bottom-color:var(--accent)}
.vs-card.is-primary .vs-top .idx{color:rgba(255,255,255,.72)}
.vs-top h3{font-size:clamp(20px,1.8vw,26px); letter-spacing:-.02em; margin:8px 0 12px}
.vs-fee{font-family:var(--f-disp); font-size:clamp(28px,2.6vw,40px); font-weight:800;
  letter-spacing:-.02em; line-height:1; display:flex; align-items:baseline; gap:10px}
.vs-fee em{font-style:normal; font-family:var(--f-sans); font-size:13px;
  font-weight:500; letter-spacing:0; opacity:.72}
.vs-list{padding:4px 24px 8px}
.vs-list > div{display:grid; grid-template-columns:104px minmax(0,1fr); gap:14px;
  padding:14px 0; border-bottom:1px solid var(--line)}
.vs-list > div:last-child{border-bottom:0}
.vs-list dt{font-size:13.5px; color:var(--ink-3); font-weight:600}
.vs-list dd{margin:0; font-size:15.5px; line-height:1.6}
.vs-go{display:block; margin-top:auto; padding:16px 24px; border-top:1px solid var(--line);
  font-size:14.5px; font-weight:700; color:var(--accent)}
.vs-go:hover{background:var(--accent-soft)}
.vs-mid{display:grid; place-items:center; position:relative}
.vs-mid::before{content:""; position:absolute; top:0; bottom:0; width:1px;
  background:var(--line)}
.vs-mid span{position:relative; z-index:1; width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  font-family:var(--f-disp); font-size:13px; font-weight:800; letter-spacing:.04em}

/* ── 06 절차: 가로 스테퍼 ─────────────────────────────────────────── */
.stepper{display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.4vw,20px); position:relative}
.stepper::before{content:""; position:absolute; left:10%; right:10%; top:21px;
  height:1px; background:var(--line)}
.stepper li{position:relative; text-align:center; padding-top:0}
.stepper .node{display:grid; place-items:center; width:44px; height:44px;
  border-radius:50%; background:var(--paper); border:1.5px solid var(--accent);
  margin:0 auto 16px; position:relative; z-index:1}
.stepper .node b{font-family:var(--f-mono); font-size:13px; font-weight:600; color:var(--accent)}
.stepper h3{font-size:16.5px; letter-spacing:-.02em; margin-bottom:8px}
.stepper p{font-size:14px; line-height:1.65; color:var(--ink-2)}
.step-more{margin-top:clamp(26px,3vw,40px); text-align:center}

/* ── 07 주의사항: 좌측 강조바 카드 ───────────────────────────────── */
.warns{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.warn{position:relative; background:var(--paper-2); border-left:3px solid var(--accent);
  padding:24px 24px 26px; overflow:hidden}
.warn .wn{position:absolute; right:14px; top:6px; font-family:var(--f-disp);
  font-size:64px; font-weight:800; line-height:1; color:var(--ink);
  opacity:.06; pointer-events:none}
.warn h3{font-size:18px; letter-spacing:-.02em; margin-bottom:10px; position:relative}
.warn p{font-size:15px; line-height:1.75; color:var(--ink-2); position:relative}

/* ── 08 FAQ: 좌측 고정 + 우측 아코디언 ───────────────────────────── */
.faq-2col{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px); align-items:start}
.faq-aside{position:sticky; top:calc(var(--header-h) + 28px)}
.faq-aside .label{display:block; margin-bottom:10px; color:var(--accent)}
.faq-aside .h2{margin-bottom:14px}
.faq-note{font-size:14.5px; line-height:1.7; color:var(--ink-2); margin-bottom:20px}
.faq .qa{border-top:1px solid var(--line)}
.faq .qa summary{width:auto; padding:18px 0 18px 16px;
  grid-template-columns:46px minmax(0,1fr) 28px}
.faq .qa .a p{width:auto; padding:0 0 22px 62px}

/* ── 반응형 ─────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-track{grid-auto-columns:calc((100% - 18px) / 2)}
  .vs{grid-template-columns:1fr; gap:16px}
  .vs-mid{height:44px}
  .vs-mid::before{top:auto; bottom:auto; left:0; right:0; width:auto; height:1px}
  .stepper{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
  .stepper::before{display:none}
  .stepper li{text-align:left; display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px}
  .stepper .node{margin:0}
  .warns{grid-template-columns:1fr}
  .faq-2col{grid-template-columns:1fr}
  .faq-aside{position:static}
}
@media (max-width:640px){
  .pgrid{grid-template-columns:1fr}
  .sl-track{grid-auto-columns:86%}
  .stepper{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════
   RICH LAYER — 구조는 유지, 디자인·모션만 상향
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-ui:cubic-bezier(.22,.61,.36,1);
  --d-hover:.34s;
  --rise:18px;
  --shadow-1:0 1px 2px rgba(12,22,38,.05), 0 6px 18px rgba(12,22,38,.07);
  --shadow-2:0 2px 6px rgba(12,22,38,.07), 0 18px 44px rgba(12,22,38,.12);
  /* 이름은 영국판에서 물려받은 --grad-blue 지만 캐나다는 버건디 계열이다.
     (참조가 9군데라 변수명은 그대로 두고 값만 바꿨다) */
  --grad-blue:linear-gradient(135deg,#7E1C24 0%,#A3252F 55%,#C8404B 100%);
  /* 영국판은 네이비(#26314A→#0C1B33). 캐나다는 같은 어두운 면을 버건디 쪽으로 돌린다.
     (조회 밴드 · 콜로폰 · 비교카드 헤더 등 6군데가 이 변수를 쓴다) */
  --grad-ink:linear-gradient(140deg,#1D1616 0%,#3A161B 58%,#24090D 100%);
}

/* ── 등장 모션 복구 (스크롤 하이재킹 없음. 1회성 페이드+상승) ───────── */
html.js [data-rich]{opacity:0; transform:translateY(var(--rise));
  transition:opacity .62s var(--e-out), transform .62s var(--e-out)}
html.js [data-rich].is-in{opacity:1; transform:none}
html.js [data-rich-mask]{overflow:hidden; display:block}
html.js [data-rich-mask] > span{display:block; transform:translateY(110%);
  transition:transform .78s var(--e-out)}
html.js [data-rich-mask].is-in > span{transform:none}
@media (prefers-reduced-motion:reduce){
  html.js [data-rich]{opacity:1 !important; transform:none !important}
  html.js [data-rich-mask] > span{transform:none !important}
}

/* ── 버튼: 배경 스와이프 ──────────────────────────────────────────── */
.btn{position:relative; overflow:hidden; isolation:isolate; z-index:0;
  transition:color var(--d-hover) var(--e-ui), border-color var(--d-hover) var(--e-ui)}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--accent);
  transform:translateY(101%); transition:transform .42s var(--e-out)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:#fff; border-color:var(--accent); background:transparent}
.btn:hover span,.btn:focus-visible span{color:#fff}
.btn:hover .arw,.btn:hover .arw::after{background-color:#fff; border-color:#fff}
.hero .btn::before{background:#fff}
.hero .btn:hover,.hero .btn:focus-visible{color:var(--ink); border-color:#fff}
.hero .btn:hover span{color:var(--ink)}
.hero .btn:hover .arw,.hero .btn:hover .arw::after{background-color:var(--ink); border-color:var(--ink)}

/* ══ HERO — 켄번즈 + 레이어 시차 + 진행 링 ═════════════════════════ */
.hero{height:clamp(520px,72svh,720px)}
.hero__shot{transform:scale(1.12); transition:opacity 1.1s var(--e-chapter),
  visibility 1.1s, transform 9s cubic-bezier(.22,.61,.36,1)}
.hero__shot.is-on{transform:scale(1)}
.hero__scrim{background:
  linear-gradient(100deg,rgba(12,20,36,.90) 0%,rgba(12,20,36,.62) 42%,
                  rgba(12,20,36,.18) 78%,rgba(12,20,36,.34) 100%),
  linear-gradient(180deg,rgba(12,20,36,.42) 0%,transparent 34%,rgba(12,20,36,.55) 100%)}
.hero__type .label{position:relative; padding-left:34px}
.hero__type .label::before{content:""; position:absolute; left:0; top:50%; width:24px;
  height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--e-out) .1s}
.hero__slide-on .label::before{transform:scaleX(1)}
.hero__type .display{font-size:clamp(34px,4.6vw,76px); font-weight:800;
  letter-spacing:-.03em; line-height:1.18;
  text-shadow:0 2px 30px rgba(0,0,0,.34)}
.hero__type .display .ln{overflow:hidden; display:block}
.hero__type .display .ln > span{display:block; transform:translateY(112%);
  transition:transform .82s var(--e-out)}
.hero__slide-on .display .ln > span{transform:none}
.hero__slide-on .display .ln:nth-child(2) > span{transition-delay:.09s}
.hero__type .lead,.hero__type .btn{opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--e-out), transform .6s var(--e-out)}
.hero__slide-on .lead{opacity:1; transform:none; transition-delay:.22s}
.hero__slide-on .btn{opacity:1; transform:none; transition-delay:.32s}

/* 하단 썸네일 레일 */
.hero__rail{display:flex; gap:10px; align-items:stretch; bottom:26px}
.hero__rail button{position:relative; flex:0 0 auto; width:132px; padding:0;
  border:0; background:none; text-align:left; overflow:hidden;
  border-radius:6px; transition:width .5s var(--e-out)}
.hero__rail button::after{display:none}
.hero__rail .th{display:block; height:56px; border-radius:6px; overflow:hidden;
  position:relative; background:rgba(255,255,255,.12);
  outline:1px solid rgba(255,255,255,.22); outline-offset:-1px;
  transition:outline-color var(--d-hover) var(--e-ui), opacity var(--d-hover) var(--e-ui)}
.hero__rail .th img{width:100%; height:100%; object-fit:cover; opacity:.55;
  transition:opacity var(--d-hover) var(--e-ui), transform .8s var(--e-out)}
.hero__rail button:hover .th img{opacity:.85; transform:scale(1.06)}
.hero__rail button.is-on{width:186px}
.hero__rail button.is-on .th{outline-color:#fff}
.hero__rail button.is-on .th img{opacity:1}
.hero__rail .pg{position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,.28)}
.hero__rail .pg i{display:block; height:100%; width:0; background:var(--accent)}
.hero__rail button.is-on .pg i{animation:heroPg var(--hero-dur,6800ms) linear forwards}
.hero.is-paused .hero__rail button.is-on .pg i{animation-play-state:paused}
@keyframes heroPg{from{width:0}to{width:100%}}
.hero__rail .nn{position:absolute; left:8px; top:6px; z-index:2;
  font-family:var(--f-mono); font-size:11px; font-weight:600; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* 우측 대형 카운터 */
.hero__count{position:absolute; z-index:5; right:0; bottom:30px;
  width:var(--container); margin-inline:auto; left:0; text-align:right;
  pointer-events:none; font-family:var(--f-disp); color:#fff}
.hero__count b{font-size:clamp(34px,3.4vw,54px); font-weight:800; letter-spacing:-.03em}
.hero__count span{font-size:15px; opacity:.6; margin-left:4px}

@media (max-width:768px){
  .hero{height:clamp(460px,74svh,620px)}
  .hero__rail button{width:76px} .hero__rail button.is-on{width:104px}
  .hero__rail .th{height:40px}
  .hero__count{display:none}
}

/* ══ 03 목적 카드 — 깊이·줌·오버레이 ══════════════════════════════ */
.pcard{border-radius:10px; box-shadow:var(--shadow-1); border-color:transparent;
  transition:transform .42s var(--e-out), box-shadow .42s var(--e-out),
             background-color var(--d-hover) var(--e-ui)}
.pcard:hover{transform:translateY(-6px); box-shadow:var(--shadow-2); background:var(--paper)}
.pcard .pic{position:relative; aspect-ratio:4/3}
.pcard .pic::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 46%,rgba(12,20,36,.55) 100%);
  opacity:.9; transition:opacity var(--d-hover) var(--e-ui)}
.pcard .pic img{transition:transform .9s var(--e-out)}
.pcard:hover .pic img{transform:scale(1.07)}
.pcard .idx{position:absolute; left:16px; bottom:12px; z-index:2; color:#fff;
  font-size:12px; letter-spacing:.1em}
.pcard .pbody{position:relative}
.pcard em{background:var(--accent-soft); color:var(--accent-deep)}
.pcard .go{position:relative; display:inline-flex; align-items:center; gap:8px}
.pcard .go::after{content:""; width:16px; height:1.5px; background:currentColor;
  transition:width var(--d-hover) var(--e-ui)}
.pcard:hover .go::after{width:28px}

/* ══ 04 슬라이더 — 액티브 강조·엣지 페이드·드래그 ═══════════════════ */
.sl-wrap{position:relative}
.sl-wrap::before,.sl-wrap::after{content:""; position:absolute; top:0; bottom:0; width:56px;
  z-index:3; pointer-events:none; opacity:0; transition:opacity .3s var(--e-ui)}
.sl-wrap::before{left:-1px; background:linear-gradient(90deg,var(--paper-2),transparent)}
.sl-wrap::after{right:-1px; background:linear-gradient(270deg,var(--paper-2),transparent)}
.sl-wrap.has-prev::before{opacity:1}
.sl-wrap.has-next::after{opacity:1}
.sl-track{cursor:grab}
.sl-track.is-drag{cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none}
.sl-track .panel{border-radius:10px; box-shadow:var(--shadow-1); border:0;
  transition:transform .42s var(--e-out), box-shadow .42s var(--e-out)}
.sl-track .panel:hover{transform:translateY(-6px); box-shadow:var(--shadow-2)}
.sl-track .panel .pic{position:relative; overflow:hidden}
.sl-track .panel .pic::after{content:""; position:absolute; inset:0;
  background:var(--grad-blue); opacity:0; mix-blend-mode:multiply;
  transition:opacity var(--d-hover) var(--e-ui)}
.sl-track .panel:hover .pic::after{opacity:.18}
.sl-track .panel .pic img{transition:transform .9s var(--e-out)}
.sl-track .panel:hover .pic img{transform:scale(1.06)}
.sl-track .panel .idx{position:absolute; left:14px; top:12px; z-index:2;
  color:#fff; background:rgba(12,20,36,.55); backdrop-filter:blur(6px);
  padding:4px 9px; border-radius:4px; font-size:11.5px; letter-spacing:.1em}
.sl-track .panel .body h3{transition:color var(--d-hover) var(--e-ui)}
.sl-track .panel:hover .body h3{color:var(--accent)}
.sl-btn{border-radius:50%; width:46px; height:46px}
.sl-bar{height:3px; border-radius:99px; overflow:hidden}
.sl-bar span{border-radius:99px; background:var(--grad-blue)}

/* ══ 05 VS 카드 — 그라디언트 헤더·차이 강조 ═══════════════════════ */
.vs-card{border-radius:12px; box-shadow:var(--shadow-1); border:0; overflow:hidden;
  transition:transform .42s var(--e-out), box-shadow .42s var(--e-out)}
.vs-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-2)}
.vs-top{position:relative; padding:26px 26px 24px; border-bottom:0; overflow:hidden}
.vs-card.is-primary .vs-top{background:var(--grad-blue)}
.vs-card:not(.is-primary) .vs-top{background:var(--grad-ink); color:#fff}
.vs-card:not(.is-primary) .vs-top .idx{color:rgba(255,255,255,.6)}
.vs-top::after{content:""; position:absolute; right:-30px; top:-40px; width:150px; height:150px;
  border-radius:50%; background:rgba(255,255,255,.08)}
.vs-top h3{position:relative; z-index:1}
.vs-fee{position:relative; z-index:1}
.vs-list{padding:6px 26px 10px}
.vs-list > div{grid-template-columns:110px minmax(0,1fr); padding:15px 0;
  transition:background-color var(--d-hover) var(--e-ui)}
.vs-list > div:hover{background:var(--accent-soft);
  box-shadow:inset 3px 0 0 var(--accent); padding-left:12px}
.vs-list dd{font-weight:600}
.vs-go{padding:18px 26px; font-weight:700; display:flex; align-items:center; gap:10px;
  transition:background-color var(--d-hover) var(--e-ui), gap var(--d-hover) var(--e-ui)}
.vs-go::after{content:""; width:18px; height:1.6px; background:currentColor;
  transition:width var(--d-hover) var(--e-ui)}
.vs-go:hover::after{width:30px}
.vs-mid span{background:var(--grad-ink); width:52px; height:52px; font-size:14px;
  box-shadow:0 6px 18px rgba(12,22,38,.22)}

/* ══ 06 스테퍼 — 진행 그라디언트 라인 ═════════════════════════════ */
.stepper::before{background:linear-gradient(90deg,var(--accent),rgba(163,37,47,.18))}
.stepper .node{background:var(--grad-blue); border:0; box-shadow:0 4px 14px rgba(163,37,47,.28);
  transition:transform var(--d-hover) var(--e-ui)}
.stepper .node b{color:#fff}
.stepper li:hover .node{transform:scale(1.12)}

/* ══ 07 주의사항 — 짙은 카드 + 대형 번호 ═══════════════════════════ */
.caution{background:var(--paper)}
.warns{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.warn{background:var(--grad-ink); color:#fff; border-left:0; border-radius:12px;
  padding:30px 26px 32px; box-shadow:var(--shadow-1);
  transition:transform .42s var(--e-out), box-shadow .42s var(--e-out)}
.warn:hover{transform:translateY(-6px); box-shadow:var(--shadow-2)}
.warn::before{content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background:var(--grad-blue)}
.warn .wn{right:18px; top:12px; font-size:96px; color:#fff; opacity:.09}
.warn h3{color:#fff; font-size:19px; margin-bottom:12px; padding-right:56px}
.warn p{color:rgba(255,255,255,.74); font-size:14.8px}

/* ══ 08 FAQ — 채워지는 행 ═════════════════════════════════════════ */
.faq{background:var(--paper-2)}
.faq .qa{border-top:0}
.faq .qa details{border-bottom:0; margin-bottom:10px; border-radius:10px;
  background:var(--paper); box-shadow:var(--shadow-1); overflow:hidden;
  transition:box-shadow var(--d-hover) var(--e-ui)}
.faq .qa details::before{display:none}
.faq .qa details:hover{box-shadow:var(--shadow-2)}
.faq .qa details[open]{box-shadow:var(--shadow-2)}
.faq .qa summary{padding:20px 22px; grid-template-columns:44px minmax(0,1fr) 30px;
  position:relative; z-index:1}
.faq .qa summary::before{content:""; position:absolute; inset:0; z-index:-1;
  background:var(--accent-soft); opacity:0; transition:opacity var(--d-hover) var(--e-ui)}
.faq .qa summary:hover::before,.faq .qa details[open] summary::before{opacity:1}
.faq .qa .sign{width:22px; height:22px; border-radius:50%; background:var(--accent-soft);
  display:grid; place-items:center; margin-top:.25em;
  transition:transform .4s var(--e-ui), background-color var(--d-hover) var(--e-ui)}
.faq .qa .sign::before{width:11px; height:1.6px; background:var(--accent)}
.faq .qa .sign::after{width:1.6px; height:11px; background:var(--accent)}
.faq .qa details[open] .sign{background:var(--accent); transform:rotate(45deg)}
.faq .qa details[open] .sign::before,.faq .qa details[open] .sign::after{background:#fff}
.faq .qa .a p{padding:0 22px 22px 66px}
.faq-aside .h2{font-size:clamp(24px,2.4vw,36px)}

/* ══ 푸터 — CTA 밴드 + 대형 워드마크 ══════════════════════════════ */
.colophon{background:var(--grad-ink); position:relative; overflow:hidden;
  padding-top:0}
.colophon::before{content:""; position:absolute; right:-8%; top:-20%;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(163,37,47,.32) 0%,transparent 68%)}
.colophon .cta{position:relative; z-index:1; padding-block:clamp(44px,5vw,72px)}
.colophon .cta .label{display:block; color:rgba(255,255,255,.6); margin-bottom:14px}
.colophon .cta a{display:inline-flex; align-items:center; gap:16px;
  font-size:clamp(24px,2.6vw,40px); font-weight:800; letter-spacing:-.03em;
  background-image:none}
.colophon .cta a .cir{width:56px; height:56px; border-radius:50%; flex:0 0 auto;
  background:var(--accent); display:grid; place-items:center;
  transition:transform var(--d-hover) var(--e-ui)}
.colophon .cta a .cir i{width:16px; height:1.8px; background:#fff; position:relative}
.colophon .cta a .cir i::after{content:""; position:absolute; right:0; top:50%;
  width:8px; height:8px; border-top:1.8px solid #fff; border-right:1.8px solid #fff;
  transform:translateY(-50%) rotate(45deg)}
.colophon .cta a:hover .cir{transform:translateX(6px) scale(1.06)}
.colophon .rule-bold{position:relative; z-index:1; height:1px;
  background:rgba(255,255,255,.18)}
.colophon .map{position:relative; z-index:1}
.colophon .map a{position:relative; display:inline-block}
.colophon .map a::after{content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-hover) var(--e-ui)}
.colophon .map a:hover{text-decoration:none}
.colophon .map a:hover::after{transform:scaleX(1)}
.colophon .word{position:relative; z-index:1; padding-top:clamp(40px,5vw,72px);
  overflow:hidden; margin-bottom:-.14em}
.colophon .word b{display:block; font-family:var(--f-disp); font-weight:800;
  font-size:clamp(56px,12vw,170px); line-height:.82; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.26);
  white-space:nowrap; text-align:center}
.colophon .foot{position:relative; z-index:1}

@media (max-width:1024px){ .warns{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════════════════
   REVISION 2 — 03 이미지타일 / 04 차별화 / 07 번호컬럼 / 08 정리 / 푸터 심플
   ══════════════════════════════════════════════════════════════════════ */

/* ── 03 이미지 지배형 타일 ────────────────────────────────────────── */
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.tile{position:relative; display:block; aspect-ratio:3/4; overflow:hidden;
  border-radius:12px; background:var(--ink); isolation:isolate;
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out)}
.tile:hover{transform:translateY(-8px); box-shadow:var(--shadow-2)}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--e-out), filter .5s var(--e-ui)}
.tile:hover img{transform:scale(1.08)}
.tile .tv{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(12,20,36,.10) 0%,rgba(12,20,36,.20) 42%,
             rgba(12,20,36,.86) 100%);
  transition:background .5s var(--e-ui)}
.tile:hover .tv{background:linear-gradient(180deg,rgba(0,40,120,.28) 0%,
  rgba(12,20,36,.48) 40%,rgba(8,16,32,.94) 100%)}
.tile .tb{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 20px 24px; color:#fff; display:block}
.tile .tn{display:block; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em;
  color:rgba(255,255,255,.66); margin-bottom:10px}
.tile strong{display:block; font-size:clamp(18px,1.5vw,21px); font-weight:800;
  letter-spacing:-.025em; line-height:1.3; margin-bottom:9px}
.tile em{display:inline-block; font-style:normal; font-size:11.5px; font-weight:700;
  letter-spacing:.01em; padding:4px 9px; border-radius:99px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28)}
.tile .td{display:block; margin-top:0; max-height:0; overflow:hidden; opacity:0;
  font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.82);
  transition:max-height .5s var(--e-out), opacity .4s var(--e-ui), margin-top .5s var(--e-out)}
.tile:hover .td,.tile:focus-visible .td{max-height:90px; opacity:1; margin-top:12px}
.tile::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  z-index:3; background:var(--grad-blue); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--e-out)}
.tile:hover::after{transform:scaleX(1)}

/* ── 04 슬라이더: 가로형 유지하되 더 크고 정보 밀도 높게 ─────────── */
.sl-track{grid-auto-columns:calc((100% - 2 * 18px) / 3)}
.sl-track .panel{background:var(--paper); border-radius:12px;
  display:flex; flex-direction:column}
.sl-track .panel .pic{aspect-ratio:16/9}
.sl-track .panel .body{padding:22px 22px 24px; gap:0}
.sl-track .panel .body .idx{position:static; background:none; backdrop-filter:none;
  padding:0; color:var(--accent); font-size:12px; letter-spacing:.12em; margin-bottom:9px}
.sl-track .panel .body h3{font-size:20px; letter-spacing:-.025em; margin:0 0 10px}
.sl-track .panel .body p{font-size:14.5px; line-height:1.7; color:var(--ink-2)}
.sl-track .panel .body .go{margin-top:auto; padding-top:18px;
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700}
.sl-track .panel .body .go::after{content:""; width:16px; height:1.5px;
  background:currentColor; transition:width var(--d-hover) var(--e-ui)}
.sl-track .panel:hover .body .go::after{width:28px}
.sl-track .panel .pic::after{background:linear-gradient(180deg,transparent 60%,rgba(12,20,36,.28))}
.sl-track .panel:hover .pic::after{opacity:1}

/* ── 07 번호 컬럼 (박스 없음) ─────────────────────────────────────── */
.caution{background:var(--paper-2)}
.warns{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0; border-top:1px solid var(--line)}
.warn{background:none; color:inherit; border:0; border-left:1px solid var(--line);
  border-radius:0; box-shadow:none; padding:30px clamp(18px,2.2vw,32px) 8px;
  position:relative; transition:background-color var(--d-hover) var(--e-ui)}
.warn:first-child{border-left:0; padding-left:0}
.warn:hover{transform:none; box-shadow:none; background:rgba(163,37,47,.04)}
.warn::before{display:none}
.warn .wn{position:static; display:block; font-family:var(--f-disp);
  font-size:clamp(40px,3.4vw,56px); font-weight:800; line-height:1;
  letter-spacing:-.03em; color:transparent; opacity:1;
  -webkit-text-stroke:1.5px var(--accent); margin-bottom:18px}
.warn h3{color:var(--ink); font-size:18.5px; padding-right:0; margin-bottom:11px;
  letter-spacing:-.025em}
.warn p{color:var(--ink-2); font-size:15px; line-height:1.75}

/* ── 08 FAQ 정리 (그림자 카드 → 담백한 구분선) ────────────────────── */
.faq{background:var(--paper)}
.faq .qa details{background:none; box-shadow:none; border-radius:0; margin-bottom:0;
  border-bottom:1px solid var(--line)}
.faq .qa details:first-child{border-top:1px solid var(--line)}
.faq .qa details:hover,.faq .qa details[open]{box-shadow:none}
.faq .qa summary{padding:20px 8px; grid-template-columns:44px minmax(0,1fr) 28px}
.faq .qa summary::before{background:var(--accent-soft)}
.faq .qa summary .q{font-size:clamp(16.5px,1.4vw,19px); font-weight:700; line-height:1.5}
.faq .qa details[open] summary .q{color:var(--accent)}
.faq .qa .sign{width:20px; height:20px; background:none; border-radius:0; margin-top:.35em;
  transition:transform .35s var(--e-ui)}
.faq .qa .sign::before,.faq .qa .sign::after{background:var(--ink-3)}
.faq .qa .sign::before{width:14px; height:1.5px}
.faq .qa .sign::after{width:1.5px; height:14px}
.faq .qa details[open] .sign{transform:rotate(45deg)}
.faq .qa details[open] .sign::before,.faq .qa details[open] .sign::after{background:var(--accent)}
.faq .qa .a p{padding:0 8px 22px 52px; font-size:15.5px}

/* ── 푸터 심플 ────────────────────────────────────────────────────── */
.colophon{background:var(--ink); padding-top:clamp(40px,4vw,60px)}
.colophon::before{display:none}
.colophon .cta{padding-block:0 clamp(28px,3vw,40px)}
.colophon .cta .label{color:rgba(255,255,255,.55); margin-bottom:10px}
.colophon .cta a{display:inline-block; font-size:clamp(19px,1.8vw,26px);
  font-weight:700; letter-spacing:-.02em; color:#fff}
.colophon .cta a:hover{color:#fff; text-decoration:underline; text-underline-offset:5px}
.colophon .rule-bold{height:1px; background:rgba(255,255,255,.14)}
.colophon .map{padding-top:clamp(26px,3vw,38px)}
.colophon .map h4{color:rgba(255,255,255,.5); margin-bottom:14px}
.colophon .map li{margin-bottom:9px}
.colophon .map a{font-size:15px; color:rgba(255,255,255,.82)}
.colophon .foot{margin-top:clamp(24px,3vw,36px); font-size:12.5px}

@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .warns{grid-template-columns:1fr; border-top:0}
  .warn{border-left:0; border-top:1px solid var(--line); padding:26px 0 8px}
  .warn:first-child{border-top:0}
}
@media (max-width:640px){
  .tiles{grid-template-columns:1fr 1fr; gap:10px}
  .tile{aspect-ratio:4/5}
  .tile .tb{padding:16px 14px 18px}
  .tile .td{display:none}
}

/* 열린 FAQ 아이콘 배경 제거 (rich layer 잔재) */
.faq .qa details[open] .sign{background:none}

/* ══════════════════════════════════════════════════════════════════════
   REVISION 3 — 히어로 첫진입 / 04 재구성 / 08 정리 / 푸터 축소 / TOP·진행바
   ══════════════════════════════════════════════════════════════════════ */

/* ── 히어로 등장 모션: JS 있을 때만 숨김(첫 진입에도 재생) ────────── */
.hero__type .lead,.hero__type .btn{opacity:1; transform:none}
.hero__type .display .ln > span{transform:none}
html.js .hero__type .lead,html.js .hero__type .btn{opacity:0; transform:translateY(16px)}
html.js .hero__type .display .ln > span{transform:translateY(112%)}
html.js .hero__slide-on .lead{opacity:1; transform:none; transition-delay:.24s}
html.js .hero__slide-on .btn{opacity:1; transform:none; transition-delay:.36s}
html.js .hero__slide-on .display .ln > span{transform:none}
html.js .hero__type .label{opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out)}
html.js .hero__slide-on .label{opacity:1; transform:none; transition-delay:.06s}
@media (prefers-reduced-motion:reduce){
  html.js .hero__type .lead,html.js .hero__type .btn,html.js .hero__type .label{opacity:1; transform:none}
  html.js .hero__type .display .ln > span{transform:none}
}

/* ── 04 재구성: 넓은 가로 카드 2개 (일러스트 + 본문) ───────────────── */
.sl-track{grid-auto-columns:calc((100% - 18px) / 2)}
.sl-track .panel{flex-direction:row; align-items:stretch; border-radius:14px;
  border:1px solid var(--line); box-shadow:none; overflow:hidden; min-height:230px}
.sl-track .panel:hover{transform:none; box-shadow:var(--shadow-1); border-color:var(--accent)}
.sl-track .panel .pic{flex:0 0 42%; aspect-ratio:auto; background:var(--accent-soft);
  display:grid; place-items:center; padding:14px}
.sl-track .panel .pic::after{display:none}
.sl-track .panel .pic img{width:100%; height:100%; object-fit:contain;
  mix-blend-mode:multiply; transition:transform .7s var(--e-out)}
.sl-track .panel:hover .pic img{transform:scale(1.05)}
.sl-track .panel .body{flex:1 1 auto; padding:24px 24px 22px; min-width:0}
.sl-track .panel .body h3{font-size:19px; margin-bottom:9px}
.sl-track .panel .body p{font-size:14.5px; line-height:1.7}
@media (max-width:900px){
  .sl-track{grid-auto-columns:88%}
  .sl-track .panel{flex-direction:column; min-height:0}
  .sl-track .panel .pic{flex:none; aspect-ratio:16/9}
}

/* ── 08 FAQ: 1단 중앙 정렬로 단순화 ──────────────────────────────── */
.faq-2col{display:block; max-width:920px; margin-inline:auto}
.faq-aside{position:static; text-align:center; margin-bottom:clamp(24px,3vw,38px)}
.faq-aside .h2{margin-bottom:10px}
.faq-aside .faq-note{max-width:48ch; margin:0 auto 0}
.faq-aside .btn{display:none}
.faq .qa summary{grid-template-columns:46px minmax(0,1fr) 26px; padding:22px 6px;
  align-items:center}
.faq .qa summary .q{font-size:clamp(16px,1.35vw,18.5px); font-weight:600}
.faq .qa .idx{align-self:center}
/* + 아이콘 → 셰브론 */
.faq .qa .sign{width:12px; height:12px; margin:0; border:0; transform:rotate(45deg);
  border-right:1.8px solid var(--ink-3); border-bottom:1.8px solid var(--ink-3);
  transition:transform .35s var(--e-ui), border-color var(--d-hover) var(--e-ui)}
.faq .qa .sign::before,.faq .qa .sign::after{display:none}
.faq .qa details[open] .sign{transform:rotate(-135deg);
  border-right-color:var(--accent); border-bottom-color:var(--accent)}
.faq .qa .a p{padding:0 6px 24px 46px}
.faq-after{text-align:center; margin-top:clamp(24px,3vw,36px)}

/* ── 절차선 드로잉 ───────────────────────────────────────────────── */
.stepper::before{transform:scaleX(0); transform-origin:left;
  transition:transform 1.15s var(--e-out) .15s}
.stepper.is-in::before{transform:scaleX(1)}
.stepper .node{transform:scale(.6); opacity:0;
  transition:transform .5s var(--e-out), opacity .4s var(--e-out)}
.stepper.is-in .node{transform:scale(1); opacity:1}
.stepper.is-in li:nth-child(1) .node{transition-delay:.20s}
.stepper.is-in li:nth-child(2) .node{transition-delay:.36s}
.stepper.is-in li:nth-child(3) .node{transition-delay:.52s}
.stepper.is-in li:nth-child(4) .node{transition-delay:.68s}
.stepper.is-in li:nth-child(5) .node{transition-delay:.84s}
@media (prefers-reduced-motion:reduce){
  .stepper::before{transform:scaleX(1)}
  .stepper .node{transform:none; opacity:1}
}

/* ── 스크롤 진행바 ───────────────────────────────────────────────── */
.progress{position:fixed; left:0; right:0; top:0; height:3px; z-index:300;
  pointer-events:none; background:transparent}
.progress span{display:block; height:100%; background:var(--grad-blue);
  transform:scaleX(0); transform-origin:left; will-change:transform}

/* ── 맨 위로 버튼 ────────────────────────────────────────────────── */
.to-top{position:fixed; right:clamp(14px,2vw,28px); bottom:clamp(14px,2vw,28px);
  z-index:280; width:52px; height:52px; border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center; gap:0;
  box-shadow:0 6px 20px rgba(12,22,38,.28);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .35s var(--e-ui), transform .35s var(--e-out), visibility .35s,
             background-color var(--d-hover) var(--e-ui)}
.to-top.is-on{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--accent)}
.to-top i{width:10px; height:10px; border-top:2px solid #fff; border-right:2px solid #fff;
  transform:rotate(-45deg); margin-top:4px}
.to-top span{font-family:var(--f-mono); font-size:8.5px; letter-spacing:.1em;
  margin-top:1px; opacity:.8}
@media (max-width:560px){ .to-top{width:46px; height:46px} .to-top span{display:none} }

/* ── 푸터 축소 ───────────────────────────────────────────────────── */
.colophon{padding-top:clamp(30px,3vw,44px)}
.colophon .cta{padding-block:0 clamp(20px,2.2vw,28px)}
.colophon .cta .label{margin-bottom:8px; font-size:11.5px}
.colophon .cta a{font-size:clamp(17px,1.5vw,22px)}
.colophon .map{padding-top:clamp(20px,2.2vw,28px);
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.colophon .map h4{margin-bottom:10px; font-size:11.5px}
.colophon .map li{margin-bottom:6px}
.colophon .map a{font-size:14px}
.colophon .foot{margin-top:clamp(18px,2vw,26px); padding:14px 0 18px; font-size:12px}
@media (max-width:560px){ .colophon .map{grid-template-columns:1fr 1fr; gap:16px} }

/* ── 푸터 추가 축소: 링크 한 줄 ─────────────────────────────────── */
.colophon .fmap{width:var(--container); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:10px 22px;
  padding:clamp(16px,1.8vw,22px) 0}
.colophon .fmap a{font-size:14px; color:rgba(255,255,255,.78); position:relative}
.colophon .fmap a:hover{color:#fff; text-decoration:underline; text-underline-offset:4px}
.colophon .foot{margin-top:0; padding:14px 0 20px;
  border-top:1px solid rgba(255,255,255,.12)}

/* ══════════════════════════════════════════════════════════════════════
   REVISION 4 — 04 목록+프리뷰 / 08 필터형 FAQ
   ══════════════════════════════════════════════════════════════════════ */

/* ── 04 목록 + 대형 프리뷰 ───────────────────────────────────────── */
.gd{display:grid; grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:clamp(20px,2.6vw,44px); align-items:start}
.gd-list{border-top:1px solid var(--line)}
.gd-list li{border-bottom:1px solid var(--line)}
.gd-list button{width:100%; display:grid;
  grid-template-columns:44px minmax(0,1fr) 26px; align-items:center; gap:12px;
  padding:17px 6px; text-align:left; position:relative;
  transition:color var(--d-hover) var(--e-ui), padding-left var(--d-hover) var(--e-ui)}
.gd-list button::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:center;
  transition:transform .35s var(--e-out)}
.gd-list .gn{font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; color:var(--ink-3);
  transition:color var(--d-hover) var(--e-ui)}
.gd-list .gt{font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.4}
.gd-list .ga{justify-self:end; width:16px; height:8px; position:relative; opacity:.35;
  transition:opacity var(--d-hover) var(--e-ui), transform var(--d-hover) var(--e-ui)}
.gd-list .ga::after{content:""; position:absolute; right:0; top:0; width:8px; height:8px;
  border-top:1.6px solid currentColor; border-right:1.6px solid currentColor;
  transform:rotate(45deg)}
.gd-list button:hover,.gd-list button:focus-visible{padding-left:14px; color:var(--accent)}
.gd-list button:hover .gn,.gd-list button.is-on .gn{color:var(--accent)}
.gd-list button:hover .ga{opacity:1; transform:translateX(4px)}
.gd-list button.is-on{padding-left:14px; color:var(--accent)}
.gd-list button.is-on::before{transform:scaleY(1)}
.gd-list button.is-on .ga{opacity:1}

.gd-stage{position:relative; background:var(--paper); border-radius:14px;
  border:1px solid var(--line); overflow:hidden; min-height:clamp(320px,34vw,420px)}
.gd-panel{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center; gap:clamp(16px,2vw,32px); padding:clamp(20px,2.4vw,34px)}
.gd-panel[hidden]{display:none}
.gd-panel.is-on{animation:gdIn .5s var(--e-out)}
@keyframes gdIn{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.gd-pic{display:block; background:var(--accent-soft); border-radius:10px;
  aspect-ratio:4/3; display:grid; place-items:center; padding:16px; overflow:hidden}
.gd-pic img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.gd-body .label{display:block; color:var(--accent); margin-bottom:12px}
.gd-body h3{font-size:clamp(21px,2vw,30px); letter-spacing:-.025em; margin-bottom:12px}
.gd-body p{font-size:15.5px; line-height:1.75; color:var(--ink-2); margin-bottom:22px}
@media (max-width:900px){
  .gd{grid-template-columns:1fr}
  .gd-panel{grid-template-columns:1fr}
  .gd-stage{min-height:0}
  .gd-pic{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){ .gd-panel.is-on{animation:none} }

/* ── 08 필터형 FAQ ───────────────────────────────────────────────── */
.faq .sec-head .h2{max-width:none}
.fq-chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin-bottom:clamp(20px,2.4vw,30px)}
.chip{padding:9px 18px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper); font-size:14px; font-weight:600; color:var(--ink-2);
  transition:background-color var(--d-hover) var(--e-ui),
             border-color var(--d-hover) var(--e-ui), color var(--d-hover) var(--e-ui)}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip.is-on{background:var(--accent); border-color:var(--accent); color:#fff}
.fq-panel{background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:6px clamp(16px,2vw,30px); max-width:920px; margin-inline:auto}
.faq .qa details{border-bottom:1px solid var(--line)}
.faq .qa details:last-of-type{border-bottom:0}
.faq .qa details:first-child{border-top:0}
.faq .qa details[hidden]{display:none}
.faq .qa summary{grid-template-columns:42px minmax(0,1fr) auto 24px;
  gap:14px; padding:20px 0; width:auto}
.faq .qa summary::before{display:none}
.faq .qa summary .tag{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  color:var(--accent); background:var(--accent-soft); border-radius:4px;
  padding:4px 8px; align-self:center; white-space:nowrap}
.faq .qa .a p{padding:0 0 22px 56px}
.fq-empty{text-align:center; padding:34px 0; color:var(--ink-3); font-size:15px}
.fq-more{max-width:920px; margin:clamp(22px,2.6vw,32px) auto 0;
  background:var(--ink); color:#fff; border-radius:14px;
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.fq-more p{font-size:15.5px; color:rgba(255,255,255,.82); margin:0}
.fq-more > div{display:flex; gap:10px; flex-wrap:wrap}
.fq-more .btn{border-color:#fff; color:#fff; padding:11px 22px; font-size:14.5px}
.fq-more .btn::before{background:#fff}
.fq-more .btn:hover{color:var(--ink); border-color:#fff}
.fq-more .btn:hover span{color:var(--ink)}
.fq-more .btn:hover .arw,.fq-more .btn:hover .arw::after{background-color:var(--ink); border-color:var(--ink)}
.fq-more .btn-ghost{border-color:rgba(255,255,255,.45)}
@media (max-width:640px){
  .faq .qa summary{grid-template-columns:34px minmax(0,1fr) 22px}
  .faq .qa summary .tag{display:none}
  .faq .qa .a p{padding-left:48px}
  .fq-more{flex-direction:column; align-items:flex-start}
}

/* ── 밝은 아침 히어로 대응: 좌측 스크림 강화 ─────────────────────── */
.hero__scrim{background:
  linear-gradient(100deg,rgba(8,18,38,.86) 0%,rgba(8,18,38,.66) 34%,
                  rgba(8,18,38,.28) 62%,rgba(8,18,38,.10) 100%),
  linear-gradient(180deg,rgba(8,18,38,.30) 0%,transparent 30%,rgba(8,18,38,.48) 100%)}
.hero__type .display{text-shadow:0 2px 26px rgba(0,20,50,.5)}
.hero__type .lead{color:rgba(255,255,255,.92); text-shadow:0 1px 14px rgba(0,20,50,.5)}

/* ══════════════════════════════════════════════════════════════════════
   REVISION 5 — 호버 정리 / 04 전환 부드럽게 / 07 번호 채우기
   ══════════════════════════════════════════════════════════════════════ */

/* ── 04 프리뷰: 겹쳐 놓고 크로스페이드 (레이아웃 점프·끊김 제거) ──── */
.gd-stage{display:grid; align-items:stretch}
.gd-panel{grid-area:1 / 1; opacity:0; visibility:hidden; pointer-events:none;
  transform:none; animation:none !important;
  transition:opacity .38s var(--e-ui), visibility .38s}
.gd-panel[hidden]{display:grid; visibility:hidden}   /* hidden 이어도 자리 유지 */
.gd-panel.is-on{opacity:1; visibility:visible; pointer-events:auto}
.gd-panel .gd-pic,.gd-panel .gd-body{transition:transform .45s var(--e-out) .04s,
  opacity .38s var(--e-ui) .04s}
.gd-panel:not(.is-on) .gd-pic{transform:translateY(10px); opacity:0}
.gd-panel:not(.is-on) .gd-body{transform:translateY(10px); opacity:0}
.gd-panel.is-on .gd-pic,.gd-panel.is-on .gd-body{transform:none; opacity:1}
@media (prefers-reduced-motion:reduce){
  .gd-panel,.gd-panel .gd-pic,.gd-panel .gd-body{transition:none}
}

/* ── 05 비교표: 행 호버 제거 ─────────────────────────────────────── */
.vs-list > div:hover{background:none; box-shadow:none; padding-left:0}

/* ── 06 절차: 노드 호버 확대 제거 ────────────────────────────────── */
.stepper li:hover .node{transform:scale(1)}
.stepper.is-in li:hover .node{transform:scale(1)}

/* ── 07 주의사항: 호버 배경 제거 + 번호 색 채우기 ────────────────── */
.warn:hover{background:none}
.warn .wn{-webkit-text-stroke:0; color:#fff;
  display:inline-grid; place-items:center;
  width:clamp(46px,4vw,58px); height:clamp(46px,4vw,58px);
  border-radius:12px; background:var(--grad-blue);
  font-size:clamp(17px,1.5vw,21px); font-weight:800; letter-spacing:-.01em;
  box-shadow:0 4px 14px rgba(163,37,47,.26); margin-bottom:20px}
.warn:nth-child(2) .wn{background:linear-gradient(135deg,#123A7A 0%,#1D5BC4 100%)}
.warn:nth-child(3) .wn{background:linear-gradient(135deg,#1D1D1D 0%,#2C3B58 100%);
  box-shadow:0 4px 14px rgba(29,29,29,.24)}
.warn{padding-top:34px}
.warn::after{content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--line); transform-origin:left}
.warn:first-child::after{left:0}
.warn h3{font-size:19px; margin-bottom:12px}

/* ── 브랜드 마크 ─────────────────────────────────────────────────── */
.brand{gap:10px}
.brand-mark{width:34px; height:34px; display:block; flex:0 0 auto; border-radius:8px}
@media (max-width:560px){ .brand small{display:none} .brand-mark{width:30px; height:30px} }

/* 04 프리뷰 일러스트: 잘림 방지 */
.gd-pic{display:grid; place-items:center; overflow:hidden; padding:clamp(14px,1.6vw,26px)}
.gd-pic img{width:auto; height:auto; max-width:100%; max-height:100%;
  object-fit:contain; mix-blend-mode:multiply}

/* ══════════════════════════════════════════════════════════════════════
   REVISION 6 — 04 실사·제목중복 제거 / 07 ETA 조회 CTA
   ══════════════════════════════════════════════════════════════════════ */

/* ── 04 프리뷰: 사진 + 리드 + 키워드 칩 ─────────────────────────── */
.gd-pic{background:var(--paper-3); padding:0; border-radius:10px}
.gd-pic img{width:100%; height:100%; max-width:none; max-height:none;
  object-fit:cover; mix-blend-mode:normal; border-radius:10px}
.gd-body .label{display:block; color:var(--accent); margin-bottom:14px;
  font-family:var(--f-mono); letter-spacing:.1em}
.gd-lead{font-size:clamp(17px,1.5vw,20px); line-height:1.65; color:var(--ink);
  font-weight:600; letter-spacing:-.02em; margin-bottom:18px}
.gd-tags{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:24px}
.gd-tags li{font-size:12.5px; font-weight:600; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:6px 12px}

/* ── 07 ETA 조회 CTA ────────────────────────────────────────────── */
.etacheck{background:var(--paper)}
.ec{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(24px,3vw,52px); align-items:center;
  background:var(--grad-ink); color:#fff; border-radius:16px;
  padding:clamp(28px,3.4vw,48px) clamp(24px,3vw,46px); position:relative; overflow:hidden}
.ec::before{content:""; position:absolute; right:-6%; top:-40%;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(163,37,47,.42) 0%,transparent 68%)}
.ec-body{position:relative; z-index:1}
.ec-body .label{display:block; color:rgba(255,255,255,.6); margin-bottom:12px}
.ec-body .h2{color:#fff; margin-bottom:14px}
.ec-body p{font-size:15.5px; line-height:1.75; color:rgba(255,255,255,.78);
  max-width:46ch; margin-bottom:26px}
.ec-act{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.ec-act .btn{border-color:#fff; color:#fff; padding:15px 30px; font-size:16px}
.ec-act .btn::before{background:#fff}
.ec-act .btn:hover{color:var(--ink); border-color:#fff}
.ec-act .btn:hover span{color:var(--ink)}
.ec-act .btn:hover .arw,.ec-act .btn:hover .arw::after{background-color:var(--ink); border-color:var(--ink)}
.ec-sub{font-size:14.5px; font-weight:600; color:rgba(255,255,255,.78)}
.ec-sub:hover{color:#fff; text-decoration:underline; text-underline-offset:4px}
.ec-facts{position:relative; z-index:1; display:grid; gap:0;
  border-top:1px solid rgba(255,255,255,.16)}
.ec-facts li{padding:16px 0; border-bottom:1px solid rgba(255,255,255,.16);
  display:flex; align-items:baseline; gap:14px}
.ec-facts b{font-family:var(--f-disp); font-size:clamp(20px,1.9vw,26px); font-weight:800;
  letter-spacing:-.02em; min-width:96px}
.ec-facts span{font-size:14px; color:rgba(255,255,255,.7)}
@media (max-width:900px){ .ec{grid-template-columns:1fr} }

/* ── 브랜드 락업 (심볼 + 국문/영문 2단, 광학 정렬) ─────────────────── */
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand-mark{width:36px; height:36px; flex:0 0 auto; display:block; border-radius:0}
.brand-txt{display:flex; flex-direction:column; justify-content:center; gap:2px; line-height:1}
.brand-txt b{font-size:17.5px; font-weight:800; letter-spacing:-.03em;
  color:var(--ink); line-height:1.1}
.brand-txt small{font-family:var(--f-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.14em; color:var(--ink-3); line-height:1.1; white-space:nowrap}
.site-header .brand{margin-right:auto}
@media (max-width:900px){ .brand-txt small{display:none} .brand-txt b{font-size:16.5px} }
@media (max-width:560px){ .brand-mark{width:32px; height:32px} .brand-txt b{font-size:15.5px} }

/* ── 헤더를 inner(컨테이너) 기준으로 정렬 ────────────────────────── */
.site-header{padding-inline:0; display:block}
.hdr-inner{width:var(--container); margin-inline:auto; height:var(--header-h);
  display:flex; align-items:center; gap:20px}
.hdr-inner .gnb{margin-inline-start:auto}
@media (max-width:768px){
  .gnb{left:0; right:0; padding-inline:0}
  .gnb.is-open{display:block; width:100%}
  .gnb > a{display:block; width:var(--container); margin-inline:auto}
}

/* ── 06 ETA 조회: 여권 이미지 ───────────────────────────────────── */
.ec-side{position:relative; z-index:1; display:grid; gap:clamp(16px,1.8vw,24px)}
.ec-pic{display:block; border-radius:12px; overflow:hidden; aspect-ratio:16/10;
  background:rgba(255,255,255,.06); position:relative}
.ec-pic::after{content:""; position:absolute; inset:0;
  background:linear-gradient(160deg,rgba(163,37,47,.18) 0%,transparent 55%,rgba(6,14,30,.42) 100%)}
.ec-pic img{width:100%; height:100%; object-fit:cover; display:block}
.ec-facts{border-top:0}
.ec-facts li{padding:13px 0}
.ec-facts li:first-child{border-top:1px solid rgba(255,255,255,.16)}
@media (max-width:900px){ .ec-pic{aspect-ratio:16/7} }

/* ── 06 ETA 조회: 코드로 그린 여권 ─────────────────────────────── */
.ec{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.ec-side{display:grid; place-items:center; padding:clamp(4px,1vw,12px)}
.pp{width:100%; max-width:340px; height:auto; display:block; overflow:visible;
  filter:drop-shadow(0 22px 40px rgba(3,10,24,.45))}
.pp-badge{transform-origin:250px 196px}
html.js .pp{opacity:0; transform:translateY(18px) rotate(-3deg);
  transition:opacity .7s var(--e-out), transform .8s var(--e-out)}
html.js .ec.is-in .pp{opacity:1; transform:translateY(0) rotate(-3deg)}
html.js .pp-badge{opacity:0; transform:scale(.6);
  transition:opacity .5s var(--e-out) .35s, transform .55s var(--e-out) .35s}
html.js .ec.is-in .pp-badge{opacity:1; transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  html.js .pp,html.js .pp-badge{opacity:1; transform:none; transition:none}
}
@media (max-width:900px){
  .ec{grid-template-columns:1fr}
  .pp{max-width:260px}
  html.js .pp{transform:translateY(14px) rotate(0deg)}
  html.js .ec.is-in .pp{transform:none}
}

/* ── 모바일: 단순 fade up (순차 지연 없음, 짧게) ─────────────────── */
@media (max-width:900px){
  html.js [data-rich]{transform:translateY(12px);
    transition-duration:.4s !important; transition-delay:0ms !important}
  html.js [data-rich].is-in{transform:none}
  html.js [data-rich-mask] > span{transition-duration:.42s !important;
    transition-delay:0ms !important}
  html.js .stepper .node{transition-delay:0ms !important}
}
/* data-rich-plain 은 자체 자식만 움직임 — 컨테이너는 숨기지 않는다 */
html.js [data-rich-plain]{opacity:1; transform:none; filter:none}

/* ── 06 ETA 조회: 여권 + 상태 카드 (코드 구현) ─────────────────── */
.ec-side{display:grid; place-items:center; padding:8px 0}
.check-visual{position:relative; width:min(100%,420px); height:380px;
  display:flex; align-items:center; justify-content:flex-start}

.passport{width:270px; height:350px; border-radius:14px; padding:44px 28px;
  color:#F5CE88; display:flex; flex-direction:column; align-items:center;
  background:linear-gradient(150deg,#8B1E39 0%,#7A1730 45%,#5E1024 100%);
  box-shadow:0 25px 45px rgba(1,18,42,.42), inset 0 1px 0 rgba(255,255,255,.10);
  position:relative; overflow:hidden}
.passport::after{content:""; position:absolute; inset:16px; border-radius:8px;
  border:1px solid rgba(245,206,136,.28); pointer-events:none}
.passport small{font-size:10.5px; letter-spacing:.2em; font-weight:600;
  color:rgba(245,206,136,.78)}
.passport strong{font-family:Georgia,'Times New Roman',serif; letter-spacing:.08em;
  font-size:23px; margin-top:10px; font-weight:400}
.pp-emboss{margin:auto; width:86px; height:86px; border-radius:50%;
  border:2.5px solid rgba(245,206,136,.62); position:relative}
.pp-emboss::before{content:""; position:absolute; inset:11px; border-radius:50%;
  border:1.5px solid rgba(245,206,136,.34)}
.pp-emboss::after{content:""; position:absolute; left:50%; top:50%; width:30px; height:30px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:2px solid rgba(245,206,136,.5); border-radius:5px}
.pp-chip{width:44px; height:14px; border-radius:3px; margin-top:auto;
  background:linear-gradient(180deg,#E8CF9B,#C6A468); opacity:.8; position:relative}
.pp-chip::after{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(94,16,36,.5) 9px 10px)}

.status-card{position:absolute; left:158px; top:128px; width:246px; padding:22px;
  background:#fff; color:var(--ink); border-radius:16px;
  box-shadow:0 20px 44px rgba(1,18,42,.34);
  display:grid; grid-template-columns:15px 1fr; align-items:start}
.status-dot{width:10px; height:10px; border-radius:50%; background:#34B878; margin-top:5px;
  box-shadow:0 0 0 0 rgba(52,184,120,.55); animation:dotPulse 2.4s ease-out infinite}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(52,184,120,.5)}
  70%{box-shadow:0 0 0 9px rgba(52,184,120,0)}
  100%{box-shadow:0 0 0 0 rgba(52,184,120,0)}}
.status-card small{grid-column:2; font-size:10px; letter-spacing:.14em; color:#708095;
  font-weight:700}
.status-card b{grid-column:2; font-size:21px; margin:5px 0; letter-spacing:-.02em}
.status-card em{grid-column:2; font-style:normal; color:#34A46F; font-size:12px; font-weight:600}

/* 등장 모션 */
html.js .passport{opacity:0; transform:translateY(20px) rotate(-4deg);
  transition:opacity .7s var(--e-out), transform .8s var(--e-out)}
html.js .ec.is-in .passport{opacity:1; transform:translateY(0) rotate(-4deg)}
html.js .status-card{opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--e-out) .28s, transform .6s var(--e-out) .28s}
html.js .ec.is-in .status-card{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .passport,html.js .status-card{opacity:1; transform:none; transition:none}
  .status-dot{animation:none}
}
@media (max-width:900px){
  .check-visual{height:330px; justify-content:center; width:100%}
  .passport{width:228px; height:296px; padding:34px 22px}
  .passport strong{font-size:20px}
  .pp-emboss{width:70px; height:70px}
  .status-card{left:auto; right:0; top:172px; width:216px; padding:18px}
  .status-card b{font-size:19px}
  html.js .passport{transform:translateY(14px) rotate(0)}
  html.js .ec.is-in .passport{transform:none}
}
@media (max-width:560px){
  .check-visual{height:300px}
  .passport{width:204px; height:266px}
  .status-card{width:198px; top:158px; right:-4px}
}

/* ── 여권 SVG 배치 ─────────────────────────────────────────────── */
.pp-svg{width:min(100%,300px); height:auto; display:block; overflow:visible}
html.js .pp-svg{opacity:0; transform:translateY(20px) rotate(-4deg);
  transition:opacity .7s var(--e-out), transform .85s var(--e-out)}
html.js .ec.is-in .pp-svg{opacity:1; transform:translateY(0) rotate(-4deg)}
@media (prefers-reduced-motion:reduce){
  html.js .pp-svg{opacity:1; transform:none; transition:none}
}
@media (max-width:900px){
  .pp-svg{width:min(100%,244px)}
  html.js .pp-svg{transform:translateY(14px)}
  html.js .ec.is-in .pp-svg{transform:none}
}

/* ── 상태 카드 위치: 여권 표지 문구를 가리지 않게 우하단으로 ─────── */
.check-visual{height:430px; align-items:flex-start; padding-top:6px}
.status-card{left:auto; right:-6px; top:268px; width:238px; padding:20px}
.status-card b{font-size:19.5px}
@media (max-width:900px){
  .check-visual{height:392px; justify-content:center}
  .status-card{right:0; top:246px; width:214px; padding:17px}
  .status-card b{font-size:18px}
}
@media (max-width:560px){
  .check-visual{height:360px}
  .pp-svg{width:min(100%,214px)}
  .status-card{right:-2px; top:220px; width:196px; padding:15px}
  .status-card b{font-size:16.5px}
  .status-card em{font-size:11.5px}
}

/* ── 상태 카드 v2: 잔여일 + 게이지 ─────────────────────────────── */
.status-card{display:block; padding:20px 22px; width:250px; border-radius:14px;
  box-shadow:0 22px 46px rgba(1,18,42,.36), 0 0 0 1px rgba(12,22,38,.05)}
.sc-top{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:12px}
.sc-top small{font-size:11px; font-weight:700; letter-spacing:.02em; color:#6C7A90}
.sc-pill{font-size:11px; font-weight:800; letter-spacing:.02em; color:#0E7A4A;
  background:#E4F6EC; border:1px solid #BFE6D2; border-radius:999px; padding:3px 10px}
.sc-num{display:flex; align-items:baseline; gap:5px; margin:0 0 12px}
.sc-num b{font-family:var(--f-disp); font-size:34px; font-weight:800; letter-spacing:-.03em;
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.sc-num span{font-size:14px; font-weight:700; color:var(--ink-2)}
.sc-bar{height:6px; border-radius:99px; background:#E9EDF3; overflow:hidden; margin-bottom:10px}
.sc-bar i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,#12A05F,#37C489);
  transition:width 1.1s var(--e-out) .5s}
html.js .ec.is-in .sc-bar i{width:var(--w,62%)}
html:not(.js) .sc-bar i{width:var(--w,62%)}
.sc-sub{margin:0; font-size:11.5px; color:#8B97A8; letter-spacing:-.01em}
@media (prefers-reduced-motion:reduce){ .sc-bar i{transition:none; width:var(--w,62%)} }
@media (max-width:900px){
  .status-card{width:224px; padding:17px 18px}
  .sc-num b{font-size:29px}
}
@media (max-width:560px){
  .status-card{width:202px; padding:15px 16px}
  .sc-num b{font-size:26px}
  .sc-sub{font-size:10.5px}
}

/* ── 여권/카드 겹침 정리: 카드를 더 아래·바깥으로 ────────────────── */
.check-visual{height:460px}
.pp-svg{margin-left:-6px}
.status-card{top:312px; right:-22px}
@media (max-width:900px){
  .check-visual{height:410px}
  .status-card{top:280px; right:-6px}
}
@media (max-width:560px){
  .check-visual{height:372px}
  .status-card{top:252px; right:-4px}
}

/* ── 한글 렌더링 보정 ────────────────────────────────────────────── */
.brand-txt b{font-family:var(--f-sans)}          /* 브랜드 국문은 본문 폰트로 */
.brand-txt small{font-family:'JetBrains Mono',var(--f-sans),monospace}
/* 모노 라벨 안의 한글도 Pretendard 로 렌더 (숫자·영문만 모노) */
.label,.idx,.sc-top small,.status-card small,.colophon .foot,.gd-body .label,
.sc-sub,.hero__meta span{font-family:var(--f-mono)}
/* 한글이 섞인 라벨은 자간을 줄여 어색함 제거 */
.label,.gd-body .label{letter-spacing:.06em; word-spacing:-.06em}

/* ── 상태 카드: 여권 오른쪽에 겹치게 ─────────────────────────────── */
.check-visual{justify-content:flex-start; height:430px}
.pp-svg{margin-left:-18px}
.status-card{left:auto; right:-12px; top:186px; width:252px}
@media (max-width:900px){
  .check-visual{height:392px; justify-content:center}
  .pp-svg{margin-left:-34px}
  .status-card{right:-6px; top:168px; width:222px}
}
@media (max-width:560px){
  .check-visual{height:352px}
  .pp-svg{margin-left:-28px; width:min(100%,196px)}
  .status-card{right:-6px; top:148px; width:196px}
}

/* ── 다국어 선택기 ───────────────────────────────────────────────── */
.lang{position:relative; margin-left:10px}
.lang-btn{display:flex; align-items:center; gap:6px; padding:8px 12px;
  border:1px solid var(--line); border-radius:6px; background:var(--paper);
  font-size:13px; font-weight:700; color:var(--ink-2); letter-spacing:.02em;
  transition:border-color var(--d-hover) var(--e-ui), color var(--d-hover) var(--e-ui)}
.lang-btn:hover,.lang.is-open .lang-btn{border-color:var(--accent); color:var(--accent)}
.lang-caret{width:6px; height:6px; border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor; transform:rotate(45deg) translateY(-1px);
  transition:transform var(--d-hover) var(--e-ui)}
.lang.is-open .lang-caret{transform:rotate(-135deg) translateY(-1px)}
.lang-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:168px;
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow-2); padding:6px; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--e-ui), transform .22s var(--e-out), visibility .22s}
.lang.is-open .lang-menu{opacity:1; visibility:visible; transform:none}
.lang-menu li{margin:0}
.lang-menu a,.lang-menu span[role="menuitem"]{display:flex; align-items:center; gap:9px;
  padding:9px 11px; border-radius:6px; font-size:14px; color:var(--ink)}
.lang-menu a:hover{background:var(--accent-soft); color:var(--accent); text-decoration:none}
.lang-menu b{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--ink-3); min-width:22px}
.lang-menu a[aria-current] b{color:var(--accent)}
.lang-menu span[role="menuitem"]{color:var(--ink-3); cursor:default}
.lang-menu em{margin-left:auto; font-style:normal; font-size:11px; color:#9AA6B6}
@media (max-width:768px){
  .lang{margin:12px 0 0}
  .lang-btn{width:100%; justify-content:center; padding:13px}
  .lang-menu{position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; padding:6px 0 0; min-width:0; display:none}
  .lang.is-open .lang-menu{display:block}
}

/* ══════════════════════════════════════════════════════════════════════
   콘텐츠 페이지 (서브페이지) 공통
   ══════════════════════════════════════════════════════════════════════ */

/* ── 페이지 헤드 ─────────────────────────────────────────────────── */
.page-head{background:var(--paper-2); border-bottom:1px solid var(--line);
  padding:clamp(30px,3.4vw,52px) 0 clamp(26px,3vw,40px)}
.crumb{margin-bottom:16px}
.crumb ol{display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--ink-3)}
.crumb li::after{content:"›"; margin-left:8px; color:#B7C0CD}
.crumb li:last-child::after{content:""}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--accent)}
.page-head .label{display:block; color:var(--accent); margin-bottom:12px}
.page-h1{font-size:clamp(26px,3.4vw,44px); font-weight:800; letter-spacing:-.028em;
  line-height:1.28; max-width:24ch; margin-bottom:14px}
.page-lead{font-size:clamp(16px,1.35vw,18.5px); line-height:1.7; color:var(--ink-2);
  max-width:60ch; margin-bottom:18px}
.page-meta{display:flex; flex-wrap:wrap; gap:8px 18px; font-family:var(--f-mono);
  font-size:12px; color:var(--ink-3); letter-spacing:.03em}
.page-meta li{position:relative; padding-left:14px}
.page-meta li::before{content:""; position:absolute; left:0; top:50%; width:5px; height:5px;
  border-radius:50%; background:var(--accent); transform:translateY(-50%); opacity:.55}

/* ── 본문 2단 (좌 목차 고정 / 우 본문) ──────────────────────────── */
.doc{display:grid; grid-template-columns:minmax(0,238px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px); align-items:start;
  padding-block:clamp(34px,4vw,64px) clamp(20px,2.4vw,36px)}
.doc-toc{position:sticky; top:calc(var(--header-h) + 24px); max-height:calc(100vh - 140px);
  overflow-y:auto; padding-right:8px}
.toc-title{font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:.12em;
  color:var(--ink-3); margin-bottom:14px; text-transform:uppercase}
.doc-toc ol{border-left:1px solid var(--line)}
.doc-toc li{margin:0}
.doc-toc a{display:block; padding:7px 0 7px 14px; margin-left:-1px;
  border-left:2px solid transparent; font-size:14px; line-height:1.5;
  color:var(--ink-2); letter-spacing:-.015em;
  transition:color var(--d-hover) var(--e-ui), border-color var(--d-hover) var(--e-ui)}
.doc-toc a:hover{color:var(--accent)}
.doc-toc a.is-on{color:var(--accent); font-weight:700; border-left-color:var(--accent)}
.doc-toc a.lv3{padding-left:26px; font-size:13px; color:var(--ink-3)}
.doc-toc::-webkit-scrollbar{width:4px}
.doc-toc::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}

/* ── 본문 조판 ───────────────────────────────────────────────────── */
.doc-body{min-width:0; max-width:74ch}
.doc-body h2{font-size:clamp(21px,2.1vw,30px); letter-spacing:-.025em; line-height:1.35;
  margin:clamp(40px,4.6vw,64px) 0 16px; padding-bottom:14px;
  border-bottom:2px solid var(--line); scroll-margin-top:calc(var(--header-h) + 20px)}
.doc-body h2:first-child{margin-top:0}
.doc-body h3{font-size:clamp(17px,1.6vw,21px); letter-spacing:-.02em; line-height:1.45;
  margin:32px 0 12px; color:var(--ink); scroll-margin-top:calc(var(--header-h) + 20px)}
.doc-body p{margin:0 0 17px; font-size:16.5px; line-height:1.85; color:var(--ink-2)}
.doc-body strong{color:var(--ink); font-weight:700}
.doc-body ul,.doc-body ol{margin:0 0 20px; padding-left:4px}
.doc-body li{position:relative; padding-left:20px; margin-bottom:9px;
  font-size:16.5px; line-height:1.8; color:var(--ink-2)}
.doc-body ul > li::before{content:""; position:absolute; left:2px; top:.78em;
  width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.75}
.doc-body ol{counter-reset:dl}
.doc-body ol > li{padding-left:28px}
.doc-body ol > li::before{counter-increment:dl; content:counter(dl,decimal-leading-zero);
  position:absolute; left:0; top:.06em; font-family:var(--f-mono); font-size:12px;
  font-weight:600; color:var(--accent)}
.doc-body a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}

/* 표 */
.doc-body .table-wrap{overflow-x:auto; margin:0 0 24px; border:1px solid var(--line);
  border-radius:8px; background:var(--paper)}
.doc-body table{border-collapse:collapse; width:100%; min-width:520px; font-size:15px}
.doc-body th,.doc-body td{padding:13px 16px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); line-height:1.65}
.doc-body thead th{background:var(--paper-2); color:var(--ink); font-weight:700;
  white-space:nowrap; font-size:14px; border-bottom:2px solid var(--accent)}
.doc-body tbody tr:last-child td,.doc-body tbody tr:last-child th{border-bottom:0}
.doc-body tbody th{font-weight:700; color:var(--ink); white-space:nowrap}
.doc-body tbody tr:hover{background:var(--accent-soft)}

/* 강조 박스 */
.doc-body .note{border:1px solid var(--line); border-left:3px solid var(--accent);
  background:var(--paper-2); border-radius:0 8px 8px 0; padding:18px 20px; margin:0 0 24px}
.doc-body .note p:last-child{margin-bottom:0}
.doc-body .note b{display:block; color:var(--ink); margin-bottom:6px; font-size:15px}
.doc-body .keyfact{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px;
  overflow:hidden; margin:0 0 26px}
.doc-body .keyfact div{background:var(--paper); padding:18px 18px 20px}
.doc-body .keyfact b{display:block; font-family:var(--f-disp); font-size:26px; font-weight:800;
  letter-spacing:-.03em; color:var(--ink); line-height:1; margin-bottom:8px}
.doc-body .keyfact span{font-size:13.5px; color:var(--ink-2); line-height:1.55}

/* ── 이어서 볼 내용 ─────────────────────────────────────────────── */
.next-band{background:var(--paper-2)}
.next-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.next-card{display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:10px; padding:22px 22px 24px;
  transition:border-color var(--d-hover) var(--e-ui), transform .4s var(--e-out),
             box-shadow .4s var(--e-out)}
.next-card:hover{border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow-1)}
.nc-label{font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
  margin-bottom:9px}
.next-card p{font-size:14.5px; line-height:1.7; color:var(--ink-2); margin:0}
.nc-go{margin-top:auto; padding-top:16px; font-size:13.5px; font-weight:700; color:var(--accent)}

@media (max-width:1024px){
  .doc{grid-template-columns:1fr; gap:0}
  .doc-toc{position:static; max-height:none; margin-bottom:28px; padding:16px 18px;
    background:var(--paper-2); border-radius:10px; border:1px solid var(--line)}
  .doc-toc ol{border-left:0; columns:2; column-gap:20px}
  .doc-toc a{border-left:0; padding-left:0}
  .doc-toc a.is-on{border-left:0}
  .doc-body{max-width:none}
  .next-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .doc-toc ol{columns:1}
  .doc-body p,.doc-body li{font-size:16px}
}

/* ── 영국비자소식 목록 ──────────────────────────────────────────── */
.news-list{border-top:1px solid var(--line)}
.news-item{display:grid; grid-template-columns:150px minmax(0,1fr);
  gap:clamp(14px,2vw,32px); padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--line);
  transition:background-color var(--d-hover) var(--e-ui)}
.news-item:hover{background:var(--accent-soft)}
.ni-meta{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.ni-meta time{font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3); letter-spacing:.03em}
.ni-cat{font-size:11.5px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border:1px solid #CFE0FA; border-radius:999px; padding:3px 10px}
.ni-body h2{font-size:clamp(17px,1.6vw,21px); letter-spacing:-.02em; line-height:1.45;
  margin:0 0 8px; padding:0; border:0}
.ni-body p{margin:0; font-size:15.5px; line-height:1.75; color:var(--ink-2)}
@media (max-width:640px){
  .news-item{grid-template-columns:1fr; gap:10px}
  .ni-meta{flex-direction:row; align-items:center; gap:10px}
}

/* ── 문의 폼 ────────────────────────────────────────────────────── */
.cform{margin-top:8px}
.cf-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 20px}
.cf-row{display:flex; flex-direction:column; gap:7px; margin:0}
.cf-full{grid-column:1 / -1}
.cf-row label{font-size:13.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.cf-row input,.cf-row select,.cf-row textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
  transition:border-color var(--d-hover) var(--e-ui), box-shadow var(--d-hover) var(--e-ui)}
.cf-row textarea{resize:vertical; min-height:132px; line-height:1.7}
.cf-row input:focus,.cf-row select:focus,.cf-row textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(163,37,47,.14)}
.cf-row input[type="file"]{padding:10px 12px; font-size:14px}
.cf-hint{font-size:12.5px; color:var(--ink-3); line-height:1.6}
.cf-agree{margin-top:26px; padding:20px 22px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:10px}
.cf-agree > label{display:flex; align-items:center; gap:10px; font-size:15px;
  font-weight:700; color:var(--ink); cursor:pointer}
.cf-agree input[type="checkbox"]{width:18px; height:18px; accent-color:var(--accent)}
.cf-agree table{font-size:14px}
.cf-submit{margin:28px 0 0; text-align:center}
@media (max-width:720px){ .cf-grid{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════════════════
   호버 색상 통일 — 모든 인터랙션은 기관 청색으로
   (어두운 지면 위 흰 버튼의 반전만 예외)
   ══════════════════════════════════════════════════════════════════════ */

/* 카드·목록 제목 */
.next-card:hover .nc-label,
.next-card:focus-within .nc-label          { color:var(--accent) }
.news-item:hover .ni-body h2               { color:var(--accent) }
.news-item:hover .ni-meta time             { color:var(--accent) }
.pcard:hover h3, .pcard:focus-within h3    { color:var(--accent) }
.sl-track .panel:hover .body h3            { color:var(--accent) }
.stepper li:hover h3                       { color:var(--accent) }
.warn:hover h3                             { color:var(--accent) }
.faq .qa summary:hover .q                  { color:var(--accent) }
.gd-list button:hover .gt                  { color:var(--accent) }
.vs-card:hover .vs-go                      { color:var(--accent) }

/* 링크·라벨류 */
.crumb a:hover,
.doc-toc a:hover,
.sec-link:hover,
.doc-body a:hover,
.lang-menu a:hover,
.page-meta a:hover                         { color:var(--accent) }
.doc-body a:hover                          { text-decoration-thickness:2px }

/* 회색 보조 텍스트가 들어간 카드 — 호버 시 함께 파랗게 */
.next-card:hover .nc-go,
.pcard:hover .go,
.sl-track .panel:hover .body .go           { color:var(--accent) }

/* 표 행 호버: 배경만 파랗게, 글자는 그대로 (가독성 유지) */
.doc-body tbody tr:hover th,
.doc-body tbody tr:hover td                { color:var(--ink) }
.press-table tbody tr:hover th             { color:var(--ink) }

/* 목차 현재 위치 */
.doc-toc a.is-on,
.doc-toc a.is-on.lv3                       { color:var(--accent) }

/* 전환 시간 통일 */
.next-card .nc-label,.news-item h2,.news-item time,.pcard h3,
.stepper h3,.warn h3,.gd-list .gt,.vs-go,.nc-go
{ transition:color var(--d-hover) var(--e-ui) }

/* 다크 지면 위 요소는 흰색 유지 */
.tile:hover strong,.tile:hover em          { color:#fff }
.colophon .map a:hover,
.colophon .cta a:hover,
.colophon .fmap a:hover                    { color:#fff }

/* ── 서브페이지 헤더: 실사 배경 (연하게) ────────────────────────── */
.page-head{position:relative; overflow:hidden; isolation:isolate}
.page-head::before{content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--head-bg); background-size:cover; background-position:center 38%;
  opacity:.22; filter:grayscale(.3) contrast(.94) saturate(.9);
  transform:scale(1.02)}
.page-head::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(96deg,
    var(--paper-2) 0%, rgba(248,248,248,.94) 34%,
    rgba(248,248,248,.72) 62%, rgba(248,248,248,.46) 100%)}
.page-head > .bleed{position:relative; z-index:2}
.page-head{border-bottom:1px solid var(--line);
  padding-block:clamp(34px,3.8vw,58px) clamp(28px,3.2vw,44px)}
@media (max-width:900px){
  .page-head::before{opacity:.18}
  .page-head::after{background:linear-gradient(180deg,
    rgba(248,248,248,.92) 0%, rgba(248,248,248,.86) 60%, rgba(248,248,248,.94) 100%)}
}
@media (prefers-reduced-motion:reduce){ .page-head::before{transform:none} }

/* ══════════════════════════════════════════════════════════════════════
   서브페이지 헤더 v2 — 블루 지면 + 영국 국기 문양 (전 페이지 공통)
   ══════════════════════════════════════════════════════════════════════ */
.page-head{
  background:linear-gradient(104deg,#0A1A3C 0%,#12306B 42%,#0B4EA8 78%,#0A56C4 100%);
  color:#fff; border-bottom:0;
  padding-block:clamp(38px,4.2vw,64px) clamp(30px,3.4vw,48px)}
.page-head::before{content:""; position:absolute; inset:0; z-index:0;
  background-image:url('/assets/images/bg/uk-flag.svg');
  background-size:cover; background-position:center;
  opacity:.09; filter:saturate(.7);
  transform:none; mix-blend-mode:screen}
.page-head::after{content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 130% at 12% 20%, rgba(6,14,34,.62) 0%, transparent 62%),
    linear-gradient(180deg, rgba(6,14,34,.30) 0%, transparent 34%, rgba(6,14,34,.34) 100%)}

/* 헤더 안 텍스트 반전 */
.page-head .crumb ol,.page-head .crumb a{color:rgba(255,255,255,.68)}
.page-head .crumb a:hover{color:#fff}
.page-head .crumb li::after{color:rgba(255,255,255,.38)}
.page-head .label{color:rgba(255,255,255,.72)}
.page-h1{color:#fff; text-shadow:0 2px 22px rgba(3,10,26,.34)}
.page-lead{color:rgba(255,255,255,.86)}
.page-meta{color:rgba(255,255,255,.62)}
.page-meta li::before{background:#7FB2FF; opacity:.9}

@media (max-width:900px){
  .page-head::before{opacity:.08}
  .page-head::after{background:
    linear-gradient(180deg, rgba(6,14,34,.34) 0%, transparent 40%, rgba(6,14,34,.38) 100%)}
}

/* ══════════════════════════════════════════════════════════════════════
   서브페이지 헤더 v3 — 런던 스카이라인 실사 (전 페이지 공통)
   ══════════════════════════════════════════════════════════════════════ */
.page-head{
  background:#0A1A3C;
  padding-block:clamp(40px,4.4vw,68px) clamp(32px,3.6vw,50px)}
.page-head::before{content:""; position:absolute; inset:0; z-index:0;
  background-image:url('/assets/images/bg/head-main.webp');
  background-size:cover; background-position:center 74%;
  opacity:1; filter:none; mix-blend-mode:normal; transform:none}
.page-head::after{content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(96deg, rgba(6,14,34,.94) 0%, rgba(8,22,52,.86) 30%,
                    rgba(10,34,80,.62) 58%, rgba(12,48,110,.42) 100%),
    linear-gradient(180deg, rgba(6,14,34,.34) 0%, transparent 38%, rgba(6,14,34,.40) 100%)}
@media (max-width:900px){
  .page-head::before{background-position:center 78%}
  .page-head::after{background:
    linear-gradient(180deg, rgba(6,14,34,.86) 0%, rgba(8,22,52,.78) 55%, rgba(6,14,34,.88) 100%)}
}

/* ── 페이지 인덱스: 현재 번호에 불이 들어온 느낌 ─────────────────── */
.pg-idx{display:inline-flex; align-items:center; gap:7px; line-height:1}
.pg-idx .pg-on{position:relative; font-family:var(--f-mono); font-size:15px; font-weight:700;
  color:#fff; letter-spacing:.04em}
.pg-idx .pg-on::after{content:""; position:absolute; left:50%; top:50%; z-index:-1;
  width:32px; height:32px; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(96,160,255,.42) 0%, transparent 68%)}
.pg-idx i{font-style:normal; color:rgba(255,255,255,.62); font-size:13px} /* .32→.62 대비 2.9→7.2:1 */
.pg-idx .pg-tot{font-family:var(--f-mono); font-size:13px; color:rgba(255,255,255,.62);
  letter-spacing:.04em}
.pg-idx .pg-sep{font-style:normal; margin:0 3px; color:rgba(255,255,255,.62)}
.pg-idx .pg-name{color:rgba(255,255,255,.80); letter-spacing:.06em}

/* ── 헤더 배경: 다리가 보이도록 위치 조정 + 선명하게 ─────────────── */
.page-head::before{
  background-position:center 56%;
  filter:contrast(1.10) saturate(1.12) brightness(1.06)}
.page-head::after{background:
  linear-gradient(96deg, rgba(6,14,34,.88) 0%, rgba(8,22,52,.72) 28%,
                  rgba(10,34,80,.40) 56%, rgba(12,48,110,.20) 100%),
  linear-gradient(180deg, rgba(6,14,34,.26) 0%, transparent 42%, rgba(6,14,34,.30) 100%)}
@media (max-width:900px){
  .page-head::before{background-position:center 58%}
  .page-head::after{background:
    linear-gradient(180deg, rgba(6,14,34,.82) 0%, rgba(8,22,52,.70) 55%, rgba(6,14,34,.84) 100%)}
}

/* ── 서브페이지 하단 문의 CTA: 위 섹션과 간격 확보 ─────────────── */
.cta-band-sec{padding-block:clamp(48px,5vw,84px) clamp(48px,5vw,84px)}
.next-band{padding-bottom:clamp(48px,5vw,84px)}

/* ══════════════════════════════════════════════════════════════════════
   CTA 카드(.ec) — 호버 시 배경 모션
   ① 상시: 아주 느리게 떠다니는 오로라   ② 호버: 커서 따라오는 조명
   ══════════════════════════════════════════════════════════════════════ */
.ec{--mx:50%; --my:50%; position:relative; overflow:hidden; isolation:isolate;
  transition:box-shadow .55s var(--e-out), transform .55s var(--e-out)}

/* ① 오로라 — 세 덩어리가 서로 다른 속도로 흐른다 */
.ec::before{content:""; position:absolute; inset:-24%; z-index:0; pointer-events:none;
  background:
    /* 캐나다는 버건디 계열 — 영국판의 파란 오로라를 그대로 두면 테마가 어긋난다 */
    radial-gradient(38% 46% at 20% 26%, rgba(163,37,47,.46) 0%, transparent 62%),
    radial-gradient(34% 44% at 80% 70%, rgba(200,64,75,.32) 0%, transparent 64%),
    radial-gradient(30% 38% at 64% 16%, rgba(126,28,36,.42) 0%, transparent 60%);
  filter:blur(8px); opacity:.7;
  animation:ecDrift 26s ease-in-out infinite alternate;
  transition:opacity .55s var(--e-ui), filter .55s var(--e-ui)}
@keyframes ecDrift{
  0%   {transform:translate3d(-3%,-2%,0) scale(1)}
  35%  {transform:translate3d(2%, 3%,0) scale(1.09)}
  70%  {transform:translate3d(5%,-2%,0) scale(1.04)}
  100% {transform:translate3d(-1%, 4%,0) scale(1.11)}
}

/* ② 커서 조명 — 마우스 위치를 따라 부드럽게 이동 */
.ec::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(460px 460px at var(--mx) var(--my),
    rgba(255,176,184,.24) 0%, rgba(230,140,150,.10) 32%, transparent 62%);
  opacity:0; transition:opacity .45s var(--e-ui)}

/* 호버 상태 */
.ec:hover{box-shadow:0 22px 60px rgba(40,8,12,.42)}
.ec:hover::before{opacity:1; filter:blur(4px); animation-duration:14s}
.ec:hover::after{opacity:1}

/* 내용은 항상 배경 위 */
.ec-body,.ec-side{position:relative; z-index:2}

/* 테두리 미세 하이라이트 */
.ec{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.ec:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
                     0 22px 60px rgba(40,8,12,.42)}

@media (prefers-reduced-motion:reduce){
  .ec::before{animation:none; transform:none}
  .ec::after{display:none}
  .ec:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
}

/* ── 서브페이지 헤더: 더 어둡게 ─────────────────────────────────── */
.page-head::before{filter:contrast(1.08) saturate(1.06) brightness(.86)}
.page-head::after{background:
  linear-gradient(96deg, rgba(4,10,26,.95) 0%, rgba(6,16,40,.88) 26%,
                  rgba(8,26,62,.70) 54%, rgba(10,36,86,.52) 100%),
  linear-gradient(180deg, rgba(4,10,26,.42) 0%, rgba(4,10,26,.14) 44%, rgba(4,10,26,.50) 100%)}
.page-head .crumb ol,.page-head .crumb a{color:rgba(255,255,255,.62)}
.page-lead{color:rgba(255,255,255,.82)}
@media (max-width:900px){
  .page-head::after{background:
    linear-gradient(180deg, rgba(4,10,26,.90) 0%, rgba(6,16,40,.82) 55%, rgba(4,10,26,.92) 100%)}
}

/* ── CTA 카드: 커서 추적 제거, 배경만 은은하게 움직임 ───────────── */
.ec::after{display:none}

.ec::before{
  inset:-28%;
  background:
    radial-gradient(36% 44% at 22% 30%, rgba(0,116,255,.40) 0%, transparent 62%),
    radial-gradient(32% 42% at 76% 66%, rgba(40,136,255,.30) 0%, transparent 64%),
    radial-gradient(28% 36% at 60% 14%, rgba(163,37,47,.34) 0%, transparent 60%);
  filter:blur(10px); opacity:.72;
  animation:ecDrift 30s ease-in-out infinite alternate;
  transition:opacity .6s var(--e-ui), filter .6s var(--e-ui)}
.ec:hover::before{opacity:.95; filter:blur(7px); animation-duration:18s}

@keyframes ecDrift{
  0%   {transform:translate3d(-2%,-1.5%,0) scale(1)}
  50%  {transform:translate3d(2.5%, 2%,0) scale(1.06)}
  100% {transform:translate3d(-1%, 3%,0) scale(1.03)}
}
@media (prefers-reduced-motion:reduce){
  .ec::before{animation:none; transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   CTA 카드 호버 — 그림자 대신 내부 요소가 순차적으로 미끄러진다
   ══════════════════════════════════════════════════════════════════════ */
.ec:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}   /* 그림자 변화 없음 */

.ec-body > *,
.ec-side > *{transition:transform .62s var(--e-out), opacity .5s var(--e-ui)}

/* 오른쪽 → 왼쪽으로 순차 이동 */
.ec:hover .ec-body .label   { transform:translateX(-7px); transition-delay:0s }
.ec:hover .ec-body .h2      { transform:translateX(-7px); transition-delay:.06s }
.ec:hover .ec-body p        { transform:translateX(-7px); transition-delay:.12s }
.ec:hover .ec-body .ec-act  { transform:translateX(-7px); transition-delay:.18s }

/* 여권 카드가 있는 ETA 섹션은 반대 방향으로 살짝 (마주 보게) */
.ec:hover .ec-side          { transform:translateX(6px); transition-delay:.10s }

/* 버튼은 조금 더 움직여 이어지는 느낌 */
.ec .ec-act .btn{transition:transform .62s var(--e-out),
  color var(--d-hover) var(--e-ui), border-color var(--d-hover) var(--e-ui)}
.ec:hover .ec-act .btn{transform:translateX(-3px)}

@media (prefers-reduced-motion:reduce){
  .ec:hover .ec-body > *,.ec:hover .ec-side,.ec:hover .ec-act .btn{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   영국비자 소식 — 목록 / 상세
   ══════════════════════════════════════════════════════════════════════ */
.nw-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}

.news-list{border-top:1px solid var(--line)}
.news-item{border-bottom:1px solid var(--line)}
.news-item[hidden]{display:none}
.ni-link{display:grid; grid-template-columns:132px minmax(0,1fr) 28px;
  gap:clamp(14px,2vw,30px); align-items:start;
  padding:clamp(20px,2.3vw,28px) 0; position:relative}
/* 호버 배경 없음 — 좌측 컬럼이 붙어 보이지 않게 */
.news-item:hover{background:none}
.ni-link::before{content:""; position:absolute; left:-14px; top:clamp(20px,2.3vw,28px);
  bottom:clamp(20px,2.3vw,28px); width:2px; background:var(--accent);
  transform:scaleY(0); transform-origin:center;
  transition:transform .35s var(--e-out)}
.ni-link:hover::before,.ni-link:focus-visible::before{transform:scaleY(1)}

.ni-meta{display:flex; flex-direction:column; gap:9px; align-items:flex-start}
.ni-meta time{font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3);
  letter-spacing:.03em; transition:color var(--d-hover) var(--e-ui)}
.ni-cat{font-size:11.5px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border:1px solid #CFE0FA; border-radius:999px; padding:3px 10px}
.ni-body strong{display:block; font-size:clamp(17px,1.6vw,20px); font-weight:700;
  letter-spacing:-.02em; line-height:1.5; color:var(--ink); margin-bottom:8px;
  transition:color var(--d-hover) var(--e-ui)}
.ni-sum{display:block; font-size:15px; line-height:1.75; color:var(--ink-2)}
.ni-go{justify-self:end; align-self:center; width:9px; height:9px;
  border-top:1.6px solid var(--ink-3); border-right:1.6px solid var(--ink-3);
  transform:rotate(45deg);
  transition:transform .35s var(--e-ui), border-color var(--d-hover) var(--e-ui)}
.ni-link:hover .ni-body strong{color:var(--accent)}
.ni-link:hover .ni-meta time{color:var(--accent)}
.ni-link:hover .ni-go{border-color:var(--accent); transform:rotate(45deg) translate(3px,-3px)}
.nw-empty{text-align:center; padding:40px 0; color:var(--ink-3)}

/* 상세: 이전·다음 */
.nw-nav{display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin:clamp(36px,4vw,56px) 0 0; padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--line)}
.nw-nav a{display:flex; flex-direction:column; gap:7px; padding:18px 20px;
  border:1px solid var(--line); border-radius:10px; text-decoration:none;
  transition:border-color var(--d-hover) var(--e-ui), background-color var(--d-hover) var(--e-ui)}
.nw-nav a:hover{border-color:var(--accent); background:var(--accent-soft)}
.nw-nav span{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; color:var(--accent)}
.nw-nav strong{font-size:15.5px; font-weight:700; line-height:1.5; color:var(--ink);
  letter-spacing:-.02em}
.nw-next{text-align:right}
.nw-back{margin-top:22px; text-align:center}
.nw-back a{font-size:14.5px; font-weight:700; color:var(--accent); text-decoration:none}
.nw-back a:hover{text-decoration:underline; text-underline-offset:3px}

@media (max-width:640px){
  .ni-link{grid-template-columns:minmax(0,1fr) 24px; row-gap:10px}
  .ni-meta{flex-direction:row; align-items:center; gap:10px; grid-column:1 / -1}
  .nw-nav{grid-template-columns:1fr}
  .nw-next{text-align:left}
}

/* ── 소식 목록 레이아웃 정정 (구 규칙 무효화) ────────────────────── */
.news-item{display:block !important; grid-template-columns:none !important;
  padding:0 !important; gap:0 !important; background:none !important}
.doc-body .news-list a,.doc-body .nw-nav a,.doc-body .nw-back a{text-decoration:none}
.doc-body .ni-link{display:grid}
.ni-body strong{margin-bottom:8px}
/* 소식 목록은 본문 폭 제한을 받지 않게 */
.doc-body .news-list,.doc-body .nw-chips,.doc-body .nw-nav{max-width:none}

/* 소식 목록 페이지는 본문 컬럼을 넓게 */
.doc-body:has(.news-list){max-width:none}
@supports not (selector(:has(*))) {
  .news-list{width:100%}
}

/* ── 목차가 없는 페이지: 1단 ─────────────────────────────────────── */
.doc.no-toc{grid-template-columns:1fr}
.doc.no-toc .doc-body{max-width:none}

/* ── 헤더 메뉴: 이름이 길어져도 한 줄 유지 ──────────────────────── */
.gnb a{white-space:nowrap; padding:8px 10px; font-size:14.5px}
.hdr-inner{gap:14px}
@media (max-width:1320px){
  .brand-txt small{display:none}
  .gnb a{padding:8px 8px; font-size:14px}
  .lang{margin-left:6px}
  .lang-btn{padding:7px 10px; font-size:12.5px}
}
@media (max-width:1120px) and (min-width:769px){
  .brand-mark{width:32px; height:32px}
  .brand-txt b{font-size:15.5px}
  .gnb a{padding:8px 6px; font-size:13.5px}
}

/* ── 문의 폼: 오류·허니팟·완료 ──────────────────────────────────── */
.cf-error{background:#FDF2F2; border:1px solid #F5C6C6; border-left:3px solid #C8102E;
  border-radius:0 8px 8px 0; padding:16px 18px; margin:0 0 22px}
.cf-error b{display:block; color:#93202F; font-size:14.5px; margin-bottom:5px}
.cf-error p{margin:0; font-size:14.5px; color:#6B2029; line-height:1.7}
/* left:-9999px 는 RTL 에서 문서 끝 방향이라 1만 px 가로 스크롤을 만든다 (스킵 링크와 같은 문제) */
.cf-hp{position:absolute !important; left:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}

.done-box{text-align:center; max-width:620px; margin:clamp(10px,2vw,26px) auto 0;
  padding:clamp(34px,4vw,56px) clamp(22px,3vw,40px);
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px}
.done-ico{display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%;
  background:var(--grad-blue); margin-bottom:20px; position:relative}
.done-ico::after{content:""; width:22px; height:12px; border-left:3px solid #fff;
  border-bottom:3px solid #fff; transform:rotate(-45deg) translate(1px,-2px)}
.done-box h2{font-size:clamp(21px,2.2vw,28px); letter-spacing:-.025em; margin:0 0 10px;
  padding:0; border:0}
.done-no{font-family:var(--f-mono); font-size:14px; color:var(--ink-3); margin:0 0 16px}
.done-no b{color:var(--accent); font-size:16px}
.done-box p{font-size:15.5px; line-height:1.8; color:var(--ink-2); margin:0 auto; max-width:46ch}
.done-act{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-top:clamp(24px,3vw,34px) !important}
.btn-ghost2{border-color:var(--line); color:var(--ink-2)}

/* ── 링크형 버튼 ─────────────────────────────────────────────────── */
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--accent);
  font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-btn:hover{color:var(--accent-deep)}

/* ── 모달 ────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-dim{position:absolute;inset:0;background:rgba(6,14,34,.62);
  opacity:0;transition:opacity .26s var(--e-ui);backdrop-filter:blur(2px)}
.modal.is-on .modal-dim{opacity:1}
.modal-box{position:relative;width:min(94vw,620px);max-height:86vh;display:flex;
  flex-direction:column;background:var(--paper);border-radius:14px;overflow:hidden;
  box-shadow:0 28px 70px rgba(40,8,12,.42);
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .28s var(--e-out), transform .3s var(--e-out)}
.modal.is-on .modal-box{opacity:1;transform:none}
.modal-head{display:flex;align-items:center;gap:14px;padding:20px 22px;
  border-bottom:1px solid var(--line)}
.modal-head h2{font-size:17.5px;font-weight:800;letter-spacing:-.02em;margin:0;
  padding:0;border:0;flex:1}
.modal-x{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
  background:var(--paper);position:relative;cursor:pointer;flex:0 0 auto;
  transition:border-color var(--d-hover) var(--e-ui)}
.modal-x:hover{border-color:var(--accent)}
.modal-x::before,.modal-x::after{content:"";position:absolute;left:50%;top:50%;
  width:14px;height:1.6px;background:var(--ink-2);transform-origin:center}
.modal-x::before{transform:translate(-50%,-50%) rotate(45deg)}
.modal-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.modal-body{padding:20px 22px;overflow-y:auto;font-size:15px;line-height:1.8;color:var(--ink-2)}
.modal-body p{margin:0 0 12px}
.modal-body p:last-child{margin-bottom:0}
.modal-body table{font-size:14px}
.modal-body th,.modal-body td{padding:11px 14px}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 22px;border-top:1px solid var(--line);background:var(--paper-2)}
.modal-more{font-size:14px;font-weight:600;color:var(--accent)}
.modal-more:hover{text-decoration:underline;text-underline-offset:3px}
.modal-foot .btn{padding:11px 26px}
@media (max-width:560px){
  .modal-box{max-height:90vh}
  .modal-foot{flex-direction:column-reverse;align-items:stretch}
  .modal-foot .btn{width:100%;justify-content:center}
  .modal-more{text-align:center}
}

/* 완료 페이지 안내 문구 */
.done-tip{font-size:14.5px !important;color:var(--ink-2) !important;margin-top:-6px !important}

/* ── 본문 시작 여백 확보 (헤더 밴드와 붙어 보이던 문제) ─────────── */
.doc{padding-block:clamp(46px,5.2vw,80px) clamp(24px,2.6vw,40px)}
.doc-body > h2:first-child,
.doc-body > *:first-child{margin-top:0}
/* 소식 상세처럼 h2 로 시작하는 본문은 위쪽에 약간 더 */
.doc-body > h2:first-child{padding-top:2px}

/* ── 자동 등록 방지 (숫자 캡차) ─────────────────────────────────── */
.cf-cap{margin-top:22px;padding:20px 22px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:10px}
.cf-cap > label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);
  margin-bottom:10px;letter-spacing:-.01em}
.cf-cap-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px}
#cap-img{display:block;border:1px solid var(--line);border-radius:6px;background:#fff;flex:0 0 auto;width:210px;height:62px}
.cap-refresh{width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line);
  border-radius:6px;background:var(--paper);cursor:pointer;position:relative;
  transition:border-color var(--d-hover) var(--e-ui),background-color var(--d-hover) var(--e-ui)}
.cap-refresh:hover{border-color:var(--accent);background:var(--accent-soft)}
.cap-refresh::before{content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;
  transform:translate(-50%,-50%);
  background:var(--ink-2);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E");
  transition:transform .5s var(--e-out)}
.cap-refresh:hover::before{background:var(--accent);transform:translate(-50%,-50%) rotate(-180deg)}
.cf-cap input{flex:1 1 180px;min-width:150px;padding:12px 14px;font-size:16px;
  font-family:var(--f-mono);letter-spacing:.18em;text-align:center;
  border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.cf-cap input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(163,37,47,.14)}
.cf-cap .cf-hint{display:block}
@media (max-width:560px){
  .cf-cap{padding:16px 16px}
  .cf-cap input{flex:1 1 100%;order:3}
}
.cf-cap input::placeholder{letter-spacing:0;font-family:var(--f-sans);font-size:14.5px}

/* ── 모바일 히어로: 글자 가독성 확보 ────────────────────────────── */
@media (max-width:900px){
  .hero__scrim{background:
    linear-gradient(180deg,
      rgba(6,14,34,.72) 0%,
      rgba(6,14,34,.46) 26%,
      rgba(6,14,34,.62) 58%,
      rgba(6,14,34,.90) 100%),
    linear-gradient(100deg, rgba(6,14,34,.55) 0%, rgba(6,14,34,.18) 62%, transparent 100%)}
  .hero__type .lead{color:rgba(255,255,255,.94)}
  .hero__type .label{color:rgba(255,255,255,.86)}
}
@media (max-width:560px){
  .hero__scrim{background:
    linear-gradient(180deg,
      rgba(6,14,34,.76) 0%,
      rgba(6,14,34,.52) 24%,
      rgba(6,14,34,.68) 56%,
      rgba(6,14,34,.92) 100%)}
}

/* ── 404 ─────────────────────────────────────────────────────────── */
.err-sec{padding-block:clamp(56px,7vw,110px) clamp(48px,6vw,92px); text-align:center}
.err-code{font-family:var(--f-disp); font-size:clamp(64px,9vw,132px); font-weight:800;
  letter-spacing:-.05em; line-height:1; margin:0 0 6px;
  color:transparent; -webkit-text-stroke:2px var(--line); background:none}
.err-h1{font-size:clamp(23px,2.6vw,34px); letter-spacing:-.025em; margin:0 0 12px}
.err-lead{font-size:16px; line-height:1.75; color:var(--ink-2); margin:0 auto clamp(30px,3.6vw,48px);
  max-width:44ch}
.err-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px; text-align:left; max-width:960px; margin:0 auto}
.err-card{display:flex; flex-direction:column; gap:7px; padding:20px 22px;
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  transition:border-color var(--d-hover) var(--e-ui), transform .35s var(--e-out),
             box-shadow .35s var(--e-out)}
.err-card:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-1)}
.err-card strong{font-size:16.5px; font-weight:700; letter-spacing:-.02em; color:var(--ink);
  transition:color var(--d-hover) var(--e-ui)}
.err-card:hover strong{color:var(--accent)}
.err-card span{font-size:14px; line-height:1.7; color:var(--ink-2)}
.err-act{margin-top:clamp(30px,3.6vw,48px)}
@media (max-width:560px){ .err-grid{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE FIX (2026-09-09) — 모바일 전용 재구성
   1) GNB 풀스크린 + 흰 글씨 + 햄버거→X   2) 히어로 텍스트 세로 중앙
   3) 신청 절차 세로 타임라인             4) 서브페이지 목차 숨김
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1) 모바일 메뉴 ─────────────────────────────────────────────── */
@media (max-width:768px){
  .gnb{
    position:fixed; inset:var(--header-h) 0 0 0; height:auto;
    background:var(--abyss); color:#fff;
    padding:6px var(--gutter) calc(30px + env(safe-area-inset-bottom));
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  .gnb.is-open{display:block; width:100%}
  .gnb > a{
    display:block; width:var(--container); margin-inline:auto;
    padding:17px 2px; font-size:18px; font-weight:700; letter-spacing:-.02em;
    color:#fff; border-bottom:1px solid rgba(255,255,255,.11);
  }
  .gnb > a:hover{color:#F0A8AE}
  .gnb > a[aria-current="page"]{color:#F0A8AE}
  .gnb > a[aria-current="page"]::before{
    content:""; display:inline-block; width:6px; height:6px; margin-right:9px;
    border-radius:50%; background:#F0A8AE; vertical-align:2px;
  }
  /* 언어 선택 — 어두운 패널에 맞춤 */
  .gnb .lang{width:var(--container); margin:22px auto 0}
  .gnb .lang-btn{
    width:100%; justify-content:center; padding:14px 12px;
    background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.20); color:#fff;
  }
  .gnb .lang-btn:hover,.gnb .lang.is-open .lang-btn{border-color:#F0A8AE; color:#F0A8AE}
  .gnb .lang-menu{left:0; right:0; width:auto}

  /* 햄버거 → X */
  .nav-toggle{position:relative; z-index:60}
  .nav-toggle i,
  .nav-toggle i::before,
  .nav-toggle i::after{transition:transform .28s var(--e-out), top .28s var(--e-out), background-color .18s linear}
  .nav-toggle[aria-expanded="true"] i{background-color:transparent}
  .nav-toggle[aria-expanded="true"] i::before{top:0; transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] i::after{top:0; transform:rotate(-45deg)}
}

/* ── 2) 히어로: 모바일에서 텍스트 세로 중앙 ────────────────────── */
@media (max-width:768px){
  .hero__type{
    top:50%; bottom:auto;
    transform:translateY(-50%); -webkit-transform:translateY(-50%);
  }
  .hero__ctrl{bottom:calc(96px + env(safe-area-inset-bottom))}
  .hero__rail{bottom:calc(22px + env(safe-area-inset-bottom))}
}

/* ── 3) 신청 절차: 모바일 세로 타임라인 ────────────────────────── */
@media (max-width:640px){
  .stepper{display:block; position:relative}
  .stepper::before{display:none}
  .stepper li{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    grid-template-areas:"node title" ".   desc";
    column-gap:14px; row-gap:7px;
    text-align:left; position:relative;
    padding:0 0 24px;
  }
  .stepper li:last-child{padding-bottom:0}
  .stepper li:not(:last-child)::after{
    content:""; position:absolute; left:19px; top:46px; bottom:8px; width:1.5px;
    background:linear-gradient(180deg,var(--accent),rgba(163,37,47,.16));
  }
  .stepper .node{grid-area:node; width:40px; height:40px; margin:0}
  .stepper .node b{font-size:12.5px}
  .stepper h3{grid-area:title; align-self:center; margin:0; font-size:17px; line-height:1.35}
  .stepper p{grid-area:desc; margin:0; font-size:14.5px; line-height:1.72; max-width:none}
}

/* ── 4) 서브페이지: 모바일에서 목차 숨김 ───────────────────────── */
@media (max-width:768px){
  .doc-toc{display:none}
  .doc{grid-template-columns:1fr; gap:0}
}

/* 홈 FAQ: 답변 첫 글자를 질문 첫 글자와 같은 세로선에 맞춘다
   (기존 .qa .a p 의 width:var(--container)+margin-inline:auto 가 62px 밀어내던 것을 해제) */
.faq .qa .a p{width:auto; max-width:none; margin-inline:0; padding:0 0 22px 56px}
@media (max-width:768px){ .faq .qa .a p{padding-left:48px} }

/* 문의 폼: .doc-body p{margin:0 0 17px} (0,1,1) 가 .cf-submit (0,1,0) 를 이겨
   제출 버튼 위 여백이 0 이 되던 문제. 셸 안에서도 이기도록 특정성을 올린다. */
.doc-body .cf-submit{margin:34px 0 0; text-align:center}
.doc-body .cf-hp{margin:0}

/* ── 셸 규칙(.doc-body p / .done-box p)이 컴포넌트 마진을 특정성으로 이겨
      죽어 있던 3건 복원. .cf-submit 과 동일 원인 (2026-09-09 감사) ───────── */

/* 소식 상세 '← 소식 목록으로': margin-top:22px 이 죽고 의도에 없던 아래 17px 이 붙던 것 */
.doc-body .nw-back{margin:22px 0 0}

/* 문의 폼 입력행 15개: margin:0 이 죽고 17px 이 붙어 행간이 16px→33px 로 벌어지던 것 */
.doc-body .cf-row{margin:0}

/* 접수완료 접수번호 줄: 아래 16px 이 죽어 .done-tip 과 -6px 로 겹치던 것.
   .done-box p{margin:0 auto} 의 가로 auto(중앙정렬)는 반드시 유지해야 하므로 auto 를 그대로 둔다. */
.done-box .done-no{margin:0 auto 16px}

/* factbar: 1024px(3열)용 `li:nth-child(4){border-left:0; padding-left:0}` 규칙이
   768px 이하(2열)까지 그대로 상속되어, 오른쪽 열인 4번만 구분선·왼여백이 사라져
   혼자 왼쪽에 붙던 문제. 2열에서는 짝수번째가 오른쪽 열이므로 복원한다. */
@media (max-width:768px){
  .factbar li:nth-child(even){border-left:1px solid var(--line); padding-left:14px}
}

/* 어두운 CTA 밴드에서 주 버튼(신청·조회)을 채운 형태로 구분 */
.ec-act .btn-fill{background:#fff; border-color:#fff}
.ec-act .btn-fill span{color:var(--ink)}
.ec-act .btn-fill .arw,.ec-act .btn-fill .arw::after{background-color:var(--ink); border-color:var(--ink)}

/* ── 본문 안 액션 버튼 (신청 · 조회) ─────────────────────────────
   .doc-body p 규칙에 먹히지 않도록 .doc-body 스코프로 특정성을 맞춘다. */
.doc-body .act-inline{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px}
.doc-body .act-inline .act-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:6px;
  background:var(--accent); border:1px solid var(--accent); color:#fff;
  font-size:15.5px; font-weight:700; letter-spacing:-.02em; text-decoration:none;
  transition:background-color .18s var(--e-out), border-color .18s var(--e-out), color .18s var(--e-out);
}
.doc-body .act-inline .act-btn::after{content:"→"; font-weight:600}
.doc-body .act-inline .act-btn:hover{background:var(--accent-deep); border-color:var(--accent-deep); color:#fff}
.doc-body .act-inline .act-ghost{background:#fff; color:var(--accent)}
.doc-body .act-inline .act-ghost:hover{background:var(--accent-soft); color:var(--accent-deep); border-color:var(--accent-deep)}
@media (max-width:560px){
  .doc-body .act-inline{flex-direction:column; align-items:stretch}
  .doc-body .act-inline .act-btn{justify-content:center}
}

/* ══════════════════════════════════════════════════════════════════════
   RTL (아랍어 · 히브리어) — [dir="rtl"] 일 때만 적용
   대부분은 브라우저가 dir 로 처리하지만, left/right 를 직접 쓴 곳은 뒤집어야 한다.
   ══════════════════════════════════════════════════════════════════════ */
[dir="rtl"]{
  --f-sans:'Noto Sans Arabic','Noto Sans Hebrew',system-ui,-apple-system,sans-serif;
  --f-disp:'Noto Sans Arabic','Noto Sans Hebrew',var(--f-sans);
  --f-mono:'Noto Sans Arabic','Noto Sans Hebrew',var(--f-sans);
}
[dir="rtl"] body{font-family:var(--f-sans)}

/* 방향이 뒤집히면 화살표도 뒤집는다 */
[dir="rtl"] .arw{transform:scaleX(-1)}
[dir="rtl"] .act-inline .act-btn::after{content:"←"}
[dir="rtl"] .nc-go,[dir="rtl"] .vs-go,[dir="rtl"] .ni-go{transform:scaleX(-1)}

/* 서브페이지: 목차가 오른쪽으로 */
[dir="rtl"] .doc{direction:rtl}
[dir="rtl"] .doc-toc ol{border-left:0; border-right:1px solid var(--line)}
[dir="rtl"] .doc-toc a{padding:7px 14px 7px 0; margin-left:0; margin-right:-1px;
  border-left:0; border-right:2px solid transparent}
[dir="rtl"] .doc-toc a.is-on{border-right-color:var(--accent)}
[dir="rtl"] .doc-toc a.lv3{padding-left:0; padding-right:26px}
[dir="rtl"] .doc-body li{padding-left:0; padding-right:20px}
[dir="rtl"] .doc-body ul > li::before{left:auto; right:2px}
[dir="rtl"] .doc-body ol{padding-left:0; padding-right:4px}
[dir="rtl"] .doc-body .note{border-left:0; border-right:3px solid var(--accent)}
[dir="rtl"] .doc-body th,[dir="rtl"] .doc-body td{text-align:right}

/* 홈 */
[dir="rtl"] .factbar li{border-left:0; border-right:1px solid var(--line)}
[dir="rtl"] .factbar li:first-child{border-right:0; padding-right:0}
[dir="rtl"] .numbers .cell{border-left:0; border-right:1px solid var(--line-c)}
[dir="rtl"] .numbers .cell:first-child{border-right:0; padding-right:0}
[dir="rtl"] .hero__type{text-align:right}
[dir="rtl"] .hero__type .label{padding-left:0; padding-right:34px}
[dir="rtl"] .hero__type .label::before{left:auto; right:0}
[dir="rtl"] .stepper::before{background:linear-gradient(270deg,var(--accent),rgba(163,37,47,.18))}
[dir="rtl"] .qa summary .q,[dir="rtl"] .qa .a p{text-align:right}
[dir="rtl"] .faq .qa .a p{padding-left:0; padding-right:56px}
[dir="rtl"] .faq .qa summary{padding:18px 16px 18px 0}

/* 폼 · 푸터 */
[dir="rtl"] .cf-row{text-align:right}
[dir="rtl"] .colophon .map,[dir="rtl"] .colophon .foot-nav{text-align:right}

@media (max-width:768px){
  [dir="rtl"] .gnb > a{text-align:right}
  [dir="rtl"] .gnb > a[aria-current="page"]::before{margin-right:0; margin-left:9px}
  [dir="rtl"] .faq .qa .a p{padding-right:48px; padding-left:0}
}
@media (max-width:640px){
  [dir="rtl"] .stepper li{grid-template-columns:minmax(0,1fr) 40px;
    grid-template-areas:"title node" "desc ."}
  [dir="rtl"] .stepper li:not(:last-child)::after{left:auto; right:19px}
  [dir="rtl"] .stepper h3,[dir="rtl"] .stepper p{text-align:right}
}

/* RTL 보정 — 오른쪽 기준으로 여는 드롭다운 */
[dir="rtl"] .lang-menu{right:auto; left:0}
[dir="rtl"] .lang{margin-left:0; margin-right:10px}

/* ── 헤더 컴팩트 모드 ─────────────────────────────────────────
   메뉴가 헤더 폭을 넘는 언어(스페인어·프랑스어·아랍어 등)에서는
   데스크톱이어도 햄버거 메뉴를 쓴다. 판정은 site.js 가 실측으로 한다. */
html.nav-compact .nav-toggle{display:flex}
html.nav-compact .gnb{
  position:fixed; inset:var(--header-h) 0 0 0; height:auto; z-index:40;
  flex-direction:column; align-items:stretch; gap:0;
  background:var(--abyss); color:#fff;
  padding:6px var(--gutter) calc(30px + env(safe-area-inset-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  display:none; mix-blend-mode:normal;
}
html.nav-compact .gnb.is-open{display:block; width:100%}
html.nav-compact .gnb > a{
  display:block; width:var(--container); margin-inline:auto;
  padding:17px 2px; font-size:18px; font-weight:700; letter-spacing:-.02em;
  color:#fff; border-bottom:1px solid rgba(255,255,255,.11);
}
html.nav-compact .gnb > a::after{display:none}
html.nav-compact .gnb > a:hover,
html.nav-compact .gnb > a[aria-current="page"]{color:#F0A8AE}
html.nav-compact .gnb > a[aria-current="page"]::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:9px;
  border-radius:50%; background:#F0A8AE; vertical-align:2px;
}
[dir="rtl"] html.nav-compact .gnb > a[aria-current="page"]::before,
html.nav-compact [dir="rtl"] .gnb > a[aria-current="page"]::before{margin-right:0; margin-left:9px}
html.nav-compact .gnb .lang{width:var(--container); margin:22px auto 0}
html.nav-compact .gnb .lang-btn{
  width:100%; justify-content:center; padding:14px 12px;
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.20); color:#fff;
}
/* 언어 목록은 모바일 메뉴와 동일하게 '접힌 드롭다운' 으로 둔다.
   static 으로 펼치면 어두운 패널 위에 밝은 배경 목록이 그대로 노출돼 읽기 어렵다. */
html.nav-compact .gnb .lang-menu{left:0; right:0; width:auto}
html.nav-compact .nav-toggle{position:relative; z-index:60}
html.nav-compact .nav-toggle[aria-expanded="true"] i{background-color:transparent}
html.nav-compact .nav-toggle[aria-expanded="true"] i::before{top:0; transform:rotate(45deg)}
html.nav-compact .nav-toggle[aria-expanded="true"] i::after{top:0; transform:rotate(-45deg)}

/* 캐나다: 원고가 요구한 필수 고지 — 정부기관 아님 + 공식 출처 안내 */
.colophon .gov-note{
  margin:0 0 14px; max-width:88ch;
  font-size:13px; line-height:1.75; color:rgba(255,255,255,.58);
}
.colophon .gov-note a{color:rgba(255,255,255,.78); text-decoration:underline; text-underline-offset:3px}
.colophon .gov-note a:hover{color:#fff}

/* ══════════════════════════════════════════════════════════════════════
   캐나다판 디자인 차별화 — 영국판과 같은 뼈대를 쓰되 인상을 다르게 한다
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --rule-bold:2px;                    /* 영국 3px → 얇게 */
}
/* 모서리: 영국은 각진 편(0/6/10) → 캐나다는 한 단계 부드럽게 */
.btn, .act-inline .act-btn, .cf-row input, .cf-row select, .cf-row textarea,
.chip, .lang-btn, .next-card, .err-card, .note, .done-box{border-radius:10px}
.vs-card, .tile, .panel, .table-wrap{border-radius:14px; overflow:hidden}
.factbar li{border-radius:0}

/* 섹션 라벨: 영국은 "02 — 핵심 수치" 형태의 가로줄. 캐나다는 앞에 막대를 세운다 */
.sec-head .label, .numbers .label, .etacheck .label{
  position:relative; padding-left:16px;
}
.sec-head .label::before, .numbers .label::before, .etacheck .label::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:14px; border-radius:2px; background:var(--accent);
}
/* 히어로: 영국은 좌측 고정. 캐나다는 살짝 안쪽으로 들이고 리드 폭을 좁힌다 */
.hero__type .lead{max-width:46ch}
.hero__type .display{letter-spacing:-.035em}

/* 요약 띠: 영국은 평평한 회색. 캐나다는 윗선을 accent 로 */
.factbar{border-top:2px solid var(--accent)}

/* 카드 호버: 영국은 위로 뜸 → 캐나다는 테두리 강조로 차분하게 */
.next-card:hover, .err-card:hover{transform:none; border-color:var(--accent); box-shadow:none}
.tile{border-radius:14px}

/* ══════════════════════════════════════════════════════════════════════
   캐나다판 히어로 — 좌: 안내 / 우: 사진 (영국판 풀블리드 슬라이더와 다른 구조)
   ══════════════════════════════════════════════════════════════════════ */
.ca-hero{background:var(--paper); padding:clamp(28px,4vw,64px) 0 clamp(20px,2.6vw,40px)}
.ca-hero__grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,56px); align-items:center;
}
.ca-hero__copy{min-width:0}
.ca-eyebrow{
  display:inline-block; font-family:var(--f-mono); font-size:12px; letter-spacing:.10em;
  color:var(--accent); padding-left:16px; position:relative; margin-bottom:14px;
}
.ca-eyebrow::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:14px; border-radius:2px; background:var(--accent);
}
.ca-hero__title{
  font-family:var(--f-disp); font-weight:800; letter-spacing:-.035em;
  font-size:clamp(30px,4.1vw,58px); line-height:1.13; color:var(--ink); margin:0 0 16px;
}
.ca-hero__title span{display:block}
.ca-hero__lead{font-size:clamp(15px,1.2vw,17px); line-height:1.8; color:var(--ink-2); max-width:48ch; margin:0 0 22px}

/* 입국 수단 3분기 — 캐나다 원고의 핵심 논지 */
.ca-route{display:grid; gap:0; border-top:1px solid var(--line); margin:0 0 26px; padding:0; list-style:none}
.ca-route li{
  display:flex; align-items:baseline; gap:14px;
  padding:13px 2px; border-bottom:1px solid var(--line);
}
.ca-route b{
  flex:0 0 104px; font-size:14.5px; font-weight:700; color:var(--ink);
  position:relative; padding-left:14px;
}
.ca-route b::before{
  content:""; position:absolute; left:0; top:.52em; width:6px; height:6px;
  border-radius:50%; background:var(--accent);
}
.ca-route span{font-size:14.5px; color:var(--ink-2); line-height:1.6}
.ca-hero__act{margin:0}

/* 우측 사진 — 세로로 긴 카드, 점 인디케이터 */
.ca-hero__media{position:relative; border-radius:18px; overflow:hidden;
  aspect-ratio:4/3.15; background:var(--paper-3); box-shadow:0 18px 48px rgba(0,0,0,.12)}
.ca-shot{
  position:absolute; inset:0; margin:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity .9s var(--e-out); transform:scale(1.02);
}
.ca-shot.is-on{opacity:1}
.ca-dots{position:absolute; left:18px; bottom:16px; display:flex; gap:8px; z-index:2}
.ca-dots button{
  width:26px; height:4px; border:0; border-radius:99px; cursor:pointer; padding:0;
  background:rgba(255,255,255,.45); transition:background-color .25s, width .25s;
}
.ca-dots button.is-on{background:#fff; width:40px}

@media (max-width:900px){
  .ca-hero__grid{grid-template-columns:1fr; gap:24px}
  .ca-hero__media{aspect-ratio:16/10; order:-1}
  .ca-route b{flex-basis:92px}
}
@media (max-width:560px){
  .ca-hero{padding-top:18px}
  .ca-route li{flex-direction:column; gap:3px}
  .ca-route b{flex:none}
}

/* ── 캐나다 비교표 (영국판 2단 VS 카드와 다른 형태) ───────────── */
.ca-cmp__wrap{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper)}
.ca-cmp__tbl{width:100%; border-collapse:collapse; font-size:15.5px}
.ca-cmp__tbl th,.ca-cmp__tbl td{padding:15px 18px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); line-height:1.62}
.ca-cmp__tbl thead th{background:var(--paper-2); font-weight:700; color:var(--ink);
  font-size:14.5px; letter-spacing:-.01em; white-space:nowrap}
.ca-cmp__tbl thead th.is-lead{background:var(--accent-soft); color:var(--accent-deep)}
.ca-cmp__tbl tbody th{width:22%; font-weight:700; color:var(--ink); background:var(--paper-2)}
.ca-cmp__tbl td.is-lead{background:color-mix(in srgb, var(--accent-soft) 55%, #fff)}
.ca-cmp__tbl tbody tr:last-child th,.ca-cmp__tbl tbody tr:last-child td{border-bottom:0}
.ca-cmp__go{display:flex; flex-wrap:wrap; gap:10px 26px; margin:18px 0 0}
.ca-cmp__go a{font-size:15px; font-weight:700; color:var(--accent); text-decoration:none}
.ca-cmp__go a:hover{color:var(--accent-deep); text-decoration:underline; text-underline-offset:4px}
@media (max-width:720px){
  .ca-cmp__wrap{overflow-x:auto}
  .ca-cmp__tbl{min-width:560px}
}

/* ══════════════════════════════════════════════════════════════════════
   캐나다판 섹션 재구성 — 영국판과 형태를 다르게
   ══════════════════════════════════════════════════════════════════════ */

/* 수치: 영국은 4칸 지그재그(위/아래 엇갈림) → 캐나다는 균등 카드 4개 */
.numbers .grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important; align-items:stretch !important;
}
.numbers .cell{
  align-self:stretch !important; border-left:0 !important;
  padding:24px 22px 26px !important;
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
}
.numbers .cell:first-child{padding-left:22px !important}
.numbers .cell b{font-size:clamp(28px,3.1vw,44px)}
.numbers .nm{margin-top:12px}
@media (max-width:900px){ .numbers .grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important} }
@media (max-width:520px){ .numbers .grid{grid-template-columns:1fr !important} }

/* 방문 목적: 영국은 4개 가로 타일 → 캐나다는 2×2 넓은 카드 */
.purpose .tiles{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px !important}
.purpose .tile{border-radius:16px; aspect-ratio:16/9}
@media (max-width:640px){ .purpose .tiles{grid-template-columns:1fr !important} }

/* 신청 절차: 영국은 가로 스테퍼(원+연결선) → 캐나다는 번호 카드 세로 2열 */
.proc-step .stepper{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important;
}
.proc-step .stepper::before{display:none !important}
.proc-step .stepper li{
  text-align:left !important;
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr);
  /* 영역을 지정하지 않으면 <p> 가 다음 줄 첫 칸(44px)으로 떨어져 글자가 세로로 흐른다 */
  grid-template-areas:"node title" ".   desc";
  column-gap:16px; row-gap:8px;
  align-items:start; padding:20px 20px 22px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
}
.proc-step .stepper .node{grid-area:node}
.proc-step .stepper h3{grid-area:title; align-self:center}
.proc-step .stepper p{grid-area:desc}
.proc-step .stepper .node{
  margin:0 !important; width:40px !important; height:40px !important;
  border-radius:11px !important; background:var(--accent) !important; box-shadow:none !important;
}
.proc-step .stepper .node b{color:#fff !important}
.proc-step .stepper li:hover .node{transform:none !important}
.proc-step .stepper h3{margin:0 0 6px; font-size:16.5px}
.proc-step .stepper p{font-size:14.5px; line-height:1.72}
.proc-step .stepper li:nth-child(5){grid-column:1 / -1}
@media (max-width:640px){
  .proc-step .stepper{grid-template-columns:1fr !important}
  .proc-step .stepper li:nth-child(5){grid-column:auto}
}

/* 상태 조회: 영국은 좌 텍스트 + 우 여권 일러스트 → 캐나다는 가로 밴드 */
.etacheck .ec{grid-template-columns:1fr !important; padding:clamp(28px,3.4vw,48px) !important}
.etacheck .ec-side{display:none !important}
.etacheck .ec-body{max-width:none}
.etacheck .h2{max-width:22ch}
.etacheck .ec-act{margin-top:22px}

/* FAQ: 영국은 칩 필터 + 1열 아코디언 → 캐나다는 칩 없이 2열 */
.faq .fq-chips{display:none !important}
.faq .qa{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px;
  border-top:0 !important}
.faq .qa details{border-bottom:1px solid var(--line)}
.faq .qa summary .q{font-size:clamp(15.5px,1.3vw,17.5px)}
.faq .qa .a p{padding-left:56px}
.faq .sec-head{text-align:left !important}
.faq .sec-head .h2{margin-inline:0 !important}
@media (max-width:820px){ .faq .qa{grid-template-columns:1fr} }

/* ── 히어로 ~ 요약 띠 ~ 본문 밝기 흐름 ─────────────────────────
   흰 → 회색띠 → 흰 이면 띠만 떠 보인다.
   연한 바탕(히어로) → 진한 띠 → 흰 본문 으로 위에서 아래로 대비를 준다. */
.ca-hero{
  background:linear-gradient(180deg, #FBFAF9 0%, var(--paper-2) 100%);
  border-bottom:0;
}
.factbar{
  background:var(--ink) !important; color:var(--cream) !important;
  border-top:0 !important;
}
.factbar li{border-left:1px solid rgba(255,255,255,.13) !important}
.factbar li:first-child{border-left:0 !important}
.factbar span{color:rgba(255,255,255,.88) !important}
.factbar b{color:#fff !important}
/* 띠 다음 섹션은 흰 바탕으로 받아 대비를 마무리한다 */
.purpose{background:var(--paper)}
@media (max-width:768px){
  .factbar li:nth-child(even){border-left:1px solid rgba(255,255,255,.13) !important}
}

/* 요약 띠: 검정 대신 브랜드 버건디로 (발주처 지정 #A3252F) */
.factbar{background:#A3252F !important}
.factbar li{border-left-color:rgba(255,255,255,.22) !important}
.factbar span{color:rgba(255,255,255,.88) !important} /* .72→.88: #A3252F 위 4.49:1(미달)→5.9:1 */
.factbar b{color:#fff !important}
@media (max-width:768px){ .factbar li:nth-child(even){border-left-color:rgba(255,255,255,.22) !important} }

/* ══════════════════════════════════════════════════════════════════════
   캐나다판 서브페이지 헤드 — 영국판(어두운 남색 + 사진)과 반대로
   밝은 바탕 + 좌측 굵은 accent 바. 사진을 쓰지 않아 로딩도 가볍다.
   ══════════════════════════════════════════════════════════════════════ */
.page-head{
  background:linear-gradient(180deg,#FBFAF9 0%, var(--paper-2) 100%) !important;
  border-bottom:1px solid var(--line) !important;
  border-top:3px solid var(--accent);
}
.page-head::before{display:none !important}      /* 배경 사진 레이어 제거 */
.page-head::after{display:none !important}       /* 어두운 그라디언트 제거 */
.page-head > .bleed{
  position:relative; padding-left:clamp(16px,1.6vw,26px);
}
.page-head > .bleed::before{
  content:""; position:absolute; left:0; top:4px; bottom:6px; width:4px;
  border-radius:2px; background:var(--accent);
}
.page-head .crumb ol,.page-head .crumb a{color:var(--ink-3) !important}
.page-head .crumb a:hover{color:var(--accent) !important}
.page-head .label,.page-head .pg-idx{color:var(--accent) !important}
.page-h1{color:var(--ink)}
.page-lead{color:var(--ink-2) !important}
.page-meta{color:var(--ink-3)}
@media (max-width:900px){
  .page-head > .bleed{padding-left:14px}
}

/* ── 서브페이지 헤드: 회색 대신 브랜드 톤 + 은은한 도형 ───────── */
.page-head{
  background:linear-gradient(168deg,#FFFFFF 0%, #FDF7F7 42%, var(--accent-soft) 100%) !important;
  position:relative; overflow:hidden;
}
/* 우측 상단에 아주 옅은 산 실루엣 — 로고 모티프와 같은 계열 */
.page-head::before{
  display:block !important; content:""; position:absolute; z-index:0;
  /* 이전 규칙의 inset:0 을 풀지 않으면 left:0 이 남아 왼쪽에 그려진다 */
  inset:auto -3% -28% auto;
  width:min(34%,420px); aspect-ratio:16/9;
  background:
    linear-gradient(135deg, transparent 46%, rgba(163,37,47,.038) 46.5%),
    radial-gradient(120% 90% at 70% 100%, rgba(163,37,47,.032) 0%, transparent 62%);
  clip-path:polygon(0 100%, 26% 34%, 44% 62%, 62% 22%, 100% 100%);
  opacity:1; filter:none; transform:none;
}
.page-head > .bleed{position:relative; z-index:2}
@media (max-width:900px){
  .page-head::before{width:56%; inset:auto -10% -32% auto}
}

/* ══════════════════════════════════════════════════════════════════════
   서브페이지 헤드 — 도시 사진 + 버건디 오버레이
   (영국판은 남색 계열. 같은 '사진 헤드'라도 색으로 갈린다)
   ══════════════════════════════════════════════════════════════════════ */
.page-head{
  background:var(--ink) !important;
  border-top:0 !important;
  position:relative; overflow:hidden; isolation:isolate;
}
/* 사진 */
.page-head::before{
  display:block !important; content:""; position:absolute !important;
  inset:0 !important; width:auto !important; aspect-ratio:auto !important;
  background-image:var(--head-bg); background-size:cover; background-position:center 62%;
  clip-path:none !important; opacity:.9;
  filter:saturate(.92) contrast(1.04);
  transform:none !important;
}
/* 버건디 오버레이 — 좌측이 진하고 우측으로 열린다 */
.page-head::after{
  display:block !important; content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(58,10,14,.95) 0%, rgba(96,18,24,.88) 30%,
                    rgba(128,26,33,.62) 58%, rgba(163,37,47,.38) 100%),
    linear-gradient(180deg, rgba(30,6,9,.42) 0%, rgba(30,6,9,.10) 46%, rgba(30,6,9,.52) 100%);
}
.page-head > .bleed{position:relative; z-index:2; padding-left:clamp(16px,1.6vw,26px)}
.page-head > .bleed::before{background:#fff}          /* 좌측 세로바는 흰색으로 */
.page-head .crumb ol,.page-head .crumb a{color:rgba(255,255,255,.68) !important}
.page-head .crumb a:hover{color:#fff !important}
.page-head .crumb li::after{color:rgba(255,255,255,.4)}
.page-head .label,.page-head .pg-idx{color:rgba(255,255,255,.82) !important}
.page-head .pg-on{color:#fff !important}
.page-h1{color:#fff !important}
.page-lead{color:rgba(255,255,255,.86) !important}
.page-meta{color:rgba(255,255,255,.62) !important}
@media (max-width:900px){
  .page-head::after{background:
    linear-gradient(180deg, rgba(58,10,14,.93) 0%, rgba(96,18,24,.86) 55%, rgba(58,10,14,.94) 100%)}
  .page-head::before{background-position:center 58%}
}

/* ══════════════════════════════════════════════════════════════════════
   캐나다판 푸터 — 좌 브랜드·고지 / 우 메뉴 2열
   (영국판은 CTA → 가로 메뉴 → 고지 세로 나열. 구조부터 다르다)
   ══════════════════════════════════════════════════════════════════════ */
.colophon{background:var(--ink); color:rgba(255,255,255,.9); padding:0 0 clamp(20px,2.4vw,32px)}

/* 상단 문의 유도 */
.colophon .cf-cta{
  padding:clamp(30px,3.4vw,48px) 0 clamp(26px,3vw,38px);
  border-bottom:1px solid rgba(255,255,255,.13);
}
.colophon .cf-cta .label{
  display:block; font-family:var(--f-mono); font-size:12px; letter-spacing:.1em;
  color:rgba(255,255,255,.62); margin-bottom:10px;
}
.colophon .cf-cta p{margin:0}
.colophon .cf-cta a{
  font-family:var(--f-disp); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(19px,2.1vw,30px); color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; gap:12px;
}
.colophon .cf-cta a i{
  font-style:normal; display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:50%; background:var(--accent);
  font-size:16px; transition:transform .22s var(--e-out);
}
.colophon .cf-cta a:hover i{transform:translateX(5px)}

/* 본문 2단 */
.colophon .cf-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,3vw,56px); padding:clamp(26px,3vw,40px) 0;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.colophon .cf-brand img{display:block; margin-bottom:12px; border-radius:10px}
.colophon .cf-brand b{
  display:block; font-family:var(--f-disp); font-size:16.5px; font-weight:700;
  letter-spacing:-.02em; color:#fff;
}
.colophon .cf-brand small{
  display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  color:rgba(255,255,255,.62); margin-top:3px; /* .42→.62: #1D1D1D 위 4.0:1→7.2:1 */
}
/* 고지문 — 읽히도록 키우고 대비를 올린다 (13px/58% 는 뭉개져 안 읽혔다) */
.colophon .gov-note{
  margin:16px 0 0; max-width:56ch;
  font-size:13.5px; line-height:1.85; color:rgba(255,255,255,.72);
}
.colophon .gov-note a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.colophon .gov-note a:hover{color:var(--accent-soft)}

/* 메뉴 2열 */
.colophon .cf-nav{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 24px; align-content:start;
}
.colophon .cf-nav a{
  display:block; padding:7px 0; font-size:14.5px; font-weight:600;
  color:rgba(255,255,255,.78); text-decoration:none;
}
.colophon .cf-nav a:hover{color:#fff}

/* 하단 */
.colophon .cf-base{
  display:flex; flex-wrap:wrap; gap:8px 22px; padding-top:clamp(16px,1.8vw,22px);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.03em;
  color:rgba(255,255,255,.5);
}
@media (max-width:820px){
  .colophon .cf-grid{grid-template-columns:1fr; gap:26px}
  .colophon .cf-nav{gap:0 20px}
}
@media (max-width:480px){
  .colophon .cf-nav{grid-template-columns:1fr}
}

/* 허니팟 자식도 1px 로 묶는다 — RTL 에서 라벨이 부모 밖(-184px)으로 나가 넘침 탐지에 걸린다 */
.cf-hp label,.cf-hp input{display:block; width:1px; min-width:0; padding:0; border:0; overflow:hidden}

/* ── 헤더 중간 단계(nav-tight) ────────────────────────────────────────
   메뉴 라벨 길이가 언어마다 2배까지 차이 난다(ko 987px · es 1545px).
   바로 햄버거로 접으면 8개 언어 중 6개가 데스크톱에서도 접힌 메뉴가 된다.
   그래서 "축소해서 한 줄에 넣기"를 먼저 시도하고, 그래도 안 되면 접는다.
   단계 판정은 site.js 가 실제 폭을 재서 한다(언어 하드코딩 없음). */
html.nav-tight .brand{gap:6px; font-size:16px; flex:0 0 auto}
html.nav-tight .brand small{display:none}
html.nav-tight .brand-mark{width:30px; height:30px}
html.nav-tight .gnb{gap:0}
html.nav-tight .gnb a{font-size:13px; padding:7px 8px; letter-spacing:-.03em}
html.nav-tight .gnb a::after{left:8px; right:8px}
/* 2단계: 그래도 안 들어가면 더 조인다 (그다음이 햄버거) */
html.nav-tighter .gnb a{font-size:12.5px; padding:7px 3px; letter-spacing:-.04em}
html.nav-tighter .gnb a::after{left:3px; right:3px}
html.nav-tight .gnb .lang-btn{padding:6px 6px; font-size:12px}
/* 브랜드는 어떤 경우에도 줄바꿈하지 않는다 — 줄바꿈되면 헤더 높이가 깨진다 */
.brand b{white-space:nowrap}

/* 일본어 줄바꿈 — *{word-break:keep-all} 은 한국어 단어를 안 쪼개려고 넣은 것인데,
   일본어에서는 문장 전체가 한 덩어리가 되어 좁은 화면에서 가로로 삐져나간다
   (390px 홈에서 문서 스크롤폭 529px). 일본어에서만 기본 금칙처리로 되돌린다. */
html[lang="ja"] *{word-break:normal}