/* Ocap web prototype. Tokens follow the existing app (web/app/app.css): blue on a cool white ground, Pretendard.
   The Pretendard @font-face lives in the page so the asset path can differ between the repo and a published copy. */

:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f2f6fc;
  --ink: #1c2431;
  --ink-2: #40536d;
  --muted: #5b677a;
  --line: #e5eaf2;
  --line-2: #c9d3e3;
  --primary: #2469ed;
  --primary-ink: #1a52c2;
  --on-primary: #ffffff;
  --primary-soft: #eaf2ff;
  --pick: #2469ed;
  --pick-2: #1a52c2;
  --good: #1f6f4c;
  --violet: #6a3fd1;
  --violet-soft: #efe9fd;
  --good-soft: #e5f5ec;
  --warn: #8a5310;
  --warn-soft: #fbf0e1;
  --bad: #b4442c;
  --bad-soft: #fbe9e4;
  --star: #c98a00;
  --shadow: 0 1px 2px rgba(28, 36, 49, .06), 0 8px 24px rgba(28, 36, 49, .06);
  --radius: 16px;
  --radius-lg: 22px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b677a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10141c; --surface: #171d28; --surface-2: #1d2533; --ink: #e8edf6; --ink-2: #c3cddd; --muted: #9aa6ba;
    --line: #2a3344; --line-2: #3a4558; --primary: #7ea6ff; --primary-ink: #a9c3ff; --on-primary: #0f1a33; --primary-soft: #1f2b47;
    --good: #6fd3a2; --good-soft: #17322a; --violet: #b9a2ff; --violet-soft: #2a2240; --warn: #e8b46a; --warn-soft: #362a19; --bad: #f19a84; --bad-soft: #3a221d; --star: #f2c14e;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa6ba' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #10141c; --surface: #171d28; --surface-2: #1d2533; --ink: #e8edf6; --ink-2: #c3cddd; --muted: #9aa6ba;
  --line: #2a3344; --line-2: #3a4558; --primary: #7ea6ff; --primary-ink: #a9c3ff; --on-primary: #0f1a33; --primary-soft: #1f2b47;
  --good: #6fd3a2; --good-soft: #17322a; --violet: #b9a2ff; --violet-soft: #2a2240; --warn: #e8b46a; --warn-soft: #362a19; --bad: #f19a84; --bad-soft: #3a221d; --star: #f2c14e;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa6ba' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { font-size: 15px; line-height: 1.6; min-width: 320px; }
img { max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }

/* Prototype banner */
.proto-bar { background: var(--ink); color: var(--bg); font-size: 13px; text-align: center; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 15px; text-align: center; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--surface-2); color: var(--ink); }
.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-ink); border-color: var(--primary-ink); color: var(--on-primary); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { color: var(--bad); border-color: var(--line-2); }
.btn--danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn--lg { min-height: 52px; padding: 14px 24px; font-size: 16px; border-radius: 14px; }
.btn--sm { min-height: 36px; padding: 6px 12px; font-size: 14px; border-radius: 10px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--ink-2); }
.icon-btn:hover { background: var(--surface-2); }
.icon { width: 20px; height: 20px; flex: none; }

/* Chips, badges */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.badge--blue { background: var(--primary-soft); color: var(--primary-ink); }
.badge--good { background: var(--good-soft); color: var(--good); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--bad { background: var(--bad-soft); color: var(--bad); }

/* Cards and layout helpers */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
/* Phones: cards keep a little less padding so content is not squeezed into a narrow column. */
@media (max-width: 560px) { .card { padding: 20px; } }
/* A card that holds a short list or settings reads better at a readable width than across a wide screen. */
.card--narrow { width: 100%; max-width: 720px; }
.card--flat { box-shadow: none; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.eyebrow { font-size: 14px; font-weight: 700; color: var(--primary); }
.section-title { font-size: 32px; font-weight: 800; line-height: 1.25; }

/* Public header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header__inner { max-width: 1180px; margin: 0 auto; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); min-height: 44px; }
.brand:hover { color: var(--ink); }
.brand__word { font-size: 26px; font-weight: 850; letter-spacing: -0.07em; }
.brand__divider { width: 1px; height: 16px; background: var(--line-2); }
.brand__alias { font-size: 14px; font-weight: 600; color: var(--muted); }
.site-menu { display: flex; align-items: center; gap: 16px; flex: 1; }
.site-nav { display: flex; gap: 2px; flex: 1; }
.site-nav a { padding: 10px 14px; border-radius: 10px; color: var(--ink); font-weight: 600; }
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--primary); }
.site-actions { display: flex; gap: 8px; align-items: center; }
.menu-btn { display: none; }
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; margin-left: auto; }
  .site-menu { display: none; }
  .site-header[data-open="true"] .site-menu { display: flex; flex-direction: column; align-items: stretch; gap: 12px; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
  .site-header[data-open="true"] .site-nav { flex-direction: column; }
  .site-header[data-open="true"] .site-nav a { min-height: 48px; display: flex; align-items: center; }
  .site-header[data-open="true"] .site-actions .btn { flex: 1; }
}

.page { max-width: 1180px; margin: 0 auto; padding-block: 48px 80px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.page--narrow { max-width: 880px; }
@media (max-width: 560px) { .page { padding-block: 36px 56px; } }

/* Hero */
.hero { position: relative; overflow: hidden; background: #f5f8ff; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero__inner { position: relative; max-width: 1180px; margin: 0 auto; padding-block: 72px 88px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 20px; color: #1c2431; }
.hero__inner h1 { font-size: clamp(38px, 6vw, 58px); line-height: 1.12; letter-spacing: -0.045em; font-weight: 850; max-width: 560px; }
.hero__inner h1 span { color: #2469ed; }
.hero__lead { font-size: clamp(16px, 2vw, 19px); color: #40536d; max-width: 430px; line-height: 1.65; }
/* A soft light veil behind the text keeps the copy readable over the product picture. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(245, 248, 255, .96) 0%, rgba(245, 248, 255, .88) 34%, rgba(245, 248, 255, 0) 58%); pointer-events: none; }
.hero__inner { z-index: 2; }
.hero .btn { border-color: #c9d3e3; }
.hero .btn--primary { background: #2469ed; border-color: #2469ed; color: #fff; }
.hero .btn:not(.btn--primary) { background: #fff; color: #1c2431; }
@media (max-width: 720px) {
  .hero__bg { opacity: .1; }
}

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.step-num { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-ink); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.split { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.split > * { flex: 1 1 340px; min-width: 0; }
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* FAQ */
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 4px 20px; }
.faq summary { min-height: 52px; display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; }
.faq details[open] summary::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.faq details p { padding-bottom: 16px; color: var(--ink-2); }
/* 2026-10-27 user: a full-width light line sits between the question and the answer. */
.faq details p { border-top: 1px solid var(--line); padding-top: 14px; }

/* Footer */
.site-footer { background: #1c2431; color: #c9d3e3; }
.site-footer__inner { max-width: 1180px; margin: 0 auto; padding-block: 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-wrap: wrap; gap: 24px 56px; font-size: 14px; }
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: #c9d8ff; }

/* Pricing */
.toggle-group { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.toggle-group button { min-height: 40px; padding: 6px 16px; border: 0; border-radius: 10px; background: transparent; font-weight: 700; color: var(--ink-2); }
.toggle-group button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.plan--pick { border: 2px solid var(--primary); }
.plan__flag { position: absolute; top: -12px; left: 20px; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.plan__price { font-size: 30px; font-weight: 850; letter-spacing: -0.03em; }
.plan__price small { font-size: 14px; font-weight: 600; color: var(--muted); }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-2); }
.plan li { display: flex; gap: 8px; }
.plan li::before { content: "✓"; color: var(--good); font-weight: 800; }
.plan li.no::before { content: "–"; color: var(--muted); }
.plan .btn { margin-top: auto; }
.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.stepper button { width: 44px; height: 44px; border: 0; background: var(--surface-2); font-size: 20px; font-weight: 700; }
.stepper output { min-width: 56px; text-align: center; font-weight: 800; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-weight: 700; color: var(--ink-2); background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; }

/* Start */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.choice { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 20px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--surface); min-height: 120px; }
.choice[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.choice strong { font-size: 18px; }
.login-btn { width: 100%; justify-content: flex-start; gap: 12px; }
.login-btn .mark { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; }
.mark--google { background: #ffffff; border: 1px solid #c9d3e3; color: #4285f4; }
.mark--naver { background: #03c75a; color: #ffffff; }
.mark--id { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: 14px; }
.input, select.input, textarea.input { min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); width: 100%; }
textarea.input { min-height: 96px; resize: vertical; }
.notice { border-radius: 14px; padding: 12px 14px; font-size: 14px; background: var(--primary-soft); color: var(--primary-ink); }
.notice--warn { background: var(--warn-soft); color: var(--warn); }
.notice--good { background: var(--good-soft); color: var(--good); }

/* App shell */
.app { display: flex; min-height: calc(100vh - 31px); }
.sidebar { width: 240px; flex: none; background: var(--bg); padding: 20px 14px; display: flex; flex-direction: column; gap: 6px; }
.sidebar .brand { padding: 0 8px 14px; }
.side-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 12px; color: var(--ink-2); font-weight: 650; }
.side-link:hover { background: var(--surface-2); color: var(--ink); }
.side-link[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 750; }
.side-link[aria-current="page"] .icon { color: var(--primary); }
.side-spacer { flex: 1; }
.plan-mini { border-radius: 14px; padding: 12px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(20px, env(safe-area-inset-left, 0px)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
/* A long title wraps at its spaces instead of ending in "…" (화면 표시 규칙: "…" only for one-line list previews). */
.topbar h1 { font-size: 20px; font-weight: 800; flex: 1; min-width: 0; line-height: 1.3; }
.topbar .brand { display: none; }
.content { padding: 24px max(16px, env(safe-area-inset-right, 0px)) 96px max(20px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 20px; max-width: 1180px; width: 100%; }
.tabbar { display: none; }
@media (max-width: 900px) {
  .sidebar { display: none; }
  .topbar .brand { display: inline-flex; }
  .topbar h1 { font-size: 17px; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center; font-size: 12px; font-weight: 650; color: var(--muted); border-radius: 12px; }
  .tabbar a[aria-current="page"] { color: var(--primary); }
}

/* Stat cards */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-align: left; color: var(--ink); }
a.stat:hover, button.stat:hover { border-color: var(--primary); color: var(--ink); }
.stat .k { font-size: 13px; color: var(--muted); font-weight: 600; }
.stat .v { font-size: 26px; font-weight: 850; font-variant-numeric: tabular-nums; }
.bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 140px; }
.week div { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; font-size: 12px; color: var(--muted); }
.week i { display: block; width: 100%; max-width: 36px; border-radius: 8px 8px 4px 4px; background: var(--primary); }
.week b { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Problem list and cards */
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pcard { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; color: var(--ink); text-align: left; }
.pcard:hover { border-color: var(--primary); color: var(--ink); }
.pcard__text { font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stars { display: inline-flex; gap: 1px; font-size: 15px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.search { flex: 1 1 180px; min-width: 0; position: relative; }
.search input { padding-left: 40px; }
.search svg { position: absolute; left: 12px; top: 12px; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .label { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--radius-lg); }

/* Digital problem */
.digital { font-size: 20px; line-height: 1.8; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (max-width: 560px) { .digital { font-size: 18px; padding: 18px 20px; } }
/* R4 (2026-10-23): the problem number on the first line's baseline, the same size, bold, in the accent colour; the text
   hangs beside it. R5: a row of choices or numbered items is centred, whole units with wide gaps; a formula line and a
   drawn line are centred too, with the same space above and below. */
.q { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .5em; align-items: baseline; }
.q--plain { grid-template-columns: minmax(0, 1fr); }
.q__no { font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.q__body { min-width: 0; }
.q__line { display: block; }
.q__line--choices { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .25em var(--ch-gap, 1.6em); margin-block: .65em; }
.q__line--math, .q__line--fig { text-align: center; margin-block: .65em; }
.q__line--fig { white-space: pre-wrap; }
.q__body > :first-child { margin-top: 0; }
.q__body > :last-child { margin-bottom: 0; }
.ch { max-width: 100%; }
/* R7: every fraction stacked, a little smaller than the text, one unit. R6: signs spaced alike on both sides. □ is a box of
   text height. */
.frac { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; font-size: .78em; line-height: 1.12; margin: 0 .1em; text-align: center; white-space: nowrap; }
.frac > :first-child { border-bottom: max(1.5px, .075em) solid currentColor; padding: 0 .16em .05em; }
.frac > :nth-child(2) { padding: .05em .16em 0; }
.frac-w { margin-right: .03em; }
.op { margin: 0 .26em; }
.sq { display: inline-block; box-sizing: border-box; width: .9em; height: .9em; margin: 0 .08em; border: max(1.5px, .07em) solid currentColor; border-radius: .1em; vertical-align: -.12em; }
.sq--in { width: auto; height: auto; min-width: .9em; min-height: .9em; padding: .02em .18em; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; font: inherit; color: inherit; line-height: 1.1; background: none; }
button.sq--in { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); cursor: text; }
button.sq--in:hover { background: var(--primary-soft); }
.sq--on { min-width: 1.4em; }
.sq--ok { border-color: var(--good); }
.sq--no { border-color: var(--bad); }
.sqrt__b { border-top: max(1.5px, .07em) solid currentColor; padding: 0 .08em; margin-left: .02em; }
.ovl { text-decoration: overline; }
.tok { border: 0; background: transparent; padding: 0 2px; font: inherit; color: inherit; border-radius: 6px; }
.editing .tok { background: var(--primary-soft); color: var(--primary-ink); box-shadow: inset 0 -2px 0 var(--primary); cursor: pointer; min-width: 22px; }
.tok.changed { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 -2px 0 var(--warn); }
.photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.photo img { display: block; width: 100%; height: auto; }
.detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .detail { grid-template-columns: 1fr; } }
.side-card { display: flex; flex-direction: column; gap: 16px; }
.chip[aria-checked="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }
.choice[aria-checked="true"] { border-color: var(--primary); background: var(--primary-soft); }
.choice[disabled] { opacity: .5; cursor: not-allowed; }
.choice .icon { color: var(--primary); }
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 14px; border: 1px solid var(--line); }
.tabs button, .tabs a { min-height: 40px; padding: 6px 14px; border: 0; border-radius: 10px; background: transparent; font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Upload */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 16px; border: 2px dashed var(--line-2); border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.dropzone[data-over="true"] { border-color: var(--primary); background: var(--primary-soft); }
.crop { position: relative; user-select: none; touch-action: none; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); max-width: 720px; }
.crop img { display: block; width: 100%; pointer-events: none; }
.crop__box { position: absolute; border: 3px solid var(--primary); background: rgba(36, 105, 237, .12); box-shadow: 0 0 0 9999px rgba(15, 20, 30, .35); }
.progress { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 16px; text-align: center; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--primary-soft); border-top-color: var(--primary); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } * { scroll-behavior: auto !important; } }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } .compare[data-tab="photo"] .c-digital, .compare[data-tab="digital"] .c-photo { display: none; } }

/* Review */
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grade .btn { min-height: 56px; font-size: 17px; }
.btn--right { background: var(--good); border-color: var(--good); color: #fff; }
.btn--wrong { background: var(--bad); border-color: var(--bad); color: #fff; }
.solution { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.solution ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

/* Admin */
.seat { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.settings nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 76px; }
@media (max-width: 900px) { .settings { grid-template-columns: 1fr; } .settings nav { position: static; flex-direction: row; flex-wrap: wrap; padding-bottom: 4px; } .settings nav a { white-space: nowrap; } }
.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 48px; height: 28px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 3px solid var(--primary); outline-offset: 2px; }
.setting-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-row > div:first-child { flex: 1 1 200px; min-width: 0; }

/* Dialog, toast */
dialog.modal { border: 0; padding: 0; border-radius: 22px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.25); }
dialog.modal::backdrop { background: rgba(15, 20, 30, .45); }
.modal__inner { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.modal__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 60; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 14px; font-weight: 600; font-size: 14px; max-width: calc(100vw - 32px); box-shadow: var(--shadow); }

/* Prototype switcher */
.demo { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; }
@media (max-width: 900px) { .demo { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }
.demo__btn { border-radius: 999px; box-shadow: var(--shadow); }
.demo__panel { position: absolute; right: 0; bottom: 56px; width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.demo__panel button { justify-content: flex-start; text-align: left; }

/* ---------- Added for the page views ---------- */
/* Large text scales every element, buttons and tab bar included. */
html[data-font="large"] body { zoom: 1.15; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.icon--xl { width: 44px; height: 44px; color: var(--primary); }
.feat-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center; }
.link-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; min-height: 44px; }
.link-more .icon { width: 16px; height: 16px; }
.check-list, .dot-list, .num-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.check-list li { display: flex; gap: 8px; }
.check-list li::before { content: "✓"; color: var(--good); font-weight: 800; }
.dot-list li { position: relative; padding-left: 16px; }
.dot-list li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
ol.dot-list { counter-reset: d; }
ol.dot-list li { counter-increment: d; padding-left: 24px; }
ol.dot-list li::before { content: counter(d) "."; width: auto; height: auto; background: none; top: 0; font-weight: 700; color: var(--ink-2); }
.num-list { counter-reset: n; gap: 14px; }
.num-list li { counter-increment: n; display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; }
.num-list li::before { content: counter(n); grid-row: span 2; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.hero__hand { width: min(300px, 70vw); height: auto; }
.cta-band { background: var(--primary); color: var(--on-primary); }
.cta-band .section-title { color: var(--on-primary); }
.cta-band__btn { background: var(--on-primary); color: var(--primary); border-color: var(--on-primary); }
.cta-band__btn:hover { background: var(--primary-soft); color: var(--primary-ink); }
.compare--always { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 760px) { .compare--always .c-photo, .compare--always > * { display: flex !important; } }

/* Paper "photo" of a printed problem. It stays light in dark mode because it is a picture. */
.paper-wrap { padding: 6px; }
.paper { position: relative; background: #fbfaf3; color: #23262c; border-radius: 6px; padding: 26px 26px 120px; font-family: "Noto Serif KR", "AppleMyungjo", "Batang", serif; font-size: 18px; line-height: 2; box-shadow: 0 2px 10px rgba(40, 30, 10, .18), inset 0 0 60px rgba(150, 120, 60, .12); transform: rotate(-.6deg); }
.paper p { margin: 0; }
.paper--fig { padding-bottom: 210px; }
.paper__fig { position: absolute; left: 22px; bottom: 26px; width: 150px; height: auto; }
.ink { position: absolute; font-family: "Nanum Pen Script", "Comic Sans MS", cursive; color: #33468e; font-size: 30px; line-height: 1; transform: rotate(-3deg); white-space: nowrap; }
.ink--red { color: #d1342f; font-size: 40px; font-family: var(--font); font-weight: 800; }
.mask { position: absolute; min-width: 64px; height: 34px; padding: 0 10px; background: repeating-linear-gradient(45deg, #d7dce5 0 8px, #cbd2dd 8px 16px); border-radius: 8px; color: #4a5568; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font); transform: translateY(-4px); }
.mask-note { padding: 8px 12px; font-size: 13px; color: var(--muted); background: var(--surface); }

/* Dialog extras */
dialog.modal--wide { width: min(680px, calc(100vw - 32px)); }
.modal__inner h2 { font-size: 20px; }
.modal__body { overflow: auto; }
.op-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.op-grid .btn { font-size: 22px; min-height: 52px; }

/* Auth */
.auth { max-width: 560px; }
.auth__card { padding: clamp(20px, 4vw, 32px); }
.check { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 32px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primary); flex: none; }
.check--all { padding-bottom: 8px; border-bottom: 1px solid var(--line); width: 100%; }
.terms { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0; }
.login-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.choice { color: var(--ink); }

/* Student home */
.h-sec { font-size: 18px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }

/* Problem pieces */
.dots { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dot { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.dot--right { background: var(--good-soft); color: var(--good); }
.dot--wrong { background: var(--bad-soft); color: var(--bad); }
.answer { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--primary-soft); }
.answer strong { font-size: 20px; color: var(--primary-ink); }
.sol-foot { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.ai-cta { padding: 16px 18px; gap: 12px; }
.linklike { border: 0; background: none; padding: 0; color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.kv { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
.danger-zone { border-top: 1px solid var(--line); padding-top: 14px; }
.card.danger-zone { border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); }
.tag-list { padding: 8px 20px; }
.tag-list li { padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tag-list li:last-child { border-bottom: 0; }
.tag-list a { color: var(--ink); }
.chip-x { border: 0; background: none; width: 28px; height: 28px; margin: -6px -8px -6px 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); border-radius: 50%; }
.chip-x .icon { width: 14px; height: 14px; }
.input--sm { min-height: 36px; padding: 6px 10px; width: 140px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr)); gap: 12px; }
.field-label { font-weight: 700; font-size: 14px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

/* Upload */
.stepper-line { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.stepper-line li { display: inline-flex; align-items: center; gap: 6px; }
.stepper-line li + li::before { content: ""; width: 18px; height: 1px; background: var(--line-2); margin-right: 2px; }
.stepper-line span { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.stepper-line .on { color: var(--ink); font-weight: 700; }
.stepper-line .on span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.stepper-line .done span { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary-ink); }
.crop__box { cursor: move; touch-action: none; }
.crop__handle { position: absolute; right: -14px; bottom: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; cursor: nwse-resize; touch-action: none; }
.save-as { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.radio-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 44px; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.radio-card input { position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; accent-color: var(--primary); }
.radio-card.on { border-color: var(--primary); background: var(--primary-soft); }
.radio-card.off { opacity: .55; cursor: not-allowed; }
@media (pointer: coarse) { .desktop-only { display: none; } }
.dropzone label.btn { cursor: pointer; }
.dropzone label.btn:focus-within { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Topbar extras */
.topbar-account { display: none; }
@media (max-width: 900px) { .topbar-account { display: inline-flex; } }
.plan-mini { color: var(--ink); }
.plan-mini:hover { border-color: var(--primary); color: var(--ink); }
.plan-mini[aria-current="page"] { border-color: var(--primary); }
.plan-mini .icon { width: 16px; height: 16px; }

/* Admin */
.admin { min-height: calc(100vh - 31px); display: flex; flex-direction: column; }
.admin-top { gap: 12px; }
.admin-top .brand__word { font-size: 24px; }
.admin-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.admin-title h1 { flex: 1; min-width: 0; }
.gear-btn { gap: 6px; }
.gear-btn[aria-current="page"] { background: var(--primary-soft); color: var(--primary-ink); }
@media (max-width: 560px) { .gear-btn span { display: none; } .gear-btn { width: 44px; padding: 0; } .admin-title .badge { display: none; } }
.content--admin { margin: 0 auto; }
.mtable { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.mrow { display: grid; grid-template-columns: minmax(150px, 1.6fr) 110px 70px minmax(120px, 1.2fr) 90px 110px; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.mlist li:last-child .mrow { border-bottom: 0; }
a.mrow:hover { background: var(--surface-2); color: var(--ink); }
.mrow--head { background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mrow__who { display: flex; flex-direction: column; }
.mrow__goal { display: flex; flex-direction: column; gap: 4px; }
.mrow__goal .bar { height: 6px; }
.mlabel { display: none; }
@media (max-width: 760px) {
  .mrow--head { display: none; }
  .mrow { grid-template-columns: 1fr 1fr 1fr; gap: 6px 12px; }
  .mrow__who { grid-column: 1 / 3; }
  .mrow > span:nth-child(2) { justify-self: end; }
  .mlabel { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
  .mrow__goal .bar { display: none; }
  .mrow > span:last-child { grid-column: 3; }
}
.hot-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.hot-list li span:first-child { margin-right: 8px; font-weight: 600; }
.kid-card { color: var(--ink); height: 100%; }
.kid-card:hover { border-color: var(--primary); color: var(--ink); }
.kid-card--add { align-items: center; justify-content: center; text-align: center; border-style: dashed; color: var(--primary); }
.kid-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 13px; color: var(--muted); }
.kid-stats span { display: flex; flex-direction: column; }
.kid-stats b { font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.kid-stats b.on { color: var(--primary); }
.week--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acct-list li { padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 8px 12px; }
.acct-list li:last-child { border-bottom: 0; }
.settings__nav a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 12px; border-radius: 12px; color: var(--ink-2); font-weight: 650; }
.settings__nav a:hover { background: var(--surface-2); color: var(--ink); }
.settings__nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-ink); }
.settings__nav .chev { width: 16px; height: 16px; opacity: 0; }
@media (max-width: 900px) {
  .settings nav { position: static; flex-direction: column; overflow: visible; }
  .settings__nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 6px; }
  .settings__nav a { min-height: 52px; color: var(--ink); }
  .settings__nav a[aria-current="page"] { background: transparent; color: var(--ink); }
  .settings__nav .chev { opacity: .6; }
  .settings[data-root="true"] .settings__content { display: none; }
  .settings[data-root="false"] .settings__nav { display: none; }
}

main:focus { outline: none; }

/* Round 1 review fixes */
:root { --on-strong: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --on-strong: #10141c; } }
:root[data-theme="dark"] { --on-strong: #10141c; }
.btn--right, .btn--wrong, .btn--danger-solid { color: var(--on-strong); }
.btn--right:hover, .btn--wrong:hover, .btn--danger-solid:hover { color: var(--on-strong); filter: brightness(1.05); }
.proto-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; position: relative; z-index: 45; }
.demo { position: static; }
.demo__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--bg) 45%, transparent); background: transparent; color: inherit; font-size: 12px; font-weight: 700; box-shadow: none; }
.demo__btn .icon { width: 14px; height: 14px; }
.demo__panel { position: absolute; top: calc(100% + 6px); bottom: auto; right: max(16px, env(safe-area-inset-right, 0px)); width: min(300px, calc(100vw - 32px)); color: var(--ink); text-align: left; z-index: 50; max-height: 70vh; overflow-y: auto; }
.demo__panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
@media (max-width: 900px) { .demo { bottom: auto; } }
.crop__handle { position: absolute; width: 44px; height: 44px; background: transparent; border: 0; border-radius: 0; touch-action: none; right: auto; bottom: auto; }
.crop__handle::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.crop__handle--nw { left: 0; top: 0; cursor: nwse-resize; } .crop__handle--nw::after { left: -2px; top: -2px; }
.crop__handle--ne { right: 0; top: 0; cursor: nesw-resize; } .crop__handle--ne::after { right: -2px; top: -2px; }
.crop__handle--sw { left: 0; bottom: 0; cursor: nesw-resize; } .crop__handle--sw::after { left: -2px; bottom: -2px; }
.crop__handle--se { right: 0; bottom: 0; cursor: nwse-resize; } .crop__handle--se::after { right: -2px; bottom: -2px; }
.editing .tok { min-height: 34px; min-width: 30px; padding: 2px 6px; margin: 1px; }
.editing .frac { gap: 4px; font-size: .95em; }
.editing .frac > span:first-child { border-bottom: 0; }
.editing .frac > .tok:first-child { border-bottom: 2px solid currentColor; border-radius: 6px 6px 0 0; }
@media (max-width: 760px) {
  .compare[data-editing="true"] .c-photo { display: flex !important; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 66px); z-index: 5; background: var(--bg); padding-bottom: 8px; }
  .compare[data-editing="true"] .c-photo .photo { max-height: 160px; overflow: auto; }
  .compare[data-editing="true"] .c-digital { display: flex !important; }
}
/* Percent sizes on fixed elements follow the viewport even under the large-text zoom. */
dialog.modal { max-height: calc(100% - 48px); width: min(520px, calc(100% - 32px)); }
dialog.modal--wide { width: min(680px, calc(100% - 32px)); }
.toast { max-width: calc(100% - 32px); }
/* A fixed box at left: 50% would only get half the window to grow in: it takes its own width, up to the window. */
.toast { width: max-content; max-width: calc(100vw - 32px); }
.stepper :focus-visible { outline-offset: -3px; }
.modal__err { color: var(--bad); font-size: 14px; font-weight: 600; min-height: 0; margin: -6px 0 0; }
.modal__err:empty { display: none; }
.admin-top .brand { display: inline-flex; }
.phone-only { display: none; }
@media (max-width: 900px) { .phone-only { display: inline-flex; } }
[id$="-title"], #school { scroll-margin-top: 84px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.chip[aria-current="page"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }
a.chip:hover { color: var(--primary-ink); }
.acct-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.acct-row .check { min-height: 36px; align-items: center; }
.acct-row .check input { margin-top: 0; }
.seat-input { width: 64px; height: 44px; border: 0; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); text-align: center; font-weight: 800; background: var(--surface); -moz-appearance: textfield; }
.seat-input::-webkit-outer-spin-button, .seat-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 560px) { .choice { min-height: 0; padding: 14px 16px; } .choice .icon { display: none; } }
.desk-only { display: inline-flex; }
@media (max-width: 900px) { .desk-only { display: none; } }
button.kid-card { width: 100%; font: inherit; cursor: pointer; background: var(--surface); }

/* Grids never ask for more than the screen has (320px phones with large text). */
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.steps { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.plans { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.choice-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.plist { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.compare--always { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.save-as { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* Round 4 review fixes */
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice-grid { grid-template-columns: 1fr; }
.choice { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; min-height: 0; padding: 16px 18px; }
.choice .icon { grid-row: span 2; width: 26px; height: 26px; }
.choice:not(:has(.icon)) { grid-template-columns: 1fr; }
@media (max-width: 560px) { .choice .icon { display: inline-flex; } }
.detail { grid-template-areas: "prob side" "info side"; }
.detail-prob { grid-area: prob; min-width: 0; }
.detail .side-card { grid-area: side; position: sticky; top: 76px; }
.detail-info { grid-area: info; }
@media (max-width: 1000px) { .detail { grid-template-areas: "prob" "side" "info"; } .detail .side-card { position: static; } }
.table-wrap table { overflow-wrap: normal; }
.sidebar { height: calc(100vh - 32px); }
html[data-font="large"] .sidebar { height: calc((100vh - 32px) / 1.15); }
.pcard__thumb { width: 100%; height: 88px; object-fit: cover; object-position: top left; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
@media (max-width: 760px) {
  /* 2026-10-24 user rule: no half-visible chip in a sideways scroller; the chips wrap instead. */
  .filters.scroll-x { flex-wrap: wrap; }
}
.dlg-status:empty { display: none; }

/* Round 3 review fixes */
body { word-break: keep-all; overflow-wrap: break-word; }
html[data-font="large"] body { min-width: 278px; }
.photo { margin: 0; }
.h-step { font-size: 22px; font-weight: 800; }
.h-step:focus, [data-focus]:focus { outline: none; }
.h-step:focus-visible, [data-focus]:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.chip-x { width: 44px; height: 44px; margin: -12px -16px -12px -8px; }
.linklike { min-height: 44px; display: inline-flex; align-items: center; }
.check { min-height: 44px; align-items: center; }
.check input { margin-top: 0; }
th, td { white-space: normal; min-width: 72px; }
td.num, th.num { white-space: nowrap; }
.sticky-first th:first-child, .sticky-first td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.sticky-first thead th:first-child { background: var(--surface-2); }
.stepper button:disabled, .chip:disabled { opacity: .45; cursor: not-allowed; }
.tabs [aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.mlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) { .mlabel { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; } }
@media (min-width: 901px) { .admin-top .brand.phone-only { display: none; } }
.toast[data-show="false"] { opacity: 0; pointer-events: none; transform: translate(-50%, 8px); }
.toast { transition: opacity .2s, transform .2s; }
.toast__sep { opacity: .6; }
.toast__act { display: inline-flex; align-items: center; min-height: 32px; margin: -6px 0; padding: 0 4px; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .toast__act { min-height: 44px; margin: -12px 0; } }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
/* The save row of the registration form stays in reach above the phone tab bar. */
.save-bar { position: sticky; bottom: 0; z-index: 4; display: flex; flex-direction: column; gap: 6px; padding: 12px 0 4px; background: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 30%); }
@media (max-width: 900px) { .save-bar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }
/* Dialogs: the body scrolls and the buttons stay visible; on phones the dialog becomes a bottom sheet. */
dialog.modal[open] { display: flex; flex-direction: column; }
.modal__inner { flex: 1 1 auto; min-height: 0; max-height: 100%; }
.modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 560px) {
  dialog.modal, dialog.modal--wide { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: calc(100% - 24px); }
  .modal__inner { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}
.sidebar { position: sticky; top: env(safe-area-inset-top, 0px); align-self: flex-start; height: 100vh; overflow-y: auto; }

/* Legal */
.legal h1 { margin-bottom: 8px; }
.legal h2 { font-size: 18px; margin-top: 14px; }
.legal p, .legal li { color: var(--ink-2); }

/* Round 5 review fixes */
[id^="plan-"], [id^="ticket-"] { scroll-margin-top: 84px; }
.plans { grid-template-columns: 1fr; }
@media (min-width: 600px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats--5 > :first-child { grid-column: 1 / -1; }
@media (min-width: 600px) { .stats--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stats--5 > :first-child { grid-column: auto; } }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats--3 .v { font-size: 22px; }
.mrow { grid-template-columns: minmax(120px, 1.6fr) minmax(0, 110px) minmax(0, 70px) minmax(0, 1.2fr) minmax(0, 90px) minmax(0, 110px); }
@media (max-width: 760px) { .mrow { grid-template-columns: 1fr 1fr 1fr; } }

.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats--2 .v { font-size: 20px; overflow-wrap: anywhere; }
.rank-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.rank-list a { display: flex; justify-content: space-between; gap: 10px; min-height: 40px; align-items: center; color: var(--ink); }
.rank-list a:hover { color: var(--primary-ink); }

/* App and web: what is done where (the web looks and reviews; the app registers and solves with a pen). */
.app-web-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; margin: 0; }
.app-web-note > .btn { justify-self: end; }
@media (max-width: 560px) {
  .app-web-note { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .app-web-note .icon { margin-top: 2px; }
  .app-web-note > .btn { grid-column: 2; justify-self: start; }
}
/* On blue surfaces the focus ring is white, so keyboard users can see where they are. */
.cta-band :focus-visible { outline-color: var(--on-primary); }

/* ---------- Proportion review: controls sized to their content ---------- */
/* Difficulty stars: a compact row. Touch screens keep 44px targets; the star itself stays small. */
/* Badges never stretch across a column. */
.stack > .badge { align-self: flex-start; }
/* Side-by-side "photo / digital" columns start at the same height. */
.cmp-head { min-height: 36px; }
/* A tab group that fills its column splits the width evenly instead of leaving an empty strip. */
.stack > .tabs > *, .content > .tabs > * { flex: 1 1 0; justify-content: center; }
/* Icons inside text sit on the text's middle and follow its size. */
.icon { vertical-align: middle; }
.badge .icon { width: 14px; height: 14px; }
.small > .icon, .notice > .icon { width: 16px; height: 16px; }
.btn--sm { gap: 6px; }
.btn--sm .icon { width: 16px; height: 16px; }
/* Text links styled as buttons keep a 44px target but share the baseline of the sentence around them. */
.linklike { display: inline-block; vertical-align: baseline; min-height: 44px; padding-block: 12px; padding-block: max(0px, calc((44px - 1lh) / 2)); }
/* Inside a notice the link's extra target height overlaps the notice padding instead of making the box taller. */
.notice .linklike { margin-block: -10px; }
.linklike .icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-right: 2px; }
.site-footer .linklike { font-weight: inherit; text-decoration: none; color: #ffffff; }
@media (pointer: fine) { .site-footer .linklike { min-height: 0; padding-block: 0; } }
/* The long "app" button wraps its note to a second line on phones instead of breaking mid-phrase. */
.btn-app { justify-self: start; }
.btn-app small { font: inherit; }
@media (max-width: 560px) {
  .btn-app { justify-content: flex-start; text-align: left; }
  .btn-app small { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
}
/* Landing feature cards on phones: icon beside the title rather than on its own row. */
@media (max-width: 560px) {
  .plain-list > .card:has(> .feat-icon:first-child, > .step-num:first-child) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: center; }
  .plain-list > .card:has(> .feat-icon:first-child, > .step-num:first-child) > :not(.feat-icon):not(.step-num):not(h3) { grid-column: 1 / -1; }
  .feat-icon { width: 40px; height: 40px; }
}
/* Pricing: the kid-count chips and the seat stepper fit the narrow plan cards. */
.plan .seg .chip { padding-inline: 10px; }
.plan .seat-input { width: 52px; }
/* Save row: both buttons the same height. */
.save-bar .row { align-items: stretch; }
/* Review: the three scopes side by side where there is room; small result tiles; even symbol keys. */
@media (min-width: 700px) { .choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stats--2 { grid-template-columns: repeat(2, minmax(0, 220px)); }
.stats--2 .stat { padding: 12px 14px; }
/* An AI solution inside a dialog does not need a second frame. */
.modal__body > .solution { border: 0; padding: 0; background: transparent; }
/* Admin: header lines up with the centred content; hot units in a row; even columns in lists. */
@media (min-width: 901px) {
  .admin-top { padding-left: max(20px, calc((100% - 1180px) / 2 + 20px)); padding-right: max(16px, calc((100% - 1180px) / 2 + 16px)); }
}
@media (min-width: 761px) { .hot-list { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 48px; } }
@media (min-width: 561px) { .acct-row .check.small { min-width: 190px; } }
@media (max-width: 760px) {
  .mrow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mrow__who { grid-column: 1 / 4; }
  .mrow > span:nth-child(2) { grid-column: 4; }
  .mrow > span:last-child { grid-column: auto; }
}
/* A note inside a checkbox label flows with the label text instead of becoming a separate narrow column. */
.check > span { display: contents; }
/* Sign-up: the empty step area does not add a gap. */
#start-dyn:empty { display: none; }
/* Admin billing: the price goes on its own line under the plan name. */
.plan-now > .muted { display: block; margin-top: 2px; }
/* Stats summary: no full-width tile for one number. Phones 3 + 2, wider screens one row of five. */
.stats--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stats--5 > :nth-child(n) { grid-column: span 2; }
.stats--5 > :nth-child(n+4) { grid-column: span 3; }
@media (min-width: 600px) {
  .stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats--5 > :nth-child(n), .stats--5 > :nth-child(n+4) { grid-column: auto; }
}

/* Signed-in screens match the home: on the grey ground, cards need no line (it comes back blue on hover). */
.app .card, .app .pcard, .app .stat, .admin .card:not(.kid-card--add), .admin .stat { border-color: transparent; }
.app .pcard:hover, .app a.stat:hover, .app button.stat:hover, .admin a.stat:hover, .admin button.stat:hover, .admin a.card:hover, .admin button.card:hover { border-color: var(--primary); }

/* ---------- Home (2026-10-23, approved mockup): grey ground, white cards without lines, one blue button ---------- */
.home { display: flex; flex-direction: column; gap: 16px; }
.home-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.home-card { background: var(--surface); border-radius: 24px; padding: 24px; }
.home-hero { display: flex; flex-direction: column; gap: 6px; padding: 28px; }
.home-eyebrow { font-size: 15px; font-weight: 600; color: var(--muted); }
.home-hero h2 { font-size: 28px; line-height: 1.38; font-weight: 700; letter-spacing: -0.03em; margin-top: 6px; }
.home-hero h2 em { font-style: normal; color: var(--primary); }
.home-sub { font-size: 15px; color: var(--muted); }
.home-cta { margin-top: 18px; align-self: flex-start; min-width: min(220px, 100%); min-height: 56px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 16px; background: var(--primary); color: var(--on-primary); font-size: 17px; font-weight: 700; }
.home-cta:hover { background: var(--primary-ink); color: var(--on-primary); }
.home-cta--soft, .home-cta--soft:hover { background: var(--primary-soft); color: var(--primary-ink); }
.home-week { display: flex; flex-direction: column; gap: 6px; }
.home-week h2 { font-size: 19px; font-weight: 700; }
.home-rows { margin: 6px 0 0; display: flex; flex-direction: column; }
.home-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.home-rows dt { font-size: 15px; color: var(--muted); }
.home-rows dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-rows dd b { font-size: 20px; font-weight: 700; margin-right: 1px; }
.home-foot { font-size: 14px; color: var(--muted); }
.home-link-row { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 4px -8px -8px; padding: 0 8px; border-radius: 12px; color: var(--ink); font-size: 15px; font-weight: 600; }
.home-link-row:hover { background: var(--surface-2); color: var(--ink); }
.home-link-row .icon, .home-more .icon { width: 16px; height: 16px; color: var(--muted); }
.home-banner { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 20px; background: var(--surface); }
.home-banner > .icon { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.home-banner > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-wrap: pretty; }
.home-banner strong { font-size: 15px; font-weight: 700; }
.home-banner > span > span { font-size: 14px; color: var(--muted); }
.home-banner__btn { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: 14px; font-weight: 700; }
.home-note { padding: 14px 18px; border-radius: 16px; background: var(--surface); color: var(--ink-2); font-size: 14px; }
.home-note--warn { background: var(--warn-soft); color: var(--warn); }
.home-secs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; align-items: start; margin-top: 8px; }
.home-sec { display: flex; flex-direction: column; gap: 10px; }
.home-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.home-sec__head h2 { font-size: 20px; font-weight: 700; }
.home-sec__head h2 span { color: var(--primary); margin-left: 6px; }
.home-sec__note { font-size: 14px; color: var(--muted); }
.home-more { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--muted); font-size: 15px; font-weight: 600; white-space: nowrap; }
.home-more:hover { color: var(--ink); }
.home-list { padding: 8px; }
.prow { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; color: var(--ink); }
.prow:hover { background: var(--surface-2); color: var(--ink); }
.prow + .prow::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--line); }
.prow:hover::before, .prow:hover + .prow::before { display: none; }
.prow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prow__title { font-size: 16px; font-weight: 700; }
.prow__text { font-size: 15px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.prow__meta .stars { font-size: 12px; }
.prow__meta .badge { padding: 0; background: none; font-size: 13px; font-weight: 500; color: var(--muted); }
.prow__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.prow__state { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.prow__state--learning { color: var(--primary); }
.prow__state--done { color: var(--good); }
.prow__state--held { color: var(--warn); }
.prow__count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Wide screens: the big greeting is the title, so the bar above it stays for screen readers only. */
@media (min-width: 901px) {
  .main--home .topbar { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .main--home .content { padding-top: 28px; }
}
@media (max-width: 900px) {
  .home-top { grid-template-columns: 1fr; }
  .home-cta { align-self: stretch; }
  .main--home .content { padding-top: 12px; }
}
@media (max-width: 560px) {
  .home-card { padding: 22px 20px; border-radius: 22px; }
  .home-hero { padding: 24px 20px; }
  .home-hero h2 { font-size: 26px; }
  .home-list { padding: 4px; }
  .prow { padding: 14px; }
  .home-banner { padding: 16px; }
}

/* ---------- Difficulty stars, half steps (2026-10-23) ---------- */
.st { position: relative; display: inline-block; color: var(--line-2); }
.st--on { color: var(--star); }
.st--half::after { content: "★"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--star); }
.rate { display: inline-flex; align-items: center; gap: 0; padding: 6px 4px; margin: -6px -4px; border-radius: 8px; font-size: 16px; line-height: 1; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.rate .st:not(.st--on) { color: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
/* In the problem's top corner: the text flows around it. */
.sheet-rate { display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.digital > .sheet-rate { float: right; margin: 2px 0 8px 16px; }
.sheet-rate__label { font-size: 12px; font-weight: 600; color: var(--muted); }
@media (pointer: coarse) { .rate { font-size: 19px; padding-block: 10px; margin-block: -10px; } }
/* Phones: the problem is too narrow to flow around it, so it takes the top right of the box on its own. */
@media (max-width: 560px) { .digital > .sheet-rate { float: none; display: flex; justify-content: flex-end; margin: -4px 0 6px; } }

/* ---------- 2026-10-23 user review ---------- */
/* Dropdowns: our own arrow, kept off the right edge. */
select.input { -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; }
/* An icon at the start of a line sits on the middle of the text. */
.icon-line { display: flex; align-items: center; gap: 6px; }
.icon-line .icon { width: 16px; height: 16px; }
/* Phone tab bar: the current tab is bold with a bar on top, not colour alone. */
@media (max-width: 900px) {
  .tabbar a { position: relative; font-size: 13px; font-weight: 500; }
  .tabbar a[aria-current="page"] { font-weight: 800; }
  .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: -6px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); }
}

/* ---------- 2026-10-23 UX review, approved items (A, C, D) ---------- */
.nowrap { white-space: nowrap; }
/* Line breaks that follow the meaning (AGENTS.md 화면 표시 규칙, app.js O.mt / O.keepHtml): a formula or a label with its
   item never breaks inside; a formula that may break is an inline block that moves to the next line whole and, only when
   it is wider than its box, wraps between its parts: before a top-level = first, then before + − inside a part. */
.keep { white-space: nowrap; }
/* first baseline: a wrapped formula lines up with the text (and a list number) on its first line */
.keep-long { display: inline-block; max-width: 100%; white-space: normal; text-indent: 0; baseline-source: first; }
.row.end { justify-content: flex-end; }
/* C11: a ghost button at the start of a line lines up with the text edge, not with its own padding. */
.btn--flush { margin-left: -12px; }
/* C11: phones keep the same 16px on both sides as the solving screen. */
@media (max-width: 900px) {
  .topbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); }
  .content { padding-left: max(16px, env(safe-area-inset-left, 0px)); }
}
/* D18: a text button inside a sentence keeps its 44px target without making that line taller. */
p .linklike { position: relative; display: inline; min-height: 0; padding-block: 0; margin-block: 0; }
p .linklike::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.modal__actions:empty { display: none; }

/* A7: two wrong answers in a row is '다시 챙기기' in a calm colour, never red or a warning sign. */
.badge--repeat { background: var(--surface-2); color: var(--ink-2); }
.badge--repeat .icon { width: 13px; height: 13px; color: var(--primary); }
.cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 7px; border-radius: 999px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); line-height: 1; }
.cnt--on { background: var(--primary-soft); color: var(--primary-ink); }
td.num, th.num { text-align: center; }
.prow__state--repeat { color: var(--primary); }

/* C11: both home section heads start at the same height; the repeat note sits inside its list. */
.home-sec__head { align-items: flex-start; }
.home-sec__head h2 { line-height: 44px; }
.home-list__note { padding: 8px 16px 4px; font-size: 14px; color: var(--muted); }
@media (max-width: 560px) { .home-list__note { padding: 8px 14px 4px; } }

/* C6, C9: 내 문제 — rows like the home, the sort beside the count, a compact filter panel. */
.lib-count { gap: 8px 12px; }
.lib-count__acts { gap: 8px; }
select.input.sort-sel { width: auto; min-height: 36px; padding: 4px 32px 4px 12px; font-size: 14px; border-radius: 10px; background-position: right 10px center; }
@media (pointer: coarse) { select.input.sort-sel { min-height: 44px; } }
.toolbar .btn[aria-expanded="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.field-head__link { font-weight: 600; }
.star-chips { flex-wrap: wrap; gap: 6px; }
.star-chips .chip { flex: none; gap: 2px; padding-inline: 10px; }
.chip-star { color: var(--star); }

/* Problem page: the count in words (C8, no bar), a formula answer read as text (C1), meta on one grid (C12), quiet delete (C13). */
.count-line { font-size: 15px; }
.count-line strong { font-size: 22px; font-weight: 850; font-variant-numeric: tabular-nums; }
.answer-ro { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 4px 4px 4px 14px; border-radius: 12px; background: var(--surface-2); }
.answer-ro strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.form-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); }
.detail-foot { border-top: 1px solid var(--line); padding-top: 12px; gap: 4px 12px; }
.btn--quiet-danger, .btn--quiet-danger:hover { color: var(--bad); }

/* After grading: the count with a thin bar. */
.bar--thin { height: 6px; flex: 1 1 auto; max-width: 160px; min-width: 60px; background: color-mix(in srgb, currentColor 18%, transparent); }
.bar--thin > span { background: currentColor; }
.hint-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.hint-edit .input { flex: 1 1 220px; min-height: 40px; background: var(--surface); color: var(--ink); }
.ai-line { display: flex; justify-content: center; margin: 0; text-align: center; }
/* The error right under the answer box. */
.field-err { color: var(--bad); margin-top: -4px; }
.field-err:empty { display: none; }

/* C5, C7: upload — the same switch as the problem page on phones, separate links, a short form with the rest folded. */
.cmp-bar { display: none; }
@media (max-width: 760px) {
  .cmp-bar { display: flex; }
  .cmp-head__edit { display: none; }
  .cmp-bar ~ .compare .cmp-head { display: none; }
  .compare[data-editing="true"] .c-photo { order: -1; }
}
.cmp-links { gap: 0 18px; font-size: 13px; }
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.more-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font-weight: 700; font-size: 14px; text-align: left; }
.more-toggle .muted { font-weight: 500; }
.more-toggle .chev { margin-left: auto; width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
.more-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .more-toggle .chev { transition: none; } }
.save-row { justify-content: flex-end; }
.save-row #save-why { align-self: center; flex: 1 1 200px; text-align: right; }
.save-btns { flex-wrap: nowrap; gap: 8px; align-items: stretch; }

/* C13: tags — press the name to rename it here, a small × to remove. */
.tag-list li.tag-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.tag-name { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 700; font-size: 15px; }
.tag-name .icon { width: 14px; height: 14px; color: var(--muted); }
.tag-name:hover .icon { color: var(--primary); }
.tag-name-in { width: 160px; }
.tag-list .chip-x { margin: 0 -12px 0 0; }

/* A8: unit tables become rows of a list on phones. */
.unit-list { display: none; }
@media (max-width: 760px) {
  .unit-table { display: none; }
  .unit-list { display: flex; flex-direction: column; }
}
.unit-list.card { padding: 4px 20px; }
.unit-list > li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.unit-list > li:last-child { border-bottom: 0; }
.unit-list > li > a { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); }
.unit-list__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.unit-list__name { font-weight: 700; }
.unit-list__name .small { font-weight: 600; margin-right: 2px; }

/* D1, D3, D5, D6, D7: teacher home — the numbers are the filters, counts centred, no status column. */
.filter-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filter-tiles .stat { justify-content: space-between; min-height: 44px; font: inherit; color: var(--ink); cursor: pointer; }
.filter-tiles .stat .v { font-size: 24px; }
.filter-tiles .stat[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.filter-tiles .stat[aria-pressed="true"] .k { color: var(--primary-ink); }
.hot-units { display: flex; flex-direction: column; gap: 8px; }
.hot-units .chip b { color: var(--primary-ink); font-weight: 700; }
.mrow { grid-template-columns: minmax(140px, 1.6fr) repeat(3, minmax(0, 100px)) minmax(0, 110px); }
.mrow > .num { text-align: center; }
@media (max-width: 760px) {
  .mrow { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .mrow__who { grid-column: 1 / -1; }
  .mrow > span:nth-child(2) { grid-column: auto; justify-self: stretch; }
  .mrow > span:last-child { grid-column: auto; }
  .mrow > .num { text-align: left; }
}
/* D2: the students waiting for consent, each with a checkbox, inside the notice. */
.consent-rows { display: flex; flex-direction: column; }
.consent-rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.consent-rows .check { color: var(--ink); font-weight: 600; }
/* D8: a child waiting for verification. */
.kid-card__name { font-size: 18px; font-weight: 800; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
/* D4: the two weekly charts share one low card. */
.week--low { height: 96px; }
.charts-pair { gap: 20px; }
/* D7: account rows on phones — name on top, the checkbox and '관리' on a fixed second line. */
.acct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; }
.acct-row__who { display: flex; flex-direction: column; min-width: 0; }
.acct-row__gate:empty { display: none; }
@media (max-width: 560px) {
  .acct-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who who" "gate manage"; }
  .acct-row__who { grid-area: who; }
  .acct-row__gate { grid-area: gate; }
  .acct-row__manage { grid-area: manage; }
  .acct-row__gate:empty { display: block; }
}
.setting-note { padding: 12px 0 4px; }
/* D11: '개' beside the seat number. */
.seat-row { gap: 8px; font-weight: 700; }

/* D12: sign-up terms — the label takes the line, '보기' always on the right. */
.term-row { display: flex; align-items: center; gap: 8px; }
.term-row .check { flex: 1; min-width: 0; }
.term-row > a { flex: none; min-height: 44px; display: inline-flex; align-items: center; }
/* D10: pricing comparison — the full table on wide screens, feature | the plan picked on phones. */
.cmp-narrow { display: none; }
@media (max-width: 760px) { .cmp-wide { display: none; } .cmp-narrow { display: flex; } }
.cmp-narrow th[scope="row"] { width: 46%; }
/* D16: the product picture stays out from behind the text. */
@media (max-width: 720px) { .hero__bg { opacity: .05; object-position: 70% 100%; } }
@media (min-width: 721px) { .hero__lead { max-width: 400px; text-wrap: pretty; } }
/* Plans and usage (PRD v0.4 section 10, 2026-10-23): what is left with a slim bar, like other AI services show limits. */
.bar--slim { height: 6px; }
.home-week__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home-rows .home-rows__points { flex-wrap: wrap; row-gap: 6px; padding: 6px 0 10px; }
.home-rows__points .bar { flex: 1 0 100%; }
.home-rows__hint { flex: 1 0 100%; font-size: 13px; color: var(--muted); }
.home-rows__of { font-size: 14px; font-weight: 500; color: var(--muted); }
.usage-refill { font-weight: 700; color: var(--ink-2); }
.plan__reset { font-size: 13px; font-weight: 700; color: var(--primary-ink); }
.stats--points .stat { gap: 2px; }
.stats--points .stat .v { font-size: 24px; }
.extra-card { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.extra-card > .stack { flex: 1 1 320px; min-width: 0; }
.extra-card h3 { font-size: 18px; }

/* Answer types (PRD v0.4 '답 유형', contract revision 2, 2026-10-23): three chips, the box for the type, rare settings folded. */
.ans { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ans-types { display: flex; flex-wrap: wrap; gap: 6px; }
.ans-types .chip { min-height: 40px; padding-inline: 16px; font-size: 15px; }
@media (pointer: coarse) { .ans-types .chip { min-height: 44px; } }
.ans-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ans-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); font: 700 20px/1 var(--font); }
.ans-btn:hover { background: var(--surface-2); }
.ans-btn[aria-pressed="true"] { border: 2px solid var(--pick); background: var(--pick); color: #ffffff; padding: 0 11px; }
.ans-btn[aria-pressed="true"]:hover { background: var(--pick-2); border-color: var(--pick-2); }
.ans-btn__n { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: 0 0 0 2px var(--surface); font: 800 12px/22px var(--font); text-align: center; }
.ans-blank { display: grid; grid-template-columns: minmax(64px, 104px) minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.ans-blank__name { font-weight: 700; text-align: center; padding-inline: 8px; }
.ans-alt { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.ans-more-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink-2); font-weight: 700; font-size: 14px; text-align: left; }
.ans-more-btn .muted { font-weight: 500; font-size: 13px; }
.ans-more-btn .chev { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
.ans-more-btn[aria-expanded="true"] .chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .ans-more-btn .chev { transition: none; } }
.ans-more { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); }
.ans-more .check { gap: 10px; }
.ans-more .check .small { margin-left: 4px; }
/* A long setting name wraps as one sentence with its hint, not in two columns. */
.ans-more .check > span { display: block; min-width: 0; }
.ans-set { gap: 6px 10px; }
.ans-set .field-label { margin: 0; }
.ans-set select { width: auto; min-width: 128px; }
.ans-count { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ans-count .icon-btn { font-size: 20px; font-weight: 700; color: var(--ink); }
.ans-count .icon-btn[disabled] { opacity: .35; cursor: not-allowed; }
.ans-none { padding-top: 4px; border-top: 1px solid var(--line); }
.ans-none .linklike { font-weight: 700; color: var(--ink-2); margin-right: 4px; }
.ans-glyph--circled { font-size: 1.3em; line-height: 1; }
.ans-glyph--ox { font-size: 1.25em; line-height: 1; font-weight: 600; }
/* Review: one labelled box per blank. */
/* Marks after grading: one row per blank. */
.marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mark { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 48px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.mark__k { min-width: 3.2em; color: var(--muted); font-weight: 700; }
.mark__v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mark__key { font-size: 13px; font-weight: 700; color: var(--good); }
.mark__i { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; }
.mark__i .icon { width: 16px; height: 16px; stroke-width: 3; }
.mark--ok .mark__i { background: var(--good); }
.mark--no .mark__i { background: var(--bad); }
:root[data-theme="dark"] .mark__i { color: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark__i { color: var(--bg); } }
/* 선 잇기: two columns of names with dots on their inner edge; lines run between the dot columns. Item i of n sits at
   (i + 0.5) / n of the height on both sides (space-around), which is where the SVG draws the line ends.
   2026-10-23 user: the words are the main thing and a dot only has to be joinable — a 14px dot 8px from the text, a 2.5px
   line from dot centre to dot centre; the whole row half (text and dot, 44px or more) stays the touch target (answers.js). */
.mb { --n: 3; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(88px, .8fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100%; max-width: 560px; height: calc(var(--n) * 60px); -webkit-user-select: none; user-select: none; }
.mb-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
/* C1: each item fills its share of the height, so the whole row (label, word, circle) is the target. */
.mb-item { flex: 1 1 0; display: flex; align-items: center; gap: 6px; min-height: 44px; min-width: 0; }
.mb[data-mode="edit"], .mb[data-mode="answer"] { touch-action: none; }
.mb[data-mode="edit"] .mb-item, .mb[data-mode="answer"] .mb-item { cursor: grab; }
.mb-item.sel .mb-name, .mb-item.sel .mb-word { color: var(--primary-ink); }
/* C2: the item word written in the problem, after its label, on one line ("1 붕어"). A word that does not fit beside its
   label wraps at its own spaces there; only a word whose longest part cannot fit beside the label goes under it. */
.mb-label { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.mb-col--left .mb-label { justify-content: flex-end; text-align: right; }
.mb-word { flex: 1 1 0%; min-width: min-content; max-width: max-content; font-size: 16px; font-weight: 400; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.mb-col--left .mb-item { justify-content: flex-end; }
.mb-dot { position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 44px; padding: 0; border: 0; border-radius: 9px; background: none; touch-action: none; cursor: grab; }
.mb-dot:active { cursor: grabbing; }
.mb-col--left .mb-dot { margin-right: -9px; }
.mb-col--right .mb-dot { margin-left: -9px; }
.mb-dot i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primary); background: var(--surface); transition: box-shadow .12s; }
/* M1: the dots and lines keep their size with the large font (the page is zoomed 1.15). */
html[data-font="large"] .mb-dot i { width: calc(14px / 1.15); height: calc(14px / 1.15); border-width: calc(2px / 1.15); }
html[data-font="large"] .mb-line__ink, html[data-font="large"] .mb-line__key, html[data-font="large"] .mb-temp { stroke-width: calc(2.5px / 1.15); }
.mb-dot.on i { background: var(--primary); }
.mb-dot[aria-pressed="true"] i { background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 28%, transparent); }
span.mb-dot { cursor: default; }
span.mb-dot i { border-color: var(--line-2); }
span.mb-dot.on i { border-color: var(--ink-2); background: var(--ink-2); }
.mb-name { min-width: 0; font-size: 16px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; line-height: 1.35; }
.mb-col--left .mb-name { text-align: right; }
button.mb-name { min-width: 36px; min-height: 36px; padding: 4px 8px; border: 1px dashed var(--line-2); border-radius: 8px; background: var(--surface); }
button.mb-name:hover { border-color: var(--primary); }
@media (pointer: coarse) { button.mb-name { min-width: 44px; min-height: 44px; } }
/* The SVG fills its cell (stretched, lines keep their width): its own aspect ratio must not size the row. */
.mb-lines { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; }
.mb-line { cursor: pointer; outline: none; }
.mb-line__hit { stroke: transparent; stroke-width: 26; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.mb-line__ink { stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.mb-line:hover .mb-line__ink, .mb-line:focus-visible .mb-line__ink { stroke: var(--bad); stroke-width: 3.5; }
.mb-line:focus-visible .mb-line__hit { stroke: color-mix(in srgb, var(--bad) 16%, transparent); }
.mb-line__ink--ok { stroke: var(--good); }
.mb-line__ink--no { stroke: var(--bad); }
.mb-line__key { stroke: var(--good); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mb-temp { stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 9; vector-effect: non-scaling-stroke; pointer-events: none; }
.mb-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; }
.mb-mark .icon { width: 12px; height: 12px; stroke-width: 3.2; }
.mb-mark--ok { background: var(--good); }
.mb-mark--no { background: var(--bad); }
:root[data-theme="dark"] .mb-mark { color: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mb-mark { color: var(--bg); } }
.mb-tools { gap: 8px; }
/* C3, C4: items not joined yet; B4: blanks still empty — a line of its own right above the button. */
.mb-open, .rv-status { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.rv-status:empty { display: none; }
.mb-ask { display: flex; flex-direction: column; gap: 10px; }
.mb-ask p { font-weight: 700; }
.mb-ask__btns { justify-content: flex-end; gap: 8px; }
@media (pointer: coarse) { .mb-ask .btn--sm { min-height: 44px; } }
/* A7: 고르기 after grading as label chips — my answer (red where it differs) and the key (green). */
.lchips-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.lchips-box--rows { flex-direction: column; align-items: stretch; }
.lchips { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lchips__k { flex: none; min-width: 3em; font-size: 14px; font-weight: 700; color: var(--muted); }
.lchips__v { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lchip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; border: 2px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); font: 700 20px/1 var(--font); }
.lchip--ok { border-color: var(--good); }
.lchip--no { border-color: var(--bad); border-width: 3px; padding: 0 9px; }
.marks-box .mb { margin-inline: auto; }
@media (max-width: 560px) { .mb { grid-template-columns: minmax(0, 1fr) minmax(76px, .7fr) minmax(0, 1fr); } }
/* Touch screens: the small buttons of the answer box keep 44px targets. */
@media (pointer: coarse) { .ans .btn--sm, .mb-tools .btn--sm { min-height: 44px; } .ans-set select.input { min-height: 44px; } }

/* ---------- Problem screen (redesign 2026-10-23, user-approved mockups: tablet band, phone drawer; R1–R8) ---------- */
/* The screen fills the window under the prototype bar; the paper and the band scroll on their own. */
body:has(> #root > .solve) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
html[data-font="large"] body:has(> #root > .solve) { height: calc(100vh / 1.15); height: calc(100dvh / 1.15); }
body:has(> #root > .solve) > #root { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.solve { --q-size: clamp(24px, 2.35vw, 30px); --ch-gap: 44px; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 31.25vw, 420px); background: var(--surface); }
.solve__col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* R2: one line — ‹ 뒤로 가기, "3 / 5 · 중2 · 1학기 · 단원" (ROUND 3: no clock). */
.solve__bar { flex: none; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 20px 8px max(20px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); }
.solve__back { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 10px 0 4px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 600 16px/1 var(--font); white-space: nowrap; }
.solve__back .icon { width: 20px; height: 20px; }
.solve__back:hover { background: var(--surface-2); color: var(--ink); }
.solve__crumb { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.solve__crumb b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.solve__help { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.solve__help .icon { width: 22px; height: 22px; }
.solve__help:hover { background: var(--surface-2); color: var(--ink); }
/* R1: the problem on plain paper — no card, no border, no ruled lines, no inner header; a thin scroll bar only while needed. */
.solve__paper { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; display: flex; flex-direction: column; padding: 44px 56px 0; }
.solve__sheet { display: flex; flex-direction: column; gap: 24px; padding-bottom: 28px; }
.solve .digital { font-size: var(--q-size); line-height: 1.55; font-weight: 600; letter-spacing: -.01em; padding: 0; border: 0; border-radius: 0; background: none; }
.solve .q__line--choices { font-weight: 500; }
.solve .tok { padding: 0; }
/* After grading the difficulty is set in the band, so the problem does not move (R8: the same screen). */
.panel__rate { margin-top: -4px; }
.panel__rate .sheet-rate__label { font-size: 14px; color: var(--ink-2); }
.solve__pic { align-self: flex-start; }
.solve .solution { font-size: 16px; }
/* P9-3: large round ‹ › at the paper's bottom corners; they float while the paper scrolls and never cover its end. */
.solve__nav { position: sticky; bottom: 0; z-index: 3; margin: auto -32px 0; display: flex; align-items: center; padding: 12px 0 24px; pointer-events: none; }
.navbtn { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: 0 6px 20px rgba(20, 32, 60, .12); }
.navbtn .icon { width: 26px; height: 26px; stroke-width: 2.2; }
.navbtn:hover { color: var(--primary); border-color: var(--primary); }
.navbtn--next { margin-left: auto; }
/* The answer band: the answer only (R1); the same place shows the result after grading (R8). */
.solve__panel { position: relative; z-index: 4; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); border-left: 1px solid var(--line); }
.panel__handle { display: none; }
.panel__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 28px 28px 0; }
.panel__head h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.3; }
.panel__link { margin: -10px -6px -10px 0; padding-inline: 6px; font-size: 15px; font-weight: 600; text-decoration: none; }
.panel__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; display: flex; flex-direction: column; gap: 14px; padding: 20px 28px 16px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent); }
.panel__foot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 28px 28px; }
.panel__foot .rv-status { margin: 0; }
.btn--xl { width: 100%; min-height: 60px; border-radius: 16px; font-size: 19px; }
.panel__hint { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.panel__note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.panel__sum { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.panel__hintbox { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.panel__hintbox .icon { flex: none; margin-top: 2px; }
/* 고르기: equal buttons in one row (two rows from six labels). */
.pick { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 10px; }
.pick .ans-btn, .pick .ans-btn[aria-pressed="true"] { width: 100%; min-width: 0; height: 64px; padding: 0; border-width: 1.5px; border-radius: 16px; font-size: 26px; font-weight: 500; }
.pick .ans-btn:not([aria-pressed="true"]) { border-color: var(--line); }
.pick .ans-glyph--circled { font-size: 1.1em; }
/* 쓰기: a field per answer; a typed fraction shows stacked at its end (R7). */
.wbox { display: flex; align-items: center; min-width: 0; min-height: 64px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.wbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.wbox__in { flex: 1 1 auto; align-self: stretch; min-width: 0; width: 100%; min-height: 60px; padding: 0 14px; border: 0; border-radius: 16px; background: none; color: var(--ink); font: 600 26px/1.2 var(--font); font-variant-numeric: tabular-nums; text-align: center; outline: none; }
.wbox__in::placeholder { font-size: 17px; font-weight: 500; color: var(--muted); opacity: .8; }
.wbox__pv { flex: none; display: inline-flex; align-items: center; align-self: stretch; padding: 4px 16px 4px 14px; border-left: 1px solid var(--line); font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.wbox__pv:empty { display: none; }
.wrows { display: flex; flex-direction: column; gap: 12px; }
.wrow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.wrow__k { min-width: 2.2em; font-size: 18px; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
/* P9-2: answers in any order on one line, joined by commas; a field moves to the next line whole. */
.wline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 2px; }
.wline__k { margin-right: 8px; font-size: 20px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.wunit { display: inline-flex; align-items: flex-end; }
.wunit__sep { padding: 0 8px 8px 4px; font-size: 26px; font-weight: 600; line-height: 1; color: var(--ink-2); }
.wbox--short { width: 112px; }
.wbox--short .wbox__in { padding-inline: 8px; }
/* 선 잇기 in the band: 다시 긋기 under the board (P3). */
.mb-redo { display: flex; justify-content: flex-end; margin-top: -6px; }
.mb-redo .btn { color: var(--ink-2); }
/* P7: a small first-time card. */
.guide { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.guide__art { flex: none; width: 112px; height: 64px; }
/* The 선 잇기 card says the same as the line under the board: one of them is enough. */
.guide[data-type="match"] ~ .panel__hint { display: none; }
.guide__text { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.guide__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.guide .g-box { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.guide .g-on { fill: var(--primary); }
.guide .g-t { fill: var(--ink); font: 600 14px var(--font); text-anchor: middle; dominant-baseline: central; }
.guide .g-on-t { fill: var(--on-primary); font: 600 14px var(--font); text-anchor: middle; dominant-baseline: central; }
.guide .g-small { font-size: 12px; }
.guide .g-line { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.guide .g-link { stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; }
.guide .g-dot { fill: var(--surface); stroke: var(--primary); stroke-width: 2; }
.guide .g-dot-on { fill: var(--primary); }
/* R8: the result. */
.verdict { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; font-weight: 800; line-height: 1.25; }
.panel__head h2.verdict { font-size: 24px; }
.verdict--ok { color: var(--good); }
.verdict--no { color: var(--bad); }
.verdict__i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: currentColor; }
.verdict__i .icon { width: 17px; height: 17px; stroke-width: 3; color: #fff; }
:root[data-theme="dark"] .verdict__i .icon { color: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .verdict__i .icon { color: var(--bg); } }
.verdict__note { margin: -6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.count { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.count .bar--thin { color: var(--primary); max-width: none; }
.panel__links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: -6px; }
.panel__links .linklike { font-size: 15px; font-weight: 600; text-decoration: none; }
.solve__panel .lchips-box, .solve__panel .mark { background: var(--surface); }
.solve__panel .lchips-box { flex-direction: column; align-items: stretch; gap: 10px; }
.solve__panel .ai-line { justify-content: flex-start; }
.vchip { display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; padding: 4px 14px; border: 2px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.3; }
.vchip--ok { border-color: var(--good); }
.vchip--no { border-color: var(--bad); border-width: 3px; padding: 3px 13px; }
.grade .btn--xl { min-height: 60px; font-size: 18px; }
/* The end of a run: the problems skipped (P9-3). */
.skipped__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.skipped__list li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border-radius: 12px; background: var(--surface-2); }
.skipped__n { flex: none; min-width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* The key fields on the save form and the problem page: a typed fraction shows stacked at the end (R7). */
.kfield { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.kfield:focus-within { outline: 3px solid var(--primary); outline-offset: 2px; }
.kfield .input { flex: 1 1 auto; min-width: 0; border: 0; background: none; }
.kfield .input:focus-visible { outline: none; }
.kfield__pv { flex: none; display: inline-flex; align-items: center; padding: 2px 12px 2px 10px; border-left: 1px solid var(--line); font-size: 18px; font-weight: 600; line-height: 1.1; color: var(--ink-2); }
.kfield__pv:empty { display: none; }
/* A one-line list preview keeps formulas on that line (it ends in "…"); every row has room for a stacked fraction, so rows
   with and without one are the same height. */
.prow__text .keep-long { display: inline; white-space: nowrap; }
.prow__text wbr { display: none; }
/* One line cut with "…" by line-clamp, not text-overflow: a stacked fraction (an atomic box) that does not fit moves to the
   hidden second line instead of sitting under the "…". */
.prow__text { line-height: 28px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; white-space: normal; text-overflow: clip; max-height: 28px; }
/* Screen-reader words (a fraction read as "4분의 3") stay inside a box that cuts its overflow. */
.prow__text, .solve__crumb { position: relative; }
.prow__text .frac { font-size: .74em; line-height: 1.05; }
/* Phones and narrow windows: the problem on top, the answer in a drawer with a handle (R1). */
@media (max-width: 999px) {
  .solve { --q-size: 22px; --ch-gap: 28px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .solve__bar { min-height: 56px; gap: 4px; padding: 6px 8px 6px max(8px, env(safe-area-inset-left, 0px)); }
  .solve__back { padding-right: 6px; font-size: 15px; }
  /* A long unit name takes a second line rather than a "…" (two lines at most). */
  .solve__crumb { font-size: 14px; line-height: 1.35; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .crumb__cls { display: none; }
  .solve__paper { padding: 24px 20px 0; }
  .solve__sheet { gap: 18px; padding-bottom: 20px; }
  .solve__nav { margin-inline: -8px; padding: 8px 0 14px; }
  .navbtn { width: 48px; height: 48px; }
  .solve__panel { max-height: min(72dvh, 640px); border-left: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(20, 32, 60, .10); }
  .panel__handle { flex: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 24px; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: none; }
  .panel__handle span { width: 40px; height: 4px; border-radius: 999px; background: var(--line-2); }
  .panel__head { padding: 2px 20px 0; }
  .panel__scroll { padding: 14px 20px 14px; gap: 12px; }
  .panel__foot { padding: 6px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .solve__panel[data-folded="true"] .panel__scroll { display: none; }
  .solve__panel[data-folded="true"] .panel__head { padding-bottom: 10px; }
  .pick .ans-btn, .pick .ans-btn[aria-pressed="true"] { height: 56px; font-size: 24px; border-radius: 14px; }
  .wbox { min-height: 56px; }
  .wbox__in { min-height: 52px; font-size: 24px; }
  .btn--xl, .grade .btn--xl { min-height: 56px; font-size: 18px; }
  .panel__head h2.verdict { font-size: 22px; }
}
@media (max-width: 999px) and (min-width: 600px) { .solve { --q-size: 24px; } }
@media (max-width: 420px) { .guide { column-gap: 10px; padding: 12px 12px 10px; } .guide__art { width: 88px; height: 50px; } }
@media (max-width: 360px) { .solve__paper { padding-inline: 16px; } .panel__head, .panel__scroll, .panel__foot { padding-inline: 16px; } .pick { gap: 8px; } }
.ch__l { font-weight: 400; color: var(--ink-2); margin-right: .08em; }
.ans-glyph--circled { font-weight: 400; }
.lchip--item { gap: 8px; padding: 2px 12px; }
.lchip--no.lchip--item { padding: 1px 11px; }
.lchip__w { font-size: 18px; font-weight: 700; }
.solve__panel .mark__key { font-size: 15px; }
.solve__panel .mark__v { font-size: 20px; }

/* ---------- Overnight user-test fixes (2026-10-24) ---------- */
/* W-01: the Google and Naver marks on the sign-in buttons are small squares (the review screen's .mark box is another thing). */
.login-btn .mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-height: 0; padding: 0; gap: 0; border-radius: 6px; font-size: 14px; font-weight: 800; line-height: 1; }
.login-btn .mark--google { background: #ffffff; border: 1px solid #c9d3e3; color: #4285f4; }
.login-btn .mark--naver { background: #03c75a; border: 0; color: #ffffff; }
/* W-07: a □ in the problem keeps its size on screen; its touch area reaches 44px around it. */
button.sq--in { position: relative; }
button.sq--in::before { content: ""; position: absolute; inset: -14px; }
/* W-08: every control is at least 44px high where it is touched with a finger. */
@media (pointer: coarse) {
  .btn--sm, .chip, .tabs button, .tabs a, .toggle-group button, .input--sm, .acct-row .check, .solve__pic { min-height: 44px; }
  .rate { padding-block: 12px; margin-block: -12px; }
  .linklike { min-width: 44px; justify-content: center; }
  .site-footer a, .tag-row a, .usage-help a { display: inline-flex; align-items: center; min-height: 44px; }
  .admin-top .brand { min-width: 44px; justify-content: center; }
  .panel__handle { position: relative; }
  .panel__handle::after { content: ""; position: absolute; inset: -10px 0; }
}
/* W-14: on a phone the answer drawer leaves the problem in view; a long answer area scrolls inside the drawer. */
@media (max-width: 999px) { .solve__panel { max-height: min(58dvh, 640px); } }
@media (max-width: 599px) { .guide { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 10px; } .guide__art { display: none; } }
/* W-15: with the AI solution open, ‹ › wait at the end of the paper instead of floating over the solution. */
.solve__paper--sol .solve__nav { position: static; }
/* W-20: phones show the plain background (the picture sat behind the title). Wide screens show the whole tablet; the
   picture's menu names were redrawn to the current ones (hero-background-wide-okap-v2.png), so nothing is masked off. */
@media (max-width: 767px) { .hero__bg { display: none; } }
@media (min-width: 768px) {
  .hero__bg { inset: 0 0 0 auto; width: auto; max-width: none; height: 100%; object-fit: fill; -webkit-mask-image: linear-gradient(90deg, transparent 0 34%, #000 43%); mask-image: linear-gradient(90deg, transparent 0 34%, #000 43%); }
}
/* W-22: the column names of the student table stay in view while it scrolls. */
.mtable { overflow: clip; }
@media (min-width: 761px) { .mrow--head { position: sticky; top: var(--admin-top-h, 64px); z-index: 2; } }
/* W-26 / D-22: the save row is a solid bar with a line on top, and its two buttons save at once (원본 사진 or 디지털). */
.save-bar { background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgba(20, 32, 60, .06); margin-inline: -24px; padding: 12px 24px 4px; }
@media (max-width: 560px) { .save-bar { margin-inline: -20px; padding-inline: 20px; } }
.save-note { margin: 0; }
.save-btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.save-btn { flex-direction: column; gap: 2px; min-height: 60px; padding: 8px 10px; font-size: 15px; line-height: 1.25; }
/* Large font on a phone: the two buttons one above the other (as the app), and the row stays in the page instead of
   covering half the screen. */
@media (max-width: 560px) { html[data-font="large"] .save-btns { grid-auto-flow: row; } html[data-font="large"] .save-bar { position: static; } }
.save-btn small { font-size: 13px; font-weight: 600; color: var(--muted); }
.save-btn.btn--primary small { color: inherit; opacity: .85; }
.save-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.save-ways { margin: 0; }
.up-head .up-cancel { margin-left: auto; }
/* W-25: the AI line in two lines. */
.ai-ask { display: flex; flex-direction: column; }
.ai-ask p { margin: 0; }
/* W-27: a focused field inside a dialog shows its whole focus ring. */
.modal__body { padding-inline: 6px; margin-inline: -6px; }
/* W-29: the review marks have a name. */
.dots-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.dot { font-size: 15px; }
.dot-word--right { color: var(--good); }
.dot-word--wrong { color: var(--bad); }
/* W-31: on a phone the state and difficulty chips wrap onto a second line instead of running off the edge. */
@media (max-width: 760px) { .filters.scroll-x { flex-wrap: wrap; overflow-x: visible; } }
.star-chips { flex-wrap: wrap; overflow-x: visible; }
/* W-02: an unsaved registration on the home. */
.home-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; color: var(--ink); font-weight: 600; }
.home-resume__acts { display: inline-flex; flex-wrap: wrap; gap: 8px; }
/* W-03: '다음 문제' settles in after grading (a quick second tap is ignored meanwhile). */
.btn--settle { animation: settle .7s ease-out; }
@keyframes settle { from { opacity: .55; } to { opacity: 1; } }
/* D-24: the list row's main line is the problem itself. */
.prow__q { color: var(--ink); font-size: 16px; font-weight: 600; }
.prow__warn { color: var(--warn); font-weight: 700; }
/* T-42: the points rules as three short lines. */
.usage-help { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 900px) { .save-btns { width: min(100%, 560px); margin-left: auto; } .save-bar .save-note { text-align: right; } }
/* No clipping: on a narrow row the subject · grade · unit line wraps (at the dots, never inside a word) instead of "…". */
.prow__meta { flex-wrap: wrap; min-width: 0; }
.prow__cls { min-width: 0; white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
.prow__meta > .stars, .prow__warn { flex: none; }

/* ---------- 2026-10-24: review schedule, today's review, attendance, reminders, stepwise AI solution, wrong reasons ---------- */
.count-line__next { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.count { flex-wrap: wrap; row-gap: 4px; }
.count .bar--thin { flex: 1 1 60px; }
.panel__next { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.home-rows .home-rows__stamp { flex-wrap: wrap; row-gap: 4px; padding: 6px 0 10px; }
.home-rows__stamp dt, .home-rows__stamp dd { white-space: nowrap; }
.stamps { display: inline-flex; gap: 4px; vertical-align: middle; }
.stamps i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); }
.stamps i.on { background: var(--primary); border-color: var(--primary); }
.home-paused { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.home-sample__app { margin-top: 10px; }
.home-sample__app .linklike, .home-paused .linklike { font-weight: 700; }
.sol-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft); color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.sol-hint .icon { flex: none; margin-top: 2px; color: var(--primary); }
.sol-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sol-mismatch { margin: 0; }
.why { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.why__q { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-right: 2px; }
.chip--sm { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.chip-radio { position: relative; cursor: pointer; }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }
.chip-radio:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.report-steps { border: 0; padding: 0; margin: 0; min-width: 0; }
.report-steps legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.why-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--line); }
.why-bar__0 { background: #E07A4F; } .why-bar__1 { background: #4F7BE0; } .why-bar__2 { background: #9A6FD1; } .why-bar__3 { background: #8A97A8; }
.why-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink-2); }
.why-legend li { display: inline-flex; align-items: center; gap: 6px; }
.why-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.why-legend b { color: var(--ink); }
.why-line { margin: 0; overflow-wrap: anywhere; }
.notify-hour { width: auto; min-width: 120px; }
/* Landing (2026-10-24 concept): three worries, then the three answers. */
.pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.pain { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; border-radius: 20px 20px 20px 6px; background: var(--surface); border: 1px solid var(--line); }
.pain p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink); }
.pain p > span { display: block; }
.pain__no { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.fix { display: flex; flex-direction: column; gap: 18px; }
.fix__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.fix__head h3 { font-size: 22px; margin: 0; }
.fix__head p { margin: 0; max-width: 680px; }
.fix__body { display: flex; flex-direction: column; gap: 14px; }
.courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.course { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 16px; border-radius: 16px; background: var(--primary-soft); }
.course strong { font-size: 18px; color: var(--primary-ink); }
.course__days { flex-basis: 100%; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart { margin: 0; width: 100%; max-width: 720px; padding: 16px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.chart__title { font-weight: 700; color: var(--ink); }
.chart__box { overflow-x: auto; }
.chart svg { display: block; width: 100%; max-width: 640px; height: auto; }
.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__axis { font-size: 22px; fill: var(--muted); }
.chart__val { font-size: 22px; font-weight: 700; fill: var(--ink); }
.chart__line { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linejoin: round; }
.chart__dot { fill: var(--primary); }
.chart p { margin: 0; }
.chart__src { align-self: flex-end; text-align: right; font-size: 11.5px; line-height: 1.5; color: var(--muted); max-width: 560px; }
.chart__src cite { font-style: normal; }
.panel__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.panel__acts .panel__links { margin-top: 0; }

/* 2026-10-26 user: bigger header (brand and menu), the worry line is the point, hero picture ends with the buttons. */
.site-header__inner { padding-block: 14px; }
.brand__word { font-size: 30px; }
.brand__alias { font-size: 16px; }
.site-nav a { font-size: 17px; padding: 10px 16px; }
.site-actions .btn { font-size: 16px; }
.pain-title { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.25; letter-spacing: -0.03em; }
.page--pains { padding-top: 56px; }
@media (min-width: 768px) { .hero__inner { padding-block: 56px 0; } .hero__inner > .row { margin-bottom: 0; } }

/* ======================================================================================================================
   2026-10-26 desktop proportions (research report .ocap-local/work/research/report.md, 1440×900 targets).
   Type 14 → 16 → 20 → 24 → 32 → 44 → 64 · header 64 · content 1200 · text blocks 720 · sections 104 · cards r20 / 28 ·
   buttons 46 (hero 54). Phones keep their layout; only what is needed to stay unclipped applies below 1024px.
   ====================================================================================================================== */
:root { --wrap: 1200px; --gutter: max(16px, env(safe-area-inset-left, 0px)); --sec: 64px; --card-r: 20px; --card-pad: 24px; }
@media (min-width: 1024px) { :root { --gutter: 40px; --sec: 104px; --card-pad: 28px; } }

/* Coin: the yellow coin with its number (never the word 포인트). */
.coin { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.coin-n { display: inline-flex; align-items: center; gap: .28em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.coin-n b { font-weight: 800; color: inherit; }
.coin-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px 0 9px; border-radius: 999px; background: #fff4cc; color: #6b4a00; font-size: 15px; font-weight: 700; }
.coin-pill:hover { background: #ffeaa6; color: #6b4a00; }
:root[data-theme="dark"] .coin-pill { background: #3a3014; color: #ffd76a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .coin-pill { background: #3a3014; color: #ffd76a; } }
.topbar-me { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.topbar-account { display: inline-flex; }
@media (min-width: 901px) { .main--home .topbar { position: static; width: auto; height: auto; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 0 20px; overflow: visible; clip: auto; white-space: normal; background: transparent; backdrop-filter: none; justify-content: flex-end; } .main--home .topbar h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .main--home .content { padding-top: 12px; } }

@media (min-width: 1024px) {
  body { font-size: 16px; }
  .small { font-size: 14px; }
  .muted { line-height: 1.6; }
  /* Header: 64px, brand and menu clearly readable. */
  .site-header__inner { max-width: calc(var(--wrap) + 2 * var(--gutter)); min-height: 64px; padding: 0 var(--gutter); gap: 32px; }
  .brand__word { font-size: 28px; }
  .brand__alias { font-size: 15px; }
  .site-nav { gap: 4px; }
  .site-nav a { font-size: 17px; font-weight: 600; padding: 8px 14px; }
  .site-actions .btn { min-height: 44px; font-size: 16px; padding: 0 20px; }
  /* Containers and sections. */
  .page { max-width: calc(var(--wrap) + 2 * var(--gutter)); padding: var(--sec) var(--gutter); }
  .page--narrow { max-width: calc(800px + 2 * var(--gutter)); }
  .section-title { font-size: clamp(28px, 3vw, 44px); line-height: 1.22; letter-spacing: -0.03em; }
  .eyebrow { font-size: 15px; }
  /* Buttons: 46 standard, 54 large, 28px sides. */
  .btn { min-height: 46px; padding: 10px 22px; font-size: 16px; }
  .btn--lg { min-height: 54px; padding: 14px 28px; font-size: 17px; border-radius: 14px; }
  .btn--sm { min-height: 38px; padding: 6px 14px; font-size: 15px; }
  /* Cards. */
  .card { border-radius: var(--card-r); padding: var(--card-pad); }
  .faq summary { min-height: 60px; font-size: 17px; }
  .faq details { padding: 4px 24px; }
  .faq details p { font-size: 16px; line-height: 1.7; }
  .footer-wrap, .site-footer__inner { max-width: calc(var(--wrap) + 2 * var(--gutter)); padding: 56px var(--gutter); font-size: 15px; }
}

/* ---------- Home ---------- */
/* The picture ends level with the bottom of the buttons (2026-10-26 user), so the hero is as tall as its text. */
@media (min-width: 1024px) {
  .hero__inner { max-width: calc(var(--wrap) + 2 * var(--gutter)); padding: 88px var(--gutter) 0; gap: 24px; }
  .hero__inner h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.18; letter-spacing: -0.035em; max-width: 620px; }
  .hero__lead { font-size: 20px; line-height: 1.6; max-width: 520px; }
  .hero__hand { width: 320px; }
  .hero .row { gap: 12px; }
  .hero .btn--lg { min-height: 56px; padding: 0 30px; font-size: 18px; }
}
/* 2026-10-27 user: less empty space above "오답노트, 이래서 어려웠나요?" and between its link and the FAQ. */
.pains-sec { padding-block: 56px 40px; }
@media (min-width: 1024px) { .pains-sec { padding-block: 80px 56px; } }
.pains-sec__head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-bottom: 40px; }
.pain-title { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.2; letter-spacing: -0.035em; font-weight: 850; }
.pains-sec__more { display: flex; justify-content: center; margin-top: 32px; }
@media (min-width: 1024px) {
  .pains { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  /* 2026-10-27 user: the number sits small in front of the text and both lines start at the same place; each line ends at its comma. */
  .pain { flex-direction: row; gap: 8px; padding: 28px 18px; border-radius: var(--card-r); }
  .pain p { font-size: 18px; line-height: 1.6; font-weight: 600; letter-spacing: -0.01em; }
  .pain__no { width: 24px; height: 24px; margin-top: 2px; font-size: 12px; background: var(--primary-soft); color: var(--primary-ink); }
  .pains-sec__more .link-more { font-size: 17px; }
}
/* FAQ: title on the left, list on the right (4 : 8). */
.faq-sec { background: var(--surface); border-top: 1px solid var(--line); }
.faq-split { display: grid; gap: 24px; }
.faq-split__head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (min-width: 1024px) {
  .faq-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
  .faq-sec .faq details { background: var(--bg); border-color: transparent; }
}
/* 2026-10-27 user: the home FAQ looked lopsided with too much empty space, so it is one narrow centered column with the title at its top left. */
.faq-sec .faq-split { grid-template-columns: minmax(0, 1fr); max-width: calc(820px + 2 * var(--gutter)); gap: 20px; padding-block: 40px 64px; }
.faq-sec .faq-split__head { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.faq-sec .section-title { font-size: clamp(24px, 2.4vw, 32px); }
.faq-sec .faq { gap: 10px; }
@media (min-width: 1024px) {
  .faq-sec .faq-split { padding-block: 48px 80px; }
  .faq-sec .faq summary { min-height: 56px; font-size: 17px; }
}
.cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
@media (min-width: 1024px) {
  .cta-band__inner { padding-block: 96px; gap: 20px; }
  .cta-band__inner p { font-size: 18px; }
  .cta-band .btn--lg { min-height: 56px; padding: 0 32px; font-size: 18px; }
}

/* ---------- Features: alternating rows, picture : text = 7 : 5 ---------- */
.feat-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-bottom: 0; }
.feat-intro p { font-size: 18px; color: var(--muted); max-width: 560px; }
.frow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.frow__text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.frow__label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--primary); }
.frow__label .step-num { width: 28px; height: 28px; border-radius: 50%; font-size: 14px; }
.frow__text h2 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.25; letter-spacing: -0.03em; }
.frow__text > p { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.frow__art { min-width: 0; padding: 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.frow__note { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); font-size: 14px; font-weight: 700; }
.frow + .frow { margin-top: 72px; }
@media (min-width: 1024px) {
  .frow { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; }
  .frow--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .frow--flip .frow__art { order: 2; }
  .frow + .frow { margin-top: var(--sec); }
  .frow__art { padding: 28px; }
}
.frow__art .compare--always { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.frow__art .paper { font-size: 16px; padding: 22px 22px 100px; }
.frow__art .digital { font-size: 19px; padding: 20px; }
.feat-cards { display: grid; gap: 12px; }
.feat-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--primary-soft); }
.feat-card strong { font-size: 18px; color: var(--primary-ink); }
.feat-card .course__days { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .feat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The forgetting-curve chart sized to its row (about 560–640 wide), text at reading size. */
.frow__art .chart { max-width: 640px; margin-inline: auto; background: transparent; border: 0; padding: 0; }
@media (min-width: 1024px) {
  .frow__art .chart svg { max-width: 600px; margin-inline: auto; }
  .frow__art .chart__axis { font-size: 15px; }
  .frow__art .chart__val { font-size: 16px; }
  .frow__art .chart__dot { r: 5px; }
  .frow__art .chart__line { stroke-width: 3; }
}
.where-sec { background: var(--surface); border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .where-sec .grid-2 { gap: 24px; } }

/* ---------- AI solution: answer on top, numbered step cards, one at a time ---------- */
.sol-ans { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 12px 20px; border-radius: 14px; background: var(--primary-soft); }
.sol-ans::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--primary); }
.sol-ans span { font-size: 13px; font-weight: 700; color: var(--primary-ink); }
.sol-ans strong { font-size: 24px; line-height: 1.35; color: var(--ink); }
.sol-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sol-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.sol-step__no { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sol-step__name { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); min-width: 0; }
.sol-step__body { font-size: 16px; line-height: 1.6; color: var(--ink-2); min-width: 0; }
.sol-step--shut { padding-block: 0; border-style: dashed; background: transparent; }
.sol-step--shut .sol-step__no { grid-row: auto; background: var(--surface-2); color: var(--muted); margin-block: 10px; }
.sol-step__open { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 0; border: 0; background: none; color: var(--primary-ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.sol-step__open .icon { width: 18px; height: 18px; }
.sol-step__lock { display: flex; align-items: center; min-height: 48px; color: var(--muted); font-weight: 600; }
.sol-check { margin: 0; font-size: 15px; color: var(--ink-2); }
.cta-band__inner { padding-block: 56px; }
@media (min-width: 1024px) { .cta-band__inner { padding-block: 96px; } }

/* ---------- Pricing ---------- */
.price-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding-bottom: 40px; }
.price-head__title { font-size: clamp(30px, 4vw, 52px); }
.price-head__lead { font-size: 17px; color: var(--muted); max-width: 560px; }
.price-toggle button { min-height: 44px; padding: 6px 20px; font-size: 16px; }
.price-body { padding-top: 0; display: flex; flex-direction: column; gap: 48px; }
.plan { gap: 18px; border-radius: var(--card-r); padding: var(--card-pad); }
.plan--pick { border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.plan__top { display: flex; flex-direction: column; gap: 6px; }
.plan__name { font-size: 20px; font-weight: 800; }
.plan__who { font-size: 14px; color: var(--muted); line-height: 1.5; min-height: 2lh; }
.plan__price { font-size: 32px; font-weight: 850; letter-spacing: -0.03em; line-height: 1.2; margin-top: 8px; font-variant-numeric: tabular-nums; }
.plan__price small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan__bill { font-size: 14px; color: var(--muted); line-height: 1.5; min-height: 2lh; }
.plan .btn.plan__btn { width: 100%; margin-top: 0; }
.plan__feats { margin: 0; padding: 16px 0 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--ink-2); border-top: 1px solid var(--line); }
.plan__feats li { display: flex; gap: 8px; align-items: baseline; }
.plan .seg .chip { min-width: 52px; justify-content: center; }
.plan__seats { gap: 8px; }
.quote-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 22px 28px; border-radius: var(--card-r); background: var(--surface); border: 1px dashed var(--line-2); }
.quote-row__t { font-size: 19px; font-weight: 800; }
.price-sec { display: flex; flex-direction: column; gap: 20px; }
.price-sec__head { display: flex; flex-direction: column; gap: 8px; }
.price-sec__head .section-title { font-size: clamp(24px, 2.4vw, 32px); }
.price-sec__head .section-title .coin { width: .9em; height: .9em; vertical-align: -0.12em; margin-right: .06em; }
.price-sec.faq-split .section-title { font-size: clamp(24px, 2.4vw, 32px); }
.coin-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.coin-uses .stat { gap: 4px; padding: 18px 20px; border-radius: 16px; }
.coin-uses .stat .v { font-size: 24px; }
.coin-packs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.coin-packs__t { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; }
.coin-packs__list { display: flex; flex-wrap: wrap; gap: 12px; }
.coin-pack { display: inline-flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 17px; }
.coin-pack__n { font-size: 18px; }
.extra-card__t { font-size: 18px; }
.cmp-table td { font-variant-numeric: tabular-nums; }
.cmp-table .cmp-pick { color: var(--primary-ink); }
@media (min-width: 1024px) {
  .price-head { padding-bottom: 48px; }
  .price-body { gap: 72px; }
  .plans { gap: 20px; }
  .plan__price { font-size: 38px; }
  .cmp-table th, .cmp-table td { padding: 14px 18px; font-size: 15px; }
  .cmp-table th[scope="row"] { width: 22%; }
}
@media (min-width: 1100px) and (max-width: 1279px) { .plan__price { font-size: 32px; } .plan { padding: 22px; } }
.price-sec.faq-split { display: grid; }
.plan__price small { white-space: nowrap; }
.frow__art > .solution { border: 0; padding: 0; background: transparent; }
@media (min-width: 1024px) {
  .frow__art .compare--always { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .frow__art .paper-wrap { max-width: 520px; }
  .feat-cards { grid-template-columns: minmax(0, 1fr); }
  .brand__word { font-size: 30px; }
  .brand__alias { font-size: 16px; }
  .hero__lead { max-width: 470px; }
  .pain { min-height: 0; }
}

/* ---------- Solve screen, wide screens: a 720px sheet, a 4px progress bar with n / N, a coloured result band ---------- */
.solve__prog { display: none; }
@media (min-width: 1000px) {
  .solve { --q-size: clamp(20px, 1.8vw, 26px); }
  .solve .digital { line-height: 1.6; }
  .solve__bar .crumb__pos, .solve__bar .crumb__lead { display: none; }
  .solve__prog { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 24px 0 max(24px, env(safe-area-inset-left, 0px)); }
  .solve__track { flex: 1 1 auto; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
  .solve__track i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
  .solve__prog b { flex: none; font-size: 15px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .solve__paper { padding: 40px 48px 0; }
  .solve__sheet, .solve__nav { width: 100%; max-width: 720px; margin-inline: auto; }
  .solve__nav { margin-top: auto; }
  /* The result band sits where the answer title was; the button below becomes '다음 문제'. */
  .panel__band { margin: 0; padding: 18px 28px; min-height: 72px; }
  .panel__band--ok { background: var(--good-soft); }
  .panel__band--no { background: var(--bad-soft); }
  .solve .solution { gap: 14px; }
}
.solution ol.sol-steps { padding: 0; gap: 10px; }
@media (min-width: 901px) { .home-hero { justify-content: center; } }
.setting-row select.notify-hour { width: auto; }
/* The unit sits under the price on every card, so the four prices line up at any width. */
.plan__price small { display: block; margin-top: 2px; }

/* ======================= 2026-10-26 desktop review (13 items) ======================= */
/* 1, 2: login and start are centred cards, not the full page width. */
.auth__card { width: 100%; max-width: 440px; margin-inline: auto; }
.auth__card--wide { max-width: 520px; }

/* 3: the solve screen. Wide screens: one working column (max 760px) — the row ‹ 이전 · progress · n / N · 다음 ›, the
   problem, the answer card right under it (input, answer types and '다 풀었어요' together), then the AI solution.
   The page scrolls as a whole; nothing sticks or floats. Phones keep the drawer. */
.solve__nav .navbtn__t { display: none; }
.solve__nav--one { display: none; }
@media (min-width: 1000px) {
  body:has(> #root > .solve), html[data-font="large"] body:has(> #root > .solve) { height: auto; display: block; overflow: visible; background: var(--surface); }
  body:has(> #root > .solve) > #root { display: block; }
  .solve { --q-size: clamp(22px, 2vw, 28px); display: grid; grid-template-columns: minmax(24px, 1fr) minmax(0, 760px) minmax(24px, 1fr); align-content: start; min-height: calc(100vh - var(--proto-h, 42px)); padding-bottom: 72px; }
  html[data-font="large"] .solve { min-height: calc(100vh / 1.15 - var(--proto-h, 42px)); }
  .solve__col, .solve__paper { display: contents; }
  .solve__col > *, .solve__paper > *, .solve > .solve__panel { grid-column: 2; min-width: 0; }
  .solve__bar { grid-column: 1 / -1; order: 0; padding-inline: 24px; }
  .solve__nav { order: 1; }
  .solve__sheet { order: 2; }
  .solve > .solve__panel { order: 3; }
  .solve__sol { order: 4; margin-top: 24px; }
  .solve__nav, .solve__nav--one { position: static; display: flex; align-items: center; gap: 12px; width: auto; max-width: none; margin: 20px 0 0; padding: 0; pointer-events: auto; }
  .solve__nav .solve__prog { flex: 1 1 auto; display: flex; align-items: center; gap: 14px; padding: 0 4px; }
  .solve__prog b { font-size: 16px; }
  .solve__nav .navbtn { width: auto; height: 44px; gap: 4px; padding: 0 14px 0 10px; border-radius: 12px; box-shadow: none; font: 600 16px/1 var(--font); }
  .solve__nav .navbtn--next { margin-left: 0; padding: 0 10px 0 14px; }
  .solve__nav .navbtn .icon { width: 20px; height: 20px; }
  .solve__nav .navbtn__t { display: inline; }
  .solve__nav .navbtn[hidden] { display: inline-flex !important; visibility: hidden; }
  .solve__sheet { width: auto; max-width: none; margin: 0; gap: 20px; padding: 36px 0 28px; }
  .solve .digital { line-height: 1.6; }
  /* The answer card: the same width as the problem. */
  .solve > .solve__panel { min-height: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); box-shadow: var(--shadow); }
  .solve__panel .panel__head { padding: 22px 28px 0; }
  .solve__panel .panel__head h2 { font-size: 18px; }
  .solve__panel .panel__head h2.verdict { font-size: 24px; }
  .solve__panel .panel__band { padding: 18px 28px; border-radius: 19px 19px 0 0; }
  .solve__panel .panel__scroll { overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 16px 28px 0; gap: 16px; }
  .solve__panel .panel__scroll:empty { display: none; }
  .solve__panel .panel__foot { padding: 20px 28px 28px; }
  .solve .wbox { min-height: 60px; }
  .solve .wbox__in { min-height: 56px; font-size: 24px; }
  .solve .wbox__pv { font-size: 22px; }
  .solve .pick .ans-btn, .solve .pick .ans-btn[aria-pressed="true"] { height: 60px; font-size: 24px; }
  .solve .btn--xl, .solve .grade .btn--xl { min-height: 56px; font-size: 18px; }
  .solve__panel .panel__hint, .solve__panel .panel__note, .solve__panel .verdict__note, .solve__panel .guide__text { font-size: 16px; }
  .solve__panel .panel__links .linklike, .solve__panel .rv-status { font-size: 16px; }
  .solve__panel .count, .solve__panel .panel__next, .solve__panel .why__q { font-size: 15px; }
  .solve .solution { font-size: 16px; }
}

/* 4: the problem list is kept to a readable width, so the status sits near the text. */
@media (min-width: 1024px) { .main--lib .content { max-width: 960px; } }

/* 5: the problem page. Wide: the problem and the review record side by side, the information card under both, its
   short fields in two columns. */
.info-pair { display: grid; gap: 16px; min-width: 0; }
.info-pair > * { min-width: 0; }
@media (min-width: 1001px) {
  .detail { grid-template-areas: "prob side" "info info"; }
  .detail .side-card { position: static; }
  .info-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
}

/* 6: 선생님·학부모 — text : card = 7 : 5, both as tall as each other; the school card spans the width under them. */
.tg-sec { display: flex; flex-direction: column; gap: 24px; }
.tg-row { display: grid; gap: 24px; }
.tg-title { font-size: 28px; }
.tg-facts { display: flex; flex-direction: column; gap: 14px; }
.tg-facts h3 { font-size: 18px; }
.tg-steps { gap: 16px; }
.tg-school { display: grid; gap: 20px; }
.tg-school__files { align-items: flex-start; }
@media (min-width: 1024px) {
  .tg-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
  .tg-title { font-size: 32px; }
  .tg-steps { justify-content: center; padding: 32px; }
  .tg-school { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; padding: 32px; }
  .tg-school__files .btn { width: 100%; justify-content: flex-start; }
}

/* 7: 기능 소개 — the title on the left like the rest; the AI card keeps its height when steps are folded. */
.feat-intro { align-items: flex-start; text-align: left; }
/* The AI card is taller than its text (about 510px folded, 640px open), so the text sits in the card's middle and the
   row keeps the card's own height; the plan note under the text gives the column the same weight as row 1. */
@media (min-width: 1024px) {
  .frow--sol { align-items: center; }
  .frow--sol .frow__text { justify-content: center; }
}

/* 8: 요금제 — every card has the same rows (top, options, button, list), so the buttons line up. */
.plan__opt { display: flex; align-items: center; min-width: 0; }
.plan__opt:empty, .plan__cta:empty { display: none; }
@media (min-width: 600px) {
  .plan { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 18px; align-content: start; }
  .plan__opt:empty, .plan__cta:empty { display: block; }
}

/* 9: 내 계정 — two columns on wide screens. */
.acct-grid, .acct-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 1200px) {
  .acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .acct-grid .card--narrow, .acct-card { max-width: none; }
}

/* 10: 요금제·학생 수 — what you have on the left, what you can change on the right; payment method and history side by side. */
.bill-split, .bill-pair { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bill-split > *, .bill-pair > * { min-width: 0; }
@media (min-width: 1100px) {
  .bill-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .bill-change { padding-left: 32px; border-left: 1px solid var(--line); }
  .bill-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}

/* 11: parent home — the units to look at again and the plan under the children's cards. */
.fam-sum { display: grid; gap: 16px; }
@media (min-width: 900px) { .fam-sum { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; } }
.fam-units { display: flex; flex-direction: column; }
.fam-units__row { display: grid; grid-template-columns: minmax(56px, auto) minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 52px; padding: 8px 4px; border-top: 1px solid var(--line); color: var(--ink); }
.fam-units li:first-child .fam-units__row { border-top: 0; }
.fam-units__row:hover { color: var(--primary-ink); }
.fam-units__who { font-weight: 700; }
.kv--wide { grid-template-columns: max-content 1fr; column-gap: 20px; }

/* 12: footer — brand on the left, the link groups spread on the right. */
.footer-cols { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.footer-brand { max-width: 300px; }
@media (min-width: 1024px) {
  .site-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; row-gap: 40px; }
  .footer-cols { display: grid; grid-template-columns: repeat(3, minmax(150px, auto)); gap: 0 96px; }
  .site-footer__inner > p { grid-column: 1 / -1; }
}

/* 13: the sticky sidebar fits under the prototype bar, so its last line is never cut by the window. */
@media (min-width: 901px) {
  .sidebar { top: 0; height: calc(100vh - var(--proto-h, 42px)); }
  html[data-font="large"] .sidebar { height: calc(100vh / 1.15 - var(--proto-h, 42px)); }
}

/* Bigger text at desktop width (2026-10-26): secondary text at least 14–15px, body 16px, key numbers larger. */
@media (min-width: 1024px) {
  .small { font-size: 15px; }
  .proto-bar { font-size: 14px; }
  .badge { font-size: 14px; }
  .notice { font-size: 15px; }
  .field label, .field-label { font-size: 15px; }
  .kv dt, .kv dd { font-size: 16px; }
  .stat .k { font-size: 15px; }
  .stat .v { font-size: 32px; }
  .kid-stats { font-size: 15px; }
  .kid-stats b { font-size: 26px; }
  .filters .label, .cmp-links, .home-rows__hint, .plan__reset, .ans-more-btn .muted, .mark__key, .sol-ans span { font-size: 15px; }
  .mask-note, .sol-foot, .sheet-rate__label { font-size: 14px; }
  .chip--sm { min-height: 36px; font-size: 15px; }
  .chip { font-size: 15px; }
  .side-link { min-height: 48px; font-size: 17px; }
  .plan-mini { font-size: 15px; }
  .settings__nav a { font-size: 16px; }
  table, .cmp-table th, .cmp-table td { font-size: 16px; }
  .mrow--head { font-size: 15px; }
  .mlabel { font-size: 14px; }
  .faq summary { font-size: 18px; }
  .faq details p { font-size: 17px; }
  .prow__title { font-size: 17px; }
  .prow__text { font-size: 17px; }
  .prow__meta, .prow__meta .badge, .prow__count, .prow__state { font-size: 15px; }
  .prow__meta .stars { font-size: 14px; }
  .plan__who, .plan__bill { font-size: 15px; }
  .plan__feats { font-size: 16px; }
  .plan__price small { font-size: 16px; }
  .quote-row .small, .coin-uses .stat .k { font-size: 15px; }
  .home-foot, .home-note, .home-sec__note, .home-banner > span > span, .home-list__note, .home-rows__of { font-size: 15px; }
  .home-eyebrow, .home-sub, .home-rows dt, .home-rows dd, .count-line { font-size: 16px; }
  .count-line__next, .panel__next, .why__q, .why-legend, .count, .stepper-line, .modal__err { font-size: 15px; }
  .guide__text, .panel__hint, .panel__note, .verdict__note { font-size: 16px; }
  .site-footer__inner { font-size: 16px; }
}

/* 2026-10-26 user: admin header = the set name (bigger) + a '패밀리'/'클래스' tag; kid stat numbers sit centred over their labels. */
.admin-title { gap: 12px; }
.admin-title h1 { flex: 0 1 auto; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.admin-tag { flex: none; font-size: 15px; padding: 5px 12px; }
@media (max-width: 560px) { .admin-title h1 { font-size: 22px; } .admin-title .admin-tag { display: inline-flex; font-size: 13px; padding: 4px 9px; } }
.kid-stats span { align-items: center; text-align: center; }
.kid-stats b { line-height: 1.2; }
/* 2026-10-26 user: the coin must sit on the text line, not float. Inline with the text, same weight as around it. */
.coin-n { display: inline; }
.coin-n .coin { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.17em; margin-right: .22em; }
.coin-n b { font-weight: inherit; }
.coin-pill .coin-n, .coin-pack .coin-n { display: inline-flex; align-items: center; }
.coin-pill .coin-n .coin, .coin-pack .coin-n .coin { vertical-align: 0; }
/* 2026-10-26 user: 고객센터 1:1 문의 form (settings tab and help page). */
.support-form { max-width: 640px; }
.support-form__body { min-height: 160px; resize: vertical; line-height: 1.6; padding-block: 12px; }
.support-form__send { align-self: flex-start; min-width: 140px; }
.support-mine li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.support-mine__t { font-weight: 700; overflow-wrap: anywhere; }
/* 2026-10-26 user: the matching board sits in the middle of its panel; a bulb leads '내 힌트 보기'. */
.mb { margin-inline: auto; }
.mb-redo { width: 100%; max-width: 560px; margin-inline: auto; }
.hint-link { display: inline-flex; align-items: center; gap: 6px; }
.hint-link .icon { width: 1.1em; height: 1.1em; flex: none; color: #e0a100; }
.fold-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2, var(--bg)); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.fold-btn:hover { border-color: var(--primary); }
.fold-btn__chev { transform: rotate(90deg); transition: transform .15s; }
.fold-btn[aria-expanded="true"] .fold-btn__chev { transform: rotate(-90deg); }
/* 2026-10-26 user: the greeting card fills with today's first problems instead of empty space; the upload link lives only in the sidebar. */
@media (min-width: 901px) { .home-hero { justify-content: flex-start; } }
.home-today { display: flex; flex-direction: column; margin-top: 18px; border-top: 1px solid var(--line); }
.home-today__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.home-today__row:hover { color: var(--primary); }
.home-today__t { min-width: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.home-today__more { margin-top: 10px; font-size: 15px; color: var(--muted); }
/* 2026-10-26 user: nothing on the admin screens follows the wheel — header, settings menu and list head scroll away. */
.admin-top { position: static; }
.settings nav { position: static; }
.mrow--head { position: static !important; }
.admin-title .brand { display: inline-flex; }
/* 2026-10-26 user: the crop instruction must be easy to see, led by a picture. */
.guide-tip { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); }
.guide-tip__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary); color: #fff; }
.guide-tip__ic .icon { width: 24px; height: 24px; }
.guide-tip__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guide-tip__txt strong { font-size: 17px; color: var(--ink); }
.guide-tip__txt span { font-size: 15px; color: var(--ink-2, var(--muted)); }
/* 2026-10-26 user: the page header does not follow the wheel on any signed-in screen. */
.topbar { position: static; }
/* 고객센터 form, second pass (2026-10-26 user: "깔끔한 양식"). */
.support-form { display: flex; flex-direction: column; gap: 22px; max-width: 680px; }
.sf-row { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.sf-label { font-size: 16px; font-weight: 700; color: var(--ink); padding: 0; }
.sf-req { margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--primary); }
.sf-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-kind { position: relative; }
.sf-kind input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sf-kind span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2, var(--line)); border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 600; color: var(--ink-2); }
.sf-kind input:checked + span { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); }
.sf-kind input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 2px; }
.sf-count { align-self: flex-end; font-variant-numeric: tabular-nums; }
.sf-agree { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2, var(--bg)); font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.sf-agree input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--primary); }
.support-form__send { align-self: stretch; }
@media (min-width: 761px) { .support-form__send { align-self: flex-start; min-width: 180px; } }
.sf-mine { display: flex; flex-direction: column; gap: 6px; max-width: 680px; margin-top: 8px; }
.support-mine li { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.support-mine__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.up-exit { gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
/* 2026-10-26 user: the save buttons stay at the end of the page instead of following the wheel. */
.save-bar { position: static; background: none; }
.confirm-crop { margin: 0; max-height: 50vh; overflow: hidden; display: flex; justify-content: center; }
.confirm-crop img { max-height: 50vh; width: auto; object-fit: contain; }
/* 2026-10-26 user: one clear '뒤로 가기' at the top of the upload steps replaces the scattered links and the corner 취소. */
.up-back { align-self: flex-start; min-height: 44px; padding-inline: 14px 18px; font-size: 16px; }
@media (min-width: 901px) { .home-link-row.phone-only { display: none; } }
/* 2026-10-26 user: each step explains why (teacher style); the common-mistake line closes the solution. */
.sol-step__body { line-height: 1.7; }
.sol-mistake { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, #e0a100 12%, var(--surface)); line-height: 1.6; }
.sol-mistake strong { color: var(--ink); }
/* 2026-10-26 user: the answer is set in numbered steps; choice buttons are smaller; ①… and ㄱ… rows each with − / +. */
.ans-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ans-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.ans-step__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 14px; font-weight: 800; }
.ans-step__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ans-step__t { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 28px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.seg button[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); }
.ans-rows { display: flex; flex-direction: column; gap: 10px; }
.ans-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ans-row .ans-btns { gap: 6px; }
.ans-rows .ans-btn { min-width: 40px; height: 40px; padding: 0 9px; font-size: 16px; border-radius: 10px; }
.ans-rows .ans-btn[aria-pressed="true"] { padding: 0 8px; }
.ans-rows .ans-glyph--circled { font-size: 1.05em; }
.ans-style { width: auto; min-width: 104px; }
.ans-row__name { min-width: 104px; font-size: 14px; font-weight: 600; color: var(--muted); }
.ans-row .input.ans-style { width: auto; flex: none; }
.ans-row { flex-wrap: nowrap; gap: 10px; }
.ans-row .input.ans-style { min-width: 0; width: 92px; padding-inline: 10px 26px; }
.ans-row__name { flex: none; width: 92px; min-width: 0; }
.ans-row .ans-btns { flex: 0 1 auto; min-width: 0; }
.ans-row .ans-count { flex: none; }
.ans-row .ans-count .icon-btn { width: 36px; min-width: 36px; }
@media (max-width: 560px) { .ans-row { flex-wrap: wrap; } .ans-row__name { display: none; } }
.ans-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ans-row .ans-btns { flex-wrap: wrap; }
@media (max-width: 560px) { .ans-row { grid-template-columns: minmax(0, 1fr) auto; } .ans-row .ans-style { grid-column: 1 / -1; } }
.ans-rows .ans-btn, .ans-rows .ans-btn[aria-pressed="true"] { min-width: 38px; width: auto; height: 38px; padding: 0 6px; }
.ans-row .ans-btns { gap: 5px; }
.ans-row .ans-count { gap: 0; }
.ans-row .ans-count .icon-btn { width: 32px; min-width: 32px; height: 38px; }
.ans-row .input.ans-style { height: 38px; min-height: 38px; font-size: 14px; }
/* 2026-10-26 user: the choice rows are compact — a small look picker, five buttons per line (6th wraps), − n + right after. */
.ans-row { grid-template-columns: auto auto auto; justify-content: start; gap: 10px; }
.ans-row .input.ans-style { width: 76px; height: 36px; min-height: 36px; padding: 0 22px 0 10px; font-size: 13px; background-position: right 6px center; }
.ans-row__name { width: 76px; }
.ans-row .ans-btns { display: grid; grid-template-columns: repeat(5, 36px); gap: 5px; }
.ans-rows .ans-btn, .ans-rows .ans-btn[aria-pressed="true"] { min-width: 0; width: 36px; height: 36px; padding: 0; font-size: 15px; }
.ans-row .ans-count { gap: 0; font-size: 14px; }
.ans-row .ans-count .icon-btn { width: 28px; min-width: 28px; height: 36px; font-size: 18px; }
.ans-rows { gap: 8px; }
@media (max-width: 560px) { .ans-row { grid-template-columns: auto auto; } .ans-row .ans-style { grid-column: 1 / -1; } }
.ans-row { align-items: start; }
/* 출석체크 완료 카드 (2026-10-26 user chose 시안 2-B). */
.attend-card { position: fixed; z-index: 60; left: 50%; top: 26vh; transform: translateX(-50%); width: 230px; padding: 16px 14px 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(20, 26, 36, .18); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; animation: attend-in .22s ease-out; transition: opacity .35s, transform .35s; }
.attend-card.out { opacity: 0; transform: translate(-50%, -8px); }
.attend-card__big { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--primary); }
.attend-card__t { font-size: 16px; font-weight: 800; color: var(--primary); }
.attend-card__row { display: flex; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2, var(--bg)); }
.attend-card__d { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.attend-card__d em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }
.attend-card__d i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-2, var(--line)); }
.attend-card__d i.on { background: var(--primary); border-color: var(--primary); }
@keyframes attend-in { from { opacity: 0; transform: translate(-50%, 8px) scale(.96); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .attend-card { animation: none; transition: none; } }
/* 2026-10-26 user: coin rules — ? beside the balance opens one sheet; ? beside a button opens three lines. Clean line breaks. */
.q-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.8px solid var(--muted); background: var(--surface); color: var(--muted); font: inherit; font-size: 14px; font-weight: 900; line-height: 1; cursor: pointer; flex: none; position: relative; }
.q-btn::after { content: ''; position: absolute; inset: -9px; } /* 44px touch area */
.q-btn:hover, .q-btn[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }
.q-btn--sm { width: 22px; height: 22px; font-size: 12px; }
.topbar-me { gap: 8px; }
.cr-why { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 9%, var(--surface)); color: var(--primary); font-size: 15px; font-weight: 600; line-height: 1.5; word-break: keep-all; }
.cr-why .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.cr-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.cr-table thead th { font-size: 13px; color: var(--muted); font-weight: 700; text-align: left; padding: 0 4px 6px; }
.cr-table tbody th { text-align: left; font-weight: 400; padding: 10px 4px; border-top: 1px solid var(--line); vertical-align: top; word-break: keep-all; }
.cr-table td { padding: 10px 4px; border-top: 1px solid var(--line); vertical-align: top; }
.cr-c { text-align: right; white-space: nowrap; font-weight: 800; }
.cr-k { display: block; font-weight: 700; color: var(--ink); }
.cr-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.cr-free { color: var(--good, #12a150); }
.cr-earn { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #fff8e1; color: #5b4a1e; }
.cr-earn p { margin: 0; }
.cr-earn__t { font-size: 13px; font-weight: 800; color: #8a5a00; }
.cr-earn__d { margin-top: 6px !important; font-size: 13px; font-weight: 700; word-break: keep-all; }
.cr-earn__r { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; padding-top: 3px; }
.cr-earn__r b { color: #8a5a00; white-space: nowrap; }
.cr-earn__r small { font-weight: 600; font-size: 12px; }
.cr-foot { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.q-wrap { position: relative; display: inline-flex; align-items: center; }
.q-tip { position: absolute; z-index: 30; top: calc(100% + 10px); right: -8px; width: min(320px, 82vw); display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #141a24; color: #fff; font-size: 13.5px; line-height: 1.55; box-shadow: 0 12px 30px rgba(0,0,0,.25); word-break: keep-all; text-align: left; }
.q-tip b { color: #ffd65c; }
.q-tip__more { align-self: flex-start; margin-top: 4px; color: #9cc0ff; font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cr-earn { background: #2d2614; color: #f1e2b8; } }
:root[data-theme="dark"] .cr-earn { background: #2d2614; color: #f1e2b8; }

.cr-table th, .cr-table td { background: none; }
.cr-foot { font-size: 13px; color: var(--muted); }
.cr-foot b { color: var(--ink-2); }
.cr-table tbody tr:last-child th, .cr-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.cr-table { border-collapse: collapse; }
.q-tip { right: auto; left: -12px; }
@media (max-width: 760px) { .q-tip { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); top: auto; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: auto; } }
.q-tip__why { color: #c3cddd; font-size: 12.5px; }
.q-tip__more { margin-top: 2px; }

/* 2026-10-26 user: tip above the button (the bottom was cut), light card, clearer lines; coin picture instead of the word. */
.q-tip { top: auto; bottom: calc(100% + 12px); left: -12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(20, 26, 36, .16); gap: 6px; font-size: 14px; }
.q-tip b, .q-tip__t { color: var(--ink); }
.q-tip__t { font-size: 15px; }
.q-tip__why { color: var(--muted); font-size: 13px; }
.q-tip__more { color: var(--primary); }
.q-tip .coin-n { font-weight: 800; }
@media (max-width: 760px) { .q-tip { position: fixed; top: auto; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }
.cr-why .coin-n b:empty { display: none; }
.cr-table thead .coin { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.cr-foot .coin-n { font-weight: 800; color: var(--ink-2); }
.cr-why .coin { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.cr-table thead th.cr-c { text-align: right; }

/* number first, then the coin (2026-10-26 user) */
.coin-n .coin { margin-right: 0; margin-left: .18em; }
.coin-pill .coin-n .coin, .coin-pack .coin-n .coin { margin-left: .25em; }
.cr-table { margin-top: 6px; }
.cr-table tbody tr:first-child th, .cr-table tbody tr:first-child td { border-top: 0; }
.cr-off { color: var(--muted); font-weight: 700; }
/* 2026-10-27 user: the public header (기능 소개·요금제 …) stays at the top of the page and does not follow the wheel. */
.site-header { position: static; }
/* 2026-10-27 user: help page starts higher, topic tabs sit in a small box under the intro. */
.help-page { padding-top: 32px; }
@media (min-width: 1024px) { .help-page { padding-top: 48px; } }
.help-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
/* 2026-10-27 user: teacher·parent page as two plan cards split by group size and side-by-side start steps. */
.tg2 { display: flex; flex-direction: column; gap: 48px; padding-top: 40px; }
.tg2-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.tg2-head h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.25; letter-spacing: -0.03em; font-weight: 850; text-wrap: balance; }
.tg2-head p { font-size: 17px; color: var(--muted); text-wrap: balance; }
.tg2-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tg2-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.tg2-who { align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--primary-ink); background: var(--primary-soft); padding: 4px 12px; border-radius: 999px; }
.tg2-card h2 { font-size: 26px; letter-spacing: -0.02em; font-weight: 850; }
.tg2-price { display: flex; flex-direction: column; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.tg2-price b { font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; }
/* 2026-10-27 user: '월' in front and '부터' after, both a little smaller on the same baseline. */
.tg2-price small { font-size: 20px; font-weight: 700; color: var(--ink-2); letter-spacing: 0; }
.tg2-price > span { font-size: 15px; color: var(--muted); }
.tg2-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.tg2-list li { display: flex; gap: 10px; align-items: flex-start; }
.tg2-ck { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--primary); stroke-width: 2.6; }
.tg2-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.tg2-pay { font-size: 14px; color: var(--muted); }
.tg2-sec { display: flex; flex-direction: column; gap: 16px; }
.tg2-sec > h2 { font-size: clamp(24px, 2.6vw, 28px); font-weight: 850; letter-spacing: -0.02em; text-align: center; }
.tg2-flow { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.tg2-flow h3 { font-size: 18px; }
.tg2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* 2026-10-27 user: the round number sits in front of the step title, like the home worries; the text below lines up with the title. */
.tg2-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; align-items: center; align-content: start; padding: 16px; border-radius: 16px; background: var(--bg); }
.tg2-step strong { font-size: 16px; }
.tg2-step__d { grid-column: 2; font-size: 15px; color: var(--muted); line-height: 1.55; }
.tg2-no { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 720px) { .tg2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tg2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tg2 { padding-top: 48px; gap: 56px; } .tg2-cards { gap: 24px; } .tg2-card { padding: 32px; } .tg2-flow { padding: 28px 32px; } .tg2-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.tg2-tiers { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tg2-tiers li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; text-align: center; padding: 6px 4px; border-radius: 10px; background: var(--bg); }
.tg2-tiers li span { font-size: 13px; color: var(--muted); }
.tg2-tiers li b { font-size: 15px; }
.tg2-tiers li em { font-style: normal; font-size: 12px; line-height: 1.4; color: var(--muted); }
/* 2026-10-27 user: the group quote box sits right under the plan cards. */
.price-body > .quote-row { margin-top: -52px; }
/* 2026-10-27 user: feature page rows all read the same way (text left, picture right) and are compact enough to take in at a glance. */
.fx2 { display: flex; flex-direction: column; gap: 32px; padding-top: 8px; }
.fx2-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.fx2-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fx2-label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--primary); }
.fx2-no { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.fx2-text h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; letter-spacing: -0.03em; text-wrap: balance; }
.fx2-text p { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.fx2-art { min-width: 0; padding: 16px; border-radius: 20px; background: var(--bg); }
.fx2-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; }
.fx2-pair figure { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fx2-pair figcaption { align-self: flex-start; }
.fx2-photo { width: 100%; border-radius: 12px; display: block; }
.fx2-arrow { justify-self: center; color: var(--muted); transform: rotate(90deg); }
.fx2-arrow svg { width: 22px; height: 22px; }
.fx2-doc { padding: 16px; border-radius: 12px; font-size: 15px; line-height: 1.6; }
.fx2-doc p { margin: 0 0 10px; }
.fx2-fig { display: block; width: 72%; max-width: 260px; margin: 4px auto 0; }
.fx2-courses { display: flex; flex-wrap: wrap; gap: 8px; }
.fx2-courses li { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--primary-soft); }
.fx2-courses strong { font-size: 14px; color: var(--primary-ink); }
.fx2-courses span { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fx2-art .chart { background: transparent; border: 0; padding: 0; max-width: 560px; margin-inline: auto; }
.fx2-art > .solution { border: 0; padding: 0; background: transparent; }
@media (min-width: 900px) {
  .fx2-row { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; padding: 28px 32px; }
  .fx2-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .fx2-arrow { transform: none; }
}
/* Compact pictures so the three rows fit together: the chart keeps its title, line and source; the solution shows the
   answer, the first step and the next one to open. */
.fx2-art .chart > p.small, .fx2-art .chart__src { display: none; }
.fx2-art .chart__box svg { max-height: 220px; }
.fx2-art .solution .sol-steps > li:nth-child(n+3), .fx2-art .solution .sol-foot { display: none; }
.fx2-art .solution .sol-ans { padding-block: 10px; }
@media (min-width: 900px) { .fx2 { gap: 20px; } .fx2-row { padding: 22px 28px; } }
/* 2026-10-27 user: 기능 소개 and 요금제 open exactly like 클래스·패밀리: short label, title and lead in the same place and size. */
.price-head { padding-top: 40px; gap: 12px; }
.price-head__title { font-size: clamp(28px, 4vw, 40px); line-height: 1.25; letter-spacing: -0.03em; font-weight: 850; }
@media (min-width: 1024px) { .price-head { padding-top: 48px; } }
/* 2026-10-27 user: rows were too wide to take in; a narrower column, text starting at the top of each row, a shorter chart. */
.fx2 { max-width: calc(980px + 2 * var(--gutter)); }
@media (min-width: 900px) {
  .fx2-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 28px; }
}
.fx2-art .chart { max-width: 400px; }
.fx2-art .chart__box svg { max-height: 190px; }
.fx2 { max-width: calc(1040px + 2 * var(--gutter)); }
@media (min-width: 900px) { .fx2-row { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); } }
.fx2-doc { font-size: 14px; padding: 14px; }
.fx2-fig { width: 64%; }
/* ---------- 2026-10-27 user: one heading shape everywhere (pill, title, one grey line) ---------- */
.sec-head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sec-head--left { align-items: flex-start; text-align: left; }
.sec-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.sec-head__t { font-size: clamp(24px, 3vw, 34px); line-height: 1.28; letter-spacing: -0.03em; font-weight: 850; text-wrap: balance; }
h1.sec-head__t { font-size: clamp(28px, 4vw, 40px); }
.sec-head__lead { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 640px; text-wrap: balance; }
.sec-head__t .coin { width: .9em; height: .9em; vertical-align: -0.12em; margin-right: .06em; }
.pains-sec .sec-head { margin-bottom: 36px; }

/* ---------- worries as speech bubbles ---------- */
.bubbles { display: flex; flex-direction: column; gap: 14px; max-width: 680px; margin-inline: auto; }
.bubble { display: flex; align-items: center; gap: 14px; padding: 16px 22px 16px 16px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(20, 40, 80, .06); }
.bubble__face { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; }
.bubble p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--muted); }
.bubble p > span { display: block; }
.bubble b { color: var(--ink); font-weight: 800; }
@media (min-width: 720px) {
  .bubble { width: fit-content; max-width: 100%; }
  .bubble:nth-child(2) { align-self: flex-end; }
  .bubble p { font-size: 18px; }
}

/* ---------- animations that play once when a picture comes into view (O.reveal) ---------- */
@keyframes fx-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fx-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-scan { from { top: -35%; } to { top: 100%; } }
@keyframes fx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.reveal:not(.is-in) .bubble,
.reveal:not(.is-in) .fx2-arrow, .reveal:not(.is-in) .fx2-doc .q__no, .reveal:not(.is-in) .fx2-doc p, .reveal:not(.is-in) .fx2-fig,
.reveal:not(.is-in) .chart__dot, .reveal:not(.is-in) .chart__val, .reveal:not(.is-in) .fx2-courses li,
.reveal:not(.is-in) .sol-ans, .reveal:not(.is-in) .sol-steps > li { opacity: 0; }
.reveal:not(.is-in) .chart__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* worries: one bubble after another */
.bubbles.is-in .bubble { animation: fx-up .5s ease calc(var(--i) * .25s) both; }
/* 1. digital conversion: the AI scans the photo, then the clean problem appears line by line */
.fx2-scan { position: relative; overflow: hidden; border-radius: 12px; }
.fx2-scan::after { content: ''; position: absolute; left: 0; right: 0; top: -35%; height: 35%; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primary) 32%, transparent), transparent); }
.fx2-row--1.is-in .fx2-scan::after { animation: fx-scan 1.3s ease-in-out .2s both; }
.fx2-row--1.is-in .fx2-arrow { animation: fx-in .4s ease 1.4s both; }
.fx2-row--1.is-in .fx2-doc .q__no { animation: fx-up .45s ease 1.6s both; }
.fx2-row--1.is-in .fx2-doc p { animation: fx-up .5s ease 1.75s both; }
.fx2-row--1.is-in .fx2-fig { animation: fx-up .5s ease 2.1s both; }
/* 2. review schedule: the forgetting curve draws itself, its points and the review days follow */
.fx2-row--2.is-in .chart__line { stroke-dasharray: 1; animation: fx-draw 1.8s ease .2s both; }
.fx2-row--2.is-in .chart__dot, .fx2-row--2.is-in .chart__val { animation: fx-in .35s ease calc(.35s + var(--i) * .24s) both; }
.fx2-row--2.is-in .fx2-courses li { animation: fx-up .45s ease 2.1s both; }
.fx2-row--2.is-in .fx2-courses li + li { animation-delay: 2.3s; }
/* 3. AI solution: the answer first, then the steps open one by one */
.fx2-row--3.is-in .sol-ans { animation: fx-up .5s ease .2s both; }
.fx2-row--3.is-in .sol-steps > li:nth-child(1) { animation: fx-up .5s ease .7s both; }
.fx2-row--3.is-in .sol-steps > li:nth-child(2) { animation: fx-up .5s ease 1.1s both; }
/* finished at once: on redraws and for reduced motion */
.reveal.is-done *, .reveal.is-done *::after, .reveal.is-done { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .reveal *, .reveal *::after, .reveal { animation: none !important; } }
/* 2026-10-27 user: the pill was too small. */
.sec-pill { padding: 8px 18px; font-size: 16px; }
@media (min-width: 1024px) { .sec-pill { padding: 10px 22px; font-size: 18px; } }
/* 2026-10-27 user: the under-14 note opens on hover too, and below the ? so it never covers the title. */
.q-wrap--hover { vertical-align: -0.35em; margin-left: 4px; }
.q-wrap--hover:hover .q-tip[hidden], .q-wrap--hover:focus-within .q-tip[hidden] { display: flex !important; }
.q-tip--down { top: calc(100% + 10px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(380px, 86vw); }
@media (max-width: 760px) { .q-tip--down { transform: none; } }
/* 2026-10-27 user: the pill a little smaller, titles a little looser. */
.sec-pill { padding: 7px 16px; font-size: 15px; }
@media (min-width: 1024px) { .sec-pill { padding: 8px 18px; font-size: 16px; } }
.sec-head__t { letter-spacing: -0.01em; }
/* one sentence per line in the under-14 note (wide screens) */
@media (min-width: 761px) { .q-tip--down { width: max-content; max-width: min(600px, 90vw); } .q-tip--down > span { white-space: nowrap; } }
/* the ? sits on the middle of the line, right after the sentence */
.q-wrap--hover { vertical-align: middle; margin-left: 2px; position: relative; top: -2px; }
.q-wrap--hover .q-btn { width: 20px; height: 20px; font-size: 12px; border-width: 1.6px; }
.q-wrap--hover .q-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.q-wrap--hover .q-btn svg { display: block; }
/* 2026-10-27 user: key words in the grey line are bold and dark. */
.sec-head__lead b { color: var(--ink); font-weight: 800; }
/* 2026-10-27 user: 고객센터 is only four letters; spaced out so it does not look smaller than its pill. */
.help-page .sec-head__t { letter-spacing: 0.08em; margin-right: -0.08em; }
/* ---------- 2026-10-27 user: picture boxes centre their content; row 1 as one screen where the photo turns into the digital problem ---------- */
.fx2-art { display: flex; align-items: center; justify-content: center; align-self: stretch; }
.fx2-art > * { width: 100%; }
.fx2-art .chart { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fx2-art .chart__title { text-align: center; }
.fx2-art .chart__box { width: 100%; }
.fx2-device { max-width: 520px; margin-inline: auto; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(20, 40, 80, .12); overflow: hidden; }
.fx2-device__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.fx2-device__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.fx2-device__tag { position: relative; margin-left: auto; height: 22px; min-width: 84px; text-align: right; font-size: 13px; }
.fx2-device__tag b { position: absolute; right: 0; top: 0; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.fx2-device__tag .t1 { background: var(--surface-2); color: var(--ink-2); }
.fx2-device__tag .t2 { background: var(--primary-soft); color: var(--primary-ink); opacity: 0; }
.fx2-device__screen { position: relative; aspect-ratio: 1.42; overflow: hidden; background: #fff; }
.fx2-shot, .fx2-clean { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx2-shot { object-fit: cover; }
.fx2-clean { display: flex; align-items: center; justify-content: center; padding: 14px 18px; opacity: 0; background: #fff; }
.fx2-clean .fx2-doc { border: 0; box-shadow: none; padding: 0; background: transparent; font-size: 15px; color: #1c2430; }
.fx2-clean .fx2-doc .q__no { color: var(--primary); }
.fx2-beam { position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primary) 30%, transparent), transparent); }
@keyframes fx-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fx-beam { from { top: -30%; } to { top: 100%; } }
.fx2-row--1.is-in .fx2-beam { animation: fx-beam 1.2s ease-in-out .2s both; }
.fx2-row--1.is-in .fx2-shot { animation: fx-out .45s ease 1.3s both; }
.fx2-row--1.is-in .fx2-clean { animation: fx-in .45s ease 1.3s both; }
.fx2-row--1.is-in .fx2-device__tag .t1 { animation: fx-out .3s ease 1.3s both; }
.fx2-row--1.is-in .fx2-device__tag .t2 { animation: fx-in .3s ease 1.3s both; }
/* finished state (reduced motion, redraws): show the digital problem */
.fx2-row--1.is-done .fx2-shot, .fx2-row--1.is-done .fx2-device__tag .t1 { opacity: 0; }
.fx2-row--1.is-done .fx2-clean, .fx2-row--1.is-done .fx2-device__tag .t2 { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fx2-row--1 .fx2-shot, .fx2-row--1 .fx2-device__tag .t1 { opacity: 0; }
  .fx2-row--1 .fx2-clean, .fx2-row--1 .fx2-device__tag .t2 { opacity: 1; }
}
.fx2-clean .fx2-doc { font-size: 14px; }
.fx2-clean .fx2-fig { width: 44%; max-width: 200px; margin-top: 2px; }
/* ---------- 2026-10-27 user: one frame for the three pictures; 3 = a problem, a pressed AI 풀이 button, steps one by one ---------- */
.fx2-device__body { padding: 16px 18px; }
.fx2-device__body .chart { margin: 0; }
.fx2-device__tag .t2.on { opacity: 1; }
.fx2-ai { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .fx2-ai { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }
.fx2-ai__q { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.fx2-ai__q .digital { border: 0; box-shadow: none; padding: 0; background: transparent; font-size: 15px; }
.fx2-ai__btn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 800; }
.fx2-ai__btn svg { width: 16px; height: 16px; }
.fx2-ai__tap { position: absolute; right: 6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); opacity: 0; }
.fx2-ai__sol { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg); }
.fx2-ai__ans { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--primary-soft); border-left: 3px solid var(--primary); }
.fx2-ai__ans span { font-size: 13px; font-weight: 800; color: var(--primary-ink); }
.fx2-ai__ans b { font-size: 18px; }
.fx2-ai__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fx2-ai__steps li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.fx2-ai__steps li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx2-ai__steps b { font-size: 13.5px; }
.fx2-ai__steps em { font-style: normal; font-size: 13.5px; color: var(--ink-2); }
.fx2-ai__no { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
@keyframes fx-press { 0%, 100% { transform: scale(1); } 45% { transform: scale(.92); filter: brightness(.9); } }
@keyframes fx-tap { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
.reveal:not(.is-in) .fx2-ai__sol, .reveal:not(.is-in) .fx2-ai__ans, .reveal:not(.is-in) .fx2-ai__steps li { opacity: 0; }
.fx2-row--3.is-in .fx2-ai__btn { animation: fx-press .45s ease .5s both; }
.fx2-row--3.is-in .fx2-ai__tap { animation: fx-tap .7s ease .45s both; }
.fx2-row--3.is-in .fx2-ai__sol { animation: fx-in .35s ease 1s both; }
.fx2-row--3.is-in .fx2-ai__ans { animation: fx-up .45s ease 1.2s both; }
.fx2-row--3.is-in .fx2-ai__steps li { animation: fx-up .45s ease calc(1.6s + var(--i) * .4s) both; }
.fx2-art .chart__box svg { display: block; margin-inline: auto; }
/* AI demo: problem and button on one line, the detailed solution under it */
.fx2-ai { grid-template-columns: minmax(0, 1fr) !important; }
.fx2-ai__q { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.fx2-ai__steps em { line-height: 1.6; }
.fx2-ai__warn { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); border-left: 3px solid var(--warn); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.fx2-ai__warn b { color: var(--ink); }
.reveal:not(.is-in) .fx2-ai__warn { opacity: 0; }
.fx2-row--3.is-in .fx2-ai__steps li { animation: fx-up .45s ease calc(1.6s + var(--i) * .5s) both; }
.fx2-row--3.is-in .fx2-ai__warn { animation: fx-up .45s ease calc(1.6s + var(--i) * .5s) both; }
/* ---------- 2026-10-27 user: phones get the same introduction, just stacked (sign-up and class payment work as on the web) ---------- */
.hero__shot { display: none; }
.fx2-ai__more { display: none; }
@media (max-width: 767px) {
  .hero__shot { display: block; width: 100%; height: 230px; object-fit: cover; object-position: 78% center; border-radius: 20px; margin-top: 4px; box-shadow: 0 12px 30px rgba(20, 40, 80, .12); }
  .fx2-ai__steps li:nth-child(n+3) { display: none; }
  .fx2-ai__more { display: block; text-align: center; font-size: 13px; font-weight: 700; color: var(--primary-ink); }
}
/* 2026-10-27: static header still anchors its phone menu (position: relative, not sticky), or the menu opened off screen. */
.site-header { position: relative; z-index: 20; }
/* ---------- 2026-10-27 user: full-screen phone menu (like other services): logo, start button and close on top, a login row, big menu rows ---------- */
.nav-chev { display: none; }
@media (max-width: 860px) {
  html.menu-open, html.menu-open body { overflow: hidden; }
  .site-header[data-open="true"] { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--surface); }
  .site-header[data-open="true"] .site-header__inner { flex-wrap: wrap; align-items: center; row-gap: 0; }
  .site-header[data-open="true"] .site-menu { position: static; box-shadow: none; border: 0; flex-basis: 100%; display: flex; flex-direction: column; gap: 0; padding: 8px 0 32px; background: transparent; }
  .site-header[data-open="true"] .site-actions { order: -1; display: flex; flex-direction: row; justify-content: space-between; gap: 10px; padding: 16px 0 20px; border-bottom: 1px solid var(--line); }
  .site-header[data-open="true"] .site-actions .btn { flex: 1; min-height: 52px; font-size: 16px; }
  .site-header[data-open="true"] .site-nav { flex-direction: column; gap: 0; padding-top: 8px; }
  .site-header[data-open="true"] .site-nav a { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
  .site-header[data-open="true"] .site-nav a:hover { background: transparent; }
  .site-header[data-open="true"] .nav-chev { display: block; width: 20px; height: 20px; color: var(--muted); }
  .site-header[data-open="true"] .site-nav a[aria-current="page"] .nav-chev { color: var(--primary); }
}
/* ---------- 2026-10-27 user: phone layout after the orzo.kr review ---------- */
/* each feature has its own soft pill colour (blue, green, violet) */
.fx2-label { padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); align-self: flex-start; }
.fx2-label .fx2-no { background: var(--primary); color: var(--on-primary); }
.fx2-row--2 .fx2-label { background: var(--good-soft); color: var(--good); }
.fx2-row--2 .fx2-label .fx2-no { background: var(--good); color: var(--surface); }
.fx2-row--3 .fx2-label { background: var(--violet-soft); color: var(--violet); }
.fx2-row--3 .fx2-label .fx2-no { background: var(--violet); color: var(--surface); }
.hero__facts { display: none; }
@media (max-width: 767px) {
  /* no boxes, everything centred: pill, title, two grey lines, then the screen */
  .fx2 { gap: 64px; }
  .fx2-row { padding: 0; border: 0; background: transparent; box-shadow: none; gap: 24px; }
  .fx2-text { align-items: center; text-align: center; }
  .fx2-label { align-self: center; }
  .fx2-courses { justify-content: center; }
  .fx2-art { padding: 0; background: transparent; }
  .fx2-device { box-shadow: 0 24px 50px rgba(37, 99, 235, .14), 0 4px 14px rgba(20, 40, 80, .06); }
  /* first screen: a bigger app picture with a soft glow, then three short facts */
  .hero__shot { height: 280px; box-shadow: 0 30px 60px rgba(37, 99, 235, .18); }
  .hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
  .hero__facts li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-2); line-height: 1.35; }
  .hero__facts .ic { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); }
  .hero__facts li:nth-child(2) .ic { background: var(--good-soft); color: var(--good); }
  .hero__facts li:nth-child(3) .ic { background: var(--violet-soft); color: var(--violet); }
  .hero__facts .ic svg { width: 22px; height: 22px; }
}
@media (max-width: 767px) {
  .hero__inner { align-items: center; text-align: center; padding-block: 40px 40px; }
  .hero__inner .row { justify-content: center; }
  .hero__hand { margin-inline: auto; }
}
@media (max-width: 767px) { .hero__facts { width: 100%; } }
/* 2026-10-27 user: bold phrases in the worry bubbles never break in the middle (phones) */
.bubble b { white-space: nowrap; }
/* 2026-10-27 user: the handwritten line is small and tilted, tucked at the title's top-left corner like a margin note */
.hero__hand { width: min(124px, 34vw); margin: 0 0 -20px; transform: rotate(-14deg); position: relative; z-index: 1; }
@media (max-width: 767px) { .hero__hand { margin-inline: 0; translate: max(-104px, calc(88px - 50vw)) 0; } }
@media (min-width: 768px) { .hero__hand { align-self: flex-start; translate: -34px 0; } }
/* 2026-10-27 user: keep the source under the forgetting curve */
.fx2-art .chart__src { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); text-align: center; }
/* 2026-10-27 user: the device note sits small and grey on the same line as 오캡 앱 */
.h3-sub { margin-left: 6px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; letter-spacing: 0; }
.fx2-art .chart__src { margin-top: -6px; }
/* 2026-10-27 user: the phone icon sits beside '앱 받기' on the first line; the grey note goes under the words */
.btn-app { display: inline-grid; grid-template-columns: auto auto; column-gap: 10px; align-items: start; justify-content: start; text-align: left; padding: 12px 18px; }
.btn-app > svg { margin-top: 2px; }
.btn-app > span { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
/* 2026-10-27 user: stacked plan cards (phones) don't need rows held open for alignment, so no empty gaps */
@media (max-width: 599px) { .plan__who, .plan__bill { min-height: 0; } }
/* 2026-10-27 user: plan name with who it is for in two short grey lines right under it; the unit sits in front of the price */
.plan__head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.plan__head .plan__name { margin: 0; white-space: nowrap; line-height: 1.3; }
.plan__head .plan__who { margin: 0; min-height: 0; text-align: left; font-size: 14px; line-height: 1.5; }
.plan__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__price small { display: inline; margin-top: 0; }
@media (min-width: 1280px) { .plan__head .plan__who { font-size: 14px; } }
/* 2026-10-27 user: the 초등학생 4주 / 중학생 이상 8주 pills come in once and then stay; only the curve replays */
.fx2-row.is-played .fx2-courses li { animation: none; opacity: 1; transform: none; }
/* the unit and the price stay on one line on the narrow desktop cards */
.plan__price { flex-wrap: nowrap; white-space: nowrap; }
@media (min-width: 1024px) { .plan__price { font-size: 32px; } }
/* four narrow cards side by side: the two lines sit under the name so the long manager line stays on one line */
@media (min-width: 1100px) { .plan__head .plan__who { font-size: 13px; white-space: nowrap; } }
/* 2026-10-27 user: the photo-to-digital swap was too fast — the photo stays a moment, the scan is slower, the swap fades in gently */
.fx2-row--1.is-in .fx2-beam { animation: fx-beam 2.4s ease-in-out .8s both; }
.fx2-row--1.is-in .fx2-shot { animation: fx-out .8s ease 3.2s both; }
.fx2-row--1.is-in .fx2-clean { animation: fx-in .8s ease 3.2s both; }
.fx2-row--1.is-in .fx2-device__tag .t1 { animation: fx-out .5s ease 3.2s both; }
.fx2-row--1.is-in .fx2-device__tag .t2 { animation: fx-in .5s ease 3.2s both; }
/* 2026-10-27 user: the monthly / 6-month choice sits inside each paid card, above its own options */
.plan__opt { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; }
.plan__cycle .chip { min-width: 0; padding-inline: 14px; }
/* 2026-10-27 user: the card choices (billing cycle, number of people) are one sliding track instead of separate round chips */
.plan__opt { gap: 8px; width: 100%; }
.plan .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; gap: 0; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.plan .seg .chip { min-height: 36px; min-width: 0; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; justify-content: center; box-shadow: none; }
.plan .seg .chip[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.plan--pick .seg { background: var(--primary-soft); }
/* 2026-10-27 user: a small tag beside the plan name says who it is for */
.plan__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan__tag { font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.plan--pick .plan__tag { background: var(--surface); color: var(--primary-ink); }
@media (min-width: 1100px) { .plan__head { min-height: calc(1.3em + 26px); } }
/* 2026-10-27 user: cards keep one height but fill from the top — no empty rows held open to line the buttons up */
@media (min-width: 600px) {
  .plan { display: flex; grid-row: auto; }
  .plan__opt:empty, .plan__cta:empty { display: none; }
  .plan__who, .plan__bill { min-height: 0; }
}
/* 2026-10-27 user: the * hangs in the margin so the note's words start right under the plan name */
.plan__star { display: inline-block; width: .7em; margin-left: -.7em; }
#seat-total { display: flex; flex-direction: column; gap: 6px; }
/* four cards side by side: the big totals (class can reach six digits) stay inside the card */
@media (min-width: 1100px) { .plan__price { font-size: 28px; } }
/* 2026-10-27 user: schools can also pay by quote — a quiet link under the class button */
.plan__cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.plan__link { font-size: 14px; font-weight: 700; color: var(--primary-ink); }
.plan .stepper output.seat-input { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
/* 2026-10-27 user: family now goes to 10 — the 5~10 row spans the width under the four tiers */
.tg2-tiers li:last-child { grid-column: 1 / -1; flex-direction: row; justify-content: center; align-items: baseline; gap: 8px; }
/* 2026-10-28 user: the 패밀리·클래스 page uses the pricing page's clean cards, two side by side */
.plans.tg3-plans { grid-template-columns: 1fr; max-width: 880px; margin-inline: auto; }
@media (min-width: 700px) { .plans.tg3-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tg3-plans .plan__pay { font-size: 13px; color: var(--muted); }
.tg3-plans .plan__pay a { color: var(--primary-ink); font-weight: 700; }
.tg3-plans .plan__price { font-size: 32px; }
/* the start steps: two plain numbered lists, no boxes */
.tg3-steps { display: grid; gap: 28px; max-width: 880px; margin-inline: auto; }
@media (min-width: 700px) { .tg3-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
.tg3-flow h3 { margin: 0 0 14px; font-size: 18px; }
.tg3-flow ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.tg3-flow li { display: flex; gap: 12px; align-items: flex-start; }
.tg3-flow li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tg3-flow strong { font-size: 15px; }
.tg3-flow li span:not(.tg2-no) { font-size: 14px; color: var(--muted); line-height: 1.5; }
.tg3-flow .tg2-no { flex: none; margin-top: 1px; }
.tg2 .tg-school { max-width: 880px; margin-inline: auto; }
/* 2026-10-28 user: the school list lines stay on one line on phones */
@media (max-width: 599px) { .tg-school .check-list li { font-size: 14px; word-break: keep-all; } }
/* 2026-10-28 user: plan cards get a quiet blue edge — a thin gradient line (blue to soft periwinkle) and a faint blue glow */
.plan {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgba(37, 99, 235, .42), rgba(147, 197, 253, .28) 48%, rgba(129, 140, 248, .40)) border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -18px rgba(37, 99, 235, .30);
}
/* 2026-10-28 user: the blue edge was too faint — a little thicker and clearer, still a soft gradient */
.plan {
  border-width: 1.5px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgba(37, 99, 235, .80), rgba(96, 165, 250, .55) 48%, rgba(99, 102, 241, .75)) border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 34px -16px rgba(37, 99, 235, .38);
}
/* 2026-10-28 user: on phones and stacked cards the quote box sat under the last plan card — the pull-up is for the wide row only */
@media (max-width: 1099px) { .price-body > .quote-row { margin-top: -28px; } }
/* 2026-10-28 user: on phones the age ? opened its note off screen (a moving ancestor pins 'fixed' to it) — open it right under the ? instead */
@media (max-width: 760px) {
  .q-wrap--hover .q-tip { position: absolute; top: calc(100% + 10px); bottom: auto; left: auto; right: 0; width: min(300px, calc(100vw - 32px)); text-align: left; }
}
/* 2026-10-28 user (시안 C): the age note opens on its own line under the lead — small, pale grey box, grey text, an i mark,
   a × to close — and pushes the cards down only a little instead of covering them */
.q-wrap--hover { display: contents; }
.q-wrap--hover .q-tip {
  position: relative; inset: auto; transform: none; display: flex; flex-direction: column; gap: 4px;
  width: min(268px, calc(100vw - 32px)); max-width: none; margin: 12px auto 0; padding: 11px 30px 11px 34px;
  background: #f3f5f9; border: 1px solid #e6eaf1; border-radius: 12px; box-shadow: none;
  color: #8a94a6; font-size: 12.5px; line-height: 1.55; font-weight: 500; letter-spacing: -.01em; text-align: left;
}
.q-wrap--hover .q-tip[hidden] { display: none !important; }
.q-wrap--hover .q-tip > span { white-space: normal; }
.q-wrap--hover .q-tip::before { content: ""; position: absolute; top: -6px; left: 50%; margin-left: -5px; width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; background: #f3f5f9; border: 1px solid #e6eaf1; border-right: 0; border-bottom: 0; }
.q-wrap--hover .q-tip::after { content: "i"; position: absolute; left: 12px; top: 12px; width: 15px; height: 15px; border-radius: 50%; background: #dfe6f3; color: #5b7bd5; font: italic 700 10px/15px Pretendard, system-ui, sans-serif; text-align: center; }
.q-tip__x { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #a3acba; font-size: 17px; line-height: 1; cursor: pointer; }
.q-tip__x:hover { background: #e6eaf1; color: #6b7587; }
/* while the note is open the cards come up closer, so they move down only a little */
.tg2 > .sec-head:has(.q-tip:not([hidden])) + .tg3-plans { margin-top: -26px; }
/* the note opens and closes only by tapping now: focus or hover left on the × must not keep it open */
.q-wrap--hover:hover .q-tip[hidden], .q-wrap--hover:focus-within .q-tip[hidden] { display: none !important; }
/* 2026-10-28 user: the coin section reads at a glance — a smaller lead and one card with a row per use (name left, coins right) */
.price-sec[aria-labelledby="coin-title"] .sec-head__lead { font-size: 15px; max-width: 520px; }
.coin-rows { max-width: 560px; margin-inline: auto; width: 100%; padding: 6px 20px; border-radius: var(--card-r); background: var(--surface); border: 1px solid var(--line); }
.coin-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 15px; color: var(--ink-2); }
.coin-rows li + li { border-top: 1px solid var(--line); }
.coin-rows b { font-size: 17px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.price-sec[aria-labelledby="coin-title"] .coin-packs { max-width: 560px; margin-inline: auto; width: 100%; }
/* the coin packs sit in one card of rows too, the same width as the list above */
.price-sec[aria-labelledby="coin-title"] .coin-packs { flex-direction: column; align-items: stretch; gap: 10px; }
.price-sec[aria-labelledby="coin-title"] .coin-packs__list { flex-direction: column; gap: 0; padding: 4px 20px; border-radius: var(--card-r); background: var(--surface); border: 1px solid var(--line); }
.price-sec[aria-labelledby="coin-title"] .coin-pack { border: 0; border-radius: 0; background: none; padding: 10px 0; gap: 12px; font-size: 15px; }
.price-sec[aria-labelledby="coin-title"] .coin-pack + .coin-pack { border-top: 1px solid var(--line); }
.price-sec[aria-labelledby="coin-title"] .coin-pack__n { font-size: 16px; font-weight: 700; min-width: 64px; }
.price-sec[aria-labelledby="coin-title"] .coin-pack strong { margin-right: auto; font-size: 16px; }
/* 2026-10-28 user: on the wide web page the handwritten line is bigger again (the small size is for phones only) */
@media (min-width: 768px) { .hero__hand { width: 210px; margin-bottom: -8px; translate: -20px 0; } }
/* 2026-10-28 user: the divider sits halfway between the payment note above and the first feature below, on every screen */
.plan .plan__feats { padding-top: 18px; }
/* 2026-10-28 user: on the wide page the start steps read as two cards, each a left-to-right timeline (phones keep the list) */
@media (min-width: 900px) {
  .tg3-steps { grid-template-columns: 1fr; gap: 16px; max-width: 980px; }
  .tg3-flow { padding: 24px 28px 26px; border-radius: var(--card-r); background: var(--surface); border: 1px solid var(--line); }
  .tg3-flow h3 { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 17px; }
  .tg3-flow h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
  .tg3-flow:nth-child(2) h3::before { background: var(--violet); }
  .tg3-flow ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .tg3-flow li { position: relative; flex-direction: column; align-items: flex-start; gap: 12px; padding-right: 18px; }
  .tg3-flow li::after { content: ""; position: absolute; top: 14px; left: 40px; right: 10px; height: 2px; border-radius: 2px; background: var(--primary-soft); }
  .tg3-flow:nth-child(2) li::after { background: var(--violet-soft); }
  .tg3-flow li:last-child::after { display: none; }
  .tg3-flow .tg2-no { width: 30px; height: 30px; font-size: 14px; margin-top: 0; background: var(--primary); color: #fff; }
  .tg3-flow:nth-child(2) .tg2-no { background: var(--violet); }
  .tg3-flow strong { font-size: 16px; }
  .tg3-flow li span:not(.tg2-no) { font-size: 14px; line-height: 1.55; }
}
/* 2026-10-28 user: web and phone get their own design — what changes on the web stays on the web unless the phone is named */
.mob-only { display: none !important; }
@media (max-width: 767px) { .web-only { display: none !important; } .mob-only { display: revert !important; } }
/* 2026-10-28 user (web): a small emphasis dot over each letter of 오답 and 정답 in the hero lead */
.dots { font-style: normal; }
@media (min-width: 768px) {
  .dots { -webkit-text-emphasis: filled dot var(--primary); text-emphasis: filled dot var(--primary); -webkit-text-emphasis-position: over right; text-emphasis-position: over right; }
}
/* the emphasis dots drawn by hand so they are big enough to see: one round dot centred over each letter */
.dots i { font-style: normal; }
@media (min-width: 768px) {
  .dots { -webkit-text-emphasis: none; text-emphasis: none; }
  .dots i { position: relative; display: inline-block; }
  .dots i::before { content: ""; position: absolute; left: 50%; top: -6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--primary); }
}
@media (min-width: 768px) {
  .dots i { display: inline; }
  .dots i::before { top: -3px; width: 5px; height: 5px; }
  .plan__feats li { white-space: nowrap; }
}
@media (min-width: 768px) {
  .hero__lead .dots, .hero__lead .dots i { display: inline !important; }
  /* 2026-10-28 user (web): the quote button sits halfway between the end of the text and the right edge of the box */
  .quote-row { justify-content: flex-start; }
  .quote-row > .btn { margin-inline: auto; }
}
@media (min-width: 768px) { .hero__lead .dots i::before { top: -8px; } }
/* 2026-10-28 user (web): the explaining lines under each feature title are centred */
@media (min-width: 768px) { .fx2-text > p { text-align: center; align-self: stretch; } }
/* 2026-10-28 user (web): no dots — 오답 and 정답 are emphasised by weight only, like Free and Pro in the pricing lead */
@media (min-width: 768px) {
  .hero__lead .dots i::before { content: none; }
  .hero__lead .dots { font-weight: 800; color: var(--ink); }
}
/* 2026-10-28 user (web): the coin uses fill the row — four tiles, each with an icon, the coins large and the use under it */
.coin-ic { display: none; }
@media (min-width: 768px) {
  .coin-rows { max-width: 1040px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; border: 0; background: none; }
  .coin-rows li, .coin-rows li + li { flex-direction: column; justify-content: flex-start; gap: 10px; padding: 26px 18px 24px; border: 1px solid var(--line); border-radius: var(--card-r); background: var(--surface); text-align: center; font-size: 14px; }
  .coin-rows li > span { order: 3; color: var(--muted); }
  .coin-rows b { order: 2; font-size: 30px; letter-spacing: -0.02em; }
  .coin-ic { order: 1; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); font-style: normal; }
  .coin-rows li:nth-child(2) .coin-ic { background: var(--violet-soft); color: var(--violet); }
  .coin-rows li:nth-child(3) .coin-ic { background: var(--good-soft); color: var(--good); }
  .coin-rows li:nth-child(4) .coin-ic { background: var(--surface-2); color: var(--muted); }
  .coin-ic svg { width: 22px; height: 22px; }
}
/* 2026-10-28 user (web): the age ? lives on the family card next to its tag; the lead keeps it only on phones */
.plan__title .q-wrap--hover .q-tip { flex-basis: 100%; width: 100%; margin: 10px 0 0; }
.plan__title .q-wrap--hover .q-tip::before { content: none; }
@media (max-width: 767px) { .plan__title .q-wrap--hover { display: none; } }
@media (min-width: 768px) {
  .tg2 > .sec-head .q-wrap--hover { display: none; }
  .tg3-plans .plan__head { min-height: 0; }
}
/* 2026-10-28 user (web): the closing band is compact and leads to installing the Android app */
.app-band { background: linear-gradient(120deg, var(--primary) 0%, #4f7cf0 60%, #6d6af0 100%); color: var(--on-primary); }
.app-band__inner { display: flex; align-items: center; gap: 24px; padding-block: 36px; max-width: 1040px; }
.app-band__ic { flex: none; width: 60px; height: 60px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); }
.app-band__ic svg { width: 30px; height: 30px; }
.app-band__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.app-band__text h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--on-primary); }
.app-band__text p { margin: 0; font-size: 15px; opacity: .88; }
.app-band__actions { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.app-band__btn { background: #fff; color: var(--primary); border-color: #fff; gap: 8px; }
.app-band__btn:hover { background: var(--primary-soft); color: var(--primary-ink); }
.app-band__btn svg { width: 20px; height: 20px; }
.app-band__link { font-size: 14px; color: var(--on-primary); opacity: .85; text-decoration: underline; text-underline-offset: 3px; }
.app-band :focus-visible { outline-color: var(--on-primary); }
/* 2026-10-28 user (web): the home FAQ heading (pill, title, note) is centred like the other sections */
@media (min-width: 768px) { .faq-sec .sec-head--left { align-items: center; text-align: center; margin-inline: auto; } }
/* 2026-10-28 user (web): the app and web cards are smaller and everything in them sits in the middle */
@media (min-width: 768px) {
  .where-sec .grid-2 { max-width: 880px; width: 100%; margin-inline: auto; gap: 20px; }
  .where-sec .grid-2 > .card { align-items: center; text-align: center; padding: 28px 24px; gap: 14px; }
  .where-sec .grid-2 > .card h3 { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .where-sec .grid-2 > .card .h3-sub { margin: 0; }
  .where-sec .grid-2 > .card .check-list { width: fit-content; text-align: left; }
  .where-sec .grid-2 > .card .btn-app { align-self: center !important; }
}
@media (min-width: 768px) {
  .where-sec .grid-2 > .card { justify-content: flex-start; }
  .where-sec .grid-2 > .card .btn-app { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; margin-top: 4px; }
  .where-sec .grid-2 > .card .btn-app > span { flex-direction: row; align-items: baseline; gap: 6px; }
  .where-sec .grid-2 > .card .btn-app > svg { margin-top: 0; }
  .where-sec .grid-2 > .card .btn-app small { font-weight: 600; color: var(--muted); }
}
/* 2026-10-28 user (web): student top bar reads person > coin > ? — the person first as a chip, the ? small */
.me-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.me-chip:hover { background: var(--surface-2); }
.me-chip__av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #6d6af0); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.me-chip__chev { width: 14px; height: 14px; color: var(--muted); }
@media (min-width: 768px) {
  .topbar-me { gap: 10px; }
  .topbar-me .q-btn { width: 26px; height: 26px; min-width: 26px; min-height: 26px; font-size: 12px; border-width: 1.5px; color: #7a8597; border-color: #c9d0db; }
  .plan-mini { display: none !important; }
  /* 2026-10-28 user (web): the home is a dashboard — a wide greeting with the review button on the right, then the usage as four tiles;
     today's list and recently saved problems stay off the home page */
  .home-top { display: block; }
  .home-hero { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "eye cta" "h cta" "sub cta"; column-gap: 32px; align-items: center; }
  .home-hero .home-eyebrow { grid-area: eye; }
  .home-hero h2 { grid-area: h; }
  .home-hero .home-sub { grid-area: sub; }
  .home-hero .home-cta { grid-area: cta; align-self: center; padding: 18px 28px; font-size: 17px; }
  .home-hero .home-today, .home-hero .home-today__more { display: none; }
  .home-week { margin-top: 16px; padding: 18px 20px; }
  .home-week__head, .home-week .home-foot { display: none; }
  .home-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 12px; margin: 0; }
  .home-rows > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: center; }
  .home-rows dt { font-size: 14px; color: var(--muted); }
  .home-rows dd { margin: 0; font-size: 15px; }
  .home-rows .home-rows__hint, .home-rows .bar { display: none !important; }
  .home-secs { grid-template-columns: 1fr; }
  .home-sec[aria-labelledby="recent-t"] { display: none; }
}
@media (min-width: 768px) { .home-rows__points dt { display: inline-flex; align-items: center; gap: 4px; } .home-rows__points dt::after { content: "코인"; } }
/* 2026-10-28 user (web): the account chip is bigger, the three items share one height and line up with the 오캡 logo and the cards' right edge;
   no arrow, and the same space between every item */
@media (min-width: 768px) {
  .topbar { padding: 24px 36px 14px 20px; min-height: 0; align-items: center; }
  .topbar-me { gap: 12px; height: 54px; }
  .topbar-me > * { margin: 0 !important; }
  .me-chip__chev { display: none; }
  .me-chip { height: 46px; gap: 10px; padding: 0 16px 0 5px; border: 1px solid var(--line); background: var(--surface); font-size: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
  .me-chip__av { width: 36px; height: 36px; font-size: 15px; }
  .topbar-me .coin-pill { height: 46px; min-height: 46px; padding: 0 16px 0 12px; font-size: 16px; }
  .topbar-me .q-btn { width: 46px; height: 46px; min-width: 46px; min-height: 46px; font-size: 15px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
}
/* 2026-10-28 user (web): under the usage only one blue link to the coin sheet on the pricing page */
.usage-more { font-size: 15px; font-weight: 700; color: var(--primary); text-decoration: none; }
.usage-more:hover { text-decoration: underline; }
/* the top bar's own padding was overridden — line it up with the 오캡 logo and the cards' right edge */
@media (min-width: 768px) { body .topbar { padding: 24px 36px 14px 20px !important; } }
/* a figure from the real conversion (dev server) inside the digital problem */
.doc-fig { display: block; max-width: 100%; max-height: 260px; margin: 10px auto; border-radius: 8px; }
.doc-table { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: .92em; }
.doc-table td { border: 1px solid var(--line-strong, #cbd2dc); padding: 6px 8px; text-align: center; vertical-align: middle; line-height: 1.5; }
.doc-table { border: 1px solid var(--line-strong, #cbd2dc); margin-bottom: 14px; }
/* 2026-10-28 user (web): smaller top bar items — the coin without its yellow pill, a much smaller ? */
@media (min-width: 768px) {
  .me-chip { height: 40px; padding: 0 14px 0 4px; font-size: 15px; gap: 8px; }
  .me-chip__av { width: 32px; height: 32px; font-size: 14px; }
  .topbar-me .coin-pill { height: 40px; min-height: 40px; padding: 0 4px; background: none; color: var(--ink); font-size: 16px; }
  .topbar-me .q-btn { width: 22px; height: 22px; min-width: 22px; min-height: 22px; font-size: 11px; border: 1.5px solid #c9d0db; background: none; color: #7a8597; }
}
/* 2026-10-28 user (web): the review button sits in the middle of the free space beside the greeting, not against the right edge */
@media (min-width: 768px) {
  .home-hero { grid-template-columns: auto 1fr; }
  .home-hero .home-cta { justify-self: center; }
}
/* the coin tile lines up with the others (its own grid from the old card layout is switched off) */
@media (min-width: 768px) {
  .home-rows > div, .home-rows > .home-rows__points { display: flex !important; flex-direction: column; align-items: center; justify-content: center; grid-template-columns: none; text-align: center; }
  .home-rows > div > dt, .home-rows > div > dd { margin: 0; grid-column: auto; justify-self: center; }
}
/* 2026-10-28 user (web): the coin record */
.coins-page { display: flex; flex-direction: column; gap: 16px; max-width: 960px; }
.cl-sum { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 24px; padding: 24px 28px; }
.cl-now { display: flex; flex-direction: column; gap: 4px; }
.cl-now strong { font-size: 30px; font-weight: 850; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 6px; }
.cl-totals { display: flex; gap: 28px; margin: 0; }
.cl-totals div { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.cl-totals dt { font-size: 13px; color: var(--muted); }
.cl-totals dd { margin: 0; font-size: 17px; font-weight: 800; }
.cl-sum .usage-more { grid-column: 1 / -1; }
.cl-tabs { align-self: flex-start; }
.cl-list { padding: 8px 24px 16px; }
.cl-day { margin: 18px 0 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.cl-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cl-day + ul .cl-row:first-child { border-top: 0; }
.cl-ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); }
.cl-ic--in { background: var(--primary-soft); color: var(--primary); }
.cl-ic svg { width: 18px; height: 18px; }
.cl-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-what b { font-size: 15px; }
.cl-what small { font-size: 12px; color: var(--muted); }
.cl-amt { font-size: 16px; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.cl-amt--in { color: var(--primary); }
.cl-amt--out { color: var(--ink-2); }
.cl-empty { padding: 24px 0; text-align: center; }
.cl-pages { display: flex; justify-content: center; align-items: center; gap: 6px; }
.cl-page { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--ink-2); font-size: 15px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cl-page:hover:not(:disabled) { background: var(--surface-2); }
.cl-page[aria-current="page"] { background: var(--primary); color: var(--on-primary); }
.cl-page:disabled { opacity: .35; cursor: default; }
.cl-page--arrow svg { width: 18px; height: 18px; }
/* 2026-10-28 user (phone): 오답 / 정답 in the hero lead read as one word — the old .dots row (inline-flex with a gap) split the letters */
.hero__lead .dots, .hero__lead .dots i { display: inline !important; }
/* 2026-10-28 user (phone): the photo in the conversion demo is shown smaller, about the size of the digital problem,
   its edges fading into a paper-coloured background sampled from the photo */
@media (max-width: 767px) {
  .fx2-device__screen { background: radial-gradient(ellipse at 50% 48%, #d6d4d2 0%, #cfcdcb 55%, #c7c4c2 100%); }
  .fx2-shot { inset: 0; margin: auto; width: 86%; height: auto; max-height: 92%; object-fit: contain;
    -webkit-mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, #000 55%, transparent 100%);
            mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, #000 55%, transparent 100%); }
}
/* 2026-10-28 user (phone): the home FAQ heading is centred like the other sections, and every blue pill reads with wider letter spacing */
@media (max-width: 767px) {
  .faq-sec .sec-head--left { align-items: center; text-align: center; margin-inline: auto; }
  .sec-pill { letter-spacing: 0.06em; }
}
/* 2026-10-28 user (phone): every start / pay button on the plan cards is the site's blue button so it stands out */
@media (max-width: 767px) {
  .plan .btn.plan__btn:not(:disabled) { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
  .plan .btn.plan__btn:not(:disabled):hover { background: var(--primary-ink); border-color: var(--primary-ink); color: var(--on-primary); }
}
/* 2026-10-28 user (phone): long plan prices (11,400원) looked too big — a slightly smaller number and a smaller 원 */
@media (max-width: 767px) {
  .plan .plan__price, .tg3-plans .plan__price { font-size: 30px; letter-spacing: -0.02em; }
  .plan__won { font-size: .64em; font-weight: 800; margin-left: -5px; letter-spacing: 0; } /* the price row is flex with an 8px gap */
}
/* 2026-10-28 user (phone): the 앱 받기 button sits in the middle of the app card */
@media (max-width: 767px) {
  .btn.btn-app { align-self: center !important; text-align: center; display: flex; width: fit-content; margin-inline: auto; }
}
/* 2026-10-28 user (phone): the phone icon sits right before the words 앱 받기 */
.btn-app__t { font: inherit; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 767px) {
  .btn.btn-app > span { align-items: center; }
  .btn-app__t .icon { width: 18px; height: 18px; }
}
/* 2026-10-28 user: 패밀리·클래스 left the top menu; the start steps stay one tap away under the plan cards */
.plans-more { margin: -8px 0 0; text-align: center; font-size: 15px; font-weight: 700; }
.plans-more a { color: var(--primary-ink); text-decoration: none; }
.plans-more a:hover { text-decoration: underline; }
/* 2026-10-28 user (phone): the 고객센터 shortcuts stay on one line */
@media (max-width: 767px) {
  .help-tabs { flex-wrap: nowrap; gap: 6px; padding: 8px; }
  .help-tabs .chip { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 6px 8px; font-size: 13.5px; white-space: nowrap; letter-spacing: -0.02em; }
}
/* 2026-10-28: the FAQ ends with a way to ask (GPT review, picked by Claude) */
.help-more { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0 4px; text-align: center; color: var(--muted); font-size: 15px; }
.help-more .btn { min-width: 200px; }
/* 2026-10-28 user (phone): the '* … 만 14세 이상 가입 가능' note under the plan name is smaller */
@media (max-width: 767px) { .plan .plan__head .plan__who { font-size: 12.5px; } }
/* 2026-10-28 user: the birth date is typed as year / month / day instead of a month-by-month date picker */
.birth-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 8px; }
.field .birth-part { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--ink-2); min-width: 0; }
.birth-part .input { min-width: 0; width: 100%; text-align: center; font-variant-numeric: tabular-nums; }
/* 2026-10-29 user: progress is 5 dots (right answers fill 5/goal of them), the wrong-answer follow-up is three stacked choices */
.dots5 { display: inline-flex; gap: 5px; vertical-align: middle; }
.dots5 i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.dots5 i.on { background: var(--primary); }
.why--levels { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.why--levels .why__q { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.why__opt { min-height: 46px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); text-align: left; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.why__opt[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.why__reply { margin: 0; min-height: 20px; font-size: 14px; color: var(--muted); }
/* 2026-10-29 user: '이 문제, 어땠나요?' is its own step after the wrong-answer screen — a title and three big choices */
.level-q { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.level-opts { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 4px; }
.level-opt { min-height: 56px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); text-align: left; font-size: 17px; font-weight: 700; color: var(--ink); }
.level-opt:hover, .level-opt:focus-visible { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.level-skip { display: block; margin: 0 auto; padding: 10px 16px; color: var(--muted); font-weight: 600; }
/* 2026-10-29 (user test): the footer's 앱 받기 looks and taps like the other footer links */
.site-footer .footer-app { color: #ffffff; text-align: left; padding: 0; }
@media (max-width: 767px) { .site-footer a, .site-footer .footer-app { display: inline-flex; align-items: center; min-height: 32px; } }
/* 2026-10-29 (user test): on a phone the page title stays on one line next to the coin and ? (cut with …) */
@media (max-width: 767px) { .topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
/* 2026-10-29 (user test): '.mob-only { display: revert }' turned the phone coin pill and account icon into plain blocks,
   so the coin number sat at the top of its pill and the icon above the ?; they are centred flex boxes again. */
@media (max-width: 767px) {
  .topbar .coin-pill.mob-only, .topbar .topbar-account.mob-only { display: inline-flex !important; align-items: center; justify-content: center; }
  .topbar .topbar-account.mob-only { min-height: 36px; }
}
/* the '빠진 곳 있음' note gets its own line on a phone instead of a line that starts with '·' */
.prow__warnline { white-space: nowrap; }
@media (max-width: 767px) { .prow__warnline { display: block; } .prow__sep { display: none; } }

/* 2026-10-29 user: the phone web does not teach; study pages show the app guide */
.phone-study { align-items: center; text-align: center; gap: 14px; padding: 28px 20px; }
.phone-study .h-sec { margin: 0; text-wrap: balance; }
.phone-study__app { width: 100%; justify-content: center; gap: 8px; }
.phone-study__links { display: flex; gap: 8px; width: 100%; }
.phone-study__links .btn { flex: 1; justify-content: center; }
.phone-app { display: flex; flex-direction: column; gap: 14px; padding-block: 20px 32px; }
.phone-app__pc { gap: 8px; padding: 20px; }
.phone-app__pc .h-sec .icon { width: 20px; height: 20px; }
.phone-app__more { justify-content: center; }

/* 2026-10-29 user (web): feature cards center the title and label too, not only the text */
@media (min-width: 768px) {
  .fx2-text { align-items: center; text-align: center; }
  .fx2-label { align-self: center; }
  .fx2-courses { justify-content: center; }
}
/* 2026-10-29 user: the review count adapts (2~5번), said under the course chips */
.fx2-note { font-size: 14px !important; color: var(--muted) !important; margin-top: -2px; }

/* 2026-10-29 user: the coin section has three uses; "바꾸지 못하면 빠지지 않아요" is one line under them, then 해지·환불 */
.coin-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.coin-note .icon { width: 16px; height: 16px; flex: none; }
.price-sec > .quote-row { margin-top: 8px; }
@media (min-width: 768px) {
  .coin-rows { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; }
  .price-sec > .quote-row { width: 100%; }
}
/* 2026-10-29 user (web): 1:1 문의 leaves the tabs; the box at the end stands out */
@media (min-width: 768px) {
  .help-more { gap: 8px; margin-top: 8px; padding: 32px 24px; border-radius: var(--card-r); background: var(--primary-soft); border: 1px solid var(--line); color: var(--ink-2); }
  .help-more__t { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
  .help-more .btn { min-width: 240px; margin-top: 8px; }
}
.help-more__t { font-weight: 800; color: var(--ink); }
/* 2026-10-29 user (web): the photo in the conversion demo is small on a paper background, as on the phone */
@media (min-width: 768px) {
  .fx2-device__screen { background: radial-gradient(ellipse at 50% 48%, #d6d4d2 0%, #cfcdcb 55%, #c7c4c2 100%); }
  .fx2-shot { inset: 0; margin: auto; width: 86%; height: auto; max-height: 92%; object-fit: contain;
    -webkit-mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, #000 55%, transparent 100%);
            mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, #000 55%, transparent 100%); }
  /* 2026-10-29 user (web): the 4주 / 8주 course cards are there from the start, no animation */
  .fx2-courses li { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* 2026-10-29 user (web): the plan tags (1~20인, 학교·학원) read with roomier letter spacing */
@media (min-width: 768px) { .plan__tag { letter-spacing: 0.05em; padding: 6px 12px; } }
/* 2026-10-29 user (web): the hero copy moves right so its left margin is about the gap before the tablet picture */
@media (min-width: 1100px) {
  .hero__inner > h1, .hero__inner > .hero__lead, .hero__inner > .row { margin-left: clamp(0px, calc((100vw - 1100px) * 0.39), 140px); }
}
/* the 해지·환불 text keeps its button beside it on web */
@media (min-width: 768px) { .price-sec > .quote-row > .stack { flex: 1 1 420px; min-width: 0; } }
/* 2026-10-29 user: the footer name reads 오캡 | Ocap like the header; on web it is centred over the line below, roomier */
.footer-brand__name { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.footer-brand__name .brand__word { color: #fff; font-size: 22px; }
.footer-brand__div { width: 1px; height: 18px; background: rgba(255,255,255,.35); }
.footer-brand__alias { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.7); }
@media (min-width: 768px) {
  .footer-brand { align-items: center; text-align: center; width: fit-content; }
  .footer-brand__name { letter-spacing: 0.06em; }
  .footer-brand > span:last-child { letter-spacing: 0.03em; }
}
/* 2026-10-29 user: the login tabs say who uses which (아이디 = accounts made by a manager or teacher) */
.auth__hint { margin: -10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); text-align: center; text-wrap: balance; }
.auth__hint b { color: var(--ink-2); font-weight: 700; }
/* 2026-10-29 user (web): student home — the plan beside the name, a label on the ?, the attendance reward, this week's study */
.me-chip__plan { display: none; }
@media (min-width: 768px) {
  .me-chip__plan { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
  .q-btn[data-tip] { position: relative; }
  .q-btn[data-tip]:hover::after, .q-btn[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 700; white-space: nowrap; z-index: 40; }
  .home-rows__reward { font-size: 13px; color: var(--muted); }
  .home-record { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 16px; padding: 16px 22px; }
  .home-record h2 { font-size: 16px; font-weight: 800; margin: 0; }
  .home-record__line { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; flex: 1; color: var(--ink-2); font-size: 15px; }
  .home-record__line b { color: var(--ink); font-size: 17px; margin-inline: 2px; }
  .home-record .home-more { margin-left: auto; }
  /* the dots say what they count; the usual state reads as a quiet chip, the ones to notice keep their colour */
  .prow__count { display: inline-flex; align-items: center; gap: 6px; }
  .prow__goal { font-size: 12px; color: var(--muted); white-space: nowrap; }
  .prow__state { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12.5px !important; background: var(--surface-2); }
  .prow__state--learning, .prow__state--todo { color: var(--ink-2) !important; }
  .prow__side { min-width: 120px; align-items: flex-end; }
  /* family: the big-group link moves to the foot of the card so the start buttons line up */
  .plan__link--foot { margin-top: auto; padding-top: 6px; font-size: 13.5px; }
}
/* 2026-10-29 user (web): no blue pill above 코인은 이렇게 써요 (the phone keeps it) */
@media (max-width: 767px) { .sec-pill.mob-only { display: inline-flex !important; } }
/* 2026-10-29 user (web): 성적을 캐치하다 sits half its extra length to the left, so it overhangs 오답을 캐치해 equally on both ends */
@media (min-width: 1100px) { #hero-title > span { display: inline-block; margin-left: -0.415em; } }
/* 2026-10-29 user (web): 패밀리·클래스 시작 방법 보기 sits a little closer under the cards */
@media (min-width: 768px) { .price-body > .plans-more { margin-top: -40px; } }
/* 2026-10-29 user (web): the 학교·학원 견적서 문의 card is narrower and centred, its words and button centred too */
@media (min-width: 768px) {
  .price-body > .quote-row { width: 100%; max-width: 720px; margin-inline: auto; flex-direction: column; justify-content: center; text-align: center; gap: 14px; padding: 26px 32px; }
  .price-body > .quote-row > .stack { align-items: center; }
  .price-body > .quote-row > .btn { margin: 0; }
}
/* 2026-10-29 user (web): each coin tile leads with what it is for, the coin amount sits under it */
@media (min-width: 768px) {
  .coin-rows li > span { order: 2; color: var(--ink); font-size: 16.5px; font-weight: 700; line-height: 1.45; text-wrap: balance; }
  .coin-rows b { order: 3; font-size: 22px; font-weight: 800; color: var(--ink-2); }
  .coin-rows li, .coin-rows li + li { gap: 12px; padding: 26px 18px; }
}
/* the labels take two lines of room, so the coin amounts line up across the four tiles */
@media (min-width: 768px) { .coin-rows li > span { min-height: 2.9em; display: flex; align-items: center; justify-content: center; } }
/* 2026-10-29 user (web): both info cards (견적서 문의, 해지·환불) are only as wide as their words, centred, with the words on one line and a smaller button beside them */
@media (min-width: 768px) {
  .price-body > .quote-row, .price-sec > .quote-row { width: fit-content; max-width: 100%; margin-inline: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; text-align: left; gap: 28px; padding: 22px 28px; }
  .price-body > .quote-row > .stack, .price-sec > .quote-row > .stack { align-items: flex-start; flex: 0 1 auto; min-width: 0; }
  .price-body > .quote-row > .btn, .price-sec > .quote-row > .btn { flex: none; min-height: 42px; padding: 0 18px; font-size: 15px; margin: 0; }
}
@media (min-width: 1280px) { .price-body > .quote-row .small, .price-sec > .quote-row .small { white-space: nowrap; } }
/* 2026-10-29 user (web): the coin section starts further down, apart from the plan cards and the quote card above */
@media (min-width: 768px) { .price-body > .price-sec { margin-top: 56px; } }
/* 2026-10-29 user (web): in the footer the bar and Ocap take the same white as 오캡 */
@media (min-width: 768px) { .footer-brand__div { background: #fff; } .footer-brand__alias { color: #fff; } }
/* 2026-10-29 user (web): each footer column (서비스, 도움, 약관) is centred, heading over its links */
@media (min-width: 768px) { .footer-cols > .stack { align-items: center; text-align: center; } .site-footer .footer-cols .footer-app { text-align: center; } }
/* 2026-10-29 user (web): a line under each footer heading sets it apart from the links */
@media (min-width: 768px) { .footer-cols > .stack > strong { align-self: stretch; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .28); } }
/* 2026-10-29 user (web): roomier letter spacing for the footer headings and the 해지·환불 title */
@media (min-width: 768px) { .footer-cols > .stack > strong { letter-spacing: 0.14em; } .price-sec > .quote-row .quote-row__t { letter-spacing: 0.08em; } }
/* 2026-10-29 user: each coin use has a short grey line saying when it applies (그림 다시 그리기 is on top of a conversion) */
.coin-sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.45; }
@media (min-width: 768px) {
  .coin-rows li > span { flex-direction: column; justify-content: flex-start; gap: 4px; min-height: 0; }
  .coin-rows li > span .coin-sub { font-size: 13.5px; text-wrap: balance; }
  .coin-rows b { margin-top: auto; }
}
/* 2026-10-29 user (web): a one-line note sits in the middle of the two-line room, level with the middle of the two-line notes */
@media (min-width: 768px) { .coin-rows li > span .coin-sub { display: flex; align-items: center; justify-content: center; min-height: 2.9em; } }
/* the note text is one flex child (a nowrap span inside no longer splits it); one-line notes sit a touch higher */
@media (min-width: 768px) { .coin-rows li > span .coin-sub--one > span { position: relative; top: -4px; } }
/* 2026-10-29 user (web): the app band icon and words move a little to the right */
@media (min-width: 768px) { .app-band__ic { margin-left: 48px; } }
/* 2026-10-31 user (web): 살펴보기 was too wide — back to the same letter spacing as the other section pills */
@media (min-width: 768px) { section[aria-labelledby="fix-title"] .sec-pill { letter-spacing: 0.06em; } }
/* 2026-10-29 user (web): 해지·환불 정책 title spacing a touch tighter */
@media (min-width: 768px) { .price-sec > .quote-row .quote-row__t { letter-spacing: 0.05em; } }
/* 2026-10-29 user (web): the big-group link at the foot of the family card is centred across the card */
@media (min-width: 768px) { .plan__link--foot { align-self: center; text-align: center; } }
/* 2026-10-30 user (web): in the hero lead the first line is centred over the second */
@media (min-width: 768px) { .hero__inner > .hero__lead { width: fit-content; text-align: center; } }
/* 2026-10-30 user (web): the public header uses a centred menu (like Toss, Notion, MathFlat): the logo at the left on the hero text's line,
   the menu in the middle of the page, 로그인 and 앱 설치하기 at the right with the same inset */
@media (min-width: 768px) {
  .site-header__inner { position: relative; }
  .site-menu { justify-content: flex-end; }
  .site-header .site-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex: none; }
}
@media (min-width: 1100px) {
  .site-header__inner > .brand { margin-left: clamp(0px, calc((100vw - 1100px) * 0.39), 140px); }
  .site-header .site-actions { margin-right: clamp(0px, calc((100vw - 1100px) * 0.39), 140px); }
}
/* 2026-10-30 user (web): the OCAP mark (the app icon's infinity and cap) sits before 오캡 in the header and the footer; the phone keeps the word only */
.brand__mark { display: none; }
@media (min-width: 768px) {
  .site-header .brand { display: inline-flex; align-items: center; }
  .brand__mark { display: block; height: 26px; width: auto; margin-right: 8px; flex: none; }
  .footer-brand__name .brand__mark { height: 22px; margin-right: 0; }
}
/* 2026-10-30 user (web): the mark sits closer to 오캡 */
@media (min-width: 768px) { .site-header .brand .brand__mark { margin-right: -4px; } .footer-brand__name .brand__mark { margin-right: -4px; } }
/* 2026-10-30 user (web): the footer uses the header's inset on both sides, so the logo lines up with the header logo and the three columns stop where the header buttons stop */
@media (min-width: 1100px) {
  .site-footer__inner { padding-left: calc(var(--gutter) + clamp(0px, calc((100vw - 1100px) * 0.39), 140px)); padding-right: calc(var(--gutter) + clamp(0px, calc((100vw - 1100px) * 0.39), 140px)); }
  .footer-cols { gap: 0 72px; }
}
/* 2026-10-30 user (web): footer links a touch smaller and all in the same weight; 개인정보처리방침 keeps only a slightly brighter white
   (PIPA asks the privacy policy link to be told apart from other notices by size or colour) */
@media (min-width: 768px) {
  .footer-cols a, .site-footer .footer-cols .footer-app { font-size: 14.5px; color: #d9e0ec; }
  .footer-cols a:hover, .site-footer .footer-cols .footer-app:hover { color: #ffffff; }
  .footer-cols a.footer-privacy { color: #ffffff; }
}
/* 2026-10-30 user (web): the help topic tabs are centred in their box, a little more space between them */
@media (min-width: 768px) { .help-tabs { justify-content: center; gap: 14px; } }

/* ---- 2026-10-30 user: student home on the web (theme A, views-home.js) and the profile menu ---- */
@media (min-width: 768px) {
  .topbar-me .q-btn { display: none !important; }
  .hd { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
  .hd-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .hd-card h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
  .hd-card h2 em { font-style: normal; color: var(--primary); }
  .hd-muted { margin: 0; font-size: 13.5px; color: var(--muted); }
  .hd-chip { padding: 4px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); font-size: 13px; font-weight: 800; }
  .hd-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .hd-row__q { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hd-row__m { font-size: 13px; color: var(--muted); }
  .hd-cta { align-self: flex-start; margin-top: auto; padding: 14px 26px; border: 0; border-radius: 14px; background: var(--primary); color: #fff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
  .hd-cta--soft { background: var(--primary-soft); color: var(--primary-ink); }
  .hd-meter { position: relative; height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
  .hd-meter > span { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--good, #2f9e5b); }
}
@media (min-width: 768px) {
  details.hd-me { position: relative; display: inline-flex; }
  details.hd-me > summary { list-style: none; cursor: pointer; }
  details.hd-me > summary::-webkit-details-marker { display: none; }
  details.hd-me .me-chip__chev { display: inline-block !important; }
  .hd-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 300px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 36px rgba(15,23,42,.16); display: flex; flex-direction: column; gap: 12px; }
  .hd-pop__who { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
  .hd-pop dl { margin: 0; display: flex; flex-direction: column; gap: 9px; padding: 12px 0; border-block: 1px solid var(--line); }
  .hd-pop dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
  .hd-pop dt { color: var(--muted); }
  .hd-pop dd { margin: 0; font-weight: 700; text-align: right; }
  .hd-pop__links { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; }
  .hd-label { margin: 0; font-size: 14px; font-weight: 800; color: var(--muted); letter-spacing: .02em; }
  .hd-a { max-width: 760px; margin: 0 auto; width: 100%; gap: 14px; }
  .hd-cta--wide { align-self: stretch; margin-top: 4px; padding-block: 18px; font-size: 18px; border-radius: 16px; }
}
@media (min-width: 768px) {
  .main > .topbar { position: relative; z-index: 35; }
}
@media (min-width: 768px) {
  .hd-pop__links { align-items: center; }
  .hd-pop__links .linklike, .hd-pop__links a { padding: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--primary-ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
}
@media (min-width: 768px) {
  .me-chip__av { background: #2a5bd7 !important; }
  .hd-pop__links a, .hd-pop__links .linklike { display: inline-flex; align-items: center; min-height: 32px; }
  .hd-pop dd .hd-muted { font-weight: 500; }
  .hd-meter { box-shadow: inset 0 0 0 1px #8d98a8; background: #eef2f7; }
  .hd-label { color: #5b677a; }
}
@media (min-width: 768px) {
  :root { --go: #1f7a4f; --go-soft: #e6f4ec; }

  .hd-meter--go > span { background: var(--go) !important; }

  .hd-a4__fhead { display: flex; align-items: center; justify-content: space-between; }
  .hd-a4__help { position: static; }
  .hd-a4__help summary { list-style: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #8d98a8; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #4a5568; cursor: pointer; }
  .hd-a4__help summary::-webkit-details-marker { display: none; }
  .hd-a4__sheet { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; width: 320px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 36px rgba(15,23,42,.16); display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: #4a5568; line-height: 1.55; }
  .hd-a4__sheet p { margin: 0; }
  .hd-a4__sheet b { display: block; color: var(--ink); font-size: 14px; }

}
/* 2026-10-30 user: progress uses the OCAP blue, the same family as the rest of the site */
@media (min-width: 768px) {
  :root { --go: #2469ed; --go-soft: #eaf1fe; }
}
@media (min-width: 768px) {

  .hd-a4__help summary { border-color: #6b7688; }
  .hd-a4__sheet { top: calc(100% + 8px); bottom: auto; }
  .hd-a4__sheet p b { margin-bottom: 2px; }
  .hd-a4__close { align-self: flex-end; min-height: 32px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
}

@media (min-width: 768px) {
  .hd-pop { width: 330px; }
  .hd-a4__help summary { width: 32px; height: 32px; }

}

@media (min-width: 768px) {

  .dots5 i { width: 10px !important; height: 10px !important; border: 1.5px solid #8d98a8 !important; background: transparent; }
  .dots5 i.on { background: var(--go) !important; border-color: var(--go) !important; }
  .hd-meter { box-shadow: inset 0 0 0 1px #8d98a8 !important; }

}

@media (min-width: 768px) {

  .hd-a4__sheet p { word-break: keep-all; }
}
@media (min-width: 768px) {
   .hd-a4__help summary { width: 22px !important; height: 22px !important; font-size: 12px !important; border-width: 1.5px; }
}

/* the goal caption stays on one line: the goal tile is a little wider than the other two */

/* 2026-10-30 user: two fact cards (연속 복습, 목표 달성) */

/* 2026-10-30 user: bigger weekdays and squares; the goal is a centred count with one line under it */

/* 2026-10-30 user: the two menu links sit closer, with equal space on both sides and between them */
@media (min-width: 768px) {
  .hd-pop__links { justify-content: space-evenly !important; }
}
/* 2026-10-30 user: bigger card titles; the two bottom lines sit on the same baseline */

@media (min-width: 768px) {
  .hd-pop__links a, .hd-pop__links .linklike { font-size: 15.5px !important; }
}
/* 2026-10-30 user: 오늘의 복습, 연속 복습, 목표 달성 share one size and tone */

@media (min-width: 768px) {
  .hd-a4__fhead { display: flex; align-items: center; justify-content: space-between; position: relative; }
  .hd-a4__fhead .hd-a4__sheet { right: 0; top: calc(100% + 8px); width: 280px; }

}
@media (min-width: 768px) {
  .hd-a4__sheet .hd-a4__ht { margin: 0 0 2px; font-size: 14.5px; font-weight: 800; color: var(--ink); }
  .hd-a4__hdots { flex: none; display: inline-flex; gap: 3px; width: 66px; }
  .hd-a4__hdots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #8d98a8; }
  .hd-a4__hdots i.on { background: var(--go); border-color: var(--go); }
}
@media (min-width: 768px) {
  .hd-a4__fhead .hd-a4__sheet { width: 340px; }
}
/* 2026-10-30 user: goal help B-1 — the goal is five dots; right fills one, wrong keeps them and the problem comes back more often */
@media (min-width: 768px) {
  .hd-a4__fhead .hd-a4__sheet { width: 280px; gap: 12px; }
  .hd-a4__sheet .hd-a4__hsub { margin: -8px 0 0; font-size: 13px; color: var(--muted); }
  .hd-a4__hcase { display: grid; grid-template-columns: 44px 1fr; gap: 4px 10px; align-items: center; }
  .hd-a4__hk { font-weight: 800; font-size: 13.5px; }
  .hd-a4__hcase--ok .hd-a4__hk { color: var(--go); }
  .hd-a4__hcase--no .hd-a4__hk { color: var(--warn); }
  .hd-a4__hvis { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
  .hd-a4__hvis .hd-a4__hdots, .hd-a4__hgoal .hd-a4__hdots { width: auto; }
  .hd-a4__hd { grid-column: 2; font-size: 13px; color: var(--ink-2); }
  .hd-a4__hdots i.hd-new { box-shadow: 0 0 0 3px color-mix(in srgb, var(--go) 28%, transparent); }
  .hd-a4__sheet .hd-a4__hgoal { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--go-soft); font-size: 13.5px; color: var(--ink); }
  .hd-a4__sheet .hd-a4__hgoal b { display: inline; color: var(--go); font-weight: 800; font-size: inherit; }
}

/* 2026-10-31 user: the daily amount — one button at the top right of 오늘의 복습 that opens 5·10·15·20 */
@media (min-width: 768px) {
  .hd-amount { position: relative; }
  .hd-amount > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
  .hd-amount > summary::-webkit-details-marker { display: none; }
  .hd-amount > summary .icon { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
  .hd-amount[open] > summary .icon { transform: rotate(180deg); }
  .hd-amount > summary:hover { border-color: var(--line-2); }
  .hd-amount__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 184px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(15, 23, 42, .14); display: flex; flex-direction: column; }
  .hd-amount__menu p { margin: 4px 8px 6px; font-size: 12.5px; color: var(--muted); }
  .hd-amount__menu button { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
  .hd-amount__menu button:hover { background: var(--surface-2); }
  .hd-amount__menu button[aria-pressed="true"] { color: var(--primary-ink); font-weight: 800; }
  .hd-amount__menu button .icon { width: 18px; height: 18px; }
}

/* 2026-10-31 user: 목표 달성이란? smaller with a × in the corner, so it fits without scrolling; on wide screens it sits in the
   empty space right of the card, its bottom on the card's bottom; narrower, it opens upward from the title */
@media (min-width: 768px) {
  .hd-a4__fhead .hd-a4__sheet { overflow: visible; width: 216px; padding: 12px 14px 14px; gap: 8px; border-radius: 14px; font-size: 12px; }
  .hd-a4__sheet .hd-a4__ht { margin: 0; padding-right: 24px; font-size: 13.5px; }
  .hd-a4__sheet .hd-a4__hsub { margin: -4px 0 2px; font-size: 12px; line-height: 1.45; }
  .hd-a4__hcase { grid-template-columns: 36px 1fr; gap: 2px 6px; }
  .hd-a4__hk { font-size: 12px; }
  .hd-a4__hvis { gap: 4px; font-size: 10px; }
  .hd-a4__hd { font-size: 12px; line-height: 1.4; }
  .hd-a4__sheet .hd-a4__hdots { gap: 2px; }
  .hd-a4__sheet .hd-a4__hdots i { width: 8px; height: 8px; border-width: 1.3px; }
  .hd-a4__hdots i.hd-new { box-shadow: 0 0 0 2px color-mix(in srgb, var(--go) 30%, transparent); }
  .hd-a4__sheet .hd-a4__hgoal { gap: 8px; margin-top: 2px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; }
  .hd-a4__sheet .hd-a4__close { position: absolute; top: 8px; right: 8px; min-height: 0; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; display: grid; place-items: center; font-size: 17px; font-weight: 500; line-height: 1; color: var(--muted); background: transparent; }
  .hd-a4__sheet .hd-a4__close:hover { background: var(--surface-2); color: var(--ink); }
}
@media (min-width: 1440px) {
  .hd-a4__fhead{ position: static !important; }
  /* the bottom lines up with the bottom of the 목표 달성 card (-1px: past its border) */

}

@media (min-width: 768px) {
  .hd-a4__fhead .hd-a4__sheet { width: 216px; }
  .hd-a4__sheet .hd-a4__hd { grid-column: 1 / -1; padding-left: 2px; text-wrap: balance; }
  .hd-a4__sheet .hd-a4__hgoal span { text-wrap: balance; }
}

/* 2026-10-31 user: 내 문제 on the web — 날짜별 보기 / 과목별 보기 under one header (views-library.js) */
@media (min-width: 768px) {
  .main--lv .content { max-width: 1080px; margin-inline: auto; }
  .lv { display: flex; flex-direction: column; gap: 14px; width: 100%; }
  .lv-top { display: flex; gap: 10px; }
  .lv-search { position: relative; flex: 1; min-width: 0; }
  .lv-search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
  .lv-search .input { width: 100%; min-height: 46px; padding-left: 42px; border-radius: 14px; font-size: 15px; }
  .lv-mode { flex: none; display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
  .lv-mode button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
  .lv-mode button .icon { width: 17px; height: 17px; }
  .lv-mode button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
  .lv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .lv-chip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
  .lv-chip span { margin-left: 2px; color: var(--muted); font-weight: 600; }
  .lv-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
  .lv-chip[aria-pressed="true"] span { color: inherit; opacity: .75; }
  .lv-q { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lv-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 0; font-size: 13.5px; color: var(--muted); }
  .lv-stars { color: #e0a100; letter-spacing: -1px; font-size: 12.5px; }
  .lv-tag { display: inline-flex; padding: 1px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 700; }
  .lv-tag--repeat { background: var(--primary-soft); color: var(--primary-ink); }
  .lv-tag--warn { background: var(--warn-soft); color: var(--warn); }
  .lv-when { font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
  .lv-link { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--primary-ink); cursor: pointer; }
  .lv-link .icon { width: 16px; height: 16px; }
  .lv-note { font-size: 13.5px; color: var(--muted); }
  .lv-soft { min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--primary-soft); color: var(--primary-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
  .lv-empty { padding: 40px 0; text-align: center; color: var(--muted); }

  /* 날짜별 */
  .lv-date { display: flex; flex-direction: column; gap: 14px; }
  .lv-grp { display: flex; flex-direction: column; gap: 6px; }
  .lv-grp__head { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 4px 2px; }
  .lv-grp__head h2 { margin: 0; font-size: 16px; font-weight: 800; }
  .lv-grp__head h2 span { margin-left: 4px; color: var(--muted); font-weight: 700; }
  .lv-grp--today .lv-grp__head h2 { color: var(--primary-ink); }
  .lv-grp ol { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
  .lv-grp li + li { border-top: 1px solid var(--line); }
  .lv-grp--done ol, .lv-grp--held ol { opacity: .78; }
  .lv-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; color: inherit; text-decoration: none; }
  .lv-row:hover { background: var(--surface-2); }
  .lv-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .lv-row__side { display: flex; align-items: center; gap: 14px; flex: none; }

  /* 과목별 */
  .lv-subject { display: flex; align-items: flex-start; gap: 20px; }
  .lv-rail { flex: none; width: 200px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
  .lv-rail__s, .lv-rail__u { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink-2); cursor: pointer; text-align: left; }
  .lv-rail__s span, .lv-rail__u span { flex: none; color: var(--muted); font-weight: 600; font-size: 13.5px; }
  .lv-rail__s[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-ink); }
  .lv-rail__units { display: flex; flex-direction: column; padding: 2px 0 6px 10px; }
  .lv-rail__u { min-height: 34px; font-size: 14px; font-weight: 600; }
  .lv-rail__u[aria-pressed="true"] { color: var(--primary-ink); background: var(--surface-2); }
  .lv-subject__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  .lv-subject__bar { display: flex; align-items: center; justify-content: space-between; min-height: 36px; font-size: 15px; }
  .lv-table { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
  .lv-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .lv-table th { padding: 0 16px; height: 44px; text-align: left; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface-2); }
  .lv-table th button { padding: 0; border: 0; background: none; font: inherit; color: inherit; font-weight: 700; cursor: pointer; }
  .lv-table th:nth-child(2) { width: 160px; } .lv-table th:nth-child(3) { width: 112px; } .lv-table th:nth-child(4) { width: 118px; }
  .lv-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
  .lv-table tr:last-child td { border-bottom: 0; }
  .lv-table tbody tr:hover { background: var(--surface-2); }
  .lv-table__q { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
  .lv-table__unit { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
  .lv-table__when { font-weight: 700; color: var(--ink-2); }
}

/* 2026-10-31 user: 내 문제 shows 10 problems a page with 1 · 2 · 3 below */
@media (min-width: 768px) {
  .lv-pager { display: flex; justify-content: center; gap: 6px; padding-top: 6px; }
  .lv-pager button { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 15px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
  .lv-pager button:hover:not(:disabled) { border-color: var(--line-2); }
  .lv-pager button[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
  .lv-pager button:disabled { opacity: .4; cursor: default; }
  .lv-grp__head h2 small { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
}
@media (min-width: 768px) { .lv-grp__head h2 em { margin-left: 6px; font-style: normal; font-size: 14.5px; font-weight: 700; color: var(--muted); } .lv-grp--today .lv-grp__head h2 em { color: var(--primary-ink); opacity: .75; } }

/* 2026-10-31 user: 날짜별 보기 groups are titled with just their date ('10월 31일 토요일') — no date blocks or calendar boxes */
@media (min-width: 768px) {
  .lv-date { gap: 22px; }
  .lv-grp__head { padding: 0 4px 4px; }
  .lv-grp__head h2, .lv-grp--today .lv-grp__head h2 { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
}
@media (min-width: 768px) { .lv-saved { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .lv-sep { margin: 0 2px; color: var(--line-2); font-size: 12px; } }

/* 2026-10-31 user (web): 서비스 소개 — a big title on the left and four numbered cards on the right, then how it is used and
   who it is for. The phone gets a simple stacked version (its menu does not link here). */

/* 2026-10-31 user: the web student home as in the user's picture (views-home.js homeWeb), the sidebar's 도움말 and the bell */
@media (min-width: 768px) {
  .side-sep { width: 100%; height: 1px; margin: 10px 0; border: 0; background: var(--line); }
  .side-help { margin-top: auto; }
  .side-help__ic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.8px solid currentColor; font-size: 13px; font-weight: 800; line-height: 1; }
  .sidebar .side-spacer { flex: 1; }
  details.hd-me .me-chip__plan { display: none; }
  .hm-bell { position: relative; display: inline-flex; margin-right: 6px; }
  .hm-bell > summary { list-style: none; position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--ink-2); cursor: pointer; }
  .hm-bell > summary::-webkit-details-marker { display: none; }
  .hm-bell > summary:hover { background: var(--surface-2); }
  .hm-bell > summary .icon { width: 22px; height: 22px; }
  .hm-bell__dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px var(--surface); }
  .hm-bell__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 280px; padding: 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 36px rgba(15, 23, 42, .16); display: flex; flex-direction: column; gap: 2px; }
  .hm-bell__menu p { margin: 6px 10px 6px; font-size: 13px; font-weight: 800; color: var(--muted); }
  .hm-bell__menu a, .hm-bell__menu button, .hm-bell__menu div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; color: var(--ink); text-decoration: none; }
  .hm-bell__menu a:hover, .hm-bell__menu button:hover { background: var(--surface-2); cursor: pointer; }
  .hm-bell__menu b { font-size: 14.5px; }
  .hm-bell__menu span { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }

  .main--hm .content { max-width: 1040px; margin-inline: auto; }
  .hm { display: flex; flex-direction: column; gap: 14px; width: 100%; }
  .hm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 4px 2px 6px; }
  .hm-hello { margin: 0; font-size: 23px; font-weight: 850; letter-spacing: -0.03em; color: var(--ink); }
  .hm-date { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
  .hm-row { display: grid; gap: 14px; }
  .hm-row--top { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); }
  .hm-row--mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .hm-card { position: relative; min-width: 0; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(15, 23, 42, .04); }
  .hm-card h3 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
  .hm-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--primary-ink); text-decoration: none; }
  .hm-link .icon { width: 14px; height: 14px; }
  .hm-link--sm { font-size: 13px; color: var(--ink-2); font-weight: 600; }

  /* 오늘의 복습 */
  .hm-today { display: flex; padding: 0; overflow: hidden; min-height: 236px; }
  .hm-today__text { position: relative; z-index: 1; flex: 1 1 52%; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 20px 0 20px 22px; }
  .hm-today__label { display: flex; align-items: center; gap: 14px; }
  .hm-amount > summary { min-height: 30px; padding: 0 8px 0 12px; border-radius: 9px; font-size: 12.5px; color: var(--ink-2); }
  .hm-amount .hd-amount__menu { left: 0; right: auto; }
  .hm-big { margin: 4px 0 0; font-size: 30px; font-weight: 850; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
  .hm-big b { font-size: 44px; color: var(--primary); }
  .hm-big--done b { color: var(--ink); }
  .hm-sub { margin: 0; font-size: 15px; color: var(--ink-2); }
  .hm-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 232px; min-height: 44px; margin-top: 6px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--primary); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(36, 105, 237, .22); }
  .hm-cta .icon { width: 15px; height: 15px; }
  .hm-cta--soft { background: var(--primary-soft); color: var(--primary-ink); box-shadow: none; }
  .hm-desk { flex: 0 0 46%; align-self: stretch; width: 46%; height: auto; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%); mask-image: linear-gradient(90deg, transparent 0, #000 28%); }

  /* 목표 달성 */
  .hm-goal { display: flex; flex-direction: column; gap: 9px; }
  .hm-goal__head { display: flex; align-items: center; justify-content: space-between; }
  .hm-goal .hd-a4__help summary { width: 24px !important; height: 24px !important; font-size: 12.5px !important; border-width: 2px; }
  .hm-goal__month { margin: 2px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
  .hm-goal__month b { color: var(--primary); }
  .hm-goal__count { margin: 2px 0 0; font-size: 19px; font-weight: 800; color: var(--muted); }
  .hm-goal__count b { font-size: 30px; color: var(--primary); letter-spacing: -0.03em; }
  .hm-bar { display: block; height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
  .hm-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
  .hm-goal__note { margin: 2px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }

  /* 이번 주 복습 */
  .hm-week__sub { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
  .hm-week__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .hm-week__days li { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
  .hm-week__days i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; }
  .hm-week__days li.on i { background: var(--primary); color: #fff; }
  .hm-week__days li.on i .icon { width: 16px; height: 16px; stroke-width: 3; }
  .hm-week__days li.miss i { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
  .hm-week__days li.miss i b { font-weight: 700; }
  .hm-week__days li.today span { color: var(--primary-ink); font-weight: 800; }
  .hm-week__days li.today i { border: 2px solid var(--primary); }
  .hm-week__days li.future i { border: 1.5px dashed #b9c3d2; }

  /* 학습 통계 */
  .hm-stats__head { display: flex; align-items: center; justify-content: space-between; }
  .hm-stats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; }
  .hm-stats__grid > div { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 8px; }
  .hm-stats__grid > div + div { border-left: 1px solid var(--line); }
  .hm-stats__grid dt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
  .hm-stats__grid dt .icon { width: 17px; height: 17px; color: #7f9dd6; }
  .hm-stats__grid dd { margin: 0; font-size: 23px; font-weight: 850; letter-spacing: -0.02em; color: var(--ink); }
  .hm-stats__grid dd a { color: inherit; text-decoration: none; }
  .hm-stats__grid dd a:hover { color: var(--primary-ink); }

  /* 직접 골라 복습하기 */
  .hm-pick { display: flex; align-items: center; gap: 10px; padding: 14px 20px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 800; }
  .hm-pick span { flex: 1; }
  .hm-pick .icon { width: 18px; height: 18px; color: var(--ink-2); }
  .hm-pick:hover { border-color: var(--line-2); }
}
@media (min-width: 768px) and (max-width: 1180px) {
  .hm-row--top, .hm-row--mid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) { .hm-desk { background: linear-gradient(135deg, #f4f8ff, #e3ecfb); } }

/* 2026-10-31 user: the whole student home fits one screen without scrolling (about 700px tall); the sidebar a little
   smaller on every student page */
@media (min-width: 768px) {
  .app .sidebar { width: 216px; padding: 16px 12px; }
  .app .side-link { min-height: 40px; font-size: 15px; padding: 6px 12px; }
  .app .sidebar .brand__word { font-size: 24px; }
  .main--hm .topbar { padding-block: 8px 0; }
  .main--hm .content { padding-top: 4px; padding-bottom: 20px; gap: 0; }
  .hm { gap: 12px; }
  .hm-head { padding: 0 2px 2px; }
  .hm-hello { font-size: 21px; }
  .hm-row { gap: 12px; }
  .hm-card { padding: 16px 18px; }
  .hm-card h3 { font-size: 15px; }
  .hm-today { min-height: 208px; }
  .hm-today__text { gap: 7px; padding: 16px 0 16px 20px; }
  .hm-big { font-size: 26px; margin-top: 2px; }
  .hm-big b { font-size: 38px; }
  .hm-sub { font-size: 14px; }
  .hm-cta { min-height: 40px; min-width: 210px; font-size: 14.5px; margin-top: 4px; }
  .hm-link { font-size: 13.5px; }
  .hm-goal { gap: 7px; }
  .hm-goal__month { font-size: 14.5px; }
  .hm-goal__count { font-size: 17px; }
  .hm-goal__count b { font-size: 26px; }
  .hm-goal__note { font-size: 12.5px; padding-top: 8px; }
  .hm-week__sub { margin: 2px 0 10px; font-size: 12.5px; }
  .hm-week__days li { gap: 6px; font-size: 12.5px; }
  .hm-week__days i { width: 28px; height: 28px; }
  .hm-week__days li.on i .icon { width: 14px; height: 14px; }
  .hm-stats__grid { margin-top: 12px; }
  .hm-stats__grid > div { gap: 8px; }
  .hm-stats__grid dd { font-size: 21px; }
  .hm-pick { padding: 12px 18px; font-size: 14.5px; }
}
@media (min-width: 768px) { .app { min-height: calc(100vh - 42px); } }  /* the 시제품 bar is 42px tall on the web now (was 31) */
@media (min-width: 768px) { .hm-card.hm-today { padding: 0; min-height: 200px; } }

/* 2026-10-31 user: the bell, name and coins smaller and up at the logo's height; on the home the greeting sits on that same
   top line (beside the logo), so the cards start level with the 홈 menu item */
@media (min-width: 768px) {
  .topbar-me { gap: 8px; height: auto; }
  .me-chip { height: 36px; padding: 0 12px 0 4px; font-size: 13.5px; gap: 7px; }
  .me-chip__av { width: 28px; height: 28px; font-size: 13px; }
  .topbar-me .coin-pill { height: 34px; min-height: 34px; padding: 0 12px 0 9px; font-size: 14px; }
  .hm-bell > summary { width: 34px; height: 34px; }
  .hm-bell > summary .icon { width: 19px; height: 19px; }
  .hm-bell__dot { top: 6px; right: 7px; width: 7px; height: 7px; }
  .main--hm { position: relative; }
  .main--hm .topbar { position: absolute; top: 14px; right: max(20px, env(safe-area-inset-right, 0px)); z-index: 20; width: auto; height: auto; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; clip: auto; }
  .main--hm .content { padding-top: 12px; }
  .hm-head { min-height: 40px; align-items: center; justify-content: flex-start; gap: 12px; padding-right: 300px; }
}
@media (min-width: 768px) { .main.main--hm .topbar { top: 24px; padding: 0; } .main.main--hm .content { padding-top: 22px; } }
@media (min-width: 768px) { .main.main--hm .topbar { min-height: 0; height: auto; } .main.main--hm .topbar .topbar-me { margin: 0; } }
@media (min-width: 768px) { body .main.main--hm .topbar { padding: 0 !important; } }  /* the home places it itself (top: 24px), level with the logo */
/* 2026-10-31 user: the greeting and cards go back down under the bell line; the date at the right end of the greeting row again */
@media (min-width: 768px) { .main.main--hm .content { padding-top: 66px; } .hm-head { justify-content: space-between; padding-right: 2px; } }

/* 2026-10-31 user ('배열이 어색해'): coins · bell | profile — the coins in a pill like the name chip, the profile last at the
   right edge after a thin line (every student page on the web) */
@media (min-width: 768px) {
  .topbar-me { gap: 6px; }
  .topbar-me .coin-pill.web-only { order: 1; height: 36px; min-height: 36px; padding: 0 12px 0 10px; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
  .topbar-me .coin-pill.web-only:hover { border-color: var(--line-2); }
  .topbar-me .hm-bell { order: 2; margin-right: 0; }
  .topbar-me .hd-me { order: 3; padding-left: 12px; margin-left: 4px; background: linear-gradient(var(--line), var(--line)) left center / 1px 20px no-repeat; }
  .topbar-me .hd-me .me-chip { border-color: transparent; box-shadow: none; background: transparent; }
  .topbar-me .hd-me .me-chip:hover, .topbar-me .hd-me[open] .me-chip { background: var(--surface-2); }
}
@media (min-width: 768px) { .hm-goal__month { white-space: nowrap; } }  /* 2026-10-31 user: one line */
/* 2026-10-31 user: no bell; the top right is the profile, then the coins */
@media (min-width: 768px) {
  .topbar-me .hd-me { order: 1; padding-left: 0; margin-left: 0; background: none; }
  .topbar-me .coin-pill.web-only { order: 2; }
}
@media (min-width: 768px) { .topbar-me .hd-me .me-chip { border: 1px solid var(--line); background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } .topbar-me .hd-me .me-chip:hover, .topbar-me .hd-me[open] .me-chip { border-color: var(--line-2); background: var(--surface); } }
/* 2026-10-31 user: 1문제 / 23문제 centred; 목표 달성이란? opens beside the card, over the desk picture of 오늘의 복습 (a
   picture only), level with the card's top, so it hides no number or button */
@media (min-width: 768px) {
  .hm-goal__count { text-align: center; }
  .hm-goal .hm-goal__head, .hm-goal .hd-a4__help { position: static; }
  .hm-goal .hm-goal__head .hd-a4__sheet { top: 0; right: calc(100% + 14px); left: auto; bottom: auto; width: 236px; z-index: 30; }
  .hm-goal .hm-goal__head .hd-a4__sheet::after { content: ''; position: absolute; right: -6px; top: 22px; width: 10px; height: 10px; background: var(--surface); border-top: 1px solid var(--line); border-right: 1px solid var(--line); transform: rotate(45deg); }
}
/* stacked cards (narrow window): under the ? inside the card's width */
@media (min-width: 768px) and (max-width: 1180px) {
  .hm-goal .hm-goal__head .hd-a4__sheet { right: 18px; top: 52px; }
  .hm-goal .hm-goal__head .hd-a4__sheet::after { display: none; }
}

/* 2026-10-31 user ('글자 배열, 크기를 손봐야'): five sizes only on the web student home — greeting 22, big number 40,
   middle numbers 28, card titles 16 / text 15, small 13.5 (nothing smaller); text left, only numbers compared side by side
   centred; the daily-amount chip quieter than the card title */
@media (min-width: 768px) {
  .hm-hello { font-size: 22px; font-weight: 800; }
  .hm-date { font-size: 13.5px; }
  .hm-card h3 { font-size: 16px; font-weight: 800; }
  .hm-today__label { gap: 10px; }
  .hm-amount > summary { min-height: 28px; padding: 0 8px 0 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-color: var(--line); background: var(--surface-2); }
  .hm-big { font-size: 24px; font-weight: 800; margin-top: 6px; }
  .hm-big b { font-size: 40px; font-weight: 850; }
  .hm-sub { font-size: 15px; color: var(--ink-2); }
  .hm-cta { font-size: 15px; }
  .hm-link, .hm-link--sm { font-size: 13.5px; font-weight: 700; }
  .hm-goal__month { font-size: 15px; white-space: nowrap; }
  .hm-goal__count { font-size: 16px; }
  .hm-goal__count b { font-size: 28px; }
  .hm-goal__note { font-size: 13.5px; }
  .hm-week__sub { font-size: 13.5px; }
  .hm-week__days li { font-size: 13.5px; }
  .hm-stats__grid dt { font-size: 13.5px; }
  .hm-stats__grid dd { font-size: 28px; font-weight: 800; }
}

/* 2026-10-31 user ('글자 배열 및 정렬 다 고쳐'): the profile and coins end on the cards' right edge; 목표 달성 spreads
   top (sentence) / middle (count and bar) / bottom (note); 오늘의 복습's text sits in the middle of its card; the desk
   picture has room on its left so the fade never runs over the books */
@media (min-width: 768px) {
  .main.main--hm .topbar { right: calc(max(0px, (100% - 1040px) / 2) + max(16px, env(safe-area-inset-right, 0px))); }
  .hm-goal .hm-goal__count { margin-top: auto; }
  .hm-goal .hm-goal__note { margin-top: auto; }
  .hm-today__text { justify-content: center; }
  .hm-desk { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
}
@media (min-width: 768px) { .hm-acts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; } .hm-acts .hm-cta { margin-top: 0; } }  /* the list link beside the button */
@media (min-width: 768px) { .hm-acts { flex-direction: column; align-items: flex-start; gap: 14px; } }  /* 2026-10-31 user: the link under the button again, with more room above it */
/* 2026-10-31: the GPT desk picture — white like the card, so no fade or tinted box; it fits the right side whole */
@media (min-width: 768px) {
  .hm-desk { -webkit-mask-image: none; mask-image: none; background: none; object-fit: contain; object-position: right center; padding: 14px 18px 14px 0; box-sizing: border-box; min-width: 0; }
}
/* 2026-10-31 user ('자연스럽지 않아'): the illustration in a scene — sky with window light, a desk top it stands on; its
   white background melts into the sky (multiply); the fade on the left only crosses empty sky */
@media (min-width: 768px) {
  .hm-scene { position: relative; isolation: isolate; flex: 0 0 48%; align-self: stretch; overflow: hidden;
    background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, .6) 34% 41%, transparent 41% 48%, rgba(255, 255, 255, .45) 48% 52%, transparent 52%), linear-gradient(140deg, #f5f9ff 0%, #e4ecfa 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
  .hm-scene::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 0; background: linear-gradient(#f1e9df, #e6dccf); }
  .hm-scene .hm-desk { position: absolute; z-index: 1; right: 16px; bottom: 18px; width: 86%; max-width: 420px; height: auto; padding: 0; flex: none; align-self: auto; object-fit: initial; mix-blend-mode: multiply; -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 768px) { .hm-scene { flex-basis: 54%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); } .hm-scene .hm-desk { width: 88%; max-width: 460px; } }  /* 2026-10-31 user: the picture a little further left */
/* 2026-10-31 user ('왼쪽에 책상 좀 더 나오게'): the fade now only whitens the sky; the desk top runs further left, under the
   text side, fading out near the card's left part */
@media (min-width: 768px) {
  .hm-scene { -webkit-mask-image: none; mask-image: none; flex-basis: 62%; margin-left: -8%;
    background: linear-gradient(90deg, var(--surface) 0, rgba(255, 255, 255, 0) 26%), linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, .6) 34% 41%, transparent 41% 48%, rgba(255, 255, 255, .45) 48% 52%, transparent 52%), linear-gradient(140deg, #f5f9ff 0%, #e4ecfa 100%); }
  .hm-scene::after { background: linear-gradient(90deg, var(--surface) 0, rgba(255, 255, 255, 0) 16%), linear-gradient(#f1e9df, #e6dccf); }
  .hm-scene .hm-desk { width: 80%; max-width: 460px; }
}
/* 2026-10-31 user: the greeting in two lines — '지민님, 반가워요!' (22, bold) over '오늘도 오답을 캐치해볼까요?' (15, quieter);
   the date at the right on the second line's height; the block starts a little higher so the cards stay where they were */
@media (min-width: 768px) {
  .hm-head { align-items: flex-end; min-height: 0; }
  .hm-head__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .hm-hello__sub { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink-2); }
  .hm-date { padding-bottom: 1px; }
  .main.main--hm .content { padding-top: 54px; }
}
@media (min-width: 768px) { .hm-week__next { margin: 12px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); } }  /* 2026-10-31 user: one line under the days about keeping the streak */

/* 2026-11-01 user (web, 시안 C '오답에서 정답까지'): 서비스 소개 — the title in one centred line, then the four ideas as
   steps on one dashed path that runs from 오답 to 정답 (views-public.js O.views.about). The pictures came from the
   user's GPT design (assets/about-1..4.jpg); narrower screens drop the path and show two steps a row. */
.ab3 { max-width: 1120px; margin: 0 auto; padding: 56px max(20px, env(safe-area-inset-right, 0px)) 96px max(20px, env(safe-area-inset-left, 0px)); }
.ab3__hero { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px 0 40px; text-align: center; }
.ab3__hero h1 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.25; font-weight: 850; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; word-break: keep-all; }
.ab3 em { font-style: normal; color: var(--primary); }
.ab3__hero p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-2); word-break: keep-all; }
.ab3__path { position: relative; }
.ab3__line { position: absolute; left: 12%; top: 245px; width: 76%; height: 30px; }  /* from the first number to the last */
.ab3__line path { fill: none; stroke: color-mix(in srgb, var(--primary) 40%, transparent); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.ab3__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ab3__steps li { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; text-align: center; }
.ab3__art { width: 100%; height: 220px; display: grid; place-items: center; border-radius: 24px; background: linear-gradient(160deg, #f6f9ff, #eaf1fd); }
.ab3__art img { display: block; width: 94%; max-width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 52%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 78% at 50% 52%, #000 62%, transparent 100%); }
.ab3__dot { position: relative; z-index: 1; width: 40px; height: 40px; margin-top: 8px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); font-weight: 850; color: var(--primary-ink); box-shadow: 0 0 0 6px var(--bg); }
.ab3__steps h2 { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 850; letter-spacing: -0.02em; color: var(--ink); word-break: keep-all; }
.ab3__steps p { margin: 0; max-width: 24ch; font-size: 14px; line-height: 1.7; color: var(--muted); word-break: keep-all; text-wrap: balance; }
@media (max-width: 900px) {
  .ab3__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .ab3__line { display: none; }
}
/* 2026-11-01 user (phone): the same steps on a path running down the left, each step's number on the path with its
   title, text and picture beside it (no 오답/정답 pills, web or phone) */
@media (max-width: 767px) {
  .ab3 { padding-block: 28px 64px; }
  .ab3__hero { gap: 14px; padding: 8px 0 28px; }
  .ab3__hero h1 { font-size: 27px; line-height: 1.32; }
  .ab3__hero p { font-size: 15px; line-height: 1.65; }
  .ab3__steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-block: 8px; }
@media (min-width: 901px) {
  .ab3 { --ab3-step-gap: clamp(32px, 3.4vw, 48px); --ab3-art-height: 240px; --ab3-stack-gap: 20px; max-width: 1200px; }
  .ab3__steps { gap: var(--ab3-step-gap); }
  .ab3__steps li { gap: var(--ab3-stack-gap); }
  .ab3__art { height: var(--ab3-art-height); padding: 24px; }
  .ab3__art img { width: 100%; }
  .ab3__steps p { margin-top: 4px; }
  /* The line spans the outer number centres; its middle follows the 40px dots after their 8px top margin. */
  .ab3__line { left: calc(12.5% - var(--ab3-step-gap) * .375); width: calc(75% + var(--ab3-step-gap) * .75); top: calc(var(--ab3-art-height) + var(--ab3-stack-gap) + 13px); }
}
  .ab3__steps li { position: relative; }
  .ab3__steps li:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 33px; bottom: -33px; width: 3px; border-radius: 2px; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--primary) 40%, transparent) 0 3px, transparent 3px 12px); }
  .ab3__steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: start; padding-block: 12px 26px; text-align: center; }  /* 2026-11-01 user: each step's words centred beside the path */
  .ab3__dot { grid-column: 1; grid-row: 1; align-self: center; margin: 0; width: 38px; height: 38px; }
  .ab3__steps h2 { grid-column: 1 / -1; grid-row: 1; align-self: center; font-size: 18px; }  /* 2026-11-01 user: the words centred on the whole width, the number beside them */
  .ab3__steps p { grid-column: 1 / -1; grid-row: 2; max-width: none; font-size: 14.5px; text-wrap: pretty; }
  .ab3__art { grid-column: 1 / -1; grid-row: 3; justify-self: center; width: calc(100% - 68px); height: auto; aspect-ratio: 16 / 10; margin-top: 6px; border-radius: 20px; }  /* centred on the screen, clear of the path on the left */
  .ab3__art img { width: 78%; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ab3__art { background: var(--surface-2); } }
:root[data-theme="dark"] .ab3__art { background: var(--surface-2); }
/* 2026-11-01 user (web): Korean letters sit high in their line, so the 학습 통계 icons rise 1px to look level with them */
.hm-stats__grid dt .icon { transform: translateY(-1px); }
/* 2026-11-01 user: 기능 소개 — the window dots count the rows: row 1 lights the first dot, row 2 the middle, row 3 the last */
.fx2-row--1 .fx2-device__bar i:nth-child(1), .fx2-row--2 .fx2-device__bar i:nth-child(2), .fx2-row--3 .fx2-device__bar i:nth-child(3) { background: var(--primary); }
/* 2026-11-01 user (phone): 견적 문의하기 and 해지·환불 안내 sit centred on their own line under the words */
@media (max-width: 767px) { .price-body > .quote-row > .btn, .price-sec > .quote-row > .btn { margin-inline: auto; } }
/* 2026-11-01 user: a word in a section title can be blue (기능 소개 오캡, 가격 안내 골라) */
.sec-head__t em { font-style: normal; color: var(--primary); }
/* 2026-11-01 user: with the pill gone above section titles, each title starts a little higher instead of keeping the pill's room */
.sec-head:first-child { margin-top: -18px; }
@media (max-width: 767px) { .sec-head:first-child { margin-top: -12px; } }

/* 2026-11-01 user: wide-screen class home, simplest form (views-admin.js classHomeWeb; the phone keeps the old home) */
@media (min-width: 768px) {
  .ch-todo { gap: 12px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
  .ch-todo__item + .ch-todo__item { padding-top: 12px; border-top: 1px solid var(--line); }
  .ch-todo__item > strong { display: block; margin-bottom: 8px; }
  .ch-todo__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .ch-week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ch-num { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
  .ch-num .k { font-size: 14px; font-weight: 700; color: var(--ink-2); }
  .ch-num .v { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--ink); }
  .ch-num .v small { font-size: 15px; font-weight: 600; color: var(--muted); }
  .ch-row { display: grid; grid-template-columns: minmax(150px, 1.6fr) repeat(3, 100px) 110px; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
  .mtable li:last-child .ch-row { border-bottom: 0; }
  a.ch-row:hover { background: var(--surface-2); color: var(--ink); }
  .ch-row--head { background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--ink-2); }
  .ch-row__who { display: flex; flex-direction: column; }
  .ch-away { color: var(--warn); font-weight: 700; }
  .ch-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .ch-list-head .lv-pager { padding-top: 0; }
  .ch-list-head .lv-pager button { min-width: 34px; height: 34px; font-size: 14px; }
}

/* 2026-11-01 user: the phone class home lists ten students a page too (views-admin.js chPaged) */
@media (max-width: 767px) {
  .ch-pager { display: flex; justify-content: center; gap: 6px; padding-top: 4px; }
  .ch-pager button { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 15px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
  .ch-pager button[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
  .ch-pager button:disabled { opacity: .4; cursor: default; }
}

/* 2026-11-01 user: phone class home — the class list and its management, no numbers (views-admin.js classHome) */
@media (max-width: 767px) {
  .cm { display: flex; flex-direction: column; gap: 14px; }
  .cm--bar { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .cm-info { margin: -6px 0 2px; font-size: 14.5px; }
  .cm .h-sec { font-size: 19px; }
  .cm-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); }
  .cm-ico--blue { background: var(--primary-soft); color: var(--primary); }
  .cm-consent { padding: 16px; border-radius: var(--radius); background: var(--warn-soft); }
  .cm-card-head { display: flex; gap: 12px; align-items: flex-start; }
  .cm-card-head strong { display: block; font-size: 16.5px; color: var(--warn); }
  .cm-desc { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--warn); text-wrap: balance; }
  .cm-consent ul { margin-top: 10px; }
  .cm-consent li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-top: 1px solid color-mix(in srgb, var(--warn) 20%, transparent); font-weight: 700; color: var(--warn); }
  .cm-consent .check { color: var(--ink); font-weight: 500; }
  .cm-make { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-size: 15px; }
  .cm-make > span:nth-child(2) { flex: 1; min-width: 0; text-wrap: balance; }
  .cm-make .btn { flex: none; min-height: 44px; }
  .cm-sec { gap: 10px; }
  .cm-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
  .cm-head-acts { display: inline-flex; align-items: center; gap: 4px; }
  .cm-count { font-size: 15px; color: var(--muted); margin-right: 8px; }
  .cm-link { min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--primary); cursor: pointer; }
  .cm-selall { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0; padding: 4px 12px; border-radius: 12px; background: var(--primary-soft); font-size: 14px; color: var(--ink-2); }
  .cm-search { position: relative; }
  .cm-search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
  .cm-search .input { padding-left: 42px; }
  .cm-list { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
  .cm-row { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 4px 6px 4px 16px; border-top: 1px solid var(--line); }
  .cm-list > li:first-child .cm-row, .cm-list > li.cm-row:first-child { border-top: 0; }
  .cm-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: var(--ink); text-decoration: none; padding: 6px 0; }
  .cm-who__n { font-size: 16px; font-weight: 700; }
  .cm-who__s { font-size: 13px; color: color-mix(in srgb, var(--muted) 85%, var(--surface)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cm-st { flex: none; font-size: 13px; font-weight: 600; color: var(--muted); }
  .cm-st--wait { color: var(--warn); }
  .cm-more { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); cursor: pointer; }
  .cm-more:active { background: var(--surface-2); }
  .cm-row--pick { cursor: pointer; padding-right: 16px; }
  .cm-row--pick input { flex: none; width: 22px; height: 22px; accent-color: var(--primary); }
  .cm-none { padding: 16px 4px; }
  .cm .lv-pager, .cm .ch-pager { padding-top: 6px; }
  .cm-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(15, 23, 42, .08); }
  .cm-bar .btn { min-height: 48px; }
  .cm-bar .btn--danger { color: var(--bad); border-color: var(--bad); background: var(--surface); }
  .cm-sheet { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .cm-sheet li + li { border-top: 1px solid var(--line); }
  .cm-sheet__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 16px; border: 0; background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); text-align: left; cursor: pointer; }
  .cm-sheet__item span { flex: 1; }
  .cm-sheet__item .icon:last-child { color: var(--muted); width: 18px; height: 18px; }
  .cm-sheet__item.is-danger { color: var(--bad); font-weight: 700; }
  .modal--sheet .modal__actions { flex-wrap: nowrap; }
  .modal--sheet .modal__actions .btn { flex: 1; min-height: 48px; }
  .cm-names { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-weight: 700; text-align: center; }
  .cm-warn { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--warn-soft); color: var(--warn); font-size: 14.5px; font-weight: 600; line-height: 1.5; }
  .cm-creds { display: flex; flex-direction: column; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
  .cm-creds li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 14px; }
  .cm-creds li + li { border-top: 1px solid var(--line); }
  .cm-pw { flex: none; font: 700 17px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: var(--ink); }
  .modal--sheet .seg { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 14px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
  .modal--sheet .seg button { border: 0; border-radius: 10px; background: none; }
  .modal--sheet .seg button[aria-pressed="true"] { background: var(--primary); color: #fff; opacity: 1; }
  .cm-names-in { resize: vertical; min-height: 140px; }
  .modal--sheet .field + .field, .modal--sheet .cm-center + .field { margin-top: 14px; }
  .cm-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font-size: 14px; color: var(--muted); }
  .cm-or::before, .cm-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .cm-file { position: relative; width: 100%; min-height: 48px; border-color: var(--primary); color: var(--primary); }
  .cm-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .cm-center { margin: 6px 0 14px; text-align: center; }
  .cm-center .cm-link { min-height: 32px; padding: 0 2px; font-size: inherit; }
  .cm-young-all { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px; font-weight: 700; cursor: pointer; }
  .cm-young-all input, .cm-confirm input { width: 22px; height: 22px; accent-color: var(--primary); }
  .cm-confirm { border-top: 1px solid var(--line); }
  .cm-confirm li { display: flex; align-items: center; gap: 10px; min-height: 60px; border-bottom: 1px solid var(--line); }
  .cm-confirm .check { flex: none; font-size: 14px; }
  .cm-dup { font-size: 13px; font-weight: 600; color: var(--warn); }
  .cm-pwmode { border: 0; padding: 0; margin: 14px 0 0; }
  .cm-pwmode .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cm-pwmode .seg label { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--line-2); border-radius: 12px; font-size: 15px; cursor: pointer; }
  .cm-pwmode .seg label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
  .cm-pw-same { margin-top: 8px; }  /* the shared password box sits right under 모두 같게 */
  .cm-confirm li { flex-wrap: wrap; }
  .cm-rowpw { flex: 1 0 100%; margin: 0 0 10px; min-height: 44px; }
  .cm-confirm li .cm-rowpw + .cm-rowpw { margin-top: -4px; }
  .cm-count-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .cm-step { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
  .cm-step button { width: 44px; height: 44px; border: 0; background: var(--surface); font: inherit; font-size: 20px; color: var(--ink); cursor: pointer; }
  .cm-step output { min-width: 52px; text-align: center; font-weight: 800; }
  .cm-name-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }  /* 2026-11-01 user: short name boxes side by side, three a row */
  .cm-name-list .input { min-height: 48px; padding: 0 8px; text-align: center; }
  .stats--mem .stat { align-items: center; text-align: center; }  /* 2026-11-01 user: the numbers sit in the middle */
}

/* 2026-11-01 user: settings › 클래스 정보 — how student IDs are made (views-admin.js general) */
.id-mode { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.id-mode__opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; }
.id-mode__opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.id-mode__opt input { margin-top: 3px; accent-color: var(--primary); }
.id-mode__opt > span { display: flex; flex-direction: column; gap: 2px; }

/* School admin (2026-11-02 user): PC web only — a menu column like the settings pages, with a short guide under it. */
.sc { grid-template-columns: 220px minmax(0, 1fr); }
.sc-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 76px; }
.sc .settings__nav { display: flex; flex-direction: column; gap: 4px; position: static; }
.sc-guide { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.sc-guide strong { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.sc-guide strong .icon { width: 16px; height: 16px; }
.sc-guide ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.sc-title { font-size: 24px; font-weight: 800; margin: 0; }
.sc-form { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px 16px; align-items: start; }
.sc-form > label, .sc-form > .field-label { padding-top: 12px; font-weight: 700; }
.sc-form > span:not(.field-label) { padding-top: 12px; }
.sc-short { max-width: 320px; }
.sc-names { max-width: 560px; min-height: 108px; resize: vertical; }
.sc-acts { display: flex; gap: 6px; justify-content: flex-end; }
.sc-count { font-size: 15px; font-weight: 600; }
.sc-sub { font-size: 16px; font-weight: 800; margin: 0; }
.sc-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--good, #1f7a4d); font-weight: 600; }
.sc-ok .icon { width: 16px; height: 16px; }
.sc-warn { color: var(--warn); font-weight: 700; }
.sc-filter { gap: 8px; }
.sc-none { padding: 24px 0; text-align: center; }
.sc-ended { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); }
.sc-ended .icon { flex: none; margin-top: 2px; }
.sc-move select { max-width: 320px; margin-left: 28px; }
.sc .ch-pager { flex-direction: row; position: static; }
.sc th, .sc td, .sc td.num { text-align: left; vertical-align: middle; }
.sc .sc-form .input { max-width: 480px; }
.sc .sc-form .sc-short { max-width: 320px; }
.sc .sc-form .sc-names { max-width: 560px; }

/* PC console for teachers and school admins (2026-11-02 user, 구성은 키위티 참고). */
.cs { min-height: 100vh; background: var(--bg); }
.cs-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 64px; padding-inline: max(24px, env(safe-area-inset-left, 0px)); background: var(--surface); border-bottom: 1px solid var(--line); }
.cs-top__tag { padding: 4px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); font-size: 13px; font-weight: 700; }
.cs-top__r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cs-top__link { color: var(--ink-2); font-weight: 650; font-size: 14px; padding: 8px 10px; }
.cs-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 32px; max-width: 1280px; margin: 0 auto; padding: 28px 24px 64px; align-items: start; }
.cs-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 14px; }
.cs-me { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.cs-me strong { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.cs-me__org { font-size: 12px; font-weight: 700; color: var(--muted); }
.cs-me__pass { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--primary-ink); font-weight: 700; }
.cs-quick { justify-content: center; width: 100%; }
.cs-nav { display: flex; flex-direction: column; gap: 2px; }
.cs-nav a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 12px; color: var(--ink-2); font-weight: 700; font-size: 15px; }
.cs-nav a .icon { width: 19px; height: 19px; color: var(--muted); }
.cs-nav a:hover { background: var(--surface); color: var(--ink); }
.cs-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-ink); }
.cs-nav a[aria-current="page"] .icon { color: var(--primary-ink); }
.cs-guide { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.cs-guide strong { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.cs-guide strong .icon { width: 16px; height: 16px; }
.cs-guide ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.cs-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cs-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cs-head h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.cs-head .icon-btn { align-self: center; }
.cs-desc { font-size: 15px; color: var(--muted); font-weight: 600; }
.cs-desc::before { content: "·"; margin-right: 10px; }
.cs-note { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.cs-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.cs-tabs a { padding: 10px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 700; font-size: 15px; white-space: nowrap; }
.cs-tabs a:hover { color: var(--ink); }
.cs-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.cs-tabs__n { color: var(--primary-ink); }
.cs-hints { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cs .card .sc-form.sc-form--make .input { width: 100%; max-width: 360px; }
.cs .card .sc-form.sc-form--make .sc-xs { max-width: 120px; }
.cs .card .sc-form--make textarea.input { min-height: 84px; }
.cs .card .sc-form--make .input::placeholder { font-size: 14px; }
.cs-mode-btn { margin-left: auto; }
.field > .cs-hints { margin-top: 0; }
.cs-hints li::before { content: "*"; margin-right: 4px; color: var(--primary-ink); font-weight: 700; }
.cs-guide__note { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--muted); }
.cs-content { gap: 16px; }
.cs-card { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; }
.cs-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cs-more { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; }
.cs-more .icon { width: 16px; height: 16px; }
.cs-todo li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cs-todo li:first-child { border-top: 0; padding-top: 0; }
.cs-todo li:last-child { padding-bottom: 0; }
.cs-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cs-cards .ch-num .v, .cs .ch-num .v { font-size: 28px; }
.cs-v-sm { font-size: 22px !important; }
.cs-seats { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--ink); }
.cs-seats .icon { width: 18px; height: 18px; color: var(--primary-ink); }
.cs-ok { color: var(--good); font-weight: 700; font-size: 13px; }
.cs th, .cs td, .cs td.num { text-align: left; vertical-align: middle; }
.cs .cs-cell-pick { width: 44px; padding-right: 0; }
.cs .cs-cell-pick input { width: 18px; height: 18px; }
.cs .cs-cell-go { text-align: right; width: 1%; }
.cs .cs-cell-go a { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-size: inherit; white-space: nowrap; }
.cs table { font-size: 15px; }
.cs .cs-col-no { width: 64px; }
.cs a.cs-name { color: var(--ink); font-weight: 700; }
.cs a.cs-name:hover { color: var(--primary-ink); text-decoration: underline; }
.cs .cs-cell-go .icon { width: 15px; height: 15px; }
.cs tr.is-picked td { background: var(--primary-soft); }
.ts-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 44px; }
.ts-bar__sel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-search { max-width: 280px; }
.ts-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ts-foot .ch-pager { padding-top: 0; }
.cs-period { gap: 6px; }
.cs .sc-form .input { max-width: 480px; }
.cs .sc-form .sc-short { max-width: 320px; }
.cs .sc-form .sc-names { max-width: 560px; }
.cs .ch-away { color: inherit; font-weight: inherit; }
.cs th.cs-c, .cs td.cs-c { text-align: center; }
.cs td.sc-acts { display: table-cell; text-align: right; }
.cs td.sc-acts .btn + .btn { margin-left: 6px; }
.cs .sc-form .sc-xs { max-width: 120px; }
.cs .input--sm { min-height: 38px; padding: 6px 10px; font-size: 14px; max-width: 220px; }
.cs .ch-pager { flex-direction: row; position: static; }
@media (max-width: 1100px) { .cs-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cs-cards > :nth-child(-n+3) { grid-column: span 2; } .cs-cards > :nth-child(n+4) { grid-column: span 3; } }
.cs .card .field > .input, .cs .card .field > select.input { max-width: 480px; }
.cs .id-mode { max-width: 640px; }
@media (max-width: 960px) { .cs-body { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding-inline: 16px; } }
.cs th, .cs td { white-space: nowrap; }
.cs .sc-acts { white-space: nowrap; }
.cs-periodbar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.cs-period .chip .icon { width: 15px; height: 15px; }
.cs-span { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-range { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.cs-range__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-range__row .input { width: 170px; }
.cs-range__quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-range__quick .small { margin-right: 4px; }
.cs-range p { margin: 0; }
.cs-tabrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.cs-tabrow .cs-tabs { border-bottom: 0; }
.cs-tabrow__end { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; }
.cs-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-stat { flex-direction: row; align-items: center; gap: 14px; }
.cs-stat__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-stat__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.cs-stat__icon .icon { width: 22px; height: 22px; }
.cs-stat__icon--blue { background: var(--primary-soft); color: var(--primary); }
.cs-stat__icon--good { background: var(--good-soft); color: var(--good); }
.cs-stat__icon--violet { background: var(--violet-soft); color: var(--violet); }
.cs-stat__icon--warn { background: var(--warn-soft); color: var(--warn); }
.cs-dash { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: stretch; }
.cs-dash > .card { margin: 0; }
.cs-chart { justify-content: flex-start; }
.cs-watch__more { margin-top: auto; }
/* both cards share one height: the plot grows to fill the chart card beside the five-row watch card */
.cs-dash > .cs-chart { display: flex; flex-direction: column; }
.cs-dash .cs-plot { flex: 1; margin-top: 12px; grid-template-rows: minmax(220px, 1fr) auto; }
.cs-dash .cs-plot__y, .cs-dash .cs-plot__area { height: auto; }
.cs-chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.cs-legend { display: inline-flex; gap: 14px; font-size: 13px; color: var(--muted); }
.cs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cs-legend i { width: 10px; height: 10px; border-radius: 50%; }
.cs-legend .is-rev, .cs-plot__bars .is-rev { background: var(--primary); }
.cs-legend .is-saved, .cs-plot__bars .is-saved { background: var(--violet); opacity: .55; }
.cs-plot { display: grid; grid-template-columns: 32px minmax(0, 1fr); row-gap: 8px; }
.cs-plot__y { display: flex; flex-direction: column; justify-content: space-between; height: 220px; font-size: 12px; color: var(--muted); text-align: right; padding-right: 8px; font-variant-numeric: tabular-nums; }
.cs-plot__y span { line-height: 0; }
.cs-plot__area { position: relative; height: 220px; }
.cs-plot__grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.cs-plot__grid i { display: block; border-top: 1px solid var(--line); }
.cs-plot__grid i:last-child { border-top-color: var(--line-2); }
.cs-plot__cols { position: absolute; inset: 0; display: grid; }
.cs-plot__col { display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.cs-plot__bars { display: flex; align-items: flex-end; gap: 4px; height: 100%; width: 100%; max-width: 56px; justify-content: center; }
.cs-plot__bars > span { position: relative; flex: 1 1 0; max-width: 22px; min-height: 0; border-radius: 6px 6px 2px 2px; }
.cs-plot__bars b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 3px; font-size: 12px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cs-plot__x { display: grid; }
.cs-plot__x .wk-lab { min-height: 0; }
.cs-plot__x .is-now > span, .cs-plot__x .is-now small { color: var(--primary-ink); font-weight: 700; }
.cs-plot__x .is-future { opacity: .45; }
.cs-watch ul { display: flex; flex-direction: column; }
.cs-watch li + li { border-top: 1px solid var(--line); }
.cs-watch li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; color: inherit; }
.cs-watch li a .icon { width: 16px; height: 16px; color: var(--muted); }
.cs-watch li a:hover strong { color: var(--primary-ink); }
.cs-watch__who { display: flex; flex-direction: column; gap: 2px; }
.cs-watch__n { font-size: 14px; font-weight: 600; color: var(--primary-ink); margin-left: 4px; }
@media (max-width: 1100px) { .cs-cards.cs-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs .cs-cards.cs-cards--4 > *, .cs .cs-cards.cs-cards--3 > * { grid-column: auto; } .cs-cards.cs-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cs-dash { grid-template-columns: minmax(0, 1fr); } }
.cs-chart-h span { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 2px; font-variant-numeric: tabular-nums; }
.week--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.week--dated { height: 118px; }
.wk-lab { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; line-height: 1.3; white-space: nowrap; min-height: 32px; }
.wk-lab > span { font-size: 13px; color: var(--ink-2); }
.wk-lab small { font-size: 11px; color: var(--muted); }
.week .is-now .wk-lab > span, .week .is-now .wk-lab small, .week .is-now b { color: var(--primary-ink); font-weight: 700; }
.week .is-future { opacity: .45; }
.cs .sc-acts .btn { flex: none; }