/* ===== 폰트 (모두 SIL OFL, fonts/ 폴더에 라이선스 동봉) ===== */
@font-face { font-family: 'Pretendard'; src: url('../fonts/PretendardVariable.woff2') format('woff2-variations'); font-weight: 45 920; font-display: swap; }
@font-face { font-family: 'Jua'; src: url('../fonts/Jua-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Gowun Dodum'; src: url('../fonts/GowunDodum-Regular.ttf') format('truetype'); font-display: swap; }

/* ===== 디자인 토큰 ===== */
:root {
  --bg: #fbf7f1; --bg-dot: #efe6da; --surface: #ffffff; --surface-2: #f6f1ea;
  --ink: #26211e; --ink-2: #5d544d; --muted: #8f857c; --line: #ebe2d7;
  --coral: #ff7a59; --coral-d: #e45a39; --coral-t: #fff0eb;
  --sky: #3d9bff; --sky-d: #1e7be0; --sky-t: #eaf4ff;
  --mint: #22bf87; --mint-d: #12996a; --mint-t: #e6f8f1;
  --sun: #ffc534; --sun-d: #e3a50e; --sun-t: #fff7dd;
  --accent: var(--coral); --accent-d: var(--coral-d); --accent-t: var(--coral-t);
  --ok: #22bf87; --ok-bg: #e6f8f1; --no: #f08a24; --no-bg: #fff3e4; --sel: #3d9bff;
  --cell-line: #f2a48d; --cell-cross: #f8d3c6; --cell-bg: #fffdf9; --pen: #1f1a17;
  --shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 6px 20px rgba(60, 40, 20, .07);
  --radius: 22px;
  --font: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-display: 'Jua', 'Pretendard', sans-serif;
  --font-write: 'Gowun Dodum', 'Malgun Gothic', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17140f; --bg-dot: #221d17; --surface: #221d18; --surface-2: #2b251f;
    --ink: #f6efe8; --ink-2: #d2c7bc; --muted: #a59a8f; --line: #3a3229;
    --coral-t: #3a2219; --sky-t: #162a40; --mint-t: #11302a; --sun-t: #3a2f10;
    --ok-bg: #11302a; --no-bg: #3a2a14;
    --cell-line: #c97a64; --cell-cross: #4d362e; --cell-bg: #2a231e; --pen: #fff3e6;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}
.g1 { --accent: var(--coral); --accent-d: var(--coral-d); --accent-t: var(--coral-t); }
.g2 { --accent: var(--sky); --accent-d: var(--sky-d); --accent-t: var(--sky-t); }
.g3 { --accent: var(--mint); --accent-d: var(--mint-d); --accent-t: var(--mint-t); }

* { box-sizing: border-box; }
html, body { margin: 0; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
body { min-height: 100vh; background: var(--bg) radial-gradient(var(--bg-dot) 1.2px, transparent 1.3px) 0 0 / 22px 22px; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { letter-spacing: -0.02em; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.ic { width: 22px; height: 22px; flex: none; }

/* ===== 버튼 ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 18px; border-radius: 16px;
  border: 2px solid var(--line); background: var(--surface); text-decoration: none; cursor: pointer; font-weight: 700; box-shadow: 0 3px 0 var(--line); transition: transform .08s, box-shadow .08s; }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-d); }
.btn.primary:active { box-shadow: 0 0 0 var(--accent-d); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 12px; box-shadow: 0 2px 0 var(--line); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .4; pointer-events: none; }
.btn.live { background: #e5484d; border-color: #e5484d; color: #fff; }
.btn3d { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 16px; background: #fff; color: var(--accent-d); font-weight: 800; text-decoration: none; box-shadow: 0 4px 0 rgba(0,0,0,.15); transition: transform .08s, box-shadow .08s; }
.btn3d:active { transform: translateY(4px); box-shadow: none; }
.btn3d.ghost { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.btn3d .ic { width: 20px; height: 20px; }
.chipbtn { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.link { border: 0; background: none; padding: 0; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ===== 캐릭터 ===== */
.char { width: 96px; height: 88px; flex: none; overflow: visible; transform-origin: 50% 95%; }
.char.mini { width: 48px; height: 44px; }
.char.logo { width: 40px; height: 37px; }
.char.big { width: 180px; height: 165px; }
.char.bounce { animation: squish 2.8s ease-in-out infinite; }
.char.late { animation-delay: -1.2s; }
.char.listen { animation: squish 3.4s ease-in-out infinite; width: min(34vw, 220px); height: auto; }
.char.talk { animation: talk .45s ease-in-out infinite; }
.char.jump { animation: jump .9s cubic-bezier(.3, 1.5, .5, 1) infinite; }
@keyframes squish { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.06, .93); } 60% { transform: scale(.97, 1.04); } }
@keyframes talk { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .95) translateY(2px); } }
@keyframes jump { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-14px) scale(.96, 1.05); } 60% { transform: translateY(0) scale(1.08, .92); } }
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .char, .qnum span, .lv.next { animation: none !important; } }

/* ===== 공통 레이아웃 ===== */
.wrap { max-width: 1040px; margin: 0 auto; padding: 18px 16px 110px; }
.wrap.narrow { max-width: 620px; }
.top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; }
.top h1 { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; }
.count { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.note { background: var(--surface); border: 1.5px dashed var(--line); border-radius: 16px; padding: 12px 16px; line-height: 1.6; margin: 0 0 16px; color: var(--ink-2); }
.kicker { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--accent-d); background: var(--accent-t); padding: 4px 10px; border-radius: 999px; }

/* 하단 탭바 */
.tabbar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; background: var(--surface); border-radius: 22px; box-shadow: 0 10px 30px rgba(40, 25, 10, .16); z-index: 30; width: min(460px, calc(100% - 24px)); }
.tabbar a { flex: 1; position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 16px; text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 700; }
.tabbar a.on { background: var(--ink); color: var(--bg); }
.tabbar .dot { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--coral); color: #fff; font-style: normal; font-size: 11px; display: grid; place-items: center; }

/* 세그먼트 */
.seg { display: inline-flex; background: var(--surface-2); padding: 4px; border-radius: 16px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 8px 16px; border-radius: 12px; font-weight: 800; color: var(--muted); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.terms { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px; }
.terms button, .terms .tab { flex: none; border: 2px solid var(--line); background: var(--surface); border-radius: 999px; padding: 9px 16px; font-weight: 800; cursor: pointer; text-decoration: none; color: var(--ink-2); }
.terms [aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ===== 홈 ===== */
.appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1040px; margin: 0 auto; padding: 14px 16px 4px; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 24px; }
.brand b { font-weight: 400; }
.home { max-width: 1040px; margin: 0 auto; padding: 8px 16px 120px; display: grid; gap: 16px; }
.home > .seg { justify-self: start; }
.today { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 26px 26px 24px; border-radius: 28px; color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #ffc534)); box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 35%, transparent); }
.today::after { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.14); }
.today .kicker { background: rgba(255,255,255,.22); color: #fff; }
.today h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 7vw, 60px); margin: 10px 0 2px; line-height: 1; }
.today h1 small { font-size: .45em; opacity: .95; margin-left: 6px; }
.today p { margin: 6px 0 16px; opacity: .92; font-weight: 600; }
.today-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.today-art { position: relative; z-index: 1; }
.today-art .char { width: 150px; height: 138px; }
.progress { display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--ink-2); }
.progress b { font-size: 22px; color: var(--ink); }
.bar { flex: 1; height: 12px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sun), var(--coral)); border-radius: 6px; }
.unit { background: var(--surface); border-radius: var(--radius); padding: 16px 18px 18px; box-shadow: var(--shadow); }
.unit > header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.unit h2 { margin: 0; font-size: 18px; }
.unit header p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.uno { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-t); color: var(--accent-d); font-family: var(--font-display); font-size: 20px; flex: none; }
.levels { display: flex; flex-wrap: wrap; gap: 12px; }
.lv { width: 82px; height: 92px; border-radius: 22px; display: grid; justify-items: center; align-content: center; text-decoration: none; background: var(--surface-2); color: var(--ink-2);
  box-shadow: 0 5px 0 var(--line); transition: transform .08s, box-shadow .08s; }
.lv:active { transform: translateY(5px); box-shadow: none; }
.lv b { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1; }
.lv span { font-size: 12px; font-weight: 700; }
.lv .lvstars { font-style: normal; font-size: 12px; color: var(--sun-d); height: 14px; letter-spacing: 1px; }
.lv.done { background: var(--accent); color: #fff; box-shadow: 0 5px 0 var(--accent-d); }
.lv.done .lvstars { color: #fff4c2; }
.lv.next { background: var(--surface); color: var(--accent-d); box-shadow: 0 5px 0 var(--accent-d), inset 0 0 0 3px var(--accent); animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.appbar-r { display: flex; align-items: center; gap: 8px; }
.gearbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink-2); }
.minilinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 22px 0 0; font-size: 14px; }
.minilinks a { color: var(--muted); font-weight: 600; text-underline-offset: 3px; }

/* ===== 급 화면 ===== */
.unit-hero { display: flex; align-items: center; gap: 16px; background: var(--surface); border-radius: 26px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.unit-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: 30px; margin: 8px 0 2px; }
.unit-hero p { margin: 0; color: var(--muted); }
.unit-hero .last { margin-top: 8px; color: var(--ink-2); font-weight: 700; }
.steps { display: grid; gap: 12px; }
.step { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 22px; background: var(--surface); box-shadow: 0 4px 0 var(--line); border: 2px solid var(--line); text-decoration: none; transition: transform .08s, box-shadow .08s; }
.step:active { transform: translateY(4px); box-shadow: none; }
.step b { display: block; font-size: 19px; }
.step small { color: var(--muted); font-size: 14px; }
.step > span:nth-child(2) { flex: 1; }
.step-n { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; flex: none; color: #fff; }
.step-n .ic { width: 26px; height: 26px; }
.s1 .step-n { background: var(--sun); } .s2 .step-n { background: var(--sky); } .s3 .step-n { background: var(--coral); }
.step.ghost { background: transparent; border-style: dashed; box-shadow: none; }
.step.ghost .step-n { background: var(--surface-2); color: var(--ink-2); }
.chev { font-size: 28px; color: var(--muted); }
.stars { color: var(--sun-d); letter-spacing: 2px; }
.stars.big { font-size: 40px; margin: 0; }

/* ===== 쓰기 화면 ===== */
.pbar { height: 6px; background: var(--surface-2); margin: 0 14px; border-radius: 3px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--coral); border-radius: 3px; transition: width .3s; }
.write { max-width: 1000px; margin: 0 auto; padding: 16px 16px 40px; display: grid; gap: 16px; }
.qrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.qbadge { display: grid; justify-items: center; width: 64px; padding: 6px 0; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--coral-d); }
.qbadge small { font-family: var(--font); font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.playbtn { width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; cursor: pointer; box-shadow: 0 5px 0 #000; transition: transform .08s, box-shadow .08s; }
.playbtn .ic { width: 32px; height: 32px; margin-left: 4px; }
.playbtn:active { transform: translateY(5px); box-shadow: none; }
.playbtn.on { background: var(--coral); box-shadow: 0 5px 0 var(--coral-d), 0 0 0 10px color-mix(in srgb, var(--coral) 20%, transparent); }
.playtxt { display: grid; gap: 2px; }
.playtxt b { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.qrow .tick { font-size: 15px; color: var(--coral-d); font-weight: 700; }
.notebook { background: var(--surface); border-radius: 24px; padding: 18px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.padtools { display: flex; flex-wrap: wrap; gap: 8px; }
.navrow { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.navrow .btn { min-height: 58px; font-size: 18px; padding: 0 26px; }
.answer-big { overflow-x: auto; padding: 4px 2px 8px; }
.reveal { padding: 14px; border-radius: 18px; background: var(--sun-t); }
.reveal p { margin: 0 0 8px; }

/* 십자 네모칸 */
.pad { display: grid; grid-template-columns: repeat(10, 1fr); border: 2.5px solid var(--cell-line); background: var(--cell-bg); border-radius: 8px; overflow: hidden; touch-action: none; user-select: none; }
.cell { position: relative; aspect-ratio: 1; border-right: 1.5px solid var(--cell-line); border-bottom: 1.5px solid var(--cell-line);
  background: repeating-linear-gradient(90deg, var(--cell-cross) 0 4px, transparent 4px 8px) center / 100% 1.5px no-repeat,
              repeating-linear-gradient(0deg, var(--cell-cross) 0 4px, transparent 4px 8px) center / 1.5px 100% no-repeat;
  display: grid; place-items: center; }
.pad .cell:nth-child(10n) { border-right: 0; }
.pad .cell:nth-last-child(-n+10) { border-bottom: 0; }
.cell canvas { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pen); touch-action: none; cursor: crosshair; }
.cell .guide { font-family: var(--font-write); font-size: min(6.4vw, 62px); color: var(--ink); opacity: .14; pointer-events: none; }
.textrow, .inkrow { display: flex; border: 2px solid var(--cell-line); background: var(--cell-bg); width: max-content; border-radius: 6px; }
.textrow .cell, .inkrow .cell { width: 44px; border-bottom: 0; font-family: var(--font-write); font-size: 26px; }
.textrow .cell:last-child, .inkrow .cell:last-child { border-right: 0; }
.textrow.big .cell { width: min(9vw, 84px); font-size: min(6.6vw, 60px); }
.inkrow canvas { width: 44px; height: 44px; color: var(--pen); }

/* ===== 확인·결과 ===== */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ck { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); border: 2.5px solid transparent; }
.ck.ok { border-color: var(--ok); background: var(--ok-bg); }
.ck.no { border-color: var(--no); background: var(--no-bg); }
.pair { display: grid; gap: 6px; overflow-x: auto; }
.ox { display: flex; gap: 10px; }
.ox button { width: 62px; height: 62px; border-radius: 20px; border: 2.5px solid var(--line); background: var(--surface); font-family: var(--font-display); font-size: 30px; cursor: pointer; box-shadow: 0 4px 0 var(--line); }
.ox button:active { transform: translateY(4px); box-shadow: none; }
.ck.ok .o { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 4px 0 var(--mint-d); }
.ck.no .x { background: var(--no); border-color: var(--no); color: #fff; box-shadow: 0 4px 0 #c96d12; }
.num { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 10px; background: var(--coral-t); color: var(--coral-d); font-weight: 800; margin-right: 6px; }
.result { max-width: 640px; margin: 0 auto; padding: 24px 16px 60px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.result h1 { font-family: var(--font-display); font-weight: 400; font-size: 34px; margin: 0; }
.bubble { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--surface); box-shadow: var(--shadow); border-radius: 22px; padding: 12px 18px; max-width: 520px; }
.bubble p { margin: 0; line-height: 1.5; }
.wrongs { text-align: left; width: 100%; background: var(--surface); border-radius: 20px; padding: 6px 18px; box-shadow: var(--shadow); }
.wrongs p { font-family: var(--font-write); font-size: 21px; }
.wrongs .tags { font-family: var(--font); font-size: 13px; color: var(--muted); }

/* ===== 오답 노트 ===== */
.notes-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.notes-head .terms { padding: 0; }
.ngroup { margin: 16px 0; background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.ngroup > header { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1.5px dashed var(--line); }
.ngroup > header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.ngroup ul { list-style: none; margin: 0; padding: 0; }
.nitem { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nitem:last-child { border-bottom: 0; }
.nitem.fixed { opacity: .5; }
.nmeta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--muted); }
.okbadge { color: var(--ok); font-weight: 800; }
.empty { text-align: center; padding: 40px 0; color: var(--muted); }

/* ===== 친구들 ===== */
.friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.friend { background: var(--surface); border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: var(--shadow); }
.friend .char { width: 124px; height: 114px; }
.friend h2 { font-family: var(--font-display); font-weight: 400; margin: 6px 0 2px; font-size: 24px; }
.friend .role { margin: 0; color: var(--coral-d); font-weight: 800; font-size: 14px; }
.friend .line { font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* ===== 교실 모드 ===== */
body[data-view="class"] { background: var(--coral-t); }
.stage { min-height: 100vh; display: flex; flex-direction: column; }
.stage-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-weight: 800; }
.stage-top > span:nth-child(2) { flex: 1; }
.dots { display: flex; gap: 6px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--line); transition: transform .2s; }
.dots i.done { background: var(--coral); opacity: .45; }
.dots i.on { background: var(--coral); transform: scale(1.35); }
.q { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; }
.qnum { font-family: var(--font-display); font-size: clamp(32px, 6vw, 56px); }
.qnum span { display: inline-block; font-size: clamp(110px, 22vw, 220px); color: var(--coral); line-height: 1; animation: pop .4s cubic-bezier(.2, 1.6, .5, 1); }
.tick { min-height: 1.5em; margin: 0; font-size: 18px; color: var(--coral-d); font-weight: 700; }
.stage-ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 16px; }
.stage-ctl .btn { min-height: 64px; font-size: 20px; padding: 0 26px; }
.stage-ctl .play { background: var(--ink); color: var(--bg); border-color: var(--ink); min-width: 220px; box-shadow: 0 4px 0 #000; }
.hint { text-align: center; color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.answers { flex: 1; padding: 20px; max-width: 1000px; margin: 0 auto; width: 100%; }
.answers h2 { font-family: var(--font-display); font-weight: 400; font-size: 34px; }
.answers ol { list-style: none; padding: 0; display: grid; gap: 10px; }
.answers li { font-family: var(--font-write); font-size: clamp(22px, 3.4vw, 36px); background: var(--surface); border-radius: 18px; padding: 12px 18px; }

/* ===== 선생님·표 ===== */
.tscroll { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.ttable { width: 100%; border-collapse: collapse; background: var(--surface); }
.ttable th, .ttable td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.ttable th { font-size: 13px; color: var(--muted); }
.ttable .acts { display: flex; gap: 6px; }
.grid-wrap { overflow: auto; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); max-height: 60vh; }
.grid { border-collapse: collapse; width: 100%; }
.grid th, .grid td { border-bottom: 1px solid var(--line); padding: 4px; text-align: center; }
.grid thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; font-size: 14px; }
.grid tbody th { color: var(--muted); font-weight: 600; min-width: 48px; }
.mk { width: 44px; height: 40px; border-radius: 12px; border: 1.5px dashed var(--line); background: transparent; cursor: pointer; font-weight: 800; font-size: 13px; }
.mk.ok { background: var(--ok-bg); color: var(--ok); border: 1.5px solid var(--ok); font-size: 18px; }
.mk.no { background: var(--no-bg); color: var(--no); border: 1.5px solid var(--no); }
.mk.sel { outline: 3px solid var(--sel); outline-offset: 1px; }
span.mk { display: inline-grid; place-items: center; }
.sum { font-weight: 800; color: var(--muted); min-width: 56px; }
.tagpick { margin: 14px 0; padding: 14px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.tagpick h3 { margin: 0 0 10px; font-size: 15px; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
.summary > div { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.summary h3 { margin: 0 0 8px; font-size: 15px; }
.summary ol { margin: 0; padding-left: 20px; line-height: 1.9; }
.bars { list-style: none; padding: 0 !important; }
.bars li { display: grid; grid-template-columns: 24px 1fr 44px; align-items: center; gap: 8px; }
.bars i { height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--ok) var(--p), var(--line) var(--p)); }
.bars em { font-style: normal; font-size: 13px; color: var(--muted); text-align: right; }
.ok { color: var(--ok); } .no { color: var(--no); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.edit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.edit-row { background: var(--surface); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; box-shadow: var(--shadow); }
.row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.type { font-size: 13px; color: var(--muted); }
.edit-row .text { width: 100%; font-family: var(--font-write); font-size: 22px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); }
.edit-row .text:focus { outline: none; border-color: var(--coral); }
.rec-state { font-size: 13px; color: var(--muted); }
details summary { cursor: pointer; color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.savebar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.field input[type=number], .field select { width: 90px; padding: 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); }
.row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== 인쇄 ===== */
.print-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; }
.paper { background: #fff; color: #000; max-width: 820px; margin: 0 auto 40px; padding: 32px 36px; box-shadow: var(--shadow); border-radius: 6px; }
.paper-head { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 18px; font-size: 16px; }
.paper .num { background: #f3f3f3; color: #000; }
.sheet { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sheet li { display: flex; align-items: center; }
.sheet i { width: 42px; height: 42px; border: 1px solid #555; margin-left: -1px; background: linear-gradient(#ccc, #ccc) center / 100% 1px no-repeat, linear-gradient(#ccc, #ccc) center / 1px 100% no-repeat; }
.glist { padding: 0; list-style: none; display: grid; gap: 14px; font-family: var(--font-write); font-size: 24px; }
@media print {
  .no-print, .tabbar { display: none !important; }
  body, html { background: #fff; }
  .paper { box-shadow: none; margin: 0; padding: 0; max-width: none; }
}

/* ===== 작은 화면 ===== */
@media (max-width: 560px) {
  .appbar { flex-wrap: wrap; }
  .brand { font-size: 20px; }
  .today { padding: 20px; }
  .today-art .char { width: 96px; height: 88px; }
  .lv { width: 68px; height: 78px; border-radius: 18px; }
  .lv b { font-size: 26px; }
  .ck { grid-template-columns: 1fr; }
  .textrow .cell, .inkrow .cell, .inkrow canvas { width: 30px; height: 30px; font-size: 18px; }
  .sheet i { width: 30px; height: 30px; }
  .playbtn { width: 60px; height: 60px; }
  .stage-ctl .btn { min-height: 54px; font-size: 17px; padding: 0 16px; }
}

/* ======================================================================
   공책·문구점 테마 — 모눈 종이, 마스킹테이프, 빨간 동그라미 채점, 참 잘했어요 도장
   ====================================================================== */
:root { --grid-line: #e9e1d4; --tape: rgba(255, 214, 102, .78); --tape-2: rgba(150, 205, 255, .7); --tape-3: rgba(255, 170, 180, .7); --red-pen: #e8423f; }
@media (prefers-color-scheme: dark) { :root { --grid-line: #2a241d; --red-pen: #ff6b66; } }
body { background-color: var(--bg); background-image:
  linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 26px 26px; background-position: -1px -1px; }

/* 스티커: 흰 테두리 + 살짝 그림자 */
.char { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 4px rgba(60, 35, 15, .18)); }
.char.logo, .char.mini { filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 2px 2px rgba(60, 35, 15, .15)); }

/* 마스킹테이프 */
.tape { position: relative; }
.tape::before { content: ''; position: absolute; top: -11px; left: 26px; width: 86px; height: 24px; background: var(--tape); transform: rotate(-4deg);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 48%); z-index: 2; }
.tape.t2::before { background: var(--tape-2); left: auto; right: 30px; transform: rotate(5deg); }
.tape.t3::before { background: var(--tape-3); }

/* 형광펜 라벨 (알약 대신) */
.kicker { background: none; color: var(--ink-2); padding: 0 2px; border-radius: 0; font-size: 14px; letter-spacing: 0;
  background-image: linear-gradient(transparent 55%, var(--sun-t) 55%, var(--sun-t) 92%, transparent 92%); }
@media (prefers-color-scheme: dark) { .kicker { background-image: linear-gradient(transparent 55%, #5b4a14 55%, #5b4a14 92%, transparent 92%); } }

/* 오늘의 받아쓰기: 색지 + 테이프, 그라데이션 없음 */
.today { background: var(--accent); box-shadow: 0 2px 0 var(--accent-d), 0 14px 26px -12px rgba(60, 35, 15, .35); border-radius: 10px 26px 12px 24px; overflow: visible; }
.today::after { display: none; }
.today .kicker { color: #fff; background-image: linear-gradient(transparent 60%, rgba(255,255,255,.28) 60%); }
.today-art .char { transform: rotate(6deg); }

/* 단원 카드 = 공책 한 장 (빨간 여백선) */
.unit { border-radius: 6px 18px 18px 18px; background-image: linear-gradient(90deg, transparent 46px, rgba(232, 66, 63, .22) 46px, rgba(232, 66, 63, .22) 48px, transparent 48px); }
.unit > header { padding-left: 0; }

/* 급 타일: 끝내면 빨간 동그라미, 만점이면 도장 */
.lv { position: relative; border-radius: 14px; }
.lv.done { background: var(--surface); color: var(--ink); box-shadow: 0 5px 0 var(--line); }
.lv.done::after { content: ''; position: absolute; inset: 8px 10px 16px; border: 3px solid var(--red-pen); border-radius: 50%; transform: rotate(-8deg); opacity: .85; }
.lv.done .lvstars { color: var(--sun-d); }
.lv.perfect::before { content: '참\A잘했어요'; white-space: pre; position: absolute; right: -10px; top: -10px; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--red-pen); color: var(--red-pen); font-size: 8.5px; line-height: 1.15; font-weight: 900; display: grid; place-items: center; text-align: center;
  background: color-mix(in srgb, var(--surface) 85%, transparent); transform: rotate(14deg); z-index: 1; }

/* 결과 도장 */
.stamp { display: inline-grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; border: 5px double var(--red-pen); color: var(--red-pen);
  font-family: var(--font-display); font-size: 24px; line-height: 1.15; text-align: center; transform: rotate(-12deg); animation: stamp .45s cubic-bezier(.2, 1.4, .4, 1) both; mix-blend-mode: multiply; }
@keyframes stamp { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: .92; } }
@media (prefers-color-scheme: dark) { .stamp { mix-blend-mode: normal; } }

/* 단계 카드, 친구 카드도 종이처럼 */
.step { border-radius: 8px 20px 20px 20px; }
.friend, .castcard { border-radius: 6px; transform: rotate(var(--r, 0deg)); }
.friend:nth-child(3n+1), .castcard:nth-child(3n+1) { --r: -1.2deg; }
.friend:nth-child(3n+2), .castcard:nth-child(3n+2) { --r: .8deg; }
.friend:nth-child(3n), .castcard:nth-child(3n) { --r: -.4deg; }
.notebook { border-radius: 6px 22px 22px 22px; }
.tabbar a.on { background: var(--accent, var(--coral)); }

/* ======================================================================
   패드 가로 모드: 버튼은 왼쪽 세로 줄, 나머지는 모두 네모 칸
   ====================================================================== */
.fsbtn { border: 2px solid var(--line); background: var(--surface); border-radius: 12px; padding: 7px 12px; font-weight: 800; font-size: 14px; cursor: pointer; margin-left: 8px; color: var(--ink-2); }
:fullscreen body, body:fullscreen { overflow: auto; }

@media (orientation: landscape) and (min-width: 700px) and (max-height: 1000px) {
  body.writing .top { padding: 6px 14px; }
  body.writing .top h1 { font-size: 19px; }
  body.writing .back { width: 36px; height: 36px; }
  body.writing .pbar { margin: 0 14px; }
  body.writing .write { max-width: none; grid-template-columns: 176px minmax(0, 1fr); align-items: start; padding: 12px 16px 16px; gap: 12px 18px; }
  body.writing .write > .qrow { grid-column: 1; grid-row: 1 / span 3; flex-direction: column; align-items: stretch; gap: 12px;
    background: var(--surface); border-radius: 20px; padding: 14px; box-shadow: var(--shadow); }
  body.writing .write > .qrow .qbadge { width: auto; box-shadow: none; background: var(--surface-2); }
  body.writing .write > .qrow .playbtn { width: 100%; height: 76px; border-radius: 22px; }
  body.writing .write > .qrow .playtxt { justify-items: center; text-align: center; }
  body.writing .write > .qrow .tick { text-align: center; min-height: 1.4em; }
  body.writing .write > .navrow { grid-column: 1; grid-row: 4; flex-direction: column; align-items: stretch; }
  body.writing .write > .navrow .btn { width: 100%; min-height: 60px; }
  body.writing .write > .answer-big, body.writing .write > .notebook, body.writing .write > .reveal { grid-column: 2; }
  body.writing .write > .notebook { padding: 12px; }
  /* 칸이 화면 높이를 넘지 않게: 두 줄짜리 문장도 한눈에 */
  body.writing .write > .notebook .pad { max-width: calc((100vh - 230px) * 5); }
  body.writing .answer-big .textrow.big .cell { width: min(7vw, 80px); font-size: min(5vw, 54px); }
}

/* 세로로 들고 있을 때 안내 (터치 기기에서 쓰기 화면만) */
.rotate-hint { display: none; }
@media (orientation: portrait) and (pointer: coarse) and (min-width: 600px) {
  body.writing:not(.rot-skip) .rotate-hint { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 24px;
    background: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 26px 26px; }
}
.rotate-hint h2 { font-family: var(--font-display); font-weight: 400; font-size: 32px; margin: 8px 0 0; }
.rotate-hint p { margin: 0 0 8px; color: var(--ink-2); }
.rot-art { position: relative; display: flex; align-items: center; gap: 16px; }
.rot-pad { width: 90px; height: 128px; border: 6px solid var(--ink); border-radius: 16px; background: var(--surface); animation: turn 2.4s ease-in-out infinite; }
@keyframes turn { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }

/* ======================================================================
   비교 채점: 내 글씨(위) + 정답(아래)을 한 열로, 틀린 칸은 빨간 펜 동그라미
   ====================================================================== */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); margin-bottom: 12px; font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 18px; height: 18px; border-radius: 4px; display: inline-block; border: 2px solid var(--cell-line); }
.lg.mine { background: var(--cell-bg); } .lg.ans { background: var(--sun-t); }
.lg.wrong { border: 3px solid var(--red-pen); border-radius: 50%; } .lg.soft { border: 3px dashed var(--sun-d); border-radius: 50%; }
.cklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ckrow { min-width: 0; }
.ckrow { background: var(--surface); border-radius: 8px 20px 20px 20px; padding: 12px 14px 14px; box-shadow: var(--shadow); border-left: 6px solid var(--ok); }
.ckrow.no { border-left-color: var(--red-pen); }
.ckhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ckres { font-family: var(--font-display); font-size: 20px; color: var(--ok); }
.ckrow.no .ckres { color: var(--red-pen); }
.ckhead .clear { margin-left: auto; }
.cmpwrap { overflow-x: auto; padding-bottom: 18px; }
.cmp { --cw: 60px; display: flex; width: max-content; border: 2px solid var(--cell-line); border-radius: 6px; background: var(--cell-bg); }
.cmp.big { --cw: min(8.6vw, 92px); }
.cc { position: relative; display: grid; grid-template-rows: var(--cw) calc(var(--cw) * .82); width: var(--cw); padding: 0; border: 0; border-right: 1.5px solid var(--cell-line); background: none; font: inherit; color: inherit; cursor: pointer; }
.cc:last-child { border-right: 0; }
.cc .cell { width: 100%; height: 100%; aspect-ratio: auto; border: 0; }
.cc .mine canvas { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pen); pointer-events: none; }
.cc .ans { background: var(--sun-t); border-top: 1.5px solid var(--cell-line); font-family: var(--font-write); font-size: calc(var(--cw) * .5); color: var(--ink-2); }
.cc.gap .ans { background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(0,0,0,.04) 5px 10px); }
.cc.extra .ans { background: transparent; }
.cc.wrong .mine::after, .cc.soft .mine::after { content: ''; position: absolute; inset: 7%; border-radius: 50%; border: 3.5px solid var(--red-pen); transform: rotate(-8deg); pointer-events: none; }
.cc.soft .mine::after { border: 3px dashed var(--sun-d); }
.cc.wrong .ans { color: var(--red-pen); font-weight: 700; }
.cc .why { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--red-pen); }
.cc.soft .why { color: var(--sun-d); }
.cc:active { background: rgba(232, 66, 63, .06); }
.navrow.sticky { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 35%); justify-content: space-between; }
.tally { font-weight: 700; color: var(--ink-2); } .tally b { font-size: 22px; color: var(--ink); }
.check.teacher .ckrow { padding: 18px; }
.tdots { display: flex; gap: 6px; margin-bottom: 12px; }
.tdots i { width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.tdots i.no { background: color-mix(in srgb, var(--red-pen) 40%, var(--line)); } .tdots i.on { outline: 3px solid var(--ink); outline-offset: 2px; }
.lettercount { margin: 0; color: var(--ink-2); font-weight: 600; } .lettercount b { color: var(--coral-d); font-size: 22px; }
.nitem .cmp { --cw: 40px; }

/* ===== 갤럭시탭 맞춤 ===== */
.pad { grid-template-columns: repeat(var(--cols, 10), 1fr); margin: 0 auto; width: 100%; }
.pad .cell:nth-child(10n), .pad .cell:nth-last-child(-n+10) { border-right: 1.5px solid var(--cell-line); border-bottom: 1.5px solid var(--cell-line); }
.pad .cell.endcol { border-right: 0; }
.pad .cell.lastrow { border-bottom: 0; }
.pad[data-cols="6"] { max-width: 840px; }
.pad .cell { container-type: inline-size; }
.pad .cell .guide { font-size: 64cqw; }
.units { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .units { grid-template-columns: 1fr 1fr; align-items: start; }
  .wrap.narrow.unitpage { max-width: 1040px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; align-items: start; }
  .unitpage .unit-hero { flex-direction: column; text-align: center; padding: 28px; margin: 0; }
  .unitpage .unit-hero .char { width: 160px; height: 150px; }
  .unitpage .minilinks { grid-column: 1 / -1; }
}
/* 키가 낮은 화면(주소창 있는 10인치 탭): 외우기 정답 줄과 위쪽 여백을 줄임 */
@media (orientation: landscape) and (max-height: 620px) {
  body.writing .answer-big .textrow.big .cell { width: min(5.6vw, 56px); font-size: min(4vw, 38px); }
  body.writing .write { padding-top: 8px; gap: 8px 16px; }
  body.writing .write > .qrow { gap: 8px; padding: 10px; }
  body.writing .write > .qrow .playbtn { height: 60px; }
  body.writing .write > .navrow .btn { min-height: 52px; }
  body.writing .write > .notebook .pad { max-width: calc((100vh - 170px) * 5); }
  body.writing .write > .notebook .pad[data-cols="6"] { max-width: min(840px, calc((100vh - 170px) * 6)); }
}
@media (orientation: landscape) and (min-width: 700px) { body.writing .write > .notebook .pad[data-cols="6"] { max-width: min(900px, calc((100vh - 230px) * 6)); } }

/* ======================================================================
   쓰기 화면 v2 (가로): 위에는 문제·듣기·이동 한 줄, 아래에는 넓은 네모 칸 공책
   ====================================================================== */
@media (orientation: landscape) and (min-width: 700px) {
  body.writing .write { display: grid; max-width: none; min-height: calc(100dvh - 58px); padding: 10px 18px 14px; gap: 10px 16px;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "q nav" "ans ans" "rev rev" "pad pad"; align-items: center; }
  body.writing .write > .qrow { grid-area: q; flex-direction: row; align-items: center; gap: 14px; background: none; box-shadow: none; padding: 0; }
  body.writing .write > .qrow .qbadge { width: 64px; background: var(--surface); box-shadow: var(--shadow); }
  body.writing .write > .qrow .playbtn { width: 64px; height: 64px; border-radius: 50%; }
  body.writing .write > .qrow .playtxt { justify-items: start; text-align: left; }
  body.writing .write > .qrow .tick { text-align: left; }
  body.writing .write > .navrow { grid-area: nav; flex-direction: row; align-items: center; }
  body.writing .write > .navrow .btn { width: auto; min-height: 54px; padding: 0 22px; }
  body.writing .write > .answer-big { grid-area: ans; }
  body.writing .write > .reveal { grid-area: rev; }
  body.writing .write > .notebook { grid-area: pad; align-self: end; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
  body.writing .write > .notebook .padtools { order: -1; justify-content: flex-end; }
  body.writing .write > .notebook .pad { max-width: calc((100dvh - 250px) * 5); }
  body.writing .write > .notebook .pad[data-cols="6"] { max-width: min(900px, calc((100dvh - 250px) * 6)); }
}
@media (orientation: landscape) and (min-width: 700px) and (max-height: 620px) {
  body.writing .write { padding-top: 6px; gap: 6px 14px; }
  body.writing .write > .qrow .playbtn, body.writing .write > .qrow .qbadge { width: 54px; height: 54px; }
  body.writing .write > .navrow .btn { min-height: 48px; padding: 0 16px; }
  body.writing .write > .notebook { padding: 8px 10px 10px; gap: 6px; }
  body.writing .write > .notebook .pad { max-width: calc((100dvh - 200px) * 5); }
}
.mid { display: none; }
@media (orientation: landscape) and (min-width: 700px) {
  body.writing .write > .mid { grid-area: ans; display: grid; justify-items: center; gap: 6px; align-self: center; color: var(--muted); font-weight: 700; }
  body.writing .write > .mid .char.listen { width: min(18vh, 150px); height: auto; }
  body.writing .write > .mid p { margin: 0; }
}
@media (orientation: landscape) and (max-height: 620px) { body.writing .write > .mid { display: none; } }

/* 쓰기 화면 v3 (가로): 원고지처럼 공책을 문제 줄 바로 아래에 붙임, 칸 크기 고정 */
@media (orientation: landscape) and (min-width: 700px) {
  body.writing .write { grid-template-rows: auto auto auto auto; align-content: start; min-height: 0; }
  body.writing .write > .notebook { align-self: start; }
  body.writing .write > .notebook .pad, body.writing .write > .notebook .pad[data-cols="6"] { max-width: calc((100dvh - 300px) * 5); }
}
@media (orientation: landscape) and (min-width: 700px) and (max-height: 620px) {
  body.writing .write > .notebook .pad { max-width: calc((100dvh - 250px) * 5); }
}

/* 사람 판정: 문장마다 ⭕/❌ */
.ckrow.todo { border-left-color: var(--line); }
.ckrow.todo .ckres { color: var(--muted); }
.ckhead { flex-wrap: wrap; }
.judge { margin-left: auto; display: flex; gap: 8px; }
.jb { border: 2.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 8px 14px; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.jb:active { transform: translateY(3px); box-shadow: none; }
.jb.o.on { background: var(--ok-bg); border-color: var(--ok); color: var(--mint-d); box-shadow: 0 3px 0 var(--mint-d); }
.jb.x.on { background: #ffecea; border-color: var(--red-pen); color: var(--red-pen); box-shadow: 0 3px 0 var(--red-pen); }
.check.teacher .jb { padding: 14px 22px; font-size: 18px; }