/* BedFigure · 작은 자세 그림 — 색은 tokens.css 토큰에서 가져온다(경고·긴급은 상태 토큰 --st-delay-* / --st-critical-* 그대로 → 테마를 따른다).
   캔버스는 아래 --fig-* 값을 읽어 그린다(테마가 바뀌면 다시 읽음). */
.pc-fig, .pcm-host {
  --fig-surface: var(--surface, rgb(255 255 255));
  --fig-text: var(--text, rgb(15 23 42));
  --fig-text-2: var(--text-2, rgb(71 84 103));
  --fig-text-3: var(--text-3, rgb(152 162 179));
  --fig-brand: var(--brand, var(--accent, rgb(14 140 133)));
  --fig-brand-soft: var(--brand-soft, var(--accent-soft, rgb(225 243 241)));
  --fig-warn: var(--st-delay-line);
  --fig-warn-soft: var(--st-delay-bg);
  --fig-critical: var(--st-critical-line);
  --fig-critical-soft: var(--st-critical-bg);
  --fig-chip: var(--surface-2, rgb(241 243 246));
  --fig-mattress: color-mix(in srgb, var(--fig-surface) 55%, var(--surface-2, rgb(241 243 246)));
  --fig-seam: color-mix(in srgb, var(--border, rgb(228 231 236)) 80%, transparent);
  --fig-frame: color-mix(in srgb, var(--surface-2, rgb(241 243 246)) 70%, var(--border, rgb(228 231 236)));
  --fig-rail: color-mix(in srgb, var(--border, rgb(228 231 236)) 55%, var(--text-3, rgb(152 162 179)));
  --fig-pillow: var(--fig-surface);
  --fig-pillow-edge: var(--border, rgb(228 231 236));
  --fig-body: color-mix(in srgb, var(--fig-surface) 92%, var(--fig-text));
  --fig-outline: color-mix(in srgb, var(--fig-text) 72%, var(--fig-surface));
  --fig-hair: color-mix(in srgb, var(--fig-text) 45%, var(--fig-surface));
  --fig-ghost: var(--fig-text-2);
  --fig-wedge: color-mix(in srgb, var(--fig-brand) 14%, var(--fig-surface));
  --fig-wedge-edge: color-mix(in srgb, var(--fig-brand) 45%, var(--fig-surface));
  --fig-ring: color-mix(in srgb, var(--border, rgb(228 231 236)) 85%, var(--fig-text-3));
  --fig-veil: var(--fig-surface);
  /* 압력 8단계(낮음→높음) — M3-UI §1-2 */
  --fig-heat-0: var(--heat-0, rgb(238 242 246));
  --fig-heat-1: var(--heat-1, rgb(30 78 121));
  --fig-heat-2: var(--heat-2, rgb(30 124 140));
  --fig-heat-3: var(--heat-3, rgb(47 163 122));
  --fig-heat-4: var(--heat-4, rgb(201 178 58));
  --fig-heat-5: var(--heat-5, rgb(229 138 43));
  --fig-heat-6: var(--heat-6, rgb(224 81 46));
  --fig-heat-7: var(--heat-7, rgb(194 38 31));
}
:root[data-theme="dark"] .pc-fig, :root[data-theme="dark"] .pcm-host {
  --fig-body: color-mix(in srgb, var(--fig-text) 70%, var(--fig-surface));
  --fig-outline: color-mix(in srgb, var(--fig-text) 88%, var(--fig-surface));
  --fig-hair: color-mix(in srgb, var(--fig-surface) 70%, var(--fig-text));
  --fig-mattress: color-mix(in srgb, var(--surface-2, rgb(23 32 42)) 80%, var(--fig-surface));
  --fig-pillow: color-mix(in srgb, var(--fig-text) 16%, var(--fig-surface));
  --fig-heat-0: var(--heat-0, rgb(27 42 58));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pc-fig, :root:not([data-theme="light"]) .pcm-host {
    --fig-body: color-mix(in srgb, var(--fig-text) 70%, var(--fig-surface));
    --fig-outline: color-mix(in srgb, var(--fig-text) 88%, var(--fig-surface));
    --fig-hair: color-mix(in srgb, var(--fig-surface) 70%, var(--fig-text));
    --fig-mattress: color-mix(in srgb, var(--surface-2, rgb(23 32 42)) 80%, var(--fig-surface));
    --fig-pillow: color-mix(in srgb, var(--fig-text) 16%, var(--fig-surface));
    --fig-heat-0: var(--heat-0, rgb(27 42 58));
  }
}

.pc-fig { position: relative; display: block; width: 100%; }
.pc-fig-canvas { display: block; width: 100%; height: auto; max-width: 100%; }
.pc-fig-probe { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; transition: none !important; animation: none !important; }
/* 캔버스 색 탐침(bedfigure.js readPalette) — 토큰 하나씩 */
.pc-fig-probe[data-k="surface"] { color: var(--fig-surface); }
.pc-fig-probe[data-k="mattress"] { color: var(--fig-mattress); }
.pc-fig-probe[data-k="seam"] { color: var(--fig-seam); }
.pc-fig-probe[data-k="frame"] { color: var(--fig-frame); }
.pc-fig-probe[data-k="rail"] { color: var(--fig-rail); }
.pc-fig-probe[data-k="pillow"] { color: var(--fig-pillow); }
.pc-fig-probe[data-k="pillowEdge"] { color: var(--fig-pillow-edge); }
.pc-fig-probe[data-k="body"] { color: var(--fig-body); }
.pc-fig-probe[data-k="outline"] { color: var(--fig-outline); }
.pc-fig-probe[data-k="hair"] { color: var(--fig-hair); }
.pc-fig-probe[data-k="ghost"] { color: var(--fig-ghost); }
.pc-fig-probe[data-k="wedge"] { color: var(--fig-wedge); }
.pc-fig-probe[data-k="wedgeEdge"] { color: var(--fig-wedge-edge); }
.pc-fig-probe[data-k="brand"] { color: var(--fig-brand); }
.pc-fig-probe[data-k="brandSoft"] { color: var(--fig-brand-soft); }
.pc-fig-probe[data-k="warn"] { color: var(--fig-warn); }
.pc-fig-probe[data-k="warnSoft"] { color: var(--fig-warn-soft); }
.pc-fig-probe[data-k="critical"] { color: var(--fig-critical); }
.pc-fig-probe[data-k="criticalSoft"] { color: var(--fig-critical-soft); }
.pc-fig-probe[data-k="text"] { color: var(--fig-text); }
.pc-fig-probe[data-k="text2"] { color: var(--fig-text-2); }
.pc-fig-probe[data-k="text3"] { color: var(--fig-text-3); }
.pc-fig-probe[data-k="ring"] { color: var(--fig-ring); }
.pc-fig-probe[data-k="veil"] { color: var(--fig-veil); }
.pc-fig-probe[data-k="chip"] { color: var(--fig-chip); }
.pc-fig-probe[data-k="skin"] { color: var(--ill-skin); }
.pc-fig-probe[data-k="gown"] { color: var(--ill-gown); }
.pc-fig-probe[data-k="blanket"] { color: var(--ill-blanket); }
.pc-fig-probe[data-k="heat0"] { color: var(--fig-heat-0); }
.pc-fig-probe[data-k="heat1"] { color: var(--fig-heat-1); }
.pc-fig-probe[data-k="heat2"] { color: var(--fig-heat-2); }
.pc-fig-probe[data-k="heat3"] { color: var(--fig-heat-3); }
.pc-fig-probe[data-k="heat4"] { color: var(--fig-heat-4); }
.pc-fig-probe[data-k="heat5"] { color: var(--fig-heat-5); }
.pc-fig-probe[data-k="heat6"] { color: var(--fig-heat-6); }
.pc-fig-probe[data-k="heat7"] { color: var(--fig-heat-7); }

/* ── 작은 자세 그림(BedTile) ── */
.pcm-host { display: inline-block; line-height: 0; }
.pcm { display: block; width: 100%; height: 100%; overflow: visible; }
.pcm-bed { fill: var(--ill-frame, var(--fig-frame)); }
.pcm-mat { fill: var(--ill-mat, var(--fig-mattress)); stroke: var(--fig-seam); stroke-width: .4; }
.pcm-pillow { fill: var(--ill-pillow, var(--fig-pillow)); stroke: var(--fig-pillow-edge); stroke-width: .3; }
/* 일러스트 층(figure/mini.js LAYERS) — 색은 tokens.css --ill-* */
.pcm-ill-bedshadow { fill: var(--ill-shadow); opacity: .14; }
.pcm-ill-headboard { fill: var(--ill-frame-hi); stroke: var(--ill-rail); stroke-width: .3; }
.pcm-ill-mat-hi { fill: var(--ill-pillow); opacity: .35; }
.pcm-ill-quilt { fill: none; stroke: var(--ill-quilt); stroke-width: .35; stroke-linecap: round; }
.pcm-ill-rail { fill: var(--ill-rail); }
.pcm-ill-pillow-sh { fill: var(--ill-pillow-sh); opacity: .9; }
.pcm-ill-pillow-hi { fill: var(--ill-pillow); opacity: .9; }
.pcm-ill-shadow > * { fill: var(--ill-shadow); stroke: var(--ill-shadow); opacity: .09; stroke-linecap: round; stroke-linejoin: round; }
.pcm-ill-shadow > line { fill: none; }
.pcm-ill-blanket > *, .pcm-ill-blanket-hi > *, .pcm-ill-gown > *, .pcm-ill-gown-hi > *, .pcm-ill-skin > *, .pcm-ill-skin-hi > * { stroke-linecap: round; stroke-linejoin: round; }
.pcm-ill-blanket > line, .pcm-ill-blanket-hi > line, .pcm-ill-gown > line, .pcm-ill-gown-hi > line, .pcm-ill-skin > line, .pcm-ill-skin-hi > line { fill: none; }
.pcm-ill-blanket > * { fill: var(--ill-blanket); stroke: var(--ill-blanket); }
.pcm-ill-blanket-hi > * { fill: var(--ill-blanket-hi); stroke: var(--ill-blanket-hi); opacity: .85; }
.pcm-ill-fold { fill: none; stroke: var(--ill-blanket-fold); stroke-width: .45; stroke-linecap: round; }
.pcm-ill-gown > * { fill: var(--ill-gown); stroke: var(--ill-gown); }
.pcm-ill-gown-hi > * { fill: var(--ill-gown-hi); stroke: var(--ill-gown-hi); opacity: .8; }
.pcm-ill-skin > * { fill: var(--ill-skin); stroke: var(--ill-skin); }
.pcm-ill-skin-hi > * { fill: var(--ill-skin-hi); stroke: var(--ill-skin-hi); opacity: .7; }
.pcm-ill-hair { fill: var(--ill-hair); }
.pcm-ill-face { fill: var(--ill-skin); }
.pcm-ill-face-hi { fill: var(--ill-skin-hi); opacity: .75; }
.pcm-ol > * { fill: var(--fig-outline); stroke: var(--fig-outline); stroke-linecap: round; stroke-linejoin: round; }
.pcm-fill > * { fill: var(--fig-body); stroke: var(--fig-body); stroke-linecap: round; stroke-linejoin: round; }
.pcm-ol > line, .pcm-fill > line { fill: none; }
.pcm-ghost > * { fill: none; stroke: var(--fig-ghost); stroke-width: .55; stroke-dasharray: 1.2 1; }
.pcm-ghost > line { stroke-width: .55; }
.pcm-ghost > path { stroke-width: .55; }
.pcm-band { fill: var(--fig-warn); opacity: .55; }
.pcm-risk-urgent .pcm-band { fill: var(--fig-critical); opacity: .7; }
.pcm-frame { fill: none; stroke: var(--fig-warn); stroke-width: 1.2; }
.pcm-risk-urgent .pcm-frame { stroke: var(--fig-critical); }
.pcm-prox { fill: var(--fig-brand); }
.pcm-wave { fill: none; stroke: var(--fig-brand); stroke-width: .8; stroke-linecap: round; opacity: .6; }
.pcm-empty .pcm-mat { stroke-dasharray: 1.6 1.2; stroke: var(--fig-rail); }
.pcm-stale { opacity: .55; }
.pcm-p1 .pcm-bed { animation: pcm-pulse var(--d-pulse) var(--ease-in-out) var(--loop); }
@keyframes pcm-pulse { 0%, 100% { fill: var(--fig-frame); } 50% { fill: var(--fig-critical); } }
@media (prefers-reduced-motion: reduce) {
  .pcm-p1 .pcm-bed { animation: none; fill: var(--fig-critical); }
}

/* ── 실험실 페이지(figure-lab.html) 전용 ── */
.fig-lab { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; }
.fig-lab-note { padding: 4px 16px; font-size: 12px; background: var(--surface-2); color: var(--text-3); border-bottom: 1px solid var(--border); }
.fig-lab-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; padding: 24px 24px 8px; max-width: 1600px; margin: 0 auto; }
.fig-lab-head h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -0.01em; }
.fig-lab-head p { margin: 0; color: var(--text-2); }
.fig-lab-tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.fig-lab-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.fig-lab-seg button { font: inherit; font-size: 13px; padding: 6px 14px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.fig-lab-seg button[aria-pressed="true"] { background: var(--fig-brand-soft); color: var(--fig-brand); font-weight: 600; }
.fig-lab-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-2); }
.fig-lab-main { max-width: 1600px; margin: 0 auto; padding: 8px 24px 64px; }
.fig-lab-main section { margin-top: 28px; }
.fig-lab-main h2 { font-size: 16px; margin: 0 0 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.fig-lab-main h2 small { font-size: 12px; font-weight: 400; color: var(--text-3); }
.fig-lab-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.fig-lab-grid-wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.fig-lab-card { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 12px 10px; box-shadow: var(--shadow-1); }
.fig-lab-card figcaption { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px 0; }
.fig-lab-card figcaption strong { font-size: 14px; }
.fig-lab-card figcaption span { font-size: 12px; color: var(--text-3); }
.fig-lab-fig { width: 100%; }
.fig-lab-minis { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; overflow-x: auto; }
.fig-lab-mini-row { display: flex; gap: 14px; align-items: flex-start; }
.fig-lab-mini-row > .fig-lab-muted { width: 40px; flex: none; font-size: 12px; padding-top: 4px; }
.fig-lab-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; flex: none; }
.fig-lab-mini small { font-size: 11px; color: var(--text-3); text-align: center; line-height: 1.3; }
.fig-lab-mini-24 .fig-lab-mini-glyph { width: 17px; height: 24px; }
.fig-lab-mini-32 .fig-lab-mini-glyph { width: 23px; height: 32px; }
.fig-lab-mini-40 .fig-lab-mini-glyph { width: 28px; height: 40px; }
.fig-lab-muted { color: var(--text-3); font-size: 12px; }
.fig-lab-live-tools { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; font-size: 13px; }
.fig-lab-live-tools select { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
@media (max-width: 480px) {
  .fig-lab-head, .fig-lab-main { padding-left: 16px; padding-right: 16px; }
  .fig-lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fig-lab-grid-wide { grid-template-columns: 1fr; }
}