/* ══════════ UI 테마: 게임 폰트 · 강철판 버튼 · 이미지 카드 ══════════ */
@font-face { font-family: 'BlackHan'; src: url('assets/fonts/BlackHanSans-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DoHyeon'; src: url('assets/fonts/DoHyeon-Regular.ttf') format('truetype'); font-display: swap; }
:root { --ember1: #f0782c; --ember2: #a8300f; --steel1: #2c353a; --steel2: #12171a; --edge: #5d6b70; --cream: #efe6d3; --gold: #ffc55a; --line: #34424a; }
html, body, button, input { font-family: 'DoHyeon', 'Malgun Gothic', sans-serif; }
h1, h2, h3, h4, button, #banner, .hud-box b, .wpn .nm, #quiz-q, #boss-bar .name, .coinline b, .tab { font-family: 'BlackHan', 'DoHyeon', sans-serif; font-weight: normal; }
h2 { letter-spacing: 0.06em; color: var(--cream); text-shadow: 0 0.08em 0 #000, 0 0 0.6em rgba(240, 120, 44, 0.25); }
.hud-box, .wpn, .card, .quiz-card, .howto, .review, #loadout, .slot { border-radius: 0; }
.hud-box .lbl { font-family: 'DoHyeon', sans-serif; }

/* 버튼: 모서리를 깎은 강철판 */
button {
  --cut: 0.55em;
  color: var(--cream); letter-spacing: 0.05em; border-radius: 0;
  background: linear-gradient(180deg, var(--steel1), var(--steel2));
  border: 1px solid var(--edge);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.5);
  text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.6);
}
button:hover { background: linear-gradient(180deg, #3a464c, #182024); border-color: var(--gold); color: #fff; transform: translateY(-1px); }
button.big {
  background: linear-gradient(180deg, var(--ember1) 0%, #d4501c 45%, var(--ember2) 100%);
  border: 1px solid #ffb070; color: #fff7ea;
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.6), inset 0 -3px 0 rgba(60, 10, 0, 0.45);
}
button.big:hover { background: linear-gradient(180deg, #ff9142, #e05e22 45%, #b8380f); }
button:disabled { filter: grayscale(0.8) brightness(0.6); }
button.danger { background: linear-gradient(180deg, #6a1f17, #3a0f0b); border-color: #c0573f; }

/* 타이틀 */
#title h1 {
  font-family: 'BlackHan', sans-serif; font-size: 7.2em; letter-spacing: 0.06em; line-height: 1.05;
  background: linear-gradient(180deg, #fffaf0 0%, #e9dfcd 46%, #a39580 54%, #dccfb8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 0.02em rgba(30, 14, 8, 0.9);
  filter: drop-shadow(0 0.05em 0 #1a0c06) drop-shadow(0 0 0.3em rgba(255, 110, 40, 0.5)) drop-shadow(0 0.12em 0.25em rgba(0, 0, 0, 0.9));
  text-shadow: none;
}
#title .sub { font-size: 1.35em; letter-spacing: 0.22em; color: #f2d9b8; text-shadow: 0 0 0.4em #000, 0 0 0.8em #000; margin-top: 0.5em; }
#title .sub::before, #title .sub::after { content: '━━'; color: var(--ember1); margin: 0 0.7em; letter-spacing: 0; }
#title button.wide { width: 12em; font-size: 1.75em; letter-spacing: 0.3em; padding: 0.45em 0 0.5em; }
#title #btn-start { box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.6), inset 0 -3px 0 rgba(60, 10, 0, 0.45), 0 0 1.4em rgba(240, 100, 30, 0.45); }
#title #btn-option { background: linear-gradient(180deg, rgba(44, 53, 58, 0.94), rgba(14, 18, 20, 0.96)); }
#title #btn-demo { font-size: 1em; letter-spacing: 0.12em; padding: 0.35em 1.4em; background: rgba(10, 14, 16, 0.7); opacity: 0.85; }
#title #loading, #title #best { font-size: 1em; letter-spacing: 0.1em; opacity: 0.7; }

/* 메뉴: 이미지 카드 */
#menu h2 { font-size: 3.2em; margin-bottom: 0.5em; }
.menu-cards { gap: 2.2em; margin-bottom: 1.4em; }
.menu-card { position: relative; width: 31em; height: 19.4em; padding: 0; border-radius: 0; overflow: hidden; border: 2px solid var(--edge); background: #0b1013 center / cover no-repeat;
  clip-path: polygon(1.2em 0, 100% 0, 100% calc(100% - 1.2em), calc(100% - 1.2em) 100%, 0 100%, 0 1.2em); box-shadow: none; }
.menu-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.88) 100%); }
.menu-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: none; filter: brightness(1.15); }
.menu-card h3 { position: absolute; left: 0; right: 0; bottom: 0.6em; margin: 0; z-index: 1; font-size: 2.7em; letter-spacing: 0.12em; color: var(--cream); text-shadow: 0 0.06em 0 #000, 0 0 0.5em rgba(0, 0, 0, 0.9); }
.menu-card .ic, .menu-card p { display: none; }
.menu-card .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 0.4em; background: linear-gradient(90deg, var(--ember1), var(--ember2)); z-index: 1; }
#go-hangar .bar { background: linear-gradient(90deg, #4fd2ff, #1f6fa8); }
#menu .coinline { font-size: 1.3em; letter-spacing: 0.05em; }

/* 격납고 */
#hangar { background: #070b0d center / cover no-repeat; }
#hangar::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)); pointer-events: none; }
#hangar > * { position: relative; }
.hangar-head h2 { font-size: 2.6em; }
.vcard { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 0.7em; align-items: center; padding: 0.4em 0.5em; border-radius: 0; background: rgba(12, 18, 22, 0.88); border: 1px solid var(--line); }
.vcard > div { min-width: 0; }
.vcard .t { font-family: 'BlackHan', sans-serif; font-size: 1.2em; letter-spacing: 0.03em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard .r { font-size: 0.95em; opacity: 0.8; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard .sel { font-size: 0.85em; color: #7fffbf; line-height: 1.2; }
.preview-wrap { border-radius: 0; background: radial-gradient(ellipse at 50% 40%, rgba(40, 60, 70, 0.45), rgba(5, 9, 11, 0.6) 75%); border: 1px solid var(--line); }
#veh-title h3 { font-family: 'BlackHan', sans-serif; font-size: 2.5em; letter-spacing: 0.04em; text-shadow: 0 0.06em 0 #000; }
.chips { display: flex; gap: 0.45em; margin-top: 0.4em; flex-wrap: wrap; }
.chip { font-size: 1.05em; padding: 0.1em 0.75em; border: 1px solid currentColor; background: rgba(0, 0, 0, 0.5); white-space: nowrap; }
#veh-panel { border-radius: 0; background: rgba(9, 14, 17, 0.92); border: 1px solid var(--line); font-size: 1.05em; }
#veh-panel h4 { font-size: 1.1em; letter-spacing: 0.06em; color: var(--gold); margin: 0.2em 0 0.5em; }
.statrow { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 2.6em; gap: 0.6em; align-items: center; margin: 0.4em 0; }
.statrow span { white-space: nowrap; }
.statrow b { font-family: 'BlackHan', sans-serif; font-weight: normal; text-align: right; font-variant-numeric: tabular-nums; }
.cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.2em; height: 0.9em; }
.cells i { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.06); transform: skewX(-14deg); }
.cells i.on { background: linear-gradient(180deg, #9ff8ff, #2aaec2); border-color: #aff; }
.cells i.nx { background: linear-gradient(180deg, #ffe08a, #e09a20); border-color: #ffd76a; }
.dps { font-size: 0.95em; opacity: 0.75; margin: 0.2em 0 0.5em; }
.partrow { border-radius: 0; background: rgba(255, 255, 255, 0.035); border-left: 3px solid var(--line); margin: 0.5em 0; padding: 0.5em 0.6em; }
.partrow:hover { border-left-color: var(--gold); }
.partrow .ph { display: flex; justify-content: space-between; align-items: center; }
.partrow .ph b { font-family: 'BlackHan', sans-serif; font-weight: normal; font-size: 1.1em; }
.partrow .lk { font-size: 1em; opacity: 0.85; margin: 0.2em 0 0.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pips { display: inline-grid; grid-template-columns: repeat(5, 0.75em); gap: 0.18em; letter-spacing: 0; }
.pips i { height: 0.75em; background: rgba(255, 255, 255, 0.12); transform: skewX(-14deg); }
.pips i.on { background: var(--gold); }
.scard { border-radius: 0; background: rgba(12, 18, 22, 0.9); border: 1px solid var(--line); font-size: 0.95em; }
.scard img { border-radius: 0; }
.scard .t { font-family: 'BlackHan', sans-serif; font-size: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard .d { min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard .st { font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard button { white-space: nowrap; }

/* 스테이지 선택: 이미지 카드 */
#stages h2 { font-size: 2.8em; }
#stage-cards { grid-template-columns: repeat(3, 25em); gap: 1.3em; }
.stage { position: relative; height: 13.5em; min-height: 0; padding: 0; border-radius: 0; overflow: hidden; background: #0b1013 center / cover no-repeat; border: 2px solid var(--edge);
  clip-path: polygon(1em 0, 100% 0, 100% calc(100% - 1em), calc(100% - 1em) 100%, 0 100%, 0 1em); }
.stage::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.88) 100%); }
.stage:hover { border-color: var(--gold); filter: brightness(1.12); }
.stage .inner { position: absolute; left: 1em; right: 1em; bottom: 0.8em; }
.stage .no { font-family: 'BlackHan', sans-serif; font-size: 2.6em; color: var(--cream); letter-spacing: 0.06em; line-height: 1; text-shadow: 0 0.06em 0 #000, 0 0 0.4em rgba(0, 0, 0, 0.9); }
.stage h3 { font-family: 'DoHyeon', sans-serif; font-size: 1.55em; margin: 0.2em 0 0; color: #f2d9b8; text-shadow: 0 0 0.4em #000; }
.stage .stars { font-size: 1.35em; color: var(--gold); margin-top: 0.1em; letter-spacing: 0.08em; text-shadow: 0 0 0.3em #000; }
.stage .lock { position: absolute; top: 0.8em; right: 0.9em; z-index: 1; font-family: 'BlackHan', sans-serif; font-size: 1em; letter-spacing: 0.12em; padding: 0.15em 0.6em; border: 1px solid #aaa; background: rgba(0,0,0,0.6); }
.stage .badge { position: absolute; z-index: 1; top: 0.8em; right: 0.9em; border-radius: 0; font-family: 'BlackHan', sans-serif; letter-spacing: 0.08em; background: #1f8a5a; }
.stage.locked { filter: grayscale(1) brightness(0.38); }
.stage.locked:hover { filter: grayscale(1) brightness(0.38); border-color: var(--edge); }
.stage.endless .no { color: #e6c0ff; }
#loadout { background: rgba(9, 14, 17, 0.82); border: 1px solid var(--line); font-size: 1.1em; }
#loadout b { font-family: 'BlackHan', sans-serif; font-weight: normal; letter-spacing: 0.05em; color: var(--gold); }

/* 기타 화면 */
.quiz-card { border-color: var(--ember1); box-shadow: 0 0 3em rgba(240, 120, 44, 0.25); }
#quiz-tag { font-family: 'BlackHan', sans-serif; border-radius: 0; background: var(--gold); }
#quiz-opts button { font-family: 'DoHyeon', sans-serif; font-size: 1.45em; letter-spacing: 0.01em; }
.card h3 { font-size: 1.4em; }
.opt-grid label { font-family: 'BlackHan', sans-serif; letter-spacing: 0.04em; }
.dbtn { font-size: 1em; }

#hangar { padding: 0 2.4em; }
#hangar .hangar-body { width: 100%; max-width: 92em; }

#menu, #stages, #options, #result { background: linear-gradient(180deg, rgba(4, 7, 9, 0.72), rgba(4, 7, 9, 0.9)), url("assets/ui/title.jpg") center / cover no-repeat; }

/* ── 터치(태블릿) ── */
#game { touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; }
#touch-ui { position: absolute; inset: 0; pointer-events: none; }
.tbtn { position: absolute; pointer-events: auto; width: 5.2em; height: 5.2em; padding: 0; font-size: 1.15em; opacity: 0.82;
  background: linear-gradient(180deg, rgba(44, 53, 58, 0.85), rgba(14, 18, 20, 0.9)); touch-action: none; }
.tbtn.wide { width: 7.5em; }
.tbtn.held { border-color: var(--gold); filter: brightness(1.5); opacity: 1; }

#t-pause { right: 1.4em; top: 17.5em; width: 4em; height: 4em; }
.qnote { font-size: 0.9em; opacity: 0.75; }

/* 터치: 포격 · 망원경 (원형 아이콘 버튼) */
.tbtn.round { --cut: 0; clip-path: circle(50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1em; }
.tbtn svg { width: 55%; height: 55%; }
.tbtn.round span { font-size: 0.8em; letter-spacing: 0.05em; }
#t-fire { right: 2em; bottom: 9.5em; width: 8.5em; height: 8.5em; color: #fff3e0;
  background: radial-gradient(circle at 50% 35%, #ff8a3a, #c03a10 70%, #7a1d06); border: 2px solid #ffb070; opacity: 0.9; }
#t-fire.held { filter: brightness(1.35); transform: scale(0.95); }
#t-scope { right: 11.8em; bottom: 10.5em; width: 6em; height: 6em; color: var(--cream); }
#t-scope.held { color: #111; background: radial-gradient(circle, #ffe08a, #e09a20); border-color: #ffd76a; }
#t-scope .mag { font-family: 'BlackHan', sans-serif; font-size: 0.75em; }

/* 출격 점검 */
#brief { background: linear-gradient(180deg, rgba(4, 7, 9, 0.72), rgba(4, 7, 9, 0.9)), url("assets/ui/title.jpg") center / cover no-repeat; }
#brief-list { display: grid; grid-template-columns: repeat(3, 19em); gap: 1.2em; margin: 0.6em 0 1.2em; }
.bitem { background: rgba(9, 14, 17, 0.9); border: 1px solid var(--line); padding: 1em 1.1em; text-align: left;
  clip-path: polygon(0.8em 0, 100% 0, 100% calc(100% - 0.8em), calc(100% - 0.8em) 100%, 0 100%, 0 0.8em); }
.bitem h3 { margin: 0 0 0.3em; font-size: 1.5em; color: var(--cream); }
.bitem .rule { font-size: 1em; opacity: 0.8; line-height: 1.5; }
.bitem .st { margin-top: 0.6em; font-family: 'BlackHan', sans-serif; font-size: 1.2em; letter-spacing: 0.05em; }
.bitem.ok { border-color: #3dd6a0; } .bitem.ok .st { color: #7fffbf; }
.bitem.no { border-color: #ff6a4a; } .bitem.no .st { color: #ff8b6b; }
.bitem.cur { border-color: var(--gold); box-shadow: 0 0 1.2em rgba(255, 197, 90, 0.35); }
#mods { position: absolute; top: 4.6em; left: 1.2em; display: flex; gap: 0.4em; }
#mods span { font-size: 0.9em; padding: 0.1em 0.6em; background: rgba(0, 0, 0, 0.55); border: 1px solid currentColor; }

/* 문제 창: 뒤 화면(격납고·출격 점검·정비·결과)을 그대로 두고 어둡게 흐려서 덮는다 */
#quiz { z-index: 9; background: radial-gradient(ellipse at center, rgba(6, 16, 22, 0.78), rgba(0, 0, 0, 0.9)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.q-low #quiz { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(4, 10, 14, 0.92); }

/* 메뉴 카드 3장 */
.menu-card { width: 26em; height: 16.4em; }
#go-coop .bar { background: linear-gradient(90deg, #7fffbf, #2a9a6a); }
/* 협동 출격 */
#coop { background: linear-gradient(180deg, rgba(4, 7, 9, 0.72), rgba(4, 7, 9, 0.9)), url("assets/ui/title.jpg") center / cover no-repeat; }
#coop h2 { font-size: 3em; margin-bottom: 0.2em; }
.coop-pane { display: flex; flex-direction: column; align-items: center; gap: 1em; margin: 1em 0 0.8em; }
#coop-start { flex-direction: row; gap: 2.4em; }
.coop-join { display: flex; gap: 0.6em; align-items: stretch; }
#coop-code { font-family: 'BlackHan', sans-serif; font-size: 1.7em; width: 6.4em; text-align: center; letter-spacing: 0.25em; text-transform: uppercase; background: rgba(9, 14, 17, 0.92); color: var(--cream); border: 1px solid var(--line); padding: 0.3em 0.4em; outline: none; }
#coop-code:focus { border-color: var(--gold); }
.coop-code { font-size: 1.3em; letter-spacing: 0.1em; }
.coop-code b { font-family: 'BlackHan', sans-serif; font-size: 2.3em; color: var(--gold); letter-spacing: 0.3em; margin-left: 0.4em; vertical-align: middle; user-select: all; }
#coop-list { display: grid; grid-template-columns: repeat(4, 12.5em); gap: 0.8em; }
.cslot { background: rgba(9, 14, 17, 0.9); border: 1px solid var(--line); padding: 0.8em 1em; text-align: left; min-height: 5.6em; opacity: 0.55; }
.cslot b { display: block; font-family: 'BlackHan', sans-serif; font-size: 1.7em; color: var(--cream); }
.cslot span { opacity: 0.85; }
.cslot em { display: block; font-style: normal; font-family: 'DoHyeon', sans-serif; font-size: 1.2em; margin-top: 0.2em; }
.cslot.on { opacity: 1; border-color: #3dd6a0; }
.cslot.me { border-color: var(--gold); box-shadow: 0 0 1.2em rgba(255, 197, 90, 0.3); }
#coop-stage { display: flex; flex-wrap: wrap; gap: 0.5em; justify-content: center; max-width: 56em; }
#coop-stage:empty { display: none; }
#coop-wait { opacity: 0.85; font-size: 1.1em; }
#coop-status { min-height: 1.5em; color: #ffb4a0; font-size: 1.1em; }

/* 플레이 화면 오른쪽 위: 전체 화면 · 일시정지 (레이더 왼쪽) */
#hud-tools { position: absolute; top: 1.2em; right: 15em; display: flex; gap: 0.5em; pointer-events: auto; }
.hbtn { width: 2.8em; height: 2.8em; padding: 0; display: flex; align-items: center; justify-content: center; font-family: 'BlackHan', sans-serif; font-size: 1.1em; cursor: pointer;
  background: rgba(8, 20, 28, 0.62); border: 1px solid rgba(160, 220, 255, 0.3); border-radius: 0.3em; color: var(--cream); opacity: 0.85; clip-path: none; }
.hbtn:hover { opacity: 1; border-color: var(--gold); }
.hbtn svg { width: 60%; height: 60%; }
.hbtn .fs-out { display: none; } .hbtn.on .fs-in { display: none; } .hbtn.on .fs-out { display: inline; }
.hbtn.hidden { display: none; }
/* 일시정지에서 연 설정 */
#options.in-game { background: rgba(4, 8, 10, 0.9); z-index: 7; }
#options.in-game .no-ingame { display: none; }

/* 가독성: 문장·작은 글씨는 굵은 장식 글꼴 대신 일반 고딕으로. 장식 글꼴은 제목·큰 버튼에만 */
:root { --read: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif; }
.sub, .note, .howto, .qnote, #best, #loading, #hint, #banner small, .bitem .rule, .card .desc, .card .lvl, .card .next,
#quiz-why, #quiz-feedback, .review, #go-stats, #result-sub, #shop-sub, #coop-wait, #coop-status, .cslot span,
.hud-box .lbl, #wall-bar .name, .wpn .lv, #mods span, .coinline, #loadout, .opt-grid .qnote {
  font-family: var(--read); letter-spacing: 0; }
.sub { font-size: 1.3em; line-height: 1.65; }
.bitem .rule { font-size: 1.1em; line-height: 1.6; }
.bitem .st { font-family: 'DoHyeon', sans-serif; font-size: 1.35em; letter-spacing: 0.02em; }
.bitem h3, .card h3 { font-family: 'DoHyeon', sans-serif; letter-spacing: 0.02em; }
#quiz-q { font-family: var(--read); font-weight: 700; letter-spacing: 0; line-height: 1.55; }
#quiz-opts button { font-family: var(--read); font-weight: 600; font-size: 1.35em; }
#quiz-feedback { font-size: 1.15em; line-height: 1.6; }
#quiz-feedback b { font-weight: 700; }
/* 작은 버튼은 한 단계 가는 글꼴(제목 화면 START/OPTION·큰 버튼은 그대로) */
button:not(.big):not(.wide):not(.tab):not(.hbtn):not(.tbtn) { font-family: 'DoHyeon', sans-serif; letter-spacing: 0.02em; }
.opt-grid label { font-family: 'DoHyeon', sans-serif; font-size: 1.15em; }

/* 오답 디버프 */
#debuffs { position: absolute; top: 6.4em; left: 1.2em; display: flex; flex-direction: column; gap: 0.3em; }
#debuffs span { font-family: var(--read); font-size: 0.95em; padding: 0.15em 0.6em; color: #ff8b6b; background: rgba(40, 6, 0, 0.6); border: 1px solid rgba(255, 110, 80, 0.6); animation: blink 1.4s infinite; }
#quiz-feedback .pen { margin-top: 0.4em; color: #ff8b6b; font-weight: 700; }
/* 보스 등장 연출 중에는 HUD 를 숨긴다 */

#hud.cine > *:not(#banner) { visibility: hidden; }
#hud.cine #banner { visibility: hidden; }

/* 오답 잠금 */
#locked { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(ellipse at center, rgba(20, 8, 6, 0.9), rgba(0, 0, 0, 0.97)), url("assets/ui/title.jpg") center / cover no-repeat; }
#locked.hidden { display: none; }
#locked .lk-box { max-width: 52em; padding: 2em 3em; border: 1px solid rgba(255, 120, 90, 0.5); background: rgba(10, 6, 6, 0.75); }
#locked .lk-ic { font-size: 4em; }
#locked h2 { font-size: 3em; margin: 0.2em 0; color: #ffd0b8; }
#locked .lk-left { font-size: 1.5em; margin: 0.6em 0; font-family: var(--read); }
#locked .lk-left b { font-family: 'BlackHan', sans-serif; font-size: 1.6em; color: #ff8b6b; letter-spacing: 0.06em; margin-left: 0.3em; font-variant-numeric: tabular-nums; }
#locked .small { font-size: 1em; opacity: 0.7; }
#quiz-feedback .lockwarn { margin-top: 0.45em; font-size: 0.9em; color: #ffd76a; }

/* 학년·학기 선택 */
#grade { background: linear-gradient(180deg, rgba(4, 7, 9, 0.72), rgba(4, 7, 9, 0.9)), url("assets/ui/title.jpg") center / cover no-repeat; }
#grade h2 { font-size: 3em; margin-bottom: 0.1em; }
#grade-list.grades { display: grid; grid-template-columns: repeat(6, 9em); gap: 1em; margin: 1.2em 0 1.4em; }
#grade-list.sems { display: grid; grid-template-columns: repeat(2, 24em); gap: 1.4em; margin: 1.2em 0 1.4em; }
.gcard { height: 10em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2em; }
.gcard b { font-family: 'BlackHan', sans-serif; font-size: 3.6em; line-height: 1; color: var(--cream); font-weight: normal; }
.gcard span { font-family: 'DoHyeon', sans-serif; font-size: 1.3em; }
.gcard.on, .scard2.on { border-color: var(--gold); box-shadow: 0 0 1.2em rgba(255, 197, 90, 0.3); }
.scard2 { text-align: left; padding: 1.1em 1.3em; min-height: 13em; display: flex; flex-direction: column; gap: 0.6em; }
.scard2 h3 { margin: 0; font-size: 2em; color: var(--cream); }
.scard2 .units { display: flex; flex-wrap: wrap; gap: 0.35em; }
.scard2 .units span { font-family: var(--read); font-size: 0.9em; padding: 0.15em 0.55em; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); }
.scard2 .subj { font-family: var(--read); font-size: 1em; opacity: 0.9; margin-top: auto; }
.scard2 .subj b { color: var(--gold); }
#menu .coinline button.small { font-size: 0.75em; padding: 0.25em 0.8em; margin-left: 0.4em; vertical-align: middle; }
#grade-now { color: var(--gold); }
/* 문제 그림(수학 도형·시계·그래프) */
#quiz-fig { display: flex; justify-content: center; margin: -0.4em 0 0.9em; }
#quiz-fig.hidden { display: none; }
#quiz-fig svg { width: 22em; height: 13.75em; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }