:root { --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); }   /* 노치·홈 막대 — 겹침 게이트가 이 값을 바꿔 흉내 낸다 */
/* 달마중 — 우주 관제 톤(깊은 남색 + 민트 강조 + 금색 기록). 글자 ≥ 12px · 누르는 곳 ≥ 44px · 이모지 없음. */
:root {
  --gb-bg: #070b16; --gb-panel: rgba(255, 255, 255, 0.06); --gb-panel-2: rgba(255, 255, 255, 0.1);
  --gb-line: rgba(160, 200, 255, 0.16); --gb-text: #eaf1ff; --gb-dim: rgba(220, 232, 255, 0.66);
  --gb-accent: #7fe7c4; --gb-accent-ink: #032018; --gb-gold: #ffd166; --gb-danger: #ff6b6b;
  /* Okabe–Ito 색각 안전 팔레트 */
  --c-ok: #009e73; --c-warn: #e69f00; --c-bad: #d55e00; --c-info: #56b4e9; --c-sky: #0072b2; --c-pink: #cc79a7;
  --hud-bg: rgba(6, 12, 26, 0.62);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--gb-bg); color: var(--gb-text); font-family: var(--gb-font); overflow: hidden; -webkit-tap-highlight-color: transparent; }
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden], .hidden { display: none !important; }
button { font-family: var(--gb-font); }

.overlay, .screen { position: absolute; inset: 0; z-index: 10; overflow: auto; padding: max(16px, var(--st)) 14px 24px; }
.screen { background: radial-gradient(ellipse at 50% -20%, rgba(70, 110, 200, 0.35), transparent 60%), linear-gradient(#070b16ee, #070b16f5); }
#home { background: linear-gradient(180deg, rgba(7, 11, 22, 0.25), rgba(7, 11, 22, 0.88) 55%); }
.overlay { background: rgba(4, 8, 18, 0.82); display: grid; place-items: center; }
.load-box { text-align: center; width: min(360px, 90vw); }
.brand-big { font-size: 44px; font-weight: 900; letter-spacing: -1px; background: linear-gradient(90deg, #fff, #9fd9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bar { height: 10px; border-radius: 99px; background: var(--gb-panel-2); overflow: hidden; margin: 18px 0 10px; }
.bar span { display: block; height: 100%; width: 0; background: var(--gb-accent); transition: width .2s; }
#loadMsg { color: var(--gb-dim); font-size: 14px; }
.brand-ic { width: 34px; height: 34px; }
.home-foot { text-align: center; margin: 4px 0 0; }
.link { background: none; border: 0; color: var(--gb-dim); font-size: 13px; min-height: 44px; cursor: pointer; text-decoration: underline; }

/* 달토리 카드(동반자 + 다음 목표 한 줄) */
.buddy { display: flex; gap: 12px; align-items: center; background: var(--gb-panel); border: 1px solid var(--gb-line); border-radius: var(--gb-radius); padding: 10px 12px; }
.buddy img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.buddy b { display: block; font-size: 15px; }
.buddy small { color: var(--gb-dim); font-size: 12.5px; display: block; margin-top: 2px; }
.buddy .goal { height: 6px; background: var(--gb-panel-2); border-radius: 9px; margin-top: 6px; overflow: hidden; }
.buddy .goal span { display: block; height: 100%; background: var(--gb-gold); }

.panel-wrap { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.panel-wrap.wide { max-width: 980px; }
.panel-wrap.small { max-width: 340px; background: #0d1528; border: 1px solid var(--gb-line); border-radius: 18px; padding: 20px; }
.panel-head { display: flex; align-items: center; gap: 10px; min-height: 48px; flex-wrap: wrap; }
.panel-head b { font-size: 20px; }
.panel-head .sub { color: var(--gb-dim); font-size: 13px; flex-basis: 100%; }
.back { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--gb-line); background: var(--gb-panel); color: var(--gb-text); font-size: 24px; cursor: pointer; }
.ghost { min-height: 48px; border-radius: 14px; border: 1px solid var(--gb-line); background: var(--gb-panel); color: var(--gb-text); font: 700 15px var(--gb-font); cursor: pointer; }

/* 미션 목록 */
.mission-list { display: flex; flex-direction: column; gap: 8px; }
.m-card { display: flex; gap: 12px; align-items: center; text-align: left; min-height: 64px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--gb-line); background: var(--gb-panel); color: var(--gb-text); cursor: pointer; }
.m-card .no { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--gb-panel-2); font-weight: 900; flex: none; }
.m-card b { display: block; font-size: 15.5px; }
.m-card small { color: var(--gb-dim); font-size: 12.5px; }
.m-card .gr { margin-left: auto; font-weight: 900; color: var(--gb-gold); font-size: 18px; }
.m-card.locked { opacity: .45; cursor: not-allowed; }

/* 로켓 고르기 */
.builder { display: grid; grid-template-columns: 1fr 260px; gap: 14px; }
@media (max-width: 760px) { .builder { grid-template-columns: 1fr; } }
.slot-cols { display: flex; flex-direction: column-reverse; gap: 10px; }
.slot { background: var(--gb-panel); border: 1px solid var(--gb-line); border-radius: 14px; padding: 10px; }
.slot h4 { margin: 0 0 6px; font-size: 14px; color: var(--gb-dim); }
.slot .opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.opt { min-height: 64px; border-radius: 12px; border: 1.5px solid var(--gb-line); background: rgba(255,255,255,.03); color: var(--gb-text); text-align: left; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.opt b { display: block; font-size: 14.5px; }
.opt.on { border-color: var(--gb-accent); background: rgba(127, 231, 196, .1); }
.dv-panel { background: var(--gb-panel); border: 1px solid var(--gb-line); border-radius: 14px; padding: 12px; }
.dv-title { font-weight: 800; margin-bottom: 8px; } .dv-title small { color: var(--gb-dim); font-weight: 600; }
.dv-bar { position: relative; height: 300px; border-radius: 10px; background: rgba(255,255,255,.04); overflow: hidden; display: flex; flex-direction: column-reverse; }
.dv-bar .seg { width: 100%; border-top: 1px solid rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #031; }
.dv-bar .need { position: absolute; left: 0; right: 0; border-top: 2px dashed #fff; font-size: 12px; color: #fff; padding-left: 4px; }
.dv-info { margin-top: 8px; font-size: 13px; color: var(--gb-dim); line-height: 1.5; }
.dv-info .bad { color: var(--c-bad); font-weight: 800; }
.dv-info .ok { color: var(--gb-accent); font-weight: 800; }

/* ── HUD ── */
.hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; font-variant-numeric: tabular-nums; }
.hud > * { pointer-events: auto; }
.hud-top { position: absolute; top: max(8px, var(--st)); left: max(8px, var(--sl)); right: max(8px, var(--sr)); display: flex; gap: 8px; align-items: stretch; }
.hud-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--gb-line); background: var(--hud-bg); color: var(--gb-text); cursor: pointer; display: grid; place-items: center; }
.hud-clock { background: var(--hud-bg); border: 1px solid var(--gb-line); border-radius: 12px; padding: 4px 10px; min-width: 104px; }
.hud-clock small { display: block; font-size: 12px; color: var(--gb-dim); } .hud-clock b { font-size: 18px; }
.hud-phase { flex: 1; background: var(--hud-bg); border: 1px solid var(--gb-line); border-radius: 12px; padding: 4px 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hud-phase b { font-size: 15px; color: var(--gb-accent); } .hud-phase span { font-size: 13px; color: var(--gb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); max-width: min(560px, 92vw); display: flex; gap: 10px; align-items: center; background: rgba(8, 18, 36, .88); border: 1px solid var(--gb-line); border-radius: 14px; padding: 6px 12px 6px 6px; }
.radio img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #19304a; }
.radio b { display: block; font-size: 12.5px; color: var(--gb-gold); } .radio span { font-size: 14.5px; }
.hud-left { position: absolute; left: max(8px, var(--sl)); top: calc(max(8px, var(--st)) + 56px); display: flex; flex-direction: column; gap: 6px; width: 150px; }
.big { background: var(--hud-bg); border: 1px solid var(--gb-line); border-radius: 12px; padding: 4px 10px 6px; }
.big small { display: block; font-size: 12px; color: var(--gb-dim); } .big b { font-size: 24px; font-weight: 800; } .big i { font-style: normal; font-size: 13px; color: var(--gb-dim); margin-left: 3px; }
.big.warn b { color: var(--c-warn); } .big.bad b { color: var(--c-bad); }
.fuelbar { height: 6px; border-radius: 9px; background: rgba(255,255,255,.12); margin-top: 4px; overflow: hidden; } .fuelbar span { display: block; height: 100%; width: 100%; background: var(--gb-accent); }
.more { min-height: 44px; border-radius: 12px; border: 1px solid var(--gb-line); background: var(--hud-bg); color: var(--gb-dim); font-size: 12.5px; cursor: pointer; }
.more-box { background: var(--hud-bg); border: 1px solid var(--gb-line); border-radius: 12px; padding: 6px 10px; font-size: 12.5px; line-height: 1.7; }
.more-box b { color: var(--gb-text); float: right; }
.hud-right { position: absolute; right: max(8px, var(--sr)); top: calc(max(8px, var(--st)) + 56px); width: 200px; display: flex; flex-direction: column; gap: 6px; }
#mini { width: 200px; height: 200px; border-radius: 14px; border: 1px solid var(--gb-line); background: rgba(4, 10, 22, .7); }
.mini-cap { font-size: 12px; color: var(--gb-dim); text-align: center; min-height: 16px; }
.obj-list { background: var(--hud-bg); border: 1px solid var(--gb-line); border-radius: 12px; padding: 6px 10px; font-size: 12.5px; line-height: 1.55; }
.obj-list div { display: flex; gap: 6px; } .obj-list div::before { content: ''; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--gb-dim); margin-top: 4px; flex: none; }
.obj-list div.done { color: var(--gb-accent); } .obj-list div.done::before { background: var(--gb-accent); border-color: var(--gb-accent); }
.obj-list div.now { color: #fff; font-weight: 700; } .obj-list div.now::before { border-color: var(--gb-gold); }
.assist-band { position: absolute; top: 116px; left: 50%; transform: translateX(-50%); background: rgba(86, 180, 233, .18); border: 1px solid rgba(86, 180, 233, .6); color: #cfeaff; border-radius: 99px; padding: 4px 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.alarm { position: absolute; top: 150px; left: 50%; transform: translateX(-50%); background: rgba(213, 94, 0, .9); color: #fff; border-radius: 12px; padding: 8px 16px; font-weight: 900; font-size: 17px; animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }
.banner { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); text-align: center; background: rgba(5, 12, 26, .86); border: 1.5px solid var(--gb-accent); border-radius: 18px; padding: 14px 24px; max-width: 90vw; }
.banner b { display: block; font-size: 26px; color: var(--gb-accent); } .banner span { font-size: 15px; }
.banner.bad { border-color: var(--c-bad); } .banner.bad b { color: #ff9a6b; }
.count { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 96px; font-weight: 900; text-shadow: 0 4px 30px #000; }
.q-card { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); width: min(520px, 94vw); background: rgba(8, 18, 36, .94); border: 1.5px solid var(--gb-gold); border-radius: 16px; padding: 10px 14px 12px; }
.q-head { display: flex; align-items: center; gap: 8px; } .q-head img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; background: #19304a; }
.q-head b { color: var(--gb-gold); font-size: 14px; } .q-head span { margin-left: auto; font-size: 12px; color: var(--gb-dim); }
.q-card p { margin: 8px 0; font-size: 16px; line-height: 1.45; }
.q-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.q-choices button { min-height: 52px; border-radius: 12px; border: 1.5px solid var(--gb-line); background: rgba(255,255,255,.05); color: var(--gb-text); font: 700 15px var(--gb-font); cursor: pointer; padding: 6px 8px; }
.q-choices button.right { border-color: var(--c-ok); background: rgba(0, 158, 115, .25); } .q-choices button.wrong { border-color: var(--c-bad); background: rgba(213, 94, 0, .25); }
.q-explain { margin-top: 8px; font-size: 14px; color: #dfffee; background: rgba(0, 158, 115, .14); border-radius: 10px; padding: 8px 10px; line-height: 1.5; }
.hud-bottom { position: absolute; left: max(8px, var(--sl)); right: max(8px, var(--sr)); bottom: max(8px, var(--sb)); display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.throttle { background: var(--hud-bg); border: 1px solid var(--gb-line); border-radius: 14px; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; }
.throttle small { font-size: 12px; color: var(--gb-dim); } .throttle b { font-size: 14px; }
.thr-track { position: relative; width: 40px; height: 150px; border-radius: 10px; background: rgba(255,255,255,.08); touch-action: none; cursor: ns-resize; }
.thr-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 10px; background: linear-gradient(#ffd166, #e69f00); }
.thr-knob { position: absolute; left: -4px; right: -4px; height: 14px; border-radius: 6px; background: #fff; bottom: 0; transform: translateY(50%); box-shadow: 0 2px 6px #000a; }
.att-pad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); gap: 3px; }
.att-pad button { border-radius: 12px; border: 1px solid var(--gb-line); background: var(--hud-bg); color: var(--gb-text); font-size: 16px; cursor: pointer; touch-action: none; }
.att-pad [data-att=up] { grid-column: 2; grid-row: 1; } .att-pad [data-att=left] { grid-column: 1; grid-row: 2; } .att-pad [data-att=hold] { grid-column: 2; grid-row: 2; font-size: 12px; } .att-pad [data-att=right] { grid-column: 3; grid-row: 2; } .att-pad [data-att=down] { grid-column: 2; grid-row: 3; }
.att-pad button.on, .att-modes button.on { background: rgba(127, 231, 196, .25); border-color: var(--gb-accent); }
.att-modes { display: grid; grid-template-columns: repeat(2, minmax(64px, auto)); gap: 4px; }
.att-modes button { min-height: 44px; border-radius: 10px; border: 1px solid var(--gb-line); background: var(--hud-bg); color: var(--gb-text); font: 700 12.5px var(--gb-font); cursor: pointer; padding: 0 8px; }
.action { margin-left: auto; min-width: 150px; min-height: 64px; border-radius: 16px; border: 0; background: var(--gb-gold); color: #2a1c00; font: 900 18px var(--gb-font); cursor: pointer; box-shadow: 0 6px 22px rgba(255, 209, 102, .35); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.04); } }
.warp { display: flex; align-items: center; gap: 4px; background: var(--hud-bg); border: 1px solid var(--gb-line); border-radius: 12px; padding: 2px; }
.warp button { width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent; color: var(--gb-text); font-size: 18px; font-weight: 900; cursor: pointer; }
.warp b { min-width: 64px; text-align: center; font-size: 15px; } .warp.lock b { color: var(--gb-dim); }
.cams { display: flex; gap: 4px; } .cams button { min-height: 44px; min-width: 52px; border-radius: 12px; border: 1px solid var(--gb-line); background: var(--hud-bg); color: var(--gb-text); font: 700 13px var(--gb-font); cursor: pointer; }
.walk-pad { position: absolute; left: 10px; right: 10px; bottom: max(10px, var(--sb)); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.walk-pad > * { pointer-events: auto; }
.joy { width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid var(--gb-line); position: relative; touch-action: none; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: rgba(255,255,255,.35); }
.walk-btns { display: flex; gap: 8px; } .walk-btns button { min-width: 72px; min-height: 64px; border-radius: 16px; border: 1px solid var(--gb-line); background: var(--hud-bg); color: var(--gb-text); font: 800 15px var(--gb-font); cursor: pointer; }
.walk-btns button#btnUse { background: var(--gb-gold); color: #2a1c00; border: 0; }
.keys-hint { position: absolute; right: 8px; bottom: 200px; font-size: 12px; color: var(--gb-dim); text-align: right; line-height: 1.5; pointer-events: none; max-width: 220px; }
@media (max-width: 760px) {
  .hud-left { width: 118px; } .big b { font-size: 19px; } .hud-right { width: 140px; } #mini { width: 140px; height: 140px; }
  .keys-hint { display: none; } .thr-track { height: 110px; } .att-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
  .obj-list { display: none; } .action { min-width: 120px; }
}
/* 낮은 가로 화면(휴대폰 가로 ≈ 390 px 높이): 왼쪽 계기와 아래 조종대가 겹치지 않게 압축 */
@media (max-height: 520px) {
  .hud-top { top: max(4px, var(--st)); }
  .hud-btn { width: 40px; height: 40px; } .hud-clock { min-width: 84px; padding: 2px 8px; } .hud-clock b { font-size: 15px; }
  .hud-phase { padding: 2px 10px; } .hud-phase b { font-size: 13px; } .hud-phase span { font-size: 12px; }
  .hud-left { top: calc(max(4px, var(--st)) + 46px); width: 112px; gap: 4px; } .big { padding: 2px 8px 3px; } .big small { font-size: 11px; } .big b { font-size: 17px; } .big i { font-size: 11px; }
  #btnMore { display: none; }
  .hud-right { top: calc(max(4px, var(--st)) + 46px); width: 120px; } #mini { width: 120px; height: 120px; } .obj-list, .keys-hint { display: none; }
  .hud-bottom { bottom: max(4px, var(--sb)); gap: 6px; }
  .thr-track { height: 84px; width: 36px; } .throttle { padding: 4px 6px; }
  .att-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 2px; }
  .att-modes { grid-template-columns: repeat(3, minmax(56px, auto)); } .att-modes button { min-height: 44px; font-size: 12px; padding: 0 6px; }
  .walk-btns button { min-width: 60px; min-height: 52px; font-size: 13px; } .walk-btns { gap: 6px; }
  .radio { max-width: 46vw; }
}
@media (pointer: coarse) { .keys-hint { display: none; } }

/* 결과 */
#result .panel-wrap { text-align: center; }
.res-grade { font-size: 88px; font-weight: 900; line-height: 1; color: var(--gb-gold); text-shadow: 0 6px 30px rgba(255, 209, 102, .4); margin-top: 8px; }
.res-grade.bad { color: #ff9a6b; text-shadow: none; }
#result h2 { margin: 4px 0; } .res-why { color: var(--gb-dim); margin: 0; }
.res-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.res-parts div { background: var(--gb-panel); border: 1px solid var(--gb-line); border-radius: 12px; padding: 8px; font-size: 12.5px; color: var(--gb-dim); }
.res-parts b { display: block; color: var(--gb-text); font-size: 20px; }
#resGraph { width: 100%; height: auto; background: rgba(255,255,255,.03); border: 1px solid var(--gb-line); border-radius: 12px; }
.res-card { display: flex; gap: 12px; text-align: left; background: rgba(230, 159, 0, .12); border: 1px solid rgba(230, 159, 0, .5); border-radius: 14px; padding: 10px 12px; }
.res-card img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; flex: none; }
.res-card b { color: var(--gb-gold); } .res-card p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }
.res-learn { text-align: left; background: var(--gb-panel); border-radius: 12px; padding: 8px 12px; font-size: 14px; line-height: 1.6; }
.res-goal { color: var(--gb-gold); font-weight: 700; font-size: 14px; }
.res-btns { display: grid; grid-template-columns: 1fr; gap: 8px; }

/* 도감 */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; } .tabs button { min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--gb-line); background: var(--gb-panel); color: var(--gb-text); font: 700 14px var(--gb-font); cursor: pointer; }
.tabs button.on { background: var(--gb-accent); color: var(--gb-accent-ink); }
.codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cx { background: var(--gb-panel); border: 1px solid var(--gb-line); border-radius: 14px; padding: 10px; font-size: 13px; line-height: 1.5; min-height: 120px; }
.cx img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; background: #101c33; }
.cx b { display: block; font-size: 15px; margin: 6px 0 2px; } .cx.locked { opacity: .5; } .cx.locked b::after { content: ' — 아직 못 찾음'; color: var(--gb-dim); font-weight: 600; font-size: 12px; }
.set-box { display: flex; flex-direction: column; gap: 10px; }
.set-row { background: var(--gb-panel); border: 1px solid var(--gb-line); border-radius: 14px; padding: 10px 12px; }
.set-row b { display: block; margin-bottom: 6px; } .set-row small { color: var(--gb-dim); display: block; margin-bottom: 6px; font-size: 12.5px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; } .seg button { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--gb-line); background: rgba(255,255,255,.04); color: var(--gb-text); font: 700 14px var(--gb-font); cursor: pointer; }
.seg button.on { border-color: var(--gb-accent); background: rgba(127, 231, 196, .18); }
.credit-box { font-size: 13.5px; line-height: 1.7; color: var(--gb-dim); } .credit-box h3 { color: var(--gb-text); font-size: 15px; margin: 14px 0 4px; }

/* 색각 모드: 성공/실패를 색 말고 모양으로도(테두리 굵기) */
body.cb .obj-list div.done::before { border-radius: 50%; }
body.reduce * { animation: none !important; transition: none !important; }
body.big-text .radio span, body.big-text .q-card p { font-size: 18px; }

/* 로켓 고르기: 5칸 막대 */
.opt .lv { display: flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 12.5px; color: var(--gb-dim); }
.opt .lv i { font-style: normal; width: 64px; flex: none; }
.opt .lv b { width: 12px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.12); }
.opt .lv b.on { background: var(--gb-accent); }

/* 휴대폰 세로: 단계·할 일 글씨를 한 줄 통째로(잘리지 않게) — 계기 줄은 그만큼 아래로 */
@media (max-width: 560px) and (orientation: portrait) {
  .hud-top { flex-wrap: wrap; }
  .hud-phase { order: 5; flex-basis: 100%; min-height: 44px; }
  .hud-phase span { white-space: normal; overflow: visible; }
  .hud-left, .hud-right { top: calc(max(8px, var(--st)) + 118px); }
  .hud-left { width: 132px; } .big b { font-size: 20px; }
  .hud-right { width: 150px; } #mini { width: 150px; height: 150px; }
}

/* 초등 눈높이(2026-10-28 사용자 «조종도 어케 하라는 건지 버튼이 너무 어려워 — 초등 수준에 맞게»)
   견습: 자세 패드·모드·추력 막대 없음(자동) — 남는 건 큰 행동 단추·빨리 감기·카메라
   정규: 자세 패드 없음 · 모드 단추 3개(자동·앞으로·뒤로) */
body.lv-easy #attPad, body.lv-easy #attModes, body.lv-easy #throttleBox { display: none !important; }
body.lv-mid #attPad { display: none !important; }
/* 문제 창이 열리면 조종대를 숨긴다 — 보기 단추를 가리지 않게 */
body.quiz-open .hud-bottom, body.quiz-open .walk-pad { visibility: hidden; }
body.quiz-open .q-card { bottom: max(16px, var(--sb)); }
@media (max-width: 560px) and (orientation: portrait) { #btnMore { display: none; } .big { padding: 3px 9px 4px; } .big b { font-size: 18px; } }
@media (max-height: 520px) { body.quiz-open .hud-right { visibility: hidden; } .q-card { width: min(500px, calc(100vw - 2 * max(8px, var(--sl)) - 260px)); } }
/* 떠오르는 글(무전·안내·경보·배너)은 좌우 계기 사이 «글 길»에만 — 계기·지도 위로 덮지 않게(겹침 게이트가 잰다) */
.radio { top: calc(max(8px, var(--st)) + 56px); max-width: calc(100vw - 2 * (max(8px, var(--sl)) + 216px)); }
.assist-band { top: calc(max(8px, var(--st)) + 130px); max-width: calc(100vw - 2 * (max(8px, var(--sl)) + 216px)); }
.alarm { top: calc(max(8px, var(--st)) + 170px); max-width: calc(100vw - 2 * (max(8px, var(--sl)) + 216px)); }
.banner { max-width: calc(100vw - 2 * (max(8px, var(--sl)) + 216px)); }
@media (max-width: 760px) { .radio, .assist-band, .alarm, .banner { max-width: calc(100vw - 2 * (max(8px, var(--sl)) + 156px)); } }
@media (max-height: 520px) { .radio { top: calc(max(4px, var(--st)) + 46px); } .assist-band { top: calc(max(4px, var(--st)) + 118px); } .alarm { top: calc(max(4px, var(--st)) + 150px); } .radio, .assist-band, .alarm, .banner { max-width: calc(100vw - 2 * (max(8px, var(--sl)) + 132px)); } }
@media (max-width: 560px) and (orientation: portrait) {
  .radio { top: calc(max(8px, var(--st)) + 312px); left: max(8px, var(--sl)); right: max(8px, var(--sr)); transform: none; max-width: none; }
  .assist-band { top: calc(max(8px, var(--st)) + 396px); max-width: 94vw; }
  .alarm { top: calc(max(8px, var(--st)) + 432px); max-width: 94vw; }
  .banner { top: 56%; max-width: 92vw; }
}
body.quiz-open .assist-band { visibility: hidden; }
@media (max-height: 520px), (max-width: 560px) and (orientation: portrait) { body.quiz-open .alarm { visibility: hidden; } }