/* ═══════════════════════════════════════════════════════════════
   권쌤 암산짱 — UI 시스템 v2  (Mint & Jelly Accent on Clean B&W)
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Base */
  --bg: #FFF9E9;            /* Cream Ivory — 배경 */
  --card: #FFFFFF;          /* 카드 (섹션 배경은 Beige #F8F0E6) */
  --line: #D9EDEA;          /* Soft Teal 계열 구분선 */
  --ink: #2F3E56;           /* Dark Navy — 제목·텍스트 */
  --body: #5B6B7A;          /* Charcoal Gray — 본문 */
  --sub: #8A97A6;           /* 보조 */
  /* Primary */
  --mint: #16A394;          /* 메인 민트 (첫 화면 민트) */
  --mint-dark: #0F7F74;
  --mint-light: #DDF3F0;
  /* 하위 모드 캔디 컬러 (로고 팔레트) */
  --c-level: #F75C5C;   /* 급수 — Coral Pink (조금 진하게) */
  --c-free: #2FB889;    /* 자유 — Mint Green */
  --c-unju: #42B7DD;    /* 운주 — Sky Blue */
  --c-gugu: #FFC93C;    /* 구구단 — Sunshine Yellow */
  --mc: var(--mint);    /* 현재 모드 컬러 (body[data-mode] 로 바뀜) */
  /* Accent */
  --orange: #FFA45B;        /* Warm Orange */
  --orange-dark: #E88A3E;
  --yellow: #FFD86B;        /* Sunshine Yellow */
  --purple: #9C8FE8;        /* Lavender 진한 톤 */
  --purple-light: #D7D1FF;  /* Lavender */
  --danger: #FF6B6B;        /* Coral Pink */
  --danger-light: #FFE1E1;  /* Light Coral */
  /* Shape */
  --r: 18px;
  --r-sm: 14px;
  --shadow: 0 2px 4px rgba(47,62,86,.05), 0 8px 20px rgba(47,62,86,.08);
  --shadow-lg: 0 16px 44px rgba(47,62,86,.18);
  --pad: 20px;
  font-family: "NanumSquare", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, sans-serif;
  /* 호환용 별칭 */
  --teal: var(--mint); --teal-dark: var(--mint-dark); --bad: var(--danger); --ok: var(--mint-dark); --muted: var(--sub);
}
/* 문제 화면 공통 요소(프레임·시작·적용·ENTER) 색: 급수·운주 민트, 자유 하늘, 구구단 노랑 */
body[data-mode="level"] { --mc: var(--mint); } body[data-mode="unju"] { --mc: var(--mint); } body[data-mode="free"] { --mc: #5EC8E8; } body[data-mode="gugudan"] { --mc: #FFC93C; }
/* 젤리 틴트: 연한 배경 + 색 테두리 + 윗면 광택 */
.jelly { --jc: var(--mc); background: var(--jc); border: 0; box-shadow: 0 5px 0 color-mix(in srgb, var(--jc) 72%, #000), 0 10px 22px color-mix(in srgb, var(--jc) 30%, transparent); color: var(--tx, #fff); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--body); font-size: 16px; line-height: 1.5; touch-action: manipulation; user-select: none; -webkit-user-select: none; overflow: hidden; }
button { font: inherit; font-family: inherit; cursor: pointer; border: 0; color: inherit; background: none; }
input, select { font: inherit; font-family: inherit; color: var(--ink); }
b, strong { color: var(--ink); }

.screen { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; background: var(--bg); }
.screen.active { display: flex; }

/* ── 타이포 스케일 ── */
.h-title { font-size: 26px; font-weight: 700; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }
.h-card { font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.t-body { font-size: 15px; line-height: 1.5; color: var(--body); }
.t-meta { font-size: 13px; font-weight: 500; color: var(--sub); }

/* ── 버튼 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; font-size: 17px; font-weight: 700; background: var(--mint); color: #fff; border: 2.5px solid color-mix(in srgb, var(--mint) 70%, #000); box-shadow: 0 3px 0 color-mix(in srgb, var(--mint) 60%, #000); transition: filter .12s, transform .08s; }
.btn:active { filter: brightness(.96); transform: translateY(2px); box-shadow: none; }
.btn.cta { background: var(--orange); border-color: var(--orange-dark); box-shadow: 0 3px 0 var(--orange-dark); color: #fff; }
.btn.ghost, .btn.secondary { background: var(--card); color: var(--ink); border: 2.5px solid #BFE7E3; box-shadow: 0 3px 0 #BFE7E3; }
.btn.dark { background: var(--ink); color: #fff; border-color: #1a222d; box-shadow: 0 3px 0 #1a222d; }
.btn.danger { background: var(--danger); color: #fff; border-color: #B8453B; box-shadow: 0 3px 0 #B8453B; }
.btn.big { min-height: 60px; font-size: 19px; padding: 0 32px; }
.btn.small { min-height: 40px; font-size: 14px; padding: 0 14px; border-radius: 10px; }
.iconbtn { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 22px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.iconbtn:active { background: var(--mint-light); }
.iconbtn.danger-mode { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ── 카드 ── */
.card, .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }

/* ── 첫 화면 ── */
#s-splash { background: var(--mint); align-items: center; justify-content: center; }
#splash-btn { width: min(50vmin, 480px); height: min(50vmin, 480px); border-radius: 50%; background: var(--card); color: var(--ink); font-weight: 700; font-size: clamp(18px, 4.4vmin, 48px); line-height: 1.3; letter-spacing: -.01em;
  box-shadow: 0 24px 60px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; text-align: center; padding: 6%; word-break: keep-all; white-space: nowrap; transition: transform .12s, box-shadow .12s; }
#splash-btn:active { transform: scale(.97); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
#splash-btn img { width: 92%; max-height: 70%; object-fit: contain; display: block; pointer-events: none; }
#splash-btn .fallback-text { display: none; }
#splash-btn.no-logo img { display: none; } #splash-btn.no-logo .fallback-text { display: block; }
#s-splash .ver { position: absolute; bottom: 14px; right: 18px; color: rgba(255,255,255,.75); font-size: 13px; font-weight: 500; }

/* ── 상단바 ── */
.topbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--card); border-bottom: 2px solid var(--line); min-height: 68px; }
.topbar h1 { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); flex: 1; }
.topbar .back:not(.tb-btn) { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--mc) 80%, #000); background: color-mix(in srgb, var(--mc) 16%, #fff); }
.topbar .back:not(.tb-btn):active { filter: brightness(.95); }
.points-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 15px; color: var(--ink); }

/* ── 학생 선택 ── */
#student-grid { flex: 1; overflow-y: auto; padding: 18px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 14px; align-content: start; }
.tile { --jc: var(--dot, var(--mint)); position: relative; border-radius: var(--r); min-height: 86px; padding: 18px; font-weight: 700; font-size: 24px; color: var(--tx, #fff); text-shadow: 0 1px 2px rgba(0,0,0,.12); text-align: left;
  display: flex; align-items: center; justify-content: center; gap: 12px; transition: transform .08s, filter .12s; word-break: keep-all;
  background: var(--jc); border: 0; box-shadow: 0 5px 0 color-mix(in srgb, var(--jc) 72%, #000), 0 10px 22px color-mix(in srgb, var(--jc) 30%, transparent); color: var(--tx, #fff); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 0 color-mix(in srgb, var(--jc) 22%, transparent), 0 4px 14px color-mix(in srgb, var(--jc) 14%, transparent); }
.tile:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--jc) 72%, #000); }
.tile.deleting { border-color: var(--danger); background: var(--danger-light); }
.empty-hint { grid-column: 1 / -1; text-align: center; color: var(--sub); padding: 60px 20px; font-size: 16px; line-height: 1.7; }
.delete-banner { background: var(--danger-light); color: var(--danger); font-weight: 700; padding: 12px 20px; text-align: center; font-size: 15px; }

/* ── PIN ── */
.center-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 20px; overflow-y: auto; }
.pin-name { font-size: 26px; font-weight: 700; color: var(--ink); }
.pin-dots { display: flex; gap: 16px; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--mint); }
.pin-dots span.on { background: var(--mint); }
.pin-dots.shake { animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-12px)} 75%{transform:translateX(12px)} }
.keypad { display: grid; grid-template-columns: repeat(3, 92px); gap: 12px; }
.keypad button { height: 72px; border-radius: var(--r-sm); background: #fff; border: 2px solid var(--line); font-size: 28px; font-weight: 700; color: var(--ink); box-shadow: 0 3px 0 var(--line); }
.keypad button:active { background: var(--mint-light); border-color: var(--mint); }
.keypad button.wide { grid-column: span 2; }
.keypad button.act { background: var(--mint); color: #fff; border-color: var(--mint); }
.keypad.big { grid-template-columns: repeat(3, 110px); }
.keypad.big button { height: 84px; font-size: 32px; }
.err { color: var(--danger); font-weight: 700; min-height: 26px; font-size: 15px; }

/* ── 대시보드 ── */
.dash-body { flex: 1; overflow-y: auto; padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 14px; max-width: 784px; width: 100%; margin: 0 auto; }
.profile-card { display: flex; align-items: center; gap: 18px; padding: var(--pad) 24px; }
.profile-card .avatar { width: 64px; height: 64px; border-radius: 50%; background: #E6F8F3 !important; display: flex; align-items: center; justify-content: center; font-size: 34px; line-height: 1; flex: none; }
.profile-card .who { flex: 1; min-width: 0; }
.profile-card .who .name { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.profile-card .who .meta { font-size: 13px; font-weight: 500; color: var(--sub); margin-top: 2px; }
.profile-card .stat { text-align: center; padding: 0 12px; border-left: 1px solid var(--line); }
.profile-card .stat .v { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.profile-card .stat .k { font-size: 13px; font-weight: 500; color: var(--sub); }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mode-card { --jc: var(--mc); --tx: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 130px; padding: 18px 20px; text-align: left; color: var(--tx); border-radius: var(--r); transition: transform .08s, filter .12s; position: relative; overflow: hidden;
  background: var(--jc); border: 0; box-shadow: 0 5px 0 color-mix(in srgb, var(--jc) 72%, #000), 0 10px 22px color-mix(in srgb, var(--jc) 30%, transparent); color: var(--tx, #fff); }
.mode-card[data-mode="level"] { --jc: var(--c-level); } .mode-card[data-mode="free"] { --jc: var(--c-free); } .mode-card[data-mode="unju"] { --jc: var(--c-unju); } .mode-card[data-mode="gugudan"] { --jc: var(--c-gugu); --tx: #2B3644; }
.mode-card:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--jc) 72%, #000); }
.mode-card .txt { display: block; position: relative; }
.mode-card .txt .t, .mode-card .txt .d { display: block; }
.mode-card .txt .t { font-size: 28px; font-weight: 700; line-height: 1.3; color: var(--tx); letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.mode-card .txt .d { display: none; }

/* ── 옵션 패널 (운주/구구단 구버전 화면) ── */
.panel { padding: var(--pad); width: min(96vw, 720px); }
.panel h2 { margin: 0 0 12px; font-size: 19px; font-weight: 700; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: 15px; font-weight: 700; color: var(--body); display: inline-flex; align-items: center; }
.chip.sel { background: color-mix(in srgb, var(--mc) 18%, #fff); border-color: var(--mc); color: var(--ink); }
.chip.dis { opacity: .4; }
.row { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.row label { min-width: 110px; font-weight: 700; color: var(--ink); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.stepper button { width: 46px; height: 46px; font-size: 22px; font-weight: 700; color: var(--ink); }
.stepper span { min-width: 70px; text-align: center; font-weight: 700; color: var(--ink); }

/* ── (구버전) 문제 풀이 ── */
#quiz-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 14px; }
.progress { color: var(--sub); font-weight: 700; font-size: 14px; }
.flash-num { font-size: clamp(80px, 22vmin, 220px); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-height: 1.2em; display: flex; align-items: center; }
.flash-num.neg { color: var(--danger); }
.static-problem { font-size: clamp(48px, 12vmin, 120px); font-weight: 700; color: var(--ink); }
.answer-box { font-size: clamp(40px, 9vmin, 84px); font-weight: 700; min-width: 260px; min-height: 1.3em; border-bottom: 3px solid var(--mint); text-align: center; padding: 0 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.feedback { font-size: 26px; font-weight: 700; min-height: 40px; }
.feedback.ok { color: var(--mint-dark); } .feedback.bad { color: var(--danger); }
.analysis-card { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--r-sm); padding: 14px 16px; max-width: 720px; font-size: 15px; line-height: 1.5; user-select: text; color: var(--body); }
.analysis-card b { color: var(--ink); }
.result-list { width: min(96vw, 760px); max-height: 46vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; }
.result-list .r { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: flex-start; font-size: 15px; }
.result-list .r .mark { font-weight: 700; width: 26px; }
.result-list .r.bad .mark { color: var(--danger); } .result-list .r.ok .mark { color: var(--mint-dark); }

/* ── 모달 / 토스트 ── */
.modal-bg { position: fixed; inset: 0; background: rgba(17,24,39,.45); display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal-bg.open { display: flex; }
.modal { background: #fff; border-radius: var(--r); padding: 24px; width: min(94vw, 520px); max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.modal p { margin: 0 0 16px; color: var(--body); font-size: 15px; line-height: 1.5; }
.modal textarea, .modal input[type=text], .modal input[type=password], .modal input[type=number] { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; font-size: 17px; margin-bottom: 10px; user-select: text; -webkit-user-select: text; background: var(--bg); }
.modal textarea:focus, .modal input:focus { outline: none; border-color: var(--mint); background: var(--card); }
.modal textarea { min-height: 160px; line-height: 1.5; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.modal .actions .btn { min-height: 48px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--r-sm); font-weight: 700; font-size: 15px; z-index: 60; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: 1; }

/* ═══════════ 선택 화면 공통 (급수 / 자유 / 구구단 / 단 / 운주) ═══════════ */
/* 모드 제목: 크게, 아래에 모드 색 밑줄 */
.grade-head { text-align: center; padding: 18px 20px 4px; }
.grade-head h1 { margin: 0; font-size: clamp(28px, 4.4vmin, 36px); font-weight: 700; color: var(--ink); line-height: 1.25; letter-spacing: -.02em; }
.grade-head h1::after { content: ''; display: block; width: 56px; height: 5px; border-radius: 3px; background: var(--mc); margin: 8px auto 0; }
.grade-head p { display: none; }
#grade-grid, #free-grid, #gugu-grid, #dan-grid, #unju-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 24px 26px; align-content: start; max-width: 608px; width: 100%; margin: 0 auto; }
#grade-grid { max-width: 680px; grid-template-rows: repeat(7, minmax(0, 1fr)); overflow: hidden; align-content: stretch; gap: 12px 14px; padding: 12px 24px 22px; }
#grade-grid .grade-block { min-height: 0; height: 100%; padding: 6px 16px; font-size: clamp(24px, 4.6vmin, 34px); }
.grade-block { --jc: var(--dot, var(--mc)); position: relative; border-radius: var(--r); min-height: 68px; padding: 14px 16px; font-size: 25px; font-weight: 700; color: var(--tx, #fff); text-shadow: 0 1px 2px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; transition: transform .08s, filter .12s; word-break: keep-all;
  background: var(--jc); border: 0; box-shadow: 0 5px 0 color-mix(in srgb, var(--jc) 72%, #000), 0 10px 22px color-mix(in srgb, var(--jc) 30%, transparent); color: var(--tx, #fff); }
.grade-block:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--jc) 72%, #000); }
.grade-block small { display: block; font-size: 12px; font-weight: 600; color: var(--tx, #fff); opacity: .9; margin-top: 6px; text-shadow: none; }
#free-grid.one-col, #gugu-grid.one-col { grid-template-columns: 1fr; max-width: 448px; }
#free-grid .grade-block, #gugu-grid .grade-block { min-height: 86px; flex-direction: column; gap: 0; }
#dan-grid { grid-template-columns: repeat(3, 1fr); max-width: 512px; }
#dan-grid .grade-block.dan { min-height: 79px; font-size: 25px; }
#unju-grid { grid-template-columns: 1fr; grid-template-rows: repeat(6, minmax(0, 1fr)); max-width: 544px; overflow: hidden; align-content: stretch; gap: 12px; padding: 12px 24px 22px; }
#unju-grid .unju-block { min-height: 0; height: 100%; padding: 8px 20px 8px 16px; align-content: center; grid-template-columns: clamp(64px, 12vh, 104px) 1fr; column-gap: clamp(12px, 2vh, 22px); }
.unju-block { --jc: var(--dot, var(--mc)); position: relative; border-radius: var(--r); padding: 18px 18px; color: var(--tx, #fff);
  background: var(--jc); border: 0; box-shadow: 0 5px 0 color-mix(in srgb, var(--jc) 72%, #000), 0 10px 22px color-mix(in srgb, var(--jc) 30%, transparent); color: var(--tx, #fff); display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto; column-gap: 14px; align-items: center; text-align: left; color: var(--ink); box-shadow: var(--shadow); transition: transform .08s, border-color .12s, background .12s; }
.unju-block .lv { grid-row: 1 / span 2; align-self: center; font-size: clamp(17px, 3.1vh, 30px); font-weight: 800; letter-spacing: -.02em; color: var(--tx, #fff); background: rgba(255,255,255,.22); border: 2px solid color-mix(in srgb, var(--tx, #fff) 85%, transparent); text-shadow: 0 1px 2px rgba(0,0,0,.12); border-radius: 14px; padding: clamp(8px, 1.6vh, 16px) 0; text-align: center; line-height: 1.1; }
.unju-block .tt { grid-column: 2; font-size: clamp(18px, 2.9vh, 28px); font-weight: 800; line-height: 1.25; color: var(--tx, #fff); text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.unju-block .ds { grid-column: 2; font-size: clamp(12px, 1.6vh, 15px); font-weight: 600; color: var(--tx, #fff); opacity: .88; margin-top: clamp(3px, .8vh, 8px); line-height: 1.45; }
.unju-block:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--jc) 72%, #000); }

/* ═══════════ 문제 화면 (급수 / 자유 / 구구단 / 운주) ═══════════ */
#s-gquiz, #s-upr { background: var(--bg); }
.gq-header { display: flex; align-items: center; padding: 12px 20px; gap: 10px; background: var(--card); border-bottom: 2px solid var(--line); min-height: 68px; }
.gq-title { flex: 1; text-align: left; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.gq-btn { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 20px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.gq-btn:active { background: var(--mint-light); border-color: var(--mint); }
.gq-frame { flex: 1; margin: 16px 20px 20px; background: #fff; border: 2px solid color-mix(in srgb, var(--mc) 35%, #fff); border-top: 6px solid var(--mc); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; min-height: 0; box-shadow: var(--shadow); }
.gq-pills { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pill { background: color-mix(in srgb, var(--mc) 16%, #fff); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; }
#gq-stage, .up-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; position: relative; }

/* 준비 / 시작 */
/* 준비 화면(시작 버튼·준비 원)도 플래시 숫자와 같은 높이(화면 세로 가운데)에 */
.gq-ready, .up-ready { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 16px; width: 100%; }
#gq-stage .gq-ready { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% - 60px)); }
#gq-stage .gq-ready-clock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 60px)); }
.gq-ready-sub { color: var(--sub); font-weight: 500; font-size: 15px; }
.gq-start { width: min(42vmin, 220px); height: min(42vmin, 220px); border-radius: 50%; background: var(--mc); color: #fff; font-size: clamp(26px, 8vmin, 48px); font-weight: 700; border: 4px solid color-mix(in srgb, var(--mc) 75%, #000); box-shadow: 0 8px 0 color-mix(in srgb, var(--mc) 70%, #000), 0 18px 34px color-mix(in srgb, var(--mc) 30%, transparent); transition: transform .1s, box-shadow .1s; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.gq-start:active { transform: translateY(6px); box-shadow: 0 2px 0 color-mix(in srgb, var(--mc) 70%, #000); }
.gq-count { width: min(40vmin, 240px); height: min(40vmin, 240px); border-radius: 50%; background: color-mix(in srgb, var(--mc) 18%, #fff); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: pop .8s; }
.gq-count-lbl { font-size: clamp(14px, 3.4vmin, 22px); font-weight: 700; color: color-mix(in srgb, var(--mc) 80%, #000); }
.gq-count-num { font-size: clamp(60px, 18vmin, 140px); font-weight: 700; line-height: 1; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0 } 30% { transform: scale(1.04); opacity: 1 } 100% { transform: scale(1) } }
/* 플래시 숫자: 자릿수·부호와 상관없이 항상 같은 줄. 헤더·알약줄 때문에 무대 중심이 화면 중심보다 아래라 그만큼 위로 올림 */
.gq-num { font-size: clamp(120px, 42vmin, 360px); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; position: absolute; left: 0; right: 0; top: 50%; text-align: center; transform: translateY(calc(-50% - 60px)); white-space: nowrap; }
.gq-num .minus { display: inline-block; transform: scaleX(.75); transform-origin: center; margin-right: .02em; }

/* 답 입력 */
.gq-answer { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; padding: 16px var(--pad) 20px; }
.gq-answer > * { flex: none; }
.gq-answer .gq-static { flex: 0 1 auto; min-height: 0; overflow: hidden; display: flex; align-items: center; }
.gq-static { font-size: clamp(44px, 11vmin, 110px); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: auto; padding-top: 3vmin; letter-spacing: -.01em; }
.gq-static .op { color: color-mix(in srgb, var(--mc) 85%, #000); margin: 0 .15em; }
.gq-prompt { background: color-mix(in srgb, var(--mc) 18%, #fff); color: var(--ink); font-size: clamp(16px, 3.6vmin, 22px); font-weight: 700; padding: 10px 22px; border-radius: 999px; }
.gq-field { width: min(92%, 560px); border: 1.5px solid var(--mc); border-radius: var(--r); background: var(--card); text-align: right; padding: 8px 22px; font-size: clamp(40px, 9vmin, 72px); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.gq-field.shake { animation: shake .4s; }
.gq-fields { display: flex; gap: 14px; width: min(92%, 560px); }
.gq-fieldwrap { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gq-fieldwrap .lbl { font-weight: 700; color: var(--sub); font-size: 14px; padding-left: 6px; }
.gq-field.small { width: 100%; font-size: clamp(30px, 6.5vmin, 60px); border-color: var(--line); }
.gq-field.small.active { border-color: var(--mint); background: #FBFDFD; }
.gq-field.with-timer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gq-clock { width: .9em; height: .9em; flex: none; display: inline-flex; }
.gq-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gq-clock .bg { fill: #fff; stroke: color-mix(in srgb, var(--mc) 25%, #fff); stroke-width: 1.5; }
.gq-clock .fg { fill: none; stroke: color-mix(in srgb, var(--mc) 35%, #fff); stroke-width: 16; stroke-dasharray: 0 50.27; }
.gq-field.timeout { color: var(--danger); border-color: var(--danger); background: var(--danger-light); }
.gq-field.timeout .gq-clock .fg { stroke: color-mix(in srgb, var(--danger) 40%, #fff); }
.gq-pad { display: flex; gap: 12px; width: min(92%, 560px); }
.gq-keys { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gq-keys button { height: clamp(52px, 9vmin, 80px); border-radius: var(--r-sm); background: #fff; border: 2px solid var(--line); color: var(--ink); font-size: clamp(24px, 4.6vmin, 38px); font-weight: 700; box-shadow: 0 3px 0 var(--line); }
.gq-keys button:active { transform: translateY(2px); box-shadow: none; }
.gq-keys button:active { background: color-mix(in srgb, var(--mc) 16%, #fff); border-color: var(--mc); }
.gq-keys button.dot { font-size: clamp(30px, 6vmin, 52px); }
.gq-enter { width: 22%; border-radius: var(--r-sm); background: var(--mc); color: #fff; border: 2.5px solid color-mix(in srgb, var(--mc) 70%, #000); box-shadow: 0 3px 0 color-mix(in srgb, var(--mc) 60%, #000); font-size: clamp(16px, 3.2vmin, 24px); font-weight: 700; letter-spacing: .02em; }
.gq-enter:active { filter: brightness(.94); }

/* 결과 */
.gq-result, .gq-analysis { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 16px var(--pad); gap: 14px; min-height: 0; }
.gq-result-head { display: flex; gap: 16px; }
.gq-result-line { flex: 1; display: flex; flex-direction: column; gap: 2px; background: #F8F0E6; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 18px; }
.gq-result-line .k { font-size: 13px; font-weight: 500; color: var(--sub); }
.gq-result-line .v { font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.gq-table-wrap { flex: 1; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); min-height: 0; }
.gq-table { width: 100%; border-collapse: collapse; font-size: 16px; table-layout: fixed; }
.gq-table th { background: color-mix(in srgb, var(--mc) 16%, #fff); color: var(--ink); font-weight: 700; font-size: 13px; padding: 10px 8px; position: sticky; top: 0; }
.gq-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: center; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.gq-table th:nth-child(1), .gq-table td:nth-child(1) { width: 12%; color: var(--sub); font-weight: 500; }
.gq-table th:nth-child(2), .gq-table td:nth-child(2) { width: 12%; }
.gq-table th:nth-child(4), .gq-table td:nth-child(4), .gq-table th:nth-child(5), .gq-table td:nth-child(5) { width: 17%; }
.gq-table td.prob { text-align: left; }
.prob-scroll { overflow-x: auto; white-space: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.gq-table tr.ok .mark { color: var(--mint); font-size: 20px; } .gq-table tr.bad .mark { color: var(--danger); font-size: 20px; }
.gq-table tr.bad .ans { color: #1E50C8; }   /* 틀린 답은 파란색 */
.gq-table tr.bad td:nth-child(5) { color: var(--danger); }   /* 정답은 빨간색 */
.gq-table small.rem { font-size: 12px; color: var(--sub); font-weight: 500; white-space: nowrap; }
.gq-table tr.bad small.rem { color: var(--danger); }
.timeout-txt { color: var(--danger); font-size: 13px; font-weight: 700; white-space: nowrap; }
.gq-result-actions { display: flex; gap: 12px; justify-content: center; }
.gq-big-btn { flex: 1; max-width: 300px; min-height: 56px; border-radius: 999px; font-size: 17px; font-weight: 700; }
.gq-big-btn.confirm { background: var(--mc); color: #fff; border: 2.5px solid color-mix(in srgb, var(--mc) 70%, #000); box-shadow: 0 3px 0 color-mix(in srgb, var(--mc) 60%, #000); }
.gq-big-btn.analyze { background: var(--card); color: color-mix(in srgb, var(--mc) 80%, #000); border: 2.5px solid var(--mc); box-shadow: 0 3px 0 var(--mc); }
.gq-big-btn:active { transform: translateY(2px); box-shadow: none; }
.gq-big-btn:active { filter: brightness(.95); }

/* 오답분석 */
.gq-an-title { font-size: 24px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.3; }
.gq-an-sum { text-align: center; color: var(--sub); font-weight: 500; font-size: 14px; margin-top: -8px; }
.gq-tips { background: #FFE1E1; border: 1px solid #FFC9C9; border-radius: var(--r-sm); padding: 12px 16px; font-weight: 700; font-size: 15px; line-height: 1.6; color: var(--ink); }
.gq-an-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.gq-an-line { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; font-size: 17px; font-weight: 700; color: var(--ink); box-shadow: var(--shadow); }
.gq-an-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mc); flex: none; }
.gq-an-line.unju .gq-an-dot { background: var(--orange); }
.gq-an-txt { flex: 1; min-width: 0; word-break: keep-all; line-height: 1.45; }
.gq-an-n { color: var(--sub); font-size: 14px; font-weight: 500; flex: none; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.tag.unju { background: #FFF4EA; color: #9A4A00; } .tag.blur { background: var(--mint-light); color: var(--mint-dark); } .tag.unknown { background: var(--bg); color: var(--sub); }

/* ═══════════ 설정 팝업 ═══════════ */
#gset-bg { position: fixed; inset: 0; background: rgba(17,24,39,.45); display: none; align-items: center; justify-content: center; z-index: 40; }
#gset-bg.open { display: flex; }
#gset { width: 70vw; height: 70vh; min-width: 300px; min-height: 440px; max-width: 860px; background: #fff; border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); }
.gset-title { font-size: 24px; font-weight: 700; color: var(--ink); padding: 22px 24px 8px; line-height: 1.3; letter-spacing: -.01em; }
.gset-title::after { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--mc); margin-top: 10px; }
.gset-body { flex: 1; overflow-y: auto; padding: 12px 24px 16px; display: flex; flex-direction: column; gap: 14px; }
.gset-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gset-row > label { min-width: 92px; font-size: 16px; font-weight: 700; color: var(--ink); }
.gset-ctrl { display: inline-flex; align-items: center; gap: 6px; }
.gset-ctrl button { width: 46px; height: 46px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 22px; font-weight: 700; color: var(--ink); }
.gset-ctrl button:active { background: var(--mint-light); border-color: var(--mint); }
.gset-ctrl input, .gset-box { width: 96px; height: 46px; border: 1px solid var(--line); border-radius: 10px; text-align: center; font-size: 20px; font-weight: 700; color: var(--ink); background: var(--bg); user-select: text; -webkit-user-select: text; }
.gset-ctrl input:focus, .gset-box:focus, .gset-sel:focus { outline: none; border-color: var(--mint); background: var(--card); }
.gset-ctrl span { font-weight: 500; font-size: 15px; color: var(--sub); }
.gset-range { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gset-box { width: 108px; }
.gset-range > span { font-weight: 700; font-size: 18px; color: var(--sub); }
.gset-unit { font-size: 15px !important; font-weight: 500 !important; }
.gset-op { font-size: 24px !important; color: var(--mint-dark) !important; }
.gset-sel { height: 46px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 16px; font-weight: 700; background: var(--bg); color: var(--ink); }
.gset-note { color: #9A4A00; font-weight: 500; font-size: 13px; align-self: center; }
.gset-desc { display: grid; grid-template-columns: minmax(0, 1fr); background: #FFF7D6; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; margin-top: 2px; }
.gset-desc-text { min-width: 0; font-size: 15px; line-height: 1.5; color: var(--body); }
.gset-desc-text b { font-size: 17px; color: var(--ink); display: block; margin-bottom: 4px; }
.gset-desc-sub { color: var(--sub); font-size: 13px; font-weight: 500; margin-top: 8px; line-height: 1.5; }
.gset-actions { display: flex; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--line); }
.gset-btn { flex: 1; min-height: 52px; border-radius: 999px; font-size: 17px; font-weight: 700; }
.gset-btn.apply { background: var(--mc); color: #fff; border: 2.5px solid color-mix(in srgb, var(--mc) 70%, #000); box-shadow: 0 3px 0 color-mix(in srgb, var(--mc) 60%, #000); }
.gset-btn.cancel { background: var(--card); color: var(--body); border: 2.5px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.gset-btn:active { transform: translateY(2px); box-shadow: none; }
.gset-btn:active { filter: brightness(.95); }

/* ═══════════ 운주연습 ═══════════ */
.up-instr { font-size: clamp(16px, 3.2vmin, 22px); font-weight: 500; text-align: center; line-height: 1.5; background: #FFF7D6; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 20px; max-width: 92%; word-break: keep-all; color: var(--body); }
.up-instr.small { font-size: clamp(14px, 2.6vmin, 17px); padding: 10px 16px; }
.up-instr b { color: var(--ink); font-size: 1.15em; }
.up-timer { font-size: clamp(64px, 18vmin, 150px); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.up-timer.running { color: color-mix(in srgb, var(--mc) 85%, #000); }
.up-hint { color: var(--sub); font-weight: 500; font-size: 15px; }
.up-start { width: min(34vmin, 200px); height: min(34vmin, 200px); font-size: clamp(24px, 6.4vmin, 44px); }
.up-start.stop { background: var(--ink); color: #fff; border-color: #1a222d; box-shadow: 0 8px 0 #1a222d, 0 14px 34px rgba(17,24,39,.22); }
.up-done { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: auto; padding-top: 3vmin; }
.up-done .t { color: var(--mint-dark); margin-left: 10px; font-variant-numeric: tabular-nums; }
.up-report { width: 100%; height: 100%; overflow-y: auto; padding: 16px var(--pad); display: flex; flex-direction: column; gap: 14px; }
.up-rep-head { display: flex; gap: 18px; align-items: center; border-radius: var(--r); padding: var(--pad); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--mc); box-shadow: var(--shadow); }
.up-rep-head.error { border-left-color: var(--orange); }
.up-rep-count { display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.up-rep-count .n { font-size: 36px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.up-rep-count .l { font-weight: 500; color: var(--sub); font-size: 13px; margin-top: 4px; }
.up-rep-meta { flex: 1; font-size: 15px; font-weight: 500; color: var(--body); line-height: 1.7; }
.up-rep-summary { font-size: 16px; font-weight: 700; padding: 12px 16px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--mc) 16%, #fff); color: var(--ink); line-height: 1.5; }
.up-rep-summary.error { background: #FFF4EA; }
.up-rep-sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--pad); box-shadow: var(--shadow); }
.up-rep-sec .h { font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.up-rep-sec .h small { color: var(--sub); font-weight: 500; font-size: 13px; }
.up-rep-sec .line { font-size: 15px; font-weight: 500; color: var(--body); padding: 3px 0; }
.up-rep-sec .line.pb { color: #B78900; font-weight: 700; }
.up-diag { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); margin-top: 8px; }
.up-diag-place { min-width: 74px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); }
.up-diag-place small { color: var(--orange-dark); font-size: 13px; font-weight: 700; }
.up-diag-body { flex: 1; font-size: 14px; line-height: 1.5; color: var(--body); }
.up-diag-body b { font-size: 16px; color: var(--ink); }

@media (max-width: 700px) {
  #gset { width: 92vw; height: 80vh; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 0; }
  #student-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tile { font-size: 19px; min-height: 84px; padding: 16px; }
  .profile-card { flex-wrap: wrap; }
  .profile-card .stat { display: none; }
  .profile-card .stat.grades { display: block; width: 100%; min-width: 0; border-left: 0; border-top: 1px solid var(--line); padding: 8px 0 0; text-align: left; }   /* 좁은 화면: 주로 연습하는 급수는 아래 줄에 그대로 */
  .profile-card .stat.grades .gline { justify-content: flex-start; }
}

/* ── Teacher Lock 표시 ── */
.grade-block.locked { opacity: .35; box-shadow: none; filter: saturate(.3); }
.grade-block.target { outline: 4px solid #fff; outline-offset: -8px; }
.grade-block .badge { position: absolute; top: 10px; right: 12px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.grade-block .lockmark { position: absolute; top: 10px; right: 12px; font-size: 14px; }
.gset-row.locked { opacity: .7; }
.gset-row.locked .gset-ctrl button { visibility: hidden; }
.gset-row .lockmark { font-size: 14px; }
.gset-lock-note { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--mint-dark); }
.coin-toast { position: fixed; top: 76px; right: 24px; transform: translateY(-10px) scale(.9); display: flex; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid var(--yellow); border-radius: 999px; padding: 6px 14px 6px 8px; box-shadow: 0 6px 18px rgba(255,214,0,.35); z-index: 70; opacity: 0; transition: opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1.3); pointer-events: none; }
.coin-toast.show { opacity: 1; transform: translateY(0) scale(1); animation: coinglow 2.2s ease-out; }
@keyframes coinglow { 0% { box-shadow: 0 0 0 0 rgba(255,214,0,.7), 0 6px 18px rgba(255,214,0,.35); } 45% { box-shadow: 0 0 0 16px rgba(255,214,0,0), 0 6px 26px rgba(255,214,0,.55); } 100% { box-shadow: 0 0 0 0 rgba(255,214,0,0), 0 6px 18px rgba(255,214,0,.35); } }
/* 반짝이: 알약 주변으로 퍼지는 별 */
.coin-toast .sparkles { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.coin-toast .sp { position: absolute; left: 50%; top: 50%; font-size: 14px; color: #FFD600; text-shadow: 0 0 6px rgba(255,214,0,.9); opacity: 0; transform: translate(-50%, -50%) scale(.2); }
.coin-toast.show .sp { animation: sparkle 1.6s ease-out forwards; }
.coin-toast .sp1 { --dx: -46px; --dy: -34px; animation-delay: .05s; } .coin-toast .sp2 { --dx: 40px; --dy: -38px; animation-delay: .15s; font-size: 11px; }
.coin-toast .sp3 { --dx: -62px; --dy: 6px; animation-delay: .25s; font-size: 10px; } .coin-toast .sp4 { --dx: 66px; --dy: 4px; animation-delay: .1s; }
.coin-toast .sp5 { --dx: -34px; --dy: 40px; animation-delay: .3s; font-size: 12px; } .coin-toast .sp6 { --dx: 44px; --dy: 38px; animation-delay: .2s; }
.coin-toast .sp7 { --dx: 6px; --dy: -48px; animation-delay: .35s; font-size: 9px; color: #fff; } .coin-toast .sp8 { --dx: -8px; --dy: 48px; animation-delay: .4s; font-size: 9px; color: #fff; }
@keyframes sparkle { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0deg); } 25% { opacity: 1; transform: translate(calc(-50% + var(--dx) * .6), calc(-50% + var(--dy) * .6)) scale(1.3) rotate(90deg); } 60% { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.9) rotate(180deg); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.2), calc(-50% + var(--dy) * 1.2)) scale(.2) rotate(270deg); } }
.coin { width: 34px; height: 34px; border-radius: 50%; background: url(../assets/coin-gold.svg) center/cover no-repeat, var(--yellow); flex: none; animation: coinspin 1s ease-out; }
.coin span { display: none; }
.coin-txt b { display: block; font-size: 20px; color: var(--ink); line-height: 1.1; }
.coin-txt small { display: none; }
.points-badge.bump { animation: bump .5s; }
@keyframes bump { 0% { transform: scale(1) } 40% { transform: scale(1.25) } 100% { transform: scale(1) } }
@keyframes coinspin { 0% { transform: rotateY(0) } 100% { transform: rotateY(720deg) } }
.coin-txt b { display: block; font-size: 26px; color: var(--ink); line-height: 1.1; }
.coin-txt small { font-size: 13px; color: var(--sub); font-weight: 500; }

.card, .panel { box-shadow: 0 2px 4px rgba(120,90,40,.06), 0 8px 20px rgba(120,90,40,.10); }

/* 준비 원 (3초 동안 컴퍼스처럼 채워짐) */
.gq-ready-clock { width: min(40vmin, 240px); height: min(40vmin, 240px); position: relative; display: flex; align-items: center; justify-content: center; }
.gq-ready-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gq-ready-clock .bg { fill: color-mix(in srgb, var(--mc) 12%, #fff); stroke: color-mix(in srgb, var(--mc) 40%, #fff); stroke-width: 1.5; }
.gq-ready-clock .fg { fill: none; stroke: var(--mc); stroke-width: 16; stroke-dasharray: 0 50.27; opacity: .85; }
.gq-ready-clock .lbl { position: absolute; font-size: clamp(16px, 4vmin, 26px); font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.up-desc-line { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.up-desc-line .k, .up-instr .k { color: var(--sub); font-weight: 500; font-size: .8em; margin: 0 4px; }
.up-desc-line b { color: color-mix(in srgb, var(--mc) 80%, #000); font-size: 1.15em; }
.up-desc-line b { display: inline; margin: 0; }
@media (max-height: 560px) { .unju-block .ds { display: none; } }

.gq-cheer { text-align: center; font-size: 16px; font-weight: 700; color: var(--mint-dark); padding: 4px 0; }
/* 노랑(구구단) 위 흰 글자 대비 보정 */
body[data-mode="gugudan"] .gq-start, body[data-mode="gugudan"] .gq-enter, body[data-mode="gugudan"] .gq-big-btn.confirm, body[data-mode="gugudan"] .gset-btn.apply { color: #3a2a00; text-shadow: none; }
.gq-perfect { text-align: center; font-size: 22px; font-weight: 700; color: var(--ink); background: linear-gradient(90deg, #FFF3A0, #FFE1E1, #E0F2F1); border-radius: var(--r-sm); padding: 12px; animation: perfectpop .6s cubic-bezier(.2,.9,.3,1.3); }
@keyframes perfectpop { 0% { transform: scale(.7); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }

/* 포인트 배지 · 프로필 코인 아이콘 */
.points-badge::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: url(../assets/coin-gold.svg) center/cover no-repeat, var(--yellow); flex: none; }
.profile-card .stat .v.star::before { content: ''; display: inline-block; width: 20px; height: 20px; border-radius: 50%; vertical-align: -3px; margin-right: 6px; background: url(../assets/coin-gold.svg) center/cover no-repeat, var(--yellow); }


/* 아바타(캐릭터만) */
.profile-card .avatar { position: relative; cursor: pointer; font-size: 36px; }
.profile-card .avatar .char-emoji { display: inline-block; line-height: 1; }
.avatar-modal { width: min(96vw, 620px) !important; }
.av-preview { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.av-preview .big { width: 84px; height: 84px; border-radius: 50%; background: #E6F8F3; display: flex; align-items: center; justify-content: center; font-size: 50px; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; max-height: 48vh; overflow-y: auto; padding: 4px; }
.av-cell { aspect-ratio: 1; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); font-size: 30px; display: flex; align-items: center; justify-content: center; }
.av-cell.sel { border-color: var(--mint); background: var(--mint-light); box-shadow: 0 0 0 2px var(--mint); }
/* 캐릭터 고르기 남은 시간(3분 이벤트) */
.av-timer { display: inline-block; margin-left: 10px; padding: 2px 12px; border-radius: 999px; background: var(--mint-light); color: var(--mint-dark, #1F8F7F); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; vertical-align: middle; }
.av-timer.warn { background: #FFE4E4; color: #D93025; }
.profile-card .avatar.open { box-shadow: 0 0 0 3px var(--mint); }
/* ── 사람 캐릭터 만들기(js/villager.js): 부위 ◀▶ · 아이템 놓기·끌기 ── */
.profile-card .avatar.human { background: #FFF4E3 !important; overflow: hidden; }
.profile-card .avatar .vg-svg, .rec-hero .avatar .vg-svg { width: 100%; height: 100%; display: block; }
.av-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.av-tabs button { flex: 1; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); font-size: 16px; font-weight: 700; color: var(--sub); }
.av-tabs button.sel { border-color: var(--mint); background: var(--mint-light); color: var(--mint-dark, #1F8F7F); }
.av-note { text-align: center; color: var(--sub); font-size: 14px; }
.av-preview .vg-svg { max-width: 100%; height: auto; background: linear-gradient(#FFF8EA, #F3E9D2); border-radius: 14px; }
.vg-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: start; }
.vg-left { position: sticky; top: 0; }
.vg-stage { background: linear-gradient(#FFF8EA, #F3E9D2); border-radius: 14px; overflow: hidden; line-height: 0; touch-action: none; }
.vg-stage svg { width: 100%; height: auto; display: block; }
.vg-it { cursor: grab; }
.vg-tools { display: flex; gap: 6px; margin-top: 8px; }
.vg-tools button { flex: 1; min-height: 40px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); font-size: 14px; font-weight: 700; color: var(--ink); }
.vg-tools button.del { color: #D93025; border-color: #F5C6C2; }
.vg-hint { font-size: 12px; color: var(--sub); margin-top: 8px; line-height: 1.4; min-height: 17px; }
.vg-random { width: 100%; min-height: 40px; margin-top: 8px; border: 0; border-radius: 10px; background: var(--coral, #FF8A65); color: #fff; font-size: 14px; font-weight: 700; }
.vg-right { max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.vg-sub { font-size: 13px; font-weight: 700; color: var(--sub); margin: 4px 0 8px; }
.vg-parts { display: grid; grid-template-columns: 1fr; gap: 5px; margin-bottom: 14px; }
.vg-row { display: grid; grid-template-columns: 62px 40px 1fr 40px; gap: 6px; align-items: center; font-size: 14px; }
.vg-row b { color: var(--sub); font-weight: 700; font-size: 13px; }
.vg-row span { text-align: center; background: var(--bg); border-radius: 8px; padding: 8px 4px; font-size: 14px; font-weight: 600; }
.vg-row button { min-height: 36px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--card); font-size: 14px; }
.vg-row.off { opacity: .45; }
.vg-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.vg-item { border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); padding: 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vg-item svg { width: 44px; height: 48px; }
.vg-item span { font-size: 11px; color: var(--sub); font-weight: 600; }
@media (max-width: 640px) { .vg-wrap { grid-template-columns: 1fr; } .vg-left { position: static; } .vg-right { max-height: none; } }

/* ═══════════ 내 기록 (학생 본인 분석) ═══════════ */
.mode-card.record { --jc: #fff; --tx: var(--mint-dark); grid-column: 1 / -1; min-height: 72px; border: 2px solid var(--mint); box-shadow: 0 4px 0 color-mix(in srgb, var(--mint) 45%, #fff); }
.mode-card.record .txt .t { font-size: 22px; text-shadow: none; }
.mode-card.record:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--mint) 45%, #fff); }
#s-record .topbar .seg { margin-left: auto; }
.seg { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.seg-btn { min-height: 36px; padding: 0 14px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--body); }
.seg-btn.sel { background: var(--mint-light); color: var(--ink); }
.rec-body { flex: 1; overflow-y: auto; padding: 16px 24px 28px; display: flex; flex-direction: column; gap: 12px; max-width: 784px; width: 100%; margin: 0 auto; }
.rec-hero { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.rec-hero .avatar { width: 56px; height: 56px; border-radius: 50%; background: #E6F8F3; display: flex; align-items: center; justify-content: center; font-size: 32px; flex: none; }
.rec-hero .nm { font-size: 20px; font-weight: 700; color: var(--ink); }
.rec-hero .msg { font-size: 14px; color: var(--sub); font-weight: 500; margin-top: 2px; }
.rec-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rec-stat { padding: 12px 14px; text-align: center; }
.rec-stat .k { font-size: 12px; color: var(--sub); font-weight: 600; }
.rec-stat .v { font-size: 26px; font-weight: 700; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; }
.rec-stat .v.star { color: var(--mint-dark); }
.rec-sec { padding: 14px 18px 12px; }
.rec-sec h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.rec-sec h3 small { font-size: 12px; color: var(--sub); font-weight: 500; }
.rec-empty { color: var(--sub); font-size: 14px; padding: 6px 0; }
.sess { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sess:last-child { border-bottom: 0; }
.sess .d { color: var(--sub); min-width: 44px; font-size: 13px; }
.sess .n { flex: 1; font-weight: 700; color: var(--ink); } .sess .n small { color: var(--sub); font-weight: 500; }
.sess .r { font-weight: 700; color: var(--mint-dark); } .sess .r.bad { color: var(--danger); }
.miss-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.miss-chip { background: #FFF4EA; border: 1px solid #FFD9B8; color: #9A4A00; border-radius: 8px; padding: 4px 10px; font-weight: 700; font-size: 13px; }
.skill-row { display: grid; grid-template-columns: 120px 1fr 90px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.skill-row .bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.skill-row .bar i { display: block; height: 100%; background: var(--mint); border-radius: 999px; } .skill-row .bar i.mid { background: var(--yellow, #FFCD4A); } .skill-row .bar i.low { background: var(--danger); }
.skill-row small { color: var(--sub); }
@media (max-width: 560px) { .rec-cards { grid-template-columns: repeat(2, 1fr); } }
/* 퀴즈 상단바: 대시보드와 같은 나가기 · 학습 모드 · 포인트 + 다시시작/설정 */
.gq-topbar .gq-btn { width: 40px; height: 40px; font-size: 18px; }
.gq-topbar .points-badge { margin-right: 4px; }
.topbar .points-badge.live { margin-left: auto; }
.topbar h1 + .points-badge.live { margin-left: 0; }
/* 나의 오답노트 카드 · 문제 수 고르기 */
.mode-card.record.note { --tx: #9A4A00; border-color: #F5B97A; box-shadow: 0 4px 0 #F8D9B5; }
.mode-card.record.note:active { box-shadow: 0 1px 0 #F8D9B5; }
.wn-opts { display: flex; gap: 10px; justify-content: center; margin: 10px 0 4px; flex-wrap: wrap; }
.wn-opts .btn { min-width: 110px; font-size: 18px; }
/* 상단바: ← 는 이전 단계, ⌂ 는 처음(비밀번호 화면)으로 */
/* 상단바 아이콘 버튼(홈 · 이전 · 다시 시작 · 설정): 모드 색 틴트 + 선 아이콘 */
.tb-btn { width: 46px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mc) 16%, #fff); color: color-mix(in srgb, var(--mc) 78%, #000); border: 0; padding: 0; flex: none; transition: transform .08s, filter .12s; }
.tb-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.tb-btn:active { transform: translateY(1px); filter: brightness(.94); }
.tb-btn.home { background: var(--mc); color: #fff; }
.tb-btn.home:active { filter: brightness(.92); }
body[data-mode="gugudan"] .tb-btn.home { color: #3a2a00; }
.topbar h1:empty { flex: 1; }
.pin-name { font-size: 18px; color: var(--sub); font-weight: 600; }
.delete-banner { display: flex; align-items: center; justify-content: center; gap: 12px; }
/* 오답노트 · 패턴 분석 */
.pat-list { display: flex; flex-direction: column; gap: 6px; }
.pat { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pat .dot, .blur-line .dot, .legend i { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; margin-top: 4px; }
.pat .pt .nm { font-weight: 700; color: var(--ink); font-size: 15px; } .pat .pt .nm small { color: var(--sub); font-weight: 600; margin-left: 4px; }
.pat .pt .ex { font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.blur-line { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--body); font-weight: 600; }
.blur-line .dot { margin-top: 0; }
.good { color: var(--mint-dark); } .bad { color: var(--danger); } .same { color: var(--sub); }
.legend { display: flex; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--sub); font-weight: 600; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 5px; } .legend i { margin-top: 0; }
.focus-list, .focus-gen { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.miss-chip.gen { background: #fff; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; } .miss-chip.gen i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.miss-chip.more { background: var(--line); border-color: var(--line); color: var(--sub); }
.rec-sec.focus { border: 2px solid #F5B97A; }
/* 도전 이벤트: 블럭 배지 · 대시보드 띠 · 결과 배너 */
.grade-block .badge.ev { background: #FFF1B8; color: #7A4B00; border: 1.5px solid #F5B301; box-shadow: 0 2px 0 rgba(0,0,0,.08); font-size: 12px; padding: 3px 9px; }
.grade-block.event { outline: 4px solid #FFD54F; outline-offset: -8px; }
.ch-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-chip { display: inline-flex; align-items: center; gap: 8px; background: #FFF7D6; border: 2px solid #F5B301; color: var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; box-shadow: 0 3px 0 #E5A300; }
.ch-chip:active { transform: translateY(2px); box-shadow: none; }
.ch-chip b { background: #F5B301; color: #3a2a00; border-radius: 999px; padding: 2px 8px; font-size: 13px; }
.ch-chip.done { background: #E6F8F3; border-color: var(--mint); box-shadow: none; color: var(--sub); } .ch-chip.done b { background: var(--mint); color: #fff; }
.gq-perfect.win { background: linear-gradient(90deg, #FFF3A0, #FFE0A0, #FFF3A0); }
.gq-perfect.miss { background: #F3F4F6; font-size: 18px; animation: none; }
.gq-perfect small { display: block; font-size: 13px; font-weight: 600; color: var(--sub); margin-top: 4px; }
.gq-perfect b { color: #7A4B00; }
.gq-ready-sub { text-align: center; line-height: 1.6; }
.gt-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.gt-row { border: 1px solid var(--line); border-radius: 12px; padding: 4px 6px 0; background: #fff; }
.peer-line { display: inline-block; margin-top: 6px; color: #B35A00; font-weight: 700; }
.ch-chip small { color: #B35A00; font-weight: 700; font-size: 12px; }
/* 학원 이용 상태 안내 (첫 화면 아래) */
.plan-note { position: absolute; bottom: 12vh; left: 50%; transform: translateX(-50%); background: #FFF3B0; color: #7A4B00; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.plan-note.bad { background: var(--danger-light); color: #B3261E; }
/* 👋 나가기 버튼: 연한 틴트 (홈은 채움) */
.tb-btn.bye { background: color-mix(in srgb, var(--mc) 16%, #fff); color: color-mix(in srgb, var(--mc) 78%, #000); }
.tb-btn.bye svg { stroke-width: 2.1; }
/* 오늘 포인트 */
.today-pts { font-size: 12px; color: var(--sub); font-weight: 600; margin-left: 4px; }
/* 오답노트 문제 수 조절 */
.wn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.wn-row .btn { min-width: 0; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; }
.stepper button { width: 38px; height: 38px; font-size: 20px; font-weight: 700; color: var(--ink); background: var(--card); }
.stepper span { min-width: 64px; text-align: center; font-weight: 700; font-size: 15px; }
/* 눌린 즉시 시각 반응 (pointerdown) */
.keypad button.pressed, .gq-keys button.pressed { background: var(--mint-light); border-color: var(--mint); transform: translateY(2px); }
.gq-enter.pressed { filter: brightness(.92); transform: translateY(2px); }
/* 과제 자가 체크 */
.profile-card .name { cursor: pointer; }
.hw-badge { margin-top: 4px; font-size: 12px; font-weight: 700; color: #7A4B00; background: #FFF3B0; border-radius: 999px; padding: 3px 10px; display: inline-block; }
.hw-badge.done { background: var(--mint-light); color: var(--mint-dark); }
.hw-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 4px; }
.hw-pick-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); }
.hw-pick-btn .mk { font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1; } .hw-pick-btn .nm { font-size: 12px; font-weight: 700; color: var(--sub); }
.hw-pick-btn.sel { border-color: var(--mint); background: var(--mint-light); }
.hw-hist { display: flex; flex-wrap: wrap; gap: 6px; }
.hw-chip { display: inline-flex; flex-direction: column; align-items: center; width: 40px; padding: 4px 0; border-radius: 8px; font-size: 16px; font-weight: 800; border: 1px solid var(--line); }
.hw-chip small { font-size: 9px; font-weight: 600; color: var(--sub); }
.hw-chip.hw-o { background: #E6F8F3; color: var(--mint-dark); } .hw-chip.hw-sq { background: #EAF2FF; color: #2F5FBF; } .hw-chip.hw-tri { background: #FFF3B0; color: #7A4B00; } .hw-chip.hw-x { background: #FFE1E1; color: #B3261E; }
/* 남은 오답 배지 · 달력 */
.mode-card.record .pend { display: inline-block; margin-left: 8px; background: var(--danger); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 13px; vertical-align: middle; }
.rec-sec.pend { border: 2px solid var(--danger); } .rec-sec.pend.done { border-color: var(--mint); }
.cal-nav { width: 30px; height: 30px; border-radius: 8px; background: var(--mint-light); color: var(--mint-dark); font-weight: 800; font-size: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 6px; }
.cal-head { text-align: center; font-size: 12px; color: var(--sub); font-weight: 700; padding: 2px 0; }
.cal-cell { min-height: 58px; border: 1px solid var(--line); border-radius: 10px; padding: 4px 5px; position: relative; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.cal-cell.empty { border: 0; background: transparent; }
.cal-cell.today { border-color: var(--mint); box-shadow: 0 0 0 2px var(--mint-light); }
.cal-cell .dn { font-size: 12px; font-weight: 700; color: var(--sub); }
.cal-cell.att .dn { color: var(--ink); }
.cal-cell .acc { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 6px; align-self: flex-start; }
.cal-cell .acc.good { background: var(--mint-light); color: var(--mint-dark); } .cal-cell .acc.mid { background: #FFF3B0; color: #7A4B00; } .cal-cell .acc.low { background: #FFE1E1; color: #B3261E; }
.cal-sums { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cal-sum { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; color: var(--ink); } .cal-sum small { color: var(--sub); font-weight: 500; margin-left: 4px; }
/* 호스팅 배지(Netlify HUD)는 학습 화면에 필요 없음 */
#nl-badge-frame, iframe[id^="nl-badge"] { display: none !important; }

/* 달력: 출석 점(민트)과 과제 점(파랑 계열) 같은 크기, 오른쪽 위에 나란히 */
.cal-cell .dots { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; }
.cal-cell .att-dot, .cal-cell .hw-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; line-height: 1; }
.cal-cell .att-dot { background: var(--mint); } .cal-cell .att-dot.makeup { background: #2F5FBF; } .cal-cell .att-dot.absent { background: #B3261E; }
.cal-cell .hw-dot { background: #6C5CE7; } .cal-cell .hw-dot.hw-o { background: #6C5CE7; } .cal-cell .hw-dot.hw-sq { background: #9B8CF2; } .cal-cell .hw-dot.hw-tri { background: #E5A300; } .cal-cell .hw-dot.hw-x { background: #E24A8C; }
.rec-sec h3 small .lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 3px 0 6px; vertical-align: middle; } .lg.att { background: var(--mint); } .lg.hw { background: #6C5CE7; }
/* 주로 연습하는 급수 표시 */
.stat.grades { min-width: 150px; } .stat.grades .gline, .glist .gline { display: flex; align-items: center; gap: 6px; justify-content: center; margin: 2px 0; }
.gname { --jc: var(--dot, var(--mint)); background: var(--jc); color: var(--tx, #fff); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.gline b { font-size: 16px; color: var(--ink); }
.rec-stat .glist { margin-top: 4px; } .rec-stat .glist .gline { justify-content: flex-start; }

/* ── 오늘 할 일 (대시보드 카드 + 완료 팝업) ── */
.todo-card { padding: 14px 18px; }
.todo-head { display: flex; align-items: center; justify-content: space-between; font-size: 17px; margin-bottom: 8px; }
.todo-prog { font-size: 13px; font-weight: 800; color: var(--mint-dark); background: var(--mint-light); border-radius: 999px; padding: 3px 10px; }
.todo-prog.all { background: #FFF1B8; color: #8A5A00; }
.todo-list { display: flex; flex-direction: column; gap: 6px; }
.todo-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; border-radius: 12px; padding: 10px 12px; background: var(--bg); font-size: 16px; font-weight: 700; color: var(--ink); font-family: inherit; position: relative; }
button.todo-item:not(.done):active { transform: translateY(2px); }
.todo-item .bx { font-size: 20px; color: var(--mint-dark); }
.todo-item .ic { font-size: 16px; }
.todo-item .tx { flex: 1; position: relative; }
.todo-item .go { font-size: 13px; font-weight: 800; color: #fff; background: var(--mint); border-radius: 999px; padding: 4px 10px; }
.todo-item.done { opacity: .55; }
.todo-item.done .tx { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--danger); }
/* 방금 완료: 줄이 스스슥 그어지는 효과 */
.todo-item.just .tx { text-decoration: none; }
.todo-item.just .tx::after { content: ''; position: absolute; left: 0; top: 55%; height: 3px; width: 0; background: var(--danger); border-radius: 2px; animation: todo-strike .7s .35s ease-out forwards; }
.todo-item.just { animation: todo-fade 1.2s .9s ease forwards; opacity: 1; }
@keyframes todo-strike { to { width: 100%; } }
@keyframes todo-fade { to { opacity: .55; } }
.modal.todo-modal .todo-list.pop .todo-item { background: var(--bg); }
.todo-msg { text-align: center; font-size: 16px; margin: 12px 0 0; color: var(--body); }

/* ═══════════ 2026-09-10: 아이스칩 · 체크리스트 달력 표시 · 운주 다시하기 · 곱셈 모드 · 선생님 미리보기(peek) ═══════════ */
.profile-card .stat.gems { display: block !important; }
.profile-card .stat.gems .v { color: #1E88E5; }
.gem-msg { display: inline-block; margin-top: 6px; font-size: 15px; font-weight: 800; color: #1E88E5; background: #E3F2FD; border-radius: 999px; padding: 3px 12px; }
.cal-cell .todo-frac { font-size: 11px; font-weight: 800; color: #1E7F4F; line-height: 1.1; margin-top: 2px; white-space: nowrap; }
.cal-cell .todo-frac small { font-size: 10px; font-weight: 700; }
.up-done .up-redo { margin-left: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--sub); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 700; font-family: inherit; vertical-align: middle; }
.up-done .up-redo:active { filter: brightness(.95); }
.grade-block .badge.sub { font-size: 12px; font-weight: 600; opacity: .8; margin-left: 8px; }
#dan-grid .grade-block.all { grid-column: 1 / -1; }
body.peek .topbar { display: none; }
body.peek .rec-body button, body.peek .rec-body .stepper, body.peek .rec-body select { pointer-events: none; }

/* ── 2026-09-10 (3차) 아이스칩 배지(포인트 옆) · 체크리스트 세부 설정 작게 · 오답노트 '다음은 ○○' 안내 ── */
.gem-badge { display: inline-flex; align-items: center; gap: 4px; background: #E3F2FD; color: #1E88E5; border: 1px solid #BBDEFB; border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 15px; line-height: 1.2; }
.todo-item .tx .tx-sub { display: inline-block; font-weight: 400; font-size: 12px; color: var(--sub); margin-left: 4px; white-space: nowrap; }   /* inline-block: 완료 취소선이 세부 설정까지 그어지지 않게 */
.todo-item.done .tx .tx-sub { text-decoration: none; }
.gq-ready-clock .lbl.next { display: flex; flex-direction: column; align-items: center; line-height: 1.15; text-align: center; max-width: 82%; font-size: clamp(15px, 3.6vmin, 24px); }
.gq-ready-clock .lbl.next small { font-size: .6em; font-weight: 600; opacity: .95; }
/* 🧊 아이스칩: 팝업에서 +n 이 튀어나오고, 홈에서 배지로 날아 들어감 */
.gem-msg.pop { animation: gempop .6s .25s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes gempop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.gem-fly { position: fixed; left: 0; top: 0; font-size: 30px; line-height: 1; z-index: 80; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(30,136,229,.45)); will-change: transform; }
.gem-badge.bump { animation: bump .5s; }

/* ═══ 2026-09-10 (4차): 👋 손 흔들기 · 모든 화면 아이스칩 · 포인트 배지 골드 · 운주 안내 크게/위로 · 최고 기록 ═══ */
.tb-btn.bye .wave { display:inline-block; font-size:24px; line-height:1; transform-origin:70% 70%; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0deg); } 65% { transform: rotate(14deg); } 70% { transform: rotate(-8deg); } 75% { transform: rotate(14deg); } 80% { transform: rotate(-4deg); } 85% { transform: rotate(10deg); } 90% { transform: rotate(0deg); } }
.tb-btn.bye:active .wave { animation-duration: .6s; }
.points-badge { background: #FFF6D5; border-color: #F0D27A; color: #6B4A00; }
/* ⚙ 설정에서 포인트/아이스칩을 끄면 관련 표시를 모두 감춤 */
body.no-points .points-badge, body.no-points #coin-toast, body.no-points .rec-stat.pt-only { display: none !important; }
body.no-gems .gem-badge, body.no-gems .gem-msg { display: none !important; }
body.no-points.no-gems #btn-points { display: none !important; }
.topbar .gem-badge.live { margin-left: 0; padding: 6px 12px; }
.gq-topbar .gem-badge { margin-right: 4px; }
/* 운주 준비·진행 화면: 지시문·시간은 위쪽(.up-top), 시작·끝 버튼은 블록 전체의 정가운데(.up-center 절대 배치) */
.up-ready { position: relative; align-self: stretch; min-height: 100%; justify-content: flex-start; padding-top: 8px; gap: 0; }
.up-top { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.up-center { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; pointer-events: none; }
.up-center .up-start { pointer-events: auto; }
@media (max-height: 700px) { .up-timer { font-size: clamp(44px, 12vmin, 96px); } .up-top { gap: 8px; } }   /* 낮은 화면(가로형)에서는 시간 숫자를 줄여 버튼 자리를 확보 */
.up-instr { font-size: clamp(17px, 3vmin, 23px); font-weight: 600; color: var(--ink); padding: 10px 18px; max-width: 96%; line-height: 1.45; }
.up-instr.small { font-size: clamp(17px, 3vmin, 22px); font-weight: 700; padding: 10px 18px; }
.up-instr b { font-size: 1.2em; color: color-mix(in srgb, var(--mc) 80%, #000); }
.up-pb-line { font-size: 20px; font-weight: 800; color: #B8860B; background: #FFF6D5; border-radius: 12px; padding: 10px 14px; text-align: center; }
.modal label.fld { display: block; font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 8px; }
.modal label.fld input { margin-top: 4px; }
/* 운주 레벨 고르기: 큰 제목만 (작은 설명은 핸드폰에서 지저분해 숨김) */
.unju-block .ds { display: none; }
.unju-block .lv { grid-row: 1; }

/* ── 15차: 캐릭터 자리(사람은 네모 전체 장면) · 만들기 신청 · 🛍 상점 ── */
.profile-card .avatar.human { width: 124px; height: 119px; border-radius: 14px; background: linear-gradient(#FFF8EA, #F3E9D2) !important; }
.profile-card .avatar.human .vg-svg { width: 100%; height: 100%; }
.profile-card .avatar.req::after { content: '🧊 신청 중'; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font-size: 10px; font-weight: 800; background: #E3F2FD; color: #0D47A1; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.av-gems { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: #E3F2FD; color: #0D47A1; font-size: 15px; font-weight: 800; vertical-align: middle; }
.av-req-box { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin: 4px 0 8px; }
.av-req-box b { font-size: 16px; color: var(--ink); } .av-req-box small { font-size: 13px; color: var(--sub); line-height: 1.5; }
.av-req-box.wait { background: #FFF8E1; border-radius: 12px; padding: 12px; }
.shop-top { display: flex; align-items: center; justify-content: space-between; font-size: 18px; margin-bottom: 6px; }
.shop-body { max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.shop-sec { margin-bottom: 14px; } .shop-sec.special { background: #FFF4E5; border-radius: 14px; padding: 10px; }
.shop-hd { font-size: 14px; font-weight: 800; color: var(--ink); margin: 2px 0 8px; } .shop-hd small { font-weight: 600; color: var(--sub); margin-left: 6px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.shop-card { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); padding: 6px 4px; font: inherit; }
.shop-card .pv { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; background: #FAF7F1; }
.shop-card .pv svg { max-width: 100%; max-height: 100%; }
.shop-card .nm { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.2; text-align: center; } .shop-card .nm small { display: block; font-size: 10px; color: var(--sub); font-weight: 600; }
.shop-card .pr { font-size: 12px; font-weight: 800; color: #0D47A1; background: #E3F2FD; border-radius: 999px; padding: 1px 8px; }
.shop-card.has { opacity: .75; } .shop-card.has .pr { background: var(--mint-light); color: var(--mint-dark, #1F8F7F); }
.shop-card.poor .pr { background: #FFE4E4; color: #D93025; }
.shop-card.ghost { pointer-events: none; } .shop-card.ghost .pv svg { filter: grayscale(1) brightness(.35) opacity(.5); } .shop-card.ghost .nm { color: var(--sub); }
.mini-confirm { position: absolute; inset: 0; background: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; border-radius: var(--r); z-index: 3; }
.mc-box { background: #fff; border-radius: 14px; padding: 18px; box-shadow: var(--shadow-lg); max-width: 320px; text-align: center; } .mc-box p { margin: 0 0 12px; font-size: 16px; } .mc-box .actions { justify-content: center; margin-top: 0; flex-wrap: wrap; } .mc-box .actions .btn { white-space: nowrap; }
.modal.avatar-modal { position: relative; }
.vg-shop { margin-left: auto; border: 1.5px solid var(--line); background: #FFF4E5; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 800; color: #7A4B00; }
.vg-sub { display: flex; align-items: center; gap: 6px; } .vg-sub small { font-weight: 600; color: var(--sub); }
.vg-empty { font-size: 13px; color: var(--sub); background: var(--bg); border-radius: 10px; padding: 12px; text-align: center; }
.vg-tag { font-style: normal; font-size: 11px; }

/* ── 16차: 만들기 창 — 위쪽 버튼 · 캐릭터 항상 보이게(왼쪽 고정, 오른쪽만 스크롤) · 30초 경고 · 상점 접기 ── */
.modal.maker { display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; padding: 16px 20px; }
.modal.maker .av-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .modal.maker .av-head h3 { margin: 0; font-size: 18px; } .modal.maker .av-head .sp { flex: 1; }
.modal.maker .av-head .btn.small { min-height: 40px; padding: 0 16px; font-size: 15px; }
.modal.maker .av-tabs { margin-bottom: 8px; } .modal.maker .av-tabs button { min-height: 38px; font-size: 14px; }
.modal.maker #av-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.modal.maker .vg-wrap { flex: 1; min-height: 0; grid-template-columns: 250px 1fr; }
.modal.maker .vg-left { position: static; }
.modal.maker .vg-right { max-height: none; height: 100%; overflow-y: auto; }
.modal.maker .av-grid { max-height: none; flex: 1; overflow-y: auto; }
.modal.maker .shop-body { max-height: none; flex: 1; overflow-y: auto; }
.modal.maker #av-body > .shop-top, .modal.maker #av-body > .av-note { flex: none; }
.modal.maker #av-body > .actions { flex: none; margin-top: 8px; }
@media (max-width: 640px) { .modal.maker .vg-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .modal.maker .vg-stage { background: none; display: flex; justify-content: center; } .modal.maker .vg-stage svg { max-height: 34vh; width: auto; background: linear-gradient(#FFF8EA, #F3E9D2); border-radius: 14px; } .modal.maker .vg-tools { margin-top: 4px; } .modal.maker .vg-hint { display: none; } }
.av-warnbar { display: none; background: #FFE4E4; color: #D93025; font-weight: 800; font-size: 15px; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; text-align: center; animation: warnblink 1s infinite; }
.modal.maker.warn .av-warnbar { display: block; }
@keyframes warnblink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.av-teaser { text-align: center; font-size: 13px; color: #7A4B00; background: #FFF4E5; border-radius: 10px; padding: 8px 10px; margin: 0 0 6px; }
.vg-sub .vg-random { margin-left: auto; width: auto; min-height: 30px; padding: 0 12px; font-size: 12px; margin-top: 0; }
.vg-item em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--mint-dark, #1F8F7F); } .vg-item em.pr { color: #0D47A1; background: #E3F2FD; border-radius: 999px; padding: 0 6px; }
.vg-item.own { border-color: var(--mint); }
.vg-tag { font-style: normal; font-size: 11px; color: #0D47A1; background: #E3F2FD; border-radius: 999px; padding: 0 6px; margin-left: 4px; }
details.shop-sec { border: 1.5px solid var(--line); border-radius: 12px; padding: 0; margin-bottom: 8px; background: var(--card); }
details.shop-sec.special { border-color: #FFB74D; background: #FFF4E5; }
details.shop-sec summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; cursor: pointer; font-size: 14px; font-weight: 800; color: var(--ink); }
details.shop-sec summary::-webkit-details-marker { display: none; }
details.shop-sec summary small { font-weight: 600; color: var(--sub); margin-left: 4px; } details.shop-sec summary b { font-size: 12px; color: #7A4B00; font-weight: 700; } details.shop-sec.teaser summary b { color: var(--sub); }
details.shop-sec .shop-grid { padding: 0 10px 10px; }

.gq-saving { display: flex; align-items: center; justify-content: center; min-height: 200px; font-size: 22px; font-weight: 700; color: var(--sub); }

/* ── 17차: 허락됨 → 지금 시작 · 🏆 특별 상품(무료·1달) · 돌리기/뒤집기 ── */
.av-req-box.ok { background: #E8F7EF; border-radius: 12px; padding: 12px; }
/* 39차: 캐릭터 아래 '허락됨' 배지 제거(과제 옆 버튼 하나만) */
.vg-tag.tmp, .vg-item em.tmp { color: #7A4B00; background: #FFF4E5; border-radius: 999px; padding: 0 6px; font-style: normal; font-size: 10px; font-weight: 800; }
.shop-card.tmp .pr { background: #FFF4E5; color: #7A4B00; } .shop-card.tmp { opacity: .95; }
.vg-tools button { font-size: 13px; padding: 0 4px; }

/* ── 18차: 핸드폰(480px 이하) — 상단바 8개 버튼이 다 보이게 · 제목 한 줄/설명 다음 줄 · 달력 넘침 방지 ── */
.topbar h1 { min-width: 0; }
.cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell { min-width: 0; overflow: hidden; }
@media (max-width: 480px) {
  .topbar { padding: 10px 10px; gap: 6px; min-height: 60px; }
  .topbar h1 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-btn { width: 38px; height: 38px; border-radius: 10px; }
  .tb-btn svg { width: 21px; height: 21px; }
  .tb-btn.bye .wave { font-size: 20px; }
  .iconbtn { width: 40px; height: 40px; font-size: 19px; }
  .points-badge, .gem-badge, .topbar .gem-badge.live { padding: 4px 8px; font-size: 13px; gap: 4px; }
  .points-badge::before { width: 16px; height: 16px; }
  .gq-topbar .points-badge, .gq-topbar .gem-badge { margin-right: 0; }
  #s-record .topbar { flex-wrap: wrap; }
  #s-record .topbar .seg { flex-basis: 100%; margin-left: 0; justify-content: center; }
  .rec-body { padding: 12px 12px 24px; gap: 10px; }
  .rec-sec { padding: 12px 12px 10px; }
  .rec-hero { padding: 12px 14px; }
  .rec-sec h3 { flex-wrap: wrap; gap: 2px 8px; }
  .rec-sec h3 small { flex-basis: 100%; }
  .wn-opts .btn { min-width: 0; font-size: 16px; }
  .cal-grid { gap: 2px; }
  .cal-cell { min-height: 50px; padding: 3px 3px; border-radius: 7px; gap: 1px; }
  .cal-cell .dn { font-size: 11px; }
  .cal-cell .acc { font-size: 10px; padding: 0 4px; }
  .cal-cell .todo-frac { font-size: 10px; }
  .cal-cell .dots { top: 3px; right: 3px; gap: 2px; }
  .cal-cell .att-dot, .cal-cell .hw-dot { width: 13px; height: 13px; font-size: 8px; }
  .cal-sums { gap: 6px; }
  .cal-sum { font-size: 12px; padding: 3px 10px; }
}
/* 특별 배경·어깨띠 타일(아이템 칸 맨 앞) */
.vg-item.x svg { width: 44px; height: 44px; border-radius: 6px; }
.vg-item.x.on { border-color: #E0A800; background: #FFF8E1; }
.vg-item.x.on em.tmp { color: #7A4B00; }
/* 🎒 내 가방(소장 상품) 패널 · 대시보드 허락 배지 */
.vg-right { position: relative; }
.vg-right.bagopen { overflow: hidden; }
.vg-bag { margin-left: auto; border: 1.5px solid #9ED9D0; background: #E8F7EF; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 800; color: var(--mint-dark, #1F8F7F); }
.vg-bag b { font-weight: 800; }
.vg-sub .vg-bag + .vg-shop { margin-left: 0; }
.vg-bagpanel { position: absolute; inset: 0; background: var(--card); z-index: 5; overflow-y: auto; padding: 0 4px 12px; border-radius: 12px; }
.vg-baghd { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card); padding: 6px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; z-index: 1; }
.vg-baghd b { font-size: 15px; color: var(--ink); }
.vg-baghd .btn.small { min-height: 36px; padding: 0 18px; }
.vg-bagsec { font-size: 12px; font-weight: 800; color: var(--sub); margin: 10px 0 6px; }
.hw-badge.av-ok { background: #E8F7EF; color: var(--mint-dark, #1F8F7F); margin-left: 6px; animation: avok 1.8s ease-in-out infinite; }
@keyframes avok { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(43,181,160,.35); } 50% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(43,181,160,0); } }

/* 도전하기 칩: 라벨·내용·보상 정렬. 폰에서는 한 줄에 하나씩 표 모양 */
.ch-chip .lb { white-space: nowrap; }
.ch-chip .tx { line-height: 1.35; }
@media (max-width: 480px) {
  .ch-strip { gap: 6px; }
  .ch-chip { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 8px; border-radius: 14px; padding: 8px 12px; text-align: left; font-size: 13px; }
  .ch-chip .tx { min-width: 0; }
  .ch-chip b { justify-self: end; white-space: nowrap; }
  .ch-chip small { grid-column: 2 / 4; }
}
/* 동시 접속 안내 화면 (5초 카운트다운 뒤 로그아웃) */
.kick-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(17,24,39,.6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.kick-box { background: var(--card); border-radius: 20px; padding: 26px 24px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,.25); animation: pop .3s ease-out; }
.kick-box .kick-ic { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.kick-box b { display: block; font-size: 18px; color: var(--ink); line-height: 1.4; }
.kick-box p { margin: 12px 0 8px; font-size: 17px; color: var(--ink); font-weight: 700; } .kick-box .kick-n { display: inline-block; min-width: 1.4em; font-size: 26px; color: var(--danger); font-variant-numeric: tabular-nums; }
.kick-box small { display: block; font-size: 13px; color: var(--sub); line-height: 1.5; }
/* 22차-2: 한글 단어 중간에서 안 끊기게 · 홈 카드 이름 칸 */
body { word-break: keep-all; overflow-wrap: anywhere; }
.profile-card .who { min-width: 0; flex: 1; }
.hw-badge, .btn.cta, .btn.small { white-space: normal; }
@media (max-width: 480px) { .cal-cell .dots { position: static; justify-content: flex-end; margin-top: auto; } .cal-cell { min-height: 54px; } }
/* 27차: 만들기 창 — 아이템 묶음 ◀▶ · [사기] */
.vg-buy { margin-left: 6px; border: 0; border-radius: 999px; background: #1E88E5; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 9px; font-family: inherit; vertical-align: middle; }
.vg-buy:active { filter: brightness(.9); }
.vg-irows { margin-top: 2px; }
.vg-row span { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 4px; }
/* 27차-3: 만들기 창 머리 — 폰에서 버튼 글자가 두 줄로 쪼개지지 않게 */
.modal.maker .av-head .btn { white-space: nowrap; flex: none; }
.modal.maker .av-head h3 { min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.modal.maker .av-head .sp { display: none; }
/* 🎒 내 가방 보기(캐릭터 창) */
.bag-view { max-height: 52vh; overflow-y: auto; margin: 6px 0; }
.bag-view .vg-item { pointer-events: none; }
.bag-view .vg-item .pv svg { width: 44px; height: 44px; border-radius: 6px; }
/* 28차: 만들기 창 머리(타이머·🧊 나란히) · 가방 패널을 편집기 전체 위에 크게 */
.modal.maker .av-head { flex-wrap: wrap; row-gap: 6px; }
.modal.maker .av-head h3 { flex: none; display: block; }
.modal.maker .av-head .av-stats { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
.modal.maker .av-head .av-stats .av-timer, .modal.maker .av-head .av-stats .av-gems { margin-left: 0; }
.modal.maker .av-head .sp { display: block; flex: 1; }
.modal.maker #av-body { position: relative; }
.vg-bagpanel { position: absolute; inset: 0; z-index: 8; padding: 0 10px 14px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.vg-baghd { padding: 10px 0 10px; } .vg-baghd b { font-size: 17px; } .vg-baghd .btn.small { min-height: 40px; padding: 0 22px; font-size: 15px; }
.vg-bagpanel .vg-items { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.vg-bagpanel .vg-item { padding: 8px 4px 6px; gap: 4px; }
.vg-bagpanel .vg-item svg, .vg-bagpanel .vg-item.x svg { width: 64px; height: 64px; }
.vg-bagpanel .vg-item span { font-size: 13px; color: var(--ink); }
.vg-bagsec { font-size: 14px; margin: 12px 0 8px; }
/* 29차: 구매 표시 · 가방 글씨 정렬 */
.vg-row span { position: relative; }
.vg-tag.own { position: absolute; top: -7px; right: -2px; font-size: 10px; font-weight: 800; color: #1F8F7F; background: #E8F7EF; border-radius: 999px; padding: 0 6px; margin: 0; line-height: 1.5; }
.vg-bagpanel .vg-item, .bag-view .vg-item { justify-content: flex-start; min-height: 118px; }
.vg-bagpanel .vg-item span, .bag-view .vg-item span { display: block; width: 100%; text-align: center; white-space: normal; line-height: 1.25; word-break: keep-all; padding: 0 2px; }
.vg-bagpanel .vg-item em, .bag-view .vg-item em { display: block; text-align: center; }
.bag-view .vg-item .pv svg { width: 60px; height: 60px; }
/* 31차: 동물 캐릭터 장면 — 동물 고르기 격자(만들기 창 오른쪽 칸 위) */
.an-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; max-height: 26vh; padding: 2px; margin-bottom: 8px; }
.an-grid .av-cell { font-size: 24px; border-radius: 9px; }
.modal.maker .an-grid { flex: none; }
/* 31차-2: 폰에서는 홈 캐릭터를 작게(아이들이 캐릭터에만 빠지지 않게) */
@media (max-width: 480px) { .profile-card .avatar.human { width: 84px; height: 81px; border-radius: 12px; } .profile-card .avatar { width: 56px; height: 56px; font-size: 30px; } }
/* 31차-3: 동물 캐릭터 가격 */
.an-grid .av-cell { position: relative; }
.an-grid .av-cell.locked { opacity: .75; }
.an-pr { position: absolute; right: 1px; bottom: 1px; font-style: normal; font-size: 9px; font-weight: 800; color: #0D47A1; background: #E3F2FD; border-radius: 999px; padding: 0 4px; line-height: 1.5; }
.an-buybar { margin: 0 0 6px; } .an-buybar:empty { display: none; }
.an-buy { font-size: 13px; padding: 6px 12px; } .an-buy small { font-weight: 600; opacity: .9; margin-left: 4px; }
.pv-emoji .char-emoji { display: inline-block; }
/* 33차: 동물 탭 얼굴 격자 · 가방 비용 표시 */
.an-free { display: inline-block; font-size: 13px; font-weight: 700; color: var(--mint-dark, #1F8F7F); background: #E8F7EF; border-radius: 999px; padding: 4px 12px; }
.an-grid .an-pr { font-size: 9px; }
.bag-cost { font-size: 12px; font-weight: 800; color: #0D47A1; background: #E3F2FD; border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.modal.maker .av-grid.an-grid { max-height: none; flex: 1; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.modal.maker .an-grid .av-cell { font-size: 30px; border-radius: 12px; }

/* 37차: 급수 선택에서 플래시 90% 를 넘긴 급수는 아래 구석에 아주 작은 배지 */
.grade-block .badge.done { top:auto; bottom:6px; right:8px; font-size:9px; font-weight:800; padding:1px 5px; background:rgba(255,255,255,.85); color:#0F7F74; box-shadow:0 1px 2px rgba(0,0,0,.15); }

/* 39차: 부위 줄의 [🧊30 사기] 버튼 — .vg-row button 규칙(흰 바탕·36px)이 덮어써서 흰 글씨가 안 보이던 것을 고침 */
.vg-row span .vg-buy, .vg-row .vg-buy { min-height: 0; height: auto; border: 0; border-radius: 999px; background: #1E88E5; color: #fff; font-size: 12px; font-weight: 800; padding: 3px 9px; line-height: 1.4; white-space: nowrap; }
/* 46차: 아이템 꽉 참 팝업 — 뺄 것 고르는 버튼이 여러 개라 세로로 */
.mc-box .actions { flex-direction: column; align-items: stretch; gap: 6px; } .mc-box .actions .btn { width: 100%; }
/* 46차-3: 운주 지시문의 숫자(시작 수 · 더할/뺄 수 · 목표)를 큰 알약으로 — "시작 0 → 1씩 더하기"에서 0과 1이, 빼기에서는 시작 수가 한눈에 */
.up-instr b, .up-desc-line b { display: inline-block; font-size: 1.75em; font-weight: 900; line-height: 1.15; padding: 2px 14px; margin: 2px 2px; border-radius: 999px; background: color-mix(in srgb, var(--mc, #42B7DD) 16%, #fff); border: 2px solid color-mix(in srgb, var(--mc, #42B7DD) 55%, #fff); color: color-mix(in srgb, var(--mc, #42B7DD) 72%, #000); font-variant-numeric: tabular-nums; vertical-align: middle; }
.up-instr .k, .up-desc-line .k { font-size: .85em; vertical-align: middle; }
.up-instr small.k { font-size: .7em; display: block; margin-top: 4px; }
.up-instr.small b { font-size: 1.45em; padding: 1px 10px; }
.up-desc-line b { font-size: 1.5em; padding: 1px 10px; }
/* 46차-3: 지시문 조각(.seg)은 줄바꿈 없이 한 덩어리로, 줄이 넘치면 조각 단위로 가운데 정렬 · 핸드폰(480px 이하)은 알약을 조금 작게 */
.up-instr, .up-desc-line { text-align: center; }
.up-instr .ins-seg, .up-desc-line .ins-seg { display: inline-block; white-space: nowrap; background: none; border: 0; padding: 0; margin: 0 2px; }   /* .seg 는 상단 코인 버튼 묶음 클래스라 이름을 따로 */
@media (max-width: 480px) { .up-instr b, .up-desc-line b { font-size: 1.45em; padding: 1px 10px; } .up-instr { padding: 8px 10px; max-width: 100%; } .up-instr.small b { font-size: 1.3em; } }

/* 50차: 💌 선생님 한마디 카드 · 🏠 집 안내 */
.todo-home { margin: 6px 0 8px; font-size: 13px; font-weight: 700; color: #7A4B00; background: #FFF3B0; border-radius: 10px; padding: 6px 10px; line-height: 1.45; }
.gem-home { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 700; color: #7A4B00; }
.msg-card { background: #FFF6F9; border-color: #F6C6DA; }
.msg-new { font-size: 12px; font-weight: 800; color: #fff; background: #E24A8C; border-radius: 999px; padding: 3px 10px; }
.msg-item { background: #fff; border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.msg-item.new { border: 2px solid #F6C6DA; }
.msg-tx { font-size: 16px; font-weight: 700; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.msg-dt { font-size: 12px; color: var(--sub); margin-top: 4px; } .msg-dt b { font-size: 15px; }
.msg-reply { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.msg-st { flex: 1; min-width: 96px; min-height: 40px; border: 2px solid #F6C6DA; background: #FFF; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--ink); }
.msg-st:active { transform: translateY(2px); background: #FFE3EE; }
.msg-old { margin-top: 8px; } .msg-old summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sub); }
.msg-old .msg-item { opacity: .8; }

/* 51차: 🏆 랭킹 카드 · 캐릭터 이름 */
.rank-card { background: #FFFBEA; border-color: #F5D77A; }
.rk-period { font-size: 12px; font-weight: 800; color: #7A4B00; background: #FFF3B0; border-radius: 999px; padding: 3px 10px; }
.rk-title { font-size: 15px; font-weight: 800; margin: 6px 0 4px; } .rk-title small { display: block; font-weight: 500; font-size: 12px; color: var(--sub); }
.rk-podium { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin: 6px 0 4px; }
.rk-col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rk-cell { background: #fff; border: 2px solid #F5D77A; border-radius: 14px; padding: 8px 6px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.rk-cell.r1 { border-color: #F5B301; background: #FFFDF3; padding-top: 10px; } .rk-cell.r2 { border-color: #C0C7D0; } .rk-cell.r3 { border-color: #D9A066; }
.rk-cell.me { box-shadow: 0 0 0 3px var(--mint); } .rk-cell.empty { color: var(--sub); border-style: dashed; }
.rk-col.c1 .rk-cell { min-height: 150px; } .rk-col.c2 .rk-cell, .rk-col.c3 .rk-cell { min-height: 124px; }
.rk-medal { font-size: 22px; line-height: 1; } .rk-cell.r1 .rk-medal { font-size: 28px; }
.rk-av svg, .rk-av .avatar-svg { display: block; margin: 0 auto; } .rk-av { display: block; }
.rk-who { font-size: 14px; font-weight: 800; line-height: 1.25; word-break: keep-all; } .rk-who small { font-weight: 600; color: var(--sub); font-size: 11px; } .rk-sch { display: block; }
.rk-val { font-size: 14px; font-weight: 800; color: #7A4B00; }
.rk-self { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ink); background: #fff; border-radius: 10px; padding: 6px 10px; text-align: center; }
.rk-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--sub); }
.rk-nav button { min-width: 44px; min-height: 36px; border: 2px solid #F5D77A; background: #fff; border-radius: 999px; font-size: 14px; font-weight: 800; }
.rk-hist { margin-top: 8px; } .rk-hist summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sub); } .rk-hrow { font-size: 13px; margin-top: 4px; line-height: 1.5; } .rk-hrow .rk-who { font-size: 13px; }
.av-nick { width: 130px; max-width: 34vw; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font-size: 13px; font-weight: 700; margin-left: 6px; }
@media (max-width: 480px) { .rk-cell { padding: 6px 4px 8px; } .rk-who { font-size: 12px; } .rk-val { font-size: 12px; } .av-nick { width: 96px; } }

/* 53차-3: 랭킹 1~3등 캐릭터 배지 */
.av-bw { position: relative; display: inline-block; max-width: 100%; }
.profile-card .avatar .av-bw, .d-avatar .av-bw, .rk-av .av-bw, .av-preview .av-bw { display: block; width: 100%; height: 100%; }
.av-badge { position: absolute; top: 1px; right: 1px; line-height: 1; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }

/* 54차: 폰·패드 정렬 — 숫자판 옆 ENTER 는 한 줄로(잘리거나 두 줄로 꺾이지 않게), 위 알약은 줄바꿈 금지, 좁은 화면은 답 칸·숫자판을 폭 가득, 가로로 눕힌 폰(낮은 화면)은 답 칸과 숫자판을 나란히 */
.pill { white-space: nowrap; }
.gq-pills { flex-wrap: wrap; }
.gq-enter { white-space: nowrap; padding: 0; min-width: 64px; }
.gq-table th { white-space: nowrap; }
@media (max-width: 480px) {
  .gq-pills { gap: 6px; padding: 10px 12px; }
  .pill { padding: 5px 10px; font-size: 13px; gap: 4px; }
  .gq-answer { padding: 12px 12px 16px; gap: 12px; }
  .gq-field, .gq-fields, .gq-pad { width: 100%; }
  .gq-field { padding: 6px 16px; }
  .gq-pad { gap: 10px; }
  .gq-keys { gap: 8px; }
  .gq-enter { width: 26%; font-size: 15px; letter-spacing: 0; }
  .gq-result, .gq-analysis { padding: 12px 12px; gap: 10px; }
  .gq-result-head { gap: 10px; }
  .gq-result-line { padding: 10px 12px; }
  .gq-result-line .v { font-size: 22px; }
  .gq-table { font-size: 15px; }
  .gq-table th, .gq-table td { padding: 8px 4px; }
}
@media (max-height: 480px) {
  .topbar, .gq-header { min-height: 56px; padding: 8px 12px; }
  .gq-frame { margin: 8px 12px 10px; }
  .gq-pills { padding: 6px 12px; }
  .pill { padding: 3px 10px; font-size: 12px; }
  .gq-num { font-size: clamp(60px, 36vh, 160px); transform: translateY(-50%); }
  #gq-stage .gq-ready { transform: translateY(-50%); gap: 10px; padding: 8px; }
  #gq-stage .gq-ready-clock { transform: translate(-50%, -50%); width: min(34vh, 160px); height: min(34vh, 160px); }
  .gq-start { width: min(34vh, 160px); height: min(34vh, 160px); font-size: clamp(18px, 7vh, 30px); }
  .up-start { width: min(30vh, 160px); height: min(30vh, 160px); font-size: clamp(18px, 6vh, 28px); }
  .gq-answer { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: 6px 14px; padding: 6px 12px; }
  .gq-answer .gq-prompt { display: none; }
  .gq-answer .gq-static, .gq-answer .up-done { width: 100%; flex: none; margin: 0; padding: 0; font-size: 24px; line-height: 1.2; text-align: center; justify-content: center; }
  .gq-answer .gq-field, .gq-answer .gq-fields { width: 36%; }
  .gq-field { font-size: 30px; padding: 4px 14px; min-height: 0; }
  .gq-field.small { font-size: 24px; }
  .gq-fields { flex-direction: column; gap: 4px; }
  .gq-answer .gq-pad { width: 58%; gap: 8px; }
  .gq-keys { gap: 6px; }
  .gq-keys button { height: 34px; font-size: 20px; box-shadow: 0 2px 0 var(--line); }
  .gq-keys button.dot { font-size: 24px; }
  .gq-enter { font-size: 14px; }
}
/* 54차: 오답노트·내 기록의 "주판상 선명도 이번 주 …" 줄 — 글자 조각이 따로 놀며 세로로 꺾이던 것을 한 문장으로 흐르게 */
.blur-line { display: block; line-height: 1.7; }
.blur-line .dot { vertical-align: middle; margin-right: 6px; margin-top: -2px; }
.blur-line b { white-space: nowrap; }

/* 55차: 쓰는 기능(선생님 ⚙ 설정) — 끈 기능의 카드·버튼을 아이 화면에서 숨김 */
body.no-todo #dash-todo, body.no-message #dash-msg, body.no-ranking #dash-rank, body.no-challenge #dash-ch, body.no-avatar #dash-avok { display: none !important; }
body.no-avatar #dash-avatar { pointer-events: none; }