/* ══════════════════════════════════════════════════════════════════════════════════════════════
   화면 테마 C 「보물 상자」(2026-10-13 · 사용자 「보물상자를 유지한 상태에서 모두 권장안으로 개선」)
   — 로고 속 보물 상자 안: 짙은 나무 판 · 놋쇠 테 · 금빛은 받기 · 재화에만 · 보석 청록은 「가기」.
   규칙 정본: docs/pages/theme.md · 검토 기록: docs/plans/MOBILE_MINUTE_PLAY_THEME_REVIEW.md

   이 파일이 **맨 마지막**에 실린다(index.html <head> 의 마지막 stylesheet) — 같은 특이도면 여기가 이긴다.
   ⚠ 새 화면 · 새 단추를 만들 때는 아래 :root 의 색 이름(--panel · --brass · --claim · --go …)과
     글자 네 크기(--t-cap 10 · --t-body 12 · --t-ttl 15 · --t-num 24)만 쓴다. 화면 규칙에 색 값을 바로 적지 않는다.
   ⚠ 도트 글꼴은 제 크기에서만 또렷하다 — Galmuri9 10px · Galmuri11 12px(굵게 가능) · Galmuri14 15px · Galmuri11 24px.
     굵은 글꼴이 없는 Galmuri9 · 14 에 굵게를 걸면 브라우저가 가짜 굵게를 만들어 획이 번진다 → body 의 font-synthesis:none.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* 바탕 · 판 · 선 */
  --bg: #1a130f;
  --panel: #2a1f17;
  --panel2: #33261c;
  --wood-up: #3a2b20;
  --wood-deep: #120d0a;
  --line: #0b0806;
  /* 글 */
  --ink: #f2e6cf;
  --muted: #b6a184;
  /* 놋쇠(테 · 고른 것) */
  --brass: #c9a35a;
  --brass-hi: #ecd08e;
  --brass-lo: #8a6a2c;
  --brass-dim: #6e5426;
  /* 금빛 = 받기 · 재화(화면마다 받기 단추는 하나) */
  --gold: #f2c14e;
  --gold-lo: #b8862b;
  --claim: #e0b14f;
  --claim-hi: #f6d98f;
  --claim-lo: #a97b26;
  --claim-ink: #2a1a04;
  /* 보석 청록 = 가기 · 진행 · 켜짐 */
  --go: #2f9e92;
  --go-hi: #5cc7bb;
  --go-lo: #1f6f66;
  --go-ink: #effffb;
  --ok: #8de0d4;
  --ok-bg: #183a35;
  /* 흙(채굴장 · 땅 파기 단추) */
  --dirt: #5e4430;
  --dirt-lo: #3f2d1f;
  /* 던전 쪽 옛 변수도 같은 한 벌을 가리킨다(던전 · 펫 화면 바깥 자리까지) */
  --dq-ink: var(--ink);
  --dq-dark: var(--bg);
  --dq-panel: var(--panel);
  --dq-line: var(--line);
  --dq-gold: var(--gold);
  --dq-mint: var(--ok);
  --dq-blue: var(--go-hi);
  /* 글자 네 크기 */
  --t-cap: 400 10px/14px "Galmuri9", "Galmuri11", sans-serif;
  --t-body: 400 12px/18px "Galmuri11", "Galmuri9", sans-serif;
  --t-lab: 700 12px/16px "Galmuri11", "Galmuri9", sans-serif;
  --t-ttl: 400 15px/20px "Galmuri14", "Galmuri11", sans-serif;
  --t-num: 700 24px/26px "Galmuri11", "Galmuri9", sans-serif;
  /* 하단 메뉴 높이(놋쇠 판 36 + 글 16 + 틈) — 쪽 아래 여백 · 알림 자리가 이 값을 따른다 */
  --mode-nav-height: 64px;
  /* 큰 판 네 모서리 못 — 판 바탕 위에 겹쳐 그린다 */
  --rivets:
    linear-gradient(var(--brass), var(--brass)) 5px 5px / 2px 2px no-repeat,
    linear-gradient(var(--brass), var(--brass)) calc(100% - 5px) 5px / 2px 2px no-repeat,
    linear-gradient(var(--brass), var(--brass)) 5px calc(100% - 5px) / 2px 2px no-repeat,
    linear-gradient(var(--brass), var(--brass)) calc(100% - 5px) calc(100% - 5px) / 2px 2px no-repeat;
  --lid: inset 0 2px 0 rgba(201, 163, 90, .38), inset 0 -2px 0 rgba(0, 0, 0, .35);
}

/* ── 바탕 — 나무 결(가로 줄 30px 마다) ── */
body,
.loading-screen {
  background-color: var(--bg);
  background-image: repeating-linear-gradient(180deg, rgba(255, 236, 200, .025) 0 2px, transparent 2px 30px);
  background-size: auto;
}
body { font-synthesis: none; }
.dungeon-shell {
  background-color: var(--bg);
  background-image: repeating-linear-gradient(180deg, rgba(255, 236, 200, .025) 0 2px, transparent 2px 30px);
  background-size: auto;
}

/* ── 판 한 벌 — 나무 판 · 놋쇠 뚜껑 빛 · 못 넷. 작은 칸(펫 칸 · 줄)은 못 없이 ── */
.bar, .hud, .site, .panel, .claim-box, .shop-balance-bar, .home-hunt, .dungeon-panel, .dungeon-state {
  border: 2px solid var(--line);
  background: var(--rivets), var(--panel);
  box-shadow: var(--lid);
}
.pet-banner, .pet-slot, .pet-card {
  border: 2px solid var(--line);
  background-color: var(--panel);
  box-shadow: var(--lid);
}
.dungeon-panel { padding: 14px; }
.panel h2, .panel-title h2, .dungeon-panel h2 {
  font: var(--t-ttl);
  color: var(--brass-hi);
  text-shadow: none;
  letter-spacing: 0;
}
.panel h3 { font: var(--t-lab); color: var(--muted); }
.panel-title > strong {
  font: var(--t-cap);
  color: var(--muted);
  background: var(--wood-deep);
  border: 2px solid var(--line);
  box-shadow: inset 0 0 0 2px var(--brass-dim);
  padding: 4px 8px;
  text-shadow: none;
}
/* 영어 소제목(AUTO HUNT · STAGE SELECT …) — 한국어 제목이 이미 있다. 스크립트가 그리는 것까지 함께 접는다 */
.eyebrow { display: none !important; }

/* ── 머리 줄 ── */
.bar { padding: 8px 10px; }
.who { font: var(--t-lab); color: var(--ink); }
.bgm-toggle, .gh-board, .gh-chat, .gh-bag, .nc-inbox-open, .gs-open-btn {
  min-height: 34px;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  box-shadow: inset 0 0 0 2px var(--brass-dim);
}
.bgm-toggle:hover, .gh-board:hover, .gh-chat:hover, .gh-bag:hover, .nc-inbox-open:hover, .gs-open-btn:hover {
  background: var(--wood-up);
  color: var(--brass-hi);
}
.bgm-toggle.is-off { background: var(--wood-deep); color: var(--muted); }
.gh-board-icon { filter: none; }

/* ── 하단 메뉴 = 상자 쟁반 — 칸은 비어 있고, 고른 칸만 그림 뒤에 놋쇠 판이 깔린다(표시는 그 하나) ── */
.game-mode-nav {
  background: var(--wood-deep);
  border: 0;
  box-shadow: 0 -2px 0 var(--brass-lo), 0 -4px 0 var(--line);
  padding: 6px 6px calc(4px + env(safe-area-inset-bottom));
  gap: 2px;
}
.game-mode-nav button,
.game-mode-nav button.active {
  min-height: calc(var(--mode-nav-height) - 10px);
  flex-direction: column;
  gap: 2px;
  padding: 0 1px;
  border: 0;
  background: none;
  color: #9c8a70;
  font: var(--t-lab);
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: none;
}
.game-mode-nav button.active { color: var(--ink); }
.game-mode-nav button > span.gi {
  box-sizing: border-box;
  width: 44px;
  height: 36px;
  padding: 4px 8px;
  background-origin: content-box;
  background-color: transparent;
  filter: none;
  transform: none;
  transition: none;
}
.game-mode-nav button.active > span.gi {
  background-color: var(--brass);
  box-shadow: inset 2px 2px 0 var(--brass-hi), inset -2px -2px 0 var(--brass-lo), 0 0 0 2px var(--line);
  filter: none;
  transform: none;
}
.game-mode-nav button:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: -2px; }
.game-mode-nav[data-cols="6"] button, .game-mode-nav[data-cols="7"] button { letter-spacing: 0; }
/* 나만 보이는 칸(관리자 미리보기) — 자물쇠 이모지 대신 블록 자물쇠 */
.game-mode-nav button.is-private::after {
  content: "";
  top: 4px;
  right: 6px;
  width: 12px;
  height: 12px;
  background: url(/world/ui/block/lock.svg) center / contain no-repeat;
  opacity: .9;
}
/* 상점이 열려 있을 때 — 빛 번짐 대신 놋쇠 점 하나 */
body.pet-shop-live .game-mode-nav button[data-game-mode="shop"],
body.pet-shop-live .game-mode-nav button[data-game-mode="shop"].active,
body.pet-shop-live[data-pet-shop-mood="golden"] .game-mode-nav button[data-game-mode="shop"],
body.pet-shop-live[data-pet-shop-mood="mythic"] .game-mode-nav button[data-game-mode="shop"] {
  background: none;
  box-shadow: none;
  animation: none;
  filter: none;
}
body.pet-shop-live .game-mode-nav button[data-game-mode="shop"] .gm-icon { animation: none; filter: none; }
body.pet-shop-live .game-mode-nav button[data-game-mode="shop"]::before {
  content: "";
  position: absolute;
  top: 5px;
  right: calc(50% - 26px);
  width: 6px;
  height: 6px;
  background: var(--claim);
  box-shadow: 0 0 0 2px var(--line);
}
.game-mode-nav button[data-game-mode="shop"] { position: relative; }

/* ── 단추 한 벌 ──
   받기(금빛 · 화면마다 하나) · 보통(나무 + 놋쇠 테) · 가기(청록) · 흐림(못 누름) */
.big-action, .big-action.gold, .offline-btn, .cube-action.primary, .cube-action.cta-gold {
  border: 2px solid var(--line);
  background: var(--claim);
  color: var(--claim-ink);
  font: var(--t-lab);
  text-shadow: none;
  box-shadow: inset 2px 2px 0 var(--claim-hi), inset -2px -2px 0 var(--claim-lo), 0 3px 0 var(--line);
  animation: none;
  filter: none;
}
.big-action { min-height: 44px; padding: 12px; }
.offline-btn { min-height: 44px; padding: 10px 24px; }
.big-action:active, .offline-btn:active, .cube-action.primary:active, .cube-action.cta-gold:active {
  transform: translateY(3px);
  box-shadow: inset 2px 2px 0 var(--claim-lo);
}
.cube-action, .auto-mine-btn, .offline-btn.ghost, .section-back, .box-open-btn {
  border: 2px solid var(--line);
  background: var(--wood-up);
  color: var(--ink);
  font: var(--t-lab);
  text-shadow: none;
  box-shadow: inset 0 0 0 2px var(--brass-dim), 0 3px 0 var(--line);
  animation: none;
  filter: none;
}
.cube-action { min-height: 44px; padding: 10px; }
.cube-action:active, .auto-mine-btn:active, .offline-btn.ghost:active, .section-back:active, .box-open-btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 0 0 2px var(--brass-dim);
}
.cube-action.small {
  min-height: 34px;
  padding: 6px 12px;
  background: var(--go);
  color: var(--go-ink);
  box-shadow: inset 2px 2px 0 var(--go-hi), inset -2px -2px 0 var(--go-lo), 0 3px 0 var(--line);
}
.cube-action.small:active { box-shadow: inset 2px 2px 0 var(--go-lo); }
/* 큰 출발 단추(원정 시작) — 금빛 받기 모양 그대로 · 반짝이는 띠 · 그림 흔들림 · 빛 번짐 없이 */
.cube-action.cta-hero { min-height: 52px; font: var(--t-lab); letter-spacing: 0; text-shadow: none; animation: none; filter: none; }
.cube-action.cta-hero::before, .cube-action.cta-hero::after { animation: none !important; opacity: 0 !important; }
.cube-action.cta-hero .cta-icon { animation: none !important; filter: none !important; }
.cube-action.cta-hero:hover { transform: none; }
.cube-action.cta-hero:disabled, .big-action:disabled, .offline-btn:disabled, .cube-action:disabled, .box-open-btn:disabled {
  background: #2a231d;
  color: #7d6d5a;
  box-shadow: inset 0 0 0 2px #3a3128;
  filter: none;
  opacity: 1;
}

/* ── 홈 ── */
.hud { gap: 6px; padding: 10px 12px; }
.stat .label, .stat.big .label { font: var(--t-cap); color: var(--muted); }
.stat .val { font: var(--t-lab); color: var(--ink); }
.stat.big { border-bottom: 2px dashed var(--brass-dim); padding-bottom: 8px; }
.stat.big .val { font-size: 24px; color: var(--gold); text-shadow: none; }
.hud .unit, .unit { font: var(--t-cap); color: var(--muted); }
.site { padding: 12px; gap: 10px; }
#mine {
  border: 2px solid var(--line);
  box-shadow: 0 0 0 2px var(--brass-lo), 0 0 0 4px var(--line);
}
#mine:active { box-shadow: 0 0 0 2px var(--brass-lo), 0 0 0 4px var(--line), inset 0 2px 0 rgba(0, 0, 0, .18); }
/* 안내 문장(TR-8) — 화면에서 빼고 원문은 docs/pages/theme.md 「화면에서 뺀 안내 문장」에 둔다. 상태(수치 · 한도)를 담은 줄은 남긴다.
   정적 .system-note 아홉은 index.html 에서 걷었다 — 스크립트가 그리는 .system-note(경매 「다음 경매는 …」)는 상태라 그대로 */
.mine-tap-hint, .site .hint, .pet-desc, .item-desc, .af-auto-note { display: none; }
/* 「확장 예정 · 준비 중」 빈칸(옛 자동 훈련 판의 자리 표시) — 기능이 없는 칸은 보이지 않는다 */
.auto-training-roster-head:has(+ .auto-ext), .auto-ext { display: none; }
.mine-entrance-label { font: var(--t-cap); }
.auto-mine-btn { min-height: 44px; padding: 8px 12px; }
.auto-mine-btn .am-sub { font: var(--t-cap); color: var(--muted); }
.auto-mine-btn.active { background: var(--wood-deep); color: var(--brass-hi); animation: none; }
.auto-mine-btn.active .am-sub { color: var(--brass-hi); }
.claim-box { padding: 12px; gap: 10px; }
.claimable { font: var(--t-body); color: var(--muted); }
.claimable strong, .pet-banner strong, .offline-gain { font-size: 24px; color: var(--gold); text-shadow: none; }
/* 피버 · 크리티컬 — 이모지 대신 블록 그림 + 한국어 */
.fever-badge, .crit-pop {
  font: var(--t-lab);
  color: var(--claim-ink);
  background: var(--claim);
  border: 2px solid var(--line);
  box-shadow: inset 2px 2px 0 var(--claim-hi), inset -2px -2px 0 var(--claim-lo);
  text-shadow: none;
}
.fever-badge::before, .crit-pop::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url(/world/ui/block/fire.svg) center / contain no-repeat;
}
.crit-pop::before { background-image: url(/world/ui/block/bolt.svg); }

/* 홈 자동사냥 칸(10-13 B1) — 나무 판 한 벌 */
.home-hunt { padding: 10px 12px; }
.hh-text b { font: var(--t-lab); color: var(--ink); }
.hh-text small { font: var(--t-cap); color: var(--muted); }
.hh-chip, .oh-chip { font: var(--t-lab); color: var(--ink); background: var(--wood-deep); border: 2px solid var(--line); box-shadow: inset 0 0 0 2px var(--brass-dim); }
.hh-chip.ok { background: var(--ok-bg); color: var(--ok); box-shadow: none; }
.hh-day { font: var(--t-cap); color: var(--muted); }
.hh-day b { font: var(--t-lab); color: var(--ink); }
.hh-bar { height: 10px; border: 2px solid var(--line); background: var(--wood-deep); }
.hh-bar i { background: var(--go); }

/* 홈 · 사냥 · 펫 줄 단추(블록 그림 + 이름) — 네 칸 한 줄 */
.home-links, .hunt-links, .pet-hub-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.home-links .cube-action, .hunt-links .cube-action, .pet-hub-acts .cube-action {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 64px;
  padding: 8px 4px;
  font: var(--t-cap);
  color: #d9c6a6;
}
.home-links .cube-action[hidden], .hunt-links .cube-action[hidden], .pet-hub-acts .cube-action[hidden] { display: none; }
.pet-hub-acts { padding: 12px; }

/* ── 사냥 ── */
.stage-node { border: 2px solid var(--line); background: var(--wood-deep); color: var(--ink); box-shadow: inset 0 0 0 2px var(--wood-up); text-shadow: none; }
.stage-node small { color: var(--muted); }
.stage-node.cleared { color: var(--ok); }
.stage-node.selected {
  background: var(--brass);
  color: var(--claim-ink);
  box-shadow: inset 2px 2px 0 var(--brass-hi), inset -2px -2px 0 var(--brass-lo);
}
.stage-node.selected small { color: #4a3510; }
.stage-node:disabled { color: #5b4a3a; background: #150f0b; }
.stage-node .ti-lock { width: 16px; height: 16px; opacity: .8; }
.section-back { min-height: 36px; padding: 6px 12px; font: var(--t-lab); }
.system-note { font: var(--t-cap); color: var(--muted); }

/* ── 상점 ── */
.shop-section { border: 2px solid var(--line); background: var(--rivets), var(--panel); box-shadow: var(--lid); }
.shop-section-head strong { font: var(--t-ttl); color: var(--brass-hi); }
.shop-section-head span:empty { display: none; }
.shop-section-head em { font: var(--t-cap); color: var(--muted); }
.shop-section-empty { font: var(--t-body); color: var(--muted); }

/* ── 창(모달) 한 벌 — 결과 한 장 · 안내 · 닉네임 · 칭호 · 적립 … ── */
.offline-modal { background: rgba(10, 7, 5, .66); }
.offline-card {
  border: 2px solid var(--line);
  background: var(--rivets), var(--panel);
  box-shadow: var(--lid), 0 0 0 2px var(--brass-lo), 0 0 0 4px var(--line), 0 14px 34px rgba(0, 0, 0, .55);
  padding: 20px 18px;
}
.offline-title { font: var(--t-ttl); color: var(--brass-hi); text-shadow: none; margin-bottom: 10px; }
.offline-msg { font: var(--t-body); }
.offline-capped, .claim-sub, .claim-cap-note { font: var(--t-cap); color: var(--muted); }
/* 창 머리 그림 — 이모지 글자를 접고 블록 그림을 놓는다(창마다 뜻이 맞는 그림) */
.offline-emoji {
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: url(/world/ui/block/chest.svg) center / contain no-repeat;
}
#offlineModal .offline-emoji { background-image: url(/world/ui/block/pickaxe.svg); }
#noticeModal .offline-emoji { background-image: url(/world/ui/block/bell.svg); }
#warModal .offline-emoji { background-image: url(/world/ui/block/swords.svg); }
#surveyModal .offline-emoji { background-image: url(/world/ui/block/book.svg); }
#nickModal .offline-emoji { background-image: url(/world/ui/block/ribbon.svg); }
#signEngraveModal .offline-emoji { background-image: url(/world/ui/block/hammer.svg); }
#titleModal .offline-emoji { background-image: url(/world/ui/block/trophy.svg); }
#accountDeleteModal .offline-emoji { background-image: url(/world/ui/block/exit.svg); }
#claimModal .offline-emoji { background-image: url(/world/ui/block/rune.svg); }
.offline-boxes { font: var(--t-body); color: var(--ink); }
.offline-hunt { border-top: 2px dashed var(--brass-dim); }
.oh-head b, .oh-items { color: var(--gold); }

/* 아래에서 올라오는 창(홈 도우미 · 가방 · 적립 한도) */
#app .panel.as-sheet {
  border-radius: 0;
  box-shadow: var(--lid), 0 -2px 0 var(--brass-lo), 0 -4px 0 var(--line), 0 -10px 30px rgba(0, 0, 0, .55);
}
.isheet-close { background-color: var(--wood-up); border: 2px solid var(--line); box-shadow: inset 0 0 0 2px var(--brass-dim); }
.idle-sheet-shade { background: rgba(10, 7, 5, .62); }

/* ── 알림 띠 ── */
.toast, .dungeon-toast {
  border: 2px solid var(--line);
  background: var(--wood-up);
  color: var(--ink);
  font: var(--t-body);
  box-shadow: inset 0 0 0 2px var(--brass-dim), 0 8px 18px rgba(0, 0, 0, .45);
}

/* ── 블록 그림 자리(줄 단추 · 단추 앞 그림) — 무엇을 그릴지는 클래스 하나로 ── */
.ti { display: inline-block; flex: none; width: 28px; height: 28px; background: center / contain no-repeat; vertical-align: middle; }
.auto-mine-btn .ti, .big-action .ti, .offline-btn .ti { width: 18px; height: 18px; }
.ti-pickaxe { background-image: url(/world/ui/block/pickaxe.svg); }
.ti-bag { background-image: url(/world/ui/bag.svg); }
.ti-clock { background-image: url(/world/ui/block/clock.svg); }
.ti-target { background-image: url(/world/ui/block/target.svg); }
.ti-shield { background-image: url(/world/ui/block/shield.svg); }
.ti-flag { background-image: url(/world/ui/block/flag.svg); }
.ti-hammer { background-image: url(/world/ui/block/hammer.svg); }
.ti-orb { background-image: url(/world/ui/block/orb.svg); }
.ti-egg { background-image: url(/world/ui/block/egg.svg); }
.ti-book { background-image: url(/world/ui/block/book.svg); }
.ti-bolt { background-image: url(/world/ui/block/bolt.svg); }
.ti-rune { background-image: url(/world/ui/block/rune.svg); }
.ti-lock { background-image: url(/world/ui/block/lock.svg); }
.ti-map { background-image: url(/world/ui/block/map.svg); }
.ti-skull { background-image: url(/world/ui/block/skull.svg); }

@media (max-width: 360px) {
  .game-mode-nav button > span.gi { width: 40px; height: 34px; padding: 4px 7px; }
  .home-links .cube-action, .hunt-links .cube-action, .pet-hub-acts .cube-action { min-height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .big-action:active, .offline-btn:active, .cube-action:active, .auto-mine-btn:active, .section-back:active, .box-open-btn:active { transform: none; }
}

/* ── 치장 스티커(game.js — body.has-sticker · --sticker) ──
   옛 규칙(dungeon.css)은 고른 메뉴 칸 위에 3px 빛 막대 · 글자 빛을 그렸고, 그 막대가 놋쇠 판 위쪽에 겹쳤다
   (10-13 폰 「아이콘이 뒤 레이아웃 상단의 초록 바와 겹친다」 — 스티커를 낀 계정에서만 보인다).
   스티커 색은 하단 메뉴 윗줄과 고른 판의 테두리로만 보인다. */
body.has-sticker .game-mode-nav { box-shadow: 0 -2px 0 var(--sticker), 0 -4px 0 var(--line); }
body.has-sticker .game-mode-nav button.active,
body.has-sticker .game-mode-nav button[data-game-mode="battle"].active { box-shadow: none; text-shadow: none; }
body.has-sticker .game-mode-nav button.active span { filter: none; }
body.has-sticker .game-mode-nav button.active > .gi {
  box-shadow: inset 2px 2px 0 var(--brass-hi), inset -2px -2px 0 var(--brass-lo), 0 0 0 2px var(--sticker);
}

/* ── 자동사냥 3D — 사냥터 · 몬스터 마릿수(10-13 · 월드 사냥터 막대와 같은 1~100) ── */
.ah-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 6px; }   /* 게임 화면이 460px 라 늘 한 줄씩 */
.ah-pick[hidden] { display: none; }
.ah-pick label {
  display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 36px; padding: 0 8px;
  background: var(--panel2); box-shadow: var(--lid), 0 0 0 2px var(--line); color: var(--muted); font: var(--t-body);
}
.ah-pick label > span:not(.ti) { flex: none; }
.ah-pick .ti { width: 18px; height: 18px; }
.ah-pick select {
  flex: 1; width: 0; min-width: 0; height: 26px; padding: 0 4px; border: 0; border-radius: 0;   /* width:0 — 긴 구간 이름이 줄 폭을 밀지 않게(아이폰) */
  background: var(--wood-deep); color: var(--ink); font: var(--t-body); box-shadow: inset 0 0 0 2px var(--brass-dim);
}
.ah-pick b { min-width: 3ch; color: var(--brass-hi); font: var(--t-lab); text-align: right; font-variant-numeric: tabular-nums; }
.ah-pick small { flex: none; color: var(--muted); font: var(--t-cap); }
.ah-pick input[type="range"] { flex: 1; min-width: 0; margin: 0; accent-color: var(--brass); }