:root {
  color-scheme: light;
  --primary: #0F766E;
  --primary-soft: #CCFBF1;
  --secondary: #F97316;
  --secondary-soft: #FFEDD5;
  --tertiary: #0EA5E9;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: #16302D;
  --muted: #64748B;
  --line: #DCE7E5;
  --success: #059669;
  --success-text: #047857;
  --warning: #D97706;
  --warning-text: #92400E;
  --error: #EF4444;
  --error-text: #B91C1C;
  --mint: var(--primary);
  --yellow: var(--secondary);
  --red: var(--error);
  --shadow-sm: 0 8px 24px rgba(15, 118, 110, .10);
  --shadow-lg: 0 24px 70px rgba(15, 62, 58, .16);
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-shell { position: relative; width: 100%; height: 100dvh; min-height: 600px; overflow: hidden; background: var(--bg); }
.world-map { position: absolute; inset: 0; z-index: 0; background: #EAF7F5; }
.map-shade { position: absolute; inset: 0; z-index: 400; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.82) 0, rgba(255,255,255,.34) 35%, rgba(255,255,255,.42) 72%, rgba(255,255,255,.86) 100%); }
.app-shell.is-playing .map-shade { background: linear-gradient(180deg, rgba(255,255,255,.82) 0, rgba(255,255,255,.08) 24%, rgba(255,255,255,.10) 62%, rgba(255,255,255,.88) 100%); }
.leaflet-tile-pane { filter: saturate(.68) brightness(1.06) contrast(.88); }
.leaflet-control-attribution { background: rgba(255,255,255,.9) !important; color: var(--muted); font-size: 9px; }
.leaflet-control-attribution a { color: var(--primary); }
.airport-point { transition: stroke-width .2s, fill-opacity .2s; cursor: pointer; }
.airport-point.is-selected, .airport-point.is-departure { filter: drop-shadow(0 2px 4px rgba(15,118,110,.34)); }
.airport-point.is-target { filter: drop-shadow(0 3px 6px rgba(249,115,22,.42)); animation: airport-pulse 1.4s ease-in-out infinite; }
.leaflet-tooltip { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-size: 11px; }
.leaflet-tooltip.is-target { border-color: var(--secondary); color: #7C2D12; font-weight: 800; }
.leaflet-tooltip-top::before { border-top-color: var(--surface); }
.plane-marker { display: grid !important; place-items: center; width: 64px !important; height: 64px !important; border: 0; background: transparent; overflow: visible; pointer-events: none; }
.plane-sprite { display: block; width: 60px; height: 60px; object-fit: contain; transform-origin: 50% 50%; filter: drop-shadow(0 3px 4px rgba(15,23,42,.34)); will-change: transform; }
.route-line { filter: drop-shadow(0 2px 3px rgba(15,118,110,.25)); }

.topbar { position: absolute; z-index: 800; top: 0; left: 0; right: 0; min-height: 72px; padding: 16px 22px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); box-shadow: 0 4px 20px rgba(15,118,110,.07); backdrop-filter: blur(12px); }
.brand { min-width: 185px; }
.brand strong { display: block; color: var(--primary); font: 900 21px/1 ui-monospace, monospace; letter-spacing: .1em; }
.brand span { display: block; margin-top: 4px; color: var(--muted); font: 9px/1 ui-monospace, monospace; letter-spacing: .14em; }
.metrics { flex: 1; display: flex; justify-content: center; gap: clamp(20px, 5vw, 72px); }
.metrics > div { display: flex; align-items: baseline; gap: 5px; }
.metrics span { margin-right: 3px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.metrics strong { color: var(--text); font: 800 18px/1 ui-monospace, monospace; }
.metrics em { color: var(--muted); font: normal 9px/1 ui-monospace, monospace; }
.icon-button { flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
#mute-button { margin-left: auto; }
.icon-button:hover { border-color: var(--primary); }
.icon-button.is-muted { background: #F1F5F9; color: var(--muted); }
.analytics-notice { position: relative; flex: 0 0 auto; }
.analytics-notice summary { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.9); color: var(--muted); font-size: 10px; font-weight: 700; list-style: none; cursor: pointer; user-select: none; }
.analytics-notice summary::-webkit-details-marker { display: none; }
.analytics-notice summary:hover, .analytics-notice summary:focus-visible, .analytics-notice[open] summary { border-color: var(--primary); color: var(--primary); outline: none; }
.analytics-notice summary:focus-visible { box-shadow: 0 0 0 3px rgba(15,118,110,.12); }
.analytics-notice-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(360px, calc(100vw - 24px)); padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.98); box-shadow: var(--shadow-lg); color: var(--text); font-size: 11px; line-height: 1.55; }
.analytics-notice-panel strong { display: block; color: var(--primary); font-size: 12px; }
.analytics-notice-panel p { margin: 8px 0 0; }
.analytics-notice-panel nav { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.analytics-notice-panel a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-weight: 700; text-underline-offset: 3px; }

.screen { position: absolute; inset: 72px 0 0; z-index: 700; }
.setup-screen, .result-screen { display: grid; place-items: center; padding: 24px; }
.setup-card, .result-card { width: min(820px, 100%); max-height: calc(100dvh - 120px); padding: 28px; border: 1px solid rgba(220,231,229,.95); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); }
.kicker { margin: 0 0 8px; color: var(--primary); font: 800 10px/1 ui-monospace, monospace; letter-spacing: .18em; }
h1, h2 { margin: 0; color: var(--text); letter-spacing: -.04em; }
h1 { font-size: clamp(28px, 4vw, 44px); }
.lead { margin: 10px 0 20px; color: var(--muted); font-size: 13px; }
.mode-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.mode-tab { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: #475569; font-size: 11px; }
.mode-tab:hover { border-color: var(--primary); color: var(--primary); }
.mode-tab.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.search-box { display: flex; align-items: center; gap: 10px; height: 43px; margin-top: 16px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: #F8FAFC; color: var(--muted); }
.search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,118,110,.12); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.airport-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 260px; margin-top: 12px; overflow: auto; scrollbar-width: thin; }
.airport-card { position: relative; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; }
.airport-card:hover, .airport-card.is-selected { border-color: var(--primary); background: #F0FDFA; box-shadow: 0 4px 14px rgba(15,118,110,.08); }
.airport-card kbd { position: absolute; top: 9px; right: 9px; color: var(--primary); font: 800 9px ui-monospace, monospace; }
.airport-card strong { display: block; padding-right: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.airport-card span { display: block; margin-top: 4px; color: var(--muted); font: 9px ui-monospace, monospace; }
.start-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.start-row > div { min-width: 0; }
.start-row span { display: block; color: var(--muted); font-size: 9px; }
.start-row strong { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
#start-button, #restart-button { min-width: 160px; height: 44px; border: 0; border-radius: 14px; background: var(--secondary); color: #431407; font-weight: 900; box-shadow: 0 8px 18px rgba(249,115,22,.22); }
#start-button:hover, #restart-button:hover { background: #EA580C; color: #FFFFFF; }
#start-button:disabled { cursor: not-allowed; background: #E2E8F0; color: #94A3B8; box-shadow: none; }

.game-screen { display: flex; align-items: flex-end; justify-content: center; padding: 36px 24px 74px; pointer-events: none; }
.typing-stage { position: relative; width: min(860px, 100%); padding: 20px 30px 18px; pointer-events: auto; text-align: center; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.97); box-shadow: var(--shadow-lg); backdrop-filter: blur(10px); }
.typing-stage.is-perfect { border-color: var(--success); animation: perfect-glow .72s ease-out; }
.perfect-feedback { position: absolute; z-index: 3; left: 50%; top: -19px; padding: 7px 15px 6px; border: 1px solid var(--success); border-radius: 999px; background: #ECFDF5; color: var(--success-text); font: 900 12px/1 ui-monospace, monospace; letter-spacing: .13em; opacity: 0; transform: translate(-50%, 8px) scale(.8); pointer-events: none; box-shadow: 0 8px 22px rgba(5,150,105,.18); transition: opacity .12s, transform .18s cubic-bezier(.2,.9,.3,1.35); }
.perfect-feedback.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.perfect-feedback span { margin-left: 4px; font-size: 15px; }
.route-caption { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12px; }
.route-caption span { color: var(--primary); font: 800 12px ui-monospace, monospace; }
.route-caption strong { color: var(--text); font-weight: 600; }
.route-caption i { color: #9A3412; font-style: normal; }
.typing-row { display: flex; align-items: stretch; justify-content: center; gap: 10px; width: 100%; }
.typing-composer { --target-font-size: clamp(20px, 4vw, 48px); position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-width: 0; height: 70px; overflow: hidden; border: 2px solid var(--line); border-radius: 16px; background: #F8FAFC; transition: border-color .12s, box-shadow .12s, background .12s; }
.typing-composer:focus-within { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px rgba(15,118,110,.12); }
.typing-composer:has(#typing-input.is-wrong) { border-color: var(--error); animation: shake .18s linear 2; }
.typing-track { position: relative; width: max-content; max-width: calc(100% - 24px); font-size: var(--target-fit-size, var(--target-font-size)); font-weight: 900; line-height: 1.1; letter-spacing: -.055em; }
.target-name { display: block; overflow: visible; white-space: nowrap; font: inherit; letter-spacing: inherit; pointer-events: none; }
.target-char { display: inline; border-radius: 7px; transition: color .1s, background .1s; }
.target-char.is-pending { color: var(--muted); }
.target-char.is-correct { color: var(--success-text); background: rgba(5,150,105,.08); }
.target-char.is-composing { color: #0369A1; background: rgba(14,165,233,.12); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.target-char.is-wrong, .target-overflow { color: #FFFFFF; background: var(--error-text); }
.target-suffix { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 86px; padding: 0 14px; border: 1px solid #FDBA74; border-radius: 16px; background: var(--secondary-soft); color: #9A3412; font-size: clamp(15px, 2vw, 20px); font-weight: 900; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.target-suffix[hidden] { display: none; }
#typing-form { width: min(760px, 100%); margin: 14px auto 0; }
#typing-input { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: transparent; caret-color: var(--primary); text-align: left; font: inherit; letter-spacing: inherit; -webkit-text-fill-color: transparent; }
#typing-input::selection { background: rgba(14,165,233,.2); }
.target-footer { display: flex; justify-content: space-between; gap: 16px; width: min(760px, 100%); margin: 9px auto 0; color: var(--muted); font-size: 10px; }
#typing-message.is-error { color: var(--error-text); }
#typing-message.is-success { color: var(--success-text); }
.route-progress { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; max-width: calc(100% - 40px); }
.progress-dot { width: 8px; height: 8px; border: 1px solid #94A3B8; border-radius: 50%; background: var(--surface); }
.progress-dot.is-done { border-color: var(--primary); background: var(--primary); }
.progress-dot.is-current { width: 11px; height: 11px; border-color: var(--secondary); background: var(--secondary-soft); }

.result-card { width: min(700px, 100%); text-align: center; }
.result-card h2 { font-size: clamp(27px, 4vw, 42px); }
.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 26px 0 16px; }
.result-grid > div { padding: 16px 8px; border: 1px solid var(--line); border-radius: 16px; background: #F8FAFC; }
.result-grid span { display: block; color: var(--muted); font-size: 9px; }
.result-grid strong { display: inline-block; margin-top: 8px; color: var(--primary); font: 800 22px ui-monospace, monospace; }
.result-grid em { margin-left: 3px; color: var(--muted); font-size: 9px; font-style: normal; }
.record-message { min-height: 20px; color: var(--warning-text); font-size: 12px; }
.result-route { margin: 15px 0 22px; color: var(--muted); font: 10px/1.8 ui-monospace, monospace; }
#restart-button { width: 100%; }
.error-screen { position: absolute; inset: 0; z-index: 2000; display: grid; place-items: center; background: var(--bg); color: var(--error-text); }

@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes perfect-glow { 0% { box-shadow: var(--shadow-lg); } 35% { box-shadow: 0 0 0 5px rgba(5,150,105,.14), 0 24px 70px rgba(5,150,105,.2); } 100% { box-shadow: var(--shadow-lg); } }
@keyframes airport-pulse { 50% { stroke-width: 6; fill-opacity: .72; } }

@media (max-width: 720px) {
  .app-shell { min-height: 540px; }
  .topbar { min-height: 62px; padding: 10px 12px; gap: 8px; }
  .brand { min-width: auto; }
  .brand span { display: none; }
  .app-shell.is-playing .brand { display: none; }
  .analytics-notice-label { display: none; }
  .analytics-notice summary { width: 40px; justify-content: center; padding: 0; }
  .metrics { gap: 10px; justify-content: flex-end; }
  .metrics span { display: none; }
  .metrics strong { font-size: 12px; }
  .metrics em { font-size: 7px; }
  .screen { inset: 62px 0 0; }
  .setup-screen { padding: 10px; }
  .setup-card { padding: 18px; max-height: calc(100dvh - 78px); }
  .airport-list { grid-template-columns: repeat(2, 1fr); max-height: 230px; }
  .game-screen { padding: 16px 8px 56px; }
  .typing-stage { padding: 15px 12px 13px; border-radius: 20px; }
  .typing-composer { --target-font-size: clamp(18px, 5.5vw, 26px); height: 56px; }
  .typing-track { max-width: calc(100% - 16px); }
  .target-suffix { min-width: 72px; padding-inline: 9px; border-radius: 12px; font-size: 14px; }
  #typing-input { height: 100%; }
  .target-footer { font-size: 9px; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .airport-point.is-target { animation: none !important; }
}