/* 뇌 나이 측정소 — 디자인 장르: 실험실 계측기
 * 근흑색 패널 + 형광 녹색(오실로스코프) 포인트 1개, 결과는 인쇄된 검사 성적서/기록지(베이지 종이 + 적색 펜).
 * UI는 공용 역할 토큰·컴포넌트를 쓰고, 일러스트/계기 장식 색만 --art-* 로 둔다. */
:root {
  --brand: #7dff9b;
  --brand-pressed: #5fe07e;
  --brand-soft: #12261a;
  --brand-on: #03140a;

  --font-display: "IBM Plex Sans KR", var(--font-sans);
  --art-mono: "IBM Plex Mono", var(--font-mono);

  --art-phosphor: #7dff9b;
  --art-screen: #07110b;
  --art-panel: #191b19;
  --art-panel-edge: #2c302b;
  --art-paper: #ece5d3;
  --art-ink: #1e1f1b;
  --art-ink-2: #5f5a4e;
  --art-rule: rgba(30, 31, 27, 0.18);
  --art-grid: rgba(214, 112, 84, 0.26);
  --art-red: #c8402c;

  /* 스프링 이징 */
  --art-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --art-snap: cubic-bezier(0.2, 1.3, 0.35, 1);
  --art-bounce: linear(0, 0.25 7%, 0.7 15%, 1.06 24%, 1.16 31%, 1.1 38%, 1.01 47%, 0.97 55%, 0.99 66%, 1.005 78%, 1);
}

.mono {
  font-family: var(--art-mono);
  letter-spacing: 0.02em;
}

body.is-playing .seo,
body.is-playing #more,
body.is-playing .site-footer {
  display: none;
}

/* 누르면 눌리고 놓으면 튀는 버튼 */
.app .btn,
.sheet .btn {
  transition: transform 420ms var(--art-spring), background var(--dur-fast) var(--ease-standard);
}
.app .btn:active:not(:disabled):not(.is-loading),
.sheet .btn:active:not(:disabled):not(.is-loading) {
  transform: scale(0.96, 0.9);
  transition-duration: 90ms;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-8);
  border: 1px solid var(--brand);
  border-radius: var(--r-4);
  color: var(--brand);
  font: var(--label-03);
  font-family: var(--art-mono);
}

/* ============ 첫 화면 ============ */
.intro {
  gap: 0;
}

.intro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-min);
}

.intro-head__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  font: var(--label-01);
}

.intro-head__model {
  padding: var(--sp-2) var(--sp-6);
  border-radius: var(--r-4);
  background: var(--brand);
  color: var(--brand-on);
  font: var(--label-03);
  font-family: var(--art-mono);
}

.intro__title {
  margin: var(--sp-12) 0 0;
  min-height: 112px;
  font: var(--display-01);
  letter-spacing: -0.03em;
}

.intro__desc {
  margin: var(--sp-4) 0 var(--sp-16);
  min-height: 22px;
  color: var(--color-text-secondary);
}

/* 키네틱 글자: 줄마다 클립, 글자마다 늘어났다 눌리며 정착 */
.kt-line {
  display: block;
  overflow: hidden;
  padding-bottom: var(--sp-2);
}
.kt-ch {
  display: inline-block;
  transform-origin: 50% 100%;
}
.is-kt .kt-ch {
  animation: kt-in 700ms both;
  animation-delay: calc(var(--kt-delay, 0ms) + var(--i) * var(--kt-step, 24ms));
}
@keyframes kt-in {
  0% { transform: translateY(110%) scaleY(1.6); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  55% { transform: translateY(-8%) scaleY(0.88) scaleX(1.06); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
  78% { transform: translateY(2%) scaleY(1.04); }
  100% { transform: none; }
}

/* 계기 패널 */
.intro__panel { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }

.panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--sp-12);
  border-radius: var(--r-16);
  background: var(--art-panel);
  border: 1px solid var(--art-panel-edge);
  box-shadow: var(--shadow-m);
}
.panel.is-hit { animation: panel-hit 380ms var(--art-spring); }
@keyframes panel-hit {
  0% { transform: translateY(0); }
  30% { transform: translateY(3px) scaleY(0.99); }
  100% { transform: none; }
}
.panel__screw {
  position: absolute;
  width: var(--sp-6);
  height: var(--sp-6);
  border-radius: var(--r-full);
  background: linear-gradient(45deg, transparent 42%, var(--art-panel) 42% 58%, transparent 58%), var(--art-panel-edge);
}
.panel__screw:nth-child(1) { left: var(--sp-4); top: var(--sp-4); }
.panel__screw:nth-child(2) { right: var(--sp-4); top: var(--sp-4); }
.panel__screw:nth-child(3) { left: var(--sp-4); bottom: var(--sp-4); }
.panel__screw:nth-child(4) { right: var(--sp-4); bottom: var(--sp-4); }

/* 오실로스코프 화면: 10x8 눈금 + 중앙 눈금자 + 스캔라인 */
.scope,
.rt__scope,
.hear__scope {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-8);
  background-color: var(--art-screen);
  background-image:
    linear-gradient(90deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--art-phosphor) 30%, transparent) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(transparent calc(50% - 0.5px), color-mix(in srgb, var(--art-phosphor) 30%, transparent) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(90deg, color-mix(in srgb, var(--art-phosphor) 12%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--art-phosphor) 12%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 10% 12.5%, 10% 12.5%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--art-phosphor) 18%, transparent);
}
.scope::after,
.rt__scope::after,
.hear__scope::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
}
.scope { flex: 1 1 auto; min-height: 180px; }
.scope canvas,
.rt__scope canvas,
.hear__scope canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scope__ch,
.rt__ch,
.hear__scope span {
  position: absolute;
  left: var(--sp-10);
  top: var(--sp-8);
  z-index: 1;
  color: var(--art-phosphor);
  font: var(--label-03);
  font-family: var(--art-mono);
}
.scope__lamp {
  position: absolute;
  right: var(--sp-10);
  top: var(--sp-8);
  z-index: 1;
  padding: 0 var(--sp-8);
  border-radius: var(--r-4);
  font: var(--label-03);
  color: var(--color-bg);
  transform: scale(0);
}
.scope__lamp[data-state="wait"] { background: var(--color-danger); color: var(--color-text); transform: scale(1); transition: transform 380ms var(--art-spring); }
.scope__lamp[data-state="go"] { background: var(--color-success); color: var(--color-bg); animation: lamp-go 420ms var(--art-spring) both; }
@keyframes lamp-go {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.scope__read {
  position: absolute;
  right: var(--sp-12);
  bottom: var(--sp-8);
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  color: var(--art-phosphor);
  font: var(--display-02);
  font-family: var(--art-mono);
  line-height: 1;
}
.scope__read small { font: var(--label-02); font-family: var(--art-mono); }
.scope__read.is-pop { animation: read-pop 520ms var(--art-spring); }
@keyframes read-pop {
  0% { transform: scale(0.7, 1.3); }
  100% { transform: none; }
}

/* 성적서 인쇄 (장면 4) */
.slip {
  contain: paint;
  position: absolute;
  inset: var(--sp-10) var(--sp-16) 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.slip__paper {
  position: relative;
  height: 100%;
  padding: var(--sp-12) var(--sp-12) 0;
  background-color: var(--art-paper);
  background-image: linear-gradient(90deg, var(--art-grid) 1px, transparent 1px), linear-gradient(var(--art-grid) 1px, transparent 1px);
  background-size: var(--sp-12) var(--sp-12);
  color: var(--art-ink);
  transform: translateY(104%);
  transition: transform 260ms var(--ease-standard);
}
.panel[data-scene="4"] .slip__paper {
  transform: translateY(0);
  transition: transform 1100ms var(--art-snap) 120ms;
}
.slip p { margin: 0; }
.slip__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--art-ink);
  font: var(--label-03);
  font-family: var(--art-mono);
}
.slip__age { font: var(--title-02); }
.slip__age b { font: var(--display-02); }
.slip__line { font: var(--body-03-strong); }
.slip__rows {
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--art-ink);
}
.slip__rows li {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--art-rule);
  font: var(--body-03);
}
.slip__rows b { font: var(--label-02); font-family: var(--art-mono); }
.panel[data-scene="4"] .scope__ch,
.panel[data-scene="4"] .scope__read { opacity: 0; }
.slip__to {
  margin-top: var(--sp-4) !important;
  color: var(--art-ink-2);
  font: var(--label-03);
  font-family: var(--art-mono);
}

.stamp {
  position: absolute;
  padding: var(--sp-4) var(--sp-10);
  border: 3px double var(--art-red);
  border-radius: var(--r-6);
  color: var(--art-red);
  font: var(--title-04);
  font-family: var(--font-display);
  transform: rotate(-12deg) scale(2.4);
  opacity: 0;
}
.slip .stamp { right: var(--sp-12); bottom: var(--sp-32); }
.panel[data-scene="4"] .slip .stamp { animation: stamp-in 460ms var(--art-spring) 1250ms both; }
@keyframes stamp-in {
  0% { transform: rotate(-4deg) scale(2.4); opacity: 0; }
  55% { transform: rotate(-13deg) scale(0.86); opacity: 1; }
  100% { transform: rotate(-12deg) scale(1); opacity: 0.9; }
}

/* 게이지 + 채널 */
.panel__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: center;
  margin-top: var(--sp-12);
}
.panel__gauge,
.report__gauge {
  padding: var(--sp-6) var(--sp-6) 0;
  border-radius: var(--r-8);
  background: var(--art-paper);
}
.gauge-svg { width: 100%; height: auto; overflow: visible; }
.g-band { fill: none; stroke: var(--art-ink); stroke-width: 1.5; }
.g-band--hot { stroke: var(--art-red); stroke-width: 4; }
.g-major { stroke: var(--art-ink); stroke-width: 2; }
.g-minor { stroke: var(--art-ink); stroke-width: 1; }
.g-num { font: 600 11px var(--art-mono); fill: var(--art-ink); }
.g-label { font: var(--label-03); fill: var(--art-ink-2); }
.g-unit { font: var(--label-03); fill: var(--art-ink-2); }
.g-needle {
  transform-box: view-box;
  transform-origin: 100px 96px;
}
.g-needle line { stroke: var(--art-red); stroke-width: 2.5; stroke-linecap: round; }
.g-hub { fill: var(--art-ink); }

.chs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ch {
  display: grid;
  grid-template-columns: var(--sp-8) var(--sp-32) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-6);
  font: var(--caption-01);
  color: var(--color-text-tertiary);
  transition: color var(--dur-base);
}
.ch b { font: var(--label-03); font-family: var(--art-mono); }
.ch span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.led {
  display: inline-block;
  width: var(--sp-8);
  height: var(--sp-8);
  border-radius: var(--r-full);
  background: var(--art-panel-edge);
}
.ch.is-on { color: var(--color-text-secondary); }
.ch.is-on .led,
.led.is-on {
  background: var(--art-phosphor);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--art-phosphor) 22%, transparent);
  animation: led-pop 420ms var(--art-spring);
}
.ch.is-sel { color: var(--color-text); }
.ch.is-sel b { color: var(--art-phosphor); }
@keyframes led-pop {
  0% { transform: scale(0.3); }
  100% { transform: scale(1); }
}

.intro__ticks {
  display: flex;
  gap: var(--sp-16);
  margin: var(--sp-16) 0 var(--sp-8);
}
.intro__ticks span {
  position: relative;
  padding-bottom: var(--sp-6);
  font: var(--label-03);
  font-family: var(--art-mono);
  color: var(--color-text-tertiary);
}
.intro__ticks span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease-standard);
}
.intro__ticks span.is-on { color: var(--brand); }
.intro__ticks span.is-on::after { transform: scaleX(1); transition: transform 600ms var(--art-spring); }

.intro__cta { margin-top: auto; }
.intro-nudge { margin: 0; color: var(--brand); }

/* 도전장 배너 */
.challenge {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12);
  border-radius: var(--r-8);
  background: var(--color-surface);
  border: 1px solid var(--brand);
  animation: slide-in 560ms var(--art-spring) both;
}
.challenge p { margin: 0; }
.challenge__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-40);
  height: var(--sp-40);
  border-radius: var(--r-6);
  background: var(--brand);
  color: var(--brand-on);
  font: var(--label-02);
  font-family: var(--art-mono);
}
@keyframes slide-in {
  0% { transform: translateX(-24px); clip-path: inset(0 100% 0 0); }
  100% { transform: none; clip-path: inset(0 0 0 0); }
}

/* ============ 준비 ============ */
.setup__body { padding: var(--sp-8) 0 var(--sp-32); }
.setup__body h2,
.setup__body p { margin: 0; }
.setup__body h2 + p { margin-top: var(--sp-4); }
.setup__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--color-text);
}
.setup__item {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--color-border);
  animation: row-in 520ms var(--art-spring) both;
}
.setup__item:nth-child(2) { animation-delay: 50ms; }
.setup__item:nth-child(3) { animation-delay: 100ms; }
.setup__item:nth-child(4) { animation-delay: 150ms; }
.setup__item:nth-child(5) { animation-delay: 200ms; }
@keyframes row-in {
  0% { transform: translateX(-16px); clip-path: inset(0 100% 0 0); }
  100% { transform: none; clip-path: inset(0); }
}
.setup__item > .t-caption-01 { white-space: nowrap; }
.setup__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-40);
  height: var(--sp-32);
  border-radius: var(--r-4);
  background: var(--art-screen);
  border: 1px solid color-mix(in srgb, var(--art-phosphor) 35%, transparent);
  color: var(--art-phosphor);
  font: var(--label-03);
  font-family: var(--art-mono);
}

/* ============ 게임 공통 ============ */
.game { min-height: 100dvh; display: flex; flex-direction: column; }
.game-head {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: 56px;
  background: var(--color-bg);
}
.game-steps {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.game-step {
  display: grid;
  place-items: center;
  width: var(--sp-32);
  height: var(--sp-24);
  border-radius: var(--r-4);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-tertiary);
  font: var(--label-03);
  transition: all 360ms var(--art-spring);
}
.game-step.is-now { border-color: var(--brand); color: var(--brand); transform: scale(1.15); }
.game-step.is-done { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.game-bar {
  position: relative;
  height: var(--sp-6);
  background: repeating-linear-gradient(90deg, var(--color-border-strong) 0 1px, transparent 1px 10%);
  border-bottom: 1px solid var(--color-border-strong);
}
.game-bar i {
  display: block;
  height: 100%;
  background: var(--brand);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 700ms var(--art-spring);
}
.game-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-16) 0 calc(var(--sp-24) + var(--safe-bottom));
  user-select: none;
  -webkit-user-select: none;
}

/* 설명 화면 (계기 사용설명서 느낌, 왼쪽 정렬) */
.howto,
.done {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-12);
}
.howto h2,
.howto p,
.done p,
.done h2 { margin: 0; }
.plate {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12) var(--sp-12);
  border-radius: var(--r-8);
  background: var(--art-screen);
  border: 1px solid color-mix(in srgb, var(--art-phosphor) 30%, transparent);
  animation: plate-in 640ms var(--art-snap) both;
}
.plate__top { display: flex; align-items: center; gap: var(--sp-12); }
.plate__scope { height: 120px; }
.plate__code { color: var(--art-phosphor); font: var(--title-02); font-family: var(--art-mono); }
.plate__bar {
  flex: 1;
  height: var(--sp-20);
  background:
    repeating-linear-gradient(90deg, var(--art-phosphor) 0 1px, transparent 1px 50px) bottom / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--art-phosphor) 55%, transparent) 0 1px, transparent 1px 10px) bottom / 100% 50% no-repeat;
}
@keyframes plate-in {
  0% { clip-path: inset(0 100% 0 0); transform: translateX(-8px); }
  100% { clip-path: inset(0); transform: none; }
}
.howto__title { animation: title-in 620ms var(--art-spring) 120ms both; transform-origin: left bottom; }
@keyframes title-in {
  0% { transform: translateY(24px) scaleY(1.3); clip-path: inset(0 0 100% 0); }
  100% { transform: none; clip-path: inset(0); }
}
.howto__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border-strong);
}
.howto__list li {
  position: relative;
  padding: var(--sp-10) 0 var(--sp-10) var(--sp-24);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  animation: row-in 520ms var(--art-spring) both;
}
.howto__list li:nth-child(1) { animation-delay: 200ms; }
.howto__list li:nth-child(2) { animation-delay: 260ms; }
.howto__list li:nth-child(3) { animation-delay: 320ms; }
.howto__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-family: var(--art-mono);
}
.howto__warn {
  padding: var(--sp-12);
  border-radius: var(--r-8);
  border: 1px solid var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}
.howto__warn .t-label-02 { color: var(--color-warning); }
.howto__warn .t-caption-01 { color: var(--color-text-secondary); margin-top: var(--sp-4); }
.howto__cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: auto;
  padding-top: var(--sp-16);
}

/* 카운트다운 */
.count {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
}
.count p { margin: 0; }
.count__num {
  font: var(--display-01);
  font-family: var(--art-mono);
  font-size: calc(var(--sp-64) * 2);
  line-height: 1;
  color: var(--brand);
}
.count__num.is-pop { animation: count-pop 560ms both; }
@keyframes count-pop {
  0% { transform: scale(1.8, 0.4); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  45% { transform: scale(0.88, 1.14); opacity: 1; }
  75% { transform: scale(1.04, 0.97); }
  100% { transform: none; }
}

/* 게임 기록 (LCD 판독창) */
.readout {
  padding: var(--sp-12) var(--sp-16) var(--sp-16);
  border-radius: var(--r-8);
  background: var(--art-screen);
  border: 1px solid color-mix(in srgb, var(--art-phosphor) 30%, transparent);
  color: var(--art-phosphor);
  animation: plate-in 640ms var(--art-snap) both;
}
.readout__k {
  display: flex;
  justify-content: space-between;
  font: var(--label-03);
  font-family: var(--art-mono);
  opacity: 0.8;
}
.readout__v {
  margin-top: var(--sp-8) !important;
  font: var(--display-01);
  font-family: var(--art-mono);
  animation: read-pop 560ms var(--art-spring) 200ms both;
  transform-origin: left bottom;
}
.done .badge { align-self: flex-start; }
.done__next { margin-top: auto; }

/* 타이머 (눈금자) */
.timer {
  position: relative;
  height: var(--sp-8);
  background: var(--color-surface-sunken);
  overflow: hidden;
}
.timer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--color-bg) 0 1px, transparent 1px calc(100% / 30));
}
.timer i {
  display: block;
  height: 100%;
  background: var(--brand);
  transform-origin: left;
}
.timer i.is-low { background: var(--color-danger); }

@keyframes ba-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.is-shake { animation: ba-shake 380ms var(--ease-standard); }

/* ============ 1. 반응속도 ============ */
.rt { flex: 1; display: flex; flex-direction: column; gap: var(--sp-12); }
.rt__scope { height: 76px; }
.rt__dots {
  position: absolute;
  right: var(--sp-10);
  top: var(--sp-8);
  z-index: 1;
  display: flex;
  gap: var(--sp-4);
}
.rt__dots span {
  width: var(--sp-8);
  height: var(--sp-8);
  border: 1px solid var(--art-phosphor);
  border-radius: var(--r-0);
}
.rt__dots span.is-on { background: var(--art-phosphor); animation: led-pop 420ms var(--art-spring); }
.rt__pad {
  flex: 1;
  min-height: 52dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  border: 0;
  border-radius: var(--r-16);
  background: var(--color-surface-raised);
  color: var(--color-text);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur-fast);
}
.rt__pad[data-state="wait"] { background: var(--color-danger); }
.rt__pad[data-state="go"] { background: var(--color-success); transition: none; }
.rt__pad[data-state="early"] { background: var(--color-warning); color: var(--color-bg); }
.rt__pad[data-state="done"] { background: var(--art-screen); }
.rt__pad[data-state="done"] .rt__big { color: var(--art-phosphor); font-family: var(--art-mono); animation: read-pop 480ms var(--art-spring); }
.rt__big { font: var(--display-02); }
.rt__small { font: var(--body-02-strong); opacity: 0.85; }

/* ============ 2. 순간기억 ============ */
.mem { flex: 1; display: flex; flex-direction: column; gap: var(--sp-16); }
.mem__head { display: flex; justify-content: space-between; align-items: center; }
.mem__lives { display: flex; gap: var(--sp-8); padding-right: var(--sp-4); }
.mem__msg { margin: 0; min-height: 30px; }
.mem__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-10);
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  margin: auto;
  padding: var(--sp-10);
  border-radius: var(--r-16);
  background: var(--art-panel);
  border: 1px solid var(--art-panel-edge);
  touch-action: manipulation;
}
.mem__tile {
  border: 1px solid var(--art-panel-edge);
  border-radius: var(--r-8);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-s);
  cursor: pointer;
  transition: background var(--dur-fast), transform 320ms var(--art-spring);
}
.mem__tile.is-lit,
.mem__tile.is-press {
  background: var(--art-phosphor);
  border-color: var(--art-phosphor);
  transform: scale(0.93);
  transition-duration: 60ms;
}
.mem__tile.is-wrong { background: var(--color-danger); border-color: var(--color-danger); }
.mem__grid.is-locked { pointer-events: none; }
.mem__grid.is-good .mem__tile { border-color: var(--color-success); }

/* ============ 3. 색 구분 ============ */
.cg { flex: 1; display: flex; flex-direction: column; gap: var(--sp-12); }
.cg__head { display: flex; justify-content: space-between; align-items: center; }
.cg__grid {
  display: grid;
  grid-template-columns: repeat(var(--n, 2), 1fr);
  gap: var(--sp-6);
  width: 100%;
  aspect-ratio: 1;
  touch-action: manipulation;
  animation: grid-in 380ms var(--art-spring);
}
@keyframes grid-in {
  0% { transform: scale(0.94); }
  100% { transform: none; }
}
.cg__tile { border: 0; border-radius: var(--r-4); cursor: pointer; transition: transform 300ms var(--art-spring); }
.cg__tile:active { transform: scale(0.9); transition-duration: 60ms; }
.cg__grid.is-locked { pointer-events: none; }
.cg__tile.is-answer { box-shadow: 0 0 0 3px var(--color-text); }

/* ============ 4. 청력 ============ */
.hear { flex: 1; display: flex; flex-direction: column; gap: var(--sp-12); }
.hear p { margin: 0; }
.hear__ladder { display: flex; align-items: flex-end; gap: var(--sp-4); height: var(--sp-40); }
.hear__ladder i {
  flex: 1;
  height: calc(var(--h) * 100%);
  background: var(--color-border-strong);
  transition: background var(--dur-base), transform 360ms var(--art-spring);
  transform-origin: bottom;
}
.hear__ladder i.is-past { background: color-mix(in srgb, var(--brand) 40%, transparent); }
.hear__ladder i.is-on { background: var(--brand); transform: scaleY(1.12); }
.hear__scope { height: 140px; }
.hear__ans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  margin-top: auto;
}
.hear > .btn--sm { align-self: center; }

/* ============ 5. 순간계산 ============ */
.mt { flex: 1; display: flex; flex-direction: column; gap: var(--sp-12); }
.mt__head { display: flex; justify-content: space-between; align-items: center; }
.mt__q {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  min-height: 120px;
  border-radius: var(--r-8);
  background: var(--art-screen);
  border: 1px solid color-mix(in srgb, var(--art-phosphor) 30%, transparent);
  color: var(--art-phosphor);
  font: var(--display-02);
  font-family: var(--art-mono);
}
.mt__q.is-good { animation: read-pop 380ms var(--art-spring); }
.mt__eq { opacity: 0.5; }
.mt__ans { min-width: 1.6em; text-align: left; }
.mt__ans.is-empty { opacity: 0.35; }
.mt__pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  margin-top: auto;
  touch-action: manipulation;
}
.mt__key {
  min-height: 60px;
  border: 1px solid var(--art-panel-edge);
  border-radius: var(--r-8);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-s);
  font: var(--title-02);
  font-family: var(--art-mono);
  cursor: pointer;
  transition: transform 320ms var(--art-spring), background var(--dur-fast);
}
.mt__key.is-pressed { transform: scale(0.94, 0.88); background: var(--brand-soft); transition-duration: 60ms; }
.mt__key--fn { font: var(--label-01); color: var(--color-text-secondary); }
.mt__pad.is-locked { pointer-events: none; opacity: 0.5; }

/* ============ 결과: 인쇄된 성적서 ============ */
.res { padding: var(--sp-8) 0 var(--sp-16); overflow-x: clip; }

.paper {
  position: relative;
  padding: var(--sp-16);
  border-radius: var(--r-4);
  background-color: var(--art-paper);
  background-image: linear-gradient(90deg, var(--art-grid) 1px, transparent 1px), linear-gradient(var(--art-grid) 1px, transparent 1px);
  background-size: var(--sp-12) var(--sp-12);
  background-position: -1px -1px;
  color: var(--art-ink);
  box-shadow: var(--shadow-m);
}
.paper p { margin: 0; }
.paper__title {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12) !important;
  padding-bottom: var(--sp-6);
  border-bottom: 2px solid var(--art-ink);
  font: var(--label-03);
  font-family: var(--art-mono);
}
.paper__text { font: var(--body-03); }
.report__small { margin-top: var(--sp-8) !important; font: var(--caption-01); color: var(--art-ink-2); }

.report {
  overflow: hidden;
  padding-bottom: calc(var(--sp-64) + var(--sp-8));
  animation: print 900ms var(--art-snap) both;
  -webkit-mask-image: radial-gradient(circle at 7px 100%, transparent 4px, #000 4.5px);
  mask-image: radial-gradient(circle at 7px 100%, transparent 4px, #000 4.5px);
  -webkit-mask-size: 14px 100%;
  mask-size: 14px 100%;
}
@keyframes print {
  0% { clip-path: inset(0 0 100% 0); transform: translateY(-12px); }
  100% { clip-path: inset(0 0 0 0); transform: none; }
}
.report .paper__title { font: var(--label-02); font-family: var(--art-mono); }
.report__meta { font: var(--caption-01); font-family: var(--art-mono); color: var(--art-ink-2); }
.report__main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: end;
  margin: var(--sp-16) 0 var(--sp-12);
}
.report__gauge { background: transparent; padding: 0; }
.report__age { display: flex; flex-direction: column; }
.report__k { font: var(--label-02); color: var(--art-ink-2); }
.report__num {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font: var(--display-01);
  font-size: calc(var(--sp-64) + var(--sp-8));
  line-height: 1;
  letter-spacing: -0.04em;
}
.report__num small { font: var(--title-03); }
.report__band { margin-top: var(--sp-6); font: var(--label-03); font-family: var(--art-mono); color: var(--art-ink-2); }
.res-cmp { font: var(--body-01-strong); }
.res-cmp mark { padding: 0 var(--sp-4); background: color-mix(in srgb, var(--art-red) 22%, transparent); color: var(--art-ink); }
.res-delta {
  margin-top: var(--sp-8) !important;
  padding-top: var(--sp-8);
  border-top: 1px dashed var(--art-rule);
  font: var(--body-03);
}
.res-real { display: flex; gap: var(--sp-8); }
.res-real .input { flex: 1; min-width: 0; background: var(--art-paper); color: var(--art-ink); border-color: var(--art-ink); }
.report__stamp { right: var(--sp-16); bottom: var(--sp-20); mix-blend-mode: multiply; }
.report.is-done .report__stamp { animation: stamp-in 460ms var(--art-spring) both; }

/* 숫자 오도미터 */
.roll { display: inline-flex; height: 1em; line-height: 1; overflow: hidden; }
.roll__col { display: block; height: 1em; overflow: hidden; }
.roll__strip { display: flex; flex-direction: column; will-change: transform; }
.roll__strip span { display: block; height: 1em; line-height: 1em; text-align: center; }

.res-actions__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }

/* 측정값 표 */
.report__table { width: 100%; border-collapse: collapse; font: var(--body-03); }
.report__table th,
.report__table td { padding: var(--sp-8) 0; border-bottom: 1px solid var(--art-rule); text-align: right; white-space: nowrap; }
.report__table th[scope="row"] { text-align: left; font: var(--body-03-strong); }
.report__table th[scope="row"] b { font: var(--label-03); font-family: var(--art-mono); color: var(--art-ink-2); margin-right: var(--sp-2); }
.report__table thead th { font: var(--label-03); font-family: var(--art-mono); color: var(--art-ink-2); border-bottom: 1px solid var(--art-ink); }
.report__table thead th:first-child { text-align: left; }
.report__table td { padding-left: var(--sp-8); }
.report__table .new { color: var(--art-red); font: var(--label-03); font-style: normal; }

/* 레이더 (종이 위 적색 펜) */
.res-radar svg { display: block; margin: 0 auto; width: 100%; max-width: 300px; height: auto; }
.rd-ring { fill: none; stroke: var(--art-rule); stroke-width: 1; }
.rd-axis { stroke: var(--art-rule); stroke-width: 1; }
.rd-poly { fill: color-mix(in srgb, var(--art-red) 18%, transparent); stroke: var(--art-red); stroke-width: 2.5; stroke-linejoin: round; }
.rd-cmp { fill: none; stroke: var(--art-ink); stroke-width: 1.6; stroke-dasharray: 5 4; }
.rd-dot { fill: var(--art-red); }
.rd-me { transform-origin: 150px 138px; animation: rd-grow 700ms var(--art-bounce) 300ms both; }
.rd-label { font: var(--label-03); fill: var(--art-ink-2); }
.rd-val { font: 600 14px var(--art-mono); fill: var(--art-ink); }
.rd-val.is-skip { fill: var(--art-ink-2); font: var(--label-03); }
@keyframes rd-grow {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); margin-top: var(--sp-16); }
.note { padding-top: var(--sp-8); border-top: 2px solid var(--art-ink); }
.note__k { font: var(--label-03); font-family: var(--art-mono); color: var(--art-ink-2); }
.note__t { margin-top: var(--sp-4) !important; font: var(--title-04); }
.note__d { margin-top: var(--sp-4) !important; font: var(--body-03); color: var(--art-ink-2); }

/* 기록지 그래프 */
.line { width: 100%; height: auto; }
.ln-grid { stroke: var(--art-rule); stroke-width: 1; }
.ln-tick,
.ln-date { font: 500 11px var(--art-mono); fill: var(--art-ink-2); }
.ln-val { font: 600 12px var(--art-mono); fill: var(--art-ink); }
.ln-real { stroke: var(--art-ink-2); stroke-dasharray: 4 4; }
.ln-real-t { font: var(--label-03); fill: var(--art-ink-2); }
.ln-area { fill: color-mix(in srgb, var(--art-red) 10%, transparent); }
.ln-path {
  fill: none;
  stroke: var(--art-red);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: pen 1100ms cubic-bezier(0.6, 0, 0.2, 1) 200ms forwards;
}
.ln-dot { fill: var(--art-paper); stroke: var(--art-red); stroke-width: 2; }
.ln-dot.is-last { fill: var(--art-red); }
@keyframes pen { to { stroke-dashoffset: 0; } }

/* 나란히 보기 */
.vs { display: flex; flex-direction: column; gap: var(--sp-8); }
.vs__ages { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; }
.vs__ages div { display: flex; flex-direction: column; }
.vs__ages div:last-child { align-items: flex-end; }
.vs__ages span { font: var(--label-03); font-family: var(--art-mono); color: var(--art-ink-2); }
.vs__ages b { font: var(--display-02); color: var(--art-red); }
.vs__ages div:last-child b { color: var(--art-ink); }
.vs__ages small { font: var(--title-04); }
.vs__and { font: var(--title-03); color: var(--art-ink-2); padding-bottom: var(--sp-8); }
.vs__list { margin: 0; padding: 0; list-style: none; }
.vs__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--sp-8);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--art-rule);
  font: var(--body-03);
}
.vs__row--head { font: var(--label-03); font-family: var(--art-mono); color: var(--art-ink-2); border-bottom: 1px solid var(--art-ink); }
.vs__row--head span,
.vs__cell { text-align: right; }
.vs__k b { font: var(--label-03); font-family: var(--art-mono); color: var(--art-ink-2); }
.vs__cell { font-family: var(--art-mono); }
.vs__cell.is-win { color: var(--art-red); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* 리마인더 */
.remind {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12);
  border-radius: var(--r-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
}
.remind p { margin: 0; }
.remind { flex-wrap: wrap; }
.remind .grow { flex: 1 1 0; }
.remind .btn { flex: 1 1 100%; }
.remind__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  min-width: 56px;
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--r-4);
  background: var(--art-screen);
  color: var(--art-phosphor);
}
.remind__date span { font: var(--label-03); font-family: var(--art-mono); opacity: 0.7; }
.remind__date b { font: var(--title-04); font-family: var(--art-mono); }
.res-note { margin: 0; }

/* 공유 시트 */
.sheet h2,
.sheet > p { margin: 0; }
.sheet > p { margin-top: var(--sp-4); }
.sheet__body { margin-top: var(--sp-16); }
.share-preview {
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--r-8);
  background: var(--color-surface-sunken);
}
.share-preview p { margin: var(--sp-4) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .ln-path { stroke-dashoffset: 0; animation: none; }
  .stamp { opacity: 0.9; transform: rotate(-12deg); }
}

/* ============ 2차 개편: 측정 개시 버튼 · 측정 절차서 ============ */

/* 캡션: 회색 부제 대신 판독창 라벨 */
.intro__desc {
  align-self: flex-start;
  padding: var(--sp-4) var(--sp-8);
  border-left: 2px solid var(--art-phosphor);
  background: color-mix(in srgb, var(--art-phosphor) 8%, transparent);
  color: var(--art-phosphor);
  font: var(--label-03);
  font-family: var(--art-mono);
}

/* 측정 개시: 안전 덮개가 달린 패널 푸시 버튼 */
.arm {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-16);
  width: 100%;
  min-height: 100px;
  padding: var(--sp-12) var(--sp-16) var(--sp-12) var(--sp-12);
  border: 1px solid var(--art-panel-edge);
  border-radius: var(--r-12);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), color-mix(in srgb, var(--art-phosphor) 7%, transparent) calc(10% - 1px) 10%) bottom / 100% var(--sp-6) no-repeat,
    var(--art-panel);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent), var(--shadow-m);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.arm__well {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: var(--r-12);
  background: var(--art-screen);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--art-panel-edge);
  perspective: 280px;
}
.arm__btn {
  width: 46px;
  height: 46px;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--art-phosphor) 30%, #fff), var(--art-phosphor) 48%, color-mix(in srgb, var(--art-phosphor) 45%, #000));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--art-phosphor) 30%, #000), 0 8px 10px rgba(0, 0, 0, 0.6);
  transition: transform 260ms var(--art-spring), box-shadow 260ms var(--art-spring);
}
.arm__guard {
  position: absolute;
  inset: var(--sp-4);
  display: grid;
  place-items: end center;
  padding-bottom: var(--sp-6);
  border-radius: var(--r-8);
  background: repeating-linear-gradient(-45deg, var(--art-red) 0 8px, color-mix(in srgb, var(--art-red) 78%, #000) 8px 16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 3px 5px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 0;
  animation: guard-peek 3.2s var(--art-spring) 1.2s infinite;
}
.arm__guard i {
  padding: 0 var(--sp-4);
  background: var(--art-screen);
  color: var(--art-paper);
  font: var(--label-03);
  font-family: var(--art-mono);
  font-style: normal;
}
/* 가끔 덮개가 살짝 들썩이며 "열어보라"고 손짓 */
@keyframes guard-peek {
  0%, 80%, 100% { transform: rotateX(0); }
  86% { transform: rotateX(-34deg); }
  92% { transform: rotateX(-6deg); }
}
.arm:active .arm__guard { animation: none; transform: rotateX(-40deg); transition: transform 120ms; }
.arm.is-armed .arm__guard { animation: none; transform: rotateX(-118deg); transition: transform 240ms cubic-bezier(0.3, 0.7, 0.3, 1.3); }
.arm.is-armed .arm__btn {
  transform: translateY(4px) scale(0.96);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--art-phosphor) 30%, #000), 0 0 22px 6px color-mix(in srgb, var(--art-phosphor) 55%, transparent);
  transition-delay: 230ms;
  transition-duration: 120ms;
}
.arm__plate { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.arm__plate b { font: var(--title-01); letter-spacing: -0.02em; }
.arm__plate small { font: var(--label-03); font-family: var(--art-mono); color: var(--art-phosphor); opacity: 0.85; }
.arm__lamp { display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); }
.arm__lamp i {
  width: var(--sp-16);
  height: var(--sp-16);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--art-phosphor) 18%, var(--art-panel-edge));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: background 120ms 320ms, box-shadow 120ms 320ms;
}
.arm__lamp small { font: var(--label-03); font-family: var(--art-mono); color: var(--color-text-tertiary); font-size: 10px; }
.arm.is-armed .arm__lamp i { background: var(--art-phosphor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--art-phosphor) 25%, transparent), 0 0 14px var(--art-phosphor); }

.slipbtn {
  width: 100%;
  min-height: var(--tap-min);
  border: 1px dashed color-mix(in srgb, var(--art-phosphor) 45%, transparent);
  border-radius: var(--r-8);
  background: none;
  color: var(--art-phosphor);
  font: var(--label-02);
  font-family: var(--art-mono);
  cursor: pointer;
  transition: transform 300ms var(--art-spring);
}
.slipbtn:active { transform: scale(0.98, 0.94); transition-duration: 60ms; }

/* 측정 절차서 (SEO 본문) */
.seo.labdoc {
  margin-top: var(--sp-48);
  padding: var(--sp-20) var(--sp-16);
  border-radius: var(--r-4);
  background-color: var(--art-paper);
  background-image: linear-gradient(90deg, var(--art-grid) 1px, transparent 1px), linear-gradient(var(--art-grid) 1px, transparent 1px);
  background-size: var(--sp-12) var(--sp-12);
  color: var(--art-ink);
  box-shadow: var(--shadow-m);
}
.labdoc p { margin: 0; }
.labdoc__no { display: flex; justify-content: space-between; padding-bottom: var(--sp-6); border-bottom: 2px solid var(--art-ink); font: var(--label-03); font-family: var(--art-mono); color: var(--art-ink-2); }
.seo.labdoc h2 { margin: var(--sp-12) 0 var(--sp-12); color: var(--art-ink); font: var(--title-02); }
.labdoc__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--art-ink); border-bottom: 1px solid var(--art-ink); }
.labdoc__meta div { padding: var(--sp-8) 0; }
.labdoc__meta div + div { padding-left: var(--sp-8); border-left: 1px solid var(--art-rule); }
.labdoc__meta dt { font: var(--label-03); font-family: var(--art-mono); color: var(--art-ink-2); }
.labdoc__meta dd { margin: var(--sp-2) 0 0; font: var(--body-03-strong); }
.labdoc__sec { margin-top: var(--sp-24); }
.seo.labdoc h3 { display: flex; gap: var(--sp-6); margin: 0 0 var(--sp-8); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--art-ink); color: var(--art-ink); font: var(--body-02-strong); }
.seo.labdoc h3 .mono { color: var(--art-red); }
.labdoc__scroll { overflow-x: auto; }
.labdoc__table,
.sample__table { width: 100%; border-collapse: collapse; font: var(--body-03); }
.labdoc__table th,
.labdoc__table td { padding: var(--sp-8) var(--sp-6) var(--sp-8) 0; border-bottom: 1px solid var(--art-rule); text-align: left; vertical-align: top; }
.labdoc__table thead th { font: var(--label-03); font-family: var(--art-mono); color: var(--art-ink-2); border-bottom: 1px solid var(--art-ink); }
.labdoc__table th[scope="row"] { font: var(--label-03); font-family: var(--art-mono); color: var(--art-red); }
.labdoc__table td:nth-child(2) { font-weight: 600; white-space: nowrap; }
.labdoc__table td:last-child { white-space: nowrap; padding-right: 0; }
.seo .labdoc__note { margin-top: var(--sp-8); font: var(--caption-01); color: var(--art-ink-2); }
.anchors { margin: 0; padding: 0; list-style: none; }
.anchors li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); padding: var(--sp-6) 0; border-bottom: 1px dashed var(--art-rule); }
.anchors b { width: var(--sp-40); font: var(--label-03); font-family: var(--art-mono); color: var(--art-red); }
.anchors span { padding: 0 var(--sp-6); border: 1px solid var(--art-rule); border-radius: var(--r-4); background: color-mix(in srgb, var(--art-paper) 70%, #fff); font: var(--label-03); font-family: var(--art-mono); color: var(--art-ink); }
.sample {
  position: relative;
  overflow: hidden;
  padding: var(--sp-12) var(--sp-12) var(--sp-16);
  border: 1px solid var(--art-ink);
  background: color-mix(in srgb, var(--art-paper) 60%, #fff);
  transform: rotate(-0.6deg);
}
.sample__head { display: flex; justify-content: space-between; padding-bottom: var(--sp-6); border-bottom: 2px solid var(--art-ink); font: var(--label-03); font-family: var(--art-mono); }
.sample__table th,
.sample__table td { padding: var(--sp-6) 0; border-bottom: 1px solid var(--art-rule); text-align: right; }
.sample__table th { text-align: left; font: var(--body-03-strong); }
.sample__sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--sp-8) !important; font: var(--label-02); }
.sample__sum b { font: var(--display-02); color: var(--art-red); }
.sample__sum small { font: var(--title-04); }
.sample__line { font: var(--body-03-strong); }
.seo .sample__stamp { left: 46%; right: auto; bottom: var(--sp-40); opacity: 0.8; transform: rotate(-12deg); mix-blend-mode: multiply; }
.cond { margin: 0; padding: 0; list-style: none; }
.cond li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-8); padding: var(--sp-8) 0; border-bottom: 1px dashed var(--art-rule); font: var(--body-03); color: var(--art-ink); }
.cond b { font: var(--label-03); font-family: var(--art-mono); color: var(--art-red); padding-top: var(--sp-2); }
/* ---------- 문답: 연속 용지(양옆 구멍 + 초록 띠)에 찍힌 서비스 로그 ---------- */
.printout {
  --hole: 10px;
  position: relative;
  margin: var(--sp-8) calc(var(--sp-4) * -1) 0;
  padding: var(--sp-8) 28px var(--sp-12);
  background:
    radial-gradient(circle, var(--art-panel) 0 3.5px, transparent 4px) 6px 6px / 16px 16px repeat-y,
    radial-gradient(circle, var(--art-panel) 0 3.5px, transparent 4px) calc(100% - 6px) 6px / 16px 16px repeat-y,
    linear-gradient(90deg, transparent 0 22px, var(--art-rule) 22px 23px, transparent 23px calc(100% - 23px), var(--art-rule) calc(100% - 23px) calc(100% - 22px), transparent 0),
    color-mix(in srgb, var(--art-paper) 55%, #fff);
}
.seo .printout__head,
.seo .printout__end {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font: var(--label-03);
  font-family: var(--art-mono);
  color: var(--art-ink-2);
}
.seo .printout__head { padding-bottom: var(--sp-6); border-bottom: 1px dashed var(--art-ink); }
.seo .printout__end { justify-content: center; margin-top: var(--sp-10); letter-spacing: 0.12em; }
.seo.labdoc .logline { padding: 0; border: 0; }
/* 그린바 용지: 줄마다 연한 초록 */
.seo.labdoc .logline:nth-of-type(odd) { background: color-mix(in srgb, var(--art-phosphor) 16%, transparent); }
.seo.labdoc .logline summary {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 52px;
  align-items: center;
  gap: var(--sp-8);
  min-height: 52px;
  padding: var(--sp-6) var(--sp-4);
  color: var(--art-ink);
  font: var(--label-02);
  list-style: none;
  cursor: pointer;
}
.seo.labdoc .logline summary::-webkit-details-marker { display: none; }
.seo.labdoc .logline summary::marker { content: ""; }
.logline__no { font: var(--label-03); font-family: var(--art-mono); color: var(--art-red); }
.logline__q { word-break: keep-all; }
.logline__st {
  justify-self: end;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--art-ink-2);
  font-size: 10px;
  line-height: 14px;
  color: var(--art-ink-2);
}
.logline__st::before { content: "접수"; }
.logline[open] .logline__st { border-color: var(--art-red); color: var(--art-red); transform: rotate(-6deg); }
.logline[open] .logline__st::before { content: "조치됨"; }
.seo.labdoc .logline p {
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-10) 56px;
  font: var(--body-03);
  font-family: var(--art-mono);
  font-size: 12.5px;
  color: var(--art-ink);
  clip-path: inset(0 0 0 0);
  animation: ba-print 520ms steps(8, end) both;
}
.seo.labdoc .logline p .mono { color: var(--art-red); }
@keyframes ba-print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.labdoc__foot { display: flex; justify-content: space-between; gap: var(--sp-8); margin-top: var(--sp-24) !important; padding-top: var(--sp-6); border-top: 2px solid var(--art-ink); font: var(--label-03); font-family: var(--art-mono); color: var(--art-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .arm__guard { animation: none; }
}
.intro { min-height: 100dvh; padding-top: var(--sp-4); }
.intro__desc { font-size: 11px; letter-spacing: -0.01em; }

/* ---------- 하단: 측정 장비에 붙은 자산 관리 태그 ---------- */
.more-sites { padding-top: var(--sp-40); color: var(--art-phosphor); }
.more-sites__title {
  margin: 0 0 var(--sp-12);
  font: var(--label-02);
  font-family: var(--art-mono);
  letter-spacing: 0.08em;
  opacity: 1;
}
.more-sites__title::before { content: "▸ "; }
.more-sites__grid { counter-reset: eq; gap: var(--sp-10); }
.more-sites__item {
  counter-increment: eq;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  grid-template-rows: auto auto auto;
  column-gap: var(--sp-12);
  min-height: 84px;
  padding: var(--sp-10) var(--sp-16) var(--sp-10) var(--sp-24);
  border: 0;
  border-radius: var(--r-4);
  background:
    radial-gradient(circle at 10px 10px, var(--art-panel-edge) 0 3px, transparent 3.5px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--art-panel-edge) 0 3px, transparent 3.5px),
    linear-gradient(180deg, #d9dcd6, #b9bdb5);
  color: var(--art-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 2px 0 var(--art-panel-edge);
  transition: transform var(--dur-fast) var(--art-spring);
}
.more-sites__item:active { transform: scale(0.98); }
.more-sites__item::before {
  content: "EQ-0" counter(eq) "  · 자산 관리";
  white-space: pre;
  grid-column: 1;
  font: var(--label-03);
  font-family: var(--art-mono);
  color: var(--art-red);
  letter-spacing: 0.06em;
}
/* 바코드 */
.more-sites__item::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  height: 44px;
  background: repeating-linear-gradient(90deg, var(--art-ink) 0 2px, transparent 2px 3px, var(--art-ink) 3px 4px, transparent 4px 7px, var(--art-ink) 7px 10px, transparent 10px 11px);
}
.more-sites__name { grid-column: 1; font: var(--body-02-strong); color: var(--art-ink); }
.more-sites__desc { grid-column: 1; color: var(--art-ink-2); opacity: 1; font-family: var(--art-mono); }
@media (prefers-reduced-motion: reduce) {
  .seo.labdoc .logline p { animation: none; }
}