/* ══════════════════════════════════════════════════════════════
   지하섬 웹 리뉴얼 초안 — 2026-08-24
   축: 스크롤 = 하루의 흐름 (아침 → 밤). --dusk 0→1 이 전 색을 보간한다.
   팔레트 원본: SubwayKit/DesignTokens.swift + 승강장 플레이트 실측 샘플
   ══════════════════════════════════════════════════════════════ */
:root{
  --dusk:0;   /* 승강장 플레이트 크로스페이드용 — 연속 */
  --t:0;      /* 현재 국면(낮/밤) 안에서의 진행 0..1 */

  /* 앱 디자인 토큰 */
  --amber:#FFB300; --green:#39C46D; --red:#FF5A47; --tactile:#F8BA2A;

  /* 낮 국면 — 밝은 채로만 움직인다 */
  --sky :color-mix(in srgb,#EFEADC calc(var(--t)*100%),#FEFCF5);
  --ink :color-mix(in srgb,#2A2823 calc(var(--t)*100%),#1B1A17);
  --soft:color-mix(in srgb,#6C6759 calc(var(--t)*100%),#757066);
  --line:color-mix(in srgb,#DDD7C7 calc(var(--t)*100%),#E7E2D7);
  --card:color-mix(in srgb,#FBF8F0 calc(var(--t)*100%),#FFFFFF);

  --col:560px;
}
/* 밤 국면 — 이미 어두운 값에서 시작한다.
   낮↔밤을 한 축으로 선형 보간하면 중간에서 글자와 배경이 함께 회색으로 수렴해
   대비가 1.05:1까지 무너진다(8/24 실측). 그래서 중간 지대를 건너뛰고
   경계에서 한 번에 넘긴다 — 승강장 조명이 바뀌는 연출로 읽힌다. */
:root[data-phase="night"]{
  --sky :color-mix(in srgb,#050D22 calc(var(--t)*100%),#171B2E);
  --ink :color-mix(in srgb,#F3EEE4 calc(var(--t)*100%),#EDE7DC);
  --soft:color-mix(in srgb,#ABA4B6 calc(var(--t)*100%),#968FA3);
  --line:color-mix(in srgb,#26283F calc(var(--t)*100%),#2E3049);
  --card:color-mix(in srgb,#151628 calc(var(--t)*100%),#1B1D33);
}
*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;height:auto}
a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  background:var(--sky); color:var(--ink); line-height:1.62;
  font-feature-settings:"tnum"; word-break:keep-all;
  transition:background-color .35s ease,color .35s ease;
}
/* 픽셀폰트는 장식·고정 레이블에만. 동적 숫자는 절대 금지 (CLAUDE.md 불변식) */
@font-face{
  font-family:"Galmuri11"; src:url("/img/galmuri11-subset.woff2") format("woff2");
  font-display:swap; font-weight:400;
}
.pixel{font-family:"Galmuri11",-apple-system,sans-serif;letter-spacing:.02em}
.tnum{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}

.wrap{max-width:var(--col);margin:0 auto;padding:0 20px}
.wrap.flush{padding:0}

/* ── 헤더 ───────────────────────────────────────────── */
header{position:relative;z-index:5}
.hd{display:flex;align-items:center;gap:8px;padding:18px 0 6px}
.hd .mark{width:26px;height:26px;border-radius:6px;flex:none}
.hd .name{font-size:17px;font-weight:700;letter-spacing:.01em}
.hd .name b{color:var(--green)}
.hd .go{margin-left:auto;font-size:13px;font-weight:600;text-decoration:none;
  color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:7px 13px}

/* ── 히어로 ─────────────────────────────────────────── */
.hero{padding:34px 0 30px}
h1{font-size:clamp(31px,7.6vw,42px);font-weight:800;letter-spacing:-.032em;line-height:1.24}
h1 em{font-style:normal;color:var(--green)}
.sub{margin-top:16px;color:var(--soft);font-size:16px;line-height:1.66}
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--sky);
  text-decoration:none;font-weight:700;border-radius:999px;padding:15px 25px;font-size:16.5px;
  margin-top:24px;transition:background-color .18s linear,color .18s linear}
.cta:hover{opacity:.9}
.note{margin-top:11px;color:var(--soft);font-size:13.5px}

/* ── 승강장 무대 ─────────────────────────────────────── */
.stage{position:relative;width:100%;aspect-ratio:1024/1536;container-type:inline-size;overflow:hidden}
.stage>img.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stage>img.night{opacity:var(--dusk)}
/* 전광판 — 플레이트 위 실측 좌표 (1024×1536 기준 백분율) */
.board{position:absolute;left:31.0%;top:34.2%;width:37.8%;height:7.9%;
  display:flex;align-items:center;justify-content:center;padding:0 2%;overflow:hidden}
.board span{color:var(--amber);font-size:2.4cqw;letter-spacing:0;line-height:1.1;white-space:nowrap;
  transition:opacity .5s ease}
.board span.out{opacity:0}
/* 역명판 */
.sign{position:absolute;left:50%;top:45.4%;transform:translateX(-50%);
  display:flex;align-items:center;gap:5px;background:#fff;border:0.42cqw solid var(--green);
  border-radius:999px;padding:0.7cqw 2.2cqw 0.7cqw 0.7cqw;white-space:nowrap;
  box-shadow:0 0.3cqw 0 rgba(0,0,0,.10)}
.sign i{width:3.6cqw;height:3.6cqw;border-radius:50%;background:var(--green);color:#fff;
  font-style:normal;font-size:2.3cqw;font-weight:700;display:grid;place-items:center}
.sign b{font-size:3.1cqw;font-weight:700;color:#17181A}
/* 열차 — 선로 위로 입선 */
.train{position:absolute;left:-3%;bottom:3.5%;width:106%;max-width:none;height:auto;display:block;
  transform:translateX(-118%);transition:transform 1.5s cubic-bezier(.2,.66,.3,1)}
.stage.arrived .train{transform:translateX(0)}

/* ── 본문 섹션 ───────────────────────────────────────── */
section{padding:44px 0}
.lede{font-size:clamp(21px,5.1vw,26px);font-weight:700;letter-spacing:-.024em;line-height:1.45}
.lede+.body{margin-top:14px;color:var(--soft);font-size:15.8px}
.eyebrow{font-size:12px;color:var(--soft);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}

/* 다이나믹 아일랜드 목업 */
.di{margin:26px auto 0;width:min(320px,86%);height:48px;background:#000;border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;padding:0 17px 0 10px;
  animation:float 3.8s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-5px)}}
.di svg{width:50px;height:25px;display:block}
.di .cnt{color:var(--amber);font-weight:700;font-size:16.5px;min-width:58px;text-align:right}
.di .cnt.soon{color:var(--red);font-size:15px}
.di-cap{margin-top:12px;text-align:center;color:var(--soft);font-size:13.5px}

/* 테마 진열대 — PICO-8 카트리지 그리드 */
.shelf{display:flex;gap:11px;overflow-x:auto;padding:22px 20px 8px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch}
.shelf::-webkit-scrollbar{display:none}
.cart{flex:none;width:132px;scroll-snap-align:center;text-decoration:none;color:inherit}
.cart img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:11px;display:block;
  border:1px solid var(--line);background:var(--card)}
.cart .nm{margin-top:8px;font-size:13px;font-weight:700}
.cart .fl{font-size:11.5px;color:var(--soft);line-height:1.4}
.cart .tag{display:inline-block;margin-top:3px;font-size:10.5px;color:var(--soft);
  border:1px solid var(--line);border-radius:4px;padding:0 5px}

/* 기능 목록 */
.feat{margin-top:26px}
.feat li{list-style:none;padding:19px 0;border-top:1px solid var(--line);
  font-size:16px;display:flex;gap:12px;align-items:flex-start}
.feat li i{flex:none;font-style:normal;width:22px;height:22px;border-radius:6px;background:var(--green);
  color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:2px}

/* 링크 버튼 */
.link{display:inline-flex;align-items:center;gap:7px;margin-top:22px;font-size:15px;
  font-weight:700;text-decoration:none;color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:12px 20px}
.link:hover{border-color:var(--green)}

/* 신뢰 */
.trust{border-top:1px solid var(--line);padding-top:26px;margin-top:8px}
.trust p{font-size:15px;color:var(--soft)}
.trust p+p{margin-top:9px}
.trust b{color:var(--ink);font-weight:700}

footer{padding:44px 0 120px;border-top:1px solid var(--line);color:var(--soft);font-size:12.5px}
footer p+p{margin-top:9px}
footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}

/* 모바일 고정 CTA */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--sky) 92%,transparent);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);display:flex;justify-content:center;
  transform:translateY(130%);transition:transform .3s ease}
.sticky.on{transform:translateY(0)}
.sticky .cta{margin:0;width:min(420px,100%);justify-content:center;padding:14px}
@media(min-width:760px){.sticky{display:none}}

/* 초안 검수용 — 배포 시 제거 */
.dm{position:fixed;left:10px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:40;
  font-size:11.5px;font-weight:700;background:var(--red);color:#fff;border:0;border-radius:999px;
  padding:8px 13px;cursor:pointer;opacity:.85}
body.draft [data-draft]{outline:2px dashed var(--red);outline-offset:3px;border-radius:4px}
body.draft [data-draft]::after{content:"✍ 검수";font-size:9px;color:var(--red);
  vertical-align:super;margin-left:3px;font-weight:700;letter-spacing:0}

@media(prefers-reduced-motion:reduce){
  .di{animation:none} .train{transition:none} html{scroll-behavior:auto}
}

/* 전광판 클로즈업 — 플레이트를 확대해 보드 영역만 잘라 쓴다 (추가 이미지 없음) */
.bstrip{position:relative;width:100%;aspect-ratio:2.33/1;overflow:hidden;border-radius:14px;
  container-type:inline-size;margin-top:22px;background:#111}
.bstrip img{position:absolute;width:178.6%;max-width:none;height:auto;left:-39.3%;top:-187.3%;display:block}
.bstrip img.night{opacity:var(--dusk)}
.bstrip .board{left:16%;top:26%;width:67.6%;height:49.5%}
.bstrip .board span{font-size:4.2cqw}

/* ── 데스크탑 — 단일 컬럼이 허전해서 히어로만 2단으로 ── */
@media(min-width:860px){
  .band{max-width:960px;margin:0 auto;padding:0 24px;
        display:grid;grid-template-columns:1fr 380px;gap:52px;align-items:center}
  .band .hero{padding:0}
  .band>.wrap{margin:0;max-width:none;padding-left:0;padding-right:0}
  .band .heroband{max-width:none;padding:0;margin:0}  /* auto 마진이 그리드에서 shrink-to-fit을 만들어 폭 0으로 접혔다 */
  .band .stage{border-radius:16px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.10)}
  header .hd{max-width:960px;margin:0 auto;padding-left:24px;padding-right:24px}
  .shelf{max-width:960px;margin:0 auto}
}

/* ══ 하위 페이지 공용 ══════════════════════════════════════ */
.sub-hero{padding:30px 0 8px}
.sub-hero h1{font-size:clamp(27px,6.6vw,36px);line-height:1.28}
.sub-hero p{margin-top:13px;color:var(--soft);font-size:15.8px}
.back{display:inline-block;margin-top:20px;font-size:13.5px;color:var(--soft);text-decoration:none}
.back:hover{color:var(--ink)}

/* 테마 격자 */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
@media(min-width:620px){.grid{grid-template-columns:repeat(3,1fr)}}
.grid .cart{width:auto}
.grid .cart img{aspect-ratio:2/3}

/* 노선 목록 */
.search{width:100%;margin-top:22px;padding:14px 16px;font-size:16px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:12px;font-family:inherit}
.search::placeholder{color:var(--soft)}
.region{margin-top:26px}
.region h2{font-size:14px;font-weight:700;color:var(--soft);letter-spacing:.02em;margin-bottom:10px}
.lines{display:flex;flex-wrap:wrap;gap:7px}
.line{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;
  border:1px solid var(--line);border-radius:999px;padding:7px 13px 7px 8px;background:var(--card)}
.line b{width:17px;height:17px;border-radius:50%;flex:none}
.line.sched{opacity:.82}
.line.sched::after{content:"시각표";font-size:10px;font-weight:600;color:var(--soft);margin-left:2px}
.legend{margin-top:18px;font-size:12.5px;color:var(--soft)}
.empty{margin-top:22px;font-size:15px;color:var(--soft);display:none}

/* FAQ */
.qa{margin-top:24px}
.qa details{border-top:1px solid var(--line);padding:17px 0}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{font-weight:700;font-size:15.8px;cursor:pointer;list-style:none;display:flex;gap:10px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";color:var(--green);font-weight:800;flex:none}
.qa details p{margin-top:11px;padding-left:22px;color:var(--soft);font-size:15.2px}
.qa details p+p{margin-top:8px}

/* ══ 스토어 링크 두 개 — iOS 주축, 안드는 바로 아래 (검색 유입 대비 8/24) ══ */
.cta-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.cta-row .cta{margin-top:0}
.cta.alt{background:transparent;color:var(--ink);border:1.5px solid var(--line);
  padding:13.5px 22px;font-size:15.5px}
.cta.alt:hover{border-color:var(--green);opacity:1}
.note em{font-style:normal;display:block;margin-top:3px;font-size:12.5px;opacity:.9}
.sticky{gap:8px}
.sticky .cta{width:auto;flex:1 1 200px;max-width:330px}
.sticky .cta.alt{flex:0 0 auto;padding:13.5px 15px}
.sticky .cta.alt b{display:none}

/* 브랜드 로고 — 실제 로고 자산(아이콘+워드마크 락업). 픽셀폰트 텍스트를 대체 */
.brand{display:block;line-height:0;flex:none}
.brand img{height:25px;width:auto;display:block}
@media(min-width:860px){.brand img{height:28px}}

/* ══ 데스크탑 좌측 정렬선 통일 (8/24) ══════════════════════
   히어로 밴드(960)와 본문(560 중앙)이 어긋나 시선이 한 번 튀었다.
   바깥 상자를 960으로 통일하고, 안쪽 텍스트만 읽기 좋은 폭으로 좌측 고정. */
@media(min-width:860px){
  body>.wrap, body>section>.wrap, .shelf{max-width:960px;margin:0 auto;padding-left:24px;padding-right:24px}
  body>.wrap>section, body>.wrap>footer, body>section>.wrap>*{max-width:620px}
  body>.wrap>header{max-width:none}
  header .hd{max-width:none;padding-left:0;padding-right:0}
  .trust{max-width:620px}
}

/* 꾸미기 페이지 — 낮·밤 자동 전환을 스트립에서 직접 시연 (--dusk를 안 쓰므로 자체 순환) */
.demo-daynight img.night{animation:daynight 9s ease-in-out infinite alternate;opacity:0}
@keyframes daynight{0%,38%{opacity:0}62%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.demo-daynight img.night{animation:none;opacity:.5}}

/* 푸터 출처 — 기관 목록이 푸터를 잡아먹어 접는다. 고지 문장은 summary에 남긴다 */
footer .src{margin:0}
footer .src summary{cursor:pointer;list-style:none;color:var(--soft)}
footer .src summary::-webkit-details-marker{display:none}
footer .src summary::after{content:" ▾";opacity:.6}
footer .src[open] summary::after{content:" ▴"}
footer .src p{margin-top:7px;opacity:.85;line-height:1.7}

footer .sitelinks a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
footer .sitelinks{margin-top:14px}

/* ── 약관·문서 페이지 ────────────────────────────────── */
.doc{padding:26px 0 8px}
.doc h1{font-size:clamp(27px,6.4vw,34px);font-weight:800;letter-spacing:-.024em;line-height:1.3}
.doc .date{margin-top:10px;color:var(--soft);font-size:13.5px}
.doc h2{margin-top:36px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.doc p{margin-top:12px;font-size:15.4px;color:var(--soft);line-height:1.78}
.doc ul{margin-top:10px;padding-left:0;list-style:none}
.doc li{margin-top:11px;font-size:15.4px;color:var(--soft);line-height:1.78;padding-left:15px;position:relative}
.doc li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--green)}
.doc strong{color:var(--ink);font-weight:700}

/* ── 404 ─────────────────────────────────────────────── */
.notfound{padding:20px 0 40px;text-align:center}
.notfound .stage{max-width:300px;margin:0 auto 30px;border-radius:16px}
.notfound .board span{font-size:3.1cqw}
.notfound h1{font-size:clamp(26px,6.2vw,34px);font-weight:800;letter-spacing:-.024em}
.notfound p{margin-top:12px;color:var(--soft);font-size:15.6px}