.seoul-page {
  --seoul-ink: var(--ink);
  --seoul-accent: oklch(.52 .17 31);
  --seoul-blue: oklch(.47 .15 258);
  --seoul-amber: oklch(.76 .15 82);
  --seoul-line: color-mix(in oklch, var(--ink) 24%, transparent);
  --seoul-soft: color-mix(in oklch, var(--forest, var(--ink)) 8%, var(--paper));
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(30px, 6vw, 82px) 24px 92px;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: normal;
}
.seoul-page .nowrap { white-space: nowrap; }
.seoul-page h1, .seoul-page h2, .seoul-page h3 { color: var(--seoul-ink); text-wrap: balance; }
.seoul-page p, .seoul-page li, .seoul-page dd { text-wrap: pretty; }
.seoul-kicker, .section-label { margin: 0; color: var(--seoul-ink); font-size: .8rem; font-weight: 850; }
.seoul-hero { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.seoul-hero-copy { padding-top: clamp(0px, 3vw, 36px); }
.seoul-hero h1 { margin: 11px 0 0; font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -.04em; line-height: .98; }
.seoul-lead { max-width: 34ch; margin: 26px 0 0; color: var(--ink); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.6; }
.seoul-checked { max-width: 60ch; margin: 16px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.seoul-quick-nav { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 22px; }
.seoul-quick-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--seoul-ink); font-size: .78rem; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.seoul-planner { display: grid; gap: 13px; scroll-margin-top: 90px; margin-top: 24px; padding-top: 25px; box-shadow: inset 0 3px var(--seoul-ink); }
.planner-field { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 12px; }
.planner-field label, .planner-moods legend { color: var(--seoul-ink); font-size: .84rem; font-weight: 800; }
.planner-field input, .planner-field select { width: 100%; min-height: 46px; border: 1px solid var(--seoul-line); border-radius: 7px; padding: 0 12px; background: var(--panel); color: var(--ink); font: inherit; }
.planner-moods { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0; padding: 0; border: 0; }
.planner-moods legend { width: 100%; margin-bottom: 3px; }
.planner-moods label { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--seoul-line); border-radius: 999px; padding: 7px 12px; color: var(--ink); font-size: .82rem; cursor: pointer; }
.planner-moods input { accent-color: var(--seoul-accent); }
.seoul-submit { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border: 0; border-radius: 8px; padding: 0 18px; background: var(--seoul-accent); color: white; font: inherit; font-weight: 850; cursor: pointer; }
.seoul-submit:hover { filter: brightness(.9); }
.seoul-page a:focus-visible, .seoul-submit:focus-visible, .planner-field input:focus-visible, .planner-field select:focus-visible, .planner-moods label:has(input:focus-visible) { outline: 3px solid color-mix(in oklch, var(--seoul-blue) 55%, transparent); outline-offset: 3px; }

.seoul-route-map { margin: 0; padding: clamp(18px, 3vw, 34px); border: 1px solid var(--seoul-line); background: var(--seoul-soft); }
.seoul-route-map h2 { margin: 5px 0 0; font-size: clamp(1.55rem, 3vw, 2.5rem); line-height: 1.14; }
.seoul-route-map figcaption > p:last-child { max-width: 52ch; margin: 9px 0 0; color: var(--ink); font-size: .9rem; line-height: 1.6; }
.map-canvas { position: relative; min-height: 490px; margin-top: 22px; overflow: hidden; background: color-mix(in oklch, var(--paper) 92%, var(--forest, var(--ink))); }
.map-canvas::before { position: absolute; inset: 10% 7%; border: 1px solid var(--seoul-line); content: ''; transform: rotate(-4deg); opacity: .65; }
.map-canvas svg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.map-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 13; }
.line-airport { stroke: var(--seoul-ink); stroke-dasharray: 16 12; }.line-blue { stroke: var(--seoul-blue); }.line-coral { stroke: var(--seoul-accent); }.line-amber { stroke: var(--seoul-amber); }.line-forest { stroke: var(--seoul-ink); }
.map-nodes circle { fill: var(--panel); stroke: var(--seoul-ink); stroke-width: 6; }
.map-river { position: absolute; z-index: 1; top: 54%; left: -10%; width: 120%; height: 110px; box-shadow: inset 0 13px oklch(.68 .09 232 / .45), inset 0 -13px oklch(.68 .09 232 / .45); transform: rotate(9deg); }
.map-district { position: absolute; z-index: 1; color: var(--muted); font-size: .8rem; font-weight: 800; }.district-hongdae { left: 36%; top: 20%; }.district-seongsu { right: 12%; top: 13%; }.district-euljiro { right: 28%; top: 58%; }.district-myeongdong { left: 47%; bottom: 7%; }
.map-stop { position: absolute; z-index: 3; display: grid; align-content: center; gap: 1px; min-width: 94px; min-height: 48px; border: 1px solid var(--seoul-ink); border-radius: 7px; padding: 7px 9px; background: var(--panel); color: var(--seoul-ink); line-height: 1.15; transition: transform .18s ease-out, background-color .18s ease-out, color .18s ease-out; }
.map-stop b { font-size: .86rem; }.map-stop small { font-size: .68rem; }.map-stop:hover, .map-stop.is-active { background: var(--seoul-ink); color: var(--paper); transform: translateY(-3px); }
.stop-airport { left: 2%; top: 26%; }.stop-hongdae { left: 33%; top: 39%; }.stop-seongsu { right: 2%; top: 17%; }.stop-euljiro { right: 20%; top: 52%; }.stop-myeongdong { left: 43%; bottom: 9%; }
.map-caption { margin: 12px 0 0; color: var(--muted); font-size: .76rem; }

.plan-output { display: grid; grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr); gap: 32px 48px; scroll-margin-top: 90px; margin-top: clamp(64px, 8vw, 110px); padding: 28px 0; border-top: 5px solid var(--seoul-accent); border-bottom: 1px solid var(--seoul-line); }
.plan-output-heading > p { margin: 0; color: var(--seoul-accent); font-size: .82rem; font-weight: 850; }
.plan-output h2 { margin: 8px 0 0; font-size: clamp(1.8rem, 3.5vw, 3.3rem); letter-spacing: -.03em; line-height: 1.12; }
.plan-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.plan-tags span { border: 1px solid var(--seoul-line); border-radius: 999px; padding: 6px 10px; color: var(--ink); font-size: .75rem; font-weight: 750; }
.plan-airport, .plan-notice { max-width: 70ch; margin: 0; color: var(--ink); line-height: 1.7; }
.plan-airport { padding: 14px 16px; background: var(--seoul-soft); font-weight: 650; }
.plan-notice { margin-top: 18px; font-size: .88rem; }
.seoul-timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--seoul-line); }
.seoul-timeline li { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 12px; padding: 20px 20px 22px 0; border-bottom: 1px solid var(--seoul-line); }
.seoul-timeline li:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--seoul-line); }
.seoul-timeline time { color: var(--seoul-accent); font-variant-numeric: tabular-nums; font-weight: 850; }
.seoul-timeline h3 { margin: 0; font-size: 1.05rem; }.seoul-timeline p { margin: 7px 0; color: var(--ink); font-size: .88rem; line-height: 1.65; }
.seoul-timeline a, .course-card a, .route-links a, .inline-links a, .help-links a, .source-note a { display: inline-flex; align-items: center; min-height: 40px; color: var(--seoul-ink); font-size: .8rem; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }

.week-now, .seoul-readiness, .airport-guide, .transit-guide, .seoul-courses, .seoul-route-details, .seoul-help, .seoul-note { scroll-margin-top: 90px; margin-top: clamp(76px, 10vw, 148px); }
.week-now { display: grid; grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr); gap: 32px 48px; padding: 28px 0; border-top: 3px solid var(--seoul-ink); border-bottom: 1px solid var(--seoul-line); }
.week-now h2 { margin: 8px 0 0; font-size: clamp(1.65rem, 3vw, 2.7rem); letter-spacing: -.025em; line-height: 1.16; }
.week-now-body p { max-width: 72ch; margin: 0 0 12px; color: var(--ink); line-height: 1.7; }
.week-now-body strong { color: var(--seoul-accent); }
.week-now-body a { display: inline-flex; align-items: center; min-height: 44px; color: var(--seoul-ink); font-size: .82rem; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.seoul-readiness > header, .airport-guide > header, .transit-guide > header, .seoul-courses > header, .seoul-route-details > header, .seoul-help > header { display: grid; grid-template-columns: minmax(180px, .58fr) minmax(0, 1.42fr); gap: 10px 42px; padding-top: 26px; border-top: 3px solid var(--seoul-ink); }
.seoul-readiness h2, .airport-guide h2, .transit-guide h2, .seoul-courses h2, .seoul-route-details h2, .seoul-help h2, .seoul-note h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 3rem); letter-spacing: -.025em; line-height: 1.16; }
.seoul-readiness header > p:last-child, .airport-guide header > p:last-child, .seoul-courses header > p:last-child, .seoul-route-details header > p:last-child { grid-column: 2; max-width: 65ch; margin: 4px 0 0; color: var(--ink); line-height: 1.65; }
.readiness-steps { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--seoul-line); }
.readiness-steps > li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--seoul-line); }
.readiness-steps > li > span { color: var(--seoul-accent); font-size: 1.3rem; font-weight: 900; }
.readiness-steps h3 { margin: 0; font-size: 1.16rem; }.readiness-steps p { max-width: 76ch; margin: 7px 0 0; color: var(--ink); line-height: 1.7; }
.inline-links, .route-links, .help-links { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 10px; }

.airport-decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--seoul-line); }
.airport-decisions article { padding: 22px 24px 24px 0; border-bottom: 1px solid var(--seoul-line); }
.airport-decisions article:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--seoul-line); }
.airport-decisions h3 { margin: 0; font-size: 1.12rem; }.airport-decisions p { margin: 8px 0 0; color: var(--ink); line-height: 1.7; }
.airport-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 22px; background: var(--seoul-line); }
.airport-actions a { display: grid; align-content: center; min-height: 92px; padding: 16px; background: var(--panel); color: var(--seoul-ink); font-weight: 850; text-decoration: none; }
.airport-actions a:hover { background: var(--seoul-soft); }.airport-actions span { color: var(--muted); font-size: .72rem; font-weight: 700; }

.transit-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; border-top: 1px solid var(--seoul-line); }
.transit-choice > div { padding: 22px 24px 24px 0; border-bottom: 1px solid var(--seoul-line); }.transit-choice > div + div { padding-left: 24px; border-left: 1px solid var(--seoul-line); }
.transit-choice h3 { margin: 0; font-size: 1.1rem; }.transit-choice p { margin: 8px 0 0; color: var(--ink); line-height: 1.7; }
.source-note { max-width: 76ch; margin: 16px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }

.seoul-courses { padding-top: 0; border-top: 0; }
.course-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--seoul-line); }
.course-card { min-height: 0; padding: 24px 28px 26px 0; border-bottom: 1px solid var(--seoul-line); }
.course-card:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--seoul-line); }
.course-card > p:first-child { margin: 0; color: var(--seoul-accent); font-size: .78rem; font-weight: 850; }.course-card h3 { margin: 7px 0 0; font-size: 1.2rem; }
.course-card ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: course-stop; }
.course-card li { color: var(--seoul-ink); font-size: .78rem; font-weight: 750; counter-increment: course-stop; }.course-card li::before { margin-right: 4px; color: var(--seoul-accent); content: counter(course-stop) '.'; }
.course-card > p:not(:first-child) { max-width: 58ch; margin: 12px 0 0; color: var(--ink); font-size: .88rem; line-height: 1.65; }
.live-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; margin-top: 28px; padding: 26px 0; border-bottom: 1px solid var(--seoul-ink); }
.live-guide h3 { max-width: 38ch; margin: 0; font-size: 1.35rem; }.live-guide p { max-width: 65ch; margin: 8px 0 0; color: var(--ink); line-height: 1.65; }.live-guide .seoul-submit { min-width: 230px; text-decoration: none; }

.route-detail { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 4vw, 52px); margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--seoul-line); }
.route-detail.is-selected { border-top-color: var(--seoul-accent); }.route-detail.is-selected h3 { color: var(--seoul-accent); }
.route-detail figure { margin: 0; }.route-detail figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.route-detail h3 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 2.15rem); line-height: 1.18; }.route-summary { max-width: 62ch; margin: 12px 0 0; color: var(--ink); line-height: 1.65; }
.route-steps { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--seoul-line); }.route-steps li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--seoul-line); }
.route-steps span { color: var(--seoul-accent); font-size: .8rem; font-variant-numeric: tabular-nums; font-weight: 850; }.route-steps strong { color: var(--seoul-ink); font-size: .93rem; }.route-steps p { margin: 3px 0 0; color: var(--ink); font-size: .84rem; line-height: 1.6; }

.help-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 30px 0 0; border-top: 1px solid var(--seoul-line); }
.help-numbers > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 22px 22px 22px 0; border-bottom: 1px solid var(--seoul-line); }.help-numbers > div:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--seoul-line); }
.help-numbers dt { color: var(--seoul-accent); font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 900; font-variant-numeric: tabular-nums; }.help-numbers dd { display: grid; gap: 3px; margin: 0; }.help-numbers dd span { color: var(--ink); font-size: .85rem; }
.seoul-note { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); gap: 34px; padding: 30px 0; border-top: 3px solid var(--seoul-accent); border-bottom: 1px solid var(--seoul-ink); }
.seoul-note ol { margin: 0; padding-left: 22px; }.seoul-note li { padding: 4px 0; color: var(--ink); line-height: 1.65; }

@media (max-width: 900px) {
  .seoul-hero, .plan-output, .week-now, .seoul-readiness > header, .airport-guide > header, .transit-guide > header, .seoul-courses > header, .seoul-route-details > header, .seoul-help > header, .seoul-note, .route-detail { grid-template-columns: 1fr; }
  .seoul-hero { gap: 48px; }.map-canvas { min-height: 410px; }
  .seoul-readiness header > p:last-child, .airport-guide header > p:last-child, .seoul-courses header > p:last-child, .seoul-route-details header > p:last-child { grid-column: 1; }
  .transit-choice { grid-template-columns: 1fr; }.transit-choice > div, .transit-choice > div + div { padding: 20px 0; border-left: 0; }
  .live-guide { grid-template-columns: 1fr; }.live-guide .seoul-submit { width: fit-content; }
  .help-numbers > div { grid-template-columns: 120px minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .seoul-page { padding-inline: 16px; }.planner-field { grid-template-columns: 1fr; gap: 5px; }
  .map-canvas { min-height: 355px; }.map-stop { min-width: 72px; padding: 5px 7px; }.map-stop small { display: none; }.stop-airport { left: 0; }.stop-hongdae { left: 27%; }.stop-seongsu { right: 0; }.stop-euljiro { right: 14%; }.stop-myeongdong { left: 39%; }
  .seoul-timeline, .airport-decisions, .airport-actions, .course-grid, .help-numbers { grid-template-columns: 1fr; }
  .seoul-timeline li, .seoul-timeline li:nth-child(even), .airport-decisions article, .airport-decisions article:nth-child(even), .course-card, .course-card:nth-child(even), .help-numbers > div, .help-numbers > div:nth-child(even) { padding: 20px 0; border-left: 0; }
  .airport-actions { gap: 1px; }.help-numbers > div { grid-template-columns: 1fr; gap: 5px; }
  .live-guide .seoul-submit { width: 100%; }.route-steps li { grid-template-columns: 58px minmax(0, 1fr); }
}
@media (prefers-color-scheme: dark) {
  .seoul-page { --seoul-accent: oklch(.74 .14 31); --seoul-blue: oklch(.72 .12 258); --seoul-amber: oklch(.78 .12 82); }
  .seoul-submit { color: oklch(.16 .03 31); }.map-stop:hover, .map-stop.is-active { color: var(--paper); }
}
@media (prefers-reduced-motion: reduce) { .map-stop { transition: none; } }
@media print { .seoul-planner, .seoul-quick-nav { display: none; }.seoul-page { max-width: none; padding: 0; }.seoul-route-map { break-inside: avoid; } }