/* ─────────────────────────────────────────────────────────────
   컴포넌트 스타일 — 화면은 둘뿐입니다. 환자 명부, 환자 저작.
   블록 이름은 README의 React 컴포넌트 매핑 표와 1:1로 대응합니다.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink);
  font: var(--t-body); word-break: keep-all; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }

/* 숫자는 예외 없이 고정폭 — 번호 · 나이 · 활력징후 · 배점이 세로로 맞습니다 */
/* 고정폭 숫자는 예외 없이 세로로 맞습니다 — 표에서 자릿수가 어긋나면 못 읽습니다 */
.num, [class*="__n"], .mon__in { font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-mono); }
.label { font: var(--t-label); letter-spacing: .07em; color: var(--ink-3); }

/* ── 왼쪽 2px 규칙 = 이 줄의 상태 ─────────────────────────
   네 곳이 제각각 하던 것을 하나의 장치로 묶습니다.
   색은 이미 정해진 뜻 그대로 — 초록 제공 중 · 호박 손볼 것 · 빨강 위험 · 브랜드 AI.
   규칙이 말하는 것을 배지가 또 말하지 않습니다. */
.rule {
  border-left: 2px solid var(--line-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s2) var(--s4);
}
.rule--ok    { border-left-color: var(--ok);    background: var(--ok-soft); }
.rule--warn  { border-left-color: var(--warn);  background: var(--warn-soft); }
.rule--risk  { border-left-color: var(--danger); }
.rule--ai    { border-left-color: var(--brand); background: var(--brand-soft); }
.rule--quiet { background: var(--paper); }

/* ── 유틸리티 — 인라인 스타일을 대신합니다 ────────────────
   계산된 값(순번 지연 · 좌표 · 비율 · 열 수)만 style 로 남기고 나머지는 여기 있습니다. */
.push { margin-left: auto; }
.label--block { display: block; margin-bottom: var(--s3); }
.is-clickable { cursor: pointer; }
.sheet__no { width: 34px; color: var(--ink-3); flex: none; }
.w-84 { width: 84px; }
.w-56 { width: 56px; }
.w-18 { width: 18%; }
.w-22 { width: 22%; }
.w-26 { width: 26%; }
.w-34 { width: 34%; }
.w-key { width: 70px; }
.input--w1 { max-width: 78px; }
.input--w2 { max-width: 120px; }
.input--w3 { max-width: 150px; }
.input--w4 { max-width: 220px; }
.select--w2 { max-width: 96px; }
.range { accent-color: var(--brand); }
.range--w4 { accent-color: var(--brand); max-width: 220px; }
.check { accent-color: var(--warn); width: 16px; height: 16px; }
input[type="range"] { accent-color: var(--brand); }

/* ═══ 상단바 ══════════════════════════════════════════════ */
.bar {
  position: sticky; top: 0; z-index: 20; height: var(--bar);
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s5); background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.bar__tools { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.bar__mark { display: flex; align-items: center; flex: none; }
.bar__logo { height: 32px; width: auto; }
/* 로고는 라이트/다크 두 벌이 있습니다. 테마에 맞는 쪽만 보입니다. */
.bar__logo--dark { display: none; }
:root[data-theme="dark"] .bar__logo--light { display: none; }
:root[data-theme="dark"] .bar__logo--dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bar__logo--light { display: none; }
  :root:not([data-theme="light"]) .bar__logo--dark  { display: block; }
}

.icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center;
  color: var(--ink-3); flex: none; transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }

/* ═══ 공통 부품 ═══════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-tight); height: 34px; padding: 0 var(--s4);
  border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface);
  font: var(--t-small); font-weight: 600; white-space: nowrap; flex: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover { background: var(--paper-2); }
.btn svg { width: 15px; height: 15px; }
/* 잉크로 채우면 '선택됨', 브랜드로 채우면 '실행함' — 규칙을 섞지 않습니다 */
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
:root[data-theme="dark"] .btn--primary { color: var(--on-brand); }
:root[data-theme="dark"] .btn--primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.btn--ghost { border-color: transparent; background: none; }
.btn--ghost:hover { background: var(--paper-2); }
.btn--sm { height: 28px; padding: 0 var(--s3); font: var(--t-micro); }

.chip {
  height: 28px; padding: 0 var(--s3); border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  font: var(--t-small); font-weight: 500; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: var(--s-tight);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.chip:hover { border-color: var(--line-2); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .chip[aria-pressed="true"] { color: var(--on-ink); }
.chip__n { font: var(--t-label); opacity: .55; }

.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--s2);
  border-radius: var(--r-sm); font: var(--t-label); letter-spacing: .03em; white-space: nowrap;
  background: var(--paper-2); color: var(--ink-2);
}
.tag--ok { background: var(--ok-soft); color: var(--ok); }
.tag--warn { background: var(--warn-soft); color: var(--warn); }
/* 아직 정하지 않은 것 — 합격도 불합격도 아닙니다 */
.tag--wait { background: var(--paper-2); color: var(--ink-2); }

/* 상태 — 행마다 붙이지 않고 묶음 머리글이 대표합니다 */
.status--active   { color: var(--ok); }                    /* 학생에게 제공 중 */
.status--inactive { color: var(--ink-3); }                     /* 다 만들었지만 꺼 둠 */
.status--draft    { color: var(--warn); }                  /* 만드는 중 */

/* 상태 세 단계 — 저작 화면에서 바로 바꿉니다 */
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.seg__btn {
  height: 28px; padding: 0 var(--s3); font: var(--t-micro); font-weight: 600; color: var(--ink-2);
  border-right: 1px solid var(--line-2); background: var(--surface); white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.seg__btn:last-child { border-right: 0; }
.seg__btn:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
.seg__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .seg__btn[aria-pressed="true"] { color: var(--on-ink); }
.seg__btn:disabled { color: var(--ink-3); cursor: not-allowed; background: var(--paper-2); }
/* 이미 그 상태인데 조건이 깨진 경우 — 눌린 채 막혀 있어도 읽혀야 합니다 */
.seg__btn[aria-pressed="true"]:disabled {
  background: var(--paper-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2);
}

/* 사진은 원이 아니라 모서리를 둥글린 사각입니다. 반지름은 avatar.js가 크기에 맞춰 넣습니다. */
/* 사진은 원이 아니라 모서리를 둥글린 사각입니다.
   22% 는 제 크기에 대한 비율이라 어느 크기에서도 모서리 인상이 같습니다.
   크기는 쓰는 자리가 정합니다 — avatar.js 는 내재 크기만 정합니다. */
.avatar {
  overflow: hidden; flex: none; background: var(--paper-2); object-fit: cover;
  border-radius: 22%; box-shadow: inset 0 0 0 1px rgb(22 32 43 / .10);
}
.row__id .avatar { width: var(--photo); height: var(--photo); }
.st .avatar { width: 26px; height: 26px; }
/* 학생이 볼 얼굴입니다 — 담긴 칸이 허락하는 만큼 크게 봅니다 */
.photo__img { width: 100%; height: auto; }
.phone__head .avatar { width: 44px; height: 44px; }

/* ═══ 주요 영역 길잡이 ═══════════════════════════════════
   상단바는 길잡이만 합니다. 고른 항목은 밑줄로 표시합니다 —
   편집 화면의 알약 탭과 섞이지 않도록 다른 장치를 씁니다. */
.nav { display: flex; align-items: center; gap: var(--s-hair); margin-left: var(--s5); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav__item {
  position: relative; padding: 0 var(--s3); height: var(--bar); display: inline-flex; align-items: center;
  font: var(--t-ui); font-weight: 600; color: var(--ink-3); white-space: nowrap;
  transition: color var(--fast) var(--ease);
}
.nav__item:hover { color: var(--ink); }
.nav__item[aria-current="page"] { color: var(--ink); }
.nav__item[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--brand); border-radius: 2px 2px 0 0;
}
.bar #themeBtn { margin-left: auto; }

/* ═══ 화면 머리 ═══════════════════════════════════════════ */
.phead { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-bottom: var(--s5); }
.phead__title { font: var(--t-display); letter-spacing: -.03em; }
.phead__lead { margin-top: var(--s-tight); font: var(--t-small); color: var(--ink-3); }
.phead__tools { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }

/* 찾기 — 상단바에서 이 화면으로 내려왔습니다 */
.find { position: relative; width: min(300px, 46vw); }
.find svg { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 15px; height: 15px; color: var(--ink-3); }
.find input {
  width: 100%; height: 34px; padding: 0 52px 0 33px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); font: var(--t-ui);
}
.find input::placeholder { color: var(--ink-3); }
.find input:focus { outline: none; border-color: var(--line-2); box-shadow: 0 0 0 3px var(--brand-soft); }
.find kbd {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%;
  font: var(--t-label); color: var(--ink-3); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--s-hair) var(--s-tight); background: var(--paper-2);
}

/* ═══ 대시보드 ════════════════════════════════════════════ */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s4); margin-bottom: var(--s5); }
.tile {
  display: grid; gap: var(--s2); padding: var(--s4) var(--s5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--fast) var(--ease);
}
.tile:hover { border-color: var(--line-2); }
.tile--warn { border-left: 3px solid var(--warn); }
.tile__name { font: var(--t-label); color: var(--ink-3); }
.tile__row { display: flex; align-items: baseline; gap: var(--s3); }
.tile__k { font: var(--t-small); color: var(--ink-3); }
.tile__v { margin-left: auto; font: var(--t-num); font-variant-numeric: tabular-nums; font: var(--t-ui); color: var(--ink-2); }
.tile__row--lead .tile__k { font: var(--t-ui); color: var(--ink-2); }
.tile__row--lead .tile__v { font: var(--t-num-l); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); }

/* ═══ 공통 블록 ═══════════════════════════════════════════ */
.block { margin-bottom: var(--s6); }
.block__head { display: flex; align-items: baseline; gap: var(--s3); padding: 0 var(--s1) var(--s3); }
.block__title { font: var(--t-h3); letter-spacing: var(--tk-h3); font-weight: 700; letter-spacing: -.02em; }
.block__note { font: var(--t-label); color: var(--ink-3); }
.block__more { margin-left: auto; font: var(--t-small); color: var(--ink-3); }
.block__more:hover { color: var(--brand); }

.notice {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); margin-bottom: var(--s5);
  border-left: 2px solid var(--line-2); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--paper);
}
.notice--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.notice__txt { font: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.notice__txt b { color: var(--ink); }
.notice--warn .notice__txt b { color: var(--warn); }

/* ═══ 실습 기록 한 줄 ═════════════════════════════════════
   칸 너비는 목록이 정하고 행은 물려받습니다(subgrid).
   행마다 따로 재면 이름이 두 자냐 네 자냐에 따라 아래위 칸이 어긋납니다.
   ─ 목록이 좁아지면 ─
   넓을 때  날짜 · 학생 · 환자/진단 ····· 자리 · 점수
   중간     날짜 · 학생 · 환자/진단 ····· 점수      (자리는 날짜 아래로)
   좁을 때  두 줄 — 위: 학생·환자·점수 / 아래: 날짜·자리 */
.runs {
  display: grid;
  grid-template-columns: max-content minmax(4rem, max-content) max-content 1fr max-content;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.runs--who { grid-template-columns: max-content max-content minmax(4rem, max-content) max-content 1fr max-content; }
.runs--act { grid-template-columns: max-content minmax(4rem, max-content) max-content 1fr max-content max-content; }
.runs__empty { grid-column: 1 / -1; padding: var(--s5); text-align: center; color: var(--ink-3); font: var(--t-ui); }

.run {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
  align-items: center; column-gap: var(--s5); padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
}
@supports not (grid-template-columns: subgrid) {
  .runs, .runs--who, .runs--act { display: block; }
  .run { grid-template-columns: 3.6rem minmax(0, max-content) max-content 1fr max-content; }
  .runs--who .run { grid-template-columns: 3.6rem 4.5rem minmax(0, max-content) max-content 1fr max-content; }
  .runs--act .run { grid-template-columns: 3.6rem minmax(0, max-content) max-content 1fr max-content max-content; }
}
.run:last-child { border-bottom: 0; }

.run__when { display: grid; gap: 1px; white-space: nowrap; }
.run__when b { font: var(--t-small); color: var(--ink-2); }
.run__when span { font: var(--t-label); color: var(--ink-3); }
.run__who { font: var(--t-ui); font-weight: 700; white-space: nowrap; }
.run__who:hover { color: var(--brand); }

/* 이름은 지키고 진단명이 먼저 줄어듭니다 — 어느 환자였는지가 먼저입니다 */
.run__what { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; font: var(--t-ui); color: var(--ink-2); }
.run__name { font-weight: 700; color: var(--ink); white-space: nowrap; flex: none; }
.run__sep { color: var(--line-2); flex: none; }
.run__dx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.run__where { font: var(--t-label); color: var(--ink-3); white-space: nowrap; }
.run__pad { display: block; }
.run__score { display: flex; align-items: baseline; gap: var(--s1); justify-content: flex-end; white-space: nowrap; }
.run__score b { font: var(--t-num); font-variant-numeric: tabular-nums; font: var(--t-h2); letter-spacing: var(--tk-h2); color: var(--ink); }
.run__score i { font: var(--t-label); font-style: normal; color: var(--ink-3); }
.run__score.is-pending b, .run__score.is-pending i { color: var(--warn); }
.run__act { display: flex; justify-content: flex-end; min-width: 4.6rem; }

/* 중간 폭 — 자리 번호를 날짜 아래로 접어 넣습니다 */
@media (max-width: 860px) {
  .runs, .runs--who, .runs--act { grid-template-columns: max-content minmax(4rem, 1fr) max-content; }
  .runs--who { grid-template-columns: max-content max-content minmax(4rem, 1fr) max-content; }
  .runs--act { grid-template-columns: max-content minmax(4rem, 1fr) max-content max-content; }
  .run { column-gap: var(--s4); padding-inline: var(--s4); }
  .run__where, .run__pad { display: none; }
}

/* 좁은 폭 — 두 줄로 풉니다. 뭉개는 것보다 접는 편이 읽힙니다. */
@media (max-width: 620px) {
  .runs, .runs--who, .runs--act { display: block; }
  /* 오른쪽 칸을 고정합니다. max-content 로 두면 '89 점' 행과 '69 점 · PPI 대기' 행의
     칸 너비가 달라져 점수가 세로로 어긋납니다. */
  .run {
    display: grid; grid-template-columns: minmax(0, 1fr) 6.4rem;
    align-items: baseline; row-gap: var(--s1); padding: var(--s3) var(--s4);
  }
  .runs--act .run { grid-template-columns: minmax(0, 1fr) 6.4rem; }
  .run__when { grid-row: 2; grid-column: 1; display: flex; align-items: baseline; gap: var(--s-tight); }
  .run__who  { grid-row: 1; grid-column: 1; }
  .run__what { grid-row: 1; grid-column: 1; }
  .runs--who .run__what { grid-row: 2; grid-column: 1; }
  .runs--who .run__when { grid-row: 3; }
  .run__score { grid-row: 1; grid-column: 2; }
  .run__act   { grid-row: 2; grid-column: 2; }
  /* 자리 번호는 환자 줄의 오른쪽으로 갑니다 — 날짜 옆이 아닙니다 */
  .run__where { display: block; grid-row: 2; grid-column: 2; text-align: right; }
  .runs--who .run__where { grid-row: 2; }
  .runs--act .run__where { display: none; }   /* 채점 버튼과 같은 자리라 자리 번호는 접습니다 */
  .run__pad { display: none; }
}

/* ═══ 학생 목록 ═══════════════════════════════════════════ */
.slist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.2rem 3.4rem 8.4rem 3.8rem 5.2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
/* 머리글과 행이 한 격자를 나눠 씁니다. em 은 글자 크기를 타서 둘이 어긋납니다. */
.slist__head, .srow {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
  align-items: center; gap: var(--s4); padding: 0 var(--s5);
}
@supports not (grid-template-columns: subgrid) {
  .slist__head, .srow { grid-template-columns: minmax(0, 1fr) 3.2rem 3.4rem 8.4rem 3.8rem 5.2rem; }
}
.slist__head { height: 34px; background: var(--paper-2); font: var(--t-label); color: var(--ink-3); }
.srow { min-height: var(--srow-h, 52px); border-top: 1px solid var(--line); transition: background var(--fast) var(--ease); }
.srow:hover { background: var(--paper-2); }
.srow__who { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.srow__who b { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.srow__no { font: var(--t-label); color: var(--ink-3); }
.srow__group, .srow__last { font: var(--t-small); color: var(--ink-3); }
.srow__n { font: var(--t-small); color: var(--ink-2); }
.srow__avg { display: flex; align-items: center; gap: var(--s2); }
.srow__avg b { font: var(--t-small); width: 2.1rem; text-align: right; flex: none; }
.srow__avg .meter { flex: 1 1 auto; }

.meter { display: block; height: 5px; border-radius: var(--r-full); background: var(--paper-2); overflow: hidden; }
.meter__fill { display: block; height: 100%; background: var(--line-2); border-radius: inherit; }
.meter__fill.is-ok  { background: var(--ok); }
.meter__fill.is-mid { background: var(--warn); }
.meter__fill.is-low { background: var(--danger); }

.back { display: inline-flex; align-items: center; gap: var(--s1); margin-bottom: var(--s3); font: var(--t-small); color: var(--ink-3); }
.back:hover { color: var(--ink); }
.back svg { width: 15px; height: 15px; }

.domains { background: var(--paper); border-radius: var(--r-lg); padding: var(--s4) var(--s5); display: grid; gap: var(--s3); }
.domain { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 2.2rem; align-items: center; gap: var(--s4); }
.domain__k { display: flex; align-items: baseline; gap: var(--s-tight); font: var(--t-small); color: var(--ink-2); }
.domain__manual { font: var(--t-label); font-style: normal; color: var(--warn); }
.domain__v { font: var(--t-small); text-align: right; }

/* PPI 채점 창 */
.ppi__title { font: var(--t-h2); letter-spacing: -.02em; }
.ppi__lead { margin-top: var(--s-tight); margin-bottom: var(--s4); font: var(--t-small); color: var(--ink-3); }
.ppi__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 2.4rem 2.6rem; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.ppi__k { font: var(--t-ui); color: var(--ink-2); }
.ppi__range { flex: 1 1 auto; accent-color: var(--brand); }
.ppi__v { font: var(--t-num-xl); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ppi__max { font: var(--t-label); color: var(--ink-3); }
.ppi__rubric { margin: var(--s4) 0 0; padding-left: 1.1em; display: grid; gap: var(--s-tight); font: var(--t-small); line-height: 1.5; color: var(--ink-3); }
.ppi__foot { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); }

/* ═══ 설정 ════════════════════════════════════════════════ */
.settings { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.spane { display: grid; gap: var(--s1); position: sticky; top: calc(var(--bar) + var(--s4)); }
.spane__item {
  display: grid; gap: var(--s-hair); padding: var(--s3) var(--s4); border-radius: var(--r-md);
  transition: background var(--fast) var(--ease);
}
.spane__item b { font: var(--t-ui); font-weight: 600; color: var(--ink-2); }
.spane__item span { font: var(--t-micro); line-height: 1.45; color: var(--ink-3); }
.spane__item:hover { background: var(--paper-2); }
.spane__item[aria-current="page"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.spane__item[aria-current="page"] b { color: var(--brand); }

.room { background: var(--surface); border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s4); box-shadow: inset 0 0 0 1px var(--line); }
.room__head { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); }
.room__head .tag { margin-left: auto; flex: none; }
.room__name { font: var(--t-h3); letter-spacing: var(--tk-h3); font-weight: 700; letter-spacing: -.02em; }
.room__place { display: block; margin-top: var(--s1); font: var(--t-label); color: var(--ink-3); }
.room__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s3); }
.room__note { margin-top: var(--s3); font: var(--t-micro); line-height: 1.5; color: var(--ink-3); }
.room__note b { color: var(--warn); font-weight: 700; }
.room__link { color: var(--brand); font-weight: 600; }
.room__link:hover { text-decoration: underline; }

/* 스테이션 한 자리 — 방을 문에서 내려다본 그림입니다 */
.st {
  display: grid; justify-items: center; gap: var(--s-tight); padding: var(--s3) var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.st:hover { border-color: var(--brand); background: var(--brand-soft); }
.st__top { display: flex; align-items: center; gap: var(--s-tight); width: 100%; }
.st__id { font: var(--t-num); font-variant-numeric: tabular-nums; font: var(--t-label); color: var(--ink-3); }
.st__dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--ok); margin-left: auto; }
.st--check .st__dot { background: var(--warn); }
.st--off .st__dot { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.st--off { opacity: .62; }
.st__blank { width: 26px; height: 26px; border-radius: var(--r-md); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.st__case { font: var(--t-label); font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.3; }
.st--off .st__case { color: var(--ink-3); }
.set__k { display: block; margin: var(--s4) 0 var(--s-tight); font: var(--t-label); color: var(--ink-3); }

.glist { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s-tight); }
.gitem {
  display: flex; align-items: baseline; gap: var(--s2); padding: var(--s2) var(--s3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--fast) var(--ease);
}
.gitem:hover { border-color: var(--brand); }
.gitem b { font: var(--t-ui); }
.gitem span { margin-left: auto; font: var(--t-label); color: var(--ink-3); }

.setlist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.setrow {
  display: grid; grid-template-columns: 7rem 4rem minmax(0, 1fr) max-content;
  align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line);
}
.setrow:last-child { border-bottom: 0; }
.setrow__k { font: var(--t-ui); color: var(--ink-2); }
.setrow__v { font: var(--t-ui); }
.setrow__d { font: var(--t-small); color: var(--ink-3); }

@media (max-width: 900px) {
  .settings { grid-template-columns: minmax(0, 1fr); }
  .spane { position: static; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .spane__item span { display: none; }
  .slist__head { display: none; }
  .srow { grid-template-columns: minmax(0, 1fr) max-content; grid-auto-rows: min-content; gap: var(--s-tight) var(--s3); padding: var(--s3) var(--s4); }
  .srow__group, .srow__last { display: none; }
}

/* ═══ 환자 명부 ═══════════════════════════════════════════ */
.page { padding: var(--s6) var(--s5) var(--s8); max-width: 1200px; margin: 0 auto; }
.page--narrow { max-width: 880px; }

.roster__filters { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }

/* ── 상태 묶음 ─────────────────────────────────────────── */
.group { margin-bottom: var(--s6); }
.group:last-child { margin-bottom: 0; }
.group__head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s3);
  padding: 0 var(--s1) var(--s3);
}
.group__name {
  display: inline-flex; align-items: center; gap: var(--s2);
  font: var(--t-h3); letter-spacing: var(--tk-h3); font-weight: 700; letter-spacing: -.02em;
}
.group__name::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--r-full);
  background: currentColor; flex: none;
}
.group__name.status--inactive::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.group__n { font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.group__desc { font: var(--t-small); color: var(--ink-3); margin-left: auto; }

.list {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;

  /* 목록 전체가 하나의 그리드입니다. 각 행이 이 열을 subgrid 로 물려받으므로
     행마다 폭을 따로 계산하지 않고, 모든 열이 아래로 정확히 맞습니다.
     fr 로 잡아 두면 화면 폭이 바뀌어도 간격이 알아서 재분배됩니다. */
  display: grid;
  grid-template-columns:
    [id]    max-content
    [sum]   minmax(0, 1fr)
    [state] max-content;
}

.row {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
  align-items: start;                      /* 전부 윗선에 맞춰 겁니다 */
  border-bottom: 1px solid var(--line);
  transition: background var(--fast) var(--ease);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--paper-2); }

@supports not (grid-template-columns: subgrid) {
  .row { grid-template-columns: max-content minmax(0, 1fr) max-content; }
}

/* 세 칸 모두 같은 세로 여백에서 시작합니다 — 첫 줄이 한 선에 놓입니다 */
.row > * { padding-block: var(--s5); }

/* 신원 — 사진 옆에 두 줄.
     배지현 / 45세 / 여
     복통 / 급성 담낭염
   글자 크기가 섞여 있어 줄 안에서는 baseline 으로 맞춥니다. */
.row__id {
  display: grid; grid-template-columns: var(--photo) minmax(0, 1fr);
  gap: var(--row-gutter); align-items: start;
  padding-inline: var(--row-gutter);
}
.row__who { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.row__line { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s2); min-width: 0; }
.row__sep { font-style: normal; font-weight: 400; color: var(--line-2); }

.row__name {
  font: var(--t-name); letter-spacing: -.025em;
  max-width: 20ch;
}
.row__meta {
  font: var(--t-num); font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}
/* 임상표현은 굵게, 진단명은 일반체 — 크기와 색은 같고 굵기로만 나뉩니다 */
.row__cpname {
  font: var(--t-h3); letter-spacing: var(--tk-h3); font-weight: 700; letter-spacing: -.015em; color: var(--ink-2);
  white-space: nowrap;
}
.row__dx {
  font: var(--t-h3); letter-spacing: var(--tk-h3); font-weight: 400; letter-spacing: -.01em; color: var(--ink-2);
  max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__dx em { font-style: normal; font-weight: 400; color: var(--ink-3); }

/* 환자 요약표
   세 줄은 종류가 다른 글입니다. 같은 크기로 찍으면 눈이 들어갈 자리가 없어
   활자 층위를 셋으로 갈라 두었습니다.
     주호소 — 이어 읽는 서사.   가장 진하고 크게, 읽기 좋은 길이로 폭을 제한
     특징   — 낱개 사실의 묶음. 세로 규칙으로 경계를 긋고, 결정적 소견 하나만 강조
     학습   — 배경 정보.        가장 작고 흐리게
   레이블은 오른쪽 정렬이라 값의 왼쪽 끝이 한 줄로 섭니다. */
.sum {
  display: grid; grid-template-columns: 3.8em minmax(0, 1fr);
  gap: var(--s3) var(--s3); align-items: baseline; min-width: 0;
  padding-inline-end: var(--row-gutter);
}
.sum__k {
  font: var(--t-label); letter-spacing: .02em;
  color: var(--ink-2); text-align: right; white-space: nowrap;
}

/* 주호소 — 서사 */
.sum__chief {
  font: var(--t-ui); line-height: 1.6; color: var(--ink);
  max-width: 42em;                       /* 한 줄 42자 — 한글에서 편히 읽히는 길이 */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 특징 · 학습 — 낱개 항목. 사이를 세로 규칙으로 끊습니다 */
.sum__items { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); min-width: 0; }
.sum__item { position: relative; }
.sum__item + .sum__item { padding-left: var(--s3); }
.sum__item + .sum__item::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 1px; background: var(--line-2);
}

.sum__items--traits { font: var(--t-small); line-height: 1.5; color: var(--ink-2); }
/* 이 케이스를 가르는 단 하나의 소견 — 명부에서 유일하게 강조되는 글자입니다 */
.sum__items--traits .sum__item--key { font-weight: 700; color: var(--warn); }

.sum__items--goals { font: var(--t-micro); line-height: 1.5; color: var(--ink-3); }

.sum__none, .sum__blank { font-style: normal; font: var(--t-small); color: var(--ink-3); }
.sum__blank { grid-column: 2; }

.row__end {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-tight);
  padding-inline: var(--row-zone) var(--row-gutter); text-align: right;
}
.row__ai {
  display: inline-flex; align-items: center; min-height: calc(1.25rem * var(--row-lead-1));
  font: var(--t-label); color: var(--ai); white-space: nowrap;
}
.row__date {
  display: inline-flex; align-items: center; gap: var(--s-tight);
  min-height: calc(1.25rem * var(--row-lead-1));
  font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap;
}
.row__date i { font: var(--t-label); font-style: normal; }

.empty {
  display: grid; place-items: center; gap: var(--s3); padding: var(--s8) var(--s5);
  text-align: center; color: var(--ink-3);
}
.empty h3 { font: var(--t-h2); color: var(--ink); }
.empty--card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s7) var(--s5);
}

/* ═══ 저작 ════════════════════════════════════════════════ */
/* 기본은 한 칸. 학생 화면을 켜면 오른쪽에 붙습니다(1240px 이상). */
.editor { max-width: 920px; margin: 0 auto; }
.editor--dock { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.editor--dock .editor__top, .editor--dock .reviewbar { grid-column: 1 / -1; }
.dock { border-left: 1px solid var(--line); background: var(--paper-2); padding: var(--s5) var(--s4); }
.dock__in { position: sticky; top: calc(var(--bar) + 116px); }
@media (max-width: 1239px) {
  .editor--dock { display: block; max-width: 920px; }
  .dock { display: none; }
}

/* 케이스 머리와 단계 탭은 한 덩어리로 붙어 다닙니다 */
.editor__top {
  position: sticky; top: var(--bar); z-index: 12;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.editor__bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); padding: var(--s3) var(--s5) var(--s2); }
.editor__title { font-weight: 700; letter-spacing: -.02em; }
.editor__saved { font: var(--t-label); color: var(--ink-3); }
.editor__right { margin-left: auto; display: flex; gap: var(--s2); }

/* 탭 — AI 와 네 섹션은 하는 일이 다릅니다.
   AI 는 케이스를 만드는 곳이라 독립한 칩으로 떼어 놓고,
   네 섹션은 살펴 고치는 한 묶음이라 세그먼트로 붙여 둡니다.
   이 화면에서 색을 가진 것은 AI 칩 하나뿐입니다. */
.steps {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s5) var(--s3); overflow-x: auto; scrollbar-width: none;
}
.steps::-webkit-scrollbar { display: none; }

.tab-ai {
  display: inline-flex; align-items: center; gap: var(--s2); flex: none;
  height: 34px; padding: 0 var(--s4); border-radius: var(--r-full);
  border: 1px solid var(--line-2); background: var(--surface);
  font: var(--t-ui); font-weight: 700; letter-spacing: -.01em; color: var(--ink-2);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.tab-ai:hover { border-color: var(--ai-line); color: var(--ink); }
.tab-ai__spark { color: var(--ai); font: var(--t-small); transition: color var(--fast) var(--ease); }
.tab-ai[aria-current="step"] { background: var(--ai); border-color: var(--ai); color: var(--on-brand); }
.tab-ai[aria-current="step"] .tab-ai__spark { color: var(--on-brand); }
:root[data-theme="dark"] .tab-ai[aria-current="step"] { color: var(--on-ink); }
:root[data-theme="dark"] .tab-ai[aria-current="step"] .tab-ai__spark { color: var(--on-ink); }

.tab-div { width: 1px; height: 18px; background: var(--line); flex: none; }

/* 네 섹션 — 배경이 미끄러져 따라옵니다 */
.segs {
  position: relative; display: flex; flex: none;
  padding: var(--s1); border-radius: var(--r-full); background: var(--paper-2);
}
.segs__pill {
  position: absolute; top: 3px; bottom: 3px; left: 0; opacity: 0;
  border-radius: var(--r-full); background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform var(--base) var(--ease), width var(--base) var(--ease), opacity var(--fast) linear;
}
.step {
  position: relative; z-index: 1; display: inline-flex; align-items: center;
  height: 28px; padding: 0 var(--s4); white-space: nowrap; color: var(--ink-3);
  border-radius: var(--r-full);
  transition: color var(--fast) var(--ease);
}
.step:hover { color: var(--ink-2); }
.step[aria-current="step"] { color: var(--brand); }
.step__name { font-weight: 600; font: var(--t-small); letter-spacing: -.01em; }

@media (prefers-reduced-motion: reduce) { .segs__pill { transition: none; } }

.form { padding: var(--s5) var(--s5) var(--s8); min-width: 0; }
/* ── 문서와 레일 ──────────────────────────────────────────
   탭이 아니라 하나의 케이스 기록입니다. 레일은 목차이고, 스크롤을 따라 켜집니다. */
.editor__body { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--s5); }
.rail {
  position: sticky; top: calc(var(--bar) + var(--s4)); align-self: start;
  display: grid; gap: var(--s-hair); padding: var(--s4) 0;
}
.rail__item {
  display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) var(--s2);
  align-items: center; gap: var(--s2);
  padding: var(--s-tight) var(--s3); border-radius: var(--r-md);
  text-align: left; color: var(--ink-3);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.rail__item:hover { background: var(--paper-2); color: var(--ink-2); }
.rail__item[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.rail__no { font: var(--t-num-s); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.rail__name { font: var(--t-ui); }
.rail__spark { font: var(--t-label); color: var(--brand); grid-column: 1; }
.rail__item--ai { color: var(--brand-ink); }
.rail__dot { width: var(--s-tight); height: var(--s-tight); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.rail__dot.is-done { background: var(--ok); box-shadow: none; }

/* ── 신원 머리글 ────────────────────────────────────────────
   차트를 열면 가장 먼저 누구인지가 나옵니다. 여기 있는 값들은 1-1 기본 정보
   그대로이고, 문서 아래에서는 다시 나오지 않습니다. */
.chart__id {
  display: grid; grid-template-columns: clamp(96px, 13vw, 160px) minmax(0, 1fr); gap: var(--s3) var(--s5);
  padding: var(--s5); border-radius: var(--r-lg);
  background: var(--band); box-shadow: inset 0 0 0 1px var(--band-line), var(--shadow-1);
}
.chart__idmain { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.chart__id { align-items: start; }
.chart__idline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s5); }
/* 사진이 커진 만큼 오른쪽 칸이 세로로 남습니다 — 임상표현 줄을 그 옆으로 올립니다 */
.chart__id .band-photo { grid-row: 1 / span 2; }
.chart__idcp { grid-column: 2; padding-top: var(--s3); border-top: 1px solid var(--rule); }
.chart__idmeta {
  grid-column: 1 / -1; padding-top: var(--s3); border-top: 1px solid var(--rule);
}
.chart__idmeta { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
.chart__idmeta > .field--band { flex: 0 1 auto; }
.chart__idmeta > .band-diag { flex: 1 1 16rem; }

/* 머리글 안의 값은 라벨을 머리에 이고 섭니다 — 표가 아니라 명함의 리듬입니다.
   `.field` · `.field--narrow` 가 뒤에 오므로 여기서는 부모를 함께 적어 이깁니다. */
.chart__id .field--band {
  grid-column: auto; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-hair); padding: 0; min-width: 0;
}
.chart__id .field__label { flex-flow: row wrap; align-items: baseline; gap: var(--s1) var(--s2); padding: 0; }
.chart__id .field__label > :first-child { letter-spacing: var(--tk-chart); }
.chart__id .field__hint { font: var(--t-micro); }
.chart__id .band-name .input { font: var(--t-display); letter-spacing: var(--tk-display); }
.chart__id .band-photo { align-self: start; }
.chart__id .photo-field { display: block; }
.chart__id .band-cp .field__label { display: none; }   /* 임상표현은 칩 자체가 이름을 답니다 */
/* 평가목표 문구는 배너의 각주입니다 — 상자를 벗기고 한 줄로 눕힙니다 */
.chart__id .cp-goal {
  margin-top: var(--s2); padding: 0; background: none; border: 0;
  font: var(--t-small); color: var(--ink-2);
}

/* 한 줄 요약 — 파생값입니다. 고칠 것이 없으므로 괘선도 없습니다. */
.chart__sum {
  margin: var(--s3) 0 0; padding-left: var(--s3);
  border-left: var(--s-hair) solid var(--brand-line);
  font: var(--t-h3); letter-spacing: var(--tk-h3); color: var(--ink-2);
}

/* 경보 띠 — 말할 것이 없으면 나오지 않습니다 */
.chart__alert { display: grid; gap: var(--s-hair); margin-top: var(--s3); }
.alertrow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3);
  margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-md);
  border-left: 3px solid currentColor; font: var(--t-small);
}
.alertrow b { font: var(--t-label); letter-spacing: var(--tk-chart); }
.alertrow span { color: var(--ink-2); }
.alertrow--danger { color: var(--danger); background: var(--warn-soft); }
.alertrow--warn   { color: var(--warn);   background: var(--warn-soft); }

/* ── 차트 발치의 서명란 ─────────────────────────────────────
   진짜 차트는 서명으로 끝납니다. 승인이 접힌 패널 안에 숨어 있으면
   무엇을 확인해야 하는지 보이지 않습니다. */
.chart__foot {
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: var(--s-hair) solid var(--line-2);
}
.chart__foott { margin-bottom: var(--s3); font: var(--t-h2); letter-spacing: var(--tk-h2); }
/* 서명란 안에서는 승인이 카드가 아니라 서명줄입니다 — 이름 아래 선 하나 */
.chart__foot .gates__head > .ai__sub { display: none; }
.chart__foot .gates__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.chart__foot .gate {
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  background: none; padding: var(--s3) var(--s2) var(--s3) 0;
}
.chart__foot .gate.is-on { background: none; border-bottom-color: var(--ok); }
.chart__foot .gate:hover:not(:disabled) { background: var(--paper-2); }
.chart__sign {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3);
  margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--rule);
  font: var(--t-small); color: var(--ink-2);
}
.chart__signk { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.chart__sign .num { font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--ink); }

@media (max-width: 900px) {
  .editor__body { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; padding-top: 0; }
}

.doc { max-width: 52rem; }
.doc__hint { margin: var(--s5) 0; font: var(--t-small); color: var(--ink-3); }
.doc__sec { margin-bottom: var(--s7); scroll-margin-top: calc(var(--bar) + var(--s5)); }
/* 섹션 머리는 차트의 색인 탭입니다 — 주인공이 아니므로 환자 이름보다 작습니다 */
.doc__head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--line);
}
.doc__no {
  font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--on-brand);
  padding: var(--s-hair) var(--s2); border-radius: var(--r-sm); background: var(--brand);
}
.doc__name { font: var(--t-h2); letter-spacing: var(--tk-h2); }
.doc__eng { display: flex; align-items: baseline; gap: var(--s2); margin-left: auto; font: var(--t-label); color: var(--ink-3); }
.doc__eng b { color: var(--ink-2); font-weight: 600; }
.doc__engnote { margin: var(--s1) 0 var(--s5); font: var(--t-micro); color: var(--ink-3); }

/* 어떻게 만들었나 — 맨 위에 접힌 한 줄 */
.doc__made { margin-bottom: var(--s6); scroll-margin-top: calc(var(--bar) + var(--s5)); }
.made__bar {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s3) var(--s4); border-radius: var(--r-lg);
  background: var(--brand-soft); color: var(--brand-ink); text-align: left;
}
.made__bar:hover { box-shadow: inset 0 0 0 1px var(--brand-line); }
.made__spark { font: var(--t-label); }
.made__t { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.made__n { font: var(--t-label); color: var(--ink-3); }
.made__chev { margin-left: auto; font: var(--t-label); font-style: normal; color: var(--ink-3); }

@media (max-width: 900px) {
  .editor__body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail { position: static; grid-auto-flow: column; grid-auto-columns: max-content;
          overflow-x: auto; padding: var(--s2) var(--s5); scrollbar-width: none; }
  .rail__item { grid-template-columns: max-content max-content; }
  .rail__dot { display: none; }
}

/* ── 척추 ─────────────────────────────────────────────────
   상자 안에 상자를 두지 않습니다. 머리카락 굵기의 세로선 하나에
   섹션 번호를 여백에 매답니다. 1-1 · 3-2 는 평가목표집에서 온 진짜 구조라
   매다는 것이 뜻을 갖습니다 — 장식이 아닙니다.
   상자가 사라지면 폼이 차트처럼 읽힙니다. */
.form { padding: var(--s5) var(--s5) var(--s8) calc(var(--s5) + 3.6rem); min-width: 0; }
.fieldset {
  position: relative; margin-bottom: var(--s5);
  border-left: 1px solid var(--line); padding: 0 0 var(--s4) var(--s5);
}
.fieldset:last-child { padding-bottom: 0; }
.fieldset__head {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s2); min-height: 1.5rem;
}
/* 번호는 척추 바깥 여백에 걸립니다 */
.fieldset__no {
  position: absolute; left: calc(-3.6rem - var(--s5)); top: 1px; width: 3.6rem;
  font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--ink-3); text-align: right;
}
.fieldset__head h3 { font: var(--t-h3); letter-spacing: var(--tk-h3); }
/* 척추 위의 마디 — 섹션이 시작하는 자리 */
.fieldset::before {
  content: ""; position: absolute; left: -3px; top: 5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--line-2); box-shadow: 0 0 0 3px var(--paper);
}

.fieldset__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); }
.field { grid-column: 1 / -1; display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s4); padding: var(--s-tight) 0; align-items: start; }
.field--narrow { grid-column: auto; grid-template-columns: 96px minmax(0, 1fr); }
/* 이름 없는 블록은 폭을 다 씁니다 — 라벨 자리에는 노출·출처 표시만 눕습니다 */
.field--full { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.field--full > .field__label { flex-flow: row wrap; align-items: baseline; gap: var(--s2); }
.field__label { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); padding-top: var(--s-hair); }
/* 첫 자식은 이름입니다 — 칸이 하나면 <label>, 여럿이면 <span> 이 옵니다. */
.field__label > :first-child { font: var(--t-label); color: var(--ink-3); }
.field__label > label:first-child { cursor: default; }
.field__ctl { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); min-width: 0; }
/* 세로 flex 안에서는 자식이 내용폭으로 줄어듭니다. 그러면 그 안의 값이 기본 20자 폭으로
   주저앉아 한 줄짜리 문장이 두 줄로 감깁니다. 문서의 값은 칸을 다 씁니다. */
.field__ctl > * { align-self: stretch; }
.field__ctl > button, .field__ctl > .cp-pick { align-self: start; }
.input-row > .input, .input-row > .textarea { flex: 1 1 auto; min-width: 0; }
/* 숫자는 값만큼만 차지합니다 — 넓은 빈 상자 뒤에 단위가 떨어져 있으면 문장이 끊깁니다. */
.input-row > .input--sm { flex: 0 0 auto; width: 4.5rem; }
.input-row > .input--w1 { width: 3.4rem; }
/* 번짐은 왼쪽으로만. 오른쪽까지 번지면 늘어난 칸이 담은 칸을 8px 넘칩니다. */
.field__ctl > .input, .field__ctl > .textarea,
.input-row > .input, .input-row > .textarea { margin-right: 0; }
.field__hint { font: var(--t-small); color: var(--ink-3); }

.vis { display: inline-flex; align-items: center; gap: var(--s1); font: var(--t-label); }
.vis--public  { color: var(--vis-public); }
.vis--ask     { color: var(--vis-ask); }
.vis--private { color: var(--vis-private); }

/* ── 틀 없는 값 ───────────────────────────────────────────
   값이 곧 본문입니다. 상자는 손댈 때만 나타납니다.
   조사에서 권한 대로 — 짚었을 때 입력칸 모양이 드러나야 "고칠 수 있다"가 전해집니다.
   보기에 틀이 없을 뿐 구조는 진짜 폼입니다(input · textarea · label). */
.input, .textarea {
  width: 100%; padding: var(--s1) var(--s2); margin: calc(var(--s1) * -1) calc(var(--s2) * -1);
  border-radius: var(--r-sm); border: 1px solid transparent; background: none;
  font: var(--t-body); color: var(--ink);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
/* ── 괘선 ──
   차트의 값은 선 위에 앉습니다. 선이 값의 자리를 정하고, 동시에 "여기는 고칠 수 있다"를
   말합니다 — 괘선이 없는 값은 고칠 수 없는 값입니다(공식 · 자동 · 거울).
   affordance 를 선이 지므로 짚었을 때의 바탕은 거의 지웁니다. */
.input, .textarea, .select { border-bottom-color: var(--rule); }
.input:hover, .textarea:hover { border-bottom-color: var(--rule-2); cursor: text; }
.select:hover { border-bottom-color: var(--rule-2); }
.input:disabled, .textarea:disabled, .select:disabled,
.input[readonly], .textarea[readonly] { border-bottom-color: transparent; }
.input:focus, .textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.textarea { overflow: hidden; }
.textarea { resize: none; min-height: 2em; }   /* 스스로 자랍니다. 바닥은 한 줄. */
.textarea--sm { min-height: 0; font: var(--t-small); line-height: 1.5; }
.input:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--surface); }
.input--sm { max-width: 120px; }
.input-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

.select {
  padding: var(--s1) var(--s5) var(--s1) var(--s2); margin-left: calc(var(--s2) * -1);
  border: 1px solid transparent; border-radius: var(--r-sm); background-color: transparent;
  font: var(--t-body); color: var(--ink); appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235E6D7C' stroke-width='1.8' stroke-linecap='round'><path d='m4 6.5 4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right var(--s2) center;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.select:focus { outline: none; background-color: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* 모니터 안의 숫자는 계기의 규칙을 따릅니다 — 차트 괘선이 들어가지 않습니다 */
.mon .input, .mon .textarea, .mon .select { border-bottom-color: transparent; }

/* 놓치면 불합격 — 채점 항목에 다는 별표 */
.hf { border: 0; background: none; color: var(--line-2); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 var(--s1) 0 0; }
.hf.is-on { color: var(--danger); }
.hf:hover { color: var(--danger); }
table.data tr.is-hf td { background: var(--warn-soft); }

/* ── 실습 기록 상세 ──────────────────────────────────────
   실습 한 건에서 있었던 일 전부. 대화 · 진찰 · 평가 목표. */
.rd__score { display: grid; }
.rd__d {
  display: grid; grid-template-columns: 6.5rem 5.5rem minmax(0, 1fr);
  align-items: baseline; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule);
}
.rd__dk { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.rd__dv { font: var(--t-num); font-variant-numeric: tabular-nums; }
.rd__de { display: inline-flex; align-items: center; gap: var(--s2); font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ok); }
.rd__de.is-wait { color: var(--ink-3); }
.rd__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rd__de.is-wait .rd__dot { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }

.rd__chat { display: grid; gap: var(--s3); }
.rdb { display: grid; gap: var(--s1); max-width: 40ch; }
.rdb--me { justify-self: end; text-align: right; }
.rdb__k { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.rdb__t {
  margin: 0; overflow-wrap: anywhere; padding: var(--s2) var(--s3); border-radius: var(--r-md);
  font: var(--t-body); line-height: 1.65; background: var(--paper-2); color: var(--ink);
}
.rdb--me .rdb__t { background: var(--brand); color: var(--on-brand); }
.rd__miss { margin: var(--s4) 0 0; font: var(--t-small); color: var(--warn); }

.rd__finds { display: grid; }
/* 수행과 보고를 가르는 줄 — 하나로 합치면 어느 쪽이 부족했는지 안 보입니다 */
.rd__fh {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--line);
}
.rd__fh:first-child { margin-top: 0; }
.rd__fh b { font: var(--t-h3); letter-spacing: var(--tk-h3); color: var(--ink); }
.rd__fh .num { font: var(--t-num-s); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rd__f {
  display: grid; grid-template-columns: 1.2rem 7rem minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule);
}
.rd__fm { font: var(--t-num); color: var(--danger); }
.rd__f.is-got .rd__fm { color: var(--ok); }
.rd__fk { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.rd__fv { font: var(--t-body); color: var(--ink-3); }
.rd__f.is-got .rd__fv { color: var(--ink); }
.rd__fs { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--danger); }
.rd__f.is-got .rd__fs { color: var(--ok); }

/* 학생이 적은 메모 */
.rdnote { display: grid; }
.rdnote__s {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s3);
  align-items: baseline; padding: var(--s2) 0; border-top: 1px solid var(--rule);
}
.rdnote__k { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.rdnote__v { display: grid; gap: var(--s2); min-width: 0; }
.rdnote__v p { margin: 0; font: var(--t-body); color: var(--ink); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.rdnote__dx { display: flex; flex-wrap: wrap; gap: var(--s1); }
@media (max-width: 620px) { .rdnote__s { grid-template-columns: minmax(0, 1fr); row-gap: var(--s1); } }

/* 평가 목표 — 교수 화면과 학생 결과가 같은 것을 씁니다 */
.goal { display: grid; gap: var(--s5); }
.goal__sec h3 { margin: 0 0 var(--s2); font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.goal__w, .goal__list { display: grid; }
.goal__wr {
  display: grid; grid-template-columns: 6.5rem 3rem minmax(0, 1fr);
  align-items: baseline; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule);
}
.goal__wk { font: var(--t-ui); }
.goal__wv { font: var(--t-num); font-variant-numeric: tabular-nums; text-align: right; }
.goal__wy { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.goal__i, .goal__q {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr) 4rem auto;
  align-items: baseline; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule);
}
.goal__i { grid-template-columns: 5rem 5rem minmax(0, 1fr); }
.goal__ik, .goal__qk { font: var(--t-ui); }
.goal__iv, .goal__qm { font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.goal__it, .goal__qa { font: var(--t-small); color: var(--ink-2); line-height: 1.6; }
.goal__qm { text-align: right; }
.goal__qs { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.goal__qs.is-got { color: var(--ok); }
@media (max-width: 620px) {
  .rd__d, .goal__wr { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s1); }
  .rd__de, .goal__wy { grid-column: 1 / -1; }
  .goal__i, .goal__q { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s1); }
  .goal__it, .goal__qa { grid-column: 1 / -1; }
}

/* 벤더 장비에는 더 있습니다 — 접어 둡니다.
   지금 쓸 수 있는 것과 아직 못 쓰는 것을 한 줄에 섞지 않기 위해서입니다. */
.mk__more { border-top: 1px solid var(--line); padding-top: var(--s3); }
.mk__moret {
  display: flex; align-items: baseline; gap: var(--s2); width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left; padding: 0;
}
.mk__moret b { font: var(--t-h3); letter-spacing: var(--tk-h3); color: var(--ink-2); }
.mk__moren { font: var(--t-num-s); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.mk__morec { margin-left: auto; font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); font-style: normal; }
.mk__moreb { display: grid; gap: var(--s4); margin-top: var(--s3); }
.mk__morew {
  display: grid; gap: var(--s1); margin: 0; padding: var(--s2) var(--s3);
  border-radius: var(--r-md); background: var(--paper-2); border-left: 3px solid var(--ink-3);
}
.mk__morew b { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink); }
.mk__morew span { font: var(--t-small); color: var(--ink-2); line-height: 1.6; }
/* .mk__x 는 자유입력의 지우기 단추가 이미 씁니다 — 벤더 행은 다른 이름을 씁니다 */
.mk__vr {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) max-content max-content max-content;
  align-items: baseline; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule);
}
.mk__vk { font: var(--t-ui); color: var(--ink-2); }
.mk__vv { font: var(--t-small); color: var(--ink-3); }
.mk__off { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--warn); cursor: help; }
.mk__pid { font: var(--t-num-s); color: var(--ink-3); background: var(--paper-2); padding: var(--s-hair) var(--s2); border-radius: var(--r-sm); cursor: help; }
.mk__base { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: 0; font: var(--t-small); color: var(--ink-3); }
.mk__basek { font: var(--t-label); letter-spacing: var(--tk-chart); }
@media (max-width: 760px) {
  .mk__vr { grid-template-columns: minmax(0, 1fr) max-content; row-gap: var(--s1); }
  .mk__vv, .mk__pid { grid-column: 1 / -1; }
}

/* 영상 요구 — 교수는 의미만 봅니다. 자산 ID 도 경로도 없습니다. */
.img { display: grid; }
.img__r {
  display: grid; grid-template-columns: 3.4rem 5rem minmax(0, 1fr);
  align-items: baseline; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule);
}
.img__m { font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--brand-ink); }
.img__g { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.img__from { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.img__r.is-block { background: var(--warn-soft); }
.img__ok { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ok); }
.img__no { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--danger); }
.img__block {
  display: grid; gap: var(--s1); margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3); border-radius: var(--r-md);
  background: var(--warn-soft); border-left: 3px solid var(--danger);
}
.img__block b { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--danger); }
.img__block span { font: var(--t-small); color: var(--ink-2); line-height: 1.6; }
.img__cand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s3); }
.img__candk, .img__candn { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.img__candn { margin-left: auto; }
.chip.is-warn { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.img__meta {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s1) var(--s4);
  margin: var(--s3) 0 0;
}
.img__meta dt { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.img__meta dd { margin: 0; font: var(--t-small); color: var(--ink-2); }
@media (max-width: 620px) {
  .img__r { grid-template-columns: 3.4rem minmax(0, 1fr); row-gap: var(--s1); }
  .img__from { grid-column: 1 / -1; }
}

/* ── 마네킹 설정판 ────────────────────────────────────────
   실제 마네킹 컨트롤러가 하는 그대로 — 자리마다 하나씩 정합니다.
   모든 자리를 펴 두는 이유: 감추면 무엇을 정할 수 있는지 안 보이고,
   안 정한 자리가 정상인지 미정인지도 구분되지 않습니다. */
.mk { display: grid; gap: var(--s5); }
.mk__rule { margin: 0; font: var(--t-small); color: var(--ink-3); }
/* 두 자세를 다 쓰면 실습 중에 마네킹을 옮겨야 합니다 — 조용히 지나가면 안 됩니다 */
.mk__warn {
  display: grid; gap: var(--s1); margin: 0;
  padding: var(--s2) var(--s3); border-radius: var(--r-md);
  background: var(--warn-soft); border-left: 3px solid var(--warn);
}
.mk__warn b { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--warn); }
.mk__warn span { font: var(--t-small); color: var(--ink-2); }
/* 이 표가 어디서 나왔는지 — 원문 한 줄 */
.mk__from { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin: 0; }
.mk__fromk { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.mk__from code { font: var(--t-num-s); color: var(--ink-2); background: var(--paper-2); padding: var(--s-hair) var(--s2); border-radius: var(--r-sm); }
.mk__pos { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.mk__vf { font: var(--t-label); letter-spacing: var(--tk-chart); cursor: help; }
.mk__vf.is-ok { color: var(--ok); }
.mk__vf.is-todo { color: var(--ink-3); }
.mk__g { display: grid; gap: var(--s2); }
.mk__h {
  display: flex; align-items: baseline; gap: var(--s3);
  padding-bottom: var(--s1); border-bottom: 1px solid var(--rule);
}
.mk__hk { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.mk__hn { margin-left: auto; white-space: nowrap; font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.mk__hn .num { font: var(--t-num); font-variant-numeric: tabular-nums; }
.mk__hn.is-set { color: var(--brand-ink); }

.mk__slots { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mk__slots .chip.is-on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.mk__zones { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.mk__z { display: inline-flex; align-items: center; gap: var(--s2); }
.mk__zk { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.mk__z.is-set .mk__zk { color: var(--brand-ink); }
.mk__z.is-set .select { border-color: var(--brand-line); background-color: var(--brand-soft); }

.mk__free { display: grid; gap: var(--s-hair); }
.mk__fr {
  display: grid; grid-template-columns: minmax(0, 1fr) max-content 22px;
  align-items: start; gap: var(--s3);
  padding: var(--s2) 0; border-top: 1px solid var(--rule);
}
.mk__fr.is-key { border-top-color: var(--warn); }
.mk__key { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); border: 0; background: none; cursor: pointer; padding-top: var(--s1); }
.mk__fr.is-key .mk__key { color: var(--warn); }
.mk__x {
  width: 22px; height: 26px; border: 0; background: none; border-radius: var(--r-sm);
  color: var(--ink-3); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.mk__fr:hover .mk__x, .mk__x:focus-visible { opacity: 1; }
.mk__x:hover { color: var(--danger); background: var(--danger-soft); }
.mk__add {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s1); padding: var(--s1) var(--s2) var(--s1) 0;
  border: 0; background: none; color: var(--ink-3); font: var(--t-small); cursor: pointer;
}
.mk__add:hover { color: var(--brand-ink); }
.mk__plus { font: var(--t-h3); line-height: 1; }

/* 배점 — 교수가 정하지 않는 값이라 슬라이더가 없습니다.
   숫자 옆에 어디서 나왔는지(성과 몇 줄)를 함께 답니다. */
.wt { display: grid; }
.wt__r {
  display: grid; grid-template-columns: 5.5rem 2.4rem minmax(4rem, 1fr) 7.5rem max-content;
  align-items: center; gap: var(--s3);
  padding: var(--s2) 0; border-top: 1px solid var(--rule);
}
.wt__k { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.wt__v { font: var(--t-num); font-variant-numeric: tabular-nums; text-align: right; }
.wt__bar { height: 6px; border-radius: var(--r-full); background: var(--paper-2); overflow: hidden; }
.wt__fill { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.wt__why { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.wt__ev { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ok); }
.wt__foot { margin: var(--s3) 0 0; font: var(--t-small); color: var(--ink-3); }
.wt__foot .num { font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 720px) {
  .wt__r { grid-template-columns: 5.5rem 2.4rem minmax(3rem, 1fr); row-gap: var(--s1); }
  .wt__why, .wt__ev { grid-column: 2 / -1; }
}

/* 임상표현 선택 — 저작에서만 등장합니다 */
.cp-pick { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.cp-pick__no { font: var(--t-num); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--brand); }
.cp-pick__name { font-weight: 700; letter-spacing: -.015em; }
.cp-goal {
  font: var(--t-small); color: var(--ink-2); line-height: 1.7;
  padding: var(--s3); border-radius: var(--r-md); background: var(--paper-2);
}
.cp-goal .label { display: block; margin-bottom: var(--s1); }

/* 병력 지식 — 문진표의 리듬. 이름과 사실이 나란히 놓이고, 상자는 없습니다. */
/* 병력 지식 — 여섯 갈래가 3~4줄씩이라 그냥 두면 회색 벽 하나로 보입니다.
   갈래마다 경계를 주고 이름을 값과 대비시켜, 훑을 때 갈래가 먼저 잡히게 합니다. */
/* 라벨 열은 다른 필드와 같은 자리에서 끝나야 값이 한 줄로 섭니다 —
   .field 가 8rem + gap 이므로 그 합을 그대로 씁니다. 9rem 은 16px 기본에서만 우연히 같습니다.
   열 사이 틈은 0 으로 두고 라벨에 안여백을 줍니다. 틈이 있으면 구분선이 그만큼 끊깁니다. */
.know { display: grid; grid-template-columns: calc(8rem + var(--s4)) minmax(0, 1fr); gap: 0; align-items: start; }
.know__k { padding: var(--s3) var(--s4) var(--s3) 0; cursor: default; }
.know__kn { font: var(--t-ui); font-weight: 700; letter-spacing: -.015em; color: var(--ink-2); }
.know__v { min-width: 0; padding: var(--s3) 0; }
/* 두 번째 갈래부터 경계선. 자식이 라벨·값 순서라 셋째부터가 둘째 줄입니다. */
.know > :nth-child(n+3) { border-top: 1px solid var(--line); }
/* 학생이 실제로 던지는 질문 — 갈래 이름만으로는 무엇을 적을지 추상적입니다 */
.know__ask { margin-bottom: var(--s1); font: var(--t-small); color: var(--ink-3); font-style: italic; }
/* 한 열로 접히면 라벨과 값이 위아래로 서므로, 둘 다에 선을 그으면 갈래마다 줄이 둘이 됩니다.
   접힌 뒤에는 갈래의 머리(라벨)에만 긋습니다. */
@media (max-width: 640px) {
  .know { grid-template-columns: minmax(0, 1fr); gap: var(--s-hair); }
  .know > :nth-child(n+3) { border-top: 0; }
  .know > .know__k:nth-child(n+3) { border-top: 1px solid var(--line); }
  .know__k { padding: var(--s3) 0 0; }
  .know__v { padding-top: var(--s1); }
}

/* 저작은 언제나 Scenario 하나 — 화살표 뒤만 섹션마다 다릅니다 */
.engine {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s5); padding: var(--s2) var(--s4);
  border-left: 2px solid var(--line-2); background: var(--paper);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font: var(--t-small); line-height: 1.55; color: var(--ink-3);
}
.engine__k {
  font: var(--t-label); padding: var(--s1) var(--s2); border-radius: var(--r-full);
  background: var(--brand-soft); color: var(--brand-ink); flex: none; white-space: nowrap;
}
.engine__arrow { font-style: normal; color: var(--line-2); flex: none; }
.engine__to { color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.engine--patient { border-left-color: var(--brand); }
.engine--patient .engine__to, .engine--score .engine__to { color: var(--brand-ink); }

/* 누가 쓰고 누가 읽는가 · §2.2 */
.flow {
  margin-top: var(--s5); padding: var(--s4) var(--s5);
  border-radius: var(--r-lg); background: var(--paper);
}
.flow__head { display: flex; justify-content: space-between; margin-bottom: var(--s3); }
.flow__side { font: var(--t-label); color: var(--ink-3); }
.flow__body { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s5); align-items: center; }
.flow__src {
  display: grid; gap: var(--s-hair); padding: var(--s3) var(--s4);
  border: 1px solid var(--brand-line); border-radius: var(--r-md); background: var(--brand-soft);
}
.flow__src b { font: var(--t-ui); color: var(--brand-ink); }
.flow__src span { font: var(--t-label); color: var(--ink-3); font-family: var(--font-mono); }
.flow__lanes { display: grid; gap: var(--s-tight); }
.flow__lane { display: grid; grid-template-columns: 7rem max-content minmax(0, 1fr); align-items: baseline; gap: var(--s3); }
.flow__sec { font: var(--t-small); color: var(--ink-2); }
.flow__arrow { font-style: normal; color: var(--line-2); }
.flow__to { font: var(--t-small); color: var(--ink-3); }
.flow__to.is-llm { color: var(--brand-ink); font-weight: 600; }

/* 곁그림의 점 — 읽기 전용입니다 */
:root[data-theme="dark"] .body__img { filter: invert(1) brightness(1.5); opacity: .24; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .body__img { filter: invert(1) brightness(1.5); opacity: .24; }
}

/* ── 생체 신호 ────────────────────────────────────────────
   이 세계의 대표 물건은 침대 옆 환자 모니터입니다.
   교수가 적는 값이 곧 학생이 보게 될 화면이므로, 폼이 아니라 모니터로 그립니다.
   페이지에서 진한 것은 여기 하나뿐입니다 — 나머지는 조용히 둡니다. */
.mon-wrap { display: grid; gap: var(--s3); }
.mon {
  /* 격자가 아니라 흐르는 배치입니다. 혈압은 값이 둘이라 넓은 칸을 쓰는데,
     격자로 두면 마지막 줄에 빈 구역이 남습니다. 흐르게 두면 칸이 늘 줄을 채웁니다. */
  display: flex; flex-wrap: wrap;
  gap: 1px; padding: 1px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--mon-bg);                       /* 칸 사이 실선 */
  box-shadow: 0 1px 2px rgb(14 21 28 / .3), inset 0 0 0 1px var(--mon-line);
}
.mon__cell {
  /* 여섯 칸이 한 줄에 들어가야 합니다. flex-wrap 은 줄을 나눌 때 기준폭(flex-basis)만 보고
     줄인 뒤 판단하지 않으므로, 기준폭의 합이 칸보다 넓으면 마지막 칸이 그냥 내려갑니다.
     581px 칸에 기준폭 합이 600px 이라 「통증」이 혼자 두 번째 줄에 섰습니다.
     혈압은 두 칸이 아니라 1.5칸이면 충분합니다. */
  flex: 1 1 4.7rem; min-width: 0;
  display: grid; gap: var(--s-hair); padding: var(--s3);
  background: var(--mon-cell);                       /* 모니터는 두 테마에서 같습니다 */
}
.mon__k { font: var(--t-label); color: var(--mon-key); letter-spacing: .06em; }
.mon__v { display: flex; align-items: baseline; gap: var(--s1); }
.mon__in {
  flex: 1 1 0; width: auto; min-width: 0; padding: 0; border: 0; background: none;
  font: var(--t-num-xl); font-variant-numeric: tabular-nums; letter-spacing: -.04em; color: var(--mon-val);
  font-variant-numeric: tabular-nums;
}
/* 혈압은 값이 둘이라 내용이 162px 를 요구합니다. 기준폭을 그보다 좁게 주면
   한 줄에는 들어가되 숫자가 잘립니다 — 지난번 「128 / 8(」 이 그렇게 나왔습니다. */
.mon__cell--pair { flex: 1.5 1 10.2rem; }
.mon__in--pair { flex: 0 1 auto; width: 2.6em; text-align: right; }
.mon__in--pair + .mon__slash + .mon__in--pair { text-align: left; }
.mon__in::placeholder { color: var(--mon-dim); }
.mon__in:focus { outline: none; color: var(--mon-val); }
.mon__cell:focus-within { background: var(--mon-focus); }
.mon__slash { font-style: normal; color: var(--mon-slash); font: var(--t-num-l); font-variant-numeric: tabular-nums; }
.mon__u { font: var(--t-label); color: var(--mon-mute); font-style: normal; }
/* 범위를 벗어난 값 — 색만이 아니라 자리 표시도 함께 */
.mon__cell.is-out .mon__in { color: var(--mon-out); }
.mon__cell.is-out .mon__k::after { content: " ▲"; color: var(--mon-out); }
/* 마네킹이 내는 값에는 작은 점 하나. 낱말 배지를 여섯 번 다는 대신입니다. */
.mon__cell.is-dev .mon__k::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: var(--s-tight);
  border-radius: 50%; background: var(--mon-dev); vertical-align: middle;
}
.mon--post .mon__in { font: var(--t-num-l); font-variant-numeric: tabular-nums; }

.mon-foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.mon-foot__k { font: var(--t-label); color: var(--ink-3); }
.mon-foot__legend { margin-left: auto; font: var(--t-label); color: var(--ink-3); display: flex; align-items: center; gap: var(--s-tight); }
.mon-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mon-dev); display: inline-block; }

.mon-more { display: grid; gap: var(--s-tight); }
.mon-more__t {
  justify-self: start; height: 28px; padding: 0 var(--s3); border-radius: var(--r-md);
  border: 1px dashed var(--line-2); font: var(--t-micro); font-weight: 600; color: var(--ink-2);
}
.mon-more__t[aria-pressed="true"] { border-style: solid; border-color: var(--brand); color: var(--brand); }
.mon-more__t:disabled { opacity: .75; cursor: not-allowed; }
.mon-row { display: grid; grid-template-columns: 7rem max-content; align-items: center; gap: var(--s3); }
.mon-row__k { font: var(--t-small); color: var(--ink-2); }
.mon-row__v { display: flex; align-items: baseline; gap: var(--s-tight); }
.mon-row .mon__in { width: 3.4rem; font: var(--t-h2); letter-spacing: var(--tk-h2); color: var(--ink); }
.mon-row .mon__slash, .mon-row .mon__u { color: var(--ink-3); font: var(--t-small); }
.mon-post { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.mon-post__note { font: var(--t-label); color: var(--ink-3); }
.mon-postbox { display: grid; gap: var(--s-tight); }

/* 옛 .abn* 블록의 잔해 넷(셀렉터가 지워진 선언 블록)이 여기 있었습니다.
   CSS 파서가 그것을 건너뛰다가 바로 뒤의 .lines 규칙까지 함께 삼켜,
   목록이 ul 기본 padding 40px 을 그대로 쓰고 있었습니다. 지웠습니다. */

/* 목록 — 줄마다 고칩니다. 글머리는 흐리게 두고, 지우기는 그 줄에 손을 얹어야 나옵니다. */
.lines { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.lines__i { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: var(--s2); align-items: start; }
.lines__i::before {
  content: ""; position: absolute; left: calc(var(--s3) * -1); top: .72em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); opacity: .7;
}

/* 표지가 붙는 줄은 기본 글머리를 끕니다 — 둘이 겹칩니다 */
.lines--say .lines__i::before, .lines--never .lines__i::before { display: none; }
/* 표지는 DOM 의 aria-hidden 스팬입니다. ::before 생성 텍스트는 보조기기가
   읽을지 말지가 제각각이라 뜻을 실을 수 없습니다(WCAG F87). */
.lines__m { position: absolute; line-height: 1; user-select: none; }

/* 필수 대사 — 환자가 소리 내어 말할 문장입니다. 평서문과 같은 모양이면
   「이건 대사다」가 안 읽힙니다. 여는 따옴표를 불릿 자리에 둡니다. */
.lines--say .lines__m {
  top: .22em; left: calc(var(--s5) * -1);
  font: var(--t-h2); line-height: 1; color: var(--brand);
}
.lines--say .lines__t {
  padding-left: var(--s3); border-left: 2px solid var(--brand-line);
  border-bottom-color: transparent;
}
.lines--say .lines__t:focus { border-bottom-color: var(--brand); }

/* 절대 말하지 않을 것 — 새어 나가면 그 케이스가 망가집니다.
   다른 목록과 같은 모양으로 두면 가장 위험한 줄이 가장 눈에 안 띕니다. */
.lines--never .lines__m {
  top: .42em; left: calc(var(--s5) * -1);
  font: var(--t-label); color: var(--danger);
}
.lines--never .lines__t {
  padding-left: var(--s3); border-left: 2px solid var(--danger);
  border-bottom-color: transparent; color: var(--ink-2);
}
.lines--never .lines__t:focus { border-bottom-color: var(--danger); }
.lines__t { min-height: 0; }
.lines__x {
  width: 22px; height: 26px; border: 0; background: none; border-radius: var(--r-sm);
  color: var(--ink-3); font-size: 15px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease);
}
.lines__i:hover .lines__x, .lines__x:focus-visible { opacity: 1; }
.lines__x:hover { color: var(--danger); background: var(--danger-soft); }
.lines__x:disabled { opacity: 0; cursor: default; }
.lines__add {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s1); padding: var(--s1) var(--s2) var(--s1) 0;
  border: 0; background: none; color: var(--ink-3); font: var(--t-small); cursor: pointer;
}
.lines__add:hover { color: var(--brand-ink); }
.lines__plus { font: var(--t-h3); line-height: 1; }

/* 곁그림 — 고치는 곳이 아니라 확인하는 곳입니다 */

/* 이상 소견 고르기 — 부위로 묻습니다 */
.sheet--pick { width: min(560px, calc(100vw - 32px)); }
.pick { padding: var(--s5); max-height: 72vh; overflow-y: auto; }
.pick__title { font: var(--t-h2); letter-spacing: -.02em; }
.pick__lead { margin-top: var(--s-tight); font: var(--t-small); color: var(--ink-3); }
.pick__reg { margin-top: var(--s4); }
.pick__regk { display: block; margin-bottom: var(--s-tight); font: var(--t-label); color: var(--ink-3); }
.pick__rows { display: grid; gap: var(--s1); }
.pick__opt {
  display: flex; align-items: baseline; gap: var(--s3); width: 100%;
  padding: var(--s2) var(--s3); border-radius: var(--r-md); text-align: left;
}
.pick__opt:hover, .pick__opt.is-pending { background: var(--paper-2); }
.pick__opt.is-pending { box-shadow: inset 0 0 0 1px var(--brand-line); }
.pick__g { font: var(--t-label); color: var(--ink-3); min-width: 3.4rem; }
.pick__opt b { font: var(--t-ui); font-weight: 600; }
.pick__zones { display: flex; align-items: center; gap: var(--s-tight); flex-wrap: wrap; padding: var(--s2) var(--s3) var(--s3); }
.pick__zk { font: var(--t-label); color: var(--ink-3); margin-right: var(--s2); }
.pick__free { display: flex; gap: var(--s2); }
.pick__free .input { flex: 1 1 auto; }

@media (max-width: 620px) {
  /* .mon 은 flex 라 grid-template-columns 가 듣지 않습니다 — 접기는 flex-wrap 이 합니다.
     좁은 화면에서는 칸이 더 작아도 되므로 기준폭만 낮춥니다. */
  .mon__cell { flex-basis: 6.2rem; }
  .mon__cell--pair { flex-basis: 9rem; }
  .mon__in { font: var(--t-name); letter-spacing: var(--tk-name); }
  .mon-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}

/* ── 시뮬레이터 운영 계획 ─────────────────────────────────
   청진 부위 · 복부 구역 · 동공은 본래 몸 위의 자리입니다.
   그림: Wikimedia Commons (Mikael Häggström, CC0 1.0) — assets/body/LICENSE.txt */
.body { display: grid; gap: var(--s3); }
.body__head { display: grid; gap: var(--s2); }
.body__lead { font: var(--t-small); color: var(--ink-3); }
.body__lead b { color: var(--ink-2); }
:root[data-theme="dark"] .body__img { filter: invert(1) brightness(1.5); opacity: .28; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .body__img { filter: invert(1) brightness(1.5); opacity: .28; }
}

/* 짚는 자리 — 채워진 곳은 브랜드색으로 차고, 비면 점선입니다 */
/* 점은 좌표에 정확히 놓고, 딱지는 그 옆으로 흘립니다.
   단추 상자를 가운데 맞추면 딱지 너비만큼 점이 밀립니다. */

.bpop {
  position: absolute; z-index: 5; translate: 12px -50%; min-width: 12rem;
  padding: var(--s3); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
  animation: rise var(--fast) var(--ease);
}
.bpop--left { translate: calc(-100% - 12px) -50%; }
.bpop__head { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s2); }
.bpop__head b { font: var(--t-small); }
.bpop__x { margin-left: auto; width: 22px; height: 22px; border-radius: var(--r-sm); color: var(--ink-3); }
.bpop__x:hover { background: var(--paper-2); color: var(--ink); }
.bpop__why { margin-top: var(--s2); font: var(--t-label); line-height: 1.5; color: var(--ink-3); }
.bpop .finding__v { flex-wrap: wrap; }

@media (max-width: 620px) {
  /* 그림은 요약이지 유일한 입구가 아닙니다. 좁으면 접고 표로 고칩니다. */
}

/* ── 진찰 넷 · 시진 · 촉진 · 타진 · 청진 ────────────────────
   교수는 진찰법으로 생각합니다. 화면도 그 축을 가져야 합니다. */


/* 자리마다 한 칸. 비우면 계통 값을 그대로 씁니다 — 같은 값을 열여섯 번 저장하지 않습니다. */
.zone__k { font: var(--t-label); color: var(--ink-3); }

/* ── 의사의 소견 ──────────────────────────────────────────
   선택지에서 고르면 마네킹이, 직접 적으면 화면이 재현합니다. */
.chip--sm { height: 25px; padding: 0 var(--s3); font: var(--t-micro); }

/* ── 위급도 · VMR §3.1 필수 ─────────────────────────────── */
.acuity { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s2); }
.acuity__opt {
  display: grid; gap: var(--s1); padding: var(--s3) var(--s4); text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.acuity__opt:hover { border-color: var(--line-2); }
.acuity__opt b { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.acuity__desc { font: var(--t-micro); line-height: 1.5; color: var(--ink-2); }
.acuity__opt[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.acuity__opt[aria-pressed="true"] b { color: var(--brand-ink); }

/* ── 그 임상표현만 묻는 것 · VMR §3.2 ───────────────────── */
.gset { display: grid; gap: var(--s-hair); padding: var(--s3); border-radius: var(--r-md); background: var(--paper); }
.gset--danger { background: var(--warn-soft); }
.gset__focus { margin-bottom: var(--s2); font: var(--t-micro); line-height: 1.5; color: var(--ink-3); }
.gset__focus b { color: var(--ink-2); }
.gset__forbid {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: baseline;
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px dashed var(--line-2);
  font: var(--t-micro); color: var(--warn);
}
.gset__forbid b { font-weight: 700; }
.gset__forbid span::before { content: "· "; }
.gset__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s-tight) 0; }
.gset__k { font: var(--t-small); color: var(--ink-2); }
.gset__v { display: flex; align-items: center; gap: var(--s-tight); flex-wrap: wrap; }
.gset__v .input { max-width: 22rem; }

/* ── 만들 수 없는 이유 · VMR §3.3 ───────────────────────── */
.stops { margin: 0 0 var(--s3); padding: var(--s3) var(--s4) var(--s3) 2.2rem; list-style: none;
  border-left: 2px solid var(--warn); background: var(--warn-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0; display: grid; gap: var(--s-tight); }
/* 막은 이유는 이름만 대지 않고 그 자리로 데려다 줍니다 */
.stops__i {
  position: relative; display: flex; align-items: baseline; gap: var(--s2); width: 100%;
  text-align: left; padding: 1px 0; background: none; border: 0;
  font: var(--t-small); line-height: 1.55; color: var(--ink-2); cursor: pointer;
}
.stops__i::before { content: "·"; position: absolute; left: -.9rem; color: var(--warn); font-weight: 700; }
.stops__go { margin-left: auto; font: var(--t-label); font-style: normal; color: var(--ink-3); white-space: nowrap; }
.stops__i:hover { color: var(--brand-ink); }
.stops__i:hover .stops__go { color: var(--brand); }

@media (max-width: 620px) { .gset__row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } }
.select--sm { height: 28px; padding: 0 26px 0 var(--s2); font: var(--t-small); background-position: right var(--s2) center; }


@media (max-width: 620px) {
  .vrow, .finding { grid-template-columns: minmax(0, 1fr) max-content; }
  .vrow__k, .finding__k { grid-column: 1 / -1; }
}

table.data { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
table.data th, table.data td { padding: var(--s-tight) var(--s3); text-align: left; border-bottom: 1px solid var(--line); font: var(--t-ui); vertical-align: top; }
table.data th { font: var(--t-label); color: var(--ink-3); background: var(--paper-2); }
table.data tr:last-child td { border-bottom: 0; }


.photo-field { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* ═══ 겹침 창 (임상표현 고르기 · 학생 화면) ═══════════════ */
.sheet-bg {
  position: fixed; inset: 0; z-index: 40; background: rgb(22 32 43 / .40);
  backdrop-filter: blur(2px); display: grid; place-items: start center; padding-top: 11vh;
  animation: fade var(--fast) var(--ease);
}
.sheet {
  width: min(560px, calc(100vw - 32px)); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  overflow: hidden; animation: rise var(--base) var(--ease);
}
.sheet--narrow { width: min(360px, calc(100vw - 32px)); padding: var(--s4); }
.sheet input.sheet__q { width: 100%; height: 48px; padding: 0 var(--s4); border: 0; border-bottom: 1px solid var(--line); background: none; font: var(--t-h2); letter-spacing: var(--tk-h2); }
.sheet input.sheet__q:focus { outline: none; }
.sheet__list { max-height: 54vh; overflow-y: auto; padding: var(--s2); }
.sheet__item { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s2) var(--s3); border-radius: var(--r-md); text-align: left; }
.sheet__item:hover, .sheet__item.is-active { background: var(--paper-2); }
.sheet__item b { font-weight: 600; font: var(--t-ui); }
.sheet__item small { color: var(--ink-3); font: var(--t-micro); margin-left: auto; }
.sheet__empty { padding: var(--s5); text-align: center; color: var(--ink-3); font: var(--t-ui); }

/* ── 새 환자 시작하기 — 두 갈래 ──────────────────────────
   같은 무게로 나란히 둡니다. 어느 쪽이 옳은지는 교수의 사정이지
   우리가 정할 일이 아닙니다. */
.sheet--start { width: min(520px, calc(100vw - 32px)); }
.start { padding: var(--s5); }
.start__title { font: var(--t-h2); letter-spacing: -.02em; }
.start__lead { margin-top: var(--s-tight); font: var(--t-small); color: var(--ink-3); }
.start__opt {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: center; gap: var(--s4); width: 100%; margin-top: var(--s4);
  padding: var(--s4); text-align: left; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.start__opt:hover { border-color: var(--brand); background: var(--brand-soft); }
.start__ico svg { width: 19px; height: 19px; }
.start__ico {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-md); background: var(--paper-2); color: var(--brand);
  font: var(--t-h2); letter-spacing: var(--tk-h2); line-height: 1;
}
.start__opt:hover .start__ico { background: var(--surface); }
.start__body { display: grid; gap: var(--s1); }
.start__name { font: var(--t-h3); letter-spacing: var(--tk-h3); letter-spacing: -.015em; }
.start__sub  { font: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.start__meta { font: var(--t-label); color: var(--ink-3); }
.start__go   { color: var(--ink-3); font: var(--t-ui); }
.start__opt:hover .start__go { color: var(--brand); }
.start__notice {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border-left: 2px solid var(--warn); background: var(--warn-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font: var(--t-small); line-height: 1.55; color: var(--ink-2);
}
.start__notice b { color: var(--warn); font-weight: 700; }

@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { opacity: 0; transform: translateY(-6px) } }

/* ═══ 학생 화면 미리보기 ══════════════════════════════════ */
.phone { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
.phone__head { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.phone__name { font-weight: 700; letter-spacing: -.015em; }
.phone__meta { font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--ink-3); margin-top: var(--s-hair); }
.phone__prompt { font: var(--t-small); line-height: 1.7; color: var(--ink-2); padding: var(--s3); background: var(--paper-2); border-radius: var(--r-md); margin-bottom: var(--s3); }
.phone__tasks { display: flex; flex-direction: column; gap: var(--s-tight); margin-bottom: var(--s3); }
.phone__task { display: flex; gap: var(--s2); font: var(--t-small); color: var(--ink-2); }
.phone__task b { font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--brand); }
.phone__vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s1); margin-bottom: var(--s3); }
.phone__v { text-align: center; padding: var(--s-tight) var(--s-hair); border-radius: var(--r-sm); background: var(--paper-2); }
.phone__v b { display: block; font: var(--t-num); font-variant-numeric: tabular-nums; }
.phone__v span { font: var(--t-label); color: var(--ink-3); }
.phone__v--alert { background: var(--warn-soft); }
.phone__v--alert b { color: var(--warn); }
.phone__cta { width: 100%; height: 36px; border-radius: var(--r-md); background: var(--ink); color: var(--paper); font-weight: 700; font: var(--t-small); }
:root[data-theme="dark"] .phone__cta { color: var(--on-ink); }

/* ═══ 저장소 연결 끊김 띠 ══════════════════════════════════
   api 서버를 못 읽어 씨앗만 보고 있을 때 상단바 바로 아래 붙습니다.
   교수 화면은 이 상태에서 저장을 막습니다(app.js Store.degraded). */
.degraded {
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--danger);
  background: var(--surface);
  font: var(--t-small); font-weight: 700; color: var(--danger);
}

/* ═══ dev 표시등 ══════════════════════════════════════════ */
.dev-dot {
  position: fixed; right: 12px; bottom: 12px; z-index: 60;
  display: flex; align-items: center; gap: var(--s-tight); padding: var(--s-tight) var(--s3);
  border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-1); font: var(--t-label); color: var(--ink-3);
}
.dev-dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--ok); }
.dev-dot.is-off::before { background: var(--danger); }

/* ═══ 반응형 ═════════════════════════════════════════════ */
@media (max-width: 1020px) {
  .list { grid-template-columns: max-content minmax(0, 1fr) max-content; }
  .row__id, .row__end { grid-row: 1; }
  .sum { grid-row: 2; grid-column: 1 / -1; padding-block: 0 var(--s5); padding-inline: var(--row-gutter); }
}
@media (max-width: 680px) {
  .bar { padding: 0 var(--s4); gap: var(--s2); }
  .bar__logo { height: 24px; }
  /* 아이콘이 있는 단추만 글자를 접습니다. 통째로 숨기면 글자만 있는 단추가
     빈 상자가 됩니다 — 학생 화면의 「끝내기」가 그렇게 사라졌습니다. */
  .btn:has(svg) span { display: none; }
  .page { padding: var(--s5) var(--s4) var(--s7); }

  .list { grid-template-columns: minmax(0, 1fr) max-content; }
  .row > * { padding-block: var(--s4); }
  .row__id { grid-template-columns: 88px minmax(0, 1fr); padding-inline: var(--s4); gap: var(--row-zone); }
  .row__id .avatar { width: 88px; height: 88px; }
    .row__name { font: var(--t-h2); letter-spacing: var(--tk-h2); }
  .row__end { padding-inline: 0 var(--s4); }
  .row__date { display: none; }

  .editor__bar { padding: var(--s3) var(--s4) var(--s2); }
  .steps { padding: 0 var(--s4) var(--s3); }
  .form { padding: var(--s5) var(--s4) var(--s7); }
  .fieldset__body { grid-template-columns: 1fr; }
  .field, .field--narrow { grid-column: 1 / -1; grid-template-columns: 1fr; gap: var(--s2); }
  .field__label { padding-top: 0; flex-direction: row; align-items: center; gap: var(--s2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 촘촘 모드가 실제로 닿는 곳 ──
   토큰만으로 줄지 않는 고정값 몇 개를 여기서 덮습니다. 값이 아니라 리듬만 바꿉니다. */
:root[data-density="compact"] {
  --srow-h: 40px;
}
/* 명부 한 줄의 위아래 여백 — 촘촘에서 24px → 12px */
.row > * { padding-block: var(--row-pad, var(--s5)); }
:root[data-density="compact"] { --row-pad: var(--s3); --srow-h: 40px; }

/* ═══ AI 섹션 ═════════════════════════════════════════════
   남보라 한 색만 씁니다. 초록·호박은 이미 다른 뜻을 갖고 있습니다. */
.ai { max-width: 780px; }
.ai__head { margin-bottom: var(--s5); }
.ai__title { font: var(--t-display); letter-spacing: var(--tk-display); }
.ai__lead { font: var(--t-ui); color: var(--ink-2); margin-top: var(--s-tight); line-height: 1.6; }
.ai__sub { font: var(--t-h2); margin: var(--s6) 0 var(--s3); }

.ai__form { display: flex; flex-direction: column; }
.aif { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.aif:first-child { border-top: 0; padding-top: 0; }
.aif__k { display: flex; flex-direction: column; gap: var(--s1); }
.aif__no { font: var(--t-num-s); font-variant-numeric: tabular-nums; color: var(--ai); letter-spacing: .06em; }
.aif__label { font: var(--t-ui); font-weight: 700; letter-spacing: -.015em; }
.aif__hint { font: var(--t-small); color: var(--ink-3); line-height: 1.45; }
.aif__v { min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }

/* 묶음 머리 — 열두 줄을 다 채워야 하는 줄 알면 시작을 못 합니다.
   막는 것과 안 막는 것을 눈으로 갈라 둡니다. */
.aifg {
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s5); padding-bottom: var(--s2); border-bottom: 2px solid var(--line-2);
}
.ai__form > .aifg:first-child { margin-top: 0; }
.aifg__m { font: var(--t-label); color: var(--ai); }
.aifg__t { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.aifg__n { font: var(--t-small); color: var(--ink-3); }
.aifg__r { margin-left: auto; font: var(--t-label); color: var(--warn); font-weight: 700; white-space: nowrap; }
.aif + .aifg { border-top: 1px solid var(--line); padding-top: var(--s5); }

/* 아직 안 정한 필수 줄에만 결이 섭니다 — 세지 않아도 남은 것이 보이게 */
.aif--need { padding-left: var(--s3); border-left: 3px solid transparent; }
.aif--open { border-left-color: var(--warn); }
.aif__need { align-self: flex-start; font: var(--t-label); padding: 1px var(--s1);
             border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink-3); }
.aif--open .aif__need { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.aif.is-pointed { animation: point 1.6s var(--ease); }

.ai__cpbtn {
  display: flex; align-items: baseline; gap: var(--s3); width: 100%; text-align: left;
  padding: var(--s3) var(--s3); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface);
}
.ai__cpbtn:hover { background: var(--paper-2); }
.ai__cpbtn b { font: var(--t-h2); letter-spacing: var(--tk-h2); letter-spacing: -.02em; }
.ai__cpparent { font: var(--t-label); color: var(--ink-3); }
.ai__cpswap { margin-left: auto; font: var(--t-label); color: var(--ai); }
.ai__goal { font: var(--t-small); color: var(--ink-2); line-height: 1.7; padding: var(--s3); background: var(--paper-2); border-radius: var(--r-md); }
.ai__none { font: var(--t-small); color: var(--ink-3); }

/* 원인 칩 — 평가목표집의 공식 감별진단 버킷.
   하나의 컨트롤이 주진단·감별진단·사이시험 정답을 함께 정합니다. */
.ai__causes { display: flex; flex-direction: column; gap: var(--s3); }
.cbucket { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-tight); }
.cbucket__k { font: var(--t-label); color: var(--ink-3); min-width: 88px; text-align: right; }
.chip--cause { height: 26px; font: var(--t-small); }
.chip--cause.is-dx { background: var(--ai); border-color: var(--ai); color: var(--on-brand); }
.chip--cause.is-ddx { background: var(--ai-soft); border-color: var(--ai-line); color: var(--ai); }
.chip__tag { font: var(--t-label); font-style: normal; opacity: .75; margin-left: var(--s1); }
.ai__chips { display: flex; flex-wrap: wrap; gap: var(--s-tight); }

.ai__run { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.ai__caveat { font: var(--t-small); color: var(--ink-2); }
.ai__caveat b { color: var(--ai); }
.ai__acts { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; align-self: stretch; }
.ai__acts .btn--ai { margin-left: auto; }

/* 만들기 화면에서는 아래에 붙어 늘 보입니다 — 긴 폼 맨 끝에 있는
   비활성 단추를 찾아 헤매게 두지 않습니다. */
/* 폼 폭 안에 둡니다 — 음수 마진으로 넓히면 부모보다 커져 가로가 잘립니다 */
.ai__run--stick {
  position: sticky; bottom: 0; z-index: 14;
  gap: var(--s2); margin-top: var(--s6); padding: var(--s3) var(--s4) var(--s4);
  background: var(--surface); border-top: 1px solid var(--ai-line);
  border-radius: var(--r-md) var(--r-md) 0 0;
  box-shadow: 0 -6px 20px rgb(22 32 43 / .07);
}
.ai__run--stick .stops { margin-bottom: 0; }

/* ═══ 만들기 화면 ═════════════════════════════════════════ */
.create__top {
  position: sticky; top: var(--bar); z-index: 12;
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s5);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.create__title { font-weight: 700; letter-spacing: -.02em; }
.create__body { padding: var(--s6) var(--s5) 0; }
.create__body .ai { margin: 0 auto; }
.btn--ai { height: 40px; padding: 0 var(--s5); font: var(--t-h3); letter-spacing: var(--tk-h3);
  background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn--ai:hover:not(:disabled) { background: var(--brand-ink); border-color: var(--brand-ink); }
.btn--ai:disabled { opacity: .45; cursor: not-allowed; }
:root[data-theme="dark"] .btn--ai { color: var(--on-brand); }
.btn__spark { font: var(--t-small); }

/* 생성 진행 — 라벨과 구조를 먼저 그리고 값만 차오릅니다 */
.gen { max-width: 620px; }
.gen__head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); font: var(--t-h3); letter-spacing: var(--tk-h3); }
.gen__spark { color: var(--ai); }
svg.gen__spark { width: 17px; height: 17px; flex: none; }
.gen__list { display: flex; flex-direction: column; gap: var(--s-hair); }
.gen__row { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-md); color: var(--ink-3); animation: rise 240ms var(--ease) both; }
.gen__row b { font-weight: 600; font: var(--t-ui); color: var(--ink-2); }
.gen__note { font: var(--t-small); color: var(--ink-3); }
.gen__dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--ai); flex: none; animation: pulse 900ms ease-in-out infinite; }
.gen__row.is-done .gen__dot { animation: none; background: var(--ok); }
.gen__row.is-done b { color: var(--ink); }
.gen__row.is-locked .gen__dot { animation: none; background: var(--line-2); }
.gen__row.is-locked::after { content: "잠김 — 건너뜀"; font: var(--t-label); color: var(--ink-3); margin-left: auto; }
.gen__row.is-none .gen__dot { animation: none; background: none; box-shadow: inset 0 0 0 1.5px var(--warn); }
.gen__row.is-none::after { content: "문서에 없습니다"; font: var(--t-label); color: var(--warn); margin-left: auto; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* 생성 후 요약 */
.recap { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--s2) var(--s4); margin-bottom: var(--s5); }
.recap dt { font: var(--t-label); color: var(--ink-3); text-align: right; }
.recap dd { margin: 0; font: var(--t-ui); color: var(--ink); }

.secs { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.sec { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.sec:last-child { border-bottom: 0; }
.sec__name { display: flex; align-items: baseline; gap: var(--s2); }
.sec__name b { font: var(--t-h3); letter-spacing: var(--tk-h3); letter-spacing: -.015em; }
.sec__name:hover b { text-decoration: underline; }
/* 문서에서 읽었을 때만 — 서식이 다르면 못 채운 자리가 남습니다 */
.sec__gap { margin-left: auto; font: var(--t-label); color: var(--ink-3); }
.sec__gap.is-open { color: var(--warn); }
.sec__gap + .sec__state { margin-left: 0; min-width: 5.5em; text-align: right; }
.gapfill {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border: 1px dashed var(--brand-line); border-radius: var(--r-lg); background: var(--brand-soft);
}
.gapfill__txt { font: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.gapfill__txt b { color: var(--ink); }
.sec__state { margin-left: auto; font: var(--t-label); color: var(--ok); }
.sec__state.is-open { color: var(--ai); }
/* 승인 넷 · VMR §9[7] — 잠금이 아니라 서명입니다. 누가 언제 승인했는지 남습니다. */
.gate {
  display: grid; gap: 1px; justify-items: start; padding: var(--s-tight) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-md); min-width: 6.6rem;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.gate b { font: var(--t-micro); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.gate__st { font: var(--t-label); color: var(--ink-3); }
.gate:hover { border-color: var(--line-2); }
.gate.is-on { border-color: var(--ok); background: var(--ok-soft); }
.gate.is-on b { color: var(--ok); }
.gate.is-on .gate__st { color: var(--ok); }

.gates { margin-top: var(--s6); }
.gates__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.gates__n { font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--warn); }
.gates__n.is-done { color: var(--ok); }
.gates__lead { font: var(--t-small); color: var(--ink-3); flex: 1 1 16rem; }
.gates__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s2); }
.gates__foot { margin-top: var(--s3); font: var(--t-label); color: var(--ink-3); }
.gate--wide { min-width: 0; gap: var(--s1); padding: var(--s3) var(--s4); }
.gate__top { display: flex; align-items: baseline; gap: var(--s2); width: 100%; }
.gate__top b { font: var(--t-ui); }
.gate--wide .gate__st { margin-left: auto; }
.gate__desc { font: var(--t-micro); line-height: 1.45; color: var(--ink-3); text-align: left; }
.gate__sec { font: var(--t-label); color: var(--ink-3); opacity: .7; }
.gate.is-block { cursor: not-allowed; background: var(--paper); }
.gate.is-block b { color: var(--ink-3); }
.gate.is-block .gate__st, .gate.is-block .gate__desc { color: var(--warn); }

/* 거울 — 다른 섹션이 주인인 값. 보이되 고칠 수 없습니다. */
.mirror { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.mirror__v { font: var(--t-num); font-variant-numeric: tabular-nums; font: var(--t-h2); letter-spacing: var(--tk-h2); color: var(--ink-2); }
.mirror__go {
  display: inline-flex; align-items: baseline; gap: var(--s-tight);
  font: var(--t-label); color: var(--ink-3);
  border-bottom: 1px dashed var(--line-2); padding-bottom: 1px;
}
.mirror__go:hover { color: var(--brand); border-color: var(--brand); }
.mirror__go i { font-style: normal; }

/* 출처 · VMR §1.2 — 여섯을 교수가 알 넷으로 줄였습니다 */
.prov {
  font: var(--t-label); padding: var(--s-hair) var(--s2); border-radius: var(--r-sm);
  background: var(--paper-2); color: var(--ink-3); white-space: nowrap; cursor: help;
}
.prov--source  { background: var(--paper-2); color: var(--ink-2); }
.prov--author  { background: var(--warn-soft); color: var(--warn); }
.prov--derived { background: var(--paper-2); color: var(--ink-3); }

/* 재현 기록 · VMR §3.1 */
.seedline {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline;
  margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line);
  font: var(--t-label); color: var(--ink-3);
}
.seedline b { color: var(--ink-2); }
.seedline span { font-family: var(--font-mono); }

.ai__foot { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); flex-wrap: wrap; }
.ai__auditor { font: var(--t-small); color: var(--ink-3); }

/* ═══ AI 초안 표시 ════════════════════════════════════════ */
/* AI가 쓴 필드 — 색이 아니라 점선입니다.
   강조색을 하나 더 만드는 대신 형태로 구분하면 색각과 무관하게 읽힙니다. */
.field--ai { position: relative; padding-left: var(--s3); }
.field--ai::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 0;
  border-left: 2px dashed var(--brand);
}
.field--ai .input, .field--ai .textarea, .field--ai .kcard, .field--ai .vital, .field--ai table.data {
  border-color: var(--brand-line); border-style: dashed;
}
.field__ai { grid-column: 2; display: flex; align-items: center; gap: var(--s2); margin-top: var(--s-hair); }
.field__aimark { font: var(--t-label); color: var(--ai); }
.field__ok { font: var(--t-label); color: var(--ink-3); padding: var(--s1) var(--s2); border: 1px solid var(--line); border-radius: var(--r-full); }
.field__ok:hover { border-color: var(--ai-line); color: var(--ai); background: var(--ai-soft); }
.field.is-pointed { animation: point 1.6s var(--ease); }
@keyframes point { 0%, 100% { background: transparent } 15%, 60% { background: var(--brand-soft) } }

/* ═══ 3-1 모니터 — 위급도와 근거 ═════════════════════════ */
.mon-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.mon-head__k { font: var(--t-label); color: var(--ink-3); }
.mon-head__ok { font: var(--t-label); color: var(--ok, var(--ink-3)); }
.mon-head__none { font: var(--t-small); color: var(--ink-3); }
/* 어디서 나오는 값인가 — 색이 아니라 글자입니다(색각 이상).
   점 하나로는 「이 증례의 결정적 소견인 체온이 장비 밖」이 보이지 않습니다. */
.mon__src { font: var(--t-label); color: var(--mon-mute); letter-spacing: .02em; }
.mon__cell.is-dev .mon__src { color: var(--mon-dev); }
.mon-why { margin-top: var(--s2); display: grid; gap: var(--s1); }
.mon-why__r { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; font: var(--t-small); }
.mon-why__k { color: var(--warn); font-variant-numeric: tabular-nums; }
.mon-why__v { color: var(--ink-3); }

/* ═══ 3-2 — 진단이 시사하는 소견 ═════════════════════════ */
.mk__seed {
  margin-bottom: var(--s4); padding: var(--s3) var(--s4);
  border: 1px solid var(--ai-line); border-radius: var(--r-md); background: var(--ai-soft);
}
.mk__seedh { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.mk__seedm { color: var(--ai); }
.mk__seedt { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.mk__seedn { margin-left: auto; font: var(--t-label); color: var(--ink-3); }
.mk__seedv { margin: var(--s1) 0 var(--s2); font: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.mk__seedok { font: var(--t-label); color: var(--ai); }

/* 모두 정상인 계통 — 이름과 자리 수는 그대로 보입니다 */
.mk__quiet { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.mk__quieth { display: flex; align-items: baseline; gap: var(--s2); }
.mk__quietm { color: var(--ink-3); }
.mk__quiett { font: var(--t-ui); font-weight: 700; }
.mk__quietn { margin-left: auto; font: var(--t-label); color: var(--ink-3); }
.mk__quietl { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.mk__quietb {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: var(--s-tight) var(--s3); border: 1px solid var(--line-2);
  border-radius: var(--r-pill); background: var(--surface); font: var(--t-small);
}
.mk__quietb:hover { border-color: var(--brand); background: var(--brand-soft); }
.mk__quietb .num { color: var(--ink-3); }

/* 권하는 값 — 누르기 전에는 아무것도 바뀌지 않습니다 */
.sugg {
  display: inline-flex; align-items: baseline; gap: var(--s2); align-self: flex-start;
  padding: var(--s-tight) var(--s3); border: 1px dashed var(--ai-line);
  border-radius: var(--r-pill); background: none; font: var(--t-small); color: var(--ink-2);
}
.sugg b { color: var(--ai); }
.sugg:hover { background: var(--ai-soft); border-style: solid; }

.reviewbar {
  position: sticky; bottom: 0; z-index: 14;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5); margin-top: var(--s6);
  background: var(--surface); border-top: 1px solid var(--ai-line);
  box-shadow: 0 -6px 20px rgb(22 32 43 / .07);
}
.reviewbar__mark { color: var(--ai); }
svg.reviewbar__mark { width: 16px; height: 16px; flex: none; }
.reviewbar__txt { font: var(--t-small); color: var(--ink-2); }
.reviewbar__txt b { color: var(--ai); }

/* ═══ 정합성 점검 ═════════════════════════════════════════ */
.lint { border: 1px solid var(--ai-line); border-radius: var(--r-lg); background: var(--surface); margin-bottom: var(--s5); overflow: hidden; }
.lint__head { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--ai-soft); }
.lint__n { font: var(--t-num); font-variant-numeric: tabular-nums; color: var(--on-brand); background: var(--ai); border-radius: var(--r-full); padding: var(--s1) var(--s2); }
.lint__head b { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.lint__sub { font: var(--t-small); color: var(--ink-2); }
.lint__item { display: flex; gap: var(--s3); width: 100%; text-align: left; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); align-items: flex-start; }
.lint__item:hover { background: var(--paper-2); }
.lint__kind { font: var(--t-label); color: var(--ink-3); min-width: 92px; padding-top: var(--s-hair); }
.lint__item--high .lint__kind { color: var(--danger); }
.lint__body { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.lint__body b { font: var(--t-ui); }
.lint__why { font: var(--t-small); color: var(--ink-2); line-height: 1.55; }
.lint__fix { font: var(--t-small); color: var(--ai); }
.lint__ok { margin-left: auto; font: var(--t-label); color: var(--ink-3); padding: var(--s1) var(--s2); border: 1px solid var(--line); border-radius: var(--r-full); flex: none; }
.lint__ok:hover { border-color: var(--ok); color: var(--ok); }

@media (max-width: 680px) {
  .aif { grid-template-columns: 1fr; gap: var(--s2); }
  .cbucket__k { min-width: 0; text-align: left; width: 100%; }
  .recap { grid-template-columns: 84px minmax(0, 1fr); }
  .sec { flex-wrap: wrap; }
  .lint__kind { min-width: 0; }
}

/* 좁아지면 사진이 위로, 나머지가 아래로 — 한 줄에 다 넣으면 이름이 두 글자씩 감깁니다 */
@media (max-width: 720px) {
  .chart__id { grid-template-columns: minmax(0, 1fr); }
  .chart__id .band-photo { grid-row: auto; max-width: 140px; }
  .chart__idcp { grid-column: 1 / -1; }
}

/* ── 인쇄 — 레일·상단바·단추를 빼고 굴선과 서명만 남깁니다 ── */
@media print {
  .bar, .rail, .dock, .reviewbar, .editor__top, .phead__tools, .seg, .btn, .icon-btn { display: none !important; }
  body { background: #fff; }
  .page, .doc { max-width: none; padding: 0; }
  .editor__body { grid-template-columns: minmax(0, 1fr); }
  .chart__id, .block, .total { box-shadow: none; border: 1px solid #ccc; }
  .doc__sec { break-inside: avoid; }
  .chart__foot { break-before: avoid; }
}