/* ─────────────────────────────────────────────────────────────
   지능의 발견 — 화면
   ─────────────────────────────────────────────────────────────
   부트스트랩 5 위에 얹습니다. 여기서는 부트스트랩이 갖고 있지 않은
   것만 정의합니다 — 게이지, 과제 무대, 레이더, 문항 목록.

   색에 대해
   ─────────
   인지검사의 결과에 **빨강과 초록을 쓰지 않습니다.** 그 두 색은
   위험과 안전을 뜻하는데, 여기서 점수가 낮다는 것은 위험하다는
   뜻이 아니기 때문입니다. 평균에서 멀수록 색이 진해질 뿐입니다.
   ───────────────────────────────────────────────────────────── */

:root {
  --brand: #4a3fa8;
  --brand-soft: #eceafb;
  --brand-ink: #2f2670;

  /* 평균에서의 거리 — 좋고 나쁨이 아니다 */
  --lvl-mid: #4a8f7b;
  --lvl-near: #6b7cc4;
  --lvl-far: #8a63b8;
  --lvl-edge: #a8508c;

  --line: rgba(0, 0, 0, .10);
  --line-soft: rgba(0, 0, 0, .06);
  --paper: #fff;
  --paper-2: #f7f7fb;
  --ink-soft: #5c6070;

  /* 읽는 글 한 줄의 최대 폭.
     한 줄이 길어지면 눈이 줄 끝에서 다음 줄 첫 글자로 돌아올 때
     자리를 잃습니다. 한글은 띄어쓰기가 성겨서 더 그렇습니다.
     넓은 화면이라고 글줄까지 늘이면 읽기가 나빠집니다. */
  --measure: 58rem;
}

[data-bs-theme="dark"] {
  --brand: #9b90f0;
  --brand-soft: #241f42;
  --brand-ink: #c6bffa;

  --lvl-mid: #6fc0a6;
  --lvl-near: #93a3e6;
  --lvl-far: #b287d9;
  --lvl-edge: #d180b6;

  --line: rgba(255, 255, 255, .14);
  --line-soft: rgba(255, 255, 255, .08);
  --paper: #1a1a22;
  --paper-2: #14141b;
  --ink-soft: #9aa0b4;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Pretendard',
               'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  word-break: keep-all;
  line-height: 1.72;
}

.skip-link {
  position: absolute; top: .5rem; left: .5rem; z-index: 2000;
  background: var(--brand); color: #fff; padding: .5rem .9rem;
  border-radius: .5rem;
}

.section { padding: 2.6rem 0; }
.sec-title {
  font-size: 1.18rem; font-weight: 700; margin-bottom: .5rem;
  letter-spacing: -.01em;
}
.sec-note { color: var(--ink-soft); font-size: .93rem; margin-bottom: 1rem; }

.btn-brand {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--brand-ink); border-color: var(--brand-ink); color: #fff;
}
[data-bs-theme="dark"] .btn-brand { color: #14121f; }
[data-bs-theme="dark"] .btn-brand:hover { color: #14121f; }
.btn-outline-brand {
  border-color: var(--brand); color: var(--brand); background: transparent;
}
.btn-outline-brand:hover { background: var(--brand); color: #fff; }
[data-bs-theme="dark"] .btn-outline-brand:hover { color: #14121f; }

/* ── 머리 · 꼬리 ────────────────────────────────────────── */
.app-navbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(6px);
}
.app-navbar .navbar-brand {
  font-weight: 700; color: var(--brand); display: flex;
  align-items: center; gap: .45rem;
}
.app-navbar .nav-link { font-size: .95rem; }
.app-navbar .nav-link.active { color: var(--brand); font-weight: 600; }
.btn-nav-icon {
  border: 1px solid var(--line); color: inherit; border-radius: .5rem;
}

.app-footer {
  margin-top: 3rem; padding: 2.5rem 0 2rem;
  border-top: 1px solid var(--line); background: var(--paper-2);
}
.footer-brand { font-weight: 700; color: var(--brand); margin-bottom: .5rem; }
.footer-head { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.footer-links { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.footer-links li { margin-bottom: .3rem; }
.footer-links a { text-decoration: none; color: inherit; }
.footer-links a:hover { color: var(--brand); }

/* ── 첫 화면 ────────────────────────────────────────────── */
.hero {
  padding: 3.2rem 0 2.2rem;
  background: linear-gradient(180deg, var(--brand-soft), transparent);
}
.hero-title {
  font-size: clamp(1.55rem, 4vw, 2.35rem); font-weight: 800;
  line-height: 1.42; letter-spacing: -.02em; margin-bottom: 1rem;
}
.hero-title .accent { color: var(--brand); }
.hero-title em { font-style: normal; text-decoration: underline;
                 text-decoration-thickness: .12em;
                 text-underline-offset: .18em; }
.hero-lead { font-size: 1.03rem; max-width: 46rem; color: var(--ink-soft); }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  font-size: .87rem; color: var(--ink-soft); margin-top: 1rem;
}

.exam-grid {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.exam-card {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.05rem 1.1rem; border: 1px solid var(--line);
  border-radius: .9rem; background: var(--paper);
  text-decoration: none; color: inherit; transition: .15s;
}
.exam-card:hover {
  border-color: var(--brand); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 63, 168, .13);
}
.ec-icon {
  width: 2.7rem; height: 2.7rem; flex: 0 0 auto; border-radius: .7rem;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-size: 1.25rem;
}
.ec-body { flex: 1 1 auto; min-width: 0; }
.ec-name { font-weight: 700; }
.ec-meta {
  display: flex; gap: .8rem; font-size: .82rem; color: var(--ink-soft);
  margin-top: .1rem;
}
.ec-kind {
  border: 1px solid var(--line); border-radius: 1rem;
  padding: 0 .5rem; font-size: .76rem;
}
.ec-go { color: var(--ink-soft); }

.headline-box {
  border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: .8rem; padding: 1.2rem 1.3rem; background: var(--paper);
}
.headline-box.is-big { padding: 1.6rem 1.5rem; }
.hb-title { font-size: 1.08rem; font-weight: 700; margin-bottom: .7rem; }
.hb-body { margin-bottom: .6rem; font-size: .95rem; }
.hb-body:last-of-type { margin-bottom: 0; }

.feature {
  height: 100%; padding: 1.05rem 1.1rem; border: 1px solid var(--line);
  border-radius: .8rem; background: var(--paper);
}
.f-icon { color: var(--brand); font-size: 1.2rem; margin-bottom: .35rem; }
.f-title { font-weight: 700; margin-bottom: .3rem; }
.f-body { font-size: .9rem; color: var(--ink-soft); }

.read-list { display: grid; gap: .4rem; }
.read-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem; border: 1px solid var(--line);
  border-radius: .6rem; text-decoration: none; color: inherit;
  background: var(--paper);
}
.read-item:hover { border-color: var(--brand); }
.ri-name { font-weight: 600; flex: 0 0 auto; }
.ri-short { font-size: .85rem; color: var(--ink-soft); flex: 1 1 auto; }

.stat-list { list-style: none; padding: 0; margin: 0; }
.stat-list li {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line-soft);
}
.s-num {
  font-size: 1.4rem; font-weight: 800; color: var(--brand);
  min-width: 2.6rem; font-variant-numeric: tabular-nums;
}
.s-label { font-size: .9rem; color: var(--ink-soft); }

/* ── 검사 화면 머리 ─────────────────────────────────────── */
.exam-head {
  padding: 2.4rem 0 1.6rem;
  background: linear-gradient(180deg, var(--brand-soft), transparent);
}
.eh-kicker { color: var(--brand); font-weight: 600; font-size: .9rem; }
.eh-title {
  font-size: clamp(1.5rem, 3.6vw, 2rem); font-weight: 800;
  margin: .2rem 0 .5rem;
}
.eh-lead { font-size: 1rem; color: var(--ink-soft); max-width: 44rem; }
.eh-how {
  margin-top: 1.1rem; padding: .9rem 1.1rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: .8rem; max-width: 44rem;
}
.ehh-title { font-weight: 700; font-size: .92rem; margin-bottom: .4rem; }
.eh-how ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.eh-how li { margin-bottom: .25rem; }
.eh-note {
  margin-top: .9rem; font-size: .9rem; color: var(--ink-soft);
  max-width: 44rem; border-left: 3px solid var(--brand);
  padding-left: .8rem;
}

.age-box {
  border: 1px solid var(--line); border-radius: .8rem;
  padding: 1rem 1.1rem; background: var(--paper); margin-bottom: 1.4rem;
  max-width: 34rem;
}
.age-box .opt {
  font-size: .78rem; color: var(--ink-soft); font-weight: 400;
  border: 1px solid var(--line); border-radius: 1rem; padding: 0 .45rem;
}
.age-row { display: flex; align-items: center; gap: .5rem; max-width: 12rem; }
.age-unit { color: var(--ink-soft); }
.age-note { font-size: .84rem; color: var(--ink-soft); margin-top: .55rem; }

/* ── 문항 ───────────────────────────────────────────────── */
.q-group { margin-bottom: 2.4rem; }
.qg-head {
  padding: .9rem 1.1rem; border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: .8rem; background: var(--paper); margin-bottom: 1rem;
}
.qg-name { font-weight: 700; font-size: 1.05rem; }
.qg-lead { font-size: .92rem; margin-top: .15rem; }
.qg-note { font-size: .86rem; color: var(--ink-soft); margin-top: .4rem; }

.q-list { list-style: none; padding: 0; margin: 0; counter-reset: q; }
.q-item {
  counter-increment: q; position: relative;
  padding: 1.1rem 1.1rem 1.1rem 3rem;
  border: 1px solid var(--line); border-radius: .8rem;
  background: var(--paper); margin-bottom: .7rem; transition: .15s;
}
.q-item::before {
  content: counter(q); position: absolute; left: 1rem; top: 1.1rem;
  width: 1.5rem; height: 1.5rem; border-radius: .45rem;
  background: var(--paper-2); color: var(--ink-soft);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.q-item.is-done { border-color: var(--brand); }
.q-item.is-done::before { background: var(--brand); color: #fff; }
[data-bs-theme="dark"] .q-item.is-done::before { color: #14121f; }
.q-item.is-missing {
  border-color: var(--lvl-edge); box-shadow: 0 0 0 3px rgba(168, 80, 140, .18);
}
.q-text { font-size: 1rem; margin-bottom: .7rem; }
.q-ask { font-size: .95rem; margin: .6rem 0; }
.q-hint { font-size: .84rem; color: var(--ink-soft); margin-left: .3rem; }

.seq {
  font-size: 1.2rem; font-weight: 600; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.analogy { font-size: 1.05rem; display: inline-flex; gap: .35rem;
           flex-wrap: wrap; align-items: baseline; }
.analogy .eq-mark { color: var(--brand); font-weight: 700; margin: 0 .3rem; }
.analogy .blank { color: var(--brand); }

.q-fig { margin: .3rem 0 .8rem; }
.q-fig .fig { max-width: 100%; height: auto; color: currentColor; }
.q-fig-base { display: inline-block; text-align: center; }
.qf-caption { font-size: .8rem; color: var(--ink-soft); }

.choices { border: 0; padding: 0; margin: 0; }
.choices-text { display: grid; gap: .35rem; }
.choices-fig {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
  max-width: 34rem;
}
.ch-opt { cursor: pointer; margin: 0; }
.ch-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ch-text {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .8rem; border: 1px solid var(--line);
  border-radius: .55rem; transition: .12s;
}
.ch-num {
  width: 1.4rem; height: 1.4rem; flex: 0 0 auto; border-radius: .35rem;
  background: var(--paper-2); color: var(--ink-soft);
  display: grid; place-items: center; font-size: .76rem; font-weight: 700;
}
.ch-box {
  display: grid; place-items: center; gap: .2rem; padding: .5rem;
  border: 1px solid var(--line); border-radius: .6rem; transition: .12s;
}
.ch-box .fig { color: currentColor; }
.ch-opt input:focus-visible + .ch-text,
.ch-opt input:focus-visible + .ch-box { outline: 2px solid var(--brand); }
.ch-opt input:checked + .ch-text,
.ch-opt input:checked + .ch-box {
  border-color: var(--brand); background: var(--brand-soft);
}
.ch-opt input:checked + .ch-text .ch-num,
.ch-opt input:checked + .ch-box .ch-num { background: var(--brand); color: #fff; }
[data-bs-theme="dark"] .ch-opt input:checked + .ch-text .ch-num,
[data-bs-theme="dark"] .ch-opt input:checked + .ch-box .ch-num { color: #14121f; }
.ch-opt:hover .ch-text, .ch-opt:hover .ch-box { border-color: var(--brand); }

.q-clear {
  margin-top: .6rem; border: 0; background: none; padding: 0;
  font-size: .8rem; color: var(--ink-soft); cursor: pointer;
}
.q-clear:hover { color: var(--brand); text-decoration: underline; }

/* 리커트 */
.likert-legend {
  display: none; position: sticky; top: 3.6rem; z-index: 5;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: .6rem; padding: .45rem .5rem; margin-bottom: .7rem;
  font-size: .74rem; color: var(--ink-soft);
}
.likert-legend span { flex: 1 1 0; text-align: center; }
@media (min-width: 768px) { .likert-legend { display: flex; } }

.likert { border: 0; padding: 0; margin: 0; display: flex; gap: .3rem; }
.lk-opt {
  flex: 1 1 0; cursor: pointer; margin: 0; text-align: center;
  border: 1px solid var(--line); border-radius: .5rem;
  padding: .5rem .2rem; transition: .12s;
}
.lk-opt:hover { border-color: var(--brand); }
.lk-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.lk-dot {
  display: block; width: .85rem; height: .85rem; margin: 0 auto .25rem;
  border-radius: 50%; border: 2px solid var(--line);
}
.lk-label { font-size: .74rem; color: var(--ink-soft); }
.lk-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.lk-opt:has(input:checked) .lk-dot { background: var(--brand); border-color: var(--brand); }
.lk-opt:has(input:focus-visible) { outline: 2px solid var(--brand); }
@media (min-width: 768px) { .lk-label { font-size: .78rem; } }

/* 폼 꼬리 */
.form-tail {
  position: sticky; bottom: 0; z-index: 10;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: .9rem; padding: 1rem 1.1rem; margin-top: 1.4rem;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .06);
}
.progress-line { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.pl-bar {
  flex: 1 1 auto; height: .45rem; background: var(--paper-2);
  border-radius: 1rem; overflow: hidden;
}
.pl-fill { height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.pl-text { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }
.form-warn {
  font-size: .88rem; color: var(--lvl-edge); margin-bottom: .6rem;
}
.tail-note { font-size: .82rem; color: var(--ink-soft); margin: .5rem 0 0; }

.timer {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 20;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: .7rem; padding: .5rem .8rem; text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}
.tm-time {
  font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.timer.is-over .tm-time { color: var(--lvl-far); }
.tm-note { font-size: .68rem; color: var(--ink-soft); }
@media (max-width: 575px) { .timer { display: none; } }

/* ── 기억력 과제 무대 ───────────────────────────────────── */
body.in-task { overflow-x: hidden; }
.mem-stage {
  min-height: 78vh; display: flex; flex-direction: column;
  max-width: 46rem; margin: 1.2rem auto; padding: 0 1rem;
}
.ms-top {
  display: flex; align-items: center; gap: .8rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.ms-task { font-weight: 700; flex: 1 1 auto; }
.ms-steps { display: flex; gap: .25rem; }
.ms-step {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--line); display: block;
}
.ms-step.is-done { background: var(--brand); opacity: .5; }
.ms-step.is-now { background: var(--brand); transform: scale(1.35); }
.ms-quit {
  border: 0; background: none; color: var(--ink-soft); cursor: pointer;
  padding: .2rem .4rem;
}
.ms-body {
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  padding: 2rem 0; text-align: center; min-height: 22rem;
}
.ms-foot {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding-bottom: 1.4rem;
}
.ms-cue { font-size: 1rem; color: var(--ink-soft); }
.ms-hint { font-size: .85rem; color: var(--ink-soft); }
.ms-note { font-size: .82rem; color: var(--ink-soft); }
.ms-tick { font-size: 2rem; color: var(--brand); opacity: .55; }

.brief { text-align: left; max-width: 34rem; }
.brief-title { font-size: 1.25rem; font-weight: 800; margin-bottom: .7rem; }
.brief-list { padding-left: 1.1rem; margin: 0; }
.brief-list li { margin-bottom: .45rem; }

.digit-slot {
  font-size: clamp(3.4rem, 14vw, 5.4rem); font-weight: 700; line-height: 1;
  min-height: 5.6rem; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.digit-slot.is-on { color: var(--brand); }
.input-digits {
  font-size: 1.5rem; text-align: center; letter-spacing: .3em;
  max-width: 15rem; font-variant-numeric: tabular-nums;
}
.word-slot {
  font-size: clamp(2rem, 8vw, 3rem); font-weight: 700; line-height: 1.2;
  min-height: 4.4rem; display: grid; place-items: center;
}
.word-slot.is-on { color: var(--brand); }
.input-words { max-width: 26rem; font-size: 1rem; }

/* 칸 수는 자바스크립트가 정합니다 (기본 4×4). 3×3 으로는
   「맞닿은 칸이 이어지지 않게」가 지켜지지 않기 때문입니다 — 까닭은
   items/memory.py 에 적어 두었습니다. */
.corsi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
  width: min(21rem, 82vw);
}
.corsi-cell {
  aspect-ratio: 1; border: 2px solid var(--line); border-radius: .6rem;
  background: var(--paper-2); transition: .1s;
}
.corsi-cell.is-on { background: var(--brand); border-color: var(--brand); }
.corsi-cell.is-picked { background: var(--brand-soft); border-color: var(--brand); }
.corsi-cell:not(:disabled):hover { border-color: var(--brand); }

.nback-slot {
  font-size: clamp(3.4rem, 14vw, 5.4rem); font-weight: 700; line-height: 1;
  min-height: 5.6rem; display: grid; place-items: center;
}
.nback-slot.is-on { color: var(--brand); }
.nback-slot.is-hit { text-shadow: 0 0 1.4rem var(--brand); }
.nback-bar {
  width: min(22rem, 76vw); height: .3rem; background: var(--paper-2);
  border-radius: 1rem; overflow: hidden;
}
.nback-bar-fill { height: 100%; width: 0; background: var(--brand); }
.nback-hit { min-width: 12rem; }

.recog-grid {
  display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr));
  width: min(34rem, 90vw);
}
.recog-word {
  padding: .55rem .3rem; border: 1px solid var(--line);
  border-radius: .55rem; background: var(--paper); transition: .12s;
}
.recog-word:hover { border-color: var(--brand); }
.recog-word.is-picked { background: var(--brand-soft); border-color: var(--brand);
                        font-weight: 600; }

.pair-slot {
  font-size: clamp(1.4rem, 6vw, 2.2rem); font-weight: 700;
  min-height: 4rem; display: flex; align-items: center;
  justify-content: center; gap: .8rem;
}
.pair-slot.is-on .pair-left, .pair-slot.is-on .pair-right { color: var(--brand); }
.pair-link { color: var(--ink-soft); font-weight: 400; }
.pair-ask {
  font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 700;
  color: var(--brand);
}
.pair-grid {
  display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr));
  width: min(30rem, 90vw);
}
.pair-choice {
  padding: .6rem .4rem; border: 1px solid var(--line);
  border-radius: .55rem; background: var(--paper); transition: .12s;
}
.pair-choice:not(:disabled):hover { border-color: var(--brand); }
.pair-choice.is-picked { background: var(--brand); border-color: var(--brand);
                         color: #fff; }
[data-bs-theme="dark"] .pair-choice.is-picked { color: #14121f; }

.task-list { list-style: none; padding: 0; margin: 0; counter-reset: t; }
.task-item {
  counter-increment: t; display: flex; gap: .9rem; align-items: flex-start;
  padding: .8rem 1rem; border: 1px solid var(--line);
  border-radius: .7rem; margin-bottom: .5rem; background: var(--paper);
}
.task-item > i { color: var(--brand); font-size: 1.15rem; margin-top: .15rem; }
.ti-name { font-weight: 600; }
.ti-lead { font-size: .88rem; color: var(--ink-soft); }
.start-box {
  margin-top: 1.6rem; padding: 1.3rem; border: 1px solid var(--line);
  border-radius: .9rem; background: var(--paper);
}

/* ── 결과 ───────────────────────────────────────────────── */
.result-head {
  padding: 2.4rem 0 1.4rem;
  background: linear-gradient(180deg, var(--brand-soft), transparent);
}
.rh-kicker { color: var(--brand); font-weight: 600; font-size: .9rem; }
.rh-title {
  font-size: clamp(1.5rem, 3.6vw, 2rem); font-weight: 800;
  margin: .2rem 0 .5rem;
}
.rh-lead { color: var(--ink-soft); max-width: 46rem; }

.norm-badge {
  display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline;
  border: 1px solid var(--line); border-radius: .7rem;
  padding: .65rem .9rem; margin-bottom: 1.2rem; font-size: .87rem;
  background: var(--paper);
}
.norm-badge.kind-design { border-left: 4px solid var(--lvl-far); }
.norm-badge.kind-literature { border-left: 4px solid var(--lvl-mid); }
.nb-label { font-weight: 700; white-space: nowrap; }
.nb-body { color: var(--ink-soft); flex: 1 1 16rem; }

.score-gauge {
  border: 1px solid var(--line); border-radius: .9rem;
  padding: 1.1rem 1.2rem; background: var(--paper);
}
.score-gauge.is-big { padding: 1.6rem 1.4rem; }
.gauge-head {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin-bottom: .9rem;
}
.gauge-score .num {
  font-size: clamp(2.4rem, 9vw, 3.6rem); font-weight: 800; line-height: 1;
  color: var(--brand); font-variant-numeric: tabular-nums;
}
.gauge-score .ci { font-size: .95rem; color: var(--ink-soft); margin-left: .4rem; }
.gauge-band {
  font-weight: 700; font-size: 1.02rem; padding: .15rem .7rem;
  border-radius: 1rem; border: 1px solid currentColor;
}
.score-gauge.lvl-mid .gauge-band { color: var(--lvl-mid); }
.score-gauge.lvl-near .gauge-band { color: var(--lvl-near); }
.score-gauge.lvl-far .gauge-band { color: var(--lvl-far); }
.score-gauge.lvl-edge .gauge-band { color: var(--lvl-edge); }

.gauge-track {
  position: relative; height: 1.5rem; border-radius: 1rem;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--lvl-edge) 22%, transparent),
    color-mix(in srgb, var(--lvl-mid) 24%, transparent) 50%,
    color-mix(in srgb, var(--lvl-edge) 22%, transparent));
}
.gauge-mid {
  position: absolute; top: -.25rem; bottom: -.25rem; width: 2px;
  background: var(--ink-soft); opacity: .5; transform: translateX(-1px);
}
.gauge-ci {
  position: absolute; top: .35rem; bottom: .35rem;
  background: var(--brand); opacity: .22; border-radius: 1rem;
}
.gauge-pin {
  position: absolute; top: -.3rem; bottom: -.3rem; width: .32rem;
  background: var(--brand); border-radius: 1rem;
  transform: translateX(-.16rem);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.gauge-scale {
  display: flex; justify-content: space-between; font-size: .72rem;
  color: var(--ink-soft); margin-top: .35rem;
  font-variant-numeric: tabular-nums;
}
.gauge-scale .is-mid { font-weight: 700; color: inherit; }
.gauge-foot {
  display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .7rem;
  font-size: .92rem;
}
.gauge-foot .rare { color: var(--ink-soft); }

.ci-note {
  font-size: .88rem; color: var(--ink-soft); margin: .8rem 0 0;
  border-left: 3px solid var(--line); padding-left: .8rem;
}

.notice-stack { display: grid; gap: .6rem; margin-top: 1.2rem; }
.notice {
  border: 1px solid var(--line); border-radius: .7rem;
  padding: .8rem 1rem; background: var(--paper);
}
.notice-warn { border-left: 4px solid var(--lvl-edge); }
.notice-note { border-left: 4px solid var(--lvl-near); }
/* 「됐습니다」. 초록을 쓰지 않는 것은 점수 화면에서의 약속이고,
   여기는 점수가 아니라 **한 일이 끝났다**는 알림이라 씁니다. */
.notice-ok { border-left: 4px solid var(--lvl-mid); }
.notice-head { font-weight: 700; margin-bottom: .25rem; }
.notice-warn .notice-head { color: var(--lvl-edge); }
.notice-note .notice-head { color: var(--lvl-near); }
.notice-ok .notice-head { color: var(--lvl-mid); }
.notice-body { font-size: .92rem; }

.spread-box {
  border: 1px solid var(--line); border-radius: .7rem;
  padding: .8rem 1rem; margin-bottom: 1rem; background: var(--paper);
}
.spread-box.is-uneven { border-left: 4px solid var(--lvl-far); }
.sp-head {
  font-weight: 700; display: flex; gap: .8rem; flex-wrap: wrap;
  align-items: baseline;
}
.sp-range { font-weight: 400; font-size: .85rem; color: var(--ink-soft); }
.sp-body { font-size: .92rem; margin-top: .3rem; }

.part-list { display: grid; gap: .2rem; }
.part-row {
  padding: .8rem 0 .5rem; border-top: 1px solid var(--line-soft);
}
.part-head { display: flex; align-items: baseline; gap: .5rem; }
.part-head i { color: var(--brand); }
.part-name { font-weight: 600; flex: 1 1 auto; }
.part-raw {
  font-size: .82rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.part-bar {
  position: relative; height: .55rem; border-radius: 1rem;
  background: var(--paper-2); margin: .45rem 0 .35rem; overflow: hidden;
}
.part-mid {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--ink-soft); opacity: .45; z-index: 2;
}
.part-fill { height: 100%; border-radius: 1rem; background: var(--lvl-near); }
.part-row.lvl-mid .part-fill { background: var(--lvl-mid); }
.part-row.lvl-near .part-fill { background: var(--lvl-near); }
.part-row.lvl-far .part-fill { background: var(--lvl-far); }
.part-row.lvl-edge .part-fill { background: var(--lvl-edge); }
.part-tail {
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: baseline;
  font-size: .85rem; color: var(--ink-soft);
}
.part-score {
  font-size: 1.05rem; font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.part-explain { padding: 0 0 .8rem; font-size: .87rem; }
.pe-lead { color: inherit; }
.pe-note { color: var(--ink-soft); margin-top: .2rem; }

.deep-note {
  font-size: .88rem; color: var(--ink-soft); border-left: 3px solid var(--line);
  padding-left: .8rem; margin: .8rem 0;
}
.deep-note.is-warn { border-left-color: var(--lvl-far); }
.deep-card {
  border: 1px solid var(--line); border-radius: .8rem;
  padding: 1.1rem 1.2rem; background: var(--paper); margin-bottom: .9rem;
}
.dc-title { font-weight: 700; font-size: 1.02rem; }
.dc-lead { font-size: .9rem; color: var(--ink-soft); margin-top: .15rem; }
.dc-figure { margin: .9rem 0; }
.ret-bar {
  height: 1.1rem; background: var(--paper-2); border-radius: 1rem;
  overflow: hidden;
}
.ret-fill { height: 100%; background: var(--brand); border-radius: 1rem; }
.ret-num { display: flex; gap: .6rem; align-items: baseline; margin-top: .4rem; }
.ret-num b { font-size: 1.3rem; color: var(--brand); }
.ret-num span { font-size: .85rem; color: var(--ink-soft); }
.dc-grid {
  display: grid; gap: .6rem; margin: .9rem 0;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.dg-num { font-size: 1.5rem; font-weight: 800; color: var(--brand); }
.dg-lab { font-size: .8rem; color: var(--ink-soft); display: block; }
.dc-read { font-size: .93rem; margin-top: .5rem; }
.dc-note {
  font-size: .85rem; color: var(--ink-soft); margin-top: .5rem;
  border-top: 1px solid var(--line-soft); padding-top: .5rem;
}
.learn-rounds {
  display: flex; gap: 1.2rem; align-items: flex-end; height: 8rem;
  margin: 1rem 0 .3rem; padding-left: .3rem;
}
.lr-col { display: flex; flex-direction: column; align-items: center;
          justify-content: flex-end; height: 100%; }
.lr-bar { width: 2.6rem; background: var(--brand); border-radius: .3rem .3rem 0 0;
          min-height: .2rem; }
.lr-num { font-weight: 700; font-size: .9rem; margin-top: .2rem; }
.lr-lab { font-size: .76rem; color: var(--ink-soft); }

.selfreport {
  border: 1px solid var(--line); border-left: 4px solid var(--lvl-far);
  border-radius: .8rem; padding: 1.2rem 1.3rem; background: var(--paper);
}
.sr-title { font-size: 1.08rem; font-weight: 700; margin-bottom: .7rem; }
.sr-body { font-size: .95rem; margin-bottom: .6rem; }
.sr-body:last-child { margin-bottom: 0; }

.sugg-card {
  border: 1px solid var(--line); border-radius: .7rem;
  padding: .9rem 1.1rem; margin-bottom: .6rem; background: var(--paper);
}
.sg-name { font-weight: 700; color: var(--brand); margin-bottom: .3rem; }
.sugg-card ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }

.says {
  height: 100%; border: 1px solid var(--line); border-radius: .7rem;
  padding: .9rem 1.1rem; background: var(--paper);
}
.says-2 { border-left: 4px solid var(--lvl-edge); }
.sy-title { font-weight: 700; margin-bottom: .25rem; }
.sy-body { font-size: .92rem; color: var(--ink-soft); }

.caveat-list { display: grid; gap: .5rem; margin: 1.2rem 0; }
.caveat { border-left: 3px solid var(--line); padding-left: .9rem; }
.cv-title { font-weight: 600; }
.cv-title i { color: var(--brand); }
.cv-body { font-size: .9rem; color: var(--ink-soft); }

.review-group {
  border: 1px solid var(--line); border-radius: .7rem;
  margin-bottom: .5rem; background: var(--paper);
}
.review-group > summary {
  padding: .75rem 1rem; cursor: pointer; font-weight: 600;
  display: flex; align-items: center; gap: .4rem;
}
.rg-count {
  margin-left: auto; font-weight: 400; font-size: .84rem;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.review-body { padding: 0 1rem 1rem; }
.rv-item {
  display: flex; gap: .7rem; padding: .55rem 0;
  border-top: 1px solid var(--line-soft);
}
.rv-mark {
  width: 1.5rem; height: 1.5rem; flex: 0 0 auto; border-radius: .4rem;
  display: grid; place-items: center; font-size: .8rem;
}
.rv-ok .rv-mark { background: color-mix(in srgb, var(--lvl-mid) 22%, transparent);
                  color: var(--lvl-mid); }
.rv-no .rv-mark { background: color-mix(in srgb, var(--lvl-edge) 22%, transparent);
                  color: var(--lvl-edge); }
.rv-skip .rv-mark { background: var(--paper-2); color: var(--ink-soft); }
.rv-answer { font-weight: 600; font-size: .9rem; }
.rv-rule { font-size: .87rem; color: var(--ink-soft); }

.next-box {
  border: 1px solid var(--line); border-radius: .9rem;
  padding: 1.2rem 1.3rem; background: var(--paper-2);
}
.nb-title { font-weight: 700; margin-bottom: .3rem; }
.nb-body { font-size: .92rem; color: var(--ink-soft); }
.nb-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }

/* ── 리포트 ─────────────────────────────────────────────── */
.rep-loading {
  display: flex; align-items: center; gap: .8rem;
  color: var(--ink-soft); padding: 2rem 0;
}
.empty-box {
  text-align: center; padding: 2.6rem 1rem; border: 1px dashed var(--line);
  border-radius: .9rem;
}
.empty-box > i { font-size: 2.2rem; color: var(--ink-soft); }
.eb-title { font-weight: 700; margin-top: .5rem; }
.eb-body { font-size: .9rem; color: var(--ink-soft); }

.nototal {
  border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: .8rem; padding: 1.2rem 1.3rem; background: var(--paper);
}
.nt-title { font-size: 1.08rem; font-weight: 700; margin-bottom: .7rem; }
.nt-body { font-size: .95rem; margin-bottom: .6rem; }
.nt-body:last-child { margin-bottom: 0; }

.radar { width: 100%; height: auto; max-width: 22rem; margin: 0 auto;
         display: block; }
.radar-ring { fill: none; stroke: var(--line); stroke-width: .006; }
.radar-ring.is-mid { stroke: var(--ink-soft); stroke-width: .009; opacity: .6; }
.radar-spoke { stroke: var(--line); stroke-width: .006; }
.radar-area {
  fill: color-mix(in srgb, var(--brand) 26%, transparent);
  stroke: var(--brand); stroke-width: .016; stroke-linejoin: round;
}
.radar-dot { fill: var(--brand); }
.radar-label { font-size: .1px; fill: currentColor; font-weight: 700; }
.radar-value { font-size: .09px; fill: var(--brand); font-weight: 700; }
.radar-center { font-size: .07px; fill: var(--ink-soft); }
.radar-note { font-size: .82rem; color: var(--ink-soft); margin-top: .6rem; }
.radar-wait {
  border: 1px dashed var(--line); border-radius: .9rem; padding: 2rem 1rem;
  text-align: center; color: var(--ink-soft); font-size: .9rem;
}
.radar-wait > i { font-size: 2rem; display: block; margin-bottom: .4rem; }

.rep-rows { display: grid; gap: .6rem; }
.rep-row {
  border: 1px solid var(--line); border-radius: .8rem;
  padding: .9rem 1.1rem; background: var(--paper);
  border-left: 4px solid var(--lvl-near);
}
.rep-row.lvl-mid { border-left-color: var(--lvl-mid); }
.rep-row.lvl-near { border-left-color: var(--lvl-near); }
.rep-row.lvl-far { border-left-color: var(--lvl-far); }
.rep-row.lvl-edge { border-left-color: var(--lvl-edge); }
.rep-row.is-missing { border-left-color: var(--line); opacity: .8; }
.rr-top { display: flex; gap: .6rem; align-items: baseline; }
.rr-name { font-weight: 700; }
.rr-kind {
  font-size: .74rem; color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 1rem; padding: 0 .45rem;
}
.rr-score { display: flex; align-items: baseline; gap: .4rem; margin-top: .2rem; }
.rr-abbr { font-size: .8rem; color: var(--ink-soft); font-weight: 700; }
.rr-num {
  font-size: 1.8rem; font-weight: 800; color: var(--brand); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rr-ci { font-size: .85rem; color: var(--ink-soft); }
.rr-band { font-size: .88rem; }
.rr-norm { font-size: .78rem; color: var(--ink-soft); margin-top: .25rem; }
.rr-none { font-size: .88rem; color: var(--ink-soft); margin: .2rem 0 .5rem; }

.cmp-list { display: grid; gap: .5rem; }
.cmp {
  border: 1px solid var(--line); border-radius: .7rem;
  padding: .8rem 1rem; background: var(--paper);
}
.cmp.is-real { border-left: 4px solid var(--lvl-far); }
.cm-pair { font-weight: 700; display: flex; gap: .5rem; align-items: baseline; }
.cm-vs { font-size: .76rem; color: var(--ink-soft); font-weight: 400; }
.cm-gap {
  font-size: .84rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.cm-text { font-size: .92rem; margin-top: .2rem; }

.mark-box {
  height: 100%; border: 1px solid var(--line); border-radius: .7rem;
  padding: .9rem 1.1rem; background: var(--paper);
}
.mark-box.is-high { border-left: 4px solid var(--lvl-mid); }
.mark-box.is-low { border-left: 4px solid var(--lvl-far); }
.mb-title { font-weight: 700; margin-bottom: .3rem; }
.mark-box ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.mb-none { font-size: .88rem; color: var(--ink-soft); }

.closing {
  border: 1px solid var(--line); border-radius: .9rem;
  padding: 1.3rem 1.4rem; background: var(--paper-2);
}
.cl-title { font-size: 1.08rem; font-weight: 700; margin-bottom: .6rem; }
.cl-list { padding-left: 1.1rem; font-size: .93rem; }
.cl-list li { margin-bottom: .35rem; }
.cl-body { font-size: .95rem; margin: .8rem 0 0; }

.storage-box, .history-box {
  border: 1px solid var(--line); border-radius: .8rem;
  padding: 1.1rem 1.2rem; background: var(--paper); margin-bottom: .8rem;
}
.st-title, .hb-title { font-weight: 700; margin-bottom: .5rem; }
.st-body { font-size: .9rem; color: var(--ink-soft); margin-bottom: .4rem; }
.st-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.st-warn { font-size: .88rem; color: var(--lvl-edge); margin-top: .6rem; }
.hb-lead { font-size: .9rem; color: var(--ink-soft); }
.hb-body { margin: .8rem 0; }
.hb-none { font-size: .88rem; color: var(--ink-soft); }
.hb-note {
  font-size: .85rem; color: var(--ink-soft);
  border-top: 1px solid var(--line-soft); padding-top: .5rem;
}
.hist-row {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .5rem 0; border-bottom: 1px solid var(--line-soft);
}
.hr-name { font-weight: 700; width: 2.4rem; }
.hr-line { display: flex; gap: .3rem; flex: 1 1 auto; }
.hr-dot {
  min-width: 2.3rem; text-align: center; padding: .1rem .3rem;
  border: 1px solid var(--line); border-radius: .4rem; font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.hr-dot.is-last { border-color: var(--brand); color: var(--brand);
                  font-weight: 700; }
.hr-diff { font-size: .82rem; color: var(--ink-soft); }
.hr-diff.up { color: var(--lvl-far); }
.hr-diff.down { color: var(--lvl-near); }

/* ── 근거 페이지 ────────────────────────────────────────── */
.src-card {
  border: 1px solid var(--line); border-radius: .8rem;
  padding: 1.1rem 1.2rem; margin-bottom: .9rem; background: var(--paper);
}
.sc-head { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .7rem; }
.sc-name { font-weight: 700; font-size: 1.05rem; }
.sc-kind {
  font-size: .76rem; color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 1rem; padding: 0 .5rem;
}
.sc-col-title { font-weight: 700; font-size: .9rem; color: var(--lvl-mid); }
.sc-col-title.is-limit { color: var(--lvl-edge); }
.sc-list { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.sc-list li { margin-bottom: .35rem; }

.closing-line { font-size: .95rem; margin-top: 1rem; font-weight: 600; }

.privacy-box {
  border: 1px solid var(--line); border-left: 4px solid var(--lvl-mid);
  border-radius: .8rem; padding: 1.1rem 1.2rem; background: var(--paper);
}
.pv-list { margin: 0; padding-left: 1.1rem; font-size: .93rem; }
.pv-list li { margin-bottom: .4rem; }
.pv-tradeoff {
  margin-top: .7rem; padding-top: .7rem; font-size: .9rem;
  border-top: 1px solid var(--line-soft); color: var(--ink-soft);
}

.gen-list { display: grid; gap: .6rem; }
.gen { border-left: 3px solid var(--brand); padding-left: .9rem; }
.gn-title { font-weight: 600; }
.gn-body { font-size: .9rem; color: var(--ink-soft); }

.cr-col-title { font-weight: 700; margin-bottom: .3rem; }
.cr-list { padding-left: 1.1rem; font-size: .9rem; }
.cr-list li { margin-bottom: .3rem; }

.help-box {
  border: 1px solid var(--line); border-radius: .9rem;
  padding: 1.3rem 1.4rem; background: var(--paper-2);
}
.hp-title { font-size: 1.08rem; font-weight: 700; margin-bottom: .5rem; }
.hp-body { font-size: .95rem; }
.hp-when { margin: .8rem 0; }
.hpw-title { font-weight: 600; font-size: .92rem; }
.hp-when ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.hp-where { display: grid; gap: .3rem; margin: .9rem 0; }
.hpw {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .5rem .8rem; border: 1px solid var(--line);
  border-radius: .5rem; background: var(--paper);
}
.hpw-name { font-weight: 600; }
.hpw-note { font-size: .82rem; color: var(--ink-soft); }
.hp-note { font-size: .87rem; color: var(--ink-soft); }

.disclaimer {
  border: 1px solid var(--line); border-radius: .7rem;
  padding: .9rem 1.1rem; font-size: .92rem; background: var(--paper);
}

/* ── 용어 ───────────────────────────────────────────────── */
.term-search { display: flex; gap: .5rem; margin-bottom: 1.4rem; max-width: 30rem; }
.term-group { margin-bottom: 1.8rem; }
.tg-title { font-size: 1.02rem; font-weight: 700; margin-bottom: .5rem; }
.term-list { display: grid; gap: .4rem; }
.term-item {
  display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap;
  padding: .65rem .9rem; border: 1px solid var(--line);
  border-radius: .6rem; text-decoration: none; color: inherit;
  background: var(--paper);
}
.term-item:hover { border-color: var(--brand); }
.term-item .ti-name { font-weight: 600; flex: 0 0 auto; }
.term-item .ti-short { font-size: .87rem; color: var(--ink-soft); }

.crumb {
  display: flex; gap: .4rem; align-items: center; font-size: .85rem;
  color: var(--ink-soft); margin-bottom: 1rem;
}
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--brand); }
.term-page { max-width: 44rem; }
.tp-name { font-size: 1.7rem; font-weight: 800; }
.tp-short { font-size: 1.02rem; color: var(--brand); font-weight: 600; }
.tp-body { font-size: .98rem; margin-top: .8rem; }
.tp-block { margin-top: 1.6rem; }
.tpb-title { font-weight: 700; margin-bottom: .5rem; }

.term-chips, .exam-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 1rem;
  font-size: .87rem; text-decoration: none; color: inherit;
  background: var(--paper);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip-exam { font-weight: 600; }

/* ── 오류 ───────────────────────────────────────────────── */
.error-box {
  text-align: center; padding: 3rem 1rem; max-width: 34rem; margin: 0 auto;
}
.error-box.is-soft {
  border: 1px solid var(--line); border-radius: .9rem;
  background: var(--paper); padding: 2.2rem 1.4rem;
}
.er-code { font-size: 3.4rem; font-weight: 800; color: var(--brand); }
.er-icon { font-size: 2.2rem; color: var(--lvl-edge); }
.er-title { font-size: 1.2rem; font-weight: 700; margin-top: .4rem; }
.er-message { color: var(--ink-soft); margin: .5rem 0 1.2rem; }
.er-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* ── 접기 ───────────────────────────────────────────────── */
.explain {
  border: 1px solid var(--line); border-radius: .7rem;
  padding: .2rem .3rem; background: var(--paper); margin: .6rem 0;
}
.explain > summary { padding: .55rem .8rem; cursor: pointer; font-weight: 600; }
.explain-body { padding: 0 .9rem .8rem; font-size: .92rem; }

/* 인쇄 — 결과를 종이로 남기고 싶을 때. 화면 장치는 지웁니다. */
/* 인쇄 규칙은 static/css/print.css 로 옮겼습니다.
   화면에 있는 것을 종이에 옮기는 일은 「몇 가지를 감추기」로 끝나지
   않아서, 따로 두고 제대로 썼습니다. */

/* 움직임을 줄이는 설정을 켠 사용자에게는 전환을 없앱니다. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── 넓은 화면 ──────────────────────────────────────────────
   화면이 넓어지면 두 가지를 따로 다뤄야 합니다.

     레이아웃  카드가 늘어선 곳은 넓을수록 좋습니다. 부트스트랩의
               .container 는 1320px 에서 멈춰서, 1920px 짜리 화면에서는
               양옆에 300px 씩 빈 띠가 남습니다.
     글줄      반대입니다. 한 줄이 길어지면 읽기가 나빠집니다.

   그래서 **틀은 넓히고 글줄은 넓히지 않습니다.** 둘을 한꺼번에
   늘이면 1300px 짜리 문단이 생기는데, 그것이 지금까지의 모습이었습니다.
   ───────────────────────────────────────────────────────── */

@media (min-width: 1600px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl,
  .container-xxl { max-width: 1480px; }
}
@media (min-width: 2100px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl,
  .container-xxl { max-width: 1680px; }
}

/* 글줄의 폭. 넓히지 않는 쪽입니다.
   한 덩어리로 읽는 글 — 문단이 이어지는 상자와 안내문 — 만 잡습니다.
   카드 안의 짧은 글은 카드가 이미 좁으므로 건드리지 않습니다. */
.hero-title { max-width: 46rem; }
.headline-box,
.privacy-box,
.worried-link,
.storage-box,
.gen-list,
.disclaimer,
.closing-line,
.sec-note,
.prose { max-width: var(--measure); }

/* 각주처럼 붙는 작은 글. 본문보다 글자가 작아 더 빨리 길어집니다. */
.footer-note,
.tail-note,
.pb-lead,
p.small.text-body-secondary { max-width: 52rem; }

/* 문항과 과제 목록. **여기가 가장 중요합니다.**
   문항이 1680px 로 늘어나면 지문은 왼쪽 끝에, 고를 보기는 오른쪽
   끝에 있게 됩니다. 눈이 그 사이를 오가느라 틀리는 것은 문항이
   어려워서가 아닙니다 — 그러면 재는 것이 달라집니다.

   58rem 이 아니라 72rem 인 이유: 1366px 화면에서 지금 1140px 로
   나오고 있고 그 폭에서 잘 읽힙니다. 여기서 더 좁히면 넓은 화면을
   고치려다 지금 잘 되던 화면을 망가뜨립니다. */
.q-list,
.task-list,
.collect-box,
.cb-list { max-width: 72rem; }