/* 앱 소개 v2 (rider-web, 2026-10-06)
   색: docs/design/tokens.md 앱 토큰만 — 새 HEX 0. 크기·여백·모션: docs/web/art_direction.md 3~7장.
   v1 CSS는 재사용하지 않았다(보관본 docs/web/archive/v1/). */
@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap; src: url("/assets/fonts/pretendard-400.woff2?v=84a8aae3") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-display: swap; src: url("/assets/fonts/pretendard-600.woff2?v=2c3076e2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-display: swap; src: url("/assets/fonts/pretendard-700.woff2?v=eb4437a9") format("woff2"); }

:root {
  --stage: #030406;    /* 첫 화면 무대 — art_direction 4장 */
  --bg: #0B1016;       /* bg.n */
  --surface: #151C25;  /* surface.1 */
  --hair: #222C38;     /* line.hair */
  --edge: #2B3542;     /* edge.top */
  --text: #F3F6FA;     /* text.primary — 순백 안 씀 */
  --text2: #AEB7C3;    /* text.secondary */
  --text3: #7A8594;    /* text.tertiary */
  --pad: 24px;         /* 좌우 여백 폰 24 / 데스크톱 48 */
  --sec: 96px;         /* 섹션 위아래 폰 96 / 데스크톱 160 */
  --gap: 32px;         /* 그림과 글 사이 폰 32 / 데스크톱 48 */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--stage); }
body {
  margin: 0; background: var(--stage); color: var(--text);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 16px; line-height: 1.6; letter-spacing: -0.01em;
  word-break: keep-all; overflow-wrap: break-word;
  font-feature-settings: "tnum"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }

.wrap {
  max-width: 1200px; margin: 0 auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}
.m { display: inline; }   /* 폰에서만 줄바꿈 */

/* 머리줄 — 로고 그림만(맨 끝 .brand-wm). 메뉴·버튼 없음. 첫 화면 무대 위에 투명하게 얹는다(경계선 0) */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 1; }
.top-in { height: 56px; display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; text-decoration: none; }

/* 1. 첫 화면 — 어두운 무대 위 폰 한 대, 조명 한 곳 */
/* 높이는 첫 화면(100svh)을 채우고, 폰은 첫 화면 아래 끝에 닿게 둔다 — 폰 화면 바닥색(#0B1016)이
   다음 띠(bg.n)와 같아서, 바탕을 아래쪽에서 bg.n으로 넘기고 그림 끝을 흐리면 이음매가 없다.
   조명: 손실 webp는 이 어둠에서 8×8 블록 자국이 생겨(라운드1) CSS 방사 그라데이션으로 바꿨다. 값은 디자인
   stage_glow(compose.py: 회백 #AEB7C3, 최대 7.5%, 가운데 50%·타원) 그대로. */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; text-align: center; overflow: hidden;
  padding-top: 56px;
  background:
    linear-gradient(to bottom, rgba(11, 16, 22, 0) calc(100% - 160px), var(--bg)),
    radial-gradient(42% 46% at 50% 72%, rgba(174, 183, 195, .075), rgba(174, 183, 195, .03) 45%, rgba(174, 183, 195, 0) 100%),
    var(--stage);
}
.hero-copy { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding-top: 16px; padding-bottom: 8px; }
h1 { font-size: 36px; line-height: 1.22; font-weight: 700; letter-spacing: -0.03em; }
.sub { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--text2); }
.status { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text3); letter-spacing: 0; }
.hero-art {
  width: min(92vw, 360px); margin: 24px auto 0; flex: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.hero-art img, .art-phone img { filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .6)); }

/* 2~5. 장면 — 화면 하나에 이야기 하나, 그림 하나. 상자 대신 바탕 띠 */
.scene { padding: var(--sec) 0; }
.band-n { background: var(--bg); }
.band-s { background: var(--surface); }
.scene-in { display: grid; gap: var(--gap); justify-items: center; text-align: center; }
.scene-copy { max-width: 30em; }
h2 { font-size: 28px; line-height: 1.3; font-weight: 700; letter-spacing: -0.03em; }
.scene-copy p, .now p { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--text2); }
.art-phone { width: min(300px, 80vw); }
.art-hud { width: min(280px, 76vw); }
.art-card { width: min(440px, 100%); }

/* 6. 지금 — 그림 없는 쉬는 구간 */
.now { padding: var(--sec) 0; background: var(--bg); text-align: center; }
.now p + p { margin-top: 8px; }

/* 7. 자주 묻는 질문 — 접힘(JS 없음), 상자 대신 가는 줄 */
.faq { padding: 0 0 var(--sec); background: var(--bg); }
.faq-in { max-width: 760px; }
.faq h2 { font-size: 22px; }
.faq-list { margin-top: 20px; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  position: relative; display: block; cursor: pointer; list-style: none;
  padding: 20px 40px 20px 0; font-size: 17px; line-height: 1.45; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .faq summary:hover::after { border-color: var(--text2); } }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details p { padding: 0 0 24px; font-size: 16px; line-height: 1.7; color: var(--text2); }

/* 8. 맨 아래 */
.foot { background: var(--stage); padding: 40px 0 calc(48px + env(safe-area-inset-bottom)); font-size: 14px; line-height: 1.6; color: var(--text3); }
.foot-name { font-size: 15px; font-weight: 600; color: var(--text2); }
.foot-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-links > * { min-width: 0; } /* 긴 메일 주소: 플렉스 항목이 글자 폭 밑으로 줄어야 break-word 가 먹는다(큰 글씨에서 가로 넘침 방지) */
.foot-links a { color: var(--text2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text3); }
.foot-note { margin-top: 12px; }

/* 개인정보처리방침(/privacy) — 같은 글꼴·색, 읽기 폭 */
.doc { max-width: 760px; padding-top: 24px; padding-bottom: 72px; }
.doc h1 { font-size: 28px; line-height: 1.3; margin: 8px 0 16px; }
.doc h2 { font-size: 19px; line-height: 1.4; margin: 40px 0 12px; letter-spacing: -0.02em; }
.doc p, .doc li { font-size: 16px; line-height: 1.75; color: var(--text); }
.doc p + p { margin-top: 12px; }
.doc .meta p { margin: 0; font-size: 14px; color: var(--text2); }
.doc ul { padding-left: 20px; margin: 12px 0; }
.doc li { margin: 6px 0; }
.doc strong { font-weight: 600; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }
.back { display: inline-block; margin-top: 8px; font-size: 15px; color: var(--text2); text-decoration: none; }
.table-wrap { overflow-x: auto; margin: 12px 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.doc table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; line-height: 1.6; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); }
.doc th { color: var(--text2); font-weight: 600; }
.doc tr:last-child td { border-bottom: 0; }
/* 좁은 폰: 3칸 표가 잘려 옆으로 밀어야 했다(라운드2) → 줄마다 칸을 쌓고 머리 이름을 작게 붙인다 */
@media (max-width: 640px) {
  .table-wrap { overflow: visible; border-bottom: 0; }
  .doc table, .doc tbody, .doc tr, .doc td { display: block; width: 100%; min-width: 0; }
  .doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc tr { padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .doc td { padding: 2px 0; border: 0; font-size: 15px; }
  .doc td:first-child { font-weight: 600; font-size: 16px; padding-bottom: 6px; }
  .doc td:not(:first-child)::before { content: attr(data-label); display: block; margin-top: 6px; font-size: 13px; color: var(--text3); }
}

/* 지도 데이터(/map-data) — /privacy 와 같은 글 틀. 더한 것: 코드 글자, 짧은 표, 접힌 스크립트 전문.
   글꼴은 같은 Pretendard 를 이 페이지 글자만 남겨 따로 묶었다(build.sh — 소개·방침 글꼴 파일과 섞지 않으려고). */
@font-face { font-family: "Pretendard Map"; font-weight: 400; font-display: swap; src: url("/assets/fonts/pretendard-map-400.woff2?v=ebf0b969") format("woff2"); }
@font-face { font-family: "Pretendard Map"; font-weight: 600; font-display: swap; src: url("/assets/fonts/pretendard-map-600.woff2?v=3dce820c") format("woff2"); }
@font-face { font-family: "Pretendard Map"; font-weight: 700; font-display: swap; src: url("/assets/fonts/pretendard-map-700.woff2?v=3dfaa8c3") format("woff2"); }
body.map-data { font-family: "Pretendard Map", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
.doc code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  font-size: 0.875em; letter-spacing: 0; color: var(--text2); overflow-wrap: anywhere; word-break: normal;
}
.doc td code { color: inherit; overflow-wrap: normal; }   /* 표 안 층 이름은 밑줄(_) 뒤 <wbr> 에서만 갈린다(build_map_data.py) — nowrap 은 320px 에서 줌 칸을 밀어냈다 */
/* 짧은 표(.grid): 폰에서도 칸 그대로 — 세 칸이 짧아 쌓으면 오히려 길어진다 */
.doc .grid table { min-width: 0; }
@media (max-width: 640px) {
  .doc .grid { border-bottom: 1px solid var(--edge); }
  .doc .grid table { display: table; width: 100%; }
  .doc .grid thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .doc .grid tbody { display: table-row-group; }
  .doc .grid tr { display: table-row; padding: 0; }
  .doc .grid td, .doc .grid th { display: table-cell; width: auto; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
  .doc .grid tr:last-child td { border-bottom: 0; }
  .doc .grid td:first-child { font-weight: 400; font-size: 14px; padding-bottom: 10px; }
  .doc .grid td:not(:first-child)::before { content: none; }
  .doc .grid td:last-child, .doc .grid th:last-child { padding-right: 0; white-space: nowrap; }
}
.doc details.src { margin: 20px 0 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.doc details.src summary {
  position: relative; display: block; cursor: pointer; list-style: none;
  padding: 14px 40px 14px 0; font-size: 16px; line-height: 1.5; font-weight: 600;
}
.doc details.src summary::-webkit-details-marker { display: none; }
.doc details.src summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease);
}
.doc details.src[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.doc .sum-note { font-weight: 400; font-size: 14px; color: var(--text3); }
.doc pre {
  margin: 0 0 20px; padding: 16px; overflow-x: auto; background: var(--surface); border-radius: 12px;
  font-size: 12px; line-height: 1.6; tab-size: 4; -webkit-overflow-scrolling: touch;
}
.doc pre code { font-size: inherit; color: var(--text2); white-space: pre; overflow-wrap: normal; }

/* 태블릿 세로(600~899): 폰 360px이 화면 가운데 떠 보였다(라운드2) → 폰을 키워 첫 화면 아래 끝까지 채운다 */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-art { width: min(68vw, 520px); }
  .art-phone { width: 340px; }
  .art-card { width: 440px; }
}

@media (min-width: 900px) {
  :root { --pad: 48px; --sec: 160px; --gap: 48px; }
  .m { display: none; }
  .top-in { height: 72px; }
  .brand { font-size: 17px; }
  .hero { padding-top: 72px; }
  .hero-copy { flex: none; padding-top: 32px; padding-bottom: 0; }
  h1 { font-size: 64px; line-height: 1.14; letter-spacing: -0.035em; }
  .sub { margin-top: 20px; font-size: 19px; }
  .status { margin-top: 12px; font-size: 14px; }
  .hero-art { width: 600px; margin-top: 48px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }

  h2 { font-size: 44px; line-height: 1.2; letter-spacing: -0.035em; }
  .scene-copy p, .now p { margin-top: 24px; font-size: 19px; }
  .art-phone { width: 340px; }
  .art-hud { width: 400px; }
  .art-card { width: 440px; }

  .now p + p { margin-top: 8px; }
  .faq h2 { font-size: 28px; text-align: center; }
  .faq-list { margin-top: 32px; }
  .faq summary { font-size: 19px; padding: 24px 48px 24px 0; }
  .faq details p { font-size: 17px; padding-bottom: 28px; }

  .foot { padding-top: 56px; }
  .doc { padding-top: 40px; }
  .doc h1 { font-size: 36px; }
  .doc h2 { font-size: 21px; }
}

/* 글·그림 2단은 둘이 다 들어가는 폭부터(글 400 + 틈 120 + 그림 최대 440 + 좌우 여백 96 = 1056). 그 아래는 1단 가운데 */
@media (min-width: 1056px) {
  /* 글·그림을 한 쌍으로 가운데에 모은다(라운드1: 1fr 1fr은 쌍이 왼쪽으로 쏠림) */
  .scene-in { grid-template-columns: auto auto; justify-content: center; column-gap: 120px; align-items: center; text-align: left; }
  .scene-copy { width: 400px; max-width: none; }
  .flip .scene-copy { order: 2; }
}

/* 모션 — 하나뿐: 16px 아래에서 떠오름. 줄이기 설정이면 없음. JS 없음(CSP script-src 'none') */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 600ms var(--ease) both; }
  .rise.d1 { animation-delay: 80ms; }
  .rise.d2 { animation-delay: 160ms; }
  .rise.d3 { animation-delay: 240ms; }
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 160px; }
  }
}

/* 줄바꿈 마감 (디자인 t_50f9ac2e, art_direction.md 3장) */
p, li, td { text-wrap: pretty; }
@media (max-width: 1055px) { .scene-copy p, .now p { text-wrap: balance; } }

/* ── /map-data 링크·접힘 마감 (디자인 t_f29678db) ─────────────────────────────
   모든 규칙이 body.map-data 로 시작한다 → / · /privacy 의 계산된 스타일은 한 글자도 안 바뀐다. */
/* ① 따로 선 링크: 보이는 자리·모양은 그대로, 누르는 칸만 48px 로 넓힌다 */
body.map-data .back { position: relative; }
body.map-data .back::after,
body.map-data .doc ul.links a::after { content: ""; position: absolute; left: 0; right: 0; }
body.map-data .back::after { top: -16px; bottom: -8px; }        /* 줄 24 + 16 + 8 = 48. 아래 8 은 제목 위 빈칸까지만 */
/* 링크만 있는 목록(build 가 ul.links 로 낸다): 링크 줄 28 + 위아래 10 = 48, 항목 사이 20 → 칸끼리 맞닿고 겹치지 않는다.
   주소는 '/' 뒤 <wbr> 에서만 꺾는다(build). max-content 로 누르는 칸이 글자 폭을 넘지 않는다. */
body.map-data .doc ul.links a { position: relative; display: block; max-width: max-content; }
body.map-data .doc ul.links a::after { top: -10px; bottom: -10px; }
body.map-data .doc ul.links li + li { margin-top: 20px; }
/* ② 글 속 링크(문장·표 칸 안): 줄 간격 안에서만 위아래 4px → 누르는 칸 19 → 27. 화면 변화 0.
   48 로 키우지 않는다 — 윗줄·아랫줄 글자까지 링크가 된다(WCAG 2.5.8 '글 속 링크' 예외). */
body.map-data .doc p a,
body.map-data .doc td a,
body.map-data .doc ul:not(.links) a { padding: 4px; margin-inline: -4px; }
/*   키보드 초점 테두리는 지금 모양 그대로: 원래 (글자 상자 + 바깥 4px, 모서리 4+4) = (padding 4 상자 + 바깥 0, 모서리 8).
     좌우 padding 4 는 margin -4 로 상쇄 → 글자 자리 변화 0, 대신 누르는 칸이 좌우로도 4px 넓어져 괄호까지 닿는다. */
body.map-data .doc p a:focus-visible,
body.map-data .doc td a:focus-visible,
body.map-data .doc ul:not(.links) a:focus-visible { outline-offset: 0; border-radius: 8px; }
/* ②-1 3어절 이하 짧은 링크 이름(build 가 a.keep)은 한 덩어리로 — '한국의 / 도로 분류' 처럼 이름 가운데서 갈리지 않게.
   글자를 바꾸지 않는다(U+00A0 를 넣으면 글꼴 부분집합에 없는 글자가 생기고 복사 글자도 바뀐다). 주소 링크는 '/' 뒤 <wbr> 에서만 꺾는다(build). */
body.map-data .doc a.keep { white-space: nowrap; }
/* ③ 머리 정보 줄 바로 뒤 첫 문단이 붙어 있었다(/privacy 는 다음이 제목이라 안 보였음) → 16 띄운다 */
body.map-data .doc .meta + p { margin-top: 16px; }
/* ④ 접힌 제목 줄의 보조 글: 괄호 가운데서 갈리지 않게 통째로 다음 줄로 */
body.map-data .doc .sum-note { display: inline-block; }
/* ⑤ 펼친 스크립트(폰에서 약 5,000px): 제목 줄이 화면 위에 붙어 따라와 어디서든 한 번에 접는다(JS 0) */
body.map-data .doc details.src[open] > summary {
  position: sticky; top: 0; z-index: 1; background: var(--stage);
  border-bottom: 1px solid var(--hair); margin-bottom: 16px;
}

/* ⑥ 지명 점 조회식 상자(guard (182) C182-3): 한 줄짜리 식이라 옆으로 밀지 않고 상자 안에서 줄을 바꾼다(복사 글자는 그대로) */
body.map-data .doc pre.q { margin-top: 12px; }
body.map-data .doc pre.q code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* 머리줄 로고 (디자인 t_b9a3bf5a, docs/design/web_brand.md) — 앱 홈 앱바와 같은 m6 그림(docs/design/assets/wordmark/r8/m6_app.svg).
   --wm = 글자 상자 높이(앱바 18dp 와 같음). 호·눈금은 위로 덧붙는다(× 46/217). 링크 아래 여백을 같은 몫 주어
   글자 상자 가운데 = 머리줄 가운데(앱바에서 글자 상자 가운데 = 톱니 가운데인 것과 같은 규칙).
   초점 테두리는 로고 잉크를 감싼다. 누르는 칸은 ::after 로 높이 48px. 읽기 이름은 숨긴 글자 한 번(그림 alt 는 비움). 움직임 0 */
.brand-wm { --wm: 18px; position: relative; margin-bottom: calc(var(--wm) * 46 / 217); }
.brand-wm::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 48px; transform: translateY(-50%); }
.brand-wm img.wm { display: block; width: auto; height: calc(var(--wm) * 263 / 217); border-radius: 0; }
.brand-wm .wm-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 900px) { .brand-wm { --wm: 22px; } }
/* 강제 색(윈도 고대비): 그림 색은 바뀌지 않아 밝은 테마에서 흰 글자가 사라진다 → 그림 대신 글자(시스템 색) */
@media (forced-colors: active) {
  .brand-wm { margin-bottom: 0; }
  .brand-wm img.wm { display: none; }
  .brand-wm .wm-name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}