/* Shared type, spacing, and touch targets for the guide and standalone map. */
@font-face { font-family: Galmuri; src: url('assets/Galmuri11.woff2') format('woff2'); font-display: swap; font-weight: 100 900; }
:root {
  --sans: 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, -apple-system, sans-serif;
  --pixel: Galmuri, var(--sans);
  --ui-body: 15px;
  --ui-label: 14px;
  --ui-small: 12px;
  --ui-leading: 1.8;
  --ui-sidebar: 248px;
  --ui-gutter: 36px;
  --ui-gap: 24px;
  --ui-touch: 48px;
}
body { font-family: var(--sans); font-size: var(--ui-body); line-height: var(--ui-leading); }
button, input, textarea, select { font-family: var(--sans); }
h1, h2, h3 { word-break: keep-all; overflow-wrap: anywhere; }
h1 { font-size: 32px; line-height: 1.5; }
h2 { font-size: 24px; line-height: 1.5; }
h3 { font-size: 20px; line-height: 1.6; }
p { overflow-wrap: anywhere; }
.button, .hero-actions .button, .reflection-actions .button {
  min-height: var(--ui-touch); padding: 12px 18px; font: 700 var(--ui-label)/1.5 var(--sans);
}
.button svg { width: 18px; height: 18px; }
.button > span:last-child { margin-left: 3px; }
.text-button, .text-button.danger, .completion-actions .text-button, .mission-form-actions .text-button, .undo-stamp {
  min-height: 44px; font: 500 var(--ui-label)/1.6 var(--sans); padding: 10px 0;
}
.icon-button { width: 48px; height: 48px; flex-shrink: 0; }
.section-kicker, .passport-head .section-kicker, .eyebrow, .window-bar, .card-bar, .dialog-top { font-size: var(--ui-small); }
.section-kicker { line-height: 1.7; letter-spacing: 1.2px; }

/* Navigation stays readable, including on shorter laptop screens. */
.sidebar { width: var(--ui-sidebar); padding: 28px 20px 22px; overscroll-behavior: contain; }
.brand { font-size: 20px; gap: 10px; padding: 0 4px; }
.brand > svg { width: 29px; height: 29px; }
.brand small { font-size: 12px; letter-spacing: .3px; }
.sidebar-label { font-size: 12px; margin: 30px 12px 12px; }
.side-nav a { min-height: 48px; font-size: 14px; gap: 11px; padding: 11px 12px; }
.nav-count, .mini-pass b { font-size: 12px; }
.resource-links a { font-size: 14px; padding: 11px 10px; }
.resources-label { margin: 0 12px 12px; }
.resource-hint, .mini-pass, .mini-pass p, .sidebar-credit, .sidebar-credit small { font-size: 12px; line-height: 1.7; }
.sidebar-credit small { letter-spacing: .3px; margin-left: 0; }
.sidebar-bottom { padding-top: 24px; }
.app-shell { margin-left: var(--ui-sidebar); }
.topbar { height: 80px; padding: 0 var(--ui-gutter); gap: 20px; }
.breadcrumb { font-size: 12px; letter-spacing: .5px; }
.breadcrumb b, .header-record, .header-record span:first-of-type { font-size: 14px; }
.header-record { min-height: 44px; flex-shrink: 0; }
.record-counter { font-size: 12px; }
main { padding: 0 var(--ui-gutter); }
.toast { left: calc(50% + var(--ui-sidebar) / 2); font-size: 14px; max-width: min(520px, calc(100% - 40px)); }

/* Intro and exploration cards use the same rhythm as the inner pages. */
.hero { min-height: 500px; gap: 24px; }
.hero-copy { padding: 48px 0; }
.hero h1 { font-size: clamp(32px, 3vw, 48px); line-height: 1.55; white-space: normal; letter-spacing: -1.2px; }
.hero-copy > p { font-size: 16px; line-height: 1.85; margin-bottom: 28px; }
.eyebrow { margin-bottom: 24px; }
.hero-actions, .hero-meta { flex-wrap: wrap; }
.hero-actions { gap: 12px; }
.hero-meta { font-size: 12px; gap: 10px 18px; margin-top: 28px; max-width: none; }
.world-label, .art-caption span, .art-caption b, .art-footnote { font-size: 12px; }
.world-label { letter-spacing: .6px; }
.art-caption { max-width: 90%; padding: 12px; }
.journey-strip { gap: 16px; padding: 18px 20px; font-size: 14px; flex-wrap: wrap; }
.journey-label { font-size: 12px; letter-spacing: .7px; padding-right: 18px; }
.journey-strip > div, .journey-strip > div b { font-size: 14px; }
.places-section { padding-top: 48px; }
.section-heading { align-items: center; flex-wrap: wrap; gap: 16px; }
.section-heading h2 { font-size: 24px; line-height: 1.6; }
.section-side, .filter-count { font-size: 12px; }
.explore-toolbar { gap: 16px; margin: 24px 0; }
.filters { gap: 8px; justify-content: flex-start; }
.filters button { min-height: 44px; font-size: 14px; padding: 10px 14px; }
.filters button > span { font-size: 12px; }
.place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-gap); }
.place-card { min-width: 0; }
.card-bar { min-height: 36px; height: auto; padding: 8px 14px; letter-spacing: .4px; }
.card-bar > span:last-child { font-size: 12px; }
.card-photo { height: 190px; }
.card-content { padding: 24px 22px 0; }
.card-tags { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.card-tag, .card-subtitle { font-size: 12px; line-height: 1.6; }
.place-card h3 { font: 700 20px/1.6 var(--sans); letter-spacing: -.4px; margin-bottom: 12px; }
.place-name { min-height: 32px; }
.place-name-blank { display: inline-block; width: min(180px, 100%); min-height: 27px; color: transparent; border-bottom: 2px dashed #a38cbb; vertical-align: bottom; }
.place-card.is-discovered .place-name { color: var(--mint); }
.place-card p { font-size: 15px; line-height: 1.85; margin-bottom: 22px; }
.card-bottom { min-height: 60px; flex-wrap: wrap; gap: 4px 12px; padding: 5px 0; font-size: 12px; }
.card-open { font: 600 14px/1.6 var(--sans); min-height: 44px; padding: 10px 0; margin-left: auto; }
.card-open::after { inset-block-start: 36px; }
.mission-indicator { font-size: 12px; }
.field-tip { padding: 24px; gap: 18px; }
.field-tip b { font-size: 16px; }
.field-tip p { font-size: 15px; line-height: 1.8; }
.field-tip > a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
footer p, footer p > span, footer > a:last-child { font-size: 12px; line-height: 1.8; }
.footer-brand { font-size: 15px; }
footer > a:last-child { min-height: 44px; display: inline-flex; align-items: center; }

/* Missions, answers, and saved notes share a readable form scale. */
.inner-view { padding-top: 44px; }
.page-heading { margin-bottom: 32px; }
.page-heading h1, .reflection-locked h1 { font-size: 32px; line-height: 1.6; margin: 10px 0 16px; }
.page-heading p, .mission-goal p, .goal-message, .photo-mission-body > p,
.mission-row p, .record-item > p, .empty-state p, .confirm-body p { font-size: 15px; line-height: 1.85; }
.heading-with-action { align-items: center; flex-wrap: wrap; }
.mission-goal { padding: 24px; gap: 16px 24px; }
.mission-goal h2, .mission-goal h3 { font: 700 20px/1.6 var(--sans); }
.goal-numbers { font: 700 28px/1.4 var(--sans); }
.goal-numbers small, .goal-numbers span { font: 12px/1.7 var(--sans); }
#mission-list { gap: 24px; }
.photo-mission-bar { min-height: 52px; padding: 12px 20px; flex-wrap: wrap; }
.photo-mission-bar h2 { font: 700 20px/1.4 var(--sans); }
.photo-mission-bar .mission-status, .mission-kind, .mission-status, .mission-type-badge { font-size: 12px; }
.photo-mission-body { padding: 24px; }
.photo-mission-body > label, .mission-field > label, .mission-field > legend, .reflection-fields label { font-size: 15px; line-height: 1.8; }
.photo-mission-body > .button { min-height: 48px; }
.mission-form h3, .worksheet-form > h3, .certification-sheet > h3, .observation h3 { font: 700 20px/1.6 var(--sans); }
.mission-form > p, .certification-sheet > p { font-size: 15px; line-height: 1.85; }
.mission-field input:not([type='checkbox']), .mission-field textarea, .mission-name-input,
.reflection-fields textarea, .mission-optional textarea, textarea { font-size: 16px; line-height: 1.8; padding: 12px 14px; }
.mission-field input:not([type='checkbox']), .mission-name-input { min-height: 50px; }
.mission-field textarea, .reflection-fields textarea { min-height: 144px; }
.inline-blank input { min-height: 46px; font-size: 16px; }
.inline-blank input::placeholder { font-size: 14px; }
.worksheet-place-name > label { font-size: 15px; }
.worksheet-form > .worksheet-introduction, .worksheet-introduction, .worksheet-passage { font-size: 16px; line-height: 2; }
.field-hint, .field-feedback, .mission-mini-fields, .note-meta, .reflection-status,
.dialog-source, .small-note, .record-answer > span, .records-end { font-size: 12px; line-height: 1.8; }
.mission-field > label > span, .record-item dt { font-size: 12px; }
.mission-optional label { font-size: 15px; }
.field-hint summary { min-height: 44px; padding: 11px 0; }
.mission-feedback, #mission-form-feedback, .mission-confirm, .mission-completion-note { font-size: 14px; line-height: 1.85; }
.mission-optional summary, .quiz summary { min-height: 44px; font-size: 14px; line-height: 1.8; }
.mission-confirm { padding: 18px; gap: 12px; }
.mission-confirm input[type='checkbox'], .check-item input { width: 20px; height: 20px; }
.storage-notice { font-size: 14px; line-height: 1.85; padding: 20px; }
.record-item { padding: 26px; }
.record-item > div { align-items: flex-start; flex-wrap: wrap; }
.record-item h2 { font: 700 24px/1.5 var(--sans); margin-bottom: 10px; }
.record-state { font-size: 12px; padding-top: 4px; }
.record-item blockquote { font-size: 15px; line-height: 1.9; }
.empty-state h2, .guide-panel h2, .reflection-panel h2 { font-size: 24px; line-height: 1.6; }

/* Stamps, guidance, and the final reflection. */
.passport-head { padding: 30px; flex-wrap: wrap; }
.passport-head h2 { font: 700 24px/1.6 var(--sans); max-width: none; }
.large-count { font: 700 28px/1.5 var(--sans); }
.stamp-grid { padding: 0 30px 30px; gap: 20px; }
.stamp-cell { min-height: 186px; padding: 24px 14px; }
.stamp-cell b { font: 700 16px/1.7 var(--sans); }
.stamp-cell small, .stamp-cell p, .stamp-cell .stamp-progress, .passport-foot { font-size: 12px; line-height: 1.8; }
.passport-foot a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.completion-banner { flex-wrap: wrap; padding: 26px; }
.completion-banner > div:not(.completion-actions) { flex: 1 1 240px; }
.completion-banner h2 { font-size: 24px; line-height: 1.6; }
.completion-banner p { font-size: 15px; line-height: 1.85; }
.rules-grid { gap: 24px; }
.rules-grid h2 { font: 700 24px/1.5 var(--sans); }
.rules-grid p, .check-item, .source-panel > p, .other-rules, .other-rules p { font-size: 15px; line-height: 1.85; }
.rules-grid article > span, .source-panel > a span { font-size: 12px; }
.guide-panel { padding: 28px; }
.check-item { min-height: 52px; padding: 14px 0; }
.source-panel > a { font-size: 14px; min-height: 48px; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.other-rules summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.summary-entry small, .award-kicker { font-size: 12px; }
.summary-entry > span > span, .summary-pending p, .reflection-locked p, .award-description,
.reflection-panel > p:not(.reflection-status), #view-reflection .reflection-panel > p:not(.reflection-status) { font-size: 15px; line-height: 1.9; }
.summary-entry strong { font-size: 24px; }
.summary-pending a { min-height: 44px; font-size: 14px; }
.award-label, .award-total { font-size: 14px; }
#reflection-award-title { font-size: clamp(32px, 3.3vw, 44px); }
.reflection-panel { padding: 28px; }
.reflection-actions { gap: 16px; }
.legacy-section > h2 { font-size: 20px; }
.legacy-section summary { min-height: 44px; font-size: 14px; }
.legacy-section > p, .legacy-section blockquote, .record-item dd { font-size: 15px; line-height: 1.85; }
dialog { width: min(700px, calc(100% - 32px)); }
.dialog-top { height: 54px; min-height: 54px; }
.dialog-body { padding: 30px; }
.dialog-hero-title > h2 { font-size: 28px; }
.dialog-hero-title > span { font-size: 12px; }
.dialog-description, .detail-copy, .fact-box { font-size: 15px; line-height: 1.85; }
.quiz h3 { font-size: 18px; }
.quiz-options button { font-size: 14px; min-height: 44px; }
.quiz-feedback { font-size: 14px; }
.confirm-body h2 { font-size: 24px; line-height: 1.6; }

/* Map controls keep their own visual language at the shared type scale. */
baekje-map.baekje-map { font-family: var(--sans); font-size: 15px; line-height: 1.8; }
.baekje-map .bm-toolbar { flex-wrap: wrap; padding: 22px; }
.baekje-map .bm-heading h2 { font: 700 24px/1.5 var(--sans); }
.baekje-map .bm-eyebrow, .baekje-map .bm-help, .baekje-map .bm-map-badge,
.baekje-map .bm-selected-type, .baekje-map .bm-zoom-value, .baekje-map .bm-place-chip .bm-chip-number { font-size: 12px; }
.baekje-map .bm-tool, .baekje-map .bm-place-chip { min-height: 44px; font-size: 14px; padding: 10px 12px; }
.baekje-map .bm-fullscreen { width: 44px; padding: 10px; }
.baekje-map .bm-pin { width: 44px; height: 44px; }
.baekje-map .bm-pin-dot { inset: 10px; font-size: 12px; }
.baekje-map .bm-pin-label { font-size: 12px; bottom: 43px; padding: 5px 9px; }
.baekje-map .bm-zoom-controls { width: 52px; }
.baekje-map .bm-zoom-button { width: 42px; height: 44px; }
.baekje-map .bm-help { padding: 12px 20px; flex-wrap: wrap; }
.baekje-map .bm-discovery-hint, .baekje-map .bm-selected-description, .baekje-map .bm-image-error p { font-size: 15px; line-height: 1.8; }
.baekje-map .bm-selected-name { font: 700 20px/1.6 var(--sans); }
.baekje-map .bm-info { flex-wrap: wrap; gap: 16px; }
.baekje-map .bm-mission-button { min-height: 48px; font-size: 14px; padding: 12px 16px; }
.map-page { padding: 32px 36px 24px; }
.map-page h1 { font-size: 32px; line-height: 1.5; }
.map-eyebrow { font-size: 12px; line-height: 1.7; letter-spacing: 1px; }
.map-back { min-height: 48px; display: inline-flex; align-items: center; font-size: 14px; }
.map-intro { font-size: 16px; line-height: 1.85; }
.map-page-footer, .map-page-footer p, .map-page-footer > a:last-child { font-size: 12px; line-height: 1.8; }

/* Adapt the layout before the larger reading size can crowd a column. */
@media (max-width: 1280px) {
  :root { --ui-gutter: 28px; }
  .place-grid, .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-columns { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { text-align: center; padding: 40px 0 12px; }
  .eyebrow, .hero-actions, .hero-meta { justify-content: center; }
  .hero-art { width: 100%; height: 340px; overflow-x: clip; }
  .hero-art > img { height: 370px; width: auto; max-width: 105%; }
  .art-caption { left: 6%; bottom: 35px; }
  .world-label { top: 22px; left: 5%; right: 5%; }
  .art-footnote { bottom: 16px; right: 4%; }
  .heading-with-action { align-items: flex-start; }
  .rules-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  #mission-list { grid-template-columns: minmax(0, 1fr); }
  .card-content { padding: 22px 18px 0; }
  .card-photo { height: 175px; }
  .stamp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-label { width: 100%; max-width: none; border: 0; padding: 0; }
}
@media (min-width: 761px) and (max-height: 850px) {
  .sidebar { padding-top: 20px; }
  .sidebar-label:not(.resources-label) { margin-top: 24px; }
  .sidebar-resources { margin-top: 20px; padding-top: 16px; }
}
@media (max-width: 760px) {
  :root { --ui-gutter: 24px; }
  .app-shell { margin-left: 0; }
  .topbar { height: 72px; padding: 0 24px; gap: 12px; }
  .mobile-brand { font-size: 18px; }
  .header-record, .header-record span:first-of-type { font-size: 12px; }
  .mobile-nav { height: calc(72px + env(safe-area-inset-bottom)); padding-inline: 8px; }
  .mobile-nav > a { font-size: 14px; min-width: 52px; min-height: 56px; gap: 4px; }
  .toast { left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); }
  .inner-view { padding-top: 32px; }
  .page-heading h1, .reflection-locked h1, .map-page h1 { font-size: 28px; }
  .section-heading h2, .record-item h2, .rules-grid h2, .guide-panel h2, .reflection-panel h2,
  .passport-head h2, .completion-banner h2, .empty-state h2, .baekje-map .bm-heading h2 { font-size: 22px; }
  .heading-with-action { gap: 20px; }
  .field-tip { padding: 22px; }
  footer { padding-bottom: 106px; }
  .map-page { padding: 28px 24px 20px; }
  .map-page-header { align-items: flex-start; flex-wrap: wrap; gap: 16px; }
  .map-page-footer { padding-bottom: 0; margin-top: 20px; }
  .baekje-map .bm-mission-button { margin-left: 0; }
}
@media (max-width: 600px) {
  :root { --ui-gutter: 20px; --ui-gap: 24px; }
  .topbar { padding-inline: 20px; }
  .hero { display: grid; }
  .hero h1 { font-size: clamp(28px, 8vw, 36px); letter-spacing: -.8px; }
  .hero-copy { padding-top: 32px; }
  .hero-copy > p { font-size: 15px; }
  .hero-actions .button { padding: 12px 14px; }
  .hero-meta { gap: 8px 14px; }
  .hero-art { height: 290px; overflow: clip; }
  .hero-art > img { height: 315px; max-width: 115%; }
  .world-label, .art-footnote { font-size: 12px; letter-spacing: 0; }
  .art-caption { left: 0; bottom: 25px; max-width: 90%; }
  .journey-strip { gap: 8px 14px; padding: 18px; align-items: flex-start; }
  .journey-strip > div { flex: 1 1 90px; font-size: 14px; }
  .journey-strip > div b { display: block; margin-bottom: 3px; }
  .journey-strip > i { display: none; }
  .places-section { padding-top: 36px; }
  .place-grid { grid-template-columns: minmax(0, 1fr); }
  .filters { gap: 8px; justify-content: flex-start; }
  .filters button { padding: 10px 12px; }
  .card-photo { height: 210px; }
  .card-content, .photo-mission-body { padding: 22px 20px; }
  .card-content { padding-bottom: 0; }
  .photo-mission-bar { padding-inline: 20px; }
  .mission-goal, .record-item, .reflection-panel, .guide-panel, .completion-banner { padding: 22px 20px; }
  .mission-goal { gap: 16px; }
  .summary-entry { padding: 22px 18px; gap: 12px; }
  .summary-entry strong { font-size: 22px; }
  .summary-pending { padding: 22px 18px; }
  .summary-pending a { margin-left: 0; }
  .passport-head { padding: 24px 20px; gap: 16px; }
  .stamp-grid { padding: 0 16px 24px; gap: 12px; }
  .stamp-cell { padding: 20px 10px; min-height: 180px; }
  .stamp-cell b { font-size: 15px; }
  .passport-foot { padding: 18px 20px; }
  .award-hero { padding: 32px 18px; }
  .award-kicker { letter-spacing: .8px; }
  #reflection-award-title { font-size: 30px; }
  .reflection-actions .button { width: 100%; }
  dialog { width: calc(100% - 20px); max-height: 92dvh; }
  .dialog-body, .confirm-body { padding: 22px 20px; }
  .dialog-top { padding-left: 16px; font-size: 12px; letter-spacing: .3px; }
  .dialog-hero-title { left: 20px; right: 20px; }
  .dialog-hero-title > h2 { font-size: 24px; }
  .worksheet-passage, .worksheet-place-name, .certification-sheet { padding: 18px 14px; }
  .inline-blank { width: 135px; }
  .mission-confirm { padding: 16px 14px; }
  .map-page { padding: 24px 20px 20px; }
  .map-brand { gap: 12px; align-items: flex-start; }
  .map-emblem { flex-shrink: 0; width: 42px; height: 44px; }
  .map-page h1 { font-size: 28px; }
  .map-back { padding: 10px 14px; }
  .baekje-map .bm-toolbar { padding: 20px 16px; }
  .baekje-map .bm-tools { flex-wrap: wrap; gap: 8px; }
  .baekje-map .bm-help { padding: 12px 16px; }
  .baekje-map .bm-discovery-hint { padding: 18px 16px 0; }
  .baekje-map .bm-place-list { gap: 8px; padding: 16px; }
  .baekje-map .bm-info { margin: 0 16px 16px; padding: 18px 16px; gap: 12px; }
  .baekje-map .bm-mission-button { width: 100%; }
}

/* The passport follows the same discovery state as the map and place cards. */
.stamp-placeholder{margin:0 auto 20px;display:grid;place-items:center;width:48px;height:48px;border:2px dashed var(--line,#393944);border-radius:50%;color:var(--muted,#a2a2af);font-family:var(--pixel);font-size:24px;line-height:1}
.stamp-name-blank{display:inline-block;min-width:100px;max-width:100%;height:1.25em;color:transparent;border-bottom:2px dashed #757585;user-select:none}
.stamp-cell.stamped{animation:stamp-reveal .45s ease-out}
@keyframes stamp-reveal{from{transform:scale(.94);filter:brightness(1.5)}to{transform:scale(1);filter:brightness(1)}}
.footer-links{display:flex;flex-direction:column;gap:12px}
@media(prefers-reduced-motion:reduce){.stamp-cell.stamped{animation:none}}