/* 구성 요소 (docs/M3-UI.md §1-3, §2, §3, §5) — 색은 tokens.css 변수만 쓴다.
   차례: 상태 묶음 · 아이콘 · 단추 · 입력 · 토글·세그먼트 · 칩·배지·등급 · 카드 · KPI · 표 · 탭 · 메뉴 · 서랍 · 대화상자 · 알림창 · 안내 · 토스트 ·
         빈 상태 · 스켈레톤 · 진행 · 앱 틀(고지 띠·레일·상단 바·폰 탭) · 비상 알림(P1 띠·가장자리 빛) · 침대 타일(BedTile) */

/* ───────── 상태 묶음: data-st="critical|delay|caution|active|due|done|normal|empty" ───────── */
[data-st="critical"] { --st-bg: var(--st-critical-bg); --st-fg: var(--st-critical-fg); --st-line: var(--st-critical-line); }
[data-st="delay"]    { --st-bg: var(--st-delay-bg);    --st-fg: var(--st-delay-fg);    --st-line: var(--st-delay-line); }
[data-st="caution"]  { --st-bg: var(--st-caution-bg);  --st-fg: var(--st-caution-fg);  --st-line: var(--st-caution-line); }
[data-st="active"]   { --st-bg: var(--st-active-bg);   --st-fg: var(--st-active-fg);   --st-line: var(--st-active-line); }
[data-st="due"]      { --st-bg: var(--st-due-bg);      --st-fg: var(--st-due-fg);      --st-line: var(--st-due-line); }
[data-st="done"]     { --st-bg: var(--st-done-bg);     --st-fg: var(--st-done-fg);     --st-line: var(--st-done-line); }
[data-st="normal"]   { --st-bg: var(--st-normal-bg);   --st-fg: var(--st-normal-fg);   --st-line: var(--st-normal-line); }
[data-st="empty"]    { --st-bg: var(--st-empty-bg);    --st-fg: var(--st-empty-fg);    --st-line: var(--st-empty-line); }
[data-st] { --st-chip-bg: var(--st-bg); --st-chip-fg: var(--st-fg); --st-bar: var(--st-line); --st-border: color-mix(in srgb, var(--st-line) 34%, transparent); }
/* 예전 이름(기존 화면 호환) */
:root {
  --st-critical-bar: var(--st-critical-line); --st-critical-chip-bg: var(--st-critical-bg); --st-critical-chip-fg: var(--st-critical-fg); --st-critical-border: color-mix(in srgb, var(--st-critical-line) 34%, transparent);
  --st-delay-bar: var(--st-delay-line); --st-delay-chip-bg: var(--st-delay-bg); --st-delay-chip-fg: var(--st-delay-fg); --st-delay-border: color-mix(in srgb, var(--st-delay-line) 34%, transparent);
  --st-caution-bar: var(--st-caution-line); --st-caution-chip-bg: var(--st-caution-bg); --st-caution-chip-fg: var(--st-caution-fg); --st-caution-border: color-mix(in srgb, var(--st-caution-line) 34%, transparent);
  --st-active-bar: var(--st-active-line); --st-active-chip-bg: var(--st-active-bg); --st-active-chip-fg: var(--st-active-fg); --st-active-border: color-mix(in srgb, var(--st-active-line) 34%, transparent);
  --st-due-bar: var(--st-due-line); --st-due-chip-bg: var(--st-due-bg); --st-due-chip-fg: var(--st-due-fg); --st-due-border: color-mix(in srgb, var(--st-due-line) 34%, transparent);
  --st-done-bar: var(--st-done-line); --st-done-chip-bg: var(--st-done-bg); --st-done-chip-fg: var(--st-done-fg); --st-done-border: color-mix(in srgb, var(--st-done-line) 34%, transparent);
  --st-normal-bar: var(--st-normal-line); --st-normal-chip-bg: var(--st-normal-bg); --st-normal-chip-fg: var(--st-normal-fg); --st-normal-border: color-mix(in srgb, var(--st-normal-line) 34%, transparent);
  --st-empty-bar: var(--st-empty-line); --st-empty-chip-bg: var(--surface-2); --st-empty-chip-fg: var(--st-empty-fg); --st-empty-border: var(--st-empty-line);
}

/* ───────── 아이콘 ───────── */
.icon { width: 1.125em; height: 1.125em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-fill { fill: currentColor; stroke: none; }

/* ───────── 단추: 주·보조·고스트·위험 / 40 · 32 ───────── */
.btn {
  --_bg: var(--surface); --_fg: var(--text); --_bd: var(--border-strong); --_sh: var(--shadow-1);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--h-md); padding: 0 var(--s-4); border: 1px solid var(--_bd); border-radius: var(--r-ctl);
  background: var(--_bg); color: var(--_fg); box-shadow: var(--_sh);
  font-size: var(--fs-14); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast), box-shadow var(--d-fast), transform var(--d-fast) var(--ease);
}
.btn:hover { --_bg: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn .icon { width: 1rem; height: 1rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { --_bg: var(--brand); --_fg: var(--brand-fg); --_bd: transparent; }
.btn-primary:hover { --_bg: var(--brand-hover); }
.btn-danger { --_bg: var(--danger); --_fg: var(--danger-fg); --_bd: transparent; }
.btn-danger:hover { --_bg: var(--danger-hover); }
.btn-ghost { --_bg: transparent; --_bd: transparent; --_sh: none; --_fg: var(--text-2); }
.btn-ghost:hover { --_bg: var(--hover); --_fg: var(--text); }
.btn-soft { --_bg: var(--brand-soft); --_fg: var(--brand-soft-fg); --_bd: transparent; --_sh: none; }
.btn-soft:hover { --_bg: color-mix(in srgb, var(--brand) 18%, transparent); }
.btn-sm { height: var(--h-sm); padding: 0 var(--s-3); font-size: var(--fs-13); border-radius: .5rem; gap: .375rem; }
.btn-sm .icon { width: .9375rem; height: .9375rem; }
.btn-lg { height: var(--h-lg); padding: 0 var(--s-6); font-size: var(--fs-16); }
.btn-block { width: 100%; }
.btn-icon { width: var(--h-md); padding: 0; }
.btn-sm.btn-icon { width: var(--h-sm); }
.btn.is-busy { pointer-events: none; color: transparent; }
.btn.is-busy > * { visibility: hidden; }
.btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--_fg); border-right-color: transparent; animation: spin var(--d-loader) linear infinite; }
.btn-group { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; }

/* ───────── 입력 ───────── */
.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: .375rem; align-content: start; min-width: 0; }
.field > label, .label { font-size: var(--fs-13); font-weight: 600; color: var(--text); }
.field .hint, .hint { font-size: var(--fs-12); color: var(--text-2); }
.field .err, .err { font-size: var(--fs-13); color: var(--st-critical-fg); font-weight: 600; }
.err:empty { display: none; }
.input, .select, .textarea {
  width: 100%; height: var(--h-md); padding: 0 var(--s-3); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-ctl);
  color: var(--text); font-size: var(--fs-14); box-shadow: var(--shadow-1);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.textarea { height: auto; padding: var(--s-3); min-height: 5.5rem; resize: vertical; line-height: var(--lh); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible, .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input[disabled], .select[disabled], .textarea[disabled] { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
.input-sm, .select.input-sm { height: var(--h-sm); font-size: var(--fs-13); border-radius: .5rem; }
.select { appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 52%, calc(100% - .75rem) 52%; background-size: .3rem .3rem; background-repeat: no-repeat; }
.search-wrap .input[type="search"] { padding-left: 2.25rem; }
.search-wrap { position: relative; } .search-wrap > .icon { position: absolute; left: .75rem; top: 50%; translate: 0 -50%; color: var(--text-3); pointer-events: none; }
input[type="range"] { accent-color: var(--brand); width: 100%; }
.check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--surface); transition: border-color var(--d-fast), background-color var(--d-fast); }
.check:hover { border-color: var(--border-strong); }
.check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.check input { margin-top: .15rem; width: 1rem; height: 1rem; accent-color: var(--brand); flex: none; }
.check .t { font-weight: 600; } .check .d { font-size: var(--fs-13); color: var(--text-2); }
.check-grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.check-inline { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-13); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.check-inline input { width: 1rem; height: 1rem; accent-color: var(--brand); margin: 0; }

/* ───────── 토글 · 세그먼트 ───────── */
.switch { position: relative; width: 2.25rem; height: 1.25rem; border: 0; border-radius: var(--r-full); background: var(--border-strong); cursor: pointer; padding: 0; flex: none; transition: background-color var(--d-base) var(--ease); }
.switch i { position: absolute; top: .125rem; left: .125rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--hairline); transition: transform var(--d-base) var(--ease); }
.switch[aria-checked="true"] { background: var(--brand); }
.switch[aria-checked="true"] i { transform: translateX(1rem); }
.switch[disabled] { opacity: .5; cursor: not-allowed; } .switch.is-busy { opacity: .7; }
.seg { display: inline-flex; padding: 2px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--border); gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { height: 1.75rem; border: 0; background: none; padding: 0 var(--s-3); border-radius: .5rem; font-size: var(--fs-13); font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: .375rem; transition: background-color var(--d-fast), color var(--d-fast); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), 0 0 0 1px var(--hairline); }
.seg button .icon { width: .9375rem; height: .9375rem; }

/* ───────── 칩 · 배지 · 등급 ─────────
   상태 칩은 색 + 아이콘 + 글자 세 가지(색만으로 구분하지 않음). */
.chip { display: inline-flex; align-items: center; gap: .3125rem; height: 1.5rem; padding: 0 .5rem; border-radius: var(--r-chip); background: var(--st-bg, var(--st-normal-bg)); color: var(--st-fg, var(--st-normal-fg)); font-size: var(--fs-12); font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; }
.chip .icon { width: .8125rem; height: .8125rem; stroke-width: 2.2; flex: none; }
.chip { max-width: 100%; min-width: 0; }
.chip-t, .badge-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.chip[data-st="empty"] { border: 1px dashed var(--st-empty-line); background: transparent; }
.chip-lg { height: 1.875rem; padding: 0 .625rem; font-size: var(--fs-14); gap: .375rem; }
.chip-lg .icon { width: .9375rem; height: .9375rem; }
.chip-xl { height: 2.5rem; padding: 0 .875rem; font-size: var(--fs-20); gap: .5rem; border-radius: .5rem; }
.chip-xl .icon { width: 1.25rem; height: 1.25rem; }
.chip-dot::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--st-line, currentColor); flex: none; }
.chip-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--st-border, var(--border)); }
/* 등급 P1–P4 */
.lv { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.25rem; padding: 0 .375rem; border-radius: .3125rem; font-size: var(--fs-12); font-weight: 750; letter-spacing: .02em; line-height: 1; font-variant-numeric: tabular-nums; }
.lv[data-lv="p1"] { background: var(--st-critical-line); color: var(--danger-fg); }
.lv[data-lv="p2"] { background: var(--st-delay-bg); color: var(--st-delay-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-delay-line) 45%, transparent); }
.lv[data-lv="p3"] { background: var(--st-caution-bg); color: var(--st-caution-fg); }
.lv[data-lv="p4"] { background: var(--st-normal-bg); color: var(--st-normal-fg); }
/* 배지: 「근접 없음」 같은 작은 사실 표시 */
.badge { display: inline-flex; align-items: center; gap: .25rem; height: 1.25rem; padding: 0 .375rem; border-radius: .3125rem; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); font-size: var(--fs-12); font-weight: 550; white-space: nowrap; line-height: 1; }
.badge .icon { width: .75rem; height: .75rem; flex: none; }
.badge { max-width: 100%; min-width: 0; }
.badge-warn { background: var(--st-delay-bg); color: var(--st-delay-fg); border-color: transparent; }
.badge-info { background: var(--st-active-bg); color: var(--st-active-fg); border-color: transparent; }
.badge-brand { background: var(--brand-soft); color: var(--brand-soft-fg); border-color: transparent; }
.count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3125rem; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-12); font-weight: 650; font-variant-numeric: tabular-nums; }
.count.hot { background: var(--st-critical-line); color: var(--danger-fg); }
.tag { display: inline-flex; align-items: center; gap: .25rem; height: 1.375rem; padding: 0 .5rem; border-radius: var(--r-chip); background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); font-size: var(--fs-12); font-weight: 550; white-space: nowrap; }
.tag .icon { width: .8125rem; height: .8125rem; }
.tag button { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; display: grid; }
.tags { display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: center; }
.dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--st-line, var(--text-3)); flex: none; }

/* ───────── 카드 ───────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); padding: var(--s-6); min-width: 0; }
.card-flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.card-head > div:first-child { display: grid; gap: 2px; min-width: 0; }
.card-head p { color: var(--text-2); font-size: var(--fs-13); }
.card-flush > .card-head { margin: 0; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.card-body { padding: var(--s-5); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-13); color: var(--text-2); }
.card-interactive { cursor: pointer; transition: border-color var(--d-fast), box-shadow var(--d-base) var(--ease), transform var(--d-base) var(--ease); }
.card-interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.section-title h2 { font-size: var(--fs-16); }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); font-size: var(--fs-13); }
.kv dt { color: var(--text-2); } .kv dd { margin: 0; font-weight: 550; }

/* ───────── KPI 타일 ───────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--s-3); }
.stat-tile { position: relative; display: grid; gap: .375rem; align-content: start; padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); min-width: 0; }
.stat-tile .st-label { display: flex; align-items: center; gap: .4375rem; font-size: var(--fs-13); font-weight: 550; color: var(--text-2); }
.stat-tile .st-label .dot { width: .4375rem; height: .4375rem; flex: none; }
.stat-tile .st-label { min-width: 0; }
.st-label-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-tile .st-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-tile .st-value { font-size: var(--fs-kpi); font-weight: 650; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); }
.stat-tile .st-value small { font-size: var(--fs-14); font-weight: 550; color: var(--text-2); margin-left: .25rem; letter-spacing: 0; }
.stat-tile .st-sub { font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
.stat-tile.is-hot .st-value { color: var(--st-fg); }
.stat-tile.is-hot { border-color: var(--st-border); }
button.stat-tile { text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color var(--d-fast), box-shadow var(--d-fast); }
button.stat-tile:hover { border-color: var(--border-strong); }
button.stat-tile[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
/* 예전 KPI(센서 구성 상세) */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--s-3); }
.kpi { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-1); min-width: 0; }
.kpi > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.k-ico { width: 2.25rem; height: 2.25rem; border-radius: var(--r-ctl); display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex: none; }
.k-l { font-size: var(--fs-12); color: var(--text-2); font-weight: 550; } .k-v { font-size: var(--fs-16); font-weight: 650; letter-spacing: -.01em; } .k-s { font-size: var(--fs-12); color: var(--text-3); }
.kpi { container-type: inline-size; }
.k-l, .k-v, .k-s { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi > .btn { flex: none; }
@container (max-width: 12.5rem) { .k-ico { display: none; } }

/* ───────── 표: 줄무늬 없음, 행 높이 44 ───────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.table th { height: 2.25rem; text-align: left; font-size: var(--fs-12); font-weight: 600; color: var(--text-2); padding: 0 var(--s-4); border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.table td { height: var(--row-h); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr { transition: background-color var(--d-fast); }
.table tbody tr:hover { background: var(--hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); background: var(--surface-2); }
.table .num, .table td.r, .table th.num { text-align: right; }
.table td.ts { white-space: nowrap; color: var(--text-2); font-size: var(--fs-13); font-variant-numeric: tabular-nums; } /* 시각 칸: 왼쪽 정렬(머리글과 같이) */
.table-compact td { height: 2.25rem; padding: var(--s-1) var(--s-3); }
.table-compact th { padding: 0 var(--s-3); }

/* ───────── 탭 ───────── */
.tabs { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); height: 2.5rem; padding: 0; border: 0; background: none; color: var(--text-2); font-size: var(--fs-14); font-weight: 600; cursor: pointer; white-space: nowrap; transition: color var(--d-fast); }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); }

/* ───────── 메뉴(펼침 목록) ───────── */
.menu { position: absolute; right: 0; top: calc(100% + .375rem); min-width: 15rem; max-height: min(28rem, 70dvh); overflow-y: auto; background: var(--surface-raised); border: 1px solid var(--border); border-radius: .75rem; box-shadow: var(--shadow-2); padding: .3125rem; z-index: var(--z-menu); animation: pop-in var(--d-base) var(--ease); transform-origin: top right; }
.menu-left { left: 0; right: auto; transform-origin: top left; }
.menu .who { display: grid; gap: 2px; padding: var(--s-2) var(--s-3) var(--s-3); border-bottom: 1px solid var(--border); margin-bottom: .3125rem; }
.menu .who b { font-size: var(--fs-14); } .menu .who span { font-size: var(--fs-12); color: var(--text-2); }
.menu-label { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-12); font-weight: 600; color: var(--text-3); }
.menu-sep { height: 1px; background: var(--border); margin: .3125rem 0; }
.menu button, .menu a, .menu-item { display: flex; width: 100%; align-items: center; gap: .625rem; min-height: 2.125rem; padding: 0 var(--s-3); border: 0; background: none; border-radius: .5rem; text-align: left; cursor: pointer; color: var(--text); text-decoration: none; font-size: var(--fs-14); }
.menu button:hover, .menu a:hover, .menu-item:hover { background: var(--hover); text-decoration: none; }
.menu button[aria-checked="true"]::after, .menu a[aria-current="true"]::after { content: ""; margin-left: auto; width: .375rem; height: .625rem; border: solid var(--brand); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -1px); }
.menu .icon { width: 1rem; height: 1rem; color: var(--text-2); }
.menu .seg { margin: var(--s-1) var(--s-2) var(--s-2); display: flex; }
.menu .seg button { flex: 1; justify-content: center; min-height: 1.75rem; }
.menu .seg button::after { display: none; }
.popover-wrap { position: relative; }

/* ───────── 서랍: 오른쪽 520px, 폰은 바닥 시트 ───────── */
dialog.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: min(var(--drawer-w), 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-3); overflow: hidden; z-index: var(--z-drawer); }
dialog.drawer[open] { display: flex; flex-direction: column; animation: slide-left var(--d-slow) var(--ease); }
dialog.drawer::backdrop { background: var(--overlay); animation: fade-in var(--d-base) var(--ease); }
dialog.drawer.drawer-wide { width: min(45rem, 100vw); }
.drawer-head { display: flex; align-items: center; gap: var(--s-3); min-height: 3.5rem; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-6); border-bottom: 1px solid var(--border); }
.drawer-head h2 { flex: 1; min-width: 0; font-size: var(--fs-16); }
.drawer-head .drawer-sub { font-size: var(--fs-13); color: var(--text-2); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s-6); display: grid; gap: var(--s-5); align-content: start; }
.drawer-foot { display: flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap; padding: var(--s-3) var(--s-6); border-top: 1px solid var(--border); background: var(--surface-2); }
.drawer-handle { display: none; }

/* ───────── 대화상자 ───────── */
dialog.dlg { padding: 0; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-3); width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: hidden; }
dialog.dlg[open] { display: flex; flex-direction: column; animation: pop-in var(--d-base) var(--ease); }
dialog.dlg.dlg-wide { width: min(44rem, calc(100vw - 2rem)); }
dialog.dlg::backdrop { background: var(--overlay); animation: fade-in var(--d-base) var(--ease); }
.dlg-head { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-6) var(--s-6) var(--s-3); }
.dlg-head h2 { flex: 1; font-size: var(--fs-16); line-height: 1.35; padding-top: .3125rem; }
.dlg-body { padding: 0 var(--s-6) var(--s-6); overflow-y: auto; display: grid; gap: var(--s-4); font-size: var(--fs-14); }
.dlg-foot { display: flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap; padding: var(--s-3) var(--s-6); border-top: 1px solid var(--border); background: var(--surface-2); }
.dlg-icon { width: 2.25rem; height: 2.25rem; border-radius: var(--r-ctl); display: grid; place-items: center; flex: none; background: var(--st-bg); color: var(--st-fg); }
.dlg-icon .icon { width: 1.125rem; height: 1.125rem; stroke-width: 2; }
/* 실패 알림창 내용: 원인 · 해결 방법 */
.dlg-kv { display: grid; gap: var(--s-2); }
.dlg-kv > div { padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--border); }
.dlg-kv dt { font-size: var(--fs-12); font-weight: 650; color: var(--text-2); margin-bottom: 2px; }
.dlg-kv dd { margin: 0; line-height: 1.5; }
.dlg-kv .fix { background: var(--st-done-bg); border-color: color-mix(in srgb, var(--st-done-line) 28%, transparent); }
.dlg-kv .fix dt { color: var(--st-done-fg); }
.dlg-kv .mono { font-size: var(--fs-12); color: var(--text-2); }
dialog.dlg.dlg-sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: var(--r-panel) var(--r-panel) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
dialog.dlg.dlg-sheet[open] { animation: slide-up var(--d-slow) var(--ease); }

/* ───────── 화면 안 알림창(모달 아님): 실패 원인 + 해결 ───────── */
.alert-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); background: var(--st-bg, var(--st-critical-bg)); border: 1px solid var(--st-border, var(--st-critical-border)); color: var(--text); font-size: var(--fs-13); animation: slide-down var(--d-base) var(--ease); }
.alert-box > .icon { color: var(--st-line); width: 1.125rem; height: 1.125rem; margin-top: 1px; }
.alert-box .ab-title { font-weight: 650; font-size: var(--fs-14); color: var(--text); }
.alert-box .ab-text { display: grid; gap: 2px; color: var(--text-2); }
.alert-box .ab-text b { color: var(--text); font-weight: 600; }
.alert-box .ab-actions { display: flex; gap: var(--s-2); align-items: center; }
.inline-msg { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--fs-13); font-weight: 550; color: var(--st-fg, var(--text-2)); animation: nudge-in var(--d-base) var(--ease); }
.inline-msg .icon { width: .9375rem; height: .9375rem; }

/* ───────── 안내 상자 ───────── */
.notice { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); background: var(--st-bg, var(--surface-2)); border: 1px solid var(--st-border, var(--border)); color: var(--text); font-size: var(--fs-13); line-height: 1.5; }
.notice > .icon { color: var(--st-line, var(--text-2)); margin-top: 1px; width: 1.0625rem; height: 1.0625rem; }
.notice b { display: block; font-size: var(--fs-14); font-weight: 650; margin-bottom: 1px; }
.notice > div { color: var(--text-2); min-width: 0; } .notice > div b { color: var(--text); }
.notice[data-st="normal"], .notice[data-st="due"] { background: var(--surface-2); border-color: var(--border); }

/* ───────── 토스트: 성공 전용, 3초 ───────── */
.toasts { position: fixed; z-index: var(--z-toast); right: var(--s-5); bottom: var(--s-5); display: grid; gap: var(--s-2); width: min(22rem, calc(100vw - 2rem)); pointer-events: none; justify-items: end; }
.toast { display: inline-flex; align-items: center; gap: var(--s-2); padding: .625rem var(--s-4) .625rem .75rem; border-radius: var(--r-ctl); background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow-3); font-size: var(--fs-14); font-weight: 550; pointer-events: auto; animation: toast-in var(--d-slow) var(--ease); }
.toast .icon { color: var(--success); width: 1.125rem; height: 1.125rem; stroke-width: 2.4; }
.toast.out { animation: toast-out var(--d-base) var(--ease-in-out) forwards; }

/* ───────── 빈 상태 ───────── */
.empty-state { display: grid; justify-items: center; text-align: center; gap: var(--s-2); padding: var(--s-9) var(--s-6); color: var(--text-2); }
.empty-state .ico { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--r-card); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); margin-bottom: var(--s-2); box-shadow: var(--shadow-1); }
.empty-state .ico .icon { width: 1.25rem; height: 1.25rem; }
.empty-state h1, .empty-state h3 { color: var(--text); font-size: var(--fs-16); font-weight: 650; }
.empty-state p { max-width: 30rem; font-size: var(--fs-13); line-height: 1.55; }
.empty-state .actions, .empty-state > .btn { margin-top: var(--s-3); }

/* ───────── 스켈레톤 ───────── */
.skeleton { display: block; border-radius: var(--r-chip); background: linear-gradient(100deg, var(--skeleton-a) 30%, var(--skeleton-b) 50%, var(--skeleton-a) 70%); background-size: 300% 100%; animation: shimmer var(--d-loader) linear infinite; min-height: .75rem; }
.sk-line { height: .75rem; margin: .5rem 0; } .sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; } .sk-line.w80 { width: 80%; }
.sk-rows { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-1); }
.sk-row { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-2) 0; }
.sk-row .sk-avatar { width: 2rem; height: 2rem; border-radius: var(--r-ctl); flex: none; }
.sk-row > div { flex: 1; }
.sk-block { height: 6rem; border-radius: var(--r-card); }

/* ───────── 진행 ───────── */
.progress { height: .375rem; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--st-line, var(--brand)); transition: width var(--d-slow) var(--ease); }
.progress.indet > i { width: 35%; animation: indet var(--d-loader) var(--ease-in-out) infinite; }
.topbar-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: calc(var(--z-toast) + 2); overflow: hidden; opacity: 0; transition: opacity var(--d-base); pointer-events: none; }
.topbar-progress.on { opacity: 1; }
.topbar-progress i { display: block; height: 100%; width: 35%; background: var(--brand); animation: indet var(--d-loader) var(--ease-in-out) infinite; }
.spinner { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--brand); animation: spin var(--d-loader) linear infinite; flex: none; }
.bar { display: block; height: .375rem; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; min-width: 4rem; flex: 1; }
.bar > i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--c, var(--st-line, var(--brand))); transition: width var(--d-slow) var(--ease); }

/* ───────── 사람 · 아바타 ───────── */
.avatar { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-13); font-weight: 650; background: var(--brand-soft); color: var(--brand-soft-fg); flex: none; }
.avatar-sm { width: 1.625rem; height: 1.625rem; font-size: var(--fs-12); }
.person { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.person b { display: block; font-weight: 600; } .person span { font-size: var(--fs-12); color: var(--text-2); }

/* ═════════ 앱 틀 ═════════ */

/* 상단 고지 띠(24px) — 데모 · 가상 센서 · 가상 환자 · 의료기기 아님 */
.notice-strip { position: sticky; top: 0; z-index: var(--z-strip); height: var(--strip-h); display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 0 var(--s-4); background: var(--surface-2); color: var(--text-3); border-bottom: 1px solid var(--border); font-size: var(--fs-12); font-weight: 550; white-space: nowrap; overflow: hidden; }
.notice-strip .sep { opacity: .6; }
.notice-strip .ns-sim { position: absolute; right: var(--s-3); top: 50%; translate: 0 -50%; height: 1.125rem; font-size: 11px; padding: 0 .375rem; }
.notice-strip .icon { width: .8125rem; height: .8125rem; }

.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: calc(100dvh - var(--strip-h)); transition: grid-template-columns var(--d-slow) var(--ease); }
.shell[data-rail="collapsed"] { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }
.main { min-width: 0; display: flex; flex-direction: column; }
.main > main { flex: 1; min-width: 0; }

/* 왼쪽 레일 64 / 232 */
.rail { position: sticky; top: var(--strip-h); z-index: var(--z-rail); height: calc(100dvh - var(--strip-h)); display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; }
.rail-top { display: flex; align-items: center; gap: var(--s-2); height: var(--topbar-h); padding: 0 var(--s-3) 0 var(--s-4); flex: none; }
.brand { display: inline-flex; align-items: center; gap: .625rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); text-decoration: none; font-size: var(--fs-16); min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 1.75rem; height: 1.75rem; border-radius: .5rem; display: grid; place-items: center; background: var(--brand); color: var(--brand-fg); flex: none; }
.brand-mark .icon { width: 1rem; height: 1rem; stroke-width: 2.4; }
.brand .bt { overflow: hidden; white-space: nowrap; }
.rail-collapse { margin-left: auto; color: var(--text-3); }
.rail-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--s-1) var(--s-3) var(--s-4); display: grid; gap: var(--s-4); align-content: start; }
.rail-group { display: grid; gap: 1px; }
.rail-title { height: 1.75rem; display: flex; align-items: center; padding: 0 var(--s-3); font-size: var(--fs-12); font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: hidden; }
.rail-nav a { position: relative; display: flex; align-items: center; gap: .6875rem; height: 2.25rem; padding: 0 .6875rem; border-radius: .5rem; color: var(--text-2); font-size: var(--fs-14); font-weight: 550; text-decoration: none; white-space: nowrap; transition: background-color var(--d-fast), color var(--d-fast); }
.rail-nav a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.rail-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-soft-fg); font-weight: 600; }
.rail-nav a[aria-current="page"] .icon { color: var(--brand); }
.rail-nav a .icon { width: 1.125rem; height: 1.125rem; flex: none; }
.rail-nav a .nav-label { overflow: hidden; text-overflow: ellipsis; }
.rail-nav a .count { margin-left: auto; }
.rail-foot { flex: none; border-top: 1px solid var(--border); padding: var(--s-3); display: grid; gap: var(--s-1); }
.rail-foot .rf-meta { display: flex; align-items: center; gap: .5rem; padding: 0 .6875rem; height: 1.75rem; font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; overflow: hidden; }
.shell[data-rail="collapsed"] .rail-top { padding: 0; justify-content: center; }
.shell[data-rail="collapsed"] .brand .bt, .shell[data-rail="collapsed"] .rail-collapse, .shell[data-rail="collapsed"] .nav-label, .shell[data-rail="collapsed"] .rail-nav a .count, .shell[data-rail="collapsed"] .rf-meta span { display: none; }
.shell[data-rail="collapsed"] .rail-title { height: 1px; padding: 0; margin: var(--s-2) var(--s-2); background: var(--border); font-size: 0; }
.shell[data-rail="collapsed"] .rail-group:first-child .rail-title { background: transparent; margin-top: 0; }
.shell[data-rail="collapsed"] .rail-nav { padding: var(--s-1) var(--s-2) var(--s-4); }
.shell[data-rail="collapsed"] .rail-nav a { justify-content: center; padding: 0; }
.shell[data-rail="collapsed"] .rail-nav a .count { display: block; position: absolute; top: 2px; right: 4px; min-width: .5rem; height: .5rem; padding: 0; font-size: 0; }
.shell[data-rail="collapsed"] .rail-foot { padding: var(--s-2); justify-items: center; }
.shell[data-rail="collapsed"] .rf-meta { padding: 0; justify-content: center; }

/* 상단 바 */
.topbar { position: sticky; top: var(--strip-h); z-index: calc(var(--z-alarm) + 10); display: flex; align-items: center; gap: var(--s-2); height: var(--topbar-h); padding: 0 var(--s-4) 0 var(--s-5); background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px); border-bottom: 1px solid var(--border); }
.tb-brand { display: none; }
.tb-crumb { display: flex; align-items: center; gap: var(--s-2); min-width: 0; flex: 1 1 auto; overflow: hidden; }
.tb-crumb .popover-wrap { min-width: 0; }
.tb-crumb .sep { color: var(--text-3); font-weight: 300; font-size: var(--fs-16); }
.tb-title { font-size: var(--fs-14); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-end { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.ward-btn { display: inline-flex; align-items: center; gap: .5rem; height: 2.125rem; padding: 0 .625rem 0 .5rem; border: 1px solid transparent; border-radius: .5rem; background: none; color: var(--text); font-size: var(--fs-14); font-weight: 650; cursor: pointer; white-space: nowrap; max-width: 16rem; min-width: 0; transition: background-color var(--d-fast), border-color var(--d-fast); }
.ward-btn:hover { background: var(--hover); }
.ward-btn[aria-expanded="true"] { background: var(--hover); border-color: var(--border); }
.ward-btn .wb-mark { width: 1.375rem; height: 1.375rem; border-radius: .375rem; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 700; flex: none; }
.ward-btn .wb-name { overflow: hidden; text-overflow: ellipsis; }
.ward-btn .icon { width: .875rem; height: .875rem; color: var(--text-3); }
.ward-btn[disabled] { cursor: default; } .ward-btn[disabled] .icon { display: none; } .ward-btn[disabled]:hover { background: none; }
/* 상단 바 상태 알약 */
.tb-pill { display: inline-flex; align-items: center; gap: .4375rem; height: 2rem; padding: 0 .6875rem; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font-size: var(--fs-13); font-weight: 600; white-space: nowrap; cursor: default; line-height: 1; font-variant-numeric: tabular-nums; }
button.tb-pill > *, .ward-btn > *, .tb-user > * { pointer-events: none; }
button.tb-pill { cursor: pointer; transition: background-color var(--d-fast), border-color var(--d-fast), color var(--d-fast); }
button.tb-pill:hover { border-color: var(--border-strong); color: var(--text); }
.tb-pill .icon { width: .9375rem; height: .9375rem; }
.tb-pill .dot { width: .5rem; height: .5rem; }
.tb-pill[data-st] { color: var(--st-fg); background: var(--st-bg); border-color: var(--st-border); }
.tb-pill[data-st="normal"] { background: var(--surface); color: var(--text-2); border-color: var(--border); }
.tb-pill.is-warn { background: var(--st-delay-bg); color: var(--st-delay-fg); border-color: var(--st-delay-border); }
.tb-pill.is-warn:hover { color: var(--st-delay-fg); border-color: var(--st-delay-line); }
.tb-pill.is-muted { background: var(--st-caution-bg); color: var(--st-caution-fg); border-color: var(--st-caution-border); }
/* 데모 가상 시계(시뮬레이션 시각) — 상태 색이 아니라 브랜드 연한 바탕: 「지금 시각이 실제와 다르다」를 조용히 알린다 */
a.tb-pill.tb-vclock { cursor: pointer; text-decoration: none; background: var(--brand-soft); color: var(--brand-soft-fg); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
a.tb-pill.tb-vclock:hover { border-color: var(--brand); text-decoration: none; }
.tb-vclock .tbv-label { font-weight: 600; }
.tb-vclock .tbv-time { font-weight: 700; color: var(--text); letter-spacing: -.005em; }
.tb-vclock[data-paused="1"] .tbv-time { color: var(--text-2); }
.tb-vclock[data-paused="1"]::after { content: "정지"; font-size: var(--fs-12); font-weight: 600; color: var(--text-3); }
.conn-dot { display: inline-flex; align-items: center; gap: .4375rem; height: 2rem; padding: 0 .375rem; font-size: var(--fs-13); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.conn-dot i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--text-3); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-3) 18%, transparent); }
.conn-dot[data-conn="live"] i { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.conn-dot[data-conn="poll"] i { background: var(--st-delay-line); }
.conn-dot[data-conn="connecting"] i, .conn-dot[data-conn="poll"] i { animation: dot-pulse var(--d-blink) var(--ease-in-out) infinite; }
.tb-user { display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .25rem; border: 0; background: none; border-radius: var(--r-full); cursor: pointer; }
.tb-user:hover .avatar { box-shadow: 0 0 0 3px var(--hover); }
.tb-sep { width: 1px; height: 1.25rem; background: var(--border); margin: 0 var(--s-1); }
/* 사이렌 음량 펼침 */
.siren-pop { width: 18rem; padding: var(--s-2); }
.siren-pop .sp-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2); }
.siren-pop .sp-row .icon { color: var(--text-2); }
.sp-help { padding: var(--s-1) var(--s-2) var(--s-2); font-size: var(--fs-12); color: var(--text-2); line-height: 1.5; }

/* 실시간 연결 끊김 알림(상단 고정, 30초 넘으면) */
.shell-alerts { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-5) 0; }
.shell-alerts:empty { display: none; }

/* 폰 아래 탭(≤768px) */
.tabbar { display: none; }

@media (max-width: 1100px) and (min-width: 769px) {
  .shell { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }
  .shell .rail-top { padding: 0; justify-content: center; }
  .shell .brand .bt, .shell .rail-collapse, .shell .nav-label, .shell .rail-nav a .count, .shell .rf-meta span { display: none; }
  .shell .rail-title { height: 1px; padding: 0; margin: var(--s-2); background: var(--border); font-size: 0; }
  .shell .rail-group:first-child .rail-title { background: transparent; margin-top: 0; }
  .shell .rail-nav { padding: var(--s-1) var(--s-2) var(--s-4); }
  .shell .rail-nav a { justify-content: center; padding: 0; }
  .shell .rail-foot { padding: var(--s-2); justify-items: center; }
  .tb-pill .tbp-text, .tb-vclock .tbv-label { display: none; }
}
@media (max-width: 768px) {
  .shell, .shell[data-rail="collapsed"] { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .topbar { padding: 0 var(--s-3) 0 var(--s-4); gap: var(--s-1); height: 3.25rem; }
  .tb-brand { display: inline-flex; margin-right: var(--s-1); }
  .tb-crumb .sep, .tb-crumb .tb-title { display: none; }
  .ward-btn { padding: 0 .375rem; max-width: 11rem; }
  .ward-btn .wb-mark { display: none; }
  .tb-pill { height: 1.875rem; padding: 0 .5rem; }
  .tb-pill .tbp-text, .conn-dot .tbp-text, .tb-hide-phone { display: none; }
  .tb-vclock .tbv-label, .tb-vclock[data-paused="1"]::after { display: none; }
  .tb-vclock { gap: .3125rem; }
  .tb-end > .btn-icon { display: none; } /* 테마 단추는 폰에서 「더보기 → 표시」에 있다 */
  .tb-sep { display: none; }
  .shell-alerts { padding: var(--s-3) var(--s-4) 0; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: .25rem .25rem env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-top: 1px solid var(--border); }
  .tabbar a, .tabbar button { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; border: 0; background: none; border-radius: var(--r-ctl); color: var(--text-3); font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer; }
  .tabbar .icon { width: 1.375rem; height: 1.375rem; }
  .tabbar a[aria-current="page"], .tabbar button.is-cur { color: var(--brand); }
  .tabbar .count { position: absolute; top: .25rem; left: calc(50% + .375rem); height: 1rem; min-width: 1rem; font-size: 10px; }
  .main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .toasts { left: var(--s-3); right: var(--s-3); width: auto; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-3)); justify-items: stretch; }
  .notice-strip { justify-content: flex-start; padding: 0 var(--s-3); }
  .notice-strip .ns-hide-phone { display: none; }
  /* 서랍 → 바닥 시트 */
  dialog.drawer, dialog.drawer.drawer-wide { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 92dvh; border-left: 0; border-top: 1px solid var(--border); border-radius: var(--r-panel) var(--r-panel) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  dialog.drawer[open] { animation: slide-up var(--d-slow) var(--ease); }
  .drawer-handle { display: block; width: 2.25rem; height: .25rem; border-radius: var(--r-full); background: var(--border-strong); margin: .5rem auto 0; flex: none; }
  .drawer-head { padding: var(--s-2) var(--s-3) var(--s-3) var(--s-5); min-height: 3rem; }
  .drawer-body { padding: var(--s-5); }
  .drawer-foot { padding: var(--s-3) var(--s-5); }
  .drawer-foot .btn { flex: 1; }
  dialog.dlg { width: calc(100vw - 1.5rem); }
  .dlg-head { padding: var(--s-5) var(--s-5) var(--s-3); }
  .dlg-body { padding: 0 var(--s-5) var(--s-5); }
  .dlg-foot { padding: var(--s-3) var(--s-5); }
  .dlg-foot .btn { flex: 1; }
  .card { padding: var(--s-4); }
  .card-flush > .card-head { padding: var(--s-3) var(--s-4); }
  .stat-tile { padding: var(--s-3) var(--s-4); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .stat-tile .st-value { font-size: var(--fs-24); }
}
/* 폰 좁은 폭(≤480px): 병동 이름이 칩에 밀려 「데.」로 잘리지 않게 두 줄로 — 1줄 로고+병동 이름(남는 폭 전부, 말줄임), 2줄 시계·상태 칩+사용자 */
@media (max-width: 480px) {
  :root { --topbar-h: 5rem; }
  .topbar { height: var(--topbar-h); flex-wrap: wrap; align-content: center; row-gap: .125rem; padding-top: .25rem; padding-bottom: .25rem; }
  .tb-crumb { flex: 1 1 calc(100% - 3rem); min-width: 8em; }
  .tb-crumb .popover-wrap, .ward-btn { min-width: 8em; max-width: 100%; }
  .ward-btn .wb-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-end { flex: 1 1 100%; justify-content: flex-end; min-width: 0; }
}
.sheet-nav { display: grid; gap: 2px; }
.sheet-nav a, .sheet-link { display: flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; padding: 0 var(--s-3); border: 0; background: none; border-radius: var(--r-ctl); color: var(--text); text-decoration: none; font-size: var(--fs-14); font-weight: 550; cursor: pointer; text-align: left; width: 100%; }
.sheet-nav a:hover, .sheet-link:hover { background: var(--hover); text-decoration: none; }
.sheet-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-soft-fg); }
.sheet-nav .icon, .sheet-link .icon { color: var(--text-2); }
.sheet-title { padding: var(--s-3) var(--s-3) var(--s-1); font-size: var(--fs-12); font-weight: 600; color: var(--text-3); }

/* ═════════ 비상 알림 (§5) ═════════ */
/* P1 상단 고정 띠 */
.alarm-banner { position: sticky; top: calc(var(--strip-h) + var(--topbar-h)); z-index: var(--z-alarm); display: grid; gap: 1px; background: var(--st-critical-line); border-bottom: 1px solid var(--st-critical-line); }
.alarm-banner:empty { display: none; }
/* 띠 높이는 app.js 가 --alarm-h 로 알려 준다 — 화면 높이를 꽉 채우는 화면(모니터·병동 구성)과 붙는 패널이 그만큼 빼서 내용이 튀지 않는다.
   줄 높이는 「내가 갈게요」 ↔ 「○○ 님이 가는 중」 이 바뀌어도 같게(3rem 고정). */
.ab-row { display: flex; align-items: center; gap: var(--s-3); min-height: 3rem; animation: slide-down var(--d-base) var(--ease); padding: var(--s-2) var(--s-5); background: color-mix(in srgb, var(--st-critical-line) 10%, var(--surface)); color: var(--text); font-size: var(--fs-14); }
.ab-row .ab-pulse { position: relative; width: .625rem; height: .625rem; border-radius: 50%; background: var(--st-critical-line); flex: none; animation: pulse-ring var(--d-pulse) var(--ease) var(--loop); }
.ab-row.is-going .ab-pulse { animation: none; background: var(--st-active-line); }
.ab-row .ab-bed { font-size: var(--fs-20); font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--st-critical-fg); text-decoration: none; }
.ab-row .ab-kind { font-weight: 650; }
.ab-row .ab-age { color: var(--text-2); font-variant-numeric: tabular-nums; font-size: var(--fs-13); }
.ab-row .ab-spacer { flex: 1; }
.ab-row .ab-msg { font-size: var(--fs-13); }
@media (max-width: 768px) {
  .alarm-banner { top: calc(var(--strip-h) + 3.25rem); }
  .ab-row { padding: var(--s-2) var(--s-4); flex-wrap: wrap; row-gap: var(--s-1); }
  .ab-row .ab-bed { font-size: var(--fs-16); }
}
/* 화면 가장자리 붉은 빛(1.2s 맥동) — 동작 줄이기면 고정 붉은 테두리 */
body.alarm-p1::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-glow); animation: edge-glow var(--d-pulse) var(--ease-in-out) var(--loop); }
@media (prefers-reduced-motion: reduce) {
  body.alarm-p1::after { animation: none !important; box-shadow: inset 0 0 0 4px var(--st-critical-line); }
  .ab-row .ab-pulse { animation: none !important; }
}

/* ═════════ 침대 타일 BedTile (§3) — 평면·격자 공통 ═════════ */
.bed-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.bedtile {
  --_bd: var(--border);
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "head head" "fig meta" "foot foot"; gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-3); min-width: 0; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--_bd); box-shadow: var(--shadow-1);
  color: var(--text); text-align: left; font: inherit; cursor: pointer;
  transition: border-color var(--d-base) var(--ease), background-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.bedtile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.bedtile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-card); }
.bt-head { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-width: 0; }
.bt-label { font-size: var(--fs-bed); font-weight: 750; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.bt-fig { grid-area: fig; position: relative; width: 2.75rem; height: 4.5rem; display: grid; place-items: center; border-radius: .5rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); overflow: visible; }
.bt-fig > svg { width: 100%; height: 100%; }
.bt-meta { grid-area: meta; display: grid; gap: 3px; align-content: center; min-width: 0; font-size: var(--fs-13); }
.bt-posture { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-who { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); }
.bt-elapsed { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-1); min-width: 0; white-space: nowrap; overflow: hidden; color: var(--text-2); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.bt-elapsed > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-head > .chip { flex: 0 1 auto; }
.bt-label { flex: none; }
.bt-foot > .badge, .bt-signal { min-width: 0; }
/* 체위변경 타이머 링 (bedtile.js timerRing) */
.bt-elapsed { justify-content: flex-start; align-items: center; }
.bt-ring { width: .9375rem; height: .9375rem; flex: none; transform: rotate(-90deg); overflow: visible; }
.bt-ring circle { fill: none; stroke-width: 3; }
.bt-ring .tr { stroke: var(--surface-3); }
.bt-ring .ar { stroke: var(--st-normal-line); stroke-linecap: round; transition: stroke-dashoffset var(--d-slow) var(--ease), stroke var(--d-base) var(--ease); }
.bt-ring[data-lv="soon"] .ar { stroke: var(--st-due-line); }
.bt-ring[data-lv="soon"] { animation: bt-ring-breath var(--d-breath) var(--ease-in-out) var(--loop); }
.bt-ring[data-lv="over"] .ar { stroke: var(--st-delay-line); }
@keyframes bt-ring-breath { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.bt-foot { grid-area: foot; display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--fs-12); color: var(--text-3); }
.bt-foot .bt-caps { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-foot .grow { flex: 1; }
.bt-signal { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.bt-signal[data-sig="weak"] { color: var(--st-delay-fg); }
.bt-signal[data-sig="offline"] { color: var(--st-critical-fg); }
.bt-signal .icon { width: .875rem; height: .875rem; }
/* 근접(사람이 곁에 있음): 침대 옆 반원 물결 */
.bt-presence { position: absolute; top: 50%; right: -.6875rem; width: 1.125rem; height: 1.75rem; translate: 0 -50%; pointer-events: none; }
.bt-presence i { position: absolute; inset: 0; border: 2px solid var(--st-active-line); border-left-color: transparent; border-radius: 0 999px 999px 0; animation: ripple var(--d-ripple) var(--ease) var(--loop); opacity: 0; }
.bt-presence i:nth-child(2) { animation-delay: calc(var(--d-ripple) / 3); }
.bt-presence i:nth-child(3) { animation-delay: calc(var(--d-ripple) * 2 / 3); }
@media (prefers-reduced-motion: reduce) { .bt-presence i { animation: none !important; opacity: .8; } .bt-presence i:nth-child(n+2) { display: none; } }
/* 상태별 */
.bedtile[data-st="critical"] { --_bd: var(--st-critical-line); background: color-mix(in srgb, var(--st-critical-line) 7%, var(--surface)); }
.bedtile[data-st="delay"] { --_bd: color-mix(in srgb, var(--st-delay-line) 55%, var(--border)); }
.bedtile[data-st="empty"] { background: transparent; border-style: dashed; border-color: var(--st-empty-line); box-shadow: none; }
.bedtile[data-st="empty"] .bt-label { color: var(--text-3); }
.bedtile[data-off="1"] { opacity: .55; }
/* 등급 표시: P1 테두리 맥동 · P2 주황 테두리 고정 · P3 보라 점 */
.bedtile[data-alarm="p1"] { --_bd: var(--st-critical-line); box-shadow: 0 0 0 1px var(--st-critical-line); animation: pulse-ring var(--d-pulse) var(--ease) var(--loop); }
.bedtile[data-alarm="p1"][data-acked="1"] { animation: none; }
.bedtile[data-alarm="p2"] { --_bd: var(--st-delay-line); box-shadow: 0 0 0 1px var(--st-delay-line); }
.bedtile[data-alarm="p3"]::after { content: ""; position: absolute; top: .5rem; right: .5rem; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--st-caution-line); box-shadow: 0 0 0 2px var(--surface); }
.bedtile[data-alarm="p3"] .bt-head { padding-right: .625rem; }
@media (prefers-reduced-motion: reduce) { .bedtile[data-alarm="p1"] { animation: none !important; box-shadow: 0 0 0 2px var(--st-critical-line); } }
/* 작은 타일(평면 안) */
.bedtile[data-size="sm"] { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "fig head" "fig meta"; padding: var(--s-2) var(--s-3); gap: 2px var(--s-2); border-radius: var(--r-ctl); }
.bedtile[data-size="sm"] .bt-label { font-size: var(--fs-20); }
.bedtile[data-size="sm"] .bt-fig { width: 1.75rem; height: 2.875rem; }
.bedtile[data-size="sm"] .bt-who, .bedtile[data-size="sm"] .bt-foot, .bedtile[data-size="sm"] .bt-posture { display: none; }
.bedtile[data-size="sm"] .chip { height: 1.25rem; padding: 0 .375rem; font-size: 11px; }
/* 큰 타일(대형 모니터) */
.bedtile[data-size="lg"] .bt-label { font-size: var(--fs-bed-lg); }
.bedtile[data-size="lg"] .bt-fig { width: 3.25rem; height: 5.25rem; }
.bedtile[data-size="lg"] .chip { height: 1.875rem; padding: 0 .625rem; font-size: var(--fs-14); }
/* 기본 자세 그림(UI-FIGURE 의 figure/mini.js 가 없을 때) */
.mini-fallback { width: 100%; height: 100%; }
.mini-fallback .mf-bed { fill: none; stroke: var(--border-strong); stroke-width: 1.2; }
.mini-fallback .mf-pillow { fill: var(--surface-3); }
.mini-fallback .mf-body { fill: color-mix(in srgb, var(--text-2) 22%, transparent); stroke: var(--text-2); stroke-width: 1.1; }
.mini-fallback .mf-head { fill: var(--text-2); }
.mini-fallback .mf-ghost { fill: none; stroke: var(--text-3); stroke-width: 1.1; stroke-dasharray: 2 2; }
.bedtile[data-st="critical"] .mini-fallback .mf-body, .bedtile[data-st="critical"] .mini-fallback .mf-head { stroke: var(--st-critical-line); }
.bedtile[data-st="critical"] .mini-fallback .mf-head { fill: var(--st-critical-line); }

/* 범례 */
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-12); color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: .375rem; }
.bt-fig-art { width: 100%; height: 100%; display: grid; place-items: center; padding: 2px; }
.bt-fig-art > svg { width: 100%; height: 100%; }

/* 폰(≈390px): 병동 이름이 「데…」로 잘리지 않게 이름 칸에 최소 폭, 침대 타일 글자는 줄바꿈으로 끝까지 보이게 */
@media (max-width: 480px) {
  .ward-btn { min-width: 0; flex: 1 1 auto; }
  .ward-btn .wb-name { min-width: 6.5em; overflow: visible; text-overflow: clip; white-space: nowrap; }
  .ward-btn .wb-mark { display: none; }
  .bt-posture, .bt-who, .bt-elapsed, .bt-elapsed > span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  .bt-elapsed { align-items: flex-start; }
}

/* ───────── 처리 결과 시트(js/outcome-sheet.js): 카드 4장 → 종류별 두 번째 화면 ───────── */
dialog.oc-dlg { width: min(32rem, calc(100vw - 1.5rem)); }
.oc { display: grid; gap: var(--s-3); }
.oc-q { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.oc-cards { display: grid; gap: var(--s-2); }
.oc-card { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 4.5rem; padding: .75rem 1rem; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  animation: mo-rise var(--d-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--stagger));
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.oc-card:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.oc-card:active { transform: scale(.985); }
.oc-card > svg:last-child { flex: none; width: 1.125rem; height: 1.125rem; color: var(--text-3); }
.oc-ico { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 14px; background: var(--surface-2); color: var(--text-2); }
.oc-ico svg { width: 1.375rem; height: 1.375rem; }
[data-tone="done"] > .oc-ico { background: var(--st-done-bg); color: var(--st-done-fg); }
[data-tone="caution"] > .oc-ico { background: var(--st-delay-bg); color: var(--st-delay-fg); }
[data-tone="active"] > .oc-ico { background: var(--st-active-bg); color: var(--st-active-fg); }
.oc-t { display: grid; gap: 2px; flex: 1; min-width: 0; line-height: 1.3; }
.oc-t b { font-size: 1.0625rem; }
.oc-t small { color: var(--text-2); font-size: var(--fs-12); }
.oc-back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: .25rem .5rem .25rem .25rem; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-14); cursor: pointer; }
.oc-back:hover { background: var(--surface-2); }
.oc-back svg { width: 1rem; height: 1rem; }
.oc-head { display: flex; align-items: center; gap: var(--s-3); animation: mo-rise var(--d-base) var(--ease) both; }
.oc-head b { font-size: 1.125rem; }
.oc-list, .oc-grid, .oc-mins { display: grid; gap: var(--s-2); }
.oc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-mins { grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }
.oc-opt { display: flex; align-items: center; gap: var(--s-2); min-height: 3.25rem; padding: 0 .875rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-14); font-weight: 600; text-align: left; cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease); }
.oc-opt > i { flex: none; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 2px solid var(--border-strong); transition: border-width var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.oc-opt[aria-checked="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.oc-opt[aria-checked="true"] > i { border: 5px solid var(--brand); }
.oc-opt > span { flex: 1; }
.oc-mins .oc-opt { justify-content: center; } .oc-mins .oc-opt > i { display: none; }
.oc-rec { padding: 1px 6px; border-radius: 999px; background: var(--st-done-bg); color: var(--st-done-fg); font-size: 11px; font-style: normal; font-weight: 700; }
.oc-memo-w[hidden] { display: none; }
.oc-check { display: flex; align-items: center; gap: var(--s-3); padding: .75rem .875rem; border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.oc-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--brand); }
.oc-check span { display: grid; line-height: 1.3; } .oc-check small { color: var(--text-2); font-size: var(--fs-12); }
.oc-msg { color: var(--st-critical-fg); font-size: var(--fs-14); } .oc-msg:empty { display: none; }
.oc-go { min-height: 3.25rem; font-size: 1.0625rem; }
.oc-err { display: flex; gap: var(--s-2); padding: .75rem; border-radius: 12px; background: var(--st-critical-bg); color: var(--st-critical-fg); }
.oc-err div { display: grid; gap: 2px; }

/* 체위변경 예고 한 줄(스테이션 알림 목록·병동폰): 침대마다 카드 대신 묶음 */
.feed-notices { display: grid; gap: var(--s-2); margin: 0 var(--s-3) var(--s-2); }
.feed-notices:empty { display: none; }
.ph-notices { margin: 0 0 var(--s-3); }
.feed-notice { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: .625rem .875rem; border-radius: 12px; background: var(--st-due-bg); color: var(--st-due-fg); animation: mo-rise var(--d-base) var(--ease) both; }
.feed-notice[data-tone="active"] { background: var(--st-active-bg); color: var(--st-active-fg); }
.fn-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); flex: none; }
.fn-ico svg { width: 1rem; height: 1rem; }
.fn-t { display: grid; gap: 1px; flex: 1; min-width: 10rem; line-height: 1.3; }
.fn-t b { font-size: var(--fs-14); color: var(--text); }
.fn-t small { font-size: var(--fs-12); color: var(--text-2); }
.fn-beds { display: flex; flex-wrap: wrap; gap: 4px; }
.fn-bed { padding: 1px 8px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: var(--fs-12); font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums; }
.fn-bed:hover { background: var(--surface-2); }
.fn-more { font-size: var(--fs-12); color: var(--text-2); }