/* ─────────────────────────────────────────────────────────────
   vmr.css — 목업에 없는 것만.

   색·간격·타이포는 tokens.css 가, 일반 부품(.btn·.card·.tag·.input·.pcard·
   .devstatus·.clinic·.rep·.dom·.total·.tutor…)은 base.css·student.css 가 정합니다.
   여기 있는 것은 이 앱에만 있는 넷뿐입니다 —
     바디맵 · 히트맵 · 마네킹 세팅표 · 점검표.
   ───────────────────────────────────────────────────────────── */

/* ── 상단바의 점 셋 ─────────────────────────────────────── */
.rig {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3); border-radius: var(--r-md);
  background: var(--paper-2); color: var(--ink-2); font: var(--t-micro);
}
.rig:hover { background: var(--brand-soft); color: var(--brand-ink); }
.rig__d { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); flex: none; }
.rig__d[data-s="ok"] { background: var(--ok); }
.rig__d[data-s="off"] { background: var(--danger); }
.rig__d[data-s="unknown"] { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.rig__t { white-space: nowrap; }
@media (max-width: 620px) { .rig__t { display: none; } }

/* 장비 패널이 「연결됐다」와 「조정이 나간다」를 갈라 말하는 자리 */
.devstatus__why {
  margin: 0; padding: var(--s3) var(--s4);
  border-top: 1px solid var(--mon-line);
  font: var(--t-small); color: var(--mon-mute);
}

/* ── 낱말 단추 묶음 (주제 고르기) ───────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip--btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 36px; padding: 0 var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: var(--t-ui); cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.chip--btn:hover { border-color: var(--brand); background: var(--brand-soft); }

/* ── 증례 묶음 (주제별 접기) ────────────────────────────── */
.group { margin-bottom: var(--s4); }
details.group > summary.group__head {
  border-bottom: 1px solid var(--line); cursor: pointer; padding-bottom: var(--s3);
}
details.group > summary.group__head:hover { border-bottom-color: var(--brand); }
.group__no { font: var(--t-num-s); color: var(--ink-3); font-style: normal; }
.group__name { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.group__n { margin-left: auto; font: var(--t-num-s); color: var(--ink-3); }
.group > .cards { margin-top: var(--s4); }

/* ── ★ 마네킹 세팅표 — 이 앱의 요점 ─────────────────────
   장비의 말이 아니라 우리 말로 적습니다. 왼쪽이 「무슨 진찰로 드러나는가」,
   가운데가 「무엇을 어떻게」, 오른쪽이 「그래서 됐는가」입니다. */
.simplan { margin: var(--s6) 0; }
.simplan__head { display: flex; align-items: baseline; gap: var(--s3); }
.simplan__t { margin: 0; font: var(--t-h2); letter-spacing: var(--tk-h2); }
.simplan__n { font: var(--t-num-s); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.simplan__posture {
  margin-left: auto; font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3);
}
.simplan__lead { margin: var(--s2) 0 var(--s3); font: var(--t-small); color: var(--ink-3); }
.simplan__rows { display: grid; }

.simrow {
  display: grid; gap: var(--s3); align-items: baseline;
  grid-template-columns: 4.2rem minmax(0, 9rem) minmax(0, 1fr) minmax(0, 11rem) 5.5rem;
  padding: var(--s3) 0; border-top: 1px solid var(--rule);
}
.simrow__m { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.simrow__k { font: var(--t-body); color: var(--ink); }
.simrow__v { font: var(--t-h3); letter-spacing: var(--tk-h3); color: var(--ink); font-variant-numeric: tabular-nums; }
.simrow__src { font: var(--t-micro); color: var(--ink-3); overflow-wrap: anywhere; }
.simrow__s { font: var(--t-label); letter-spacing: var(--tk-chart); text-align: right; color: var(--ink-3); }

/* 상태는 색이 아니라 뜻입니다 — 색만으로 구분하지 않게 글자를 늘 함께 씁니다 */
.simrow[data-s="applied"] .simrow__s { color: var(--ok); }
.simrow[data-s="failed"] .simrow__s { color: var(--danger); }
.simrow[data-s="skipped"] .simrow__s { color: var(--warn); }
.simrow[data-s="planned"] .simrow__s { color: var(--ink-3); }
.simrow[data-s="applied"] { box-shadow: inset 2px 0 0 var(--ok); padding-left: var(--s3); }

@media (max-width: 780px) {
  .simrow { grid-template-columns: 4.2rem minmax(0, 1fr) 5.5rem; row-gap: var(--s1); }
  .simrow__v { grid-column: 2; }
  .simrow__src { grid-column: 2 / -1; }
}

.simplan__un {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border-radius: var(--r-md); background: var(--warn-soft); border-left: 3px solid var(--warn);
}
.simplan__un b { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.simplan__un ul { margin: var(--s2) 0 0; padding-left: var(--s5); display: grid; gap: var(--s1); }
.simplan__un li { font: var(--t-small); color: var(--ink-2); }

/* ── 점검표 ─────────────────────────────────────────────── */
.cks { display: grid; }
.ck {
  display: grid; gap: var(--s3); align-items: baseline;
  grid-template-columns: 1.2rem minmax(0, 8rem) minmax(0, 1fr);
  padding: var(--s3) 0; border-top: 1px solid var(--rule);
}
.ck__m { font: var(--t-num-s); color: var(--danger); }
.ck[data-ok="1"] .ck__m { color: var(--ok); }
.ck__k { font: var(--t-body); color: var(--ink); }
.ck__v { font: var(--t-small); color: var(--ink-2); }
.ck__fix { grid-column: 3; font: var(--t-micro); color: var(--warn); }

/* ── 설정 줄 ─────────────────────────────────────────────
   .admform 은 student.css 것을 그대로 씁니다(라벨이 칸 위에 서는 세로 배치).
   여기서는 넓은 화면에서 라벨을 왼쪽에 세우는 것만 더합니다. */
@media (min-width: 720px) {
  .admform__row { flex-direction: row; align-items: center; gap: var(--s3); }
  .admform__k { flex: 0 0 5rem; }
  .admform__row .input, .admform__row .select { flex: 1 1 12rem; min-width: 0; }
}

/* .setlist·.setrow 는 base.css 것을 씁니다 — 4열 그리드(이름·값·설명·동작).
   여기서는 앞에 점 하나를 더 세우려고 열을 하나 늘립니다. */
.setlist--dot .setrow { grid-template-columns: 10px 7rem minmax(0, 1fr) max-content max-content; }
@media (max-width: 700px) {
  .setlist--dot .setrow { grid-template-columns: 10px minmax(0, 1fr) max-content; }
}
.ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
.ldot[data-on="1"] { background: var(--ok); }
.setrow__why { grid-column: 1 / -1; margin: 0; font: var(--t-small); color: var(--ink-3); }
.setrow__why:empty { display: none; }

/* 음원 동기화 거치 점검 결과 한 줄 — 눌러야 채워지므로 비면 자리를 안 잡습니다 */
.seatline { margin: var(--s2) 0 0; font: var(--t-small); color: var(--ink-2); }
.seatline:empty { display: none; }
.seatline[data-ok="1"] { color: var(--ok); }
.seatline[data-ok="0"] { color: var(--danger); }

/* 청진기 줄에는 동작 단추가 붙습니다 — 이름·MAC·설명·단추 넷을 벌려 놓습니다 */
.setlist--dot .setrow .btn { justify-self: end; }
/* ── 접어 둔 장비 이야기 ────────────────────────────────
   고장 났을 때만 폅니다. 기본은 닫혀 있어야 합니다 —
   늘 펼쳐 두면 화면이 다시 장비의 말을 하게 됩니다. */
.raw { margin: var(--s4) 0; }
.raw > summary {
  padding: var(--s2) 0; font: var(--t-small); color: var(--ink-3); cursor: pointer;
}
.raw > summary:hover { color: var(--ink); }
.raw__pre {
  margin: var(--s2) 0 0; padding: var(--s3); overflow-x: auto;
  border-radius: var(--r-md); background: var(--mon-bg); color: var(--mon-val);
  font: var(--t-micro); font-family: var(--font-mono); line-height: 1.6;
}
.raw__t { width: 100%; border-collapse: collapse; margin-top: var(--s2); }
.raw__t th, .raw__t td {
  padding: var(--s2) var(--s3); border-top: 1px solid var(--rule);
  font: var(--t-small); text-align: left; vertical-align: top;
}
.raw__t th { font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }

.console {
  max-height: 22rem; overflow-y: auto; padding: var(--s3);
  border-radius: var(--r-md); background: var(--mon-bg); color: var(--mon-val);
  font: var(--t-micro); font-family: var(--font-mono); line-height: 1.7;
}
.console i { color: var(--mon-mute); font-style: normal; }
.console b { color: var(--mon-key); font-weight: 400; white-space: pre; }

/* ── 소견 보고 — 고르는 줄 ──────────────────────────────── */
.rep__add {
  display: grid; gap: var(--s2); margin-bottom: var(--s3);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}
.rep__add select {
  min-height: 40px; padding: 0 var(--s2); min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: var(--t-ui);
}
@media (max-width: 700px) { .rep__add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── 바디맵 — 누르고 있으면 시간이 쌓입니다 ─────────────── */
.bm { display: grid; gap: var(--s3); }
.bm__tabs { display: flex; gap: var(--s1); }
.bm__tabs button {
  min-height: 38px; padding: 0 var(--s4); border-radius: var(--r-md);
  border: 1px solid transparent; background: none; color: var(--ink-3);
  font: var(--t-ui); cursor: pointer;
}
.bm__tabs button[aria-selected="true"] {
  border-color: var(--line); background: var(--surface); color: var(--ink);
}
.bm__stage {
  position: relative; width: 100%; max-width: 26rem; margin: 0 auto;
  aspect-ratio: 401 / 480; border-radius: var(--r-lg);
  background: var(--paper-2); overflow: hidden; touch-action: none;
}
.bm__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .55; }
/* 실시간 열 지도 — 그림 위, 진찰 점(.bm__pt) 아래(DOM 순서로 점이 위에 옵니다).
   클릭을 막지 않습니다. */
.bm__heat { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none; }

.bm__guide { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-2); opacity: .5; }
.bm__guide span {
  position: absolute; right: var(--s2); top: -0.9em;
  font: var(--t-micro); color: var(--ink-3);
}

.bm__pt {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: grid; place-items: center; border-radius: 50%; padding: 0;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.bm__pt:hover { border-color: var(--brand); }
/* 채워지는 고리 = 접촉 시간. 색만으로 뜻을 전하지 않으므로 모양(●■◆)이 함께 갑니다. */
.bm__pt__ring {
  position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--brand) var(--fill, 0%), transparent 0);
  opacity: .35;
}
.bm__pt__i { font-size: 12px; line-height: 1; }
.bm__pt[data-hit="part"] { border-color: var(--warn); color: var(--warn); }
.bm__pt[data-hit="1"] { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.bm__pt[data-live="1"] { box-shadow: 0 0 0 6px var(--brand-soft); }

/* 이름표는 **기본으로 숨깁니다**. 심음 다섯 점처럼 몰린 자리에서 늘 띄우면 서로 덮어
   둘 다 못 읽게 됩니다. 만진 자리와 가리킨 자리만 띄우고, 전체 이름은 지도 밑에 폅니다. */
.bm__tag {
  position: absolute; margin-top: 15px; transform: translateX(-50%);
  font: var(--t-micro); color: var(--ink-3); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--fast) var(--ease);
  background: var(--surface); padding: 1px var(--s1); border-radius: var(--r-sm);
}
.bm__tag[data-hit="1"], .bm__tag[data-point="1"] { opacity: 1; }
.bm__pt:hover + .bm__tag { opacity: 1; }
.bm__pt[data-point="1"] { border-color: var(--brand); background: var(--brand-soft); }

/* 지도 밑 이름 목록 — 어느 자리가 있고 무엇을 끝냈는지 */
.bm__names { display: flex; flex-wrap: wrap; gap: var(--s1); }
.bm__name {
  display: inline-flex; align-items: baseline; gap: var(--s1);
  min-height: 28px; padding: 0 var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  font: var(--t-micro); cursor: default;
}
.bm__name:hover { border-color: var(--brand); color: var(--ink); }
.bm__name[data-hit="part"] { border-color: var(--warn); color: var(--warn); }
.bm__name[data-hit="1"] { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.bm__name i { font-style: normal; font-variant-numeric: tabular-nums; }
.bm__tag[data-side="l"] { transform: translate(-100%, 0); margin-left: -18px; margin-top: -6px; }
.bm__tag[data-side="r"] { transform: none; margin-left: 18px; margin-top: -6px; }
.bm__tag[data-hit="1"] { color: var(--ok); }
.bm__tag i { font-style: normal; font-variant-numeric: tabular-nums; }
.bm__tag em { font-style: normal; color: var(--ink-3); }

.bm__lab {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s2) var(--s3);
  background: var(--surface); font: var(--t-small); color: var(--ink-2); text-align: center;
}
.bm__foot { font: var(--t-micro); color: var(--ink-3); }
.bm__leg { display: inline-flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.bm__legd {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface);
}
.bm__legd[data-hit="part"] { border-color: var(--warn); }
.bm__legd[data-hit="1"] { border-color: var(--ok); background: var(--ok-soft); }
.bm__legd[data-live="1"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ── 히트맵 ─────────────────────────────────────────────── */
.hm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 720px) { .hm { grid-template-columns: minmax(0, 1fr); } }
.hm__box { display: grid; gap: var(--s2); }
.hm__cap { display: flex; align-items: baseline; gap: var(--s2); }
.hm__cap b { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.hm__cap span { font: var(--t-small); color: var(--ink-3); }
.hm__stage {
  position: relative; width: 100%; max-width: 22rem; aspect-ratio: 401 / 480;
  border-radius: var(--r-lg); background: var(--paper-2); overflow: hidden;
}
.hm__stage img, .hm__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hm__stage img { opacity: .45; }
.hm__legend {
  display: flex; align-items: center; gap: var(--s2);
  font: var(--t-micro); color: var(--ink-3);
}
.hm__scale {
  display: inline-block; width: 72px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(90,120,160,.35), rgba(30,74,131,.7), rgba(214,69,44,.85));
}
/* 정답 대조 — 진찰법마다 [정답] ↔ [내 진찰] 두 그림을 나란히 */
.cmp2 { display: grid; gap: var(--s4); }
.cmp2__row { display: grid; gap: var(--s2); }
.cmp2__name { font: var(--t-h3); letter-spacing: var(--tk-h3); color: var(--ink-2); }
.cmp2__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; }
@media (max-width: 40rem) { .cmp2__pair { grid-template-columns: 1fr; } }
.hm__box--answer .hm__stage { outline: 2px solid rgba(23,114,74,.35); }
.hm__box--mine .hm__stage { outline: 2px solid rgba(30,74,131,.30); }
/* 정답 대조 범례 — 색이 아니라 부호(✓✕)로도 뜻이 서게 합니다 */
.hm__legend--cmp { flex-wrap: wrap; gap: var(--s1) var(--s3); }
.hm__k { display: inline-flex; align-items: center; gap: .25em; font-weight: 600; }
.hm__k--ok { color: #17724A; }
.hm__k--miss { color: #8E2323; }
.hm__k--brush { color: #8F5510; }
/* 놓친 자리 이름 — 그림의 작은 표식을 글자로 보완합니다 */
.hm__missed {
  font: var(--t-small); color: #8E2323; line-height: 1.5;
  border-left: 2px solid #8E2323; padding: .2rem .55rem; margin-top: .35rem;
  background: var(--paper-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.hm__missed.is-ok { color: #17724A; border-left-color: #17724A; }
.hm__missed b { font-weight: 700; }
/* 계통별 범위(훑기) 정답 요약 줄 */
.cmp__sweeps { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s2); }
.cmp__sw {
  display: inline-flex; align-items: baseline; gap: .2em;
  font: var(--t-small); color: #8E2323;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .15rem .5rem; background: var(--paper-2);
}
.cmp__sw.is-ok { color: #17724A; }
.cmp__sw i { font-style: normal; font-weight: 700; }
.cmp__sw b { font-variant-numeric: tabular-nums; }

/* ── 상태 한 줄 (.rule 위에 얹는 머리줄) ─────────────────
   base.css 의 .rule 은 왼쪽 2px 규칙만 정합니다. 제목과 숫자를 한 줄에 벌려 놓는 것은
   여기서 합니다 — 안 그러면 「…아닙니다활력징후 4」처럼 붙어 버립니다. */
.rule__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.rule__top b { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.rule__n { margin-left: auto; font: var(--t-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rule__why { margin: var(--s2) 0 0; font: var(--t-small); color: var(--ink-2); }
.rule + .go { margin-top: var(--s5); }

/* 활력징후 판 밑에 바로 붙던 것들 — 숨 쉴 자리를 줍니다 */
.svit + .facts, .svit + .simplan { margin-top: var(--s5); }


/* ── 진료실 자리 배치 ────────────────────────────────────
     왼쪽 위   3D 캐릭터 (Unity 자리)      오른쪽 위   신체진찰 — 몸 그림
     왼쪽 아래 문진                        오른쪽 아래 소견 보고

   환자를 보면서 말하고, 옆에서 몸을 짚고, 짚은 자리 바로 아래에 무엇을 느꼈는지 적습니다.
   좁아지면 한 열로 접히고 순서는 그대로입니다 — 3D · 문진 · 진찰 · 보고. */
.clinic__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5); align-items: start;
  max-width: 84rem; margin: 0 auto; padding: var(--s5);
}
.clinic__l, .clinic__r { display: grid; gap: var(--s5); align-content: start; min-width: 0; }
@media (max-width: 1000px) {
  .clinic__body { grid-template-columns: minmax(0, 1fr); }
}

/* 한 덩어리 = 한 판 */
.pane {
  display: grid; gap: var(--s3); min-width: 0;
  padding: var(--s5); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--band-line);
}
.pane > .work__head { margin: 0; }

/* ── 3D 캐릭터 자리 ──────────────────────────────────────
   Unity 가 붙으면 이 칸 안만 바뀝니다. 지금은 얼굴과 말풍선이 자리를 지킵니다. */
.stage {
  display: grid; gap: var(--s3); justify-items: center; text-align: center;
  padding: var(--s5); border-radius: var(--r-lg);
  background: var(--band); box-shadow: inset 0 0 0 1px var(--band-line);
  min-height: 20rem; align-content: center;
}
.stage__who { display: flex; align-items: baseline; gap: var(--s2); }
.stage__who b { font: var(--t-h3); letter-spacing: var(--tk-h3); }
.stage__who span { font: var(--t-small); color: var(--ink-3); }
.stage__face { line-height: 0; transition: transform var(--base) var(--ease); }
.stage[data-speaking="1"] .stage__face { transform: scale(1.03); }
.stage__bub {
  margin: 0; max-width: 34ch; padding: var(--s3) var(--s4);
  border-radius: var(--r-lg); background: var(--surface);
  font: var(--t-body); color: var(--ink); line-height: 1.65;
  box-shadow: inset 0 0 0 1px var(--band-line);
}
.stage__bub:empty { display: none; }
.stage[data-speaking="1"] .stage__bub { box-shadow: inset 0 0 0 1px var(--brand); }
.stage__note { font: var(--t-micro); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .stage__face { transition: none; } }

/* 상단 띠의 집계 — 세로 목록이 아니라 가로 한 줄입니다 */
.tally--bar { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.tally--bar .tally__r { border-top: 0; padding: 0; gap: var(--s2); }

/* 판 안에 들어간 소견 보고 — 위 경계선을 다시 긋지 않습니다 */
.pane.rep { margin-top: 0; padding-top: var(--s5); border-top: 0; }

/* ── 장비 판은 가만히 있습니다 ────────────────────────────
   목업의 계기판은 타일마다 무한 애니메이션을 답니다 — 정상은 2.4초로 숨 쉬는 링,
   이상은 1.3초 링 파동 + 2.6초 아이콘 깜빡임. 목업 한 장에서는 살아 있는 계기처럼 보이지만,
   여섯 타일이 서로 다른 주기로 계속 뛰면 **판 전체가 쉬지 않고 깜빡입니다.**
   실습 화면에 늘 떠 있는 판이라 눈이 그리로 끌려가서는 안 됩니다.

   상태는 **색과 글자**로 이미 다 말하고 있습니다. 움직임은 거기에 아무것도 더하지 않으므로
   멈춥니다. 들어올 때 한 번 뜨는 dsIn 만 남깁니다.

   ⚠ student.css 는 목업 복사본이라 고치지 않습니다. 여기서 덮습니다 —
      목업을 다시 복사해 와도 이 규칙이 그대로 이깁니다. */
.devstatus__item.is-ok .devstatus__ring::before,
.devstatus__item.is-ok .devstatus__ring::after,
.devstatus__item.is-off .devstatus__ring::before { animation: none; opacity: 0; }
.devstatus__item.is-off .devstatus__icon { animation: none; opacity: .8; }
.devstatus__item.is-unknown .devstatus__ring { animation: none; }

/* ── 장비 타일을 눌러 여는 제어판 ────────────────────────── */
.devstatus__item { position: relative; }
button.devstatus__item { border: 0; cursor: pointer; width: 100%; font: inherit; }
button.devstatus__item:hover .devstatus__ring { box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 3px var(--brand-soft); }
.devstatus__go {
  font: var(--t-micro); letter-spacing: var(--tk-chart); color: var(--mon-mute);
  opacity: 0; transition: opacity var(--fast) var(--ease);
}
button.devstatus__item:hover .devstatus__go,
button.devstatus__item:focus-visible .devstatus__go { opacity: 1; }
.devstatus__tally[data-all="0"] { color: var(--ds-alert); }

.dsheet { display: grid; gap: var(--s4); padding: var(--s5); }
.dsheet__head { display: flex; align-items: center; gap: var(--s3); }
.dsheet__ico { width: 40px; height: 40px; object-fit: contain; flex: none; }
.dsheet__t { margin: 0; font: var(--t-h2); letter-spacing: var(--tk-h2); }
.dsheet__s { margin: var(--s-hair) 0 0; font: var(--t-small); color: var(--ink-3); }
.dsheet__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex: none; margin-left: auto; }
.dsheet__dot[data-on="1"] { background: var(--ok); }
.dsheet__head .icon-btn { margin-left: 0; }
.dsheet__lead { margin: 0; font: var(--t-small); color: var(--ink-3); line-height: 1.7; }

.dsheet__rows { display: grid; }
.dsheet__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-top: 1px solid var(--rule);
}
.dsheet__k { font: var(--t-body); }
.dsheet__v { font: var(--t-micro); color: var(--ink-3); }
.dsheet__d { margin-left: auto; font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.dsheet__row .btn { margin-left: auto; }
.dsheet__act { display: flex; flex-wrap: wrap; gap: var(--s3); }
.dsheet__h { margin: var(--s2) 0 0; font: var(--t-label); letter-spacing: var(--tk-chart); color: var(--ink-3); }
.dsheet__sep { font: var(--t-h3); color: var(--ink-3); }
.dsheet__unit { font: var(--t-small); color: var(--ink-3); flex: none; }
.dsheet .admform__row .input[type="number"] { flex: 0 1 6rem; }
.dsheet .admform { margin: 0; max-width: none; }

/* ── 알림 ───────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: var(--s6); transform: translateX(-50%); z-index: 99;
  max-width: min(560px, 90vw); padding: var(--s3) var(--s5);
  border-radius: var(--r-md); background: var(--ink); color: var(--paper);
  font: var(--t-small); box-shadow: var(--shadow-2);
  animation: bubIn 180ms var(--ease) both;
}
.toast--ok { background: var(--ok); color: #fff; }

/* ── 실습 시작 카드 ─────────────────────────────────────── */
.start {
  margin-bottom: var(--s6); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--band-line);
}
.start__body { display: grid; gap: var(--s3); }
.start__title { margin: 0; font: var(--t-h2); letter-spacing: var(--tk-h2); }
.start__lead { margin: 0; font: var(--t-body); color: var(--ink-2); max-width: 52ch; }

/* ══ 기능 제어 ═══════════════════════════════════════════════
   두 판(마네킹 기능 · 센서 실시간)을 가르는 탭과, 부위 한 줄의 모양입니다.
   색은 tokens.css 에 있는 것만 씁니다 — 새로 만들지 않습니다. */
.ctab { display: flex; gap: var(--s2); margin: 0 0 var(--s5); flex-wrap: wrap; }
.ctab__b {
  padding: var(--s2) var(--s4); border: 0; border-radius: var(--r-md);
  background: var(--band); color: var(--ink-2); font: var(--t-label);
  letter-spacing: var(--tk-chart); cursor: pointer;
}
.ctab__b[aria-selected="true"] { background: var(--brand); color: #fff; }

/* 등급 범례 — 우리가 매긴 것이 아니라 실측 문서를 옮긴 것이라 출처를 같이 답니다 */
.cleg {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: center; margin: 0 0 var(--s5);
  font: var(--t-small); color: var(--ink-3);
}
.cleg__i { display: inline-flex; align-items: center; gap: var(--s2); }
.cleg__i b {
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; font-size: .72rem; line-height: 1;
}
.cleg__i[data-v="verified"] b   { background: var(--ok-soft);    color: var(--ok); }
.cleg__i[data-v="identified"] b { background: var(--warn-soft);  color: var(--warn); }
.cleg__i[data-v="sensory"] b    { background: var(--brand-soft); color: var(--brand); }
.cleg__src { flex: 1 1 100%; color: var(--ink-3); }

/* ── 부위 한 줄 ─────────────────────────────────────────── */
.cpart {
  display: grid; gap: var(--s2);
  padding: var(--s3) 0;
  border-top: 1px solid var(--band-line);
}
.cpart:first-of-type { border-top: 0; }
.cpart__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.cpart__badge {
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none;
  border-radius: 50%; font-size: .72rem; line-height: 1;
  background: var(--band); color: var(--ink-3);
}
.cpart__badge[data-v="verified"]   { background: var(--ok-soft);    color: var(--ok); }
.cpart__badge[data-v="identified"] { background: var(--warn-soft);  color: var(--warn); }
.cpart__badge[data-v="sensory"]    { background: var(--brand-soft); color: var(--brand); }
.cpart__t { font: var(--t-name); letter-spacing: var(--tk-name); }
.cpart__id { font: var(--t-small); color: var(--ink-3); }
.cpart__sub { font: var(--t-small); color: var(--ink-3); margin-left: auto; }
.cpart__why { margin: 0; font: var(--t-small); color: var(--ink-3); max-width: 62ch; }
.cpart__in { display: grid; gap: var(--s2); }
.cpart__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.cpart__k { flex: 0 0 11rem; font: var(--t-small); color: var(--ink-2); }
.cpart__u, .cpart__now, .cpart__side { font: var(--t-small); color: var(--ink-3); }
.cpart__now { margin-left: auto; }
/* 못 하는 것은 못 한다고 적습니다 — 회색 입력칸을 두면 「곧 될 것 같은」 얼굴이 됩니다 */
.cpart__na { font: var(--t-small); color: var(--ink-3); font-style: italic; }
.cpart__act { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.cpart__out { font: var(--t-small); color: var(--ink-3); }
.cpart__out[data-ok="1"] { color: var(--ok); }
.cpart__out[data-ok="0"] { color: var(--warn); }
.cpart .select { max-width: 16rem; }

/* ── 센서 지도 ──────────────────────────────────────────
   bodymap 과 같은 그림·같은 좌표계입니다. 다른 것은 여기서는 **누르는 순간**
   모의 센서가 나가고, 실장비가 들어오면 같은 점이 켜진다는 것뿐입니다. */
.smap { display: grid; gap: var(--s3); justify-items: center; }
.smap__stage { position: relative; width: min(401px, 100%); }
.smap__img { display: block; width: 100%; height: auto; }
:root[data-theme="dark"] .smap__img { filter: invert(1) brightness(1.5); opacity: .32; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .smap__img { filter: invert(1) brightness(1.5); opacity: .32; }
}
.smap__pt {
  position: absolute; transform: translate(-50%, -50%);
  width: 1.6rem; height: 1.6rem; padding: 0; cursor: pointer;
  border: 1px solid var(--band-line); border-radius: 50%;
  background: var(--surface); color: var(--ink-3);
  display: grid; place-items: center; font-size: .6rem; line-height: 1;
}
.smap__pt[data-face="back"] { border-style: dashed; }
/* 켜진 자리 — 센서가 지금 들어온 곳입니다. 색만으로 구분하지 않고 테두리도 굵어집니다 */
.smap__pt[data-on="1"] {
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.smap__hint { font: var(--t-small); color: var(--ink-3); }

/* ── 센서 로그 ─────────────────────────────────────────── */
.slog__bar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.slog__head, .slog__r {
  display: grid; gap: var(--s3);
  grid-template-columns: 5.5rem 4.5rem 6rem 14rem minmax(8rem, 1fr) minmax(10rem, 1.4fr);
  padding: var(--s2) 0; font: var(--t-small);
}
.slog__head { color: var(--ink-3); border-bottom: 1px solid var(--band-line); }
.slog__rows { max-height: 26rem; overflow: auto; }
.slog__r { border-bottom: 1px solid var(--band-line); color: var(--ink-2); }
.slog__r[data-kind="exam"] { color: var(--ink); }
.slog__r[data-kind="unknown"] { color: var(--warn); }
.slog__r[data-src="live"] .slog__s { color: var(--ok); }
.slog__r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slog__r .num { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .cpart__k { flex-basis: 100%; }
  .cpart__now { margin-left: 0; }
  .slog__head { display: none; }
  .slog__r { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .slog__r span:nth-child(2), .slog__r span:nth-child(4) { display: none; }
}

/* 채점표에 정답 자리가 없는 진찰 — 놓쳤다는 뜻이 아니라 채점 대상이 아니라는 뜻 */
.hm__missed.is-note { color: var(--ink-3); border-left-color: var(--line-2); }

/* 진찰 판 머리줄의 오른쪽 도구 (스피커 모드) — 제목·출처 다음에 붙습니다 */
.work__tools { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s2); }
.work__tools .btn[aria-pressed="true"] { border-color: var(--ok); color: var(--ok); }

/* 채점 판정 주체 — 낱말 규칙인지 AI 인지 한 줄로 밝힙니다 */
.dom__j{display:flex;gap:8px;align-items:center;padding:4px 0 10px 2px;font-size:12px;color:var(--muted)}
.dom__jb{flex:none;padding:1px 7px;border-radius:999px;border:1px solid var(--line);font-weight:600;letter-spacing:-.2px}
.dom__jb.is-llm{border-color:var(--ok,#2e7d5b);color:var(--ok,#2e7d5b)}

/* 실습 기록 — 채점 끝난 줄은 눌러서 결과를 다시 봅니다 */
.run--open{cursor:pointer}
.run--open:hover{background:var(--paper-2)}
.run--open:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}