/* AI 튜터 대화창 — 원칙 문서 docs/04 기준, 토큰은 docs/19(2026-11-03 확정: 강조색·경고색·둥글기·글자 체계·다크 모드)
   글자: Pretendard 12·14·16·20·24·28, 두께 500·600만 / 색: 무채색 + 강조색(Filled 면·프로필 원) + 경고색(위험 신호만) / 누르는 곳 40 이상
   배치: 한 줄 대화(최대 680) · 넓은 화면은 대화와 메모 칸을 한 묶음으로 가운데 */
/* 전체 파일은 수학 기호 묶음(U+2200-22FF)을 맡지 않는다 — Pretendard에 없는 ∈ ⊂ ∩ 같은 기호 때문에 쓸 수도 없는 전체 파일을 받지 않게. 그 기호는 기기 글꼴로 나온다 */
@font-face { font-family: Pretendard; font-weight: 500; font-display: swap; src: url("fonts/Pretendard-Medium.woff2") format("woff2"); unicode-range: U+0000-21FF, U+2300-10FFFF; }
@font-face { font-family: Pretendard; font-weight: 600; font-display: swap; src: url("fonts/Pretendard-SemiBold.woff2") format("woff2"); unicode-range: U+0000-21FF, U+2300-10FFFF; }
/* 한글 2,350자·영문·기호·수식 기호(÷ − ≤ √ 등)만 담은 작은 파일(약 0.18MB). 수식 기호는 2026-11-05에 더함 — 틀린 갈래의 "6 ÷ 2"에서 전체 파일(0.78MB)을 받던 것. 여기에 없는 글자만 위의 전체 파일을 받는다 */
@font-face { font-family: Pretendard; font-weight: 500; font-display: swap; src: url("fonts/Pretendard-Medium.subset.woff2") format("woff2"); unicode-range: U+0020-007E, U+00B2-00B3, U+00B7, U+00D7, U+2010-2027, U+2190-2193, U+203B, U+2713, U+2715, U+25A0-25CF, U+3008-3011, U+3131-318E, U+AC00-D7A3, U+00B0, U+00B1, U+00B9, U+00F7, U+03A3, U+03B1, U+03B2, U+03B8, U+03C0, U+03C3, U+2032, U+2070, U+2074, U+2075, U+2076, U+2077, U+2078, U+2079, U+207F, U+2160, U+2161, U+2205, U+2212, U+221A, U+221E, U+222B, U+2260, U+2264, U+2265, U+22EF, U+232B; }
@font-face { font-family: Pretendard; font-weight: 600; font-display: swap; src: url("fonts/Pretendard-SemiBold.subset.woff2") format("woff2"); unicode-range: U+0020-007E, U+00B2-00B3, U+00B7, U+00D7, U+2010-2027, U+2190-2193, U+203B, U+2713, U+2715, U+25A0-25CF, U+3008-3011, U+3131-318E, U+AC00-D7A3, U+00B0, U+00B1, U+00B9, U+00F7, U+03A3, U+03B1, U+03B2, U+03B8, U+03C0, U+03C3, U+2032, U+2070, U+2074, U+2075, U+2076, U+2077, U+2078, U+2079, U+207F, U+2160, U+2161, U+2205, U+2212, U+221A, U+221E, U+222B, U+2260, U+2264, U+2265, U+22EF, U+232B; }

:root {
  --page: #f2f4f6; /* 화면 바탕 — 살짝 회색(아주 옅은 푸른 기, 2026-11-04). 카드·말풍선·헤더·답하는 칸은 그 위의 흰 면(--bg)으로 채운다(2026-11-04 사무엘님) */
  --bg: #ffffff;
  --surface: #f5f6f8;
  --surface-2: #eceef1;
  --line: #e4e7eb;
  --line-strong: #d2d6dc;
  --line-input: #8b919a; /* 입력 칸 경계 — 흰 바탕과 APCA Lc 60(기준 30, docs/21) */
  --text: #191c21;
  --text-2: #50555e;
  --text-3: #737984; /* 흐린 글자 — 흰 바탕과 APCA Lc 73(기준 30) */
  --ink: #191c21;
  --on-ink: #ffffff;
  --accent: #EB7100; /* 강조색 — 주황. 흰 글자 대비(APCA Lc 62, 필요 60)가 나오도록 #FF9C00에서 어둡게 함(2026-11-04 사무엘님). Filled 면·고른 버튼·켜진 스위치에만, 글자 색으로 쓰지 않음 */
  --on-accent: #ffffff; /* 강조색 위 흰 글자 APCA Lc 62 — 버튼 글자 16px·600에 필요한 60(완화한 기준, docs/21) */
  --warn: #D92D20; /* 경고색 — 위험 신호·되돌릴 수 없는 일에만. 틀림에는 쓰지 않음 */
  --on-warn: #ffffff;
  --orb-1: #FFD60A; --orb-2: #EB7100; --orb-3: #FF5E1A; /* 프로필 원 */
  --r-s: 8px; --r-m: 12px; --r-l: 16px; /* 둥글기 — 거의 모든 것에. 2026-11-04 6·8·12에서 8·12·16으로(docs/19) */
  --gutter: max(16px, env(safe-area-inset-left, 0px), calc((100% - 680px) / 2));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px), calc((100% - 680px) / 2));
  /* 간격 기준(2026-11-04 사무엘님 "글꼴과 여백 기준을 세워서 적용해봐", docs/19 4절): 4·8·12·16·20·24·32·40·48만. 화면 바깥 16(폭 600 이상 24), 카드 안 16(폭 600 이상 20), 카드 사이 12. 수식 글자 맞춤(.m*)의 1~3px는 글자 모양이라 제외 */
}
@media (min-width: 600px) { :root { --gutter: max(24px, env(safe-area-inset-left, 0px), calc((100% - 680px) / 2)); --gutter-r: max(24px, env(safe-area-inset-right, 0px), calc((100% - 680px) / 2)); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --page: #000000; --bg: #121418; --surface: #1b1e23; --surface-2: #25292f; --line: #2c3036; --line-strong: #5a6069; --line-input: #787e88;
  --text: #eceef2; --text-2: #cfd3d9; --text-3: #878d97; --ink: #eceef2; --on-ink: #121418;
  --accent: #EB7100; --on-accent: #ffffff; --warn: #D92D20; --on-warn: #ffffff; --orb-1: #FFD426; --orb-2: #EB7100; --orb-3: #FF6A2A;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --page: #000000; --bg: #121418; --surface: #1b1e23; --surface-2: #25292f; --line: #2c3036; --line-strong: #5a6069; --line-input: #787e88;
  --text: #eceef2; --text-2: #cfd3d9; --text-3: #878d97; --ink: #eceef2; --on-ink: #121418;
  --accent: #EB7100; --on-accent: #ffffff; --warn: #D92D20; --on-warn: #ffffff; --orb-1: #FFD426; --orb-2: #EB7100; --orb-3: #FF6A2A;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  font-weight: 500; font-size: 16px; line-height: 1.6;
  color: var(--text); background: var(--page);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: break-word; /* 줄은 어절 단위로("3이에/요"처럼 낱말 가운데서 끊지 않게) */
}
.nb { white-space: nowrap; } /* 식은 한 줄에서 끊지 않는다 */
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
ol { list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.app { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
.chat { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--page); }
.top, .memo, .log, .ans, .scene { padding-left: var(--gutter); padding-right: var(--gutter-r); }

/* 위 막대 */
.top { padding-block: 8px 12px; background: var(--bg); }
.top-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.unit { min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; } /* 단원 이름 20(Title L) + 학년 14 보조 — 화면에서 가장 큰 글자가 여기가 어디인지 말한다(docs/19 3절, 2026-11-04) */
.unit b { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }
.unit span { font-size: 14px; color: var(--text-2); }
.ic { flex: none; display: block; } /* Lucide 선 아이콘 20, 글 앞에 붙인다(docs/19 5절) */
@media (max-width: 599px) { .top-actions .ic { display: none; } } /* 폭 600 미만은 헤더 버튼을 글만 — 아이콘은 글을 대신하지 않으므로 자리가 모자라면 아이콘을 뺀다 */
.top-actions { display: flex; gap: 0; flex: none; }
.ghost { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; font-size: 16px; font-weight: 600; color: var(--text); white-space: nowrap; } /* Text 버튼(docs/17) — 누를 수 있는 글은 진한 글자(docs/16) */
.ghost:hover { background: var(--surface); }
.ghost[aria-expanded="true"], .ghost[aria-pressed="true"] { background: var(--surface-2); }
.goal { margin-top: 4px; font-size: 16px; font-weight: 600; }
.goal.empty { color: var(--text-3); font-weight: 500; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 12px; }
.step i { display: block; position: relative; overflow: hidden; height: 4px; border-radius: 2px; background: var(--line); }
.step i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .4s ease-out; }
.step span { display: block; margin-top: 4px; font-size: 12px; color: var(--text-3); }
.step.on i::after { transform: scaleX(1); }
.step.on span { color: var(--text); }

/* 메모 카드 */
.memo { display: flex; flex-direction: column; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); } /* 펼친 메모 카드와 그 아래 대화가 붙어 보이지 않게 */
.memo-empty, .side-empty { font-size: 14px; color: var(--text-3); }
.card { background: var(--bg); border-radius: var(--r-l); padding: 16px; } /* 카드는 테두리 없이 흰 면으로 채운다. 안 여백 16(폭 600 이상 20) */
@media (min-width: 600px) { .card { padding: 20px; } }

/* 대화 */
.log { flex: 1; min-height: 0; overflow-y: auto; padding-block: 20px; display: flex; flex-direction: column; gap: 12px; }
/* 메신저 꼴 — AI는 프로필 원 + 말풍선(이름 없음, 2026-11-03 확정), 학생은 오른쪽. 시각은 말풍선 옆 아래(12, 보조 글자) */
.day { align-self: center; font-size: 12px; color: var(--text-2); padding: 4px 12px; border-radius: var(--r-s); background: var(--bg); }
.msg { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; }
.msg.cont { margin-top: -8px; }
.ai-row { align-self: flex-start; max-width: 92%; }
.me-row { align-self: flex-end; align-items: flex-end; justify-content: flex-end; }
/* 프로필 원 — 강조색 계열 세 색이 7초에 한 바퀴 돎, AI가 말을 만드는 동안 숨 쉬듯 커짐(2026-11-03 사무엘님 "역동성이있는 모습, 서비스 테마 색과 비슷") */
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; position: relative; overflow: hidden; isolation: isolate; background: var(--orb-2); }
.avatar::before { content: ""; position: absolute; inset: -30%; background: conic-gradient(from 0deg, var(--orb-1), var(--orb-2), var(--orb-3), var(--orb-2), var(--orb-1)); filter: blur(4px); animation: orb 7s linear infinite; }
.avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 52%); }
.avatar.talk { animation: breathe 1.2s ease-in-out infinite; }
@keyframes orb { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .avatar::before, .avatar.talk { animation: none; } }
.msg.cont .avatar { visibility: hidden; height: 0; }
.msg-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 auto; }
.msg-line { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.time { flex: none; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.ai { min-width: 0; flex: 0 1 auto; background: var(--bg); border-radius: 4px var(--r-l) var(--r-l) var(--r-l); padding: 12px 16px; }
.msg.cont .ai { border-radius: var(--r-l); }
.me { min-width: 0; flex: 0 1 auto; background: var(--ink); color: var(--on-ink); border-radius: var(--r-l) 4px var(--r-l) var(--r-l); padding: 12px 16px; white-space: pre-wrap; }
.me-row { max-width: 85%; }
.msg.cont .me { border-radius: var(--r-l); }
@media (max-height: 600px) { .day, .time { display: none; } .msg.cont { margin-top: 0; } .avatar { width: 28px; height: 28px; } .ai, .me { padding: 8px 12px; } } /* 낮은 휴대폰: 마지막 AI 질문이 가려지지 않게 날짜·시각 줄을 접음 */
.note { align-self: center; font-size: 14px; color: var(--text-2); background: var(--bg); border-radius: var(--r-s); padding: 4px 12px; text-align: center; }
.dots { display: inline-flex; gap: 4px; padding: 8px 0; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: blink 1s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.vis { margin-top: 8px; }
.vis table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vis td { padding: 4px 16px 4px 0; }
.vis .hit td { font-weight: 600; }
.vis svg { display: block; max-width: 100%; }
.vis text { font-family: inherit; font-size: 16px; font-weight: 500; fill: var(--text); }

/* 반응과 자잘한 보상 — 원칙 6절. 이동 4px·크기 97~115%·0.1~0.4초, 튀는 곡선 없음, 한 번에 한 곳 */
.msg, .note { animation: rise .2s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
.tick { display: inline-block; margin-left: 8px; font-weight: 600; animation: pop .2s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(.85); } }
.bump { display: inline-block; animation: bump .25s ease-out; }
@keyframes bump { 40% { transform: scale(1.15); } }
.instant .msg, .instant .ai, .instant .me, .instant .note, .instant .tick { animation: none; }

/* 답하는 칸 */
.ans { background: var(--bg); padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; }
.ans:empty { display: none; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--bg); color: var(--text); font-size: 16px; font-weight: 500; } /* 버튼 기본 = Outlined M(docs/17 버튼 가이드) */
.btn, .ghost { transition: transform .08s, background-color .08s; }
.btn:active, .ghost:active { background: var(--surface-2); transform: scale(.97); }
.btn.num { min-width: 56px; padding: 0 16px; font-variant-numeric: tabular-nums; }
.btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; } /* 고름 = Filled 모양(강조색 면) */
.btn.primary { min-height: 48px; padding: 0 20px; background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; } /* Filled L — 강조색 면 */
.btn.primary:active { background: var(--accent); }
.btn.primary.warn { background: var(--warn); color: var(--on-warn); border-color: var(--warn); } /* 되돌릴 수 없는 일 */
.btn.wide { width: 100%; min-height: 48px; } /* 하단 행동 영역은 L */
.btn.tool { min-height: 40px; min-width: 44px; padding: 0 12px; border-color: transparent; background: var(--surface-2); } /* 툴바 = Tonal M, 버튼 글자는 예외 없이 16 */
/* 수식 입력 — docs/08. 친 대로 교과서 모양으로, 조각은 눌러서 하나씩 빠진다. 대화 장면 글자 세 단계(12·14·16)를 넘지 않게 식도 16, 지수는 12 */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.pair input { width: 100%; min-width: 0; height: 48px; border: 1px solid var(--line-input); border-radius: var(--r-m); text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--bg); }
.pair input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pair-times, .expr-times { font-size: 16px; color: var(--text-2); }
.expr { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--line-input); border-radius: var(--r-m); background: var(--bg); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.expr:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.expr-empty { padding-left: 8px; font-size: 16px; font-weight: 500; color: var(--text-3); }
.expr-typed { color: var(--text-3); }
.term { min-height: 40px; min-width: 40px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; font-size: 16px; font-weight: 600; line-height: 1; }
.term:hover { background: var(--surface); }
.term:active { background: var(--surface-2); }
.term sup { font-size: 12px; vertical-align: 7px; margin-left: 1px; }
.chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.btn.chip { padding: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
/* 키가 작은 휴대폰(높이 600 미만)에서도 답하는 칸이 화면 40%를 넘지 않게 — 누르는 곳은 40 그대로 */
@media (max-height: 600px) { .btn.chip { min-height: 40px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.field { display: flex; gap: 8px; }
.field input { flex: 1; min-width: 0; height: 48px; border: 1px solid var(--line-input); border-radius: var(--r-m); padding: 0 16px; font-size: 16px; background: var(--bg); }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field input::placeholder { color: var(--text-3); }
.err { font-size: 14px; color: var(--text); }
.err:empty { display: none; }
.aux { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aux .undo { margin-left: auto; }

/* 시작·멈춤·끝 장면 — 장면마다 글자 크기 세 단계까지 */
.scene { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding-block: 32px calc(24px + env(safe-area-inset-bottom, 0px)); }
.scene h1 { font-size: 28px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.scene h2 { font-size: 20px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
@media (min-width: 600px) { .scene h2 { font-size: 28px; letter-spacing: -0.02em; } } /* 안내 화면 큰 문장은 태블릿·PC 28(Headline M, docs/19 3절) — 20으로 그려지던 것을 맞춤(2026-11-04) */
.scene .lead { font-size: 16px; color: var(--text-2); }
.tips { display: flex; flex-direction: column; gap: 12px; }
.tip { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14px; color: var(--text); } /* 따라야 할 글은 진한 글자(docs/16) */
.scene .notice { margin: 0; font-size: 14px; color: var(--text-2); } /* 안내 박스 — 바탕 위에서는 박스 없이 보조 글자. 흰 면은 카드·묶음 카드·입력창에만(docs/19, 2026-11-04 사무엘님 "제안하는대로 해봐") */
.tip span:first-child { min-height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-m); color: var(--text); }
.scene .cards { display: flex; flex-direction: column; gap: 8px; }
.scene .card { animation: rise .2s ease-out both; animation-delay: calc(var(--i) * 150ms); }
.scene .note-line { font-size: 14px; color: var(--text-2); }
.scene .actions { display: flex; gap: 8px; } /* 하단 행동 영역: 둘이면 왼쪽 Outlined·오른쪽 Filled 반반(docs/17) */
.scene .actions .btn { flex: 1; min-width: 0; }

/* 수식 칸 시안(#math) — docs/08. 교과서 모양 그대로, 글자는 대화 장면의 세 단계(16 본문·12 지수) 안에서 */
.mfield { min-height: 56px; display: flex; align-items: center; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--line-input); border-radius: 12px; background: var(--bg); font-size: 16px; cursor: text; overflow-x: auto; }
.mfield:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.mempty { color: var(--text-3); }
.mrow { display: inline-flex; align-items: center; min-height: 1.4em; }
.mc, .mvar, .mop { line-height: 1.4; }
.mop { padding: 0 4px; }
.mvar { font-style: italic; padding-right: 1px; }
.mfrac { display: inline-flex; flex-direction: column; align-items: stretch; margin: 0 3px; vertical-align: middle; }
.mfrac > .mrow { justify-content: center; padding: 0 4px; }
.mfrac > .mden { border-top: 1.5px solid currentColor; }
.msup { font-size: 12px; align-self: flex-start; margin-left: 1px; min-height: 0; line-height: 1.2; }
.msqrt { display: inline-flex; align-items: stretch; margin: 0 1px; }
.mrad { display: flex; width: 10px; margin-left: 1px; }
.mrad svg { display: block; width: 10px; height: 100%; }
.mbody { border-top: 1.5px solid currentColor; padding: 1px 2px 0; }
.mph { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 18px; border: 1px solid var(--line-input); border-radius: 3px; }
.mph.on { border-color: var(--ink); }
.mph > .mcaret { width: 1.5px; height: 70%; margin: 0; }
/* 지수·첨자·극한 아래·Σ 위아래 같은 작은 칸의 빈칸 상자는 글자 크기(12)에 맞춰 작게 */
.msup > .mph, .msub > .mph, .mlow > .mph, .mridx > .mph { width: 9px; height: 13px; }
.mcaret { display: inline-block; width: 2px; height: 1.2em; margin: 0 -1px; background: var(--ink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.me .mfrac > .mden, .me .mbody { border-top-color: var(--on-ink); }
.mpad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.btn.mkey { min-height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-s); font-variant-numeric: tabular-nums; }
.btn.mkey.sym { font-weight: 600; }
@media (max-height: 760px) { .btn.mkey { min-height: 40px; } .mfield { min-height: 48px; } }
@media (hover: hover) and (pointer: fine) { .btn.mkey.mnum, .mnums { display: none; } }
.btn.mkey.mword { font-size: 14px; }
/* 키패드 분류 줄 — 넘치면 옆으로 밀어 본다. 고른 분류는 바탕색과 두께로만 */
.mtabrow { display: flex; align-items: center; gap: 4px; }
.mtabrow > .mclear { flex: none; }
.mtabs { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.mtabs::-webkit-scrollbar { display: none; }
.mtab { flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.mtab[aria-selected="true"] { background: var(--surface-2); color: var(--text); font-weight: 600; }
/* 고등 기호 — 글자는 16·12 두 단계 안에서, 큰 기호(Σ·∫)는 그림으로 그려 크기 단계를 늘리지 않는다 */
.mfn { line-height: 1.4; padding: 0 3px 0 1px; }
.msub { font-size: 12px; align-self: flex-end; margin-left: 1px; min-height: 0; line-height: 1.2; }
.mridx { font-size: 12px; align-self: flex-start; min-height: 0; line-height: 1.2; margin-right: -5px; }
.mabs { display: inline-flex; align-items: center; }
.mbar { line-height: 1.4; padding: 0 2px; }
.mvec { display: inline-flex; flex-direction: column; align-items: stretch; }
.marrow { display: flex; height: 7px; }
.marrow svg { display: block; width: 100%; height: 7px; }
.mlim { display: inline-flex; flex-direction: column; align-items: center; margin-right: 4px; }
.mlim > .mfn { line-height: 1.2; padding: 0; }
.mlow { font-size: 12px; min-height: 0; line-height: 1.2; justify-content: center; }
.msum { display: inline-flex; flex-direction: column; align-items: center; margin: 0 4px 0 2px; }
.mbig { display: inline-flex; }
.mbig svg { display: block; width: 14px; height: 18px; }
.mint { display: inline-flex; align-items: stretch; margin: 0 3px 0 1px; }
.mint .mbig svg, .mint1 svg { width: 9px; height: 32px; }
.mint1 { margin: 0 3px 0 1px; }
.mlimits { display: inline-flex; flex-direction: column; justify-content: space-between; margin-left: 2px; }
.mnck { display: inline-flex; align-items: center; }
.mnck > .msub { align-self: flex-end; }
.mmat { display: inline-grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0 3px; padding: 2px 7px; border-inline: 1.5px solid currentColor; border-radius: 9px; }
.mcell { justify-content: center; }
.mset { display: inline-flex; align-items: center; }
.mset > .mc { padding: 0 2px; }
/* 구조 버튼 안 그림 — 버튼 높이 40~44 안에 들어가게 줄여 그린다. 글자 크기는 그대로(16·12) */
.mkeyart { pointer-events: none; transform: scale(.78); font-style: normal; }
.mkeyart .mph { border-color: currentColor; opacity: .55; }
.mkeyart .mmat { gap: 1px 3px; padding: 1px 4px; border-radius: 7px; }
.mkeyart .mmat .mph, .mkeyart .msum .mph { width: 9px; height: 12px; }
.btn.mkey.sym:has(.mkeyart) { font-weight: 500; }
.math-mode .side { display: none !important; }
/* 키 작은 휴대폰: 문제 번호 줄을 접어 마지막 AI 질문이 가려지지 않게 */
@media (max-height: 600px) { .math-mode .goal { display: none; } }
.side { display: none; }
@media (min-width: 960px) {
  .app.math-mode { grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); }
  /* 넓은 화면·4K: 대화(최대 720)와 메모 칸(320)을 한 묶음으로 가운데, 양옆은 바탕 */
  .app { grid-template-columns: minmax(0, 1fr) minmax(0, 720px) 320px minmax(0, 1fr); }
  .chat { grid-column: 2; }
  .side { grid-column: 3; display: flex; flex-direction: column; gap: 12px; padding: 24px; height: 100%; overflow-y: auto; }
  #memoBtn, .memo { display: none !important; }
  .side-title { font-size: 16px; font-weight: 600; }
  .side-title span { color: var(--text-3); font-weight: 500; }
  .side-cards { display: flex; flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dots i { animation: none; opacity: .6; }
  .msg, .ai, .me, .note, .tick, .bump, .scene .card, .mcaret { animation: none; }
  .btn, .ghost, .step i::after { transition: none; }
  .btn:active, .ghost:active { transform: none; }
}