/* ──────────────────────────────────────────────────────────────────────────────
   서울관제 HUD · 관제 콘솔 토큰 체계
   어두운 유리 패널 + 청록 강조. 8pt 그리드, 일정한 모서리·그림자, tabular 숫자.
   레이아웃 치수(--edge, --dock-height, 패널 폭·높이 예산)는 tests/command-panel-layout.test.js가 읽는다.
   ────────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme:dark;
  /* 면 */
  --bg:#0b161f; --panel:rgba(12,24,33,.86); --panel-2:rgba(18,34,46,.92); --panel-raised:#152a3a; --panel-inset:rgba(4,12,18,.45);
  --surface:var(--panel); --scope:#0d1d2a; --scope-2:#13293a;
  --blur:10px;
  /* 선 */
  --line:rgba(150,190,206,.18); --line-strong:rgba(150,190,206,.34); --hairline:rgba(150,190,206,.1);
  /* 글자 */
  --ink:#e7f1f5; --ink-2:#a4bac6; --ink-3:#71899a; --muted:var(--ink-2);
  /* 강조 */
  --accent:#3ccbe0; --accent-strong:#7fe6f4; --accent-ink:#052229; --accent-soft:rgba(60,203,224,.13); --accent-line:rgba(60,203,224,.42); --accent-glow:0 0 0 1px rgba(127,230,244,.55),0 0 14px rgba(60,203,224,.28);
  /* 상태 */
  --arrival:#6fd0ff; --departure:#ffc46f; --waiting:#ffb454; --waiting-soft:rgba(255,180,84,.14); --radio:#52d6c8; --radio-soft:rgba(82,214,200,.14);
  --late:#ff8a65; --danger:#ff6f6f; --danger-soft:rgba(255,111,111,.14); --success:#63d49f; --warning:#ffc46f;
  --cyan:var(--arrival); --orange:var(--departure);
  /* 조작 면 */
  --control:rgba(255,255,255,.055); --control-hover:rgba(255,255,255,.1); --control-active:rgba(255,255,255,.15); --control-line:rgba(160,196,210,.22); --control-disabled:rgba(255,255,255,.03);
  --focus:#9eeefb;
  /* 형태·깊이 */
  --r-1:4px; --r-2:6px; --r-3:10px; --r-4:14px;
  --shadow:0 1px 2px rgba(0,0,0,.28),0 10px 28px rgba(2,10,16,.38); --shadow-2:0 1px 1px rgba(0,0,0,.3),0 4px 12px rgba(2,10,16,.3); --shadow-3:0 24px 80px rgba(0,8,14,.6);
  /* 간격 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  /* 레이아웃 예산 */
  --edge:14px; --dock-height:50px; --left-width:286px; --right-width:300px;
  /* 모션 */
  --ease:cubic-bezier(.2,.7,.2,1); --t-1:140ms; --t-2:180ms;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",sans-serif;
  font-size:14px; color:var(--ink); background:var(--bg); font-synthesis:none; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum","ss01";
}
/* 야간 모드: 더 짙고 덜 투명한 면, 눈부심을 줄인 강조 */
:root[data-theme="night"] {
  --bg:#050c12; --panel:rgba(6,14,20,.94); --panel-2:rgba(10,20,28,.96); --panel-raised:#0f1f2b; --panel-inset:rgba(0,4,8,.55);
  --scope:#06121b; --scope-2:#0b1c28; --blur:6px;
  --ink:#d8e4ea; --ink-2:#93a9b6; --ink-3:#62788a;
  --accent:#2fb7cc; --accent-strong:#6ad8e8; --accent-soft:rgba(47,183,204,.12); --accent-line:rgba(47,183,204,.38); --accent-glow:0 0 0 1px rgba(106,216,232,.5),0 0 12px rgba(47,183,204,.22);
  --arrival:#62bdea; --departure:#e9b36a; --waiting:#e8a74f; --radio:#49c3b6; --late:#ee8160; --danger:#ea6767; --success:#5cc494;
  --line:rgba(150,190,206,.14); --line-strong:rgba(150,190,206,.28);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.5);
}

/* ── 기본 ─────────────────────────────────────────────────────────────────── */
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
button,input,select,summary { font:inherit; }
button,input,select { min-height:32px; border:1px solid var(--control-line); border-radius:var(--r-2); padding:6px 10px; background:var(--control); color:var(--ink); transition:background-color var(--t-1) var(--ease),border-color var(--t-1) var(--ease),color var(--t-1) var(--ease),box-shadow var(--t-1) var(--ease),transform var(--t-1) var(--ease); }
button,select,summary { cursor:pointer; touch-action:manipulation; }
button { font-weight:650; letter-spacing:.005em; }
button:hover,select:hover { background-color:var(--control-hover); border-color:var(--line-strong); }
button:active { background-color:var(--control-active); transform:translateY(.5px); }
button:disabled { cursor:not-allowed; color:var(--ink-3); background:var(--control-disabled); border-color:var(--hairline); transform:none; }
button.primary { background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:750; }
button.primary:hover { background:var(--accent-strong); }
button.primary:active { background:var(--accent); }
button[aria-pressed=true] { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-strong); }
input { min-width:0; caret-color:var(--accent); }
input::placeholder { color:var(--ink-3); }
select { padding-right:26px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a4bac6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; }
select option { background:var(--panel-raised); color:var(--ink); }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
input:focus-visible,select:focus-visible { outline-offset:0; border-color:var(--accent-line); }
::selection { background:rgba(60,203,224,.35); color:#fff; }
* { scrollbar-width:thin; scrollbar-color:rgba(150,190,206,.35) transparent; }
h1,h2,p { margin:0; }
h1 { font-size:16px; font-weight:750; letter-spacing:-.02em; }
h2 { font-size:13px; font-weight:700; }
p { line-height:1.55; word-break:keep-all; }
svg { display:block; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip { position:fixed; top:-80px; left:12px; z-index:100; padding:12px; border-radius:var(--r-2); background:var(--accent); color:var(--accent-ink); font-weight:700; }
.skip:focus { top:10px; }
.game-stage { position:relative; width:100%; height:100%; height:100dvh; isolation:isolate; overflow:hidden; }
#airport-scene { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
#airport-scene:active { cursor:grabbing; }
.scene-fallback { position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); width:min(420px,calc(100% - 32px)); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-3); padding:20px; line-height:1.65; z-index:4; box-shadow:var(--shadow); }

/* ── 유리 면 공통 ─────────────────────────────────────────────────────────── */
.hud-panel,.brand,.seat-controls,.status-bar,.game-dock,.drawer-content,.help-panel,.airport-context,.session-outcome,.scene-fallback {
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.25); backdrop-filter:blur(var(--blur)) saturate(1.25);
}

/* ── 상단: 브랜드 · 관제석 · 상태 ─────────────────────────────────────────── */
.app-header { position:absolute; inset:12px var(--edge) auto; z-index:12; pointer-events:none; display:flex; align-items:flex-start; gap:8px; }
.brand { display:flex; align-items:center; gap:8px; width:max-content; min-height:36px; padding:5px 12px 5px 9px; border-radius:var(--r-2); background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-2); }
.brand svg { width:22px; height:22px; stroke:var(--accent); stroke-width:1.3; fill:none; }
.seat-controls { pointer-events:auto; display:flex; align-items:center; gap:4px; min-height:36px; margin:0; padding:3px 4px 3px 10px; border-radius:var(--r-2); background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-2); }
.seat-controls .seat-caption { color:var(--ink-3); font-size:11px; font-weight:650; letter-spacing:.04em; margin-right:4px; white-space:nowrap; }
.seat-controls label { display:block; }
.seat-controls select { width:auto; min-height:28px; padding:3px 24px 3px 8px; font-size:12px; font-weight:700; color:var(--accent-strong); background-color:var(--accent-soft); border-color:transparent; }
.seat-controls select:hover { border-color:var(--accent-line); }
.seat-controls select:disabled { color:var(--ink-3); background-color:var(--control-disabled); }
.status-bar { position:absolute; top:0; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:14px; min-height:36px; padding:4px 14px 4px 12px; border-radius:var(--r-2); background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-2); font-size:12px; white-space:nowrap; }
#connection { color:var(--ink-2); max-width:160px; overflow:hidden; text-overflow:ellipsis; }
#sim-status { display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-weight:650; }
#sim-status::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--waiting); box-shadow:0 0 0 3px var(--waiting-soft); }
#sim-status[data-state="running"] { color:var(--accent-strong); }
#sim-status[data-state="running"]::before { background:var(--radio); box-shadow:0 0 0 3px var(--radio-soft); animation:pulse 1.6s var(--ease) infinite; }
#sim-status[data-state="done"]::before { background:var(--success); box-shadow:0 0 0 3px rgba(99,212,159,.18); }
#sim-status[data-state="failed"]::before { background:var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
#clock { min-width:64px; font-size:22px; line-height:1; font-weight:600; letter-spacing:.06em; color:#fff; text-shadow:0 0 12px rgba(127,230,244,.25); }
.scoreboard { display:flex; gap:14px; padding-left:14px; border-left:1px solid var(--line); color:var(--ink-3); font-size:11px; letter-spacing:.02em; }
.scoreboard strong { margin-left:5px; color:var(--ink); font-size:14px; font-weight:700; letter-spacing:0; }
.scoreboard .risk-count strong { color:var(--warning); }
.scene-caption { position:absolute; top:58px; left:50%; transform:translateX(-50%); text-align:center; pointer-events:none; z-index:4; max-width:calc(100% - 650px); }
#scene-status { display:inline-block; padding:4px 10px; background:rgba(8,20,28,.7); border:1px solid var(--hairline); border-radius:999px; color:var(--ink-2); font-size:11.5px; letter-spacing:.01em; }
#scene-hint { margin-top:6px; font-size:11.5px; color:var(--ink-2); text-shadow:0 1px 3px rgba(0,0,0,.6); }
#environment-attribution { margin:4px 0 0; padding:3px 8px; border-radius:999px; background:rgba(8,20,28,.7); color:var(--ink-3); font-size:10px; line-height:1.5; pointer-events:auto; }
#environment-attribution a { color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }

/* ── HUD 패널 공통 ────────────────────────────────────────────────────────── */
.hud-panel { position:absolute; z-index:10; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--shadow); overflow:hidden; }
.panel-title { display:flex; align-items:center; gap:8px; min-height:34px; padding:7px 12px; list-style:none; color:var(--ink-2); background:var(--panel-2); border-bottom:1px solid var(--hairline); font-size:12px; font-weight:650; letter-spacing:.01em; user-select:none; transition:background-color var(--t-1) var(--ease); }
.panel-title:hover { background:rgba(24,44,58,.95); }
.panel-title::-webkit-details-marker { display:none; }
.panel-title h2 { flex:1; font-size:12px; font-weight:700; color:var(--ink); }
.panel-toggle { margin-left:auto; width:7px; height:7px; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(45deg); margin-top:-4px; flex:none; transition:transform var(--t-2) var(--ease),margin var(--t-2) var(--ease); }
details[open]>.panel-title .panel-toggle { transform:rotate(225deg); margin-top:4px; }
details:not([open])>.panel-title { border-bottom-color:transparent; }
.queue-note { color:var(--ink-3); font-size:11.5px; font-weight:400; }

/* ── 좌상: 레이더 ─────────────────────────────────────────────────────────── */
.scope-panel { top:62px; left:var(--edge); width:var(--left-width); }
.scope-content { background:var(--scope); color:#dceaf2; }
.scope-toolbar { display:flex; align-items:center; gap:6px; padding:8px 8px 6px; }
/* 기상 칩: 레이더 도구막대의 유리 칩. 접근 최저치 미만이면 위험색 점과 테두리. */
.weather-chip { display:inline-flex; align-items:center; gap:7px; min-width:0; margin-right:auto; padding:4px 9px 4px 8px; min-height:28px; font-size:12px; color:var(--ink-2); background:var(--control); border:1px solid var(--control-line); border-radius:var(--pill,999px); text-align:left; line-height:1.3; }
.weather-chip:hover { color:var(--ink); background:var(--control-hover); border-color:var(--line-strong); }
.weather-chip[aria-expanded=true] { color:var(--accent-strong); background:var(--accent-soft); border-color:var(--accent-line); }
.weather-chip #wind { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.weather-dot { flex:none; width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 6px rgba(99,212,159,.5); }
.weather-chip[data-precipitation="rain"] .weather-dot,.weather-chip[data-precipitation="snow"] .weather-dot { background:var(--arrival); box-shadow:0 0 6px rgba(111,208,255,.5); }
.weather-chip.below-minima { color:var(--danger); border-color:rgba(255,111,111,.55); background:var(--danger-soft); }
.weather-chip.below-minima .weather-dot { background:var(--danger); box-shadow:0 0 7px rgba(255,111,111,.6); animation:pulse 1.4s ease-in-out infinite; }
.weather-panel { margin:0 8px 8px; padding:10px 10px 8px; background:var(--panel-inset); border:1px solid var(--hairline); border-radius:var(--r-2); animation:rise var(--t-2) var(--ease); }
.weather-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.weather-heading strong { flex:none; font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.weather-recommend { flex:1; min-width:0; font-size:11px; line-height:1.4; color:var(--accent-strong); text-align:right; word-break:keep-all; }
.weather-readout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px; margin:0 0 8px; }
.weather-readout>div { min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:6px; border-bottom:1px solid var(--hairline); padding-bottom:3px; }
.weather-readout dt { font-size:10px; letter-spacing:.06em; color:var(--ink-3); flex:none; }
.weather-readout dd { font-size:12px; font-weight:700; color:var(--ink); letter-spacing:.01em; text-align:right; white-space:nowrap; }
.weather-minima { margin:0 0 8px; padding:6px 8px; font-size:11px; line-height:1.5; color:var(--danger); background:var(--danger-soft); border-left:3px solid var(--danger); border-radius:var(--r-1); }
.weather-chips { display:flex; flex-wrap:wrap; gap:4px; }
.weather-chips button { min-height:26px; padding:3px 9px; font-size:11.5px; color:var(--ink-2); background:var(--control); border:1px solid var(--control-line); border-radius:var(--pill,999px); }
.weather-chips button[aria-pressed=true] { color:var(--accent-strong); background:var(--accent-soft); border-color:var(--accent-line); }
.weather-chips button:disabled { color:var(--ink-3); background:var(--control-disabled); }
.weather-note { margin:8px 0 0; font-size:10.5px; line-height:1.5; color:var(--ink-3); }
.weather-option { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:11px; color:var(--ink-2); }
.weather-option input { width:14px; height:14px; margin:0; accent-color:var(--accent); }
.weather-option span { color:var(--ink-3); }
.dialog-field { display:block; margin:-8px 0 6px; font-size:11px; letter-spacing:.04em; color:var(--ink-3); }
#dialog-weather-preset { width:100%; margin-bottom:18px; }
.segmented { display:flex; border:1px solid var(--line-strong); border-radius:var(--r-2); overflow:hidden; background:var(--panel-inset); }
.segmented button { border:0; border-radius:0; min-height:28px; padding:4px 9px; background:transparent; color:var(--ink-2); font-size:11.5px; }
.segmented button+button { border-left:1px solid var(--hairline); }
.segmented button[aria-pressed=true] { background:var(--accent-soft); color:var(--accent-strong); }
.scope-button { color:var(--ink-2); background:transparent; border-color:var(--line-strong); font-size:11.5px; padding:4px 9px; min-height:28px; }
.scope-button:hover { color:var(--ink); }
.scope-wrap { position:relative; height:clamp(155px,25vh,235px); background:radial-gradient(ellipse at 50% 60%,rgba(60,203,224,.08),transparent 70%); }
#scope { width:100%; height:100%; display:block; }
#scope .track { cursor:pointer; outline:none; }
#scope .track:focus .track-focus,#scope .track:hover .track-focus { stroke:#fff; opacity:1; }
.track-focus { fill:none; stroke:#fff; opacity:0; }
.scope-key { position:absolute; left:10px; bottom:6px; display:flex; gap:12px; font-size:11px; pointer-events:none; color:var(--ink-2); }
.scope-key>span { display:flex; align-items:center; gap:5px; }
.scope-key i { width:7px; height:7px; border-radius:50%; }
.key-arrival { background:var(--arrival); box-shadow:0 0 6px var(--arrival); }.key-departure { background:var(--departure); box-shadow:0 0 6px var(--departure); }
.map-hint { padding:4px 10px 7px; font-size:11.5px; color:var(--ink-3); }
.runway-bar { padding:8px 12px; display:flex; flex-wrap:wrap; gap:5px 10px; background:var(--scope-2); border-top:1px solid var(--hairline); font-size:12px; line-height:1.4; }
.runway-state { display:flex; gap:8px; width:100%; align-items:center; flex-wrap:wrap; }
.runway-state>span { white-space:nowrap; }
.runway-label { font-weight:700; color:var(--ink); letter-spacing:.02em; }
.runway-free { color:var(--success); }.runway-busy { color:var(--departure); }
.runway-free::before,.runway-busy::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:5px; vertical-align:1px; }
.runway-state>span:last-child { margin-left:auto; color:var(--ink-3); }

/* ── 우상: 선택 항공기 · 관제 명령 ────────────────────────────────────────── */
.flight-panel { top:62px; right:var(--edge); width:var(--right-width); max-height:calc(100dvh - var(--dock-height) - 144px - clamp(180px,27vh,270px)); overflow:auto; }
.flight-panel>.panel-title { position:sticky; top:0; z-index:1; background:var(--panel-2); }
#seat-label { margin-left:auto; color:var(--accent-strong); font-weight:650; }
#seat-label+.panel-toggle { margin-left:2px; }
#inspect-toggle { margin-left:4px; min-height:24px; padding:2px 8px; font-size:11px; background:var(--control); border-color:var(--control-line); color:var(--ink-2); border-radius:999px; }
#inspect-toggle:hover { color:var(--ink); }
.inspector { padding:12px 14px 14px; }
.flight-identity { display:flex; align-items:baseline; gap:10px; }
.flight-identity h2 { font-size:22px; letter-spacing:-.01em; font-weight:800; color:#fff; }
.flight-identity>span { color:var(--ink-3); font-size:12px; font-weight:650; letter-spacing:.06em; padding:1px 6px; border:1px solid var(--line); border-radius:var(--r-1); }
.phase-line { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px; font-size:12px; }
.phase-badge { display:inline-flex; align-items:center; gap:6px; color:var(--accent-strong); font-weight:700; }
.phase-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.phase-line>span:last-child { color:var(--ink-2); }
.flight-values { display:flex; justify-content:space-between; gap:10px; margin:12px 0 0; padding:8px 10px; border-radius:var(--r-2); background:var(--panel-inset); border:1px solid var(--hairline); }
.flight-values>div { display:flex; flex-direction:column; gap:2px; }
.flight-values dt { color:var(--ink-3); font-size:10.5px; letter-spacing:.06em; }
.flight-values dd { margin:0; font-size:15px; font-weight:700; letter-spacing:.02em; color:#fff; }
.flight-values small { font-size:11px; font-weight:400; color:var(--ink-3); margin-left:2px; letter-spacing:0; }
.instruction { display:flex; gap:8px; padding:8px 0; margin:8px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.instruction>span { flex:none; color:var(--ink-3); font-size:11px; line-height:1.6; letter-spacing:.04em; }
.instruction p { font-size:12px; line-height:1.5; color:var(--ink-2); }
.command-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0 8px; }
.command-heading h2 { font-size:11px; color:var(--ink-3); letter-spacing:.08em; font-weight:700; }
.command-heading>span { font-size:11px; color:var(--ink-3); }
#commands { display:grid; grid-template-columns:1fr; gap:6px; }
.command { display:grid; gap:3px; text-align:center; padding:9px 12px; min-height:36px; color:var(--accent-strong); border-color:var(--accent-line); background:var(--accent-soft); font-weight:700; }
.command:hover { background:rgba(60,203,224,.22); border-color:var(--accent); }
.command small { font-size:11.5px; line-height:1.4; font-weight:400; color:var(--ink-3); text-align:left; }
.command:disabled { padding:6px 10px; min-height:32px; color:var(--ink-3); background:var(--control-disabled); border-color:var(--hairline); }
.command:disabled>span { font-size:12px; color:var(--ink-2); }
.command-note { font-size:12px; color:var(--ink-3); padding:7px 0; line-height:1.5; }
.requested-command { background:var(--accent); color:var(--accent-ink); border-color:transparent; box-shadow:var(--accent-glow); }
.requested-command:hover { background:var(--accent-strong); color:var(--accent-ink); }
.requested-command:disabled { color:var(--ink-3); background:var(--control-disabled); box-shadow:none; }
.taxi-map-launch { width:100%; margin:4px 0 10px; color:var(--accent-strong); border-color:var(--accent-line); background:var(--accent-soft); }
.taxi-map-launch:hover { background:rgba(60,203,224,.22); }

/* 관제 진행 단계 */
.flight-flow { display:flex; gap:3px; margin:10px 0 8px; }
.flight-flow>span { position:relative; display:flex; justify-content:center; align-items:center; gap:3px; flex:1; min-width:0; padding:4px 0 6px; color:var(--ink-3); font-size:10px; letter-spacing:.04em; }
.flight-flow>span::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--line); }
.flight-flow>span>b { font-size:10px; font-weight:700; }
.flight-flow>span>span { display:none; }
.flight-flow>.done { color:var(--radio); }
.flight-flow>.done::after { background:var(--radio); opacity:.55; }
.flight-flow>.current { color:var(--accent-strong); font-weight:700; }
.flight-flow>.current::after { background:var(--accent); box-shadow:0 0 8px var(--accent); }
.flight-panel.expanded .flight-flow>span { flex-direction:column; gap:2px; }
.flight-panel.expanded .flight-flow>span>span { display:inline; white-space:nowrap; letter-spacing:0; }

/* 조종사 요청 */
.pilot-request { position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px 7px 12px; background:var(--control); border:1px solid var(--hairline); border-left:3px solid var(--ink-3); border-radius:var(--r-2); font-size:12px; line-height:1.4; transition:background-color var(--t-2) var(--ease),border-color var(--t-2) var(--ease); }
.pilot-request strong { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink); }
.pilot-request>span { color:var(--ink-3); font-size:11px; white-space:nowrap; }
.pilot-request.waiting { background:var(--waiting-soft); border-left-color:var(--waiting); }
.pilot-request.waiting strong { color:var(--waiting); }
.pilot-request.waiting strong::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--waiting); box-shadow:0 0 8px var(--waiting); flex:none; }
.pilot-request.waiting>span { color:var(--waiting); opacity:.85; }
.pilot-request.transmitting { background:var(--radio-soft); border-left-color:var(--radio); }
.pilot-request.transmitting strong { color:var(--radio); }
.pilot-request.transmitting strong::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--radio); box-shadow:0 0 0 3px var(--radio-soft); animation:pulse 1.2s var(--ease) infinite; flex:none; }
.pilot-request.transmitting>span { white-space:normal; max-width:52%; text-align:right; color:var(--ink-2); }
.pilot-request.transfer-request { flex-wrap:wrap; gap:4px; }
.pilot-request.transfer-request>span { flex-basis:100%; white-space:normal; max-width:none; text-align:left; }

/* 관제석 전환 */
.seat-handoff { display:grid; gap:6px; margin:0 0 8px; padding:9px 10px; border:1px solid var(--accent-line); border-radius:var(--r-2); background:var(--accent-soft); }
.seat-handoff p { font-size:12px; line-height:1.45; color:var(--ink-2); }
.seat-handoff button { width:100%; color:var(--accent-ink); background:var(--accent); border-color:transparent; font-weight:750; }
.seat-handoff button:hover { background:var(--accent-strong); }

/* 상세관제 양식 */
.flight-assignment { margin-top:8px; font-size:12px; line-height:1.6; color:var(--ink-2); overflow-wrap:anywhere; }
.flight-assignment strong { color:var(--accent-strong); font-weight:700; }
#commands+.flight-assignment,#flight-controls+.flight-assignment { margin-top:12px; padding-top:8px; border-top:1px solid var(--hairline); }
.flight-assignment+.instruction { margin-top:6px; border-top:0; }
.control-group { margin-top:10px; border-top:1px solid var(--hairline); padding-top:8px; }
.control-group>summary,.procedure-detail>summary { display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; font-size:13px; font-weight:650; cursor:pointer; min-height:32px; line-height:1.5; color:var(--ink); list-style:none; }
.control-group>summary::-webkit-details-marker,.procedure-detail>summary::-webkit-details-marker { display:none; }
.control-group>summary::before,.procedure-detail>summary::before { content:""; width:6px; height:6px; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(-45deg); margin:0 6px 0 2px; transition:transform var(--t-2) var(--ease); }
.control-group[open]>summary::before,.procedure-detail[open]>summary::before { transform:rotate(45deg); }
.control-group>summary>span { flex-basis:100%; display:block; font-size:11.5px; font-weight:400; color:var(--ink-3); margin-left:16px; }
.requested-control>summary { color:var(--accent-strong); }
.requested-control>summary::before { border-color:var(--accent); }
.control-form fieldset { margin:0; padding:4px 0 0; border:0; min-width:0; }
.control-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.control-fields label:has(select[name="sidId"]),.control-fields label:has(select[name="starId"]),.control-fields label:has(select[name="approachId"]),.control-fields label:has(select[name="changeApproachId"]),.control-fields label:has(select[name="direction"]),.control-fields label:has(select[name="routeId"]) { grid-column:1/-1; }
.control-fields label { display:grid; gap:4px; color:var(--ink-3); font-size:11px; letter-spacing:.02em; }
.control-fields select,.control-fields input { min-width:0; width:100%; min-height:35px; font-size:13px; color:var(--ink); background-color:var(--panel-inset); }
.number-unit { display:flex; gap:7px; align-items:center; }.number-unit input { flex:1; }.number-unit>span { color:var(--ink-3); font-size:12px; }
.control-submit { width:100%; margin-top:9px; color:var(--accent-strong); background:var(--accent-soft); border-color:var(--accent-line); font-weight:700; }
.control-submit:hover { background:rgba(60,203,224,.22); }
.requested-control .control-submit { background:var(--accent); border-color:transparent; color:var(--accent-ink); box-shadow:var(--accent-glow); }
.requested-control .control-submit:hover { background:var(--accent-strong); }
.requested-control .control-submit:disabled,.control-submit:disabled { background:var(--control-disabled); border-color:var(--hairline); color:var(--ink-3); box-shadow:none; }
.control-reason { font-size:12px; color:var(--warning); margin-top:6px; line-height:1.45; }.control-reason:empty { display:none; }
.procedure-detail { margin-top:12px; font-size:12px; }.procedure-detail ol { padding-left:19px; margin:6px 0; }.procedure-detail li { padding:5px 0; color:var(--ink-3); }.procedure-detail li.current { color:var(--accent-strong); font-weight:650; }
.procedure-detail li strong { color:var(--ink); letter-spacing:.03em; }
.motion-readout { font-size:11px; line-height:1.6; color:var(--ink-3); margin:5px 0; }
/* Ground stage strip: pushback → engine start → taxi → hold short → line-up → roll (and the arrival mirror). Engine-derived; one row, wraps on narrow panels. */
.ground-stage { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:baseline; margin:8px 0 2px; padding:7px 10px; background:var(--panel-inset); border:1px solid var(--hairline); border-left:3px solid var(--accent); border-radius:var(--r-2); font-size:11.5px; line-height:1.45; }
.ground-stage>strong { color:var(--accent-strong); font-size:12px; white-space:nowrap; }
.ground-stage-detail { color:var(--ink-2); min-width:0; overflow-wrap:anywhere; }
.ground-stage-meta { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:4px 10px; color:var(--ink-3); font-size:11px; }
.ground-stage-meta .v-speeds { font-variant-numeric:tabular-nums; }
.ground-stage-meta .vdgs { font-weight:700; color:var(--accent-strong); }
.ground-stage-meta .vdgs-slow { color:var(--waiting); }
.ground-stage-meta .vdgs-stop,.ground-stage-meta .vdgs-ok { color:var(--danger); }
.ground-stage-lights { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:4px; }
.light-chip { padding:1px 6px; border:1px solid var(--hairline); border-radius:999px; color:var(--ink-3); font-size:10px; letter-spacing:.03em; }
.light-chip.on { color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent-line); }
.flight-panel[data-phase="PARKED"] .flight-values,.flight-panel[data-phase="PARKED"] .instruction,.flight-panel[data-phase="PARKED"] .command-heading { display:none; }
.flight-panel.expanded { top:62px; bottom:calc(var(--dock-height) + 20px); max-height:none; z-index:16; }
.instruction { display:none; }
.flight-panel.expanded .instruction { display:flex; }
.flight-panel[data-phase="PARKED"] .instruction { display:none; }

/* ── 우하: 비행 스트립 ────────────────────────────────────────────────────── */
.traffic-section { right:var(--edge); bottom:calc(var(--dock-height) + 22px); width:var(--right-width); }
.traffic-section .panel-title h2>span { display:inline-block; min-width:18px; margin-left:6px; padding:0 5px; border-radius:999px; background:var(--accent-soft); color:var(--accent-strong); font-size:11px; line-height:17px; text-align:center; }
#next-request { margin-left:auto; min-height:24px; padding:2px 8px 2px 9px; font-size:11px; color:var(--accent-strong); border-color:var(--accent-line); background:var(--accent-soft); border-radius:999px; white-space:nowrap; }
#next-request:hover { background:rgba(60,203,224,.22); }
#next-request:disabled { color:var(--ink-3); background:var(--control-disabled); border-color:var(--hairline); }
#next-request span { margin-left:4px; font-weight:800; }
.strip-filters { display:flex; flex-wrap:wrap; gap:2px; padding:6px 8px 0; }
.strip-filters button { flex:1; font-size:11px; letter-spacing:.04em; min-height:24px; padding:2px 5px; background:transparent; border-color:transparent; color:var(--ink-3); border-radius:var(--r-1); }
.strip-filters button:hover { color:var(--ink); background:var(--control); }
.strip-filters button[aria-pressed=true] { background:var(--control-hover); border-color:var(--line); color:var(--ink); }
.strip-filters button { white-space:nowrap; min-width:0; padding-inline:3px; }
.strips { display:grid; gap:4px; padding:8px; max-height:clamp(180px,27vh,270px); overflow-y:auto; }
.empty-strips { font-size:12px; color:var(--ink-3); padding:12px 10px; line-height:1.5; }
.strip { --kind:var(--arrival); --kind-soft:rgba(111,208,255,.09); position:relative; display:grid; grid-template-columns:1fr auto auto; grid-template-rows:auto auto; column-gap:8px; row-gap:3px; text-align:left; min-height:56px; padding:8px 10px 8px 14px; border-radius:var(--r-1); background:linear-gradient(90deg,var(--kind-soft),transparent 55%),var(--control); border:1px solid var(--hairline); overflow:hidden; transition:background-color var(--t-1) var(--ease),border-color var(--t-1) var(--ease),box-shadow var(--t-1) var(--ease),transform var(--t-1) var(--ease); }
.strip::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--kind); }
.strip.departure { --kind:var(--departure); --kind-soft:rgba(255,196,111,.09); }
.strip:hover { border-color:var(--line-strong); background-color:var(--control-hover); transform:none; }
.strip[aria-pressed=true] { outline:0; background:linear-gradient(90deg,var(--kind-soft),transparent 55%),var(--accent-soft); border-color:var(--accent-line); box-shadow:inset 0 0 0 1px var(--accent-line); color:var(--ink); }
.strip .callsign { font-size:13px; font-weight:800; letter-spacing:.01em; color:#fff; align-self:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.strip .type { font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--ink-3); align-self:center; }
.strip .flight-kind { grid-column:3; grid-row:1; align-self:center; font-size:10.5px; font-weight:700; letter-spacing:.04em; color:var(--kind); padding:1px 6px; border:1px solid currentColor; border-radius:999px; opacity:.9; }
.strip .phase { grid-column:1; grid-row:2; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--ink-2); align-self:center; white-space:nowrap; min-width:0; }
/* A long phase never runs under the altitude/wait column (2026-11-05, user: 글씨 겹침); the full text is the tooltip. */
.strip { grid-template-columns:minmax(0,1fr) auto auto; }
.strip .phase { overflow:hidden; }
.strip .phase-text { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.strip .strip-data { white-space:nowrap; }
/* Drag to reorder (strip-order.js). */
.strip.dragging { z-index:2; opacity:.92; box-shadow:0 8px 22px rgba(0,0,0,.45); cursor:grabbing; transition:none; }
.strips.strip-dragging { user-select:none; }
.strip.drop-before { box-shadow:inset 0 3px 0 var(--accent); }
.strip.drop-after { box-shadow:inset 0 -3px 0 var(--accent); }
/* 예정 tab: arrivals before their first call (display only, not selectable). */
.strip.upcoming { cursor:default; opacity:.86; }
.strip.upcoming .phase { color:var(--waiting); font-weight:650; }
.strip .strip-data { grid-column:2/4; grid-row:2; display:flex; justify-content:flex-end; gap:8px; color:var(--ink-3); font-size:11.5px; font-weight:400; align-self:center; }
.strip .strip-data>span:first-child { display:none; }
.strip .strip-data span:last-child { margin-left:auto; }
.strip.request-waiting .phase { color:var(--waiting); font-weight:650; }
.strip.request-waiting .phase::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--waiting); box-shadow:0 0 8px var(--waiting); }
.strip.radio-active { background:linear-gradient(90deg,var(--radio-soft),transparent 55%),var(--control); border-color:rgba(82,214,200,.35); }
.strip.radio-active .phase { color:var(--radio); font-weight:700; }
.strip.radio-active .phase::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--radio); box-shadow:0 0 0 3px var(--radio-soft); animation:pulse 1.2s var(--ease) infinite; }
.strip.long-wait { border-color:rgba(255,138,101,.45); }
.strip.long-wait::before { background:var(--late); }
.strip.long-wait .phase::before { background:var(--late); box-shadow:0 0 8px var(--late); }
.strip.long-wait .strip-data>span:last-child { color:var(--late); font-weight:700; }

/* ── 좌하: 무전 · 훈련 기록 ───────────────────────────────────────────────── */
.event-panel { left:var(--edge); bottom:calc(var(--dock-height) + 22px); width:var(--left-width); max-height:calc(100dvh - 418px); overflow:auto; }
.event-panel>.panel-title { position:sticky; top:0; z-index:2; }
.event-panel ol { padding:4px 12px 8px; margin:0; max-height:100px; list-style:none; overflow-y:auto; }
.event-panel li { display:flex; gap:9px; padding:5px 0; font-size:12px; line-height:1.45; color:var(--ink-2); }
.event-panel li+li { border-top:1px solid var(--hairline); }
.event-panel time { color:var(--ink-3); flex:none; font-size:11px; letter-spacing:.03em; padding-top:1px; }
.event-panel li.warning { color:var(--warning); }.event-panel li.error { color:var(--danger); }
.event-panel li.success { color:var(--success); }
.simulation-log { border-top:1px solid var(--hairline); margin-top:3px; }
.simulation-log>summary { font-size:11px; color:var(--ink-3); padding:7px 12px; list-style:none; letter-spacing:.02em; }
.simulation-log>summary::-webkit-details-marker { display:none; }
.simulation-log>summary::before { content:"▸"; margin-right:6px; display:inline-block; transition:transform var(--t-2) var(--ease); }
.simulation-log[open]>summary::before { transform:rotate(90deg); }

/* ── 하단 도구 ────────────────────────────────────────────────────────────── */
.game-dock { position:absolute; z-index:20; bottom:10px; left:var(--edge); right:var(--edge); height:var(--dock-height); display:flex; align-items:center; gap:12px; padding:7px 9px; border-radius:var(--r-3); background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); }
.camera-controls { display:flex; gap:3px; }
.camera-controls button { display:flex; align-items:center; gap:6px; white-space:nowrap; padding:5px 10px; background:transparent; border-color:transparent; font-size:12px; color:var(--ink-2); }
.camera-controls button:hover { color:var(--ink); background:var(--control); }
.camera-controls svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.4; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.camera-controls button[aria-pressed=true] { color:var(--accent-strong); background:var(--accent-soft); border-color:var(--accent-line); }
#airport-display-open { font-size:12px; white-space:nowrap; }
#airport-display-open[aria-expanded=true] { color:var(--accent-strong); background:var(--accent-soft); border-color:var(--accent-line); }
.playback { display:flex; gap:6px; padding-left:12px; border-left:1px solid var(--line); }
#play { min-width:96px; }#sim-speed { min-width:44px; font-weight:700; font-variant-numeric:tabular-nums; }#sim-speed[aria-pressed=true] { background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink); }.playback select { width:84px; font-size:12px; }
.utility-controls { margin-left:auto; display:flex; align-items:center; gap:4px; }
.chart-link { color:var(--ink-2); font-size:12px; font-weight:650; text-decoration:none; padding:7px 10px; border-radius:var(--r-2); white-space:nowrap; background:transparent; border:1px solid transparent; transition:background-color var(--t-1) var(--ease),color var(--t-1) var(--ease); }
.chart-link:hover { color:var(--ink); background:var(--control); }
.dock-drawer>summary { display:flex; align-items:center; min-height:32px; padding:6px 10px; border-radius:var(--r-2); border:1px solid transparent; list-style:none; font-size:12px; font-weight:650; color:var(--ink-2); white-space:nowrap; transition:background-color var(--t-1) var(--ease),color var(--t-1) var(--ease); }
.dock-drawer>summary::-webkit-details-marker { display:none; }
.dock-drawer>summary:hover { background:var(--control); color:var(--ink); }
.dock-drawer[open]>summary { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-strong); }
.help-button { background:transparent; border-color:transparent; font-size:12px; color:var(--ink-2); }
.help-button:hover { color:var(--ink); }
.help-button[aria-expanded=true] { color:var(--accent-strong); background:var(--accent-soft); border-color:var(--accent-line); }
.drawer-content { position:absolute; bottom:calc(100% + 10px); right:0; width:420px; max-height:calc(100dvh - 100px); overflow:auto; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--shadow); animation:rise var(--t-2) var(--ease); }
.settings-drawer .drawer-content { right:0; width:380px; }
.drawer-heading { display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:14px; }
.drawer-heading h2 { font-size:15px; font-weight:750; color:#fff; }.drawer-heading>span { color:var(--ink-3); font-size:11.5px; }
.drawer-content label,.toolbar label,.layout-label,.airport-context label { color:var(--ink-3); font-size:11px; letter-spacing:.04em; }
.toolbar { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:10px; }
.toolbar label { display:block; margin-bottom:5px; }
.toolbar select { width:100%; }.toolbar>button { grid-column:1/-1; }
.storage { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline); }
.storage button { font-size:12px; }
.training-note { margin-top:12px; font-size:11.5px; color:var(--ink-3); line-height:1.6; }
.layout-label { display:block; margin:14px 0 5px; }
#layout,#operations,#time-of-day { width:100%; }
#operations { margin:5px 0 12px; }
#layout-note { margin-top:7px; }
.lighting-field { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline); }
.lighting-field label { display:block; margin-bottom:5px; }
.lighting-field .training-note { margin:0; grid-column:1/-1; }
.session-content>p { font-size:12px; color:var(--ink-2); margin-bottom:14px; }
.session-fields { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.session-fields label { display:grid; gap:5px; }
.session-fields input,.session-fields select { width:100%; }
.session-actions { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; }
.session-actions input { width:100px; flex:1; }
.session-actions button { font-size:12px; }
#room-status { overflow-wrap:anywhere; font-size:12px; color:var(--ink-2); }
#players { display:grid; gap:5px; font-size:12px; }
.player { display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--hairline); padding-top:7px; }
.help-panel { position:absolute; z-index:25; bottom:calc(var(--dock-height) + 20px); right:var(--edge); width:min(440px,calc(100% - 28px)); max-height:calc(100dvh - 100px); overflow:auto; padding:18px 20px; border-radius:var(--r-3); background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); animation:rise var(--t-2) var(--ease); }
.help-panel h2 { font-size:15px; margin-bottom:12px; color:#fff; }.help-panel p { font-size:12.5px; margin-top:9px; color:var(--ink-2); }.help-panel strong { color:var(--accent-strong); margin-right:5px; }
.shortcut-list { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; }
.shortcut-list strong { width:100%; }
kbd { display:inline-block; min-width:20px; padding:1px 6px; margin:0 2px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:var(--r-1); background:var(--control); color:var(--ink); font:inherit; font-size:11px; font-weight:650; text-align:center; }

/* ── 공항 지형 검토 ───────────────────────────────────────────────────────── */
.airport-context { position:absolute; z-index:19; left:var(--edge); top:70px; width:290px; max-height:calc(100dvh - var(--dock-height) - 90px); overflow:auto; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--shadow); }
.airport-context[hidden] { display:none; }
.airport-context label { display:block; margin:12px 0 5px; }
.airport-context select { width:100%; font-size:13px; }
.airport-context p { font-size:12px; line-height:1.6; margin-top:12px; color:var(--ink-2); }
.airport-context h2 { font-size:16px; color:#fff; }
#airport-display-close { font-size:12px; padding:6px 10px; }
.game-stage[data-display="reference"] .hud-panel,.game-stage[data-display="facility-preview"] .hud-panel { visibility:hidden; }
.game-stage[data-display="reference"] .scene-caption,.game-stage[data-display="facility-preview"] .scene-caption { max-width:calc(100% - 370px); left:auto; right:var(--edge); transform:none; }

/* ── 대화상자 · 결과 · 피드백 ─────────────────────────────────────────────── */
dialog { color:var(--ink); }
#new-session-dialog { width:min(420px,calc(100vw - 32px)); max-height:calc(100dvh - 24px); overflow:auto; padding:24px; border:1px solid var(--line-strong); border-radius:var(--r-4); color:var(--ink); background:var(--panel-raised); box-shadow:var(--shadow-3); }
#new-session-dialog h2 { margin:0 0 10px; font-size:18px; color:#fff; }
#new-session-dialog p { margin:0 0 20px; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
#taxi-route-dialog { width:min(940px,96vw); max-height:94dvh; border:1px solid var(--line-strong); border-radius:var(--r-4); padding:16px 18px 18px; background:var(--panel-raised); color:var(--ink); box-shadow:var(--shadow-3); }
#new-session-dialog::backdrop,#taxi-route-dialog::backdrop { background:rgba(2,9,14,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
dialog[open] { animation:dialog-in var(--t-2) var(--ease); }
dialog[open]::backdrop { animation:fade-in var(--t-2) var(--ease); }
.taxi-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.taxi-dialog-heading h2 { font-size:17px; margin:0; color:#fff; }
.taxi-dialog-heading button { min-height:36px; }
.taxi-route-editor { margin-top:8px; }
#taxi-route-dialog .taxi-editor-map { height:min(43dvh,440px); aspect-ratio:auto; min-height:220px; }
.session-outcome { position:fixed; z-index:25; top:50%; left:50%; transform:translate(-50%,-50%); width:min(450px,calc(100vw - 32px)); padding:26px; border:1px solid var(--line-strong); border-radius:var(--r-4); background:var(--panel-raised); box-shadow:var(--shadow-3); animation:dialog-in var(--t-2) var(--ease); }
.session-outcome[hidden] { display:none; }
.session-outcome h2 { margin:0 0 10px; font-size:20px; color:#fff; }
.session-outcome p { margin:0 0 20px; line-height:1.6; color:var(--ink-2); }
.feedback { position:fixed; z-index:50; bottom:calc(var(--dock-height) + 25px); left:50%; transform:translate(-50%,8px); padding:10px 16px 10px 14px; border-radius:var(--r-3); background:var(--panel-raised); border:1px solid var(--line-strong); border-left:3px solid var(--accent); color:var(--ink); box-shadow:var(--shadow); max-width:min(520px,calc(100% - 28px)); font-size:13px; line-height:1.5; opacity:0; pointer-events:none; transition:opacity var(--t-1) var(--ease),transform var(--t-2) var(--ease); }
.feedback.visible { opacity:1; transform:translate(-50%,0); }
.feedback.error { border-left-color:var(--danger); background:#2a1619; }

/* ── 3D 라벨 ──────────────────────────────────────────────────────────────── */
#world-labels { position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
.world-leader { position:absolute; height:1px; background:rgba(158,238,251,.55); transform-origin:0 50%; pointer-events:none; }
.world-label { position:absolute; transform:translate(-50%,-100%); pointer-events:auto; display:grid; justify-items:start; gap:1px; min-width:0; width:auto; min-height:26px; padding:3px 7px 4px; border:1px solid rgba(158,238,251,.35); border-radius:var(--r-1); background:rgba(7,18,26,.84); color:#f2fafc; font-size:11px; line-height:1.3; white-space:nowrap; text-align:left; box-shadow:0 1px 4px rgba(0,0,0,.35); transition:background-color var(--t-1) var(--ease),border-color var(--t-1) var(--ease); }
.world-label>span:first-child { font-weight:750; letter-spacing:.01em; }
.world-label small,.world-label .label-meta { color:var(--ink-2); font-size:10px; font-weight:400; }
.world-label:hover { background:rgba(14,34,46,.94); border-color:rgba(158,238,251,.7); color:#fff; }
.world-label:active { transform:translate(-50%,-100%); }
.world-label.selected { background:rgba(10,42,52,.95); border-color:var(--accent-strong); box-shadow:var(--accent-glow); }
.world-label:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* ── 모션 ─────────────────────────────────────────────────────────────────── */
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@keyframes rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes dialog-in { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
.session-outcome { animation-name:outcome-in; }
@keyframes outcome-in { from { opacity:0; transform:translate(-50%,calc(-50% + 8px)) scale(.985); } to { opacity:1; transform:translate(-50%,-50%); } }

/* ── 반응형: 레이아웃 예산은 유지하고 시각만 바꾼다 ─────────────────────── */
@media(min-width:1600px) { :root { --left-width:310px; --right-width:326px; --edge:18px; }.scope-wrap { height:260px; }.flight-panel { max-height:calc(100dvh - var(--dock-height) - 434px); }.strips { max-height:290px; } }
@media(max-width:1100px) { :root { --left-width:250px; --right-width:275px; --edge:10px; }.status-bar { left:auto; right:0; transform:none; gap:10px; }.scene-caption { max-width:calc(100% - 555px); }.scope-toolbar { flex-wrap:wrap; }.weather-chip { flex:1 1 100%; }.scope-wrap { height:190px; }.camera-controls button { padding:5px 7px; }.game-dock { gap:8px; }.playback { padding-left:8px; }.utility-controls { gap:1px; }.dock-drawer>summary { padding:6px 8px; }.flight-values { gap:5px; padding:7px 8px; }.flight-values>div { gap:1px; }.flight-values dd { font-size:13px; }.strip { padding:7px 8px 7px 12px; gap:3px 5px; }.strip .strip-data { gap:5px; } }
@media(max-height:720px) and (min-width:701px) { .scope-wrap { height:155px; }.map-hint { display:none; }.flight-panel { max-height:calc(100dvh - var(--dock-height) - 334px); }.strips { max-height:190px; }.event-panel ol { max-height:108px; }.instruction { margin:6px 0; padding:6px 0; }.flight-values { margin-top:6px; }.scene-caption { top:58px; }#scene-hint { display:none; } }
@media(max-height:720px) and (min-width:701px) {
  .game-stage:not([data-radar]) .scope-panel[open] { max-height:calc(100dvh - 62px - var(--dock-height) - 22px - 128px - 8px); overflow-y:auto; }
  .game-stage:not([data-radar]) .scope-panel>.panel-title { position:sticky; top:0; z-index:2; }
}
@media(max-width:860px) and (min-width:701px) { .brand h1,.seat-controls .seat-caption { display:none; } }
@media(min-width:701px) { .strips { max-height:175px; }.flight-panel { max-height:calc(100dvh - var(--dock-height) - 310px); }.event-panel { width:var(--left-width); }.pilot-request+ .flight-assignment { margin-top:7px; }.scene-caption { left:calc(var(--left-width) + var(--edge) * 2); right:calc(var(--right-width) + var(--edge) * 2); width:auto; max-width:none; transform:none; }#scene-status { max-width:100%; white-space:normal; overflow-wrap:anywhere; vertical-align:top; } }
@media(min-width:701px) { .flight-panel:not(.expanded) { max-height:max(170px,calc(100dvh - 62px - var(--dock-height) - 22px - var(--traffic-panel-h,250px) - 8px)); }.event-panel { max-height:max(120px,calc(100dvh - 62px - var(--dock-height) - 22px - var(--radar-panel-h,280px) - 8px)); overflow-y:auto; } }
@media(min-width:1600px) { .strips { max-height:240px; }.flight-panel { max-height:calc(100dvh - var(--dock-height) - 375px); } }
@media(max-width:1100px) and (min-width:701px) { .pilot-request { flex-wrap:wrap; gap:2px; }.pilot-request.transmitting>span { max-width:none; text-align:left; } }
@media(max-height:760px) and (min-width:701px) { .strips { max-height:126px; } }
@media(max-height:640px) and (min-width:701px) { .strips { max-height:70px; } }
@media(max-width:700px) {
  :root { --edge:8px; --dock-height:126px; --left-width:240px; --right-width:calc(100% - 16px); --blur:8px; }
  .wide-only { display:none; }
  .app-header { top:8px; }.brand { padding:5px 8px; min-height:34px; }.brand svg { width:19px; height:19px; }h1 { font-size:15px; }
  .status-bar { min-height:34px; padding:4px 10px; gap:8px; }#connection { max-width:84px; font-size:11.5px; }#sim-status { display:none; }#clock { min-width:48px; font-size:18px; }.scoreboard { gap:8px; padding-left:8px; }.scoreboard>span { font-size:11px; }.scoreboard strong { font-size:12px; margin-left:3px; }.scoreboard>span:first-child { display:none; }
  .seat-controls { position:absolute; top:42px; left:0; right:0; padding:3px 4px; min-height:34px; }
  .seat-controls label { flex:1; min-width:0; }.seat-controls label:first-of-type { flex:1.5; }
  .seat-controls select { width:100%; font-size:16px; min-height:28px; padding:2px 22px 2px 8px; }
  .scene-caption { top:87px; width:100%; max-width:calc(100% - 16px); }#scene-status { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; line-height:1.3; padding:2px 8px; }#scene-hint { display:none; }
  .scope-panel { top:110px; width:min(240px,calc(100% - 16px)); z-index:13; }.scope-panel:not([open]) { width:calc(50% - 12px); }.scope-panel .panel-title h2 { font-size:12px; }.scope-wrap { height:160px; }.scope-toolbar { flex-wrap:nowrap; gap:4px; padding:6px; }.weather-chip { flex:0 1 auto; font-size:11px; padding:3px 7px 3px 6px; }.weather-panel { margin:0 6px 6px; padding:8px; max-height:calc(100dvh - 520px); min-height:120px; overflow:auto; }.weather-readout { grid-template-columns:1fr; gap:4px; }.weather-open .scope-wrap,.weather-open .map-hint,.weather-open .runway-bar { display:none; }.scope-button { padding:4px 6px; }.segmented button { padding:4px 6px; }
  .event-panel { top:110px; right:var(--edge); bottom:auto; left:auto; width:min(270px,calc(100% - 16px)); z-index:14; max-height:calc(100dvh - var(--dock-height) - 110px); }.event-panel:not([open]) { width:calc(50% - 12px); }.event-panel .queue-note { display:none; }.event-panel ol { max-height:155px; }
  .flight-panel { top:auto; right:var(--edge); bottom:calc(var(--dock-height) + 192px); width:var(--right-width); max-height:min(265px,34dvh); }.flight-panel>.panel-title { min-height:32px; padding:6px 10px; }.inspector { padding:10px 12px 12px; }.flight-identity h2 { font-size:20px; }.phase-line { margin-top:3px; }.flight-values { position:absolute; top:46px; right:12px; gap:10px; margin:0; padding:4px 8px; }.flight-values>div { display:block; text-align:right; }.flight-values>div:last-child { display:none; }.flight-values dt { font-size:10px; margin-bottom:1px; }.flight-values dd { font-size:13px; }.instruction { margin:7px 0; padding:6px 0; }.command-heading { margin-bottom:5px; }#commands { grid-template-columns:1fr 1fr; }.command { padding:7px; }.command small { font-size:11.5px; }.command-note { grid-column:1/-1; }
  .flight-flow { margin:6px 0 5px; }.pilot-request { font-size:11px; padding:5px 8px 5px 10px; }.pilot-request strong { font-size:11px; }
  .flight-panel[data-phase="PARKED"]:not(.expanded) { max-height:min(355px,45dvh); }.flight-panel:not(.expanded) { bottom:calc(var(--dock-height) + 200px); }.flight-panel.expanded { top:110px; bottom:calc(var(--dock-height) + 16px); }.flight-panel.expanded .flight-flow>span>span { display:none; }
  .game-stage .flight-panel:not(.expanded) { max-height:max(44px,min(380px,calc(100dvh - var(--dock-height) - 352px))); }
  .control-fields input,.control-fields select { font-size:16px; }.flight-assignment { font-size:12px; }.control-group { margin-top:7px; }
  .traffic-section { bottom:calc(var(--dock-height) + 20px); right:var(--edge); width:var(--right-width); }.traffic-section>.panel-title { min-height:32px; padding:6px 10px; }.strip-filters { padding:4px 6px 0; }.strip-filters button { min-height:24px; }.strips { max-height:105px; padding:6px; gap:4px; grid-template-columns:1fr 1fr; }.strip { min-height:56px; grid-template-columns:1fr auto; padding:6px 8px 6px 11px; gap:3px 4px; }.strip .callsign { font-size:12px; }.strip .type { font-size:10.5px; }.strip .flight-kind { display:none; }.strip .phase { grid-column:1/-1; grid-row:2; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; }.strip .strip-data { display:none; }
  .game-dock { bottom:8px; height:var(--dock-height); padding:6px; gap:3px; display:grid; grid-template-columns:1fr; grid-template-rows:34px 34px 34px; }
  .camera-controls { grid-column:1/-1; grid-row:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }.camera-controls button { justify-content:center; padding:4px 2px; min-height:32px; gap:3px; font-size:11px; }.camera-controls svg { width:14px; height:14px; }.camera-controls #airport-display-open { flex:1; min-width:0; font-size:11px; padding:5px; }
  .playback { grid-column:1; grid-row:2; border:0; padding:0; gap:4px; justify-content:center; }#play { min-width:82px; padding:6px 10px; font-size:12px; }.playback select { width:70px; min-height:32px; padding:5px 24px 5px 8px; font-size:12px; }
  .utility-controls { grid-column:1; grid-row:3; margin:0; gap:0; justify-content:space-between; width:100%; }.chart-link { padding:5px 7px; font-size:11px; }.dock-drawer>summary,.help-button { min-height:32px; padding:5px 7px; font-size:11px; }
  .drawer-content,.settings-drawer .drawer-content { bottom:calc(100% + 8px); right:0; width:100%; max-height:calc(100dvh - 150px); padding:14px; }.session-fields { grid-template-columns:1fr 1fr; }.session-fields label:first-child { grid-column:1/-1; }.session-fields input,.session-fields select,.toolbar select,#time-of-day { font-size:16px; }.session-actions input { font-size:16px; }.help-panel { bottom:calc(var(--dock-height) + 16px); right:var(--edge); width:calc(100% - 16px); }.feedback { bottom:calc(var(--dock-height) + 18px); font-size:12px; }.scene-fallback { top:30%; font-size:13px; }
  .airport-context { top:auto; bottom:calc(var(--dock-height) + 15px); left:8px; width:calc(100% - 16px); max-height:30dvh; padding:12px; }.airport-context select { font-size:16px; }.airport-context .drawer-heading { position:sticky; top:-12px; background:var(--panel-2); padding:6px 0; z-index:1; }
  .game-stage[data-display="reference"] .scene-caption,.game-stage[data-display="facility-preview"] .scene-caption { top:88px; right:8px; left:8px; max-width:none; font-size:11px; }
}
@media(max-width:370px) { .brand svg { display:block; }.brand h1 { display:none; }.status-bar { gap:6px; padding:4px 8px; }#connection { max-width:72px; }.scoreboard { gap:5px; padding-left:6px; }.playback select { width:60px; }#play { min-width:75px; }.dock-drawer>summary,.help-button { padding:5px 4px; }.flight-values { gap:7px; }.flight-identity h2 { font-size:19px; } }
@media(max-width:700px) and (max-height:720px) { .flight-panel { bottom:calc(var(--dock-height) + 160px); max-height:32dvh; }.strips { max-height:96px; }.flight-values { display:none; }.instruction { display:none; }.phase-line { margin-bottom:7px; } }
@media(max-width:540px) { #taxi-route-dialog { padding:10px; }.seat-controls { gap:5px; }.taxi-dialog-heading h2 { font-size:15px; } }
/* When only the command header fits, keep its expand control above the dock.
   Expanded commands scroll beneath the existing sticky header. */
@media(max-width:700px) and (max-height:522px) {
  .game-stage .flight-panel { bottom:calc(var(--dock-height) + 16px); min-height:44px; z-index:16; }
  .game-stage .flight-panel:not(.expanded) { max-height:44px; }
  .game-stage .flight-panel.expanded { top:92px; max-height:none; }
  .game-stage .flight-panel>.panel-title { min-height:44px; }
}
@media(prefers-reduced-transparency:reduce) { :root { --panel:rgba(12,24,33,.97); --panel-2:rgba(18,34,46,.98); --blur:0px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } .feedback { transform:translate(-50%,0); } }

/* Round 6 (ground-ops): new-session choices, render quality, intensity chips, helicopter strip/status. */
.session-choices{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:6px 10px;align-items:end;margin-top:8px}
.session-choices .weather-option{grid-column:1/-1}
.quality-field { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline); }
.quality-field label { display:block; margin-bottom:5px; }
.quality-field .training-note { margin:0; grid-column:1/-1; }
.weather-intensity{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.weather-intensity>span{font-size:11px;color:var(--ink-3,#9fb4c0)}
.dialog-check{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:13px}
.strip.helicopter{border-left-color:#c9a2f2}
.strip.helicopter .callsign{color:#e2ccff}
.helicopter-status{margin:4px 0 0;color:#d8c2f5}
.weather-readout .wide{grid-column:1/-1}
.weather-readout .wide dd{white-space:normal}

#clear-selection { margin-left:auto; min-height:26px; padding:3px 7px; font-size:11px; color:var(--ink-2); background:var(--control); }
#clear-selection+#seat-label { margin-left:4px; }

#model-load-status { color:var(--ink-2); font-size:11px; margin-top:4px; max-width:100%; }

/* The map is a next-practice choice; use the established settings controls. */
.map-picker{display:grid;gap:6px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--hairline)}
.map-picker select{width:100%}
.map-picker .training-note{margin:0}
@media(max-width:700px){.map-picker select{font-size:16px}}

/* Compact HUD: one open task panel, with an explicit return to the camera. */
.compact-panel-close{display:none}
@media(max-width:700px),(max-width:950px) and (max-height:520px){
  .game-stage .flight-panel[open],.game-stage .flight-panel.expanded{top:auto;bottom:calc(var(--dock-height) + 56px);max-height:42dvh;min-height:0;overflow:auto;z-index:16}
  .game-stage .flight-panel:not([open]){top:auto;bottom:calc(var(--dock-height) + 56px);max-height:40px;min-height:0}
  .game-stage .flight-panel>.panel-title{min-height:40px}
  .flight-panel #inspect-toggle,.flight-panel #seat-label{display:none}
  .flight-panel .compact-panel-close{display:inline-flex;min-height:32px;white-space:nowrap}
  .game-stage .traffic-section{bottom:calc(var(--dock-height) + 8px);max-height:40dvh;overflow:auto}
  .game-stage .traffic-section .strips{max-height:calc(40dvh - 78px);overflow:auto}
  .game-stage[data-mobile-panel]:not([data-mobile-panel="flight-panel"]) .flight-panel:not([open]){display:none}
  .game-stage[data-mobile-panel]:not([data-mobile-panel="flight-panel"]):not([data-mobile-panel="traffic-panel"]) .traffic-section:not([open]){display:none}
  .game-stage .event-panel[open]{top:auto;bottom:calc(var(--dock-height) + 8px);max-height:42dvh;overflow:auto}
  .dock-drawer .drawer-content,.help-panel{max-height:42dvh;overflow:auto}
}

/* ── 게임 모드 (싱글/멀티 × 라이브/시나리오) ─────────────────────────────── */
.game-mode { display:grid; gap:6px; margin:0 0 10px; padding:8px 10px 10px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--panel-inset); min-width:0; }
.game-mode legend { padding:0 4px; color:var(--ink-2); font-size:12px; font-weight:700; }
.game-mode-row { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.game-mode-row button { min-height:36px; border-radius:0; margin-left:-1px; font-size:13px; }
.game-mode-row button:first-child { border-radius:var(--r-2) 0 0 var(--r-2); margin-left:0; }
.game-mode-row button:last-child { border-radius:0 var(--r-2) var(--r-2) 0; }
.game-mode-row button small { color:var(--ink-3); font-size:10.5px; font-weight:600; }
.game-mode-note { color:var(--ink-3); font-size:11.5px; line-height:1.45; }
.game-mode-open { width:100%; margin:-4px 0 10px; }
#new-session-dialog .game-mode { margin-top:10px; }

/* New-session dialog fields: a label sits under the previous control instead of over it; the mode note stays compact. */
#new-session-dialog .dialog-field { margin:10px 0 4px; }
#new-session-dialog .game-mode-note { margin:0; font-size:11.5px; line-height:1.45; color:var(--ink-3); }

/* ── 라이브 모드: 남은 시간·자료 상태 (docs/UI_FIXES_20261103.md §10) ─────── */
.live-remaining { padding:2px 8px; border:1px solid var(--accent-line); border-radius:999px; color:var(--accent-strong); font-size:11.5px; font-weight:700; white-space:nowrap; }
.live-banner { position:absolute; top:54px; left:50%; transform:translateX(-50%); z-index:13; max-width:min(560px,calc(100% - 32px)); padding:5px 12px; border:1px solid var(--accent-line); border-radius:999px; background:var(--panel); color:var(--accent-strong); font-size:12px; font-weight:650; text-align:center; pointer-events:none; }
.live-banner.warn { border-color:rgba(255,196,111,.55); color:var(--warning); }
@media(max-width:700px) { .live-banner { top:auto; bottom:calc(var(--dock-height) + 70px); left:8px; right:8px; transform:none; max-width:none; border-radius:var(--r-2); } }