/* 인게임·메뉴 하위 화면 도트 통일 (사용자 지시 2026-11-10): 메인 화면 버튼과 같은 각진 모서리 + 금색 도트 테두리(9-slice),
   도트식 눌림·선택 상태, 픽셀 한글 글꼴(제목·버튼·큰 숫자만). style.css·menu.css·tutorial.css·lobby.css 뒤에 불러 덮어쓴다.
   테두리 그림: assets/ui/btn-frame*.png, panel-frame.png (16px, 자르기 6) — tools/make-ui-pixels.mjs
   테두리 그림 폭(border-image-width)은 실제 border 폭보다 넓게 두어 안쪽 여백 위에 겹쳐 그린다 → 기존 배치(높이·폭)가 거의 그대로다. */

/* ---- 픽셀 한글 글꼴: Galmuri11 Bold (OFL 1.1, assets/fonts/Galmuri-OFL.txt), 쓰는 글자만 남긴 서브셋 19KB — tools/make-font-subset.mjs ----
   12px 격자 글꼴이라 12의 배수(PC)·4의 배수(고해상도 폰)에서 도트가 고르다 */
@font-face { font-family: 'Galmuri11'; src: url('../../assets/fonts/Galmuri11-sub.woff2') format('woff2'); font-weight: 100 599; font-display: swap; }
@font-face { font-family: 'Galmuri11'; src: url('../../assets/fonts/Galmuri11-Bold-sub.woff2') format('woff2'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: 'Galmuri9'; src: url('../../assets/fonts/Galmuri9-sub.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --px-font: 'Galmuri11', "Pretendard", "Segoe UI", system-ui, sans-serif; --px-tiny: 'Galmuri9', 'Galmuri11', "Pretendard", system-ui, sans-serif;
  --fr: url('../../assets/ui/btn-frame.png'); --fr-hi: url('../../assets/ui/btn-frame-hover.png'); --fr-down: url('../../assets/ui/btn-frame-down.png');
  --fr-on: url('../../assets/ui/btn-frame-on.png'); --fr-pri: url('../../assets/ui/btn-frame-primary.png'); --fr-pri-hi: url('../../assets/ui/btn-frame-primary-hover.png');
  --fr-red: url('../../assets/ui/btn-frame-danger.png'); --fr-red-hi: url('../../assets/ui/btn-frame-danger-hover.png');
  --fr-panel: url('../../assets/ui/panel-frame.png');
  --panel-w: 12px; /* 큰 창 테두리: PC는 2배, 작은 화면은 1배 */
}
@media (max-width: 820px), (max-height: 560px) { :root { --panel-w: 6px; } }

/* ---- 본문까지 픽셀 글꼴 (사용자 지시 2026-11-10): 설명 문장·안내창·유닛 정보·표·라벨도 Galmuri11 보통 굵기, 굵은 글자(600 이상)는 Bold 면.
   기존 CSS의 0.85em 같은 비율 크기는 픽셀 격자를 흐리게 하므로 모두 정수 12px로 덮는다(아래 묶음). 아주 작은 칸 글자(칸 비용·NEW·전열)는 Galmuri9 10px.
   더 큰 글자(시계·제목 등)는 이 파일 아래쪽 규칙이 다시 정한다 */
html, body { font-family: var(--px-font); font-size: 12px; line-height: 1.5; font-synthesis: none; }
:root { font-size: 12px; }
@media (max-width: 820px), (max-height: 560px) { :root { font-size: 12px; } }
button.big, .small, .hud-label, .hud-small, .emergency span, #sel-stats, .result-cols h3, .result-cols ol, .grid-help,
.meter > span:first-child, .research-btn, .research-prog, .research-cancel, .tabs button, .pick-card .name, .pick-card .meta, .pick-card .cost,
.pick-card .tier, .pick-card .why, .menu-btn, .field, .field select, .field input, .field-label, .fpick small, .lobby-players li .state, .phase-line,
.research-toggle, .research-toggle .rt-state, body.research-open .research-btn, table.stats, .hint, .small-btn, .ally, table.stats small.owner,
.lesson .l-progress, .lesson .l-brief, .lesson-list .menu-btn small, .pings button, .pings button span, .pick-tier h3, .room-browser-head, .room-empty,
.boot-text, .unit-tip, .unit-tip .ut-head b, .unit-tip .ut-head span, .unit-tip .ut-weak, .unit-tip .ut-block, .result-tools .small-btn, .result-sub,
.grid-cap, .grid-cap .muted, #menu .util-btn, .coach-bubble, .cb-head, .cb-hint, .lobby-players .slot-side.state, .lobby-players .slot-btn,
.lobby-players .bot-controls select, .lobby-players li.team-head, .lobby-players li.vs, .lobby-players li.slot, .toast, .sudden-banner, input, select, textarea {
  font-size: 12px; }
.cell .c-cost, .cell .c-new, .grid-front { font-family: var(--px-tiny); font-size: 10px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.room-title { font-size: 24px; }
@media (max-width: 820px), (max-height: 560px) { .room-title { font-size: 16px; } }


/* ---- 버튼 (인게임 + 메뉴 하위 화면) ----
   기본 틀은 :where로 우선순위 0 → 아래 상태(주·위험·선택)와 기존 규칙의 글자색이 그대로 이긴다. 모양(모서리·바탕)만 !important */
:where(:is(.hud, .board, dialog, .result, .hint, .lesson, .card-panel, .coach, #menu .menu-page:not(.menu-home)) :is(button, select):not(.cell, .pick-card, .close-x, .room-entry)),
.research-toggle {
  border-radius: 0 !important; background: none !important; box-shadow: none !important; border-color: transparent !important; border-width: 2px;
  border-image: var(--btn-fr, var(--fr)) 6 fill / 6px / 0 stretch !important; image-rendering: pixelated; /* style.css의 border 줄임형이 border-image를 지우므로 !important, 모양은 --btn-fr로 바꾼다 */
  font-family: var(--px-font); font-weight: 700; font-size: 12px; letter-spacing: 0; color: #f3e6c4; text-shadow: 0 1px 0 #0d0905;
  transition: transform 60ms steps(1);
}
:where(:is(.hud, .board, dialog, .result, .hint, .lesson, .card-panel, .coach, #menu .menu-page:not(.menu-home)) :is(button, select):not(.cell, .pick-card, .close-x, .room-entry)):hover:not(:disabled),
.research-toggle:hover { --btn-fr: var(--fr-hi); color: #fff6dc; }
:where(:is(.hud, .board, dialog, .result, .hint, .lesson, .card-panel, .coach, #menu .menu-page:not(.menu-home)) button:not(.cell, .pick-card, .close-x, .room-entry)):active:not(:disabled) { --btn-fr: var(--fr-down); transform: translateY(1px); }
/* 버튼 글자 크기 통일 (기존 규칙의 0.85em 등 대신) */
:where(.hud, .board, dialog, .result, .hint, .lesson, #menu .menu-page:not(.menu-home)) :is(button, select):not(.cell, .pick-card, .close-x, .room-entry) { font-size: 12px; }
/* 선택됨: 밝은 금테 + 따뜻한 채움 */
.fpick.on, .tabs button[aria-selected="true"], :is(.hud, .board, .result, #menu) button[aria-pressed="true"],
body.research-open .research-toggle, .research-toggle.busy { --btn-fr: var(--fr-on); color: #ffe3a0; }
/* 주 버튼: 놋쇠 채움 판 */
:is(.board, dialog, .result, .hint, .lesson, .coach, #menu) button.primary { --btn-fr: var(--fr-pri); color: #1a1307; text-shadow: 0 1px 0 #f8dc98; }
:is(.board, dialog, .result, .hint, .lesson, .coach, #menu) button.primary:hover:not(:disabled) { --btn-fr: var(--fr-pri-hi); color: #1a1307; }
:is(.board, dialog, .result, .hint, .lesson, .coach, #menu) button.primary:active:not(:disabled) { --btn-fr: var(--fr-pri); filter: brightness(0.85); }
/* 위험: 폭탄·삭제 */
.hud .emergency, :is(dialog, .board) button.danger { --btn-fr: var(--fr-red); color: #ffd2b0; }
.hud .emergency:hover:not(:disabled), :is(dialog, .board) button.danger:hover:not(:disabled) { --btn-fr: var(--fr-red-hi); color: #fff1e0; }
.hud .emergency.holding::after { inset: 4px; background: #ff8a5a66; }
/* 큰 버튼 글자: PC 24px, 작은 화면 16px */
.board #deploy, #menu .menu-page:not(.menu-home) .menu-row .menu-btn.primary { font-size: 24px; }
@media (max-width: 820px), (max-height: 560px) { .board #deploy, #menu .menu-page:not(.menu-home) .menu-row .menu-btn.primary { font-size: 16px; } }
/* 업그레이드 버튼: 이름·단계 글자는 작아서 12px 고정, 진행 칸도 각지게 */
.research-btn { font-size: 12px; }
.research-btn .r-lv, .research-btn .r-next { font-family: var(--px-font); }
.research-prog { border-radius: 0; border: 2px solid #4a3214; background: #0d0b09; }
.research-prog i, .research-toggle i { height: 2px; bottom: 4px; left: 4px; max-width: calc(100% - 8px); }
.lobby-players .slot-btn, .lobby-players .bot-controls select { border-radius: 0; }

/* ---- 창: 어두운 금테 판 ---- */
.unit-tip, dialog, .result, .card-panel, .hint, .lesson, .sudden-banner, .coach .coach-bubble, #menu .menu-page:not(.menu-home),
.room-browser, .room-create {
  border-radius: 0 !important; border-color: transparent; background: none; backdrop-filter: none;
  border-image: var(--fr-panel) 6 fill / var(--panel-w) / 0 stretch; image-rendering: pixelated;
}
dialog, .result, #menu .menu-page:not(.menu-home) { border-width: var(--panel-w); border-style: solid; }
.unit-tip { padding: 12px 14px; }
.unit-tip .ut-head img, .unit-tip .ut-ico { border-radius: 0; box-shadow: inset 0 0 0 2px #4a3214; }
.unit-tip .ut-head b { font-family: var(--px-font); font-size: 12px; }
.hint { border-image-source: var(--fr-on); padding: 8px 12px 8px 16px; }
.lesson { border-image-source: var(--fr-on); }
.sudden-banner { border-image-source: var(--fr-red); font-family: var(--px-font); font-size: 12px; padding: 12px 18px; }
.coach .coach-bubble { border-image-source: var(--fr-on); }
.coach.free .coach-bubble { border-image-source: var(--fr-panel); }
.coach-ring, .coach-ring::after { border-radius: 0 !important; }
/* 작은 판: 1배 테두리 */
.meter, .lobby-players li.slot, .ally, .room-code {
  border-radius: 0; border-color: transparent; background: none;
  border-image: var(--fr-panel) 6 fill / 6px / 0 stretch; image-rendering: pixelated; }
.meter { padding: 4px 8px; }
.lobby-players li.slot.ready, .lobby-players li.bot { border-image-source: var(--fr-on); }
.lobby-players li.slot.empty { border-image: none; border: 2px dashed #4a3214; background: none; }
.room-browser-head { background: #262421; color: #cbbd9c; font-family: var(--px-font); font-size: 12px; }
.room-entry { border-bottom-color: #4a321499; }
.room-entry:hover:not(:disabled), .room-entry:focus-visible { background: #2f2a22; }
.room-browser { padding: 4px; }
.toast { border-radius: 0; border: 2px solid #4a3214; background: #120f0ce8; font-family: var(--px-font); font-size: 12px; }

/* 하위 메뉴 창: 아래 버튼 줄(고정)은 창 안쪽 여백만큼만 당긴다 */
#menu .menu-page:not(.menu-home) { padding: 10px 12px; }
#menu .menu-page > .menu-row:last-of-type { bottom: -10px; margin: 4px -12px -10px; padding: 10px 12px; border-radius: 0; background: #1c1a18; border-top: 2px solid #4a3214; }
@media (max-height: 460px) {
  #menu .menu-page:not(.menu-home) { padding: 6px 10px; }
  #menu .menu-page > .menu-row:last-of-type { bottom: -6px; margin: 2px -10px -6px; padding: 6px 10px; }
}

/* ---- 상단바·편성판 테두리: 맞닿는 한 변만 도트 금테 ---- */
.hud { border-bottom: 0; box-shadow: 0 2px 0 #0008; background: #1c1a18;
  border-image: var(--fr-panel) 6 fill / 0 0 6px 0 / 0 stretch; image-rendering: pixelated; padding-bottom: 10px; }
.board { border-top: 0; background: #161411;
  border-image: var(--fr-panel) 6 fill / 6px 0 0 0 / 0 stretch; image-rendering: pixelated; padding-top: 14px; }
@media (max-width: 820px), (max-height: 560px) { .hud { padding-bottom: 8px; } .board { padding-top: 12px; } }
@media (max-height: 500px) and (orientation: landscape) {
  .hud { padding-bottom: 6px; }
  .board { border-left: 0; border-image-width: 0 0 0 6px; padding-top: 4px; padding-left: 10px; }
}
.sbar { border-radius: 0; border: 2px solid #4a3214; }
.team-dot { border-radius: 0; }
#deploy { box-shadow: none; }

/* ---- 편성판 칸·고르기 카드: 각진 모서리, 도트 선 ---- */
.cell { border-radius: 0 !important; border-width: 2px; }
.cell.filled { border-color: #7a5520; }
.cell.front { border-color: #4a3214; }
.cell .c-new { border-radius: 0; font-family: var(--px-font); }
.pick-card { border-radius: 0; border: 2px solid #4a3214; background: #1c1a18; }
.pick-card:not(.blocked):hover { border-color: #d4a24c; }
.pick-card img, .unit-detail img, .sel-head img { border-radius: 0; }
.pick-card .cost, .pick-card .tier, .pick-card .why { border-radius: 0; }
.pick-card .name { font-family: var(--px-font); font-size: 12px; }
.pick-tier h3 { font-family: var(--px-font); font-size: 12px; }
.sheet-head { border-bottom: 2px solid #4a3214; }
@media (max-width: 820px), (max-height: 560px) { .sheet { border-radius: 0; } }

/* ---- 결과 표 ---- */
table.stats th { font-family: var(--px-font); font-size: 12px; font-weight: 700; }
.result > .result-actions { border-top: 2px solid #4a3214; }

/* ---- 제목·큰 숫자 ---- */
.clock { font-family: var(--px-font); font-size: 24px; font-weight: 700; letter-spacing: 0.02em; text-shadow: 0 2px 0 #000; }
#credits { font-family: var(--px-font); font-size: 24px; vertical-align: -2px; }
.meter b { font-family: var(--px-font); font-size: 12px; }
.sheet-title, #menu .menu-page h2, #settings h2 { font-family: var(--px-font); font-size: 24px; font-weight: 700; letter-spacing: 0; color: #f6e2b0; text-shadow: 0 2px 0 #000; }
.result-title { font-family: var(--px-font); font-size: 36px; letter-spacing: 0.04em; text-shadow: 0 3px 0 #000; }
.room-title, .room-code b { font-family: var(--px-font); }
.room-code b { font-size: 36px; }
.ping-flash { font-family: var(--px-font); font-size: 24px; }
.sd-count { font-family: var(--px-font); font-size: min(34vh, 192px); -webkit-text-stroke: 0; text-shadow: 0 8px 0 #2a0d06, 0 0 40px #ff5a2aaa; }
.field-label, .field { font-family: var(--px-font); font-size: 12px; }
.field select, .field input { font-size: 12px; font-weight: 400; }
.field input, .join-row input { border-radius: 0; border: 2px solid #4a3214; }
.lesson .l-title { font-family: var(--px-font); font-size: 12px; }
@media (max-width: 820px), (max-height: 560px) {
  .clock { font-size: 16px; }
  #credits { font-size: 16px; vertical-align: 0; }
  .sheet-title, #menu .menu-page h2 { font-size: 16px; }
  .result-title { font-size: 24px; }
  .room-code b { font-size: 24px; }
}
@media (max-height: 500px) and (orientation: landscape) { .clock { font-size: 12px; } #credits { font-size: 12px; } }

/* ---- 메인 화면 버튼 글자도 같은 글꼴 ---- */
#menu .menu-home .menu-btn { font-family: var(--px-font); font-size: 12px; }
#menu .menu-home .mode-btn { font-size: 24px; }
#menu .menu-home .mode-btn.m-play { font-size: 24px; }
@media (max-height: 460px), (max-width: 639px) { #menu .menu-home .mode-btn, #menu .menu-home .mode-btn.m-play { font-size: 16px; } }

/* ---- 진영 고르기 (1대1/2대2, 진영) ---- */
.fpick { gap: 4px; padding: 8px 4px; }
.fpick b { font-size: 12px; }
.fpick small { font-weight: 400; font-size: 12px; color: #aaa398; text-shadow: none; }
.fpick .crest { display: flex; align-items: center; justify-content: center; height: 26px; font-size: 1em; color: #8a847a; }
.fpick.on .crest { color: #d4a24c; }

/* ---- 진영 고르기 도트 아이콘 (2026-11-10 사용자 피드백: 도트를 작게·정교하게): 13×13 컬러 그림(외곽선·명암), 고르기 카드는 2배 26px, 글 줄 안은 1배 13px.
   그림은 tools/make-ui-pixels.mjs → assets/ui/ico-crest-E/B/M, ico-random, ico-mirror, ico-crown.png. 고르지 않은 카드는 색을 빼 흐리게 */
.ico.ico-crest, .ico.ico-crown { width: 13px; height: 13px; vertical-align: -2px; -webkit-mask: none; mask: none; background: var(--ico-img) center / 100% 100% no-repeat; image-rendering: pixelated; }
.ico-crest-E { --ico-img: url('../../assets/ui/ico-crest-E.png'); }
.ico-crest-B { --ico-img: url('../../assets/ui/ico-crest-B.png'); }
.ico-crest-M { --ico-img: url('../../assets/ui/ico-crest-M.png'); }
.ico-random { --ico-img: url('../../assets/ui/ico-random.png'); }
.ico-mirror { --ico-img: url('../../assets/ui/ico-mirror.png'); }
.ico-crown { --ico-img: url('../../assets/ui/ico-crown.png'); }
.fpick .ico.ico-crest { width: 26px; height: 26px; filter: saturate(0.2) brightness(0.75); transition: filter 80ms steps(1); }
.fpick:hover .ico.ico-crest { filter: saturate(0.6) brightness(0.9); }
.fpick.on .ico.ico-crest { filter: none; }

/* 좁은 화면 보정: 세로 폰 상단바는 왼쪽 칸이 좁아 자원 숫자를 12px로, 초당 수입은 그 아래 줄로(옆 막대와 겹침 방지),
   가로 폰 업그레이드 열은 96px라 이름이 잘리지 않게 원래 글꼴·크기로 둔다 (숫자만 도트) */
@media (max-width: 820px) and (orientation: portrait) { #credits { font-size: 12px; } .hud-side .hud-value { line-height: 1.15; } #income { display: block; font-family: var(--px-tiny); font-size: 10px; } .hud-side .hud-info { flex: none; } .phase-line { font-family: var(--px-tiny); font-size: 10px; } }
@media (max-height: 500px) and (orientation: landscape) {
  .board .research-btn { font-size: 10px; }
  .board .research-btn :is(.r-name, .r-lv, .r-next) { font-family: var(--px-tiny); font-weight: 400; }
}
/* style.css의 button { font: inherit } 줄임형이 위의 글꼴을 덮으므로 버튼 글꼴만 !important (선택 상자는 읽기 쉬운 글꼴 유지) */
:where(.hud, .board, dialog, .result, .hint, .lesson, .card-panel, .coach, #menu .menu-page) button:not(.cell, .pick-card, .close-x, .room-entry), .research-toggle { font-family: var(--px-font) !important; }
/* 무작위 카드: 부제가 없어 아랫줄이 비어 보임 (사용자 지시 2026-11-10) → 빈 부제를 빼고 '?'를 조금 키워 아이콘+제목 묶음을 카드 세로 가운데로 */
.fpick:has(.ico-random) { justify-content: center; }
.fpick:has(.ico-random) small { display: none; }
.fpick:has(.ico-random) .crest { height: 26px; }
/* 무작위 ?는 13×13 그림을 꽉 채워 그려 다른 문장보다 커 보인다. 2배(26px) 그대로 두어 도트를 고르게 */