/* 병동 모니터(docs/M3-UI.md §3 · §11) — 색은 tokens.css 변수만.
   넓은 화면: 글자는 그대로, 평면·격자만 넓어진다(격자 칸 수는 JS 가 --cols 로). 오른쪽 열 360–420px 고정 폭.
   차례: 틀 · 머리(시계·시간대) · KPI · 가운데 카드(평면/격자) · 평면 SVG · 격자 · 알림 피드 · 일정 · 사유 고르기 · 서랍 · 폰 */

/* ───────── 틀 ───────── */
.mon {
  --side-w: clamp(360px, 19vw, 420px);
  --gap: var(--s-4);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--gap);
  padding: var(--s-5) var(--s-6) var(--s-6);
  min-height: calc(100dvh - var(--strip-h) - var(--topbar-h) - var(--alarm-h, 0px) - 4px); /* 4px: 고지 띠·상단 바 경계선. P1 띠 높이(--alarm-h)도 빼서 띠가 나타나도 스크롤바가 생기거나 평면이 흔들리지 않게 */
  animation: mon-in var(--d-slow) var(--ease); /* 투명도는 건드리지 않는다: 뒤 탭에서 애니메이션이 멈춰도 화면이 흐려지지 않게 */
}
@keyframes mon-in { from { transform: translateY(4px); } to { transform: none; } }
.mon > * { min-width: 0; }
.mon-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); gap: var(--gap); min-height: 30rem; }
/* ───────── 머리: 병동 · 시간대 · 시계 ───────── */
.mon-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-6); }
.mh-ward { display: grid; gap: 2px; min-width: 0; }
.mh-titlerow { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.mh-title { font-size: var(--fs-24); font-weight: 720; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-sub { font-size: var(--fs-13); color: var(--text-2); font-variant-numeric: tabular-nums; }
.mh-night { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .3125rem; height: 1.375rem; padding: 0 .5rem; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-12); font-weight: 600; }
.mh-night .icon { width: .8125rem; height: .8125rem; }

.mh-window {
  --_line: var(--st-normal-line); --_bg: var(--surface); --_fg: var(--text-2);
  position: relative; display: grid; grid-template-columns: auto auto auto; align-items: center; gap: var(--s-4);
  min-height: 3.5rem; padding: var(--s-2) var(--s-5) var(--s-2) var(--s-3); overflow: hidden;
  background: var(--_bg); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1);
  transition: background-color var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.mh-window[data-state="active"] { --_line: var(--st-active-line); --_bg: color-mix(in srgb, var(--st-active-line) 7%, var(--surface)); --_fg: var(--st-active-fg); border-color: color-mix(in srgb, var(--st-active-line) 30%, var(--border)); }
.mh-window[data-state="late"] { --_line: var(--st-delay-line); --_bg: color-mix(in srgb, var(--st-delay-line) 8%, var(--surface)); --_fg: var(--st-delay-fg); border-color: color-mix(in srgb, var(--st-delay-line) 36%, var(--border)); }
.mw-ico { width: 2.25rem; height: 2.25rem; border-radius: var(--r-ctl); display: grid; place-items: center; background: color-mix(in srgb, var(--_line) 14%, transparent); color: var(--_fg); }
.mh-window[data-state="none"] .mw-ico, .mh-window[data-state="next"] .mw-ico { background: var(--surface-2); color: var(--text-2); }
.mw-ico .icon { width: 1.125rem; height: 1.125rem; stroke-width: 2; }
.mw-text { display: grid; gap: 1px; min-width: 0; }
.mw-text b { font-size: var(--fs-14); font-weight: 650; color: var(--text); white-space: nowrap; }
.mw-text span { font-size: var(--fs-13); color: var(--text-2); white-space: nowrap; }
.mw-left { display: grid; justify-items: end; gap: 1px; padding-left: var(--s-4); border-left: 1px solid var(--border); }
.mw-left span { font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; }
.mw-left b { font-size: var(--fs-20); font-weight: 700; letter-spacing: -.01em; color: var(--_fg); line-height: 1.1; white-space: nowrap; }
.mh-window[data-state="none"] .mw-left, .mh-window[data-state="next"] .mw-left b { color: var(--text); }
.mw-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p, 0%); background: var(--_line); transition: width var(--d-slow) var(--ease); }

.mh-time { display: grid; justify-items: end; gap: 2px; }
.mh-timetop { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-13); color: var(--text-2); white-space: nowrap; }
.mh-clock { font-size: var(--fs-display); font-weight: 650; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--text); }
.mh-sim { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .3125rem; height: 1.375rem; padding: 0 .5rem; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-soft-fg); font-size: var(--fs-12); font-weight: 650; }
.mh-sim .icon { width: .8125rem; height: .8125rem; }
.mh-sim[data-paused="1"] { background: var(--surface-2); color: var(--text-2); }
.mh-sim[data-paused="1"]::after { content: "· 정지"; }
.mh-live { display: inline-flex; align-items: center; gap: .4375rem; font-weight: 600; color: var(--text-2); }
.mh-live i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--text-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-3) 18%, transparent); }
.mh-live[data-conn="live"] { color: var(--st-done-fg); }
.mh-live[data-conn="live"] i { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.mh-live[data-conn="poll"] { color: var(--st-delay-fg); }
.mh-live[data-conn="poll"] i { background: var(--st-delay-line); }
.mh-live[data-conn="poll"] i, .mh-live[data-conn="connecting"] i { animation: dot-pulse var(--d-blink) var(--ease-in-out) infinite; }

/* ───────── KPI ───────── */
.mon-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.mon-kpis .stat-tile { padding: var(--s-3) var(--s-4) var(--s-3); gap: .25rem; min-height: 6.25rem; }
.mon-kpis .stat-tile .st-value { font-size: var(--fs-kpi); }
.mon-kpis .stat-tile.is-hot[data-st="critical"] { background: color-mix(in srgb, var(--st-critical-line) 7%, var(--surface)); }
.mon-kpis .stat-tile.is-hot[data-st="delay"] { background: color-mix(in srgb, var(--st-delay-line) 6%, var(--surface)); }
.mon-kpis .stat-tile:not(.is-hot) .st-label .dot { opacity: .9; }
.mon-kpis .stat-tile[data-st="critical"].is-hot .st-label .dot { animation: dot-pulse var(--d-pulse) var(--ease-in-out) var(--loop); }
.kpi-rate .st-value { color: var(--text); }
.kpi-rate[data-st="normal"] .st-value { color: var(--text-3); }
.kpi-stack { display: flex; gap: 2px; height: .3125rem; margin-top: .375rem; border-radius: var(--r-full); overflow: hidden; background: var(--surface-3); }
.kpi-stack i { display: block; width: var(--w, 0%); background: var(--st-line); transition: width var(--d-slow) var(--ease); }
.kpi-stack.is-empty i { display: none; }
@media (prefers-reduced-motion: reduce) { .mon-kpis .stat-tile .st-label .dot { animation: none !important; } }

/* ───────── 가운데 카드 ───────── */
.mon-main { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden; }
.mon-main-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 3.25rem; padding: var(--s-2) var(--s-3) var(--s-2) var(--s-5); border-bottom: 1px solid var(--border); }
.mmh-l, .mmh-r { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.mmh-l h2 { white-space: nowrap; }
.mon-note:empty { display: none; }
.mon-note-chip { display: inline-flex; align-items: center; gap: .375rem; height: 1.5rem; padding: 0 .5rem; border-radius: var(--r-chip); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-12); font-weight: 550; white-space: nowrap; }
.mon-note-chip .icon { width: .8125rem; height: .8125rem; }
.mon-note-chip a { font-weight: 600; margin-left: .125rem; }
.mon-legend { display: none; align-items: center; gap: var(--s-3); font-size: var(--fs-12); color: var(--text-2); white-space: nowrap; }
.ml-item { display: inline-flex; align-items: center; gap: .3125rem; }
.ml-item i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--st-line); }
.ml-item[data-st="empty"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-empty-line); }
@media (min-width: 1680px) { .mon-legend { display: inline-flex; } }
.mon-main-body { position: relative; flex: 1 1 auto; min-height: 26rem; }
.mon-plan, .mon-gridwrap { position: absolute; inset: 0; }
.mon-gridwrap { overflow: auto; padding: var(--s-4); overscroll-behavior: contain; }
.mon-plan-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-6); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.mon-plan-msg > .alert-box { max-width: 36rem; }

/* 확대 단추: 평면 오른쪽 아래에 떠 있음 */
.fp-ctl { position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: 2; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--surface-raised) 92%, transparent); border: 1px solid var(--border); box-shadow: var(--shadow-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fp-zoom { min-width: 3rem; text-align: center; font-size: var(--fs-12); font-weight: 600; color: var(--text-2); }
.fp-ctl-sep { width: 1px; height: 1.125rem; background: var(--border); margin: 0 2px; }

/* ───────── 평면 SVG ───────── */
.fp {
  position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; outline: none;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text-3) 22%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.fp.is-panning { cursor: grabbing; }
.fp:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.fp-svg { display: block; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-select: none; font-family: var(--font); }
.fp-vp { transition: none; }

/* 장식(간호사실·복도) */
.fp-decor rect { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.fp-decor-corridor rect { fill: transparent; stroke-dasharray: 6 5; }
.fp-decor-station rect { fill: var(--brand-soft); stroke: color-mix(in srgb, var(--brand) 30%, transparent); }
.fp-decor-wall rect { fill: var(--border-strong); stroke: none; }
.fp-decor-text { font-size: 13px; font-weight: 600; fill: var(--text-3); pointer-events: none; }

/* 병실 */
.fp-room-box { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; transition: stroke var(--d-base) var(--ease); }
.fp-room.has-p1 .fp-room-box { stroke: var(--st-critical-line); stroke-width: 1.5; }
.fp-room[data-off="1"] .fp-room-box { opacity: .6; }
.fp-room-hatch, .fp-hatch { pointer-events: none; }
.fp-hatch-line { stroke: color-mix(in srgb, var(--text-3) 45%, transparent); stroke-width: 1.4; }
.fp-room-label { font-size: 13px; font-weight: 600; pointer-events: none; }
.fp-room-no { fill: var(--text); font-weight: 700; letter-spacing: -.01em; }
.fp-room-cap { fill: var(--text-3); font-weight: 550; }
.fp-room-dot { fill: var(--st-normal-line); opacity: .7; }
.fp-room-dot[data-st] { fill: var(--st-line); opacity: 1; }
.fp-room-dot[data-st="normal"], .fp-room-dot[data-st="empty"] { fill: var(--st-normal-line); opacity: .6; }

/* 침대 카드 */
.fp-bed { cursor: pointer; outline: none; }
.fp-frame { fill: var(--surface-2); stroke: color-mix(in srgb, var(--st-line, var(--border-strong)) 55%, var(--border)); stroke-width: 1.2; transition: fill var(--d-base) var(--ease), stroke var(--d-base) var(--ease), stroke-width var(--d-base) var(--ease), opacity var(--d-base); }
.fp-bed:hover .fp-frame { stroke: var(--border-strong); fill: color-mix(in srgb, var(--surface-2) 70%, var(--surface-3)); }
.fp-head { fill: var(--border-strong); pointer-events: none; }
.fp-hatch { display: none; }
.fp-fig { pointer-events: none; }
.fp-halo { fill: none; stroke: var(--st-critical-line); stroke-width: 2; opacity: 0; pointer-events: none; }
.fp-focus { fill: none; stroke: var(--focus-ring); stroke-width: 2; opacity: 0; pointer-events: none; }
.fp-bed:focus-visible .fp-focus { opacity: 1; }
.fp-bed.is-open .fp-frame { stroke: var(--brand); stroke-width: 2.2; }
.fp-p3 { fill: var(--st-caution-line); stroke: var(--surface); stroke-width: 2; display: none; pointer-events: none; }
.fp-bed[data-alarm="p3"] .fp-p3 { display: inline; }
/* 상태 */
.fp-bed[data-st="critical"] .fp-frame { fill: color-mix(in srgb, var(--st-critical-line) 12%, var(--surface)); stroke: var(--st-critical-line); stroke-width: 2; }
.fp-bed[data-st="delay"] .fp-frame { fill: color-mix(in srgb, var(--st-delay-line) 8%, var(--surface-2)); }
.fp-bed[data-st="active"] .fp-frame { fill: color-mix(in srgb, var(--st-active-line) 8%, var(--surface-2)); }
.fp-bed[data-st="empty"] .fp-frame { fill: transparent; stroke: var(--st-empty-line); stroke-width: 1.4; stroke-dasharray: 5 4; }
.fp-bed[data-st="empty"] .fp-head { fill: var(--st-empty-line); }
.fp-bed[data-st="empty"] .fp-fig { opacity: .55; }
.fp-bed[data-off="1"] .fp-hatch { display: inline; }
.fp-bed[data-off="1"] .fp-frame { fill: var(--surface-2); stroke-dasharray: none; }
.fp-bed[data-off="1"] .fp-fig { opacity: .35; }
/* P1 맥동 · P2 주황 테두리 */
.fp-bed[data-alarm="p1"] .fp-frame { stroke: var(--st-critical-line); stroke-width: 2.6; }
.fp-bed[data-alarm="p1"] .fp-halo { opacity: 1; transform-box: fill-box; transform-origin: center; animation: fp-pulse var(--d-pulse) var(--ease) var(--loop); }
.fp-bed[data-alarm="p1"][data-acked="1"] .fp-halo { animation: none; opacity: .5; stroke-dasharray: 4 4; }
.fp-bed[data-alarm="p2"] .fp-frame { stroke: var(--st-delay-line); stroke-width: 2.6; }
@keyframes fp-pulse { 0% { opacity: .95; stroke-width: 2; transform: scale(1); } 70%, 100% { opacity: 0; stroke-width: 7; transform: scale(1.06); } }
/* 곁에 사람: 침대 옆 반원 물결 */
.fp-ripple { display: none; pointer-events: none; }
.fp-bed[data-presence="1"] .fp-ripple { display: inline; }
.fp-ripple path { fill: none; stroke: var(--st-active-line); stroke-width: 1.8; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 0% 50%; }
.fp-bed[data-presence="1"] .fp-ripple path { animation: fp-ripple var(--d-ripple) var(--ease) var(--loop); }
.fp-bed[data-presence="1"] .fp-ripple path:nth-child(2) { animation-delay: calc(var(--d-ripple) / 3); }
.fp-bed[data-presence="1"] .fp-ripple path:nth-child(3) { animation-delay: calc(var(--d-ripple) * 2 / 3); }
@keyframes fp-ripple { 0% { transform: scale(.5); opacity: .95; } 100% { transform: scale(1.7); opacity: 0; } }
/* 똑바로 서는 정보 */
.fp-info-layer { pointer-events: none; }
.fp-info { transition: opacity var(--d-base) var(--ease); }
.fp-num { font-size: 17px; font-weight: 760; letter-spacing: -.02em; fill: var(--text); font-variant-numeric: tabular-nums; }
.fp-st { font-size: 9.5px; font-weight: 650; fill: var(--st-fg, var(--text-2)); }
.fp-info[data-st="normal"] .fp-st { fill: var(--text-3); }
.fp-info[data-st="critical"] .fp-num { fill: var(--st-critical-fg); }
.fp-info[data-st="empty"] .fp-num, .fp-info[data-off="1"] .fp-num { fill: var(--text-3); }
.fp-info[data-off="1"] .fp-st { fill: var(--text-3); }
.fp-bar { fill: color-mix(in srgb, var(--text-3) 22%, transparent); }
.fp-bar-fill { fill: var(--st-normal-line); transition: width var(--d-slow) var(--ease); }
.fp-bar-fill[data-lv="soon"] { fill: var(--st-due-line); }
.fp-bar-fill[data-lv="over"] { fill: var(--st-delay-line); }
.fp-sig { display: none; }
.fp-info[data-sig] .fp-sig { display: inline; }
.fp-sig circle { fill: var(--surface); stroke: var(--st-delay-line); stroke-width: 1.5; }
.fp-info[data-sig="offline"] .fp-sig circle { stroke: var(--st-critical-line); }
.fp-sig-ico { fill: none; stroke: var(--st-delay-fg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fp-info[data-sig="offline"] .fp-sig-ico { stroke: var(--st-critical-fg); }
/* 강조(KPI 눌러 거르기) */
.fp-bed.is-dim, .fp-info.is-dim { opacity: .22; }
@media (prefers-reduced-motion: reduce) {
  .fp-bed[data-alarm="p1"] .fp-halo { animation: none !important; opacity: 1; stroke-width: 3; }
  .fp-ripple path { animation: none !important; opacity: .8; transform: none; }
  .fp-ripple path:nth-child(n+2) { display: none; }
}

/* ───────── 격자 ───────── */
.mon-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--s-3); align-content: start; }
.mon-grid .bedtile { min-height: 8.75rem; }
.mon-grid .bt-label { white-space: nowrap; }
.mon-grid .bt-head { flex-wrap: nowrap; }
.mon-grid .bt-head .chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mon-grid .bedtile.is-dim { opacity: .3; }
.mon-grid .bedtile.is-open { outline: 2px solid var(--brand); outline-offset: 2px; }
.mon-sk { height: 8.75rem; }

/* ───────── 오른쪽 열 ───────── */
.mon-side { position: relative; min-height: 0; min-width: 0; }
.mon-side-in { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.mon-feed { flex: 1 1 auto; min-height: 12rem; display: flex; flex-direction: column; overflow: hidden; }
.mon-sched { flex: 0 1 auto; max-height: 42%; min-height: min(8.75rem, 34%); display: flex; flex-direction: column; overflow: hidden; }
.mc-head { display: flex; align-items: center; gap: var(--s-2); min-height: 3.25rem; padding: var(--s-2) var(--s-4) var(--s-2) var(--s-5); border-bottom: 1px solid var(--border); flex: none; }
.mc-link { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
.mc-link:hover { color: var(--text); text-decoration: none; }
.mc-link .icon { width: .875rem; height: .875rem; }

/* 알림 피드 */
.feed-pinned { display: grid; gap: var(--s-2); padding: var(--s-3); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--st-critical-line) 3%, var(--surface)); flex: none; max-height: 60%; overflow-y: auto; }
.feed-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.feed-list { display: grid; gap: var(--s-2); padding: var(--s-3); }
.feed-list:empty { display: none; }
.feed-empty { display: grid; justify-items: center; text-align: center; gap: var(--s-1); padding: var(--s-8) var(--s-5); color: var(--text-2); font-size: var(--fs-13); }
.feed-empty b { color: var(--text); font-size: var(--fs-14); font-weight: 650; }
.fe-ico { width: 2.5rem; height: 2.5rem; border-radius: var(--r-card); display: grid; place-items: center; background: var(--st-done-bg); color: var(--st-done-fg); margin-bottom: var(--s-2); }
.fe-ico .icon { width: 1.25rem; height: 1.25rem; }

.fc { --_lv: var(--lv-p4); position: relative; display: grid; grid-template-columns: 3px minmax(0, 1fr); border-radius: .75rem; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: border-color var(--d-base) var(--ease), background-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease); }
.fc[data-lv="p1"] { --_lv: var(--lv-p1); }
.fc[data-lv="p2"] { --_lv: var(--lv-p2); }
.fc[data-lv="p3"] { --_lv: var(--lv-p3); }
.fc-stripe { background: var(--_lv); }
.fc-main { display: grid; gap: .375rem; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); min-width: 0; }
.fc-top { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.fc-top .grow { flex: 1; }
.fc-bed { border: 0; background: none; padding: 0; margin: 0; font-size: var(--fs-20); font-weight: 760; letter-spacing: -.02em; line-height: 1; color: var(--text); cursor: pointer; white-space: nowrap; }
.fc-bed:hover { text-decoration: underline; text-underline-offset: 3px; }
.fc[data-lv="p1"] .fc-bed { color: var(--st-critical-fg); }
.fc-kind { font-size: var(--fs-14); font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fc-age { font-size: var(--fs-13); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.fc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-3); font-size: var(--fs-12); color: var(--text-3); }
.fc-meta > span { display: inline-flex; align-items: center; gap: .25rem; }
.fc-meta .icon { width: .75rem; height: .75rem; }
.fc-basis { color: var(--text-2); }
.fc-esc { color: var(--st-delay-fg); font-weight: 600; }
.fc-state { min-width: 0; }
.fc-st { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--fs-13); font-weight: 600; color: var(--st-fg); }
.fc-st[data-st="due"] { color: var(--text-2); font-weight: 550; }
.fc-st .icon { width: .875rem; height: .875rem; flex: none; }
.fc-actions { display: flex; flex-wrap: wrap; gap: .3125rem; margin-top: 2px; min-width: 0; } /* 좁은 알림 패널에서 단추가 잘리지 않고 줄바꿈 */
.fc-actions .btn-ghost { --_bd: var(--border); --_fg: var(--text); padding: 0 .625rem; }
.fc-actions .btn-ghost .icon { display: none; }
.fc-actions .btn-sm { height: 2.125rem; flex: none; }
.fc-actions .btn-primary, .fc-actions .btn-danger { flex: 1 1 auto; padding: 0 .625rem; }
.fc-noperm { font-size: var(--fs-12); color: var(--text-3); }
/* 열린 P1: 붉은 바탕 · 테두리, 확인되면 차분하게 */
.fc[data-lv="p1"][data-state="open"], .fc[data-state="check"] { background: color-mix(in srgb, var(--st-critical-line) 8%, var(--surface)); border-color: color-mix(in srgb, var(--st-critical-line) 45%, var(--border)); }
.fc[data-lv="p1"][data-state="open"] { animation: pulse-ring var(--d-pulse) var(--ease) var(--loop); }
.fc[data-lv="p2"][data-state="open"] { border-color: color-mix(in srgb, var(--st-delay-line) 40%, var(--border)); }
.fc[data-state="snoozed"] { background: var(--surface-2); }
.fc[data-state="snoozed"] .fc-stripe { opacity: .45; }
.fc.is-new { animation: fc-in var(--d-base) var(--ease); }
.fc.is-new[data-lv="p1"][data-state="open"] { animation: fc-in var(--d-base) var(--ease), pulse-ring var(--d-pulse) var(--ease) var(--d-base) var(--loop); }
@keyframes fc-in { from { transform: translateY(-10px); box-shadow: var(--shadow-2); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .fc, .fc.is-new { animation: none !important; } }

/* 다가오는 일정 */
.sched-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-1) 0; }
.sched { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5); }
.sched + .sched { border-top: 1px solid var(--hairline); }
.sched[data-active="1"]::before { content: ""; position: absolute; left: 0; top: var(--s-3); bottom: var(--s-3); width: 3px; border-radius: 0 3px 3px 0; background: var(--st-active-line); }
.sc-time { font-size: var(--fs-16); font-weight: 700; letter-spacing: -.01em; color: var(--text); padding-top: 1px; }
.sc-body { display: grid; gap: .375rem; min-width: 0; }
.sc-title { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-13); color: var(--text-2); }
.sc-title b { color: var(--text); font-size: var(--fs-14); font-weight: 650; }
.sc-title .chip { height: 1.25rem; font-size: 11px; }
.sc-in { font-size: var(--fs-12); color: var(--text-3); }
.sc-beds { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-bed { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 .375rem; border-radius: .3125rem; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-12); font-weight: 600; color: var(--text-2); }
.sc-more { font-size: var(--fs-12); color: var(--text-3); align-self: center; }
.sc-count { font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; padding-top: 2px; }
.sc-count b { font-size: var(--fs-16); color: var(--text); font-weight: 700; margin-right: 1px; }
.sched-empty { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-5); color: var(--text-3); font-size: var(--fs-13); }

/* ───────── 사유 고르기 ───────── */
.reason-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.reason { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: 0 var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--text); font-size: var(--fs-14); font-weight: 550; text-align: left; cursor: pointer; transition: border-color var(--d-fast), background-color var(--d-fast), box-shadow var(--d-fast); }
.reason:hover { border-color: var(--text-3); }
.reason i { width: 1rem; height: 1rem; border-radius: 50%; border: 1.5px solid var(--border-strong); flex: none; transition: border-color var(--d-fast), box-shadow var(--d-fast); }
.reason[aria-checked="true"] { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand); }
.reason[aria-checked="true"] i { border-color: var(--brand); box-shadow: inset 0 0 0 3.5px var(--brand); }

/* ───────── 침대 서랍(침대 상세 패널이 없을 때의 자리 내용) ───────── */
.mon-drawer .drawer-head .btn { flex: none; }
.mon-drawer.has-panel .drawer-head { min-height: 2.75rem; padding-top: var(--s-1); padding-bottom: var(--s-1); }
.mon-drawer.has-panel .drawer-head h2 { font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
.mon-drawer.has-panel .drawer-sub:empty { display: none; }
.bp { display: grid; gap: var(--s-5); }
.bp-tile .bedtile { width: 100%; cursor: default; }
.bp-tile .bedtile:hover { box-shadow: var(--shadow-1); }
.bp-kv { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--border); }
.bp-kv > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; min-height: 2.5rem; border-bottom: 1px solid var(--border); font-size: var(--fs-14); }
.bp-kv dt { color: var(--text-2); font-size: var(--fs-13); }
.bp-kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.bp-alerts { display: grid; gap: var(--s-2); }
.bp-al { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-ctl); font-size: var(--fs-13); font-weight: 550; }
.bp-al .grow { flex: 1; }

/* 컴퓨터(≥1024px): 모니터는 화면 높이에 딱 맞춘다(1366×768 에서도 페이지 스크롤 없음) — 평면/격자 카드가 남은 높이를 채우고,
   오른쪽 열(알림·일정)은 안에서 스크롤. 너무 낮은 창(< 약 600px)에서만 페이지가 스크롤된다. */
@media (min-width: 1024px) {
  .mon { height: calc(100dvh - var(--strip-h) - var(--topbar-h) - var(--alarm-h, 0px) - 4px); min-height: 36rem; }
  .mon-body { min-height: 0; }
  .mon-main-body { min-height: 0; }
}
@media (min-width: 1024px) and (max-height: 880px) {
  .mon { --gap: var(--s-3); padding-top: var(--s-4); padding-bottom: var(--s-4); }
  .mon-kpis .stat-tile { min-height: 5.5rem; padding-top: var(--s-2); padding-bottom: var(--s-2); }
  .mh-window { min-height: 3.25rem; }
}
.mon-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); min-width: 0; }
.mon-noward { grid-column: 1 / -1; display: grid; place-items: center; }

/* ───────── 중간 폭: 오른쪽 열을 아래로 ───────── */
@media (max-width: 1023px) {
  .mon-body { grid-template-columns: minmax(0, 1fr); }
  .mon-main-body { min-height: 0; height: 62dvh; }
  .mon-side-in { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
  .mon-sched { max-height: none; }
  .mon-head { grid-template-columns: minmax(0, 1fr) auto; }
  .mh-window { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}
@media (max-width: 1240px) and (min-width: 1024px) {
  .mon-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-3); }
  .mh-window { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}

/* ───────── 폰(≤768px): KPI 가로 칩 · 격자 2칸 · 알림은 아래 · 평면은 전환 뒤 ───────── */
@media (max-width: 768px) {
  .mon { --gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-6); min-height: 0; grid-template-rows: auto; }
  .mon-head { gap: var(--s-3); }
  .mh-title { font-size: var(--fs-20); }
  .mh-clock { font-size: var(--fs-32); }
  .mh-timetop { font-size: var(--fs-12); gap: var(--s-2); }
  .mh-date { display: none; }
  .mh-window { justify-self: stretch; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-2) var(--s-3); }
  .mw-text b, .mw-text span { white-space: normal; }
  .mw-left { padding-left: var(--s-3); }
  .mw-left b { font-size: var(--fs-16); }
  .mon-kpis { display: flex; overflow-x: auto; gap: var(--s-2); margin: 0 calc(var(--s-4) * -1); padding: 0 var(--s-4) 2px; scroll-snap-type: x proximity; scroll-padding-inline: var(--s-4); scrollbar-width: none; }
  .mon-kpis::-webkit-scrollbar { display: none; }
  .mon-kpis .stat-tile { flex: 0 0 auto; min-width: 8.25rem; min-height: 0; padding: var(--s-2) var(--s-3); scroll-snap-align: start; }
  .mon-kpis .stat-tile .st-value { font-size: var(--fs-24); }
  .mon-kpis .stat-tile .st-sub { white-space: nowrap; }
  .mon-main { border-radius: var(--r-card); }
  .mon-main-head { padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); }
  .mon-note { display: none; }
  .mon-main-body { height: auto; min-height: 0; }
  .mon-gridwrap { position: static; overflow: visible; padding: var(--s-3); }
  .mon-grid { gap: var(--s-2); }
  .mon-grid .bedtile { min-height: 0; padding: var(--s-3); }
  .mon-side-in { display: flex; flex-direction: column; align-items: stretch; }
  .mon[data-view="plan"] .mon-main-body { height: clamp(15rem, calc((100vw - 2rem) * var(--fp-ratio, .7) + 5rem), 64dvh); }
  .mon-feed { min-height: 0; }
  .feed-pinned { max-height: none; }
  .feed-scroll { overflow: visible; }
  .fp-ctl { right: var(--s-2); bottom: var(--s-2); }
  .reason-grid { grid-template-columns: 1fr; }
}

/* 침대 압력 히트맵·센서 글리프(bedgraphic.js) */
.fp-heat { pointer-events: none; opacity: .9; image-rendering: auto; mix-blend-mode: normal; }
.fp-sens { pointer-events: none; }
.fp-sbar { fill: var(--border-strong, var(--border)); }
.fp-sbar.on { fill: var(--st-done-line); }
.fp-sens[data-link="weak"] .fp-sbar.on { fill: var(--st-delay-line); }
.fp-sens[data-link="offline"] .fp-sbar, .fp-sens[data-link="none"] .fp-sbar { fill: var(--border); }
.fp-bat { fill: none; stroke: var(--text-3, var(--text-2)); stroke-width: 1; }
.fp-bat-cap { fill: var(--text-3, var(--text-2)); }
.fp-bat-fill { fill: var(--st-done-line); }
.fp-sens[data-bat="mid"] .fp-bat-fill { fill: var(--st-caution-line); }
.fp-sens[data-bat="low"] .fp-bat-fill { fill: var(--st-critical-line); }
.fp-sens[data-bat="unknown"] .fp-bat-fill { fill: var(--border); }
.fp-sdot { fill: var(--st-critical-line); }
.mon-legend .ml-heat { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; color: var(--text-2); font-size: var(--fs-xs, 12px); }
.mon-legend .ml-heat i { width: 70px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--heat-0), var(--heat-2), var(--heat-4), var(--heat-6), var(--heat-7)); }

/* 센서 없음·체위변경 해당 없음: 정상처럼 보이지 않게 따로 표시 */
.fp-bed[data-plan="nosensor"] .fp-frame { stroke-dasharray: 5 4; }
.fp-bed[data-plan="nosensor"] .fp-fig, .fp-bed[data-plan="nosensor"] .fp-heat { opacity: .25; }
.fp-bed[data-plan="exempt"] .fp-fig { opacity: .6; }
.fp-info[data-plan] .fp-st { fill: var(--text-3, var(--text-2)); font-style: italic; }
.fp-info[data-plan] .fp-bar, .fp-info[data-plan] .fp-bar-fill { display: none; }
.bedtile[data-plan="nosensor"] { border-style: dashed; }
.bedtile[data-plan="nosensor"] .bt-fig { opacity: .35; }
.bedtile[data-plan] .bt-plan { color: var(--text-3, var(--text-2)); font-style: italic; }
.bt-interval { font-size: var(--fs-12); color: var(--text-3, var(--text-2)); }