/* =========================================================
   검열현상 · 생존자 캠프 기록 보관소
   ========================================================= */

:root {
  /* 종이 · 잉크 */
  --desk: #262523;
  --paper: #ece8df;
  --card: #f6f3ec;
  --card-2: #e6e1d6;
  --ink: #111;
  --text: #1b1b1d;
  --text-2: #3f3d39;
  --muted: #5d5a54;
  --faint: #8a857c;
  --line: #cfc9bc;
  --line-2: #e0dacd;
  --dash: #bdb6a8;
  --track: #d8d2c5;

  /* 경고색 */
  --red: #b3261e;
  --red-l: #ff6b5e;
  --amber: #b7791f;
  --amber-d: #8a5a14;
  --gray: #7a766e;

  /* 캐릭터 */
  --sien: #3f6b52;
  --terikin: #a2452c;
  --flora: #3c68a8;
  --h: #8a6a0c;
  --histis: #4d6f86;

  --sans: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --mono: 'JetBrains Mono', Consolas, monospace;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 32px 16px 72px;
  background: var(--desk);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
b, strong { font-weight: 700; color: var(--ink); }
p { margin: 0; }
abbr { text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

.red   { color: var(--red) !important; }
.amber { color: var(--amber-d) !important; }
.faint { color: var(--faint); }

.label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--muted);
}

/* ---------- 종이 ---------- */
.paper {
  max-width: 880px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

/* ---------- 상단 띠 ---------- */
.strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 8px 24px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
}
.strip__warn { color: var(--red-l); }

/* ---------- 타이틀 ---------- */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 44px 24px 8px;
}
.hero__text { flex: 1 1 300px; }

.kicker {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--muted);
}

.redact {
  background: var(--ink);
  color: var(--ink);
  cursor: help;
  transition: background .2s, color .2s;
}
.kicker .redact:hover { background: transparent; color: var(--red); }

.hero__title {
  margin: 0;
  font-size: clamp(52px, 13vw, 96px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
}
.hero__inverse {
  margin-left: .04em;
  padding: 0 .08em;
  background: var(--ink);
  color: var(--paper);
}
.hero__lede {
  max-width: 480px;
  margin-top: 20px;
  color: var(--text-2);
}

.stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 8px 8px 0;
  padding: 6px 16px;
  border: 3px solid var(--red);
  color: var(--red);
  font-family: var(--mono);
  font-weight: 800;
  line-height: 1.3;
  transform: rotate(-7deg);
  animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1) .5s both;
}
.stamp__ko { font-size: 22px; letter-spacing: .24em; }
.stamp__en { font-size: 10px; letter-spacing: .22em; }

@keyframes stamp {
  from { opacity: 0; transform: rotate(-7deg) scale(2.2); }
  to   { opacity: 1; transform: rotate(-7deg) scale(1); }
}

/* ---------- 예후 막대 ---------- */
.prognosis { padding: 24px 24px 0; }
.prognosis__label,
.prognosis__legend { display: flex; justify-content: space-between; }
.prognosis__label {
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
}
.prognosis__bar {
  display: flex;
  height: 22px;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ink);
}
.prognosis__dead {
  flex: 0 0 96%;
  background: repeating-linear-gradient(135deg, #2c2b29 0 6px, var(--ink) 6px 12px);
}
.prognosis__turned { flex: 0 0 4%; background: var(--red); }
.prognosis__legend { margin-top: 6px; font-size: 13px; color: var(--text-2); }

/* ---------- 요약 수치 ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 24px 24px 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.stats > div {
  padding: 10px 12px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.stats dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
}
.stats dd {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}

/* ---------- 목차 (상단 고정) ---------- */
.toc {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 2px;
  margin-top: 36px;
  padding: 0 14px;
  overflow-x: auto;
  background: var(--ink);
  scrollbar-width: none;
}
.toc::-webkit-scrollbar { display: none; }
.toc a {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px;
  border-bottom: 2px solid transparent;
  color: #b9b4aa;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.toc a span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--red-l);
}
.toc a:hover,
.toc a.is-active {
  color: #fff;
  border-bottom-color: var(--red-l);
}

/* ---------- 본문 공통 ---------- */
.content { padding: 0 24px 64px; }
.section { scroll-margin-top: 56px; }

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 56px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.sec-head__num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
}
.sec-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--ink);
}
.sec-head__en {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--faint);
}

.lead { margin-bottom: 18px; color: var(--ink); }
.lead--spaced { margin: 16px 0; }
.sub-head {
  margin: 28px 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.note { margin-top: 8px; font-size: 12px; color: var(--faint); }

/* ---------- §01 흐름 ---------- */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  background: var(--card);
  transition: transform .2s;
}
.step:hover { transform: translateY(-3px); }
.step .label { color: var(--red); }
.step__title { font-size: 16px; font-weight: 800; }
.step__desc { font-size: 13px; color: var(--muted); }

.step--dark { background: var(--ink); color: var(--paper); }
.step--dark .label { color: var(--red-l); }
.step--dark .step__title { color: var(--paper); }
.step--dark .step__desc { color: #b9b4aa; }
.step--dark b { color: var(--red-l); }

/* ---------- §02 검열체 ---------- */
.specimen-wrap { display: flex; flex-wrap: wrap; gap: 18px; }

.specimen {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 250px;
  margin: 0;
  padding-top: 22px;
  border: 1px solid var(--line);
  background: #e0dbcf;
}
.specimen__noise {
  min-height: 1.5em;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--faint);
  white-space: pre;
}
.specimen__head {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  margin-bottom: -6px;
  background: #000;
  animation: glitch 4s steps(1) infinite;
}
.specimen__neck { width: 22px; height: 14px; background: #4a4743; }
.specimen__body {
  width: 136px;
  height: 112px;
  border-radius: 50px 50px 0 0;
  background: #4a4743;
}
.specimen figcaption {
  width: 100%;
  padding: 6px 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-align: center;
}

@keyframes glitch {
  0%, 90%, 100% { transform: none; }
  91% { transform: translate(3px, -1px); }
  93% { transform: translate(-3px, 1px) scaleX(1.08); }
  95% { transform: translate(1px, 0); }
}

.traits { flex: 3 1 280px; }
.trait-list { margin: 0; }
.trait {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--dash);
}
.trait:last-child { border-bottom: 0; }
.trait dt {
  flex: 0 0 64px;
  padding-top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red);
}
.trait dd { margin: 0; }

.methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.method {
  padding: 12px 16px;
  border-left: 4px solid var(--ink);
  background: var(--card);
}
.method--red { border-left-color: var(--red); }
.method__title { display: block; font-size: 16px; font-weight: 800; }
.method p { font-size: 14px; color: var(--text-2); }

/* ---------- §03 등급 ---------- */
.grade {
  --g: var(--gray);
  display: flex;
  margin-bottom: 8px;
  border: 1px solid var(--ink);
  background: var(--card);
  transition: transform .2s;
}
.grade:hover { transform: translateX(4px); }
.grade--null  { --g: #000; }
.grade--break { --g: var(--red); }
.grade--veil  { --g: var(--amber); }
.grade--trace { --g: var(--gray); }

.grade__tag {
  flex: 0 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  background: var(--g);
  color: #fff;
  font-family: var(--mono);
}
.grade__tag small { font-size: 9px; letter-spacing: .2em; opacity: .7; }
.grade__tag strong { font-size: 21px; font-weight: 800; letter-spacing: .06em; color: #fff; }

.grade__body { flex: 1 1 auto; min-width: 0; padding: 12px 16px; }
.grade__title { font-weight: 800; color: var(--ink); }
.grade__desc { font-size: 13px; color: var(--muted); }

.meter { display: flex; gap: 3px; margin-bottom: 8px; }
.meter i { flex: 1; height: 6px; background: var(--track); }
.meter i.on { background: var(--g); }

/* ---------- §04 잔재 ---------- */
.props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.prop {
  padding: 10px 14px;
  border-top: 3px solid var(--ink);
  background: var(--card);
  font-size: 14px;
}
.prop--red { border-top-color: var(--red); }
.prop--red .label { color: var(--red); }

.example { border: 1px solid var(--ink); background: #fff; }
.example__head {
  padding: 6px 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
}
.example__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 16px;
  text-align: center;
}
.example__side { flex: 1 1 160px; }
.example__side .label { color: var(--faint); }
.example__side--after .label { color: var(--red); }
.example__text { font-size: 16px; font-weight: 800; color: var(--ink); }
.example__box {
  flex: none;
  width: 34px;
  height: 34px;
  background: #000;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18) rotate(8deg); }
}

.remnants {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.remnants li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.remnants__from {
  flex: 0 0 120px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
}
.remnants__name { flex: 1 1 150px; font-weight: 700; color: var(--ink); }
.remnants__owner { font-size: 13px; font-weight: 700; color: var(--c); }

/* ---------- §05 C.U.T.E. ---------- */
.acronym {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  border: 1px solid var(--ink);
  background: var(--line-2);
}
.acronym div { padding: 14px 14px 12px; background: #fff; }
.acronym b { display: block; font-size: 40px; font-weight: 900; line-height: 1; }
.acronym div:first-child b { color: var(--red); }
.acronym span {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
}

.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.rule {
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 14px;
}
.rule__title { font-size: 15px; font-weight: 800; }
.rule--ok .rule__title { color: var(--sien); }
.rule--no .rule__title { color: var(--ink); }
.rule--warn { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.rule--warn .rule__title { color: var(--red-l); }
.rule--warn b { color: #fff; }

/* ---------- §06 거점 ---------- */
.locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.loc { border: 1px solid var(--ink); background: var(--card); }
.loc__head { padding: 12px 16px 4px; }
.loc__head h3 { margin: 0; font-size: 19px; font-weight: 900; color: var(--ink); }
.loc__body { padding: 12px 16px 14px; font-size: 14px; }
.loc__body > p { margin-bottom: 10px; color: var(--ink); }

.floors { padding: 8px 16px 0; }
.ground {
  height: 10px;
  border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--faint) 0 2px, transparent 2px 7px);
}
.ground-label {
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  text-align: right;
}
.floor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  padding: 7px 10px;
  border: 1px solid var(--ink);
  background: #fff;
  font-size: 14px;
}
.floor b { width: 28px; font-family: var(--mono); font-size: 13px; }
.floor--sealed {
  margin-bottom: 0;
  border-color: #000;
  background: #000;
  color: var(--paper);
  animation: flicker 5s infinite;
}
.floor--sealed b { color: var(--paper); }
.floor--sealed em { font-style: normal; color: var(--red-l); }
@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: .55; }
  98% { opacity: 1; }
  99% { opacity: .7; }
}

.secret { padding: 8px 10px; border: 1px dashed var(--red); font-size: 13px; }

.redact--locked {
  position: relative;
  cursor: not-allowed;
  user-select: none;
}
.redact--locked:hover::after {
  content: 'ACCESS DENIED';
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  padding: 2px 6px;
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  white-space: nowrap;
}

.facts { margin: 0 0 12px; }
.facts div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--dash);
}
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; color: var(--ink); }
.facts__ops { margin-bottom: 6px; }
.ops { margin: 0; padding-left: 18px; color: var(--ink); }

.roster-bar { display: flex; gap: 6px; margin-top: 14px; }
.roster-bar span { flex: 1; height: 8px; background: var(--c); }

/* ---------- §07 생존자 카드 ---------- */
.survivor {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent);
  background: var(--card);
}
.survivor__photo { flex: 1 1 220px; padding: 14px; background: var(--card-2); }
.survivor__photo img {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--ink);
  background: #d6d0c3;
  filter: sepia(.35) saturate(.8);
  transition: filter .4s;
}
.survivor:hover .survivor__photo img { filter: none; }

.survivor__main { flex: 999 1 300px; min-width: 0; }
.survivor__head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line-2); }
.survivor__head .label { letter-spacing: .18em; color: var(--accent); }
.survivor__head h3 {
  margin: 2px 0 0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
}
.survivor__role { font-size: 13px; color: var(--muted); }
.survivor__body { padding: 14px 18px 16px; }
.survivor__body > p { color: var(--ink); }

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.swatches span::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  vertical-align: -1px;
}

/* 잔재 카드 */
.rm { margin-top: 14px; border: 1px solid var(--accent); background: #fff; }
.rm__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 12px;
  background: var(--accent);
  color: #fff;
}
.rm__head b { color: #fff; }
.rm__head span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.rm__body { padding: 10px 12px; font-size: 14px; }
.rm__note { margin-top: 6px; font-size: 12px; color: var(--muted); }

.pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
}
.pipeline span { padding: 1px 7px; border: 1px solid var(--accent); color: var(--accent); }
.pipeline span.end { background: var(--accent); color: #fff; }
.pipeline i { font-style: normal; color: var(--faint); }

.rm--none { padding: 10px 12px; border-style: dashed; }
.rm__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  margin-bottom: 8px;
}
.rm__top b { color: var(--accent); }
.rm__top span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--faint); }

.statbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 13px;
}
.statbar > span:first-child { flex: 0 0 40px; color: var(--muted); }
.statbar b { flex: 0 0 44px; text-align: right; }
.pips { flex: 1; display: flex; gap: 3px; }
.pips i { flex: 1; height: 7px; background: var(--line-2); }
.pips i.on { background: var(--accent); }

/* 신상 기록 */
.dossier { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--line); }
.dossier summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
  transition: color .2s;
}
.dossier summary::-webkit-details-marker { display: none; }
.dossier summary::before { content: '▸ '; }
.dossier[open] summary::before { content: '▾ '; }
.dossier summary:hover { color: var(--accent); }
.dossier dl { margin: 6px 0 0; font-size: 14px; }
.dossier dl div { display: flex; gap: 10px; padding: 5px 0; }
.dossier dt { flex: 0 0 36px; font-weight: 700; color: var(--accent); }
.dossier dd { margin: 0; }

/* ---------- 맨 위로 ---------- */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s, background .2s;
}
.to-top.is-shown { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--red); }

/* ---------- 스크롤 등장 효과 (JS 켜졌을 때만) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

.js .prognosis__dead,
.js .prognosis__turned {
  flex-basis: 0;
  transition: flex-basis 1.2s cubic-bezier(.2, .8, .2, 1);
}
.js .prognosis.is-visible .prognosis__dead { flex-basis: 96%; }
.js .prognosis.is-visible .prognosis__turned { flex-basis: 4%; transition-delay: 1s; }

.js .meter i.on,
.js .pips i.on {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.js .is-visible .meter i.on,
.js .is-visible .pips i.on { transform: none; }
.meter i:nth-child(2), .pips i:nth-child(2) { transition-delay: .1s; }
.meter i:nth-child(3), .pips i:nth-child(3) { transition-delay: .2s; }
.meter i:nth-child(4), .pips i:nth-child(4) { transition-delay: .3s; }
.pips i:nth-child(5) { transition-delay: .4s; }

/* ---------- 모바일 ---------- */
@media (max-width: 640px) {
  body { padding: 0; }
  .paper { border: 0; box-shadow: none; }
  .strip { padding: 8px 16px; }
  .hero { padding: 32px 16px 8px; }
  .prognosis { padding: 24px 16px 0; }
  .stats { margin: 24px 16px 0; }
  .content { padding: 0 16px 56px; }
  .grade__tag { flex-basis: 88px; }
  .grade__tag strong { font-size: 18px; }
  .to-top { right: 14px; bottom: 14px; }
}

/* ---------- 움직임 줄이기 설정 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .js .prognosis__dead { flex-basis: 96%; }
  .js .prognosis__turned { flex-basis: 4%; }
  .js .meter i.on, .js .pips i.on { transform: none; }
}