/* ===== Fonts =====
   Porsche Next (라틴) + Porsche Next Korean (한글). 라틴 글자는 Porsche Next, 한글은 Porsche Next Korean으로 표시.
   한글 OTF는 약 1.8MB씩이라, 배포 전 사용 글자만 남긴 woff2로 서브셋하면 로딩이 빨라집니다. */
@font-face { font-family: "Porsche Next"; src: url(../assets/fonts/PorscheNext-Thin.otf) format("opentype"); font-weight: 100 300; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2190-21FF; }
@font-face { font-family: "Porsche Next"; src: url(../assets/fonts/PorscheNext-Regular.otf) format("opentype"); font-weight: 400 500; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2190-21FF; }
@font-face { font-family: "Porsche Next"; src: url(../assets/fonts/PorscheNext-SemiBold.otf) format("opentype"); font-weight: 600; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2190-21FF; }
@font-face { font-family: "Porsche Next"; src: url(../assets/fonts/PorscheNext-Bold.otf) format("opentype"); font-weight: 700 900; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2190-21FF; }
@font-face { font-family: "Porsche Next Korean"; src: url(../assets/fonts/PorscheNextKorean-Regular.otf) format("opentype"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Porsche Next Korean"; src: url(../assets/fonts/PorscheNextKorean-Bold.otf) format("opentype"); font-weight: 600 900; font-display: swap; }

/* ===== Tokens =====
   브로셔 시안(피그마) KV 팔레트: navy #002F43 · green #539033 · blue #125FA3 · mustard #DCA54D · red #C14D56 · grey #7D8A8D
   하위 페이지는 브로셔 내지처럼 어둡게 깐 KV 위의 다크 테마 */
:root {
  --navy: #002f43;
  --navy-deep: #00202f;
  --green: #539033;
  --blue: #125fa3;
  --mustard: #dca54d;
  --red: #c14d56;
  --grey: #7d8a8d;

  --ink: #ffffff;
  --ink-2: rgba(255,255,255,.78);
  --muted: rgba(255,255,255,.56);
  --line: rgba(255,255,255,.14);
  --paper: var(--navy-deep);
  --card: rgba(6,52,74,.72);
  --card-solid: #0a3a52;
  --accent: var(--mustard);
  --accent-ink: var(--mustard);
  --dark-ink: #0e1a22;
  --err: #ff8c95;
  --radius: 0.75rem;
  --kv-h: calc(min(100vw, 640px) * 1.4137);
  --head: "Porsche Next", "Porsche Next Korean", "Pretendard Variable", Pretendard, sans-serif;
  --kr: "Porsche Next", "Porsche Next Korean", "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
/* 적응형 크기: 375px 화면 = 16px 기준 */
html { font-size: clamp(12px, 4.2667vw, 18px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: #00131d;
  color: var(--ink);
  font-family: var(--kr);
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }

.app { position: relative; max-width: 640px; min-height: 100%; margin: 0 auto; background: var(--paper); overflow: hidden; }

/* ===== Page switching ===== */
.page { display: none; min-height: 100vh; min-height: 100dvh; }
.page.is-active { display: block; animation: pageIn .45s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page.is-active, .step.is-active, .venue.is-active, .timeline li, .cover-kv img, .cover-title-block, .cover-menu, .cover-foot { animation: none !important; } }

/* KV 4색 라인 */
.kv-line { background: linear-gradient(90deg, var(--green) 0 25%, var(--blue) 25% 50%, var(--mustard) 50% 75%, var(--red) 75%); }

/* ===== Cover : KV 일러스트 =====
   KV 그리드 — 3열(33.3%씩) × 4행(각 23.5%) + 하단 네이비 띠(94–100%).
   4행 1–2열(가로 0–66.7%, 세로 70.7–94%)의 빈 초록 블록에 타이틀, 하단 띠에 날짜.
   KV 폭은 '화면 높이 - 메뉴 영역' 안에 들어오도록 제한 → 한 화면에 표지 전체가 보임. 글자 크기는 KV 폭 기준(cqw) */
.cover { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.cover.is-active { display: flex; flex-direction: column; }
.cover-kv {
  position: relative; container-type: inline-size;
  width: min(100%, max(17rem, calc((100vh - 15.25rem) / 1.4137))); margin: 0 auto;
}
@supports (height: 100dvh) { .cover-kv { width: min(100%, max(17rem, calc((100dvh - 15.25rem) / 1.4137))); } }
.cover-kv > img { width: 100%; height: auto; animation: fadeIn 1s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.cover-title-block { position: absolute; left: 5.5cqw; top: 102cqw; width: 56cqw; animation: rise .9s .15s ease both; }
.cover-logo { width: 27cqw; height: auto; margin: 0 0 2.4cqw; }
.cover-title { margin: 0; font-family: var(--head); font-weight: 200; font-size: 11.6cqw; line-height: .95; letter-spacing: -.01em; }
.cover-sub { margin: 1.8cqw 0 0; font-family: var(--head); font-weight: 600; font-size: 3cqw; letter-spacing: .24em; }
.cover-date {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8.4cqw; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--head); font-weight: 600; font-size: 3.2cqw; letter-spacing: .2em;
}
.cover-date span { color: var(--mustard); }

.cover-menu {
  position: relative; z-index: 1; margin: 1.25rem auto 0; width: 100%; max-width: 26rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 0.5rem; padding: 0 1.375rem;
}
.menu-item { display: flex; flex-direction: column; align-items: center; gap: 0.4375rem; font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,.92); }
/* 메뉴 아이콘 = KV 컬러 타일 */
.menu-icon {
  --tile: var(--green);
  width: 3.25rem; height: 3.25rem; border-radius: 0.375rem; display: grid; place-items: center;
  background: var(--tile); transition: transform .2s, filter .2s;
}
.menu-item:nth-child(2) .menu-icon { --tile: var(--red); }
.menu-item:nth-child(3) .menu-icon { --tile: var(--mustard); }
.menu-item:nth-child(4) .menu-icon { --tile: var(--blue); }
.menu-item:nth-child(5) .menu-icon { --tile: var(--green); }
.menu-item:nth-child(6) .menu-icon { --tile: var(--red); }
.menu-icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu-item:nth-child(3) .menu-icon svg { stroke: var(--navy); }
.menu-item:active .menu-icon { transform: scale(.92); }
@media (hover: hover) { .menu-item:hover .menu-icon { filter: brightness(1.12); transform: translateY(-2px); } }
.cover-foot { position: relative; z-index: 1; margin-top: auto; padding: 1.25rem 0 calc(1.125rem + env(safe-area-inset-bottom)); text-align: center; }
.cover-foot p { margin: 0; font-family: var(--head); font-size: 0.625rem; letter-spacing: .22em; text-transform: uppercase; opacity: .5; }
.cover-menu, .cover-foot { animation: rise .9s ease both; }
.cover-menu { animation-delay: .3s; }
.cover-foot { animation-delay: .45s; }
@keyframes rise { from { opacity: 0; transform: translateY(0.875rem); } to { opacity: 1; transform: none; } }

/* ===== Sub pages : 어둡게 깐 KV 배경 (브로셔 내지) ===== */
.sub {
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(180deg, rgba(0,32,47,.72) 0, rgba(0,32,47,.86) 45%, var(--navy-deep) 100%),
    url(../assets/img/kv-art.jpg);
  background-size: 100% var(--kv-h), 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
}
/* 상단 사진: KV 위에 떠 있는 카드. 뒤로가기 · 브랜드는 사진 위쪽 KV 영역에 */
.sub-hero {
  position: relative; margin: calc(3.75rem + env(safe-area-inset-top)) 1.25rem 0;
  aspect-ratio: 16 / 9; border-radius: 0.5rem; background: #123 50% 60% / cover no-repeat;
  box-shadow: 0 0.75rem 2rem rgba(0,0,0,.35);
}
.sub-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.25rem; border-radius: 0 0 0.5rem 0.5rem; background: linear-gradient(90deg, var(--green) 0 25%, var(--blue) 25% 50%, var(--mustard) 50% 75%, var(--red) 75%); }
.back {
  position: absolute; z-index: 1; left: 0; top: -3rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 1.5rem; line-height: 1; padding-bottom: 0.1875rem;
  backdrop-filter: blur(0.375rem); -webkit-backdrop-filter: blur(0.375rem);
}
.sub-brand { position: absolute; z-index: 1; right: 0; top: -2.25rem; color: #fff; font-family: var(--head); font-weight: 600; font-size: 0.625rem; letter-spacing: .26em; opacity: .85; }
.sub-body { position: relative; padding: 1.75rem 1.25rem calc(3rem + env(safe-area-inset-bottom)); }
.sub-title { margin: 0 0 1.375rem; font-family: var(--head); font-weight: 200; font-size: 2.25rem; line-height: 1.05; }
.sub-title::after { content: ""; display: block; width: 3rem; height: 0.1875rem; background: linear-gradient(90deg, var(--green) 0 25%, var(--blue) 25% 50%, var(--mustard) 50% 75%, var(--red) 75%); margin-top: 0.875rem; }
.sub-title small { display: block; margin-top: 0.375rem; font-size: 0.8125rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.sec-title { margin: 2.25rem 0 0.875rem; font-family: var(--head); font-weight: 600; font-size: 0.8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mustard); display: flex; align-items: center; gap: 0.625rem; }
.sec-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sub-foot { display: flex; justify-content: center; margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.sub-foot img { width: 7.5rem; height: auto; opacity: .85; }

.lead { margin: 0 0 1.5rem; color: var(--ink-2); font-size: 0.9062rem; line-height: 1.75; }
.lead b { display: block; margin-bottom: 0.5rem; color: var(--ink); font-size: 1.0625rem; font-weight: 700; line-height: 1.45; }
.muted { color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
.note { margin: 0.875rem 0 0; color: var(--muted); font-size: 0.7812rem; line-height: 1.6; }
.note b { color: var(--ink); }
.accent { color: var(--accent-ink); }

.info-list { margin: 0; background: var(--card); border-radius: var(--radius); padding: 0.25rem 1rem; border: 1px solid var(--line); backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); }
.info-list > div { display: grid; grid-template-columns: 5.125rem 1fr; gap: 0.625rem; padding: 0.8125rem 0; border-bottom: 1px solid var(--line); }
.info-list > div:last-child { border-bottom: 0; }
.info-list dt { color: var(--muted); font-size: 0.8125rem; padding-top: 1px; }
.info-list dd { margin: 0; font-weight: 500; }
.info-list.compact dd { font-size: 0.875rem; }

/* travel : KV 컬러 블록 */
.travel { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.travel > div { background: var(--blue); border-radius: var(--radius); padding: 0.875rem; }
.travel > div:last-child { background: var(--green); }
.travel .tag { background: rgba(0,0,0,.25); }
.travel b { display: block; margin-top: 0.375rem; font-size: 0.9375rem; }
.travel p { margin: 0.25rem 0 0; font-size: 0.75rem; color: rgba(255,255,255,.88); line-height: 1.55; }

/* flow */
.flow { list-style: none; margin: 0; padding: 0; counter-reset: f; }
.flow li { counter-increment: f; position: relative; padding: 0 0 1.125rem 2.75rem; }
.flow li::before {
  content: counter(f, decimal-leading-zero); position: absolute; left: 0; top: 0;
  width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--head); font-weight: 600; font-size: 0.6875rem; background: var(--card-solid); border: 1px solid var(--line); color: var(--ink-2);
}
.flow li:not(:last-child)::after { content: ""; position: absolute; left: 0.9375rem; top: 2rem; bottom: 0.125rem; width: 1px; background: var(--line); }
.flow li.hl::before { background: var(--mustard); border-color: var(--mustard); color: var(--navy); }
.flow b { display: block; font-family: var(--head); font-weight: 600; font-size: 0.9375rem; line-height: 1.875rem; }
.flow span { display: block; color: var(--ink-2); font-size: 0.8438rem; margin-top: -2px; }

/* line-up */
.lineup-note { margin-bottom: 0.875rem; }
.lineup { display: grid; gap: 0.625rem; }
.lineup-group { --g: var(--green); background: var(--card); border: 1px solid var(--line); border-top: 0.25rem solid var(--g); border-radius: var(--radius); padding: 0.75rem 1rem 0.375rem; }
.lineup-group:nth-child(2) { --g: var(--blue); }
.lineup-group:nth-child(3) { --g: var(--red); }
.lineup-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.25rem; }
.lineup-head b { font-family: var(--head); font-weight: 600; font-size: 0.9375rem; }
.lineup-head span { font-size: 0.75rem; color: var(--muted); }
.lineup ul { list-style: none; margin: 0; padding: 0; }
.lineup li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.decal { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--g); color: #fff; font-family: var(--head); font-weight: 600; font-size: 0.75rem; }
.car b { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.car small { display: flex; align-items: center; gap: 0.375rem; font-size: 0.7188rem; color: var(--muted); }
.chip { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); }

.notice { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.notice li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.875rem 1rem 0.875rem 1.25rem; font-size: 0.8438rem; color: var(--ink-2); overflow: hidden; }
.notice li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.25rem; background: var(--mustard); }
.notice b { display: block; color: var(--ink); font-size: 0.875rem; margin-bottom: 0.1875rem; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.125rem; padding: 0 1.125rem; border-radius: 0.5rem; border: 1px solid transparent; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: transform .15s, background .2s, filter .2s; text-align: center; line-height: 1.3; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--mustard); color: var(--navy); }
.btn-primary:disabled { background: #6f7b80; color: rgba(255,255,255,.7); }
@media (hover: hover) { .btn-primary:hover { filter: brightness(1.08); } .btn-ghost:hover { background: rgba(255,255,255,.12); } }
.btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff; }
.btn-block { display: flex; width: 100%; margin-top: 1.875rem; }
.link { background: none; border: 0; padding: 0; color: var(--muted); font-size: 0.7812rem; text-decoration: underline; cursor: pointer; }

/* ===== Timetable ===== */
.day-range { margin: 0 0 1rem; padding: 0.875rem 1rem; border-radius: var(--radius); background: var(--blue); color: #fff; font-weight: 600; font-size: 0.9062rem; line-height: 1.6; }
.day-range span { display: block; margin-top: 0.125rem; font-size: 0.7812rem; font-weight: 400; opacity: .8; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 3.5rem 1.375rem 1fr; align-items: start; padding: 0 0 1.125rem; position: relative; animation: pageIn .3s ease both; }
.timeline time { font-family: var(--head); font-weight: 600; font-size: 0.875rem; white-space: nowrap; line-height: 1.375rem; }
.timeline .dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); background: var(--navy-deep); margin: 0.375rem auto 0; position: relative; z-index: 1; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 4.1562rem; top: 0.875rem; bottom: -6px; width: 1px; background: var(--line); }
.timeline li.hl .dot { background: var(--mustard); border-color: var(--mustard); }
.timeline li.hl .t-title { color: var(--mustard); font-weight: 700; }
.timeline .t-title { display: block; font-weight: 600; line-height: 1.375rem; color: var(--ink); }
.timeline .t-desc { display: block; font-size: 0.7812rem; color: var(--muted); margin-top: 1px; }

/* ===== Consent ===== */
.stepper { display: flex; align-items: center; gap: 0.75rem; font-family: var(--head); font-size: 0.8125rem; color: var(--muted); margin: -6px 0 1.25rem; }
.stepper span { color: var(--ink); font-weight: 600; }
.stepper-bar { flex: 1; height: 0.1875rem; background: var(--line); border-radius: 0.125rem; overflow: hidden; }
.stepper-bar i { display: block; height: 100%; width: 25%; background: var(--mustard); transition: width .35s ease; }
.step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.step.is-active { display: block; animation: pageIn .35s ease both; }
.step-label { margin: 0; font-family: var(--head); font-weight: 600; font-size: 0.75rem; letter-spacing: .14em; color: var(--mustard); }
.step-title { margin: 0.25rem 0 0.375rem; font-size: 1.25rem; line-height: 1.35; font-weight: 700; }
.step-desc { margin: 0 0 1.125rem; color: var(--ink-2); font-size: 0.8438rem; }
.field { display: block; margin-bottom: 0.875rem; }
.field > span { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; }
em { font-style: normal; font-size: 0.6875rem; font-weight: 600; color: var(--err); margin-left: 0.25rem; }
/* 입력칸은 흰 바탕 (어두운 배경에서도 입력 내용이 잘 보이도록) */
.field input, .field select {
  width: 100%; height: 3.125rem; padding: 0 0.875rem; border-radius: 0.5rem; border: 2px solid transparent; background: #fff; color: var(--dark-ink);
  font-size: 1rem; outline: none; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none;
}
.field input::placeholder { color: #9aa3a8; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 0.75rem; }
.field input:focus, .field select:focus { border-color: var(--mustard); box-shadow: 0 0 0 0.1875rem rgba(220,165,77,.3); }
.field.invalid input, .field.invalid select { border-color: var(--err); }
.field-err { display: block; font-size: 0.75rem; color: var(--err); margin-top: 0.3125rem; }
.field-group { margin: 1.5rem 0 0.625rem; padding-top: 1.125rem; border-top: 1px dashed var(--line); font-size: 0.8438rem; font-weight: 700; }

.doc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.125rem 1rem; font-size: 0.8438rem; color: var(--ink-2); max-height: 52vh; overflow: auto; -webkit-overflow-scrolling: touch; }
.doc p { margin: 0 0 0.75rem; }
.doc h4 { margin: 1.125rem 0 0.5rem; font-size: 0.875rem; color: var(--ink); }
.doc-head { font-family: var(--head); font-weight: 600; color: var(--mustard); letter-spacing: .02em; }
.doc-list { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.625rem; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.7812rem; margin-bottom: 0.75rem; }
.doc-table th, .doc-table td { border: 1px solid var(--line); padding: 0.5rem; vertical-align: top; text-align: left; }
.doc-table th { background: rgba(255,255,255,.07); width: 36%; font-weight: 600; color: var(--ink); }

.check, .radio { display: flex; gap: 0.625rem; align-items: flex-start; cursor: pointer; }
.check { margin: 1rem 0 0; padding: 0.875rem; border-radius: 0.75rem; background: var(--card); border: 1px solid var(--line); font-size: 0.875rem; font-weight: 500; }
.check input, .radio input { width: 1.25rem; height: 1.25rem; margin: 1px 0 0; accent-color: var(--mustard); flex: none; }
.q { margin: 1.125rem 0 0.625rem; font-size: 0.875rem; font-weight: 600; }
.radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.radio { padding: 0.8125rem 0.875rem; border-radius: 0.75rem; background: var(--card); border: 1px solid var(--line); font-size: 0.875rem; font-weight: 500; align-items: center; }
.radio:has(input:checked) { border-color: var(--mustard); background: rgba(220,165,77,.12); }
.warn { margin: 0.625rem 0 0; font-size: 0.7812rem; color: var(--err); }
.step-actions { display: flex; gap: 0.5rem; margin-top: 1.625rem; }
.step-actions .btn { flex: 1; }
.step-actions .btn-ghost { flex: 0 0 5.75rem; }

.summary { margin: 0 0 1.125rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.375rem 1rem; font-size: 0.8438rem; }
.summary > div { display: grid; grid-template-columns: 5.125rem 1fr; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.summary > div:last-child { border-bottom: 0; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 500; }

.sign { position: relative; margin-bottom: 0.875rem; }
.sign-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.375rem; font-size: 0.8438rem; }
/* 서명칸은 흰 바탕 (검은 서명이 잘 보이도록) */
.sign-pad { display: block; width: 100%; height: 9.375rem; border-radius: 0.75rem; border: 2px solid transparent; background: #fff; touch-action: none; cursor: crosshair; }
.sign.invalid .sign-pad { border-color: var(--err); }
.sign-ph { position: absolute; left: 0; right: 0; top: 50%; margin-top: 0.75rem; text-align: center; font-size: 0.8125rem; color: #a3abb0; pointer-events: none; }
.sign.signed .sign-ph { display: none; }

.dialog { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.5rem; background: rgba(0,15,22,.7); }
.dialog[hidden] { display: none; }
.dialog-panel { width: 100%; max-width: 22.5rem; background: var(--card-solid); border: 1px solid var(--line); border-radius: 1rem; padding: 1.875rem 1.375rem 1.375rem; text-align: center; animation: pageIn .3s ease both; overflow: hidden; position: relative; }
.dialog-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.25rem; background: linear-gradient(90deg, var(--green) 0 25%, var(--blue) 25% 50%, var(--mustard) 50% 75%, var(--red) 75%); }
.dialog-panel h3 { margin: 0.875rem 0 0.375rem; font-size: 1.1875rem; }
.dialog-panel p { margin: 0; color: var(--ink-2); font-size: 0.875rem; }
.dialog-panel .btn-block { margin-top: 1.375rem; }
.done-mark { width: 3.375rem; height: 3.375rem; border-radius: 50%; background: var(--green); display: inline-grid; place-items: center; }
.done-mark svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.receipt { margin-top: 1rem !important; padding: 0.625rem; border-radius: 0.625rem; background: rgba(255,255,255,.07); font-size: 0.8125rem !important; }
.receipt b { font-family: var(--head); font-weight: 600; letter-spacing: .06em; color: var(--mustard); margin-left: 0.375rem; }

/* ===== Course ===== */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.125rem; }
.stats div { background: var(--green); color: #fff; border-radius: var(--radius); padding: 0.875rem 1rem; }
.stats div:last-child { background: var(--blue); }
.stats span { display: block; font-size: 0.75rem; opacity: .85; }
.stats b { font-family: var(--head); font-weight: 400; font-size: 1.625rem; }
.stats small { font-size: 0.8125rem; margin: 0 0.1875rem 0 0.125rem; opacity: .85; }
.route-od { margin: 0 0 0.875rem; font-weight: 600; font-size: 0.875rem; line-height: 2; }
.route-od i { font-style: normal; color: var(--mustard); margin: 0 0.25rem; }
.tag { display: inline-block; font-size: 0.6875rem; font-weight: 600; color: #fff; background: var(--green); border-radius: 0.25rem; padding: 0 0.375rem; margin-right: 0.3125rem; line-height: 1.1875rem; vertical-align: 1px; }
.tag-blue { background: var(--blue); }
.map-figure { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: #a7d3f2; }
.course-svg { display: block; width: 100%; height: auto; }
.course-svg .leg path { fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.course-svg .leg-1 path { stroke: var(--green); }
.course-svg .leg-2 path { stroke: var(--blue); }
.course-svg .leg-3 path { stroke: var(--mustard); }
.course-svg .leg-4 path { stroke: var(--red); }
.course-svg .pin circle { fill: #fff; stroke: var(--navy); stroke-width: 7; }
.course-svg .pin.start circle { fill: var(--navy); stroke: #fff; }
.course-svg .pin.end circle { fill: var(--red); stroke: #fff; }
.course-svg .pin text { font-family: var(--kr); font-size: 34px; font-weight: 700; text-anchor: middle; fill: var(--navy); paint-order: stroke; stroke: #fff; stroke-width: 9px; stroke-linejoin: round; }

.legs { display: grid; gap: 0.75rem; }
.leg-card { --c: var(--green); position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.875rem 1rem 1rem 1.25rem; overflow: hidden; }
.leg-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.3125rem; background: var(--c); }
.leg-card.leg-2 { --c: var(--blue); }
.leg-card.leg-3 { --c: var(--mustard); }
.leg-card.leg-4 { --c: var(--red); }
.leg-top { display: flex; justify-content: space-between; align-items: center; }
.leg-no { display: inline-block; padding: 0 0.5rem; border-radius: 0.25rem; background: var(--c); color: #fff; font-family: var(--head); font-weight: 600; font-size: 0.6875rem; letter-spacing: .12em; line-height: 1.375rem; text-transform: uppercase; }
.leg-card.leg-3 .leg-no { color: var(--navy); }
.leg-meta { font-family: var(--head); font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.leg-title { margin: 0.5rem 0 0.25rem; font-size: 1rem; line-height: 1.4; }
.leg-title i { font-style: normal; color: var(--mustard); }
.leg-via { margin: 0; font-size: 0.75rem; color: var(--muted); }
.leg-desc { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--ink-2); }
.leg-swap { display: inline-block; margin: 0.625rem 0 0; padding: 0.125rem 0.5rem; border-radius: 0.25rem; border: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; color: var(--ink); }
.leg-card .nav-btns { margin-top: 0.75rem; }

.callout { margin-top: 1rem; padding: 1rem; border-radius: var(--radius); background: rgba(220,165,77,.12); border: 1px solid rgba(220,165,77,.4); font-size: 0.8438rem; color: var(--ink-2); }
.callout > b { display: block; color: var(--mustard); margin-bottom: 0.25rem; }
.callout ul { margin: 0.625rem 0 0; padding-left: 1.125rem; }
.callout li b { color: var(--ink); }
.nav-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 1.125rem; }
.nav-btns .btn { font-size: 0.8125rem; min-height: 2.75rem; padding: 0 0.5rem; }

/* ===== Venue ===== */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 0.625rem; padding: 0.25rem; margin-bottom: 1.25rem; }
.seg-4 { grid-template-columns: repeat(4, 1fr); }
.seg button { border: 0; background: transparent; border-radius: 0.4375rem; padding: 0.5rem 0; font-family: var(--head); font-size: 0.875rem; font-weight: 600; color: #fff; cursor: pointer; transition: background .2s, color .2s; line-height: 1.35; }
.seg button small { display: block; font-size: 0.6562rem; font-weight: 400; color: var(--muted); }
.seg button.is-active { background: var(--mustard); color: var(--navy); }
.seg button.is-active small { color: rgba(0,47,67,.75); }
.venue { display: none; }
.venue.is-active { display: block; animation: pageIn .35s ease both; }
.spot + .spot { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.gallery { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1.25rem; padding: 0 1.25rem; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery img { flex: 0 0 86%; aspect-ratio: 16/10; object-fit: cover; border-radius: 0.5rem; scroll-snap-align: center; }
.venue-name { margin: 1.125rem 0 0.875rem; font-size: 1.1875rem; line-height: 1.35; }
.venue-name small { display: block; font-size: 0.8125rem; color: var(--mustard); font-weight: 600; }
.venue-name .tag { vertical-align: 3px; }
.copy { margin-left: 0.25rem; font-size: 0.6875rem; padding: 1px 0.4375rem; border-radius: 0.3125rem; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; cursor: pointer; vertical-align: 1px; }
.wide { width: 100%; border-radius: 0.5rem; margin-top: 0.25rem; aspect-ratio: 16/9; object-fit: cover; }

/* ===== Emergency contacts ===== */
.contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.contact { display: flex; align-items: center; gap: 0.875rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; transition: border-color .2s, transform .15s; }
.contact:active { transform: scale(.98); border-color: var(--mustard); }
.contact-info { flex: 1; min-width: 0; }
.contact-info b { display: block; font-size: 1rem; }
.contact-info b small { font-size: 0.8125rem; font-weight: 400; color: var(--muted); margin-left: 0.25rem; }
.contact-info span { display: block; margin-top: 0.125rem; font-family: var(--head); font-size: 0.9375rem; letter-spacing: .03em; color: var(--ink-2); }
.call { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--mustard); display: grid; place-items: center; }
.call svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linejoin: round; }

.toast { position: fixed; left: 50%; bottom: calc(1.75rem + env(safe-area-inset-bottom)); transform: translate(-50%, 1.25rem); background: rgba(255,255,255,.95); color: var(--navy); font-weight: 600; font-size: 0.8438rem; padding: 0.625rem 1rem; border-radius: 1.375rem; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 60; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 641px) {
  .app { box-shadow: 0 0 3.75rem rgba(0,0,0,.6); }
}