/* HELIX CareView 2.0 — Dash DNA (aliased from helix-careview --hx-dash-*) */
:root {
  --hx-dash-bg: #121212;
  --hx-dash-bg2: #1a1a1f;
  --hx-dash-surface: #1e1e24;
  --hx-dash-panel: linear-gradient(165deg, #1e1e24 0%, #16161a 48%, #121214 100%);
  --hx-dash-card: linear-gradient(155deg, rgba(42, 42, 50, 0.88), rgba(22, 22, 28, 0.94));
  --hx-dash-card-soft: linear-gradient(155deg, rgba(36, 36, 44, 0.72), rgba(16, 16, 20, 0.9));
  --hx-dash-border: rgba(255, 255, 255, 0.09);
  --hx-dash-border-hi: rgba(255, 255, 255, 0.16);
  --hx-dash-r: 26px;
  --hx-dash-r-card: 22px;
  --hx-dash-r-sm: 14px;
  --hx-dash-pill: 999px;
  --hx-dash-lime: #d8ff3c;
  --hx-dash-orange: #ff6f14;
  --hx-dash-teal: #1ef0d0;
  --hx-dash-cyan: #4ef5ff;
  --hx-dash-coral: #ff2d6a;
  --hx-dash-amber: #ffb01a;
  --hx-dash-magenta: #ff3db8;
  --hx-dash-text: #f2f4f7;
  --hx-dash-muted: #9aa3b2;
  --hx-dash-dim: #6b7380;
  --hx-dash-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --hx-dash-shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --hx-dash-glow-coral: 0 8px 22px rgba(0, 0, 0, 0.36);
  --hx-dash-pill-on-bg: #f2f4f7;
  --hx-dash-pill-on-fg: #121214;
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  /* Metric palette (PulseBuddy / VEXORA-inspired category colors) */
  --cv-hr: #ff3b5c;
  --cv-hr-glow: rgba(255, 59, 92, 0.45);
  --cv-br: #3db8ff;
  --cv-br-glow: rgba(61, 184, 255, 0.4);
  --cv-presence: #1ef0d0;
  --cv-presence-glow: rgba(30, 240, 208, 0.4);
  --cv-fall: #ff2d6a;
  --cv-fall-glow: rgba(255, 45, 106, 0.5);
  --cv-move: #d8ff3c;
  --cv-move-glow: rgba(216, 255, 60, 0.35);
  --cv-pobc: #b8e62a;
  --cv-pobc-grad: linear-gradient(135deg, #d8ff3c, #1ef0d0);
  --cv-stress: #ff6f14;
  --cv-stress-grad: linear-gradient(135deg, #ff6f14, #ffb01a);
  --cv-sleep: #a78bfa;
  --cv-sleep-glow: rgba(167, 139, 250, 0.4);
  --cv-audio: #ffb01a;
  --cv-audio-glow: rgba(255, 176, 26, 0.35);
  --cv-temp: #ff8a4c; --cv-humidity: #4ecdc4; --cv-pm: #c4b5fd;
  --cv-aqi: #38bdf8; --cv-voc: #f472b6; --cv-light: #fbbf24;
  --cv-awake: #ff6f14;
  --cv-rem: #f1c40f;
  --cv-core: #d8ff3c;
  --cv-deep: #1ef0d0;
  --cv-dev-on: #1ef0d0;
  --cv-dev-off: #6b7380;
  --cv-tile-orange: #ff7b42;
  --cv-tile-lime: #b0c44d;
  --cv-tile-mustard: #ffb84c;
  --cv-tile-teal: #40b3a2;
  --cv-tile-green: #7ed957;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 700px at 88% -10%, rgba(30, 240, 208, 0.07), transparent 55%),
    radial-gradient(900px 600px at -8% 110%, rgba(255, 111, 20, 0.06), transparent 58%),
    linear-gradient(160deg, #0e0e12, var(--hx-dash-bg));
  color: var(--hx-dash-text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
button, a { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { text-decoration: none; }

/* ── Top shell ── */
.shell-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px;
  background: rgba(18, 18, 20, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--hx-dash-border);
}
.brand {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
}
.brand-mark {
  width: 40px; height: 40px; border-radius: 14px;
  background: conic-gradient(from 200deg, var(--hx-dash-lime), var(--hx-dash-teal), var(--hx-dash-orange), var(--hx-dash-lime));
  position: relative;
  box-shadow: 0 0 18px rgba(216, 255, 60, 0.18);
}
.brand-mark::after {
  content: ""; position: absolute; inset: 7px; border-radius: 9px;
  background: #121214;
}
.brand-mark::before {
  content: "C2"; position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900; letter-spacing: -0.5px;
  color: var(--hx-dash-lime);
}
.brand-txt strong {
  display: block; font-size: 15px; font-weight: 800; letter-spacing: 0.2px;
}
.brand-txt small {
  display: block; font-size: 10px; font-weight: 700;
  color: var(--hx-dash-dim); letter-spacing: 0.8px; text-transform: uppercase;
}

.pill-nav {
  display: flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: var(--hx-dash-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hx-dash-border);
}
.pill-link {
  padding: 8px 14px; border-radius: var(--hx-dash-pill);
  font-size: 12.5px; font-weight: 700; color: var(--hx-dash-muted);
  transition: 0.18s;
}
.pill-link:hover { color: var(--hx-dash-text); background: rgba(255, 255, 255, 0.04); }
.pill-link.on {
  background: var(--hx-dash-pill-on-bg);
  color: var(--hx-dash-pill-on-fg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.top-utils {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
}
.mode-badge {
  font-size: 10.5px; font-weight: 800; padding: 5px 11px 5px 9px;
  border-radius: var(--hx-dash-pill); letter-spacing: 0.4px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1;
}
.mode-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.mode-badge.demo {
  background: rgba(255, 176, 26, 0.13); color: var(--hx-dash-amber);
  border: 1px solid rgba(255, 176, 26, 0.32);
}
.mode-badge.demo::before { opacity: .5; }
.mode-badge.nokey {
  background: rgba(154, 163, 178, 0.12); color: var(--hx-dash-muted);
  border: 1px solid rgba(154, 163, 178, 0.28);
}
.mode-badge.nokey::before { opacity: .5; }
/* 헬릭스 자체 AI 산출 지표 배지(스트레스·수면·거리·무동작 등) */
.hx-ai-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: .02em; line-height: 1;
  padding: 2px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
  background: linear-gradient(90deg, #7b5cff, #1ef0d0); color: #0a0e12;
  text-transform: none; white-space: nowrap;
}
.hx-ai-badge::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #0a0e12; opacity: .55; }
.sleep-now, .cv-dist { opacity: .95; }
.sleep-now b { color: var(--hx-dash-cyan, #4ef5ff); }

/* ── HELIX AI 실시간 분석 모니터 (최상단) ───────────────────────── */
.hxai-monitor {
  position: relative; margin: 0 0 10px; padding: 0;
  background:
    linear-gradient(180deg, rgba(123, 92, 255, 0.10), rgba(30, 240, 208, 0.03)),
    #0b0f14;
  border: 1px solid rgba(123, 92, 255, 0.30);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 10px 34px -18px rgba(123, 92, 255, 0.5);
}
.hxai-monitor::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .6;
}
.hxai-inner { position: relative; z-index: 1; }
.hxai-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hxai-brand {
  font-weight: 800; font-size: 14px; letter-spacing: -0.2px; color: #eef2f7;
  display: inline-flex; align-items: center; gap: 8px;
}
.hxai-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #1ef0d0;
}
.hxai-live i { width: 7px; height: 7px; border-radius: 50%; background: #1ef0d0; box-shadow: 0 0 8px #1ef0d0; animation: hxai-pulse 1.6s infinite; }
@keyframes hxai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.hxai-conn { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 10px; background: rgba(154,163,178,0.14); color: #9aa3b2; white-space: nowrap; }
.hxai-conn.conn-live { background: rgba(45,212,191,0.18); color: #2dd4bf; }
.hxai-conn.conn-near { background: rgba(78,245,255,0.14); color: #4ef5ff; }
.hxai-conn.conn-warn { background: rgba(255,84,112,0.16); color: #ff8098; }
.hxai-conn.conn-wait { background: rgba(240,180,41,0.16); color: #f0b429; }
.hxai-lang { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: #cdd5e0; cursor: pointer; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 8px; margin-left: 8px; letter-spacing: .04em; }
.hxai-lang:hover { background: rgba(255,255,255,0.1); }
.hxai-crit-actions { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.hxai-guardian { background: linear-gradient(90deg,#ff5470,#ff8a3d); color: #10060a; font-weight: 800; font-size: 12px; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.hxai-guardian:hover { filter: brightness(1.1); }
.hxai-crit-note { font-size: 11px; color: #ff8098; font-weight: 600; }
.hxai-audio { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: #cdd5e0; cursor: pointer; font-size: 13px; padding: 3px 8px; border-radius: 8px; margin-left: 8px; }
.hxai-audio:hover { background: rgba(255,255,255,0.1); }
.hxai-audio.on { background: rgba(255, 84, 112, 0.2); border-color: #ff5470; animation: hxai-pulse 1.4s infinite; }
.hxai-collapse { background: none; border: 0; color: #9aa3b2; cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px; }
.hxai-collapse:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.hxai-monitor.collapsed .hxai-body { display: none; }
.hxai-monitor.collapsed .hxai-collapse { transform: rotate(-90deg); }

.hxai-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; }
.hxai-col { padding: 12px 14px; }
.hxai-col-analysis { border-right: 1px solid rgba(255, 255, 255, 0.06); }

.hxai-hl-row { display: flex; align-items: center; gap: 9px; }
.hxai-dot { width: 9px; height: 9px; border-radius: 50%; background: #2dd4bf; flex: 0 0 auto; }
.lv-warn .hxai-dot { background: #f0b429; box-shadow: 0 0 10px rgba(240, 180, 41, .7); }
.lv-crit .hxai-dot { background: #ff5470; box-shadow: 0 0 12px rgba(255, 84, 112, .8); animation: hxai-pulse 1s infinite; }
.hxai-headline { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; color: #f4f7fb; }
.hxai-lv { margin-left: auto; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.hxai-lv-ok { background: rgba(45, 212, 191, 0.16); color: #2dd4bf; }
.hxai-lv-warn { background: rgba(240, 180, 41, 0.18); color: #f0b429; }
.hxai-lv-crit { background: rgba(255, 84, 112, 0.20); color: #ff5470; }
.hxai-reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.hxai-reasons-lbl { font-size: 10px; font-weight: 700; color: #7b5cff; letter-spacing: .04em; margin-right: 2px; }
.hxai-reason {
  font-size: 11px; font-weight: 600; color: #cdd5e0;
  background: rgba(123, 92, 255, 0.12); border: 1px solid rgba(123, 92, 255, 0.28);
  padding: 3px 9px; border-radius: 999px;
}
.hxai-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 11px; }
.hxai-stat { font-size: 10px; color: #8a93a3; display: inline-flex; align-items: baseline; gap: 4px; }
.hxai-stat b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 17px; font-weight: 700; color: #eef2f7; }

/* ── 융합 코어 상태 배지(자율진화·Vector DB·실센서 E2E) ── */
.hxai-fusion { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 13px; margin-top: 12px; padding: 9px 11px;
  border-radius: 11px; border: 1px solid rgba(124, 92, 255, 0.28);
  background: linear-gradient(100deg, rgba(124, 92, 255, 0.12), rgba(30, 240, 208, 0.06)); }
.hxf-title { font-size: 10px; font-weight: 800; letter-spacing: .03em; color: #c3b6ff;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; }
.hxf-title::before { content: "◆"; color: #7c5cff; font-size: 9px; }
.hxf-chip { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; }
.hxf-chip.live { color: #05231d; background: #1ef0d0; box-shadow: 0 0 10px rgba(30, 240, 208, 0.55); }
.hxf-chip.demo { color: #9aa3b2; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.hxf-m { font-size: 10px; color: #9aa3b2; display: inline-flex; align-items: baseline; gap: 4px; }
.hxf-m b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; font-weight: 700; color: #eef2f7; }

.hxai-learn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, 0.08); }
.hxai-learn-lbl { font-size: 10px; font-weight: 800; color: #1ef0d0; letter-spacing: .04em; }
.hxai-learn-v { font-size: 11px; color: #9aa3b2; font-family: ui-monospace, Menlo, monospace; }
.hxai-fb { margin-left: 2px; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; }
.hxai-fb.ok { background: rgba(45, 212, 191, 0.14); color: #2dd4bf; border-color: rgba(45, 212, 191, 0.3); }
.hxai-fb.no { background: rgba(255, 84, 112, 0.12); color: #ff8098; border-color: rgba(255, 84, 112, 0.3); }
.hxai-fb:hover { filter: brightness(1.2); }
.hxai-learn .hxai-fb.ok { margin-left: auto; }

.hxai-chat-head { font-size: 12px; font-weight: 800; color: #eef2f7; display: flex; align-items: center; gap: 6px; }
.hxai-chat-head small { font-weight: 500; color: #7c8697; font-size: 10px; }
.hxai-tts { margin-left: auto; background: none; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; cursor: pointer; font-size: 13px; padding: 2px 7px; }
.hxai-tts.on { background: rgba(30, 240, 208, 0.16); border-color: #1ef0d0; }
.hxai-chat-log { margin: 8px 0; max-height: 116px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.hxai-msg { font-size: 12px; line-height: 1.45; }
.hxai-msg span { display: inline-block; padding: 6px 10px; border-radius: 12px; max-width: 92%; }
.hxai-msg.ai span { background: rgba(255, 255, 255, 0.05); color: #d6dde7; border: 1px solid rgba(255,255,255,0.06); }
.hxai-msg.user { text-align: right; }
.hxai-msg.user span { background: linear-gradient(90deg, #7b5cff, #6a4bff); color: #fff; }
.hxai-msg.pending span { opacity: .6; font-style: italic; }
.hxai-chat-input-row { display: flex; gap: 6px; align-items: center; }
.hxai-mic { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 9px; cursor: pointer; font-size: 14px; padding: 6px 9px; }
.hxai-mic.on { background: rgba(255, 84, 112, 0.2); border-color: #ff5470; animation: hxai-pulse 1s infinite; }
.hxai-chat-input-row input {
  flex: 1; min-width: 0; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12);
  color: #eef2f7; border-radius: 9px; padding: 8px 11px; font-size: 12px; outline: none;
}
.hxai-chat-input-row input:focus { border-color: #7b5cff; }
.hxai-send { background: linear-gradient(90deg, #7b5cff, #1ef0d0); color: #0a0e12; font-weight: 800; font-size: 12px; border: 0; border-radius: 9px; padding: 8px 13px; cursor: pointer; }
.hxai-toast {
  position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 14px);
  background: #10151c; border: 1px solid rgba(123, 92, 255, 0.4); color: #eef2f7;
  font-size: 11px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: all .3s; z-index: 5;
}
.hxai-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 720px) {
  .hxai-body { grid-template-columns: 1fr; }
  .hxai-col-analysis { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
}
/* 빈 온보딩 자리에 AI 모니터 마운트 시 래퍼/액션 */
.empty-ai-wrap { width: 100%; padding: 0; box-sizing: border-box; }
.empty-ai-wrap .hxai-monitor { margin: 0; width: 100%; }
/* AI 모니터가 든 빈 셸(#empty-shell)을 표준 16px 인셋으로 → 아래 카드(bento 16px)와 좌/우 폭 정렬 */
.hxai-flush { margin-left: 0 !important; margin-right: 0 !important; padding-left: 16px !important; padding-right: 16px !important; max-width: none !important; width: auto !important; align-items: stretch !important; }
.empty-actions-mini { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.empty-actions-note { font-size: 11px; color: #8a93a3; }
.empty-actions-mini .btn-ghost.sm { font-size: 12px; padding: 5px 12px; }
.mode-badge.wait {
  background: rgba(78, 245, 255, 0.12); color: var(--hx-dash-cyan);
  border: 1px solid rgba(78, 245, 255, 0.34);
}
.mode-badge.wait::before { animation: hx-badge-blink 1.5s ease-in-out infinite; }
.mode-badge.live {
  background: rgba(30, 240, 208, 0.18); color: var(--hx-dash-teal);
  border: 1px solid rgba(30, 240, 208, 0.5);
  box-shadow: 0 0 0 1px rgba(30, 240, 208, 0.08), 0 4px 18px rgba(30, 240, 208, 0.2);
}
.mode-badge.live::before {
  background: var(--hx-dash-teal);
  animation: hx-badge-pulse 1.6s ease-out infinite;
}
@keyframes hx-badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(30, 240, 208, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(30, 240, 208, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 240, 208, 0); }
}
@keyframes hx-badge-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .mode-badge.live::before, .mode-badge.wait::before { animation: none; }
}
/* 상단 상태 그룹 정리: 연결 상태는 mode-badge 하나로 통일 (svc-status-chip 중복 제거) */
.top-utils--careview .svc-status-chip { display: none; }
.top-utils--careview { gap: 8px; }
.top-utils--careview .mode-badge {
  margin-left: 6px; position: relative;
}
.top-utils--careview .mode-badge::after {
  content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 15px; background: var(--hx-dash-border); border-radius: 1px;
}
.clock {
  font-variant-numeric: tabular-nums; font-weight: 800;
  color: var(--hx-dash-cyan); font-size: 13px;
}
.tick-meta { font-size: 11px; color: var(--hx-dash-dim); font-weight: 700; }

/* Audience segmented control */
.audience-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px 0;
  flex-wrap: wrap;
}
.audience-switch {
  display: inline-flex; padding: 5px; gap: 4px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hx-dash-border-hi);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.aud-btn {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 16px; border-radius: 14px; min-width: 88px;
  font-size: 13px; font-weight: 800; color: var(--hx-dash-muted);
  transition: 0.18s; text-align: left; line-height: 1.15;
}
.aud-btn strong { font-size: 13.5px; font-weight: 900; }
.aud-btn em {
  font-style: normal; font-size: 10.5px; font-weight: 650;
  color: var(--hx-dash-dim); opacity: 0.9;
}
.aud-btn:hover { color: var(--hx-dash-text); background: rgba(255,255,255,0.04); }
.aud-btn:hover em { color: var(--hx-dash-muted); }
.aud-btn.on {
  color: #121214;
  box-shadow: 0 6px 18px rgba(216, 255, 60, 0.22);
  transform: translateY(-1px);          /* ④ 3모드 공통 활성 리프트(한 시스템 느낌) */
}
.aud-btn.on em { color: rgba(18,18,20,0.72); }
@media (prefers-reduced-motion: reduce) { .aud-btn.on { transform: none; } }
.aud-btn.aud-personal.on {
  background: linear-gradient(135deg, var(--hx-dash-lime), #b8e62a);
}
.aud-btn.aud-family.on {
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.28);
}
.aud-btn.aud-facility.on {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.28);
}
.audience-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.audience-meta .tagline { font-size: 12.5px; font-weight: 700; color: var(--hx-dash-muted); }
.audience-meta .subject { font-size: 13px; font-weight: 800; color: var(--hx-dash-text); }

.mode-scope-banner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 10px 22px 0; padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--hx-dash-border-hi);
  background: rgba(255,255,255,0.04);
}
.mode-scope-banner[hidden] { display: none !important; }
.mode-scope-banner strong {
  font-size: 13px; font-weight: 900; letter-spacing: -0.01em;
  padding: 3px 10px; border-radius: 999px;
}
.mode-scope-banner span { font-size: 12.5px; font-weight: 650; color: var(--hx-dash-muted); }
.mode-scope-banner[data-mode="personal"] strong {
  background: rgba(216,255,60,0.18); color: #d8ff3c;
}
.mode-scope-banner[data-mode="family"] strong {
  background: rgba(56,189,248,0.18); color: #7dd3fc;
}
.mode-scope-banner[data-mode="facility"] strong {
  background: rgba(245,158,11,0.2); color: #fbbf24;
}

/* 모드 화면 완전 분리: 요양원 = 스테이션만 (개인 히어로·벤토·환경·사이드 숨김) */
body[data-audience="facility"] #dash-view > .layout {
  grid-template-columns: minmax(0, 1fr);
}
body[data-audience="facility"] #dash-view > .layout > div:first-child > :not(#facility-panel),
body[data-audience="facility"] #dash-view > .layout > .side-col {
  display: none !important;
}
body[data-audience="facility"] #family-panel { display: none !important; }

/* 가족용: 요양원 스테이션 숨김 · 가족 패널 강조 */
body[data-audience="family"] #facility-panel { display: none !important; }
body[data-audience="family"] #family-panel {
  border-color: rgba(56,189,248,0.35);
  box-shadow: inset 3px 0 0 rgba(56,189,248,0.7);
}
body[data-audience="family"] #family-panel > h3::before {
  content: "가족용 · ";
  color: #7dd3fc;
}

/* 개인용: 가족·요양원 패널 숨김 */
body[data-audience="personal"] #family-panel,
body[data-audience="personal"] #facility-panel { display: none !important; }
body[data-audience="personal"] .mode-scope-banner[data-mode="personal"] {
  border-color: rgba(216,255,60,0.25);
}

.chip-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 10px 22px 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}
.chip-strip::-webkit-scrollbar { height: 5px; }
.chip-strip::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 999px;
}
.chip-strip.dragging,
.hx-hscroll.dragging,
.fac-ward-mini.dragging {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}
.chip-strip.dragging .chip-btn,
.hx-hscroll.dragging .chip-btn,
.hx-hscroll.dragging .area-ward,
.hx-hscroll.dragging .fac-filter,
.fac-ward-mini.dragging .area-ward,
.fac-ward-mini.dragging .fac-filter {
  pointer-events: none;
}
.chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0;
  flex: 0 0 auto;
  min-width: 0;
}
.chip-row[hidden] {
  display: none !important;
}
.chip-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 7px 12px; border-radius: var(--hx-dash-pill);
  font-size: 11.5px; font-weight: 750;
  color: var(--hx-dash-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hx-dash-border);
  transition: 0.15s;
}
.chip-btn:hover { border-color: var(--hx-dash-border-hi); color: var(--hx-dash-text); }
.chip-btn.on {
  background: rgba(30, 240, 208, 0.14);
  color: var(--hx-dash-teal);
  border-color: rgba(30, 240, 208, 0.4);
}

/* Layout */
.page {
  padding: 16px 22px 40px;
  max-width: 1440px; margin: 0 auto;
}
.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

.bento-card {
  background: var(--hx-dash-card);
  border: 1px solid var(--hx-dash-border);
  border-radius: var(--hx-dash-r-card);
  box-shadow: var(--hx-dash-shadow-card);
  padding: 16px 16px 14px;
  position: relative; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  text-align: left; width: 100%;
  color: inherit;
}
.bento-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}
.bento-card.hover, .bento-card:hover {
  border-color: var(--hx-dash-border-hi);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
@media (prefers-reduced-motion: reduce) {
  .bento-card { transition: border-color 0.2s; }
  .bento-card.hover, .bento-card:hover { transform: none; }
}
.bento-card.focused {
  border-color: rgba(216, 255, 60, 0.45);
  box-shadow: 0 0 0 1px rgba(216, 255, 60, 0.2), var(--hx-dash-shadow-card);
}
.bento-card.span2 { grid-column: span 2; }
.bento-card.state-crit { border-color: rgba(255, 45, 106, 0.45); }
.bento-card.state-warn { border-color: rgba(255, 176, 26, 0.35); }

.card-h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.card-h .t { font-size: 12px; font-weight: 750; color: var(--hx-dash-muted); letter-spacing: 0.2px; }
.card-h .r { margin-left: auto; }

.metric {
  font-size: 34px; font-weight: 850; letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.metric .u { font-size: 13px; color: var(--hx-dash-dim); font-weight: 700; margin-left: 4px; }
.sub2 { margin-top: 6px; font-size: 11px; color: var(--hx-dash-dim); font-weight: 650; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; padding: 3px 10px;
  border-radius: var(--hx-dash-pill);
}
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok {
  background: rgba(30, 240, 208, 0.18); color: var(--hx-dash-teal);
  border: 1px solid rgba(30, 240, 208, 0.35);
}
.pill.warn {
  background: rgba(255, 176, 26, 0.16); color: var(--hx-dash-amber);
  border: 1px solid rgba(255, 176, 26, 0.4);
}
.pill.crit {
  background: rgba(255, 45, 106, 0.22); color: var(--hx-dash-coral);
  border: 1px solid rgba(255, 45, 106, 0.6);
  animation: hx-crit-pulse 1.4s ease-out infinite;
}
.pill.crit .d { box-shadow: 0 0 6px rgba(255, 45, 106, 0.9); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
/* ③ 위험 pill: opacity 페이드(글자 사라짐) → 글로우 링 맥동(알람·가독성 유지) */
@keyframes hx-crit-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 45, 106, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(255, 45, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 45, 106, 0); }
}
@media (prefers-reduced-motion: reduce) { .pill.crit { animation: none; } }

.bar-track {
  height: 7px; margin-top: 10px;
  background: rgba(255, 255, 255, 0.06); border-radius: 6px; overflow: hidden;
}
.bar-fill {
  height: 100%; width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--hx-dash-teal), var(--hx-dash-lime));
  transition: width 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.spark { width: 100%; height: 40px; margin-top: 8px; display: block; }
.spark path {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: d 0.35s;
}

.gauge-wrap { display: flex; align-items: center; gap: 14px; }
.gauge {
  width: 108px; height: 108px; flex: 0 0 108px; position: relative;
}
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge [data-gauge-track] { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 8; }
.gauge [data-gauge-arc] {
  fill: none; stroke: var(--hx-dash-teal); stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.2, 0.7, 0.3, 1), stroke 0.3s;
}
.gauge .g-center {
  position: absolute; inset: 0; display: grid; place-items: center;
  transform: none; text-align: center;
}
.gauge [data-gauge-val] {
  font-size: 22px; font-weight: 850; font-variant-numeric: tabular-nums;
  transition: transform 0.25s;
}
.gauge [data-gauge-val].flash { transform: scale(1.08); color: var(--hx-dash-lime); }
.gauge .g-unit { font-size: 10px; color: var(--hx-dash-dim); font-weight: 700; }

.presence-ring {
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.1);
  display: grid; place-items: center;
  transition: 0.3s;
  flex: none; aspect-ratio: 1 / 1;   /* flex 수축으로 타원 찌그러짐 방지(정원 유지) */
}
.presence-ring.on {
  border-color: var(--hx-dash-teal);
  box-shadow: 0 0 22px rgba(30, 240, 208, 0.35);
}
.presence-ring .dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--hx-dash-dim);
}
.presence-ring.on .dot {
  background: var(--hx-dash-teal);
  box-shadow: 0 0 12px var(--hx-dash-teal);
  animation: pulse 2s infinite;
}
.fall-pulse {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  display: grid; place-items: center; font-size: 22px;
  border: 2px solid var(--hx-dash-border);
}
.fall-pulse.on {
  background: rgba(255, 45, 106, 0.18);
  border-color: var(--hx-dash-coral);
  animation: pulse 1s infinite;
  box-shadow: var(--hx-dash-glow-coral);
}

.side-col { display: flex; flex-direction: column; gap: 14px; }
.panel {
  background: var(--hx-dash-panel);
  border: 1px solid var(--hx-dash-border);
  border-radius: var(--hx-dash-r);
  box-shadow: var(--hx-dash-shadow);
  padding: 16px;
}
.panel h3 {
  font-size: 12.5px; font-weight: 800; color: var(--hx-dash-muted);
  margin-bottom: 12px; letter-spacing: 0.3px;
}
.overall-box {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.overall-box .big { font-size: 28px; font-weight: 900; }
.overall-box .score { font-size: 26px; font-weight: 900; }
.overall-box .score span { font-size: 12px; color: var(--hx-dash-dim); font-weight: 700; }

.alert-feed { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.alert-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hx-dash-border);
}
.alert-item b { display: block; font-size: 12px; font-weight: 800; }
.alert-item small { display: block; font-size: 10.5px; color: var(--hx-dash-dim); margin-top: 2px; }
.alert-item.crit { border-color: rgba(255, 45, 106, 0.35); }

/* Family */
.person-chip {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border-radius: 14px; text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hx-dash-border);
  transition: 0.15s;
}
.person-chip:hover { border-color: var(--hx-dash-border-hi); }
.person-chip.on {
  border-color: rgba(216, 255, 60, 0.4);
  background: rgba(216, 255, 60, 0.06);
}
.person-chip.needs { box-shadow: inset 3px 0 0 var(--hx-dash-coral); }
.pc-name { font-weight: 800; font-size: 13px; grid-column: 1; }
.pc-meta { font-size: 11px; color: var(--hx-dash-dim); grid-column: 1; }
.person-chip .pill { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.attention-banner {
  padding: 10px 12px; border-radius: 12px; margin-bottom: 12px;
  background: rgba(255, 111, 20, 0.1);
  border: 1px solid rgba(255, 111, 20, 0.3);
  font-size: 12.5px; font-weight: 750; color: var(--hx-dash-orange);
}

/* Facility grid — CareView 2.0 bento / mosaic DNA */
.facility-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 14px;
}
.stat-mini {
  position: relative; overflow: hidden;
  background: var(--hx-dash-card);
  border: 1px solid var(--hx-dash-border);
  border-radius: var(--hx-dash-r-sm);
  box-shadow: var(--hx-dash-shadow-card);
  padding: 12px 10px; text-align: center;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.stat-mini::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}
.stat-mini b {
  display: block; font-size: 20px; font-weight: 900;
  letter-spacing: -0.4px; font-variant-numeric: tabular-nums; line-height: 1.15;
  color: var(--hx-dash-text);
}
.stat-mini span {
  display: block; margin-top: 4px;
  font-size: 10.5px; color: var(--hx-dash-muted); font-weight: 750; letter-spacing: 0.2px;
}
.stat-mini[data-analyze="presence"] b { color: var(--cv-presence); }
.stat-mini[data-analyze="fall"] b { color: var(--cv-fall); }
.stat-mini[data-analyze="pobc"] b { color: var(--hx-dash-amber); }

.facility-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}
.bed-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 0;
  text-align: left; width: 100%; color: inherit;
  padding: 14px 14px 12px;
  border-radius: var(--hx-dash-r-card);
  background: var(--hx-dash-card);
  border: 1px solid var(--hx-dash-border);
  box-shadow: var(--hx-dash-shadow-card);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.bed-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  pointer-events: none;
}
.bed-card:hover {
  border-color: var(--hx-dash-border-hi);
  transform: translateY(-1px);
}
.bed-card.on,
.bed-card.focused {
  border-color: rgba(216, 255, 60, 0.45);
  box-shadow: 0 0 0 1px rgba(216, 255, 60, 0.2), var(--hx-dash-shadow-card);
}
.bed-card.state-warn { border-color: rgba(255, 176, 26, 0.35); }
.bed-card.state-crit {
  border-color: rgba(255, 45, 106, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 45, 106, 0.12), var(--hx-dash-shadow-card);
}
.bed-top {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.bed-top strong {
  font-size: 12px; font-weight: 800; color: var(--hx-dash-muted);
  letter-spacing: 0.2px;
}
.bed-top .pill { flex-shrink: 0; }
.bed-name {
  font-weight: 850; margin: 4px 0 8px; font-size: 15px;
  letter-spacing: -0.2px; color: var(--hx-dash-text); line-height: 1.25;
}
.bed-flags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.flag {
  font-style: normal; font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: var(--hx-dash-pill);
  border: 1px solid transparent;
}
.flag.ok {
  background: rgba(30, 240, 208, 0.15); color: var(--hx-dash-teal);
  border-color: rgba(30, 240, 208, 0.28);
}
.flag.warn {
  background: rgba(255, 176, 26, 0.14); color: var(--hx-dash-amber);
  border-color: rgba(255, 176, 26, 0.32);
}
.flag.crit {
  background: rgba(255, 45, 106, 0.18); color: var(--hx-dash-coral);
  border-color: rgba(255, 45, 106, 0.4);
}
.bed-metrics {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px; font-weight: 700; color: var(--hx-dash-dim);
}
.bed-metrics span { display: inline-flex; align-items: baseline; gap: 4px; }
.bed-metrics b {
  color: var(--hx-dash-text); font-weight: 850;
  font-variant-numeric: tabular-nums; font-size: 12.5px;
}
.bed-metrics [data-m="hr"] b { color: var(--cv-hr); }
.bed-metrics [data-m="br"] b { color: var(--cv-br); }
.bed-metrics [data-m="pobc"] b { color: var(--cv-pobc); }

/* 실시간 상태 칩 — 재실/수면/부재/오프라인 · 낙상. 카드 수와 무관하게 항상 표시 */
.bed-metrics .m-chip {
  font-weight: 850; letter-spacing: -0.1px;
  padding: 2px 7px; border-radius: var(--hx-dash-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.bed-metrics .m-chip.ok {
  background: rgba(30, 240, 208, 0.15); color: var(--hx-dash-teal);
  border-color: rgba(30, 240, 208, 0.28);
}
.bed-metrics .m-chip.sleep {
  background: rgba(96, 165, 250, 0.16); color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.32);
}
.bed-metrics .m-chip.warn {
  background: rgba(255, 176, 26, 0.14); color: var(--hx-dash-amber);
  border-color: rgba(255, 176, 26, 0.32);
}
.bed-metrics .m-chip.off {
  background: rgba(148, 163, 184, 0.16); color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.3);
}
.bed-metrics .m-chip.crit {
  background: rgba(255, 45, 106, 0.2); color: #ff8aa8;
  border-color: rgba(255, 45, 106, 0.45);
  animation: cv-fall-chip 1.4s ease-in-out infinite;
}
@keyframes cv-fall-chip {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .bed-metrics .m-chip.crit { animation: none; }
}
.bed-metrics [data-m="pobc"].anomaly b { color: #ff8aa8; }
.flag.sleep {
  background: rgba(96, 165, 250, 0.16); color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.32);
}

/* Mode density tweaks */
body[data-audience="personal"] #card-stress { border-color: rgba(216, 255, 60, 0.18); }
/* POBC uses Stress-ref charcoal card — no lime border */
/* Facility must keep mosaic 12-col — do NOT flatten to 4-col (breaks span 3/6 ratios) */
body[data-audience="facility"] .bento:not(.mosaic) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-audience="facility"] .bento.mosaic {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  align-items: stretch;
}
body[data-audience="facility"] #card-presence,
body[data-audience="facility"] #card-fall {
  box-shadow: 0 0 0 1px rgba(255, 45, 106, 0.08), var(--hx-dash-shadow-card);
}
body[data-audience="facility"] #facility-panel {
  border-radius: var(--hx-dash-r);
}
body[data-audience="facility"] #facility-panel > h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  font-size: 13px; font-weight: 850; color: var(--hx-dash-text);
  margin-bottom: 14px; letter-spacing: 0.15px;
}
body[data-audience="facility"] #facility-panel > h3 small {
  font-size: 11px; font-weight: 650; color: var(--hx-dash-dim);
}
body[data-audience="facility"] #ward-bar .chip-btn {
  min-height: 36px; padding: 7px 13px;
}

.detail-drawer {
  position: fixed; right: 18px; bottom: 18px; width: min(340px, calc(100vw - 32px));
  background: var(--hx-dash-panel);
  border: 1px solid var(--hx-dash-border-hi);
  border-radius: 20px; padding: 16px;
  box-shadow: var(--hx-dash-shadow); z-index: 50;
}
.detail-drawer[hidden] { display: none !important; }
.detail-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.detail-h button {
  margin-left: auto; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); font-weight: 800;
}
.stub-view {
  padding: 64px 24px; text-align: center;
  background: var(--hx-dash-card);
  border: 1px dashed var(--hx-dash-border-hi);
  border-radius: var(--hx-dash-r);
}
.stub-view h2 { font-size: 22px; margin-bottom: 8px; }
.stub-view p { color: var(--hx-dash-muted); font-size: 13px; }

.boot-error {
  margin: 16px 22px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 45, 106, 0.12); color: var(--hx-dash-coral);
  border: 1px solid rgba(255, 45, 106, 0.35); font-weight: 700;
}
.foot-note {
  margin-top: 18px; font-size: 11px; color: var(--hx-dash-dim); font-weight: 650;
  line-height: 1.5;
}
.wellness-tip {
  margin-top: 8px; padding: 10px 12px; border-radius: 12px;
  background: rgba(216, 255, 60, 0.06);
  border: 1px solid rgba(216, 255, 60, 0.18);
  font-size: 12px; color: var(--hx-dash-muted); font-weight: 650;
}


/* ═══ CareView 2.0 enhancements: devices, views, tablet-first ═══ */
:root {
  --tap: 44px;
  --page-pad: 22px;
}
.nav-burger {
  display: none; width: var(--tap); height: var(--tap);
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--hx-dash-border);
}
.nav-burger span { display: block; width: 18px; height: 2px; background: var(--hx-dash-text); border-radius: 2px; }
.pill-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: min(720px, 52vw); }
.pill-nav::-webkit-scrollbar { display: none; }
.pill-link { flex: 0 0 auto; min-height: 36px; display: inline-flex; align-items: center; white-space: nowrap; }
.dev-online-badge {
  font-size: 11px; font-weight: 800; color: var(--hx-dash-teal);
  padding: 5px 10px; border-radius: var(--hx-dash-pill);
  background: rgba(30, 240, 208, 0.1); border: 1px solid rgba(30, 240, 208, 0.28);
}
.mode-badge.tiny { font-size: 9.5px; padding: 3px 8px; }
.nav-drawer {
  position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 60;
  background: #141418; border-right: 1px solid var(--hx-dash-border);
  transform: translateX(-105%); transition: transform 0.22s ease; padding: 16px; display: none;
}
.nav-drawer.open { transform: translateX(0); }
.nav-scrim { display: none; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.45); }
body.nav-open .nav-scrim { display: block; }
body.nav-open .nav-drawer { display: block; }
.drawer-h { display: flex; align-items: center; margin-bottom: 14px; }
.drawer-h button { margin-left: auto; width: var(--tap); height: var(--tap); border-radius: 12px; background: rgba(255,255,255,0.06); font-size: 20px; }
.drawer-nav { display: flex; flex-direction: column; gap: 6px; }
.drawer-nav .pill-link { width: 100%; min-height: var(--tap); border-radius: 14px; background: rgba(255,255,255,0.03); justify-content: flex-start; }
.aud-btn { min-height: 40px; white-space: nowrap; flex: 0 0 auto; }
.audience-switch { overflow-x: auto; max-width: 100%; }
.chip-btn { min-height: 40px; padding: 8px 14px; }

.device-strip { display: flex; align-items: center; gap: 10px; padding: 10px 22px 0; flex-wrap: wrap; }
.dev-strip-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; flex-wrap: wrap; }
.dev-strip-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: 4px; }
.dev-strip-title strong { font-size: 13px; font-weight: 900; letter-spacing: -0.02em; color: var(--hx-dash-text); }
.dev-strip-sub {
  font-style: normal; font-size: 10px; font-weight: 650; color: var(--hx-dash-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(420px, 52vw);
}
.dev-count { color: var(--hx-dash-teal); }
.dev-strip-track {
  display: flex; align-items: center; gap: 4px;
  flex: 1 1 auto; min-width: 0;
}
body[data-audience="personal"] .dev-strip-track,
body[data-audience="family"] .dev-strip-track,
body[data-audience="facility"] .dev-strip-track {
  order: 3;
  flex: 1 0 100%;
  width: 100%;
  max-width: 100%;
}
.dev-strip-scroll {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  flex: 1 1 auto; width: 100%; min-width: 0; max-width: 100%;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}
.dev-strip-scroll::-webkit-scrollbar { height: 5px; }
.dev-strip-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 999px;
}
.dev-strip-scroll.dragging {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}
.dev-strip-scroll.dragging .dev-chip { pointer-events: none; }
.dev-strip-chev {
  flex: 0 0 auto;
  width: 28px; height: 36px; padding: 0;
  border-radius: 10px;
  border: 1px solid var(--hx-dash-border);
  background: rgba(255,255,255,0.05);
  color: var(--hx-dash-text);
  font-size: 18px; font-weight: 800; line-height: 1;
  cursor: pointer;
}
.dev-strip-chev:hover:not(:disabled) {
  border-color: rgba(216,255,60,0.4); color: var(--hx-dash-lime);
}
.dev-strip-chev:disabled {
  opacity: 0.28; cursor: default;
}
.dev-strip-chev[hidden] { display: none !important; }
.dev-chip {
  flex: 0 0 auto; min-height: var(--tap); display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--hx-dash-border); text-align: left;
}
.dev-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hx-dash-dim); }
.dev-chip.online .dot { background: var(--hx-dash-teal); box-shadow: 0 0 8px var(--hx-dash-teal); }
.dev-chip.connecting .dot { background: var(--hx-dash-amber); animation: pulse 1s infinite; }
.dev-chip.error .dot { background: var(--hx-dash-coral); }
.dev-chip.on { border-color: rgba(216,255,60,0.45); background: rgba(216,255,60,0.06); }
.dev-chip .dn { font-weight: 800; font-size: 12px; }
.dev-chip .ds { font-size: 10px; color: var(--hx-dash-dim); font-weight: 700; }
.dev-strip-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; position: relative; }
.dev-menu { position: relative; }
.dev-menu-btn { min-width: 72px; font-weight: 800; }
.dev-menu.open .dev-menu-btn,
.dev-menu-btn[aria-expanded="true"] {
  border-color: rgba(216,255,60,0.45); color: var(--hx-dash-lime);
}
.dev-menu-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 80;
  min-width: 220px; padding: 8px; border-radius: 14px;
  background: linear-gradient(165deg, #1c1d21, #121318);
  border: 1px solid var(--hx-dash-border-hi);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  display: grid; gap: 2px;
}
.dev-menu-panel[hidden] { display: none !important; }
.dev-menu-panel button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 750;
  color: var(--hx-dash-text); background: transparent; border: 0;
}
.dev-menu-panel button:hover { background: rgba(255,255,255,0.06); }
.dev-menu-note {
  margin: 6px 4px 2px; padding: 8px 10px; border-radius: 10px;
  font-size: 10.5px; font-weight: 650; line-height: 1.45; color: var(--hx-dash-dim);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
}

.hero-snap { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 14px; margin-bottom: 14px; }
.hero-snap-main, .hero-snap-side {
  background: var(--hx-dash-card); border: 1px solid var(--hx-dash-border);
  border-radius: var(--hx-dash-r); box-shadow: var(--hx-dash-shadow-card); padding: 18px;
}
.hero-kicker { font-size: 11px; font-weight: 800; color: var(--hx-dash-dim); margin-bottom: 6px; }
.hero-title { font-size: 24px; font-weight: 900; letter-spacing: -0.4px; margin-bottom: 6px; }
.hero-sub { font-size: 12.5px; color: var(--hx-dash-muted); font-weight: 650; margin-bottom: 14px; }
.hero-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.hero-tile { background: rgba(0,0,0,0.28); border-radius: 14px; padding: 10px; border: 1px solid var(--hx-dash-border); }
.ht-label { display: block; font-size: 10px; color: var(--hx-dash-dim); font-weight: 750; margin-bottom: 4px; }
.hero-tile strong { font-size: 16px; font-weight: 900; }
.semi-gauge { position: relative; height: 110px; }
.semi-gauge svg { width: 100%; height: 100%; }
.sg-track { stroke: rgba(255,255,255,0.08); }
.sg-arc { stroke: var(--hx-dash-orange); transition: stroke-dashoffset 0.5s; }
.sg-label { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; }
.sg-label b { display: block; font-size: 26px; font-weight: 900; }
.sg-label small { color: var(--hx-dash-dim); font-weight: 700; }
.vital-row { display: flex; align-items: center; gap: 14px; }
.gauge-meta { flex: 1; min-width: 0; }
.card-drill { margin-top: 10px; font-size: 11px; font-weight: 800; color: var(--hx-dash-lime); }
.panel-h-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-h-row h3 { margin: 0; }
.link-pill {
  margin-left: auto; min-height: 36px; padding: 6px 12px; border-radius: var(--hx-dash-pill);
  font-size: 11px; font-weight: 800; background: rgba(255,255,255,0.06); color: var(--hx-dash-lime);
}
.btn-cta, .btn-ghost {
  min-height: var(--tap); padding: 10px 16px; border-radius: var(--hx-dash-pill);
  font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.btn-cta { background: linear-gradient(135deg, var(--hx-dash-lime), #b8e62a); color: #121214; box-shadow: 0 6px 16px rgba(216,255,60,0.2); }
.btn-cta.sm, .btn-ghost.sm { min-height: 40px; padding: 8px 12px; font-size: 11.5px; }
.btn-ghost { background: rgba(255,255,255,0.05); border: 1px solid var(--hx-dash-border); color: var(--hx-dash-text); }
.btn-ghost.danger { color: var(--hx-dash-coral); border-color: rgba(255,45,106,0.35); }

.view-head { margin-bottom: 14px; }
.view-head.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.view-head h2 { font-size: 22px; font-weight: 900; }
.view-sub { margin-top: 4px; font-size: 12.5px; color: var(--hx-dash-muted); font-weight: 650; }
.view-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tool-select, .week-pill {
  min-height: 40px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--hx-dash-border); color: var(--hx-dash-text); font-weight: 700; font-size: 12px;
}
.metric-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.spark.tall { height: 80px; }
.spark path { stroke: var(--hx-dash-teal); }

.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stats-row {
  display: grid;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}
.stats-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats-row--priority { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
.stats-row--vital { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.stats-row--care { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.stats-row--full { grid-template-columns: minmax(0, 1fr); }

/* 카테고리 묶음 — 대시보드 우선순위 그룹 */
.stats-cat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,0.022);
  border: 1px solid rgba(255,255,255,0.05);
}
.stats-cat-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 2px -2px;
}
.stats-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hx-dash-teal, #1ef0d0);
  box-shadow: 0 0 10px currentColor;
  align-self: center;
  flex: none;
}
.stats-cat-head[data-cat="crit"] .stats-cat-dot { background: #ff2d6a; }
.stats-cat-head[data-cat="vital"] .stats-cat-dot { background: #1ef0d0; }
.stats-cat-head[data-cat="care"] .stats-cat-dot { background: #a78bfa; }
.stats-cat-head[data-cat="env"] .stats-cat-dot { background: #34d399; }
.stats-cat-head[data-cat="iot"] .stats-cat-dot { background: #fbbf24; }
.stats-cat-head[data-cat="detail"] .stats-cat-dot { background: #3db8ff; }
.stats-cat-head[data-cat="insight"] .stats-cat-dot { background: #b8e62a; }
.stats-cat-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hx-dash-text, #f4f7fb);
}
.stats-cat-sub {
  font-size: 11px;
  color: var(--hx-dash-muted);
}
.stats-overall,
.stats-activity,
.stats-goal,
.stats-history,
.stats-vitals,
.stats-hr,
.stats-br,
.stats-seg,
.stats-audio,
.stats-sleep,
.stats-stress,
.stats-env,
.stats-hr-zones,
.stats-br-detail,
.stats-insight { grid-column: auto; }
.stats-vitals { display: flex; flex-direction: column; gap: 10px; }
.chart-svg { width: 100%; height: 108px; margin-top: 0; display: block; }
.stats-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hx-dash-border);
}
.stats-period-tabs {
  display: grid;
  grid-template-columns: minmax(64px, 0.72fr) minmax(88px, 1.14fr) minmax(88px, 1.14fr);
  gap: 6px;
  padding: 4px;
  border-radius: 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hx-dash-border);
}
.stats-period-tab {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--hx-dash-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.stats-period-tab.is-now {
  font-size: 11.5px;
  font-weight: 750;
  opacity: 0.92;
}
.stats-period-tab.is-primary {
  font-size: 13px;
  letter-spacing: -0.02em;
}
.stats-period-tab.on {
  background: #f2f4f7;
  color: #121214;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.stats-period-tab.is-primary.on {
  background: linear-gradient(180deg, #e8f7f3, #f2f4f7);
  box-shadow: 0 4px 14px rgba(94, 234, 212, 0.18);
}
.stats-toolbar-note { margin: 0; }
.stats-toolbar-note .stats-demo-tag,
.stats-demo-tag {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #9fb0c0;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.1);
}
/* 기간별 세부 측정 모니터 — 평균·최저·최고·추세 + 시계열 출처 */
.stats-monitor {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 4px 6px;
  align-items: end;
  margin: 6px 0 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  min-width: 0;
}
.stats-monitor .sm-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stats-monitor .sm-cell em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--hx-dash-dim, #8a919c);
}
.stats-monitor .sm-cell b {
  font-size: 12.5px;
  font-weight: 850;
  color: #e8eaed;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-monitor .sm-src {
  align-self: center;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  color: #94a3b8;
  background: rgba(148,163,184,0.12);
  border: 1px solid rgba(148,163,184,0.2);
  white-space: nowrap;
}
.stats-monitor .sm-src[data-src="radar-ts"] {
  color: #1ef0d0;
  background: rgba(30,240,208,0.1);
  border-color: rgba(30,240,208,0.28);
}
.stats-vitals .stats-monitor {
  margin: 4px 0 6px;
  padding: 6px 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}
.stats-vitals .stats-monitor .sm-cell:nth-child(3),
.stats-vitals .stats-monitor .sm-cell:nth-child(4) { display: none; }
@media (max-width: 900px) {
  .stats-monitor {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }
}
@media (max-width: 720px) {
  .stats-monitor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-monitor .sm-src {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 2px;
  }
}
/* 통계 시리즈 슬롯 — 카드마다 동일 높이·폭 (메인 추세 96px) */
.stats-grid {
  --stats-plot-h: 112px;
  --stats-plot-tall-h: 140px;
  --stats-spark-h: 36px;
  --stats-gauge-h: 88px;
  --stats-hypno-h: 72px;
  --stats-mini-h: 40px;
}
/* 스코어 행 높이·기준선 통일 (낙상 포함 전 카드) */
.stats-grid .score-block--inline {
  align-items: baseline;
  min-height: 44px;
  margin: 2px 0 8px;
  flex-wrap: nowrap;
}
.stats-grid .card-h {
  flex-wrap: nowrap;
  min-width: 0;
  gap: 8px;
}
.stats-grid .card-h .t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-grid .score-num {
  font-size: 34px;
  letter-spacing: -1px;
  line-height: 1;
}
.stats-grid .score-aside {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.stats-grid .score-aside .score-unit,
.stats-grid .score-aside .score-delta,
.stats-grid .score-aside span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-grid .cv-capsule,
.stats-grid .cv-pills {
  margin: 4px 0 6px;
  max-height: 18px;
  overflow: hidden;
}
.stats-series {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  width: 100%;
  height: var(--stats-plot-h);
  min-height: var(--stats-plot-h);
  max-height: var(--stats-plot-h);
  overflow: hidden;
}
.stats-series--tall {
  height: var(--stats-plot-tall-h);
  min-height: var(--stats-plot-tall-h);
  max-height: var(--stats-plot-tall-h);
}
/* 수면 등 멀티차트: 남는 세로 공간을 차트 존이 흡수 → 위로 치우침 방지 */
.stats-chart-zone {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  margin-top: auto;
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
}
.stats-chart-zone .stats-series {
  margin-top: 0;
  flex: 0 0 auto;
  height: var(--stats-plot-h);
  min-height: var(--stats-plot-h);
  max-height: var(--stats-plot-h);
}
.stats-chart-zone .stats-hypno {
  margin: 0;
  flex: 0 0 auto;
}
.stats-sleep > .card-drill {
  margin-top: 8px;
  flex: 0 0 auto;
}
.stats-series-plot {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.stats-hit-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.stats-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: crosshair;
  background: transparent;
}
.stats-hit:hover {
  background: rgba(255, 255, 255, 0.04);
}
.stats-axis--month,
.stats-axis--week {
  gap: 0;
  font-size: 9.5px;
  letter-spacing: -0.02em;
}
.stats-axis--month span,
.stats-axis--week span {
  flex: 1 1 0;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-chart-tip {
  position: fixed;
  z-index: 9999;
  min-width: 132px;
  max-width: 220px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(18, 20, 26, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  color: #e8eaed;
  pointer-events: none;
  font-size: 12px;
  line-height: 1.35;
}
.cv-chart-tip-title {
  font-size: 10px;
  font-weight: 800;
  color: #9aa1ab;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.cv-chart-tip-date {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.cv-chart-tip-val {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #1ef0d0;
}
.cv-chart-tip-range {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #9aa1ab;
}
.stats-series-plot > .cv-chart,
.stats-series-plot > .chart-svg,
.stats-series-plot > svg {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  display: block;
}
/* 전폭 카드에서 viewBox(360)가 과하게 늘어나 라벨이 왜곡되는 것 방지 */
.stats-row--full .stats-series-plot { max-width: 760px; }

.stats-series--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.02);
}
.stats-axis {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  padding: 0 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--hx-dash-dim);
  line-height: 1.2;
}
.stats-hypno {
  margin: 6px 0 0;
  height: var(--stats-hypno-h);
  min-height: var(--stats-hypno-h);
  overflow: visible;
  display: flex;
  align-items: center;
}
.stats-hypno svg {
  width: 100% !important;
  height: 100% !important;
  max-height: var(--stats-hypno-h) !important;
  display: block;
  margin: 0 !important;
}
.stats-zone-split {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 8px;
  min-height: 112px;
}
.stats-arcs {
  position: relative;
  flex: 0 0 112px;
  width: 112px;
  height: 112px;
}
.stats-arcs svg { width: 100%; height: 100%; display: block; margin: 0; }
.stats-arcs-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.stats-arcs-mid b { font-size: 18px; font-weight: 900; line-height: 1; }
.stats-arcs-mid small { font-size: 9px; font-weight: 700; color: var(--hx-dash-dim); }
.stats-zone-legend {
  flex: 1;
  display: grid;
  gap: 4px;
  min-width: 0;
}
.stats-zone-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--hx-dash-muted);
}
.stats-zone-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.stats-zone-legend b {
  margin-left: auto;
  font-size: 12px;
  font-weight: 850;
  color: var(--hx-dash-text);
}
/* 전역 .cv-chart{height:auto} / .cv-bars{min-height:120px} 를 통계에서 무력화 */
.stats-grid .cv-chart,
.stats-grid .cv-bars,
.stats-grid .cv-barline,
.stats-grid .cv-glowline,
.stats-grid .cv-range,
.stats-grid .cv-daily {
  margin-top: 0 !important;
  min-height: 0 !important;
}
.stats-spark {
  margin-top: 6px;
  width: 100%;
  height: var(--stats-spark-h, 36px);
  overflow: hidden;
}
.stats-spark .spark,
.stats-spark .cv-chart,
.stats-spark svg {
  width: 100% !important;
  height: var(--stats-spark-h, 36px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: block;
}
.stats-stack {
  margin-top: 8px;
  height: auto;
  min-height: 18px;
  overflow: visible;
}
.stats-stack .cv-stack {
  height: auto !important;
  max-height: none;
}
.stats-stack .cv-stack-bar {
  height: 18px !important;
  max-height: 18px;
}
.stats-stack .cv-stack-legend {
  margin-top: 6px;
  flex-wrap: wrap;
  gap: 4px 8px;
  max-height: none;
  overflow: visible;
}
.stats-stack .cv-stack-leg {
  white-space: nowrap;
}
.stats-gauge {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0 0;
  height: var(--stats-gauge-h, 88px);
  overflow: hidden;
}
.stats-gauge svg {
  width: auto;
  max-width: 100%;
  height: var(--stats-gauge-h, 88px);
  display: block;
  margin: 0;
}
.stats-fall-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 8px;
}
.stats-fall-head .ring {
  width: 72px;
  height: 72px;
  margin: 0;
  flex: 0 0 auto;
}
.stats-fall-head .ring::after { inset: 8px; }
.stats-fall-head .ring b { font-size: 22px; }
.stats-foot { margin-top: auto; }
.ring-wrap { display: grid; place-items: center; text-align: center; padding: 8px 0; position: relative; }
.ring {
  --pct: 70; width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(var(--hx-dash-lime) calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
  display: grid; place-items: center; margin-bottom: 8px; position: relative;
}
.ring::after {
  content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #16161a;
}
.ring b, .ring small { position: relative; z-index: 1; }
.ring b { font-size: 28px; font-weight: 900; line-height: 1; }
.ring small { display: block; font-size: 10px; color: var(--hx-dash-dim); font-weight: 700; margin-top: 2px; }
.fall-ring { background: conic-gradient(var(--hx-dash-coral) calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0); }
.mini-stat { background: rgba(255,255,255,0.03); border: 1px solid var(--hx-dash-border); border-radius: 16px; padding: 12px; }
.legend-row { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--hx-dash-muted); flex-wrap: wrap; }
.legend-row i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.table-panel { background: var(--hx-dash-panel); border: 1px solid var(--hx-dash-border); border-radius: var(--hx-dash-r); overflow: hidden; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.data-table th {
  text-align: left; font-size: 10.5px; font-weight: 800; color: var(--hx-dash-dim);
  padding: 12px 14px; border-bottom: 1px solid var(--hx-dash-border); background: #16161a;
}
.data-table td { padding: 14px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12.5px; font-weight: 650; }
.data-table td.sticky-col { position: sticky; left: 0; background: #16161a; z-index: 1; font-variant-numeric: tabular-nums; font-weight: 800; }
.data-table td b { display: block; font-weight: 800; }
.data-table td small { display: block; color: var(--hx-dash-dim); font-size: 10.5px; margin-top: 2px; }
.ev-type { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); font-weight: 800; font-size: 11.5px; }
.events-cards { display: none; padding: 12px; gap: 10px; flex-direction: column; }
.ev-card { background: rgba(255,255,255,0.03); border: 1px solid var(--hx-dash-border); border-radius: 16px; padding: 14px; }
.ev-card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; }
.ev-card-h strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-card-b { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--hx-dash-muted); min-width: 0; }
.ev-card-b span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-card-f { margin-top: 8px; font-size: 11px; color: var(--hx-dash-dim); font-weight: 700; }
.table-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--hx-dash-border); flex-wrap: wrap; }
.foot-meta { font-size: 11.5px; color: var(--hx-dash-dim); font-weight: 700; }
.pager { display: flex; align-items: center; gap: 6px; }
.pager-btn { width: var(--tap); height: var(--tap); border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid var(--hx-dash-border); font-weight: 800; }
.pager-btn:disabled { opacity: 0.35; }
.pager-num { font-size: 12px; font-weight: 800; min-width: 54px; text-align: center; }
.empty-cell { text-align: center; color: var(--hx-dash-dim); padding: 28px !important; }

.schedule-panel { background: var(--hx-dash-panel); border: 1px solid var(--hx-dash-border); border-radius: var(--hx-dash-r); padding: 14px; }
.sch-category-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.sch-category {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 7px 12px; border-radius: 999px;
  color: var(--hx-dash-muted); background: rgba(255,255,255,0.035);
  border: 1px solid var(--hx-dash-border); font-size: 12px; font-weight: 800;
}
.sch-category b { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,0.08); font-size: 10px; }
.sch-category.on { color: #101114; background: #f2f4f7; border-color: #f2f4f7; }
.sch-category-medication.on { background: var(--hx-dash-orange); border-color: var(--hx-dash-orange); }
.sch-category-medical.on { background: var(--hx-dash-coral); border-color: var(--hx-dash-coral); color: #fff; }
.sch-category-care.on { background: var(--hx-dash-teal); border-color: var(--hx-dash-teal); }
.sch-category-general.on { background: #aab2bf; border-color: #aab2bf; }
.day-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }
.day-tab { flex: 0 0 auto; min-width: 44px; min-height: var(--tap); border-radius: 12px; padding: 8px 12px; font-weight: 800; color: var(--hx-dash-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--hx-dash-border); }
.day-tab.on { background: #f2f4f7; color: #121214; }
.sch-week { display: grid; grid-template-columns: 56px 1fr; gap: 8px; }
.sch-hours { display: flex; flex-direction: column; gap: 28px; padding-top: 36px; }
.sch-hour { font-size: 10px; color: var(--hx-dash-dim); font-weight: 700; height: 48px; }
.sch-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; min-height: 360px; }
.sch-day { background: rgba(255,255,255,0.02); border-radius: 14px; border: 1px solid var(--hx-dash-border); min-height: 360px; padding: 8px; }
.sch-day.today { background: rgba(255,255,255,0.05); border-color: var(--hx-dash-border-hi); }
.sch-day-h { font-size: 11px; font-weight: 800; color: var(--hx-dash-muted); margin-bottom: 8px; text-align: center; }
.sch-item { background: rgba(255,255,255,0.06); border-radius: 10px; padding: 8px; margin-bottom: 6px; border-left: 3px solid var(--hx-dash-teal); }
.sch-item.sch-type-medication, .sch-card.sch-type-medication { border-left-color: var(--hx-dash-orange); background: rgba(255,111,20,0.11); }
.sch-item.sch-type-medical, .sch-card.sch-type-medical { border-left-color: var(--hx-dash-coral); background: rgba(255,45,106,0.09); }
.sch-item.sch-type-care, .sch-card.sch-type-care { border-left-color: var(--hx-dash-teal); background: rgba(30,240,208,0.08); }
.sch-item.sch-type-general, .sch-card.sch-type-general { border-left-color: #8d96a5; background: rgba(141,150,165,0.08); }
.sch-type-badge {
  display: inline-flex; margin-bottom: 5px; padding: 2px 6px; border-radius: 999px;
  color: var(--hx-dash-muted); background: rgba(255,255,255,0.08);
  font-size: 8px; line-height: 1.2; font-weight: 900; letter-spacing: 0.04em;
}
.sch-item strong {
  display: block;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sch-item small {
  display: block;
  font-size: 10px;
  color: var(--hx-dash-dim);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sch-day-stack { display: none; flex-direction: column; gap: 10px; margin-top: 12px; }
.sch-card { padding: 14px; border-radius: 14px; min-height: var(--tap); background: rgba(255,255,255,0.04); border: 1px solid var(--hx-dash-border); border-left: 4px solid var(--hx-dash-teal); }
.sch-card strong { display: block; font-weight: 800; margin-bottom: 4px; }
.sch-card span { font-size: 12px; color: var(--hx-dash-muted); }

.tracker-layout { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start; }
.tracker-dev-list { display: flex; flex-direction: column; gap: 8px; }
.tracker-dev { text-align: left; padding: 12px; border-radius: 14px; min-height: var(--tap); background: rgba(255,255,255,0.03); border: 1px solid var(--hx-dash-border); }
.tracker-dev.on { border-color: rgba(216,255,60,0.45); }
.tracker-dev strong { display: block; font-size: 12.5px; font-weight: 800; }
.tracker-dev span, .tracker-dev em { display: block; font-size: 11px; color: var(--hx-dash-dim); font-style: normal; margin-top: 2px; }
.tracker-map { position: relative; min-height: 420px; }
.floor-plan { position: relative; height: 340px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 30% 40%, rgba(30,240,208,0.06), transparent 50%), #0f1014; border: 1px solid var(--hx-dash-border); margin-bottom: 12px; }
.floor-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.floor-zone { position: absolute; border-radius: 14px; padding: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--hx-dash-muted); font-size: 11px; font-weight: 800; display: flex; align-items: flex-start; }
.floor-zone.occ { background: rgba(30,240,208,0.14); border-color: rgba(30,240,208,0.45); color: var(--hx-dash-teal); }
.floor-zone.fall { background: rgba(255,45,106,0.18); border-color: rgba(255,45,106,0.55); color: var(--hx-dash-coral); animation: pulse 1.2s infinite; }
.floor-zone.on { box-shadow: 0 0 0 2px rgba(216,255,60,0.35); }
.metric-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ms { border-radius: 14px; padding: 12px 10px; min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; }
.ms span { font-size: 10px; font-weight: 750; opacity: 0.85; }
.ms b { font-size: 16px; font-weight: 900; margin-top: 4px; }
.ms.orange { background: rgba(255,111,20,0.2); color: #ffb078; }
.ms.lime { background: rgba(216,255,60,0.16); color: var(--hx-dash-lime); }
.ms.yellow { background: rgba(255,176,26,0.16); color: var(--hx-dash-amber); }
.ms.teal { background: rgba(30,240,208,0.14); color: var(--hx-dash-teal); }
.ms.green { background: rgba(78,245,255,0.12); color: var(--hx-dash-cyan); }

.sleep-grid { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: 14px; }
.sleep-main { grid-column: 1; grid-row: 1 / span 2; }
.sleep-side { grid-column: 2; }
.sleep-hist { grid-column: 2; }
.sleep-vitals { grid-column: 1 / span 2; }
.sleep-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.sleep-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.sleep-leg { font-size: 11px; font-weight: 700; color: var(--hx-dash-muted); display: inline-flex; align-items: center; gap: 6px; }
.sleep-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sleep-timeline { position: relative; height: 56px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.04); margin-bottom: 8px; }
.sleep-seg { position: absolute; top: 8px; bottom: 8px; border-radius: 6px; opacity: 0.92; }
.sleep-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--hx-dash-dim); font-weight: 700; }
.sleep-hist-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 12px; font-weight: 700; min-height: 40px; align-items: center; }

.devices-hero { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.device-card { background: var(--hx-dash-card); border: 1px solid var(--hx-dash-border); border-radius: var(--hx-dash-r-card); padding: 16px; }
.device-card.status-online { border-color: rgba(30,240,208,0.35); }
.device-card.status-error { border-color: rgba(255,45,106,0.4); }
.dc-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.dc-meta { font-size: 11.5px; color: var(--hx-dash-dim); font-weight: 650; margin-bottom: 4px; }
.dc-meta em { font-style: normal; color: var(--hx-dash-amber); font-weight: 800; }
.cap-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.cap-pill { font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,0.05); color: var(--hx-dash-muted); }
.dc-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.empty-shell, .empty-onboard {
  margin: 16px 22px; padding: 36px 22px; text-align: center;
  background: var(--hx-dash-card); border: 1px dashed var(--hx-dash-border-hi); border-radius: var(--hx-dash-r);
}
.empty-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: conic-gradient(from 180deg, var(--hx-dash-teal), var(--hx-dash-lime), var(--hx-dash-orange)); }
.empty-onboard h2 { font-size: 20px; margin-bottom: 8px; }
.empty-onboard p { color: var(--hx-dash-muted); max-width: 420px; margin: 0 auto 16px; font-size: 13px; }
.empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.alert-item { min-height: var(--tap); }
.person-chip, .bed-card, .tracker-dev, .day-tab, .pager-btn, .dev-chip { min-height: var(--tap); }
.detail-h button { width: var(--tap); height: var(--tap); }

/* RESPONSIVE: tablet-first */
@media (max-width: 1199px) {
  .page { padding-left: 18px; padding-right: 18px; }
  .layout { grid-template-columns: 1fr; }
  .side-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .hero-snap { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bento-card.span2 { grid-column: span 2; }
  .stats-row--3,
  .stats-row--2,
  .stats-row--4,
  .stats-row--5,
  .stats-row--priority,
  .stats-row--vital,
  .stats-row--care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-row--vital .stats-history,
  .stats-row--priority .stats-history,
  .stats-row--care .stats-sleep { grid-column: 1 / -1; }
  .tracker-layout { grid-template-columns: 200px 1fr; }
  .sleep-grid { grid-template-columns: 1fr 1fr; }
  .sleep-main { grid-row: auto; }
  .metric-strip { grid-template-columns: repeat(3, 1fr); }
  .pill-nav { max-width: none; flex: 1 1 auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sch-week { display: grid; grid-template-columns: 1fr; }
  .sch-hours { display: none; }
  .sch-day-stack { display: none; }
  .sch-item small { display: none; }
  .sch-item strong { font-size: 10px; }
  .hero-title { font-size: 20px; }
  .device-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .layout { grid-template-columns: 1fr 260px; }
  .side-col { display: flex; flex-direction: column; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .sch-week { display: grid; grid-template-columns: 48px 1fr; }
  .sch-day-stack { display: none; }
  .stats-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats-row--priority { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
  .stats-row--vital { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .stats-row--care { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
  .stats-row--vital .stats-history,
  .stats-row--priority .stats-history,
  .stats-row--care .stats-sleep { grid-column: auto; }
}
@media (max-width: 639px) {
  .nav-burger { display: flex; }
  .pill-nav { display: none; }
  .nav-drawer { display: block; }
  .tick-meta, .clock { display: none; }
  .device-strip { flex-direction: column; align-items: stretch; }
  .dev-strip-actions { width: 100%; }
  .dev-strip-actions .btn-cta, .dev-strip-actions .btn-ghost { flex: 1; }
  .hero-snap { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento-card.span2 { grid-column: span 1; }
  .side-col { grid-template-columns: 1fr; }
  .stats-row--3,
  .stats-row--2,
  .stats-row--4,
  .stats-row--5,
  .stats-row--priority,
  .stats-row--vital,
  .stats-row--care,
  .stats-row--full { grid-template-columns: 1fr; }
  .stats-row--vital .stats-history,
  .stats-row--priority .stats-history,
  .stats-row--care .stats-sleep { grid-column: auto; }
  .stats-cat { padding: 10px; border-radius: 20px; }
  .table-wrap { display: none; }
  .events-cards { display: flex; }
  .sch-week { display: none; }
  .sch-day-stack { display: flex; }
  .tracker-layout { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .sleep-grid { grid-template-columns: 1fr; }
  .sleep-stats { grid-template-columns: 1fr; }
  .sleep-main, .sleep-side, .sleep-hist, .sleep-vitals { grid-column: 1; }
  .device-grid { grid-template-columns: 1fr; }
  .facility-stats { grid-template-columns: 1fr; }
  .empty-shell, .empty-onboard { margin-left: 14px; margin-right: 14px; }
}
@media (min-width: 640px) and (max-width: 767px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .sch-week { display: grid; grid-template-columns: 1fr; }
  .sch-hours { display: none; }
  .sch-item small { display: none; }
  .sch-day-stack { display: none; }
}
@media (min-width: 1200px) {
  .layout { grid-template-columns: 1fr 300px; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .side-col { display: flex; flex-direction: column; }
}

/* Fix media query conflict: hide pill-nav only on phone, show on tablet+ */
@media (min-width: 640px) and (max-width: 1100px) {
  .pill-nav { display: flex !important; }
}

/* ── Visual upgrade: photo icons, metric colors, image cards ── */
.cv-icon {
  display: inline-grid; place-items: center;
  flex: 0 0 auto; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--hx-dash-muted);
  overflow: hidden;
  position: relative;
}
.cv-icon svg { display: block; }
.cv-icon--photo {
  background:
    radial-gradient(circle at 40% 30%, rgba(255,255,255,0.08), transparent 55%),
    rgba(8, 10, 14, 0.92);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0;
}
.cv-icon-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.cv-icon--glow.cv-icon--photo {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 8px 20px rgba(0,0,0,0.45),
    0 0 22px currentColor;
}
.cv-icon--glow:not(.cv-icon--photo) { box-shadow: 0 0 16px currentColor; }
.cv-icon--hr { color: var(--cv-hr); }
.cv-icon--br { color: var(--cv-br); }
.cv-icon--presence { color: var(--cv-presence); }
.cv-icon--fall { color: var(--cv-fall); }
.cv-icon--move { color: var(--cv-move); }
.cv-icon--pobc { color: var(--cv-pobc); }
.cv-icon--stress { color: var(--cv-stress); }
.cv-icon--sleep { color: var(--cv-sleep); }
.cv-icon--device { color: var(--cv-dev-on); }
.cv-icon--hr.cv-icon--photo { box-shadow: 0 6px 18px var(--cv-hr-glow); }
.cv-icon--br.cv-icon--photo { box-shadow: 0 6px 18px var(--cv-br-glow); }
.cv-icon--presence.cv-icon--photo { box-shadow: 0 6px 18px var(--cv-presence-glow); }
.cv-icon--fall.cv-icon--photo { box-shadow: 0 6px 18px var(--cv-fall-glow); }
.cv-icon--move.cv-icon--photo { box-shadow: 0 6px 18px var(--cv-move-glow); }
.cv-icon--pobc.cv-icon--photo { box-shadow: 0 6px 18px rgba(184, 230, 42, 0.35); }
.cv-icon--stress.cv-icon--photo { box-shadow: 0 6px 18px rgba(255, 111, 20, 0.4); }
.cv-icon--sleep.cv-icon--photo { box-shadow: 0 6px 18px var(--cv-sleep-glow); }

.card-h .t { display: inline-flex; align-items: center; gap: 10px; }
.bento-card[data-metric="presence"] { border-color: rgba(30, 240, 208, 0.22); }
.bento-card[data-metric="fall"] { border-color: rgba(255, 45, 106, 0.2); }
.bento-card[data-metric="movement"] .bar-fill { background: linear-gradient(90deg, #9bcc20, var(--cv-move)); }
.bento-card[data-metric="sleep"] .bar-fill { background: linear-gradient(90deg, #7c6cf0, var(--cv-sleep)); }
.bento-card[data-metric="br"] .bar-fill { background: linear-gradient(90deg, #2a9fd8, var(--cv-br)); }
.bento-card[data-metric="hr"] .bar-fill { background: linear-gradient(90deg, #e83a5a, var(--cv-hr)); }
.bento-card[data-metric="hr"] .gauge [data-gauge-arc] { stroke: var(--cv-hr); }
.bento-card[data-metric="br"] .gauge [data-gauge-arc] { stroke: var(--cv-br); }
.bento-card[data-metric="pobc"] .gauge [data-gauge-arc] { stroke: var(--cv-pobc); }
.bento-card[data-metric="stress"] .gauge [data-gauge-arc] { stroke: var(--cv-stress); }
.bento-card[data-metric="hr"] .spark path { stroke: var(--cv-hr); }
.bento-card[data-metric="br"] .spark:not(.br-wave) path { stroke: var(--cv-br); }
.bento-card[data-metric="br"] .spark.br-wave .br-wave-stroke { stroke: url(#br-wave-grad); }
.bento-card[data-metric="br"] .spark.br-wave .br-wave-fill { stroke: none; }
.bento-card[data-metric="pobc"] .spark path { stroke: var(--cv-pobc); }
.bento-card[data-metric="stress"] .spark path { stroke: var(--cv-stress); }
.bento-card[data-metric="movement"] .spark path { stroke: var(--cv-move); }
.bento-card[data-metric="sleep"] .spark path { stroke: var(--cv-sleep); }
/* ② 생체카드 상단 메트릭 컬러 액센트 — 심박=빨강·호흡=파랑·재실=청록… 스캔성·정체성 */
.bento-card[data-metric]::before { height: 2px; opacity: 0.9; }
.bento-card[data-metric="hr"]::before       { background: linear-gradient(90deg, transparent, var(--cv-hr-glow), transparent); }
.bento-card[data-metric="br"]::before       { background: linear-gradient(90deg, transparent, var(--cv-br-glow), transparent); }
.bento-card[data-metric="presence"]::before { background: linear-gradient(90deg, transparent, var(--cv-presence-glow), transparent); }
.bento-card[data-metric="movement"]::before { background: linear-gradient(90deg, transparent, var(--cv-move-glow), transparent); }
.bento-card[data-metric="sleep"]::before    { background: linear-gradient(90deg, transparent, var(--cv-sleep-glow), transparent); }
.bento-card[data-metric="stress"]::before   { background: linear-gradient(90deg, transparent, rgba(255,111,20,0.42), transparent); }
.bento-card[data-metric="pobc"]::before     { background: linear-gradient(90deg, transparent, rgba(184,230,42,0.42), transparent); }
.bento-card[data-metric="fall"]::before     { background: linear-gradient(90deg, transparent, var(--cv-fall-glow), transparent); }
.bento-card[data-metric]:hover::before { opacity: 1; }
.bento-card .metric-unit {
  font-size: 14px; font-weight: 700; color: var(--hx-dash-dim); margin-left: 2px;
}
.presence-ring.sleep {
  border-color: rgba(167, 139, 250, 0.75);
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.28);
}
.presence-ring.sleep .dot {
  background: var(--cv-sleep);
  box-shadow: 0 0 12px var(--cv-sleep);
}
.presence-ring.active {
  border-color: var(--hx-dash-teal);
  box-shadow: 0 0 22px rgba(30, 240, 208, 0.35);
}

.hero-snap-main {
  position: relative; overflow: hidden;
  background: #0a0c12;
}
/* 사진 레이어: absolute 유지 필수 — > * {relative} 에 덮이면 높이 0으로 안 보임 */
.hero-snap-carousel {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}
.hero-snap-slides { position: absolute; inset: 0; }
.hero-snap-slide {
  position: absolute; inset: 0;
  background-color: #12151c;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.55s ease, transform 0.9s ease;
}
.hero-snap-slide.on {
  opacity: 1;
  transform: scale(1);
}
.hero-snap-main::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(115deg, rgba(8, 10, 14, 0.55) 0%, rgba(8, 10, 14, 0.22) 45%, rgba(8, 10, 14, 0.48) 100%),
    radial-gradient(520px 300px at 88% 18%, rgba(30, 240, 208, 0.12), transparent 58%),
    radial-gradient(380px 220px at 12% 88%, rgba(255, 111, 20, 0.08), transparent 60%);
}
.hero-snap-main > *:not(.hero-snap-carousel) {
  position: relative;
  z-index: 2;
}
.hero-snap-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-left: auto;
}
.hero-snap-count {
  font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.7);
  letter-spacing: 0.2px; min-width: 3.2em;
}
.hero-snap-file {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  pointer-events: none !important;
  border: 0 !important; padding: 0 !important; margin: 0 !important;
}
.hero-snap-dots { display: inline-flex; align-items: center; gap: 6px; }
.hero-snap-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.18);
  cursor: pointer;
}
.hero-snap-dot.on {
  width: 18px; border-radius: 999px;
  background: #d8ff3c;
  border-color: #d8ff3c;
}
.hero-snap-ctrls { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero-snap-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.42);
  color: #f2f5f8; font-size: 12px; font-weight: 800;
  backdrop-filter: blur(8px); cursor: pointer;
  box-sizing: border-box; margin: 0;
}
.hero-snap-btn:hover { border-color: rgba(216,255,60,0.45); }
.hero-snap-btn:disabled,
.hero-snap-btn.is-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.hero-snap-btn--danger { color: #ffb0c8; border-color: rgba(255,45,106,0.35); }
.hero-snap-btn--cam { color: #b9f5ff; border-color: rgba(78,245,255,0.4); }
.hero-snap-btn--cam:hover { border-color: rgba(78,245,255,0.7); }

/* 영상 통화 마법사 · PIP(상단 우측) · 생체신호 · 긴급/119 — Dash DNA */
.cv-call-modal { position: fixed; inset: 0; z-index: 120050; display: flex; align-items: center; justify-content: center; }
.cv-call-modal[hidden] { display: none; }
.cv-call-scrim { position: absolute; inset: 0; background: rgba(8,8,12,0.78); backdrop-filter: blur(6px); }
.cv-call-sheet {
  position: relative; z-index: 1; width: min(920px, calc(100vw - 20px)); max-height: calc(100vh - 20px);
  overflow: auto; padding: 14px 16px 16px;
  background: var(--hx-dash-panel);
  border: 1px solid var(--hx-dash-border-hi);
  border-radius: var(--hx-dash-r);
  box-shadow: var(--hx-dash-shadow);
}
.cv-call-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.cv-call-head h3 { margin: 0; font-size: 18px; font-weight: 850; color: var(--hx-dash-text); }
.cv-call-head p { margin: 4px 0 0; color: var(--hx-dash-dim); font-size: 11px; font-weight: 700; }
.cv-call-x {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid var(--hx-dash-border);
  color: var(--hx-dash-text); font-size: 19px;
}
.cv-call-stage {
  position: relative; min-height: 280px; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--hx-dash-r-card); background: #0a0a0e;
  border: 1px solid var(--hx-dash-border);
}
.cv-call-remote { width: 100%; height: 100%; display: block; object-fit: cover; background: #0a0a0e; }
.cv-call-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--hx-dash-text); pointer-events: none; z-index: 1;
}
.cv-call-empty[hidden] { display: none; }
.cv-call-empty b { font-size: 16px; font-weight: 850; }
.cv-call-empty span { color: var(--hx-dash-dim); font-size: 12px; text-align: center; padding: 0 16px; font-weight: 700; }

/* PIP — 패널 상단 우측 */
.cv-call-pip {
  position: absolute; right: 12px; top: 12px; width: clamp(104px, 20%, 176px); aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: var(--hx-dash-r-sm); background: var(--hx-dash-surface);
  border: 1.5px solid rgba(30, 240, 208, 0.55);
  box-shadow: var(--hx-dash-shadow-card); z-index: 4;
}
.cv-call-pip video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.cv-call-pip span {
  position: absolute; left: 7px; bottom: 6px; padding: 2px 7px; border-radius: var(--hx-dash-pill);
  background: rgba(0,0,0,0.62); color: var(--hx-dash-text); font-size: 10px; font-weight: 800;
}

.cv-call-state {
  position: absolute; left: 12px; top: 12px; max-width: min(52%, calc(100% - 200px));
  padding: 6px 11px; border-radius: var(--hx-dash-pill);
  background: rgba(18,18,22,0.82); color: var(--hx-dash-muted); font-size: 11px; font-weight: 800;
  border: 1px solid var(--hx-dash-border); backdrop-filter: blur(5px); z-index: 5;
}
.cv-call-state[data-tone="live"] { color: var(--hx-dash-teal); border-color: rgba(30,240,208,0.4); }
.cv-call-state[data-tone="error"] { color: #ffb0c8; border-color: rgba(255,45,106,0.4); }
.cv-call-state[data-tone="ready"],
.cv-call-state[data-tone="wait"] { color: var(--hx-dash-cyan); border-color: rgba(78,245,255,0.35); }

.cv-call-vitals {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
}
.cv-vital {
  padding: 7px 8px; border-radius: var(--hx-dash-r-sm);
  background: rgba(18,18,22,0.78); border: 1px solid var(--hx-dash-border); backdrop-filter: blur(6px);
}
.cv-vital span { display: block; font-size: 9.5px; font-weight: 800; color: var(--hx-dash-dim); }
.cv-vital b { display: block; margin-top: 2px; font-size: 13px; font-weight: 850; color: var(--hx-dash-text); }
.cv-vital.ok b { color: var(--hx-dash-teal); }
.cv-vital.warn b { color: var(--hx-dash-amber); }
.cv-vital.crit b { color: var(--hx-dash-coral); }
.cv-vital.dim { grid-column: 1 / -1; text-align: center; color: var(--hx-dash-dim); font-size: 11px; font-weight: 700; }

.cv-call-fall-banner {
  position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 6;
  padding: 7px 14px; border-radius: var(--hx-dash-pill);
  background: rgba(255,45,106,0.92); color: #fff;
  font-size: 12.5px; font-weight: 850; box-shadow: var(--hx-dash-glow-coral);
}
.cv-call-fall-banner[hidden] { display: none; }

.cv-call-setup { margin-top: 12px; }
.cv-call-wizard-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cv-call-big {
  text-align: left; padding: 16px 14px; border-radius: var(--hx-dash-r-card); cursor: pointer;
  background: var(--hx-dash-card); border: 1px solid var(--hx-dash-border-hi); color: var(--hx-dash-text);
  transition: border-color .2s ease, transform .18s ease;
}
.cv-call-big.alt { background: var(--hx-dash-card-soft); }
.cv-call-big:hover { border-color: rgba(216,255,60,0.35); }
.cv-call-big strong { display: block; font-size: 14.5px; font-weight: 850; margin-bottom: 5px; }
.cv-call-big span { display: block; font-size: 11.5px; line-height: 1.45; color: var(--hx-dash-muted); font-weight: 700; }
.cv-call-big:active { transform: scale(0.98); }
.cv-call-code-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 10px; }
.cv-call-code-row label { display: flex; flex-direction: column; gap: 5px; color: var(--hx-dash-dim); font-size: 10px; font-weight: 800; }

.cv-call-livebar { margin-top: 10px; }
.cv-call-controls { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cv-ctrl {
  min-height: 40px; padding: 8px 14px; border-radius: var(--hx-dash-pill); font-weight: 800; font-size: 12.5px;
  border: 1px solid var(--hx-dash-border); background: rgba(255,255,255,0.05); color: var(--hx-dash-text); cursor: pointer;
}
.cv-ctrl.off { opacity: 0.55; border-color: rgba(255,45,106,0.35); color: #ffb0c8; }
.cv-ctrl.danger { color: var(--hx-dash-coral); border-color: rgba(255,45,106,0.35); background: rgba(255,45,106,0.1); }

/* 긴급 행 — Dash pill 배율: 119 강조 · 긴급통화 · 알림 · 연락처(보조) */
.cv-call-emergency {
  display: grid;
  grid-template-columns: 1.25fr 1.45fr 1fr 0.85fr;
  gap: 8px; margin-top: 12px; align-items: center;
}
.cv-emg {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 12px; border-radius: var(--hx-dash-pill);
  font-size: 12.5px; font-weight: 800; text-decoration: none; cursor: pointer;
  border: 1px solid var(--hx-dash-border); transition: border-color .2s ease, transform .18s ease, background .2s ease;
}
.cv-emg:active { transform: scale(0.97); }
.cv-emg.warn {
  background: rgba(255,176,26,0.14); border-color: rgba(255,176,26,0.38); color: var(--hx-dash-amber);
}
.cv-emg.crit {
  min-height: 48px; font-size: 14px; letter-spacing: 0.3px;
  background: rgba(255,45,106,0.16); border-color: rgba(255,45,106,0.42); color: #ffb0c8;
  box-shadow: 0 6px 16px rgba(255,45,106,0.12);
}
.cv-emg.alert {
  background: rgba(78,245,255,0.1); border-color: rgba(78,245,255,0.32); color: var(--hx-dash-cyan);
}
.cv-emg.ghost {
  min-height: 40px; padding: 8px 10px; font-size: 11.5px;
  background: rgba(255,255,255,0.05); border-color: var(--hx-dash-border); color: var(--hx-dash-muted);
}
.cv-call-emg-meta { margin: 8px 2px 0; color: var(--hx-dash-muted); font-size: 11px; font-weight: 700; }
.cv-call-note { margin: 8px 2px 0; color: var(--hx-dash-dim); font-size: 10.5px; font-weight: 700; }
.cv-call-emg-extra { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cv-emg.on {
  border-color: rgba(216,255,60,0.45); color: var(--hx-dash-lime);
  background: rgba(216,255,60,0.1);
}

/* 비상음향감지 — 알림 패널 */
.panel-h-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.panel-h-actions .link-pill { margin-left: 0; }
.link-pill.on {
  background: rgba(216,255,60,0.16); color: var(--hx-dash-lime);
  border: 1px solid rgba(216,255,60,0.4);
}
.audio-listen-row {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px; min-height: 22px;
}
.audio-listen-chip {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: var(--hx-dash-pill); font-size: 11px; font-weight: 800;
  background: rgba(30,240,208,0.12); color: var(--hx-dash-teal);
  border: 1px solid rgba(30,240,208,0.35);
}
.audio-listen-chip.on { background: rgba(30,240,208,0.16); }
.audio-listen-chip.alert {
  background: rgba(255,45,106,0.16); color: #ffb0c8;
  border-color: rgba(255,45,106,0.42);
}
.audio-rms-meter {
  flex: 1; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.06); border: 1px solid var(--hx-dash-border);
}
.audio-rms-meter i {
  display: block; height: 100%; width: var(--rms, 0%);
  background: linear-gradient(90deg, var(--hx-dash-teal), var(--hx-dash-lime));
  border-radius: inherit; transition: width 0.08s linear;
}
.audio-rms-meter[data-class="scream"] i,
.audio-rms-meter[data-class="impact"] i {
  background: linear-gradient(90deg, var(--hx-dash-amber), var(--hx-dash-coral));
}

@media (max-width: 680px) {
  .cv-call-sheet { padding: 12px; border-radius: var(--hx-dash-r-card); }
  .cv-call-stage { min-height: 240px; aspect-ratio: 3 / 4; }
  .cv-call-wizard-cards { grid-template-columns: 1fr; }
  .cv-call-vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cv-call-pip { width: 30%; right: 8px; top: 8px; }
  .cv-call-state { max-width: calc(70% - 20px); }
  .cv-call-emergency { grid-template-columns: 1fr 1.15fr; }
  .cv-emg.ghost { grid-column: auto; }
  .cv-call-code-row { grid-template-columns: 1fr; }
}

/* ── 연결·설정 자동화 마법사 ── */
.wiz-modal { position: fixed; inset: 0; z-index: 120060; display: flex; align-items: center; justify-content: center; }
.wiz-modal[hidden] { display: none; }
.wiz-scrim { position: absolute; inset: 0; background: rgba(4,6,10,0.72); backdrop-filter: blur(4px); }
.wiz-sheet {
  position: relative; z-index: 1; width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--hx-dash-panel, #16161a); border: 1px solid var(--hx-dash-border, rgba(255,255,255,0.12));
  border-radius: 24px; box-shadow: 0 32px 90px rgba(0,0,0,0.62);
}
.wiz-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; }
.wiz-h h3 { font-size: 17px; font-weight: 800; margin: 0; }
.wiz-h .sub2 { margin-top: 3px; }
.wiz-x { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--hx-dash-border, rgba(255,255,255,0.12)); color: #f2f4f7; font-size: 18px; flex: none; }

.wiz-steps { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0 18px 6px; overflow-x: auto; }
.wiz-step { display: flex; align-items: center; gap: 6px; flex: none; opacity: 0.5; font-size: 11px; font-weight: 700; }
.wiz-step.on { opacity: 1; }
.wiz-step.done { opacity: 0.85; }
.wiz-step-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(255,255,255,0.08); border: 1px solid var(--hx-dash-border, rgba(255,255,255,0.14)); }
.wiz-step.on .wiz-step-n { background: var(--hx-accent, #4ef5ff); color: #04121a; border-color: transparent; }
.wiz-step.done .wiz-step-n { background: rgba(78,245,255,0.22); color: #b9f5ff; }
.wiz-step-l { white-space: nowrap; }

.wiz-body-wrap { padding: 8px 18px 4px; overflow-y: auto; flex: 1 1 auto; }
.wiz-body-wrap h4 { font-size: 14px; font-weight: 800; margin: 6px 0 12px; }
.wiz-body { min-height: 180px; }
.wiz-note { margin-top: 12px; font-size: 11px; color: var(--hx-dash-dim, #6b7380); font-weight: 700; line-height: 1.5; }
.wiz-note em, .wiz-rule em { font-style: normal; color: #ffd27a; }
.wiz-err { margin-top: 10px; font-size: 12px; font-weight: 800; color: #ffb0c8; }

.wiz-cards { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.wiz-choice { text-align: left; padding: 16px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1.5px solid var(--hx-dash-border, rgba(255,255,255,0.12)); display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.wiz-choice strong { font-size: 14px; font-weight: 800; }
.wiz-choice span { font-size: 11.5px; color: var(--hx-dash-dim, #8b93a1); line-height: 1.4; }
.wiz-choice.on { border-color: var(--hx-accent, #4ef5ff); background: rgba(78,245,255,0.08); }

.wiz-form { display: grid; gap: 12px; }
.wiz-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--hx-dash-dim, #9aa2b1); }
.wiz-field .tool-select, .wiz-field .tool-input { width: 100%; }

.wiz-scan-h { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 800; margin-bottom: 10px; }
.wiz-scan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
.wiz-scan-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--hx-dash-border, rgba(255,255,255,0.1)); cursor: pointer; font-size: 12px; }
.wiz-scan-item.on { border-color: var(--hx-accent, #4ef5ff); background: rgba(78,245,255,0.08); }
.wiz-scan-nm { font-weight: 800; }
.wiz-scan-sn { color: var(--hx-dash-dim, #8b93a1); font-size: 11px; }
.wiz-scan-rssi { color: #9fe6a0; font-size: 11px; font-weight: 700; }

.wiz-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.wiz-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1.5px solid var(--hx-dash-border, rgba(255,255,255,0.12)); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.wiz-toggle i { width: 34px; height: 18px; border-radius: 999px; background: rgba(255,255,255,0.12); position: relative; transition: background 0.15s; flex: none; }
.wiz-toggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.wiz-toggle.on { border-color: var(--hx-accent, #4ef5ff); background: rgba(78,245,255,0.08); }
.wiz-toggle.on i { background: var(--hx-accent, #4ef5ff); }
.wiz-toggle.on i::after { transform: translateX(16px); }

.wiz-rules { display: grid; gap: 8px; }
.wiz-rule { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--hx-dash-border, rgba(255,255,255,0.1)); cursor: pointer; }
.wiz-rule.on { border-color: var(--hx-accent, #4ef5ff); background: rgba(78,245,255,0.06); }
.wiz-rule input { margin-top: 3px; }
.wiz-rule-b strong { font-size: 13px; font-weight: 800; display: block; }
.wiz-rule-b small { font-size: 11px; color: var(--hx-dash-dim, #8b93a1); }

.wiz-review { display: grid; gap: 6px; }
.wiz-review-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--hx-dash-border, rgba(255,255,255,0.1)); font-size: 13px; }
.wiz-review-row span { color: var(--hx-dash-dim, #9aa2b1); font-weight: 700; }
.wiz-review-row b { font-weight: 800; text-align: right; }

.wiz-foot { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--hx-dash-border, rgba(255,255,255,0.08)); }
.wiz-foot-sp { flex: 1 1 auto; }
.wiz-foot .wiz-finish { background: linear-gradient(120deg, #4ef5ff, #7c8bff); color: #04121a; }
.wiz-foot button:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 520px) {
  .wiz-cards { grid-template-columns: 1fr; }
  .wiz-scan-item { grid-template-columns: auto 1fr; }
  .wiz-scan-rssi { grid-column: 2; text-align: right; }
}
.hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.hero-tile { display: flex; flex-direction: column; gap: 6px; backdrop-filter: blur(8px); }
.hero-tile .ht-label { display: inline-flex; align-items: center; gap: 8px; }
.hero-tile--presence { border-color: rgba(30, 240, 208, 0.4); box-shadow: inset 0 0 0 1px rgba(30, 240, 208, 0.1); }
.hero-tile--fall { border-color: rgba(255, 45, 106, 0.4); }
.hero-tile--stress { border-color: rgba(255, 111, 20, 0.35); }
.hero-tile--pobc { border-color: rgba(216, 255, 60, 0.35); }
.hero-snap-side .semi-gauge .sg-arc { stroke: var(--cv-pobc); }
.hero-snap-side #spark-hero-pobc path { stroke: var(--cv-pobc); }
.hero-snap-side[data-analyze="pobc"] { border-color: rgba(216, 255, 60, 0.32); }

.metric-strip .ms {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border-radius: 18px;
  border: 1px solid transparent; min-height: 76px;
  min-width: 0;
}
.metric-strip .ms b {
  font-size: 16px;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-strip .ms span {
  font-size: 10.5px;
  font-weight: 800;
  opacity: 0.9;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-strip .ms.orange { background: rgba(255, 123, 66, 0.18); color: #ffc4a8; border-color: rgba(255, 123, 66, 0.35); }
.metric-strip .ms.lime { background: rgba(176, 196, 77, 0.18); color: #e4f08a; border-color: rgba(176, 196, 77, 0.35); }
.metric-strip .ms.yellow { background: rgba(255, 184, 76, 0.16); color: #ffd89a; border-color: rgba(255, 184, 76, 0.35); }
.metric-strip .ms.teal { background: rgba(64, 179, 162, 0.18); color: #9eefe4; border-color: rgba(64, 179, 162, 0.35); }
.metric-strip .ms.green { background: rgba(126, 217, 87, 0.16); color: #c8f7a8; border-color: rgba(126, 217, 87, 0.35); }
.metric-strip .ms.coral { background: rgba(255, 45, 106, 0.18); color: #ffb0c8; border-color: rgba(255, 45, 106, 0.4); }
.metric-strip .ms .ms-h { display: flex; align-items: center; gap: 8px; }
.metric-strip .ms .cv-icon { width: 32px !important; height: 32px !important; border-radius: 10px; }

.ev-type {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800;
}
.ev-ico {
  width: 36px; height: 36px; border-radius: 12px;
  display: inline-grid; place-items: center; flex: 0 0 auto;
}
.ev-ico .cv-icon { width: 36px !important; height: 36px !important; border-radius: 12px; }
.ev-card-h { display: flex; align-items: center; gap: 10px; }

.sleep-media {
  position: relative; border-radius: 22px; overflow: hidden;
  min-height: 200px; margin-bottom: 16px;
  background: #0a0c12 url("../img/night-rest.png?v=20260724v2") center/cover no-repeat;
  border: 1px solid rgba(255,255,255,0.08);
}
.sleep-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,10,16,0.2) 0%, rgba(8,10,16,0.55) 45%, rgba(8,10,16,0.94) 100%);
}
.sleep-media-body {
  position: relative; z-index: 1;
  padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 8px;
  justify-content: flex-end; min-height: 200px;
}
.sleep-media-body .kicker {
  font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.72);
  display: inline-flex; align-items: center; gap: 8px;
}
.sleep-media-body .metric { font-size: 30px; letter-spacing: -0.6px; }
.sleep-media-body .range { font-size: 12px; color: var(--hx-dash-muted); font-weight: 650; }

.mini-stat[data-metric="hr"] .metric { color: var(--cv-hr); }
.mini-stat[data-metric="br"] .metric { color: var(--cv-br); }
.stats-seg .bar-fill { background: linear-gradient(90deg, #9bcc20, var(--cv-move)); }
.stats-goal .fall-ring {
  background: conic-gradient(var(--cv-fall) calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
}
.device-card .dc-top { display: flex; align-items: center; gap: 12px; }
.device-card .dc-top strong { display: inline-flex; align-items: center; gap: 10px; flex: 1; }
.device-card .dc-top .cv-icon { width: 40px !important; height: 40px !important; border-radius: 14px; }
.alert-item .cv-icon { margin-top: 0; width: 34px !important; height: 34px !important; border-radius: 11px; }

.fall-pulse .cv-icon { width: 48px !important; height: 48px !important; border-radius: 16px; }
.presence-ring { position: relative; }
.presence-ring::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(30, 240, 208, 0.15); pointer-events: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cv-icon { border-radius: 11px; }
  .hero-snap-main { min-height: 236px; }
  .metric-strip .ms b { font-size: 15px; }
  .sleep-media, .sleep-media-body { min-height: 180px; }
}

/* ── Layout polish: spacing, alignment, denser VEXORA grid ── */
.shell-top { padding: 12px 20px; gap: 12px; }
.audience-bar { padding: 12px 20px 0; gap: 12px; align-items: center; }
.device-strip { padding: 10px 20px 0; gap: 12px; }
.chip-strip { padding: 8px 20px 0; gap: 8px; }
.page { padding: 14px 20px 48px; max-width: 1480px; }
.layout { gap: 18px; align-items: start; }
.side-col { position: sticky; top: 88px; gap: 14px; }

.hero-snap {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.85fr);
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}
.hero-snap-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 360px;
  padding: 22px 24px;
  border-radius: 26px;
}
.hero-snap-side { border-radius: 26px; }
.hero-copy { max-width: 38rem; }
.hero-kicker { margin-bottom: 8px; letter-spacing: 0.6px; text-transform: uppercase; }
.hero-title {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.12;
  margin-bottom: 8px;
}
.hero-sub { margin-bottom: 0; max-width: 34rem; line-height: 1.45; }
.hero-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  margin-top: auto;   /* 3카드를 하단으로 — 중앙 이미지 가림 방지 */
}
.hero-tile {
  min-height: 0;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  border-radius: 12px;
  background: rgba(0,0,0,0.34);
}
.hero-tile .ht-label { font-size: 10px; }
.hero-tile strong { font-size: 14px; letter-spacing: -0.35px; line-height: 1.15; }
.hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.hero-snap-side {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 18px 18px 14px;
}
.hero-snap-side .semi-gauge { flex: 1; min-height: 128px; }
.hero-snap-side .spark { margin-top: auto; }

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(156px, auto);
  gap: 14px;
}
.bento-card {
  display: flex;
  flex-direction: column;
  min-height: 156px;
  padding: 16px 16px 14px;
  height: 100%;
  border-radius: 22px;
}
.bento-card .card-h { margin-bottom: 12px; flex: 0 0 auto; }
.bento-card .metric { margin-top: 2px; font-size: 32px; }
.bento-card .spark { margin-top: auto; }
.bento-card .bar-track { margin-top: 10px; }
.bento-card .card-drill { margin-top: auto; padding-top: 10px; }
.bento-card .gauge-wrap { flex: 1; align-items: center; min-height: 0; gap: 16px; }
.bento-card .vital-row { flex: 1; align-items: center; gap: 14px; }
.bento-card.span2 { grid-column: span 2; min-height: 176px; }

.cv-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px;
}
.card-h .t .cv-icon {
  width: 34px !important;
  height: 34px !important;
}
.ht-label .cv-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px;
}

.stats-grid { gap: 12px; }
.stats-grid .panel,
.stats-row > .panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  padding: 14px 16px;
}
.stats-vitals .mini-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hx-dash-border);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.stats-vitals .mini-stat .stats-spark { margin-top: auto; }
.stats-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 4px;
}
.stats-kpi-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-kpi-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-env-unified,
.stats-iot-unified {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.stats-env-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 6px 0 8px;
  align-items: stretch;
}
.stats-env-tile {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  min-height: 0;
}
.stats-env-tile:hover {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.06);
}
.stats-env-tile-h {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 18px;
}
.stats-env-tile-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.stats-env-tile-name b {
  font-size: 11px;
  font-weight: 800;
  color: var(--hx-dash-text, #f4f7fb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-env-tile-h .tiny-pill,
.stats-env-tile-h .status-pill,
.stats-env-tile-h .pill {
  margin-left: auto;
  flex: 0 0 auto;
  transform: none;
  font-size: 9px !important;
  padding: 1px 6px !important;
  line-height: 1.2;
  white-space: nowrap;
}
.stats-env-tile-v {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  min-height: 24px;
}
.stats-env-tile-num {
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.stats-env-tile-unit {
  font-size: 10px;
  font-weight: 700;
  color: var(--hx-dash-muted);
  white-space: nowrap;
  min-width: 2.4em;
}
.stats-env-tile-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  min-height: 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--hx-dash-dim);
  min-width: 0;
}
.stats-env-tile-meta em {
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-env-sparks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px 6px;
  margin: 6px 0 8px;
}
.stats-env-spark-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  min-width: 0;
  padding: 0;
}
.stats-env-spark-lab {
  font-size: 10px;
  font-weight: 800;
  color: var(--hx-dash-muted);
  height: 14px;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-env-spark {
  height: var(--stats-mini-h, 40px);
  overflow: hidden;
}
.stats-env-spark svg {
  width: 100% !important;
  height: var(--stats-mini-h, 40px) !important;
  display: block;
}
@media (max-width: 1023px) {
  .stats-env-tiles,
  .stats-env-sparks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .stats-env-tiles,
  .stats-env-sparks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stats-iot-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 8px;
}
.stats-iot-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.stats-iot-row.on {
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.05);
}
.stats-iot-row:hover {
  border-color: rgba(251, 191, 36, 0.4);
}
.stats-iot-row-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
}
.stats-iot-row-h .stats-iot-state { margin-left: auto; }
.stats-iot-row-kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}
.stats-iot-row-kpi em {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-style: normal;
  padding: 4px 2px;
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
  min-width: 0;
}
.stats-iot-row-kpi b {
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.stats-iot-row-kpi small {
  font-size: 9px;
  font-weight: 700;
  color: var(--hx-dash-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.stats-iot-state {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hx-dash-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.stats-iot-state.on {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
}
.sm-src[data-src="iot-log"] {
  color: #fbbf24;
}

.stats-kpi-row span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  min-width: 0;
}
.stats-kpi-row b {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.stats-kpi-row small {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--hx-dash-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.stats-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}
.stats-chip {
  border: 1px solid var(--hx-dash-border);
  background: rgba(255,255,255,0.04);
  color: var(--hx-dash-muted);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.stats-chip:hover { color: var(--hx-dash-text); border-color: rgba(255,255,255,0.18); }
.stats-insight-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.stats-insight-list li {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--hx-dash-muted);
  cursor: pointer;
}
.stats-insight-list li:hover {
  border-color: rgba(30, 240, 208, 0.28);
  color: var(--hx-dash-text);
}
.stats-insight-key {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(30, 240, 208, 0.12);
  color: #1ef0d0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tiny-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,176,32,0.14);
  color: #ffb020;
}
@media (max-width: 900px) {
  .stats-insight-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .stats-insight-list { grid-template-columns: 1fr; }
}
.tracker-layout { gap: 16px; align-items: stretch; }
.tracker-map { display: flex; flex-direction: column; gap: 14px; border-radius: 22px; }
.floor-plan {
  flex: 1;
  min-height: 300px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 70% 30%, rgba(30,240,208,0.06), transparent 40%),
    rgba(0,0,0,0.25);
}
.metric-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.metric-strip .ms { min-height: 80px; justify-content: space-between; }
.sleep-grid { gap: 16px; align-items: start; }
.sleep-hist-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--hx-dash-border);
}
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.device-card { border-radius: 20px; padding: 16px; }
.alert-item {
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
}
.panel { border-radius: 22px; }
.table-panel { border-radius: 22px; overflow: hidden; }

@media (min-width: 768px) and (max-width: 1023px) {
  .page { padding-left: 16px; padding-right: 16px; }
  .layout { gap: 14px; }
  .hero-snap { grid-template-columns: 1.25fr 0.85fr; gap: 12px; }
  .hero-snap-main { min-height: 236px; padding: 18px; }
  .hero-tiles { gap: 8px; }
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    grid-auto-rows: minmax(148px, auto);
  }
  .bento-card.span2 { grid-column: span 2; }
  .side-col { position: static; }
  .metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tracker-layout { grid-template-columns: 188px 1fr; gap: 12px; }
  .cv-icon { width: 32px !important; height: 32px !important; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-snap { grid-template-columns: 1.4fr 0.9fr; }
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .side-col { top: 80px; }
}
@media (min-width: 1200px) {
  .layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
  .bento { gap: 16px; }
  .hero-snap { gap: 16px; margin-bottom: 18px; }
}
@media (max-width: 639px) {
  .hero-snap { grid-template-columns: 1fr; }
  .hero-snap-main { min-height: 0; padding: 16px; }
  .hero-tiles { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-card, .bento-card.span2 { grid-column: span 1; min-height: 0; }
  .side-col { position: static; }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell-top, .audience-bar, .device-strip, .chip-strip { padding-left: 14px; padding-right: 14px; }
  .cv-icon { width: 32px !important; height: 32px !important; }
}


/* ── Mosaic bento + analysis panel (day/week/month) ── */
.bento.mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(128px, auto);
  gap: 14px;
}
.bento.mosaic .bento-card { order: 0; }
/* Row 1: 재실·움직임·호흡·심박 묶음 바탕 박스 */
.bento.mosaic .vital-bundle {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: var(--hx-dash-r);
  background:
    linear-gradient(165deg, rgba(36, 38, 46, 0.72) 0%, rgba(22, 22, 28, 0.88) 55%, rgba(16, 16, 20, 0.94) 100%);
  border: 1px solid var(--hx-dash-border);
  box-shadow: var(--hx-dash-shadow-card);
  align-items: stretch;
  min-width: 0;
}
.bento.mosaic .vital-bundle .tile-a,
.bento.mosaic .vital-bundle .tile-b,
.bento.mosaic .vital-bundle .tile-c,
.bento.mosaic .vital-bundle .tile-d {
  grid-column: span 1;
  grid-row: span 1;
  min-height: 220px;
  height: 100%;
  align-self: stretch;
  min-width: 0;
}
.bento.mosaic .tile-c.br-card,
.bento.mosaic .tile-d.hr-card,
.bento.mosaic .tile-b.move-card { min-height: 220px; }
/* Row 2: 비상음향 · 수면 · 스트레스 묶음 바탕 박스 */
.bento.mosaic .care-bundle {
  grid-column: 1 / -1;
  display: grid;
  /* 위 4칸(재실·움직임·호흡·심박)과 동일 단위: 음향1 · 수면2 · 스트레스1 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: var(--hx-dash-r);
  background:
    linear-gradient(165deg, rgba(36, 38, 46, 0.72) 0%, rgba(22, 22, 28, 0.88) 55%, rgba(16, 16, 20, 0.94) 100%);
  border: 1px solid var(--hx-dash-border);
  box-shadow: var(--hx-dash-shadow-card);
  align-items: stretch;
  min-width: 0;
}
.bento.mosaic .care-bundle .tile-audio,
.bento.mosaic .care-bundle .tile-f,
.bento.mosaic .care-bundle .tile-h {
  grid-column: auto;
  grid-row: span 1;
  min-height: 320px;
  height: auto;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
}
.bento-card { cursor: pointer; }
.bento-card.focused {
  border-color: rgba(216, 255, 60, 0.55);
  box-shadow: 0 0 0 1px rgba(216, 255, 60, 0.25), var(--hx-dash-shadow-card);
}
.card-drill {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 0;
}
.card-drill:hover { text-decoration: underline; }

button.mini-stat,
button.hero-tile {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.panel[data-analyze],
.stat-mini[data-analyze],
.alert-item[data-analyze],
.hero-snap-side[data-analyze] {
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.panel[data-analyze]:hover,
.stat-mini[data-analyze]:hover { border-color: var(--hx-dash-border-hi); }
.alert-item[data-analyze]:hover { background: rgba(255,255,255,0.05); }
.panel[data-analyze].focused,
.mini-stat.focused,
.alert-item.focused,
.stat-mini.focused,
.hero-tile.focused,
.hero-snap-side.focused {
  border-color: rgba(216, 255, 60, 0.45);
  box-shadow: 0 0 0 1px rgba(216, 255, 60, 0.2);
}

.detail-drawer.analysis-panel {
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  right: 16px; bottom: 16px; top: auto;
  padding: 16px 16px 18px;
  border-radius: 22px;
  z-index: 70;
}
/* 분석 패널은 고정 오버레이: 본문 레이아웃에는 영향을 주지 않는다. */
.detail-title-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.detail-title-wrap strong { font-size: 15px; }
.analysis-now { margin-bottom: 12px; }
.analysis-now .metric { font-size: 30px; margin-bottom: 4px; }
.period-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: 12px; padding: 4px; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--hx-dash-border);
}
.period-tab {
  min-height: 40px; border-radius: 11px; font-weight: 800; font-size: 13px;
  color: var(--hx-dash-muted);
}
.period-tab.on {
  background: #f2f4f7; color: #121214;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.analysis-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 12px;
}
.analysis-kpis .ak {
  background: rgba(255,255,255,0.04); border: 1px solid var(--hx-dash-border);
  border-radius: 14px; padding: 10px 8px; text-align: center;
}
.analysis-kpis .ak span { display: block; font-size: 10px; font-weight: 800; color: var(--hx-dash-dim); margin-bottom: 4px; }
.analysis-kpis .ak b { font-size: 14px; font-weight: 900; }
.trend-up { color: var(--hx-dash-lime); }
.trend-down { color: var(--hx-dash-coral); }
.trend-flat { color: var(--hx-dash-muted); }
.analysis-chart-wrap, .analysis-spark-wrap {
  background: rgba(0,0,0,0.22); border: 1px solid var(--hx-dash-border);
  border-radius: 16px; padding: 10px 8px 6px; margin-bottom: 10px;
}
.analysis-chart, .analysis-spark { width: 100%; height: auto; display: block; }
.analysis-chart { min-height: 140px; }
.analysis-spark { min-height: 72px; }
.analysis-insights { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.analysis-insights li {
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--hx-dash-border);
  font-size: 12px; font-weight: 650; color: var(--hx-dash-muted); line-height: 1.4;
}

/* Tablet+: keep vitals as 1×4 (same as desktop). Stack only on ≤639px. */
@media (min-width: 640px) and (max-width: 1023px) {
  .bento.mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bento.mosaic .vital-bundle {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 12px;
    gap: 10px;
  }
  .bento.mosaic .vital-bundle .tile-a,
  .bento.mosaic .vital-bundle .tile-b,
  .bento.mosaic .vital-bundle .tile-c,
  .bento.mosaic .vital-bundle .tile-d { grid-column: span 1; grid-row: span 1; min-height: 210px; }
  .bento.mosaic .care-bundle {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    padding: 12px;
    gap: 10px;
  }
  .bento.mosaic .care-bundle .tile-audio,
  .bento.mosaic .care-bundle .tile-f,
  .bento.mosaic .care-bundle .tile-h { min-height: 280px; }
}
@media (max-width: 639px) {
  .bento.mosaic { grid-template-columns: 1fr; }
  .bento.mosaic .vital-bundle {
    grid-column: span 1;
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 10px;
  }
  .bento.mosaic .care-bundle {
    grid-column: span 1;
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 10px;
  }
  .bento.mosaic .vital-bundle .tile-a,
  .bento.mosaic .vital-bundle .tile-b,
  .bento.mosaic .vital-bundle .tile-c,
  .bento.mosaic .vital-bundle .tile-d,
  .bento.mosaic .care-bundle .tile-audio,
  .bento.mosaic .care-bundle .tile-f,
  .bento.mosaic .care-bundle .tile-h { grid-column: span 1; grid-row: span 1; min-height: 0; }
  .detail-drawer.analysis-panel {
    left: 12px; right: 12px; width: auto; bottom: 12px;
    max-height: 70vh;
  }
  .analysis-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* === SCORE + CHART DNA (FitFuel/Finor-inspired) === */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.score-block{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:4px 0 10px;min-width:0}
.score-block--inline{align-items:baseline}
.score-block--compact{gap:6px;margin:2px 0 8px}
.score-block--center{flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;margin:0}
.score-block--end{flex-direction:column;align-items:flex-end;gap:2px;margin:0}
.score-num{
  font-size:40px;font-weight:900;letter-spacing:-1.2px;line-height:0.95;
  font-variant-numeric:tabular-nums;color:#fff;min-width:0;
}
.score-num--hero{font-size:52px;letter-spacing:-1.6px}
.score-num--sm{font-size:26px;letter-spacing:-0.6px;font-weight:800;color:rgba(255,255,255,0.88)}
.score-unit{font-size:12px;font-weight:750;color:var(--hx-dash-dim);letter-spacing:0.2px;line-height:1.2}
.score-aside{display:flex;flex-direction:column;gap:4px;min-width:0;padding-bottom:4px}
.score-label{font-size:11px;font-weight:800;color:var(--hx-dash-dim);margin-bottom:4px}
.trend-badge{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;
  background:rgba(255,111,20,0.12);border:1px solid rgba(255,111,20,0.28);color:#ffc49a;
  max-width:100%;
}
.score-card--primary{border-color:rgba(216,255,60,0.28)}
.score-card--secondary .gauge-wrap--mini{opacity:0.92}
#card-stress .score-num--hero{color:#fff}
.gauge-wrap--secondary{margin-top:4px;gap:12px}
.gauge-wrap--mini .gauge--mini{width:72px;height:72px;flex:0 0 72px}
.gauge--accent{width:96px;height:96px;flex:0 0 96px}
.overall-box{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.overall-box .score-num--hero{font-size:48px;color:var(--cv-pobc)}
.sg-label .score-num--hero{font-size:42px;color:#fff}
.sg-label .score-unit{display:block;margin-top:2px}
.analysis-now .score-num--hero{font-size:44px;margin:2px 0 8px}
.analysis-kpis{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0;
}
.analysis-kpis .ak{
  padding:12px 12px 10px;border-radius:16px;background:rgba(255,255,255,0.035);
  border:1px solid var(--hx-dash-border);min-width:0;
}
.analysis-kpis .ak span{display:block;font-size:10px;font-weight:800;color:var(--hx-dash-dim);margin-bottom:6px;letter-spacing:0.2px}
.analysis-kpis .ak b{display:block;font-size:18px;font-weight:900;letter-spacing:-0.4px;line-height:1.1;word-break:break-word}
.cv-chart{width:100%;height:auto;display:block;margin-top:8px}
.cv-bars{min-height:120px}
.cv-bar-val{font-size:9px;font-weight:800}
.cv-bar-lb{font-size:9px;font-weight:700}
.cv-glowline{min-height:56px;filter:drop-shadow(0 0 6px rgba(216,255,60,0.15))}
.cv-stack{margin:8px 0 12px}
.cv-stack-bar{
  display:flex;height:18px;border-radius:999px;overflow:hidden;gap:2px;
  background:rgba(255,255,255,0.06);
}
.cv-stack-seg{display:block;height:100%;min-width:2px}
.cv-stack-legend{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:10px}
.cv-stack-leg{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--hx-dash-muted)}
.cv-stack-leg i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.cv-stack-leg b{color:#fff;font-weight:850}
.cv-pill-row{display:flex;gap:5px;margin:8px 0 10px}
.cv-pill-seg{
  flex:1;height:28px;border-radius:999px;background:rgba(255,255,255,0.08);
  min-width:0;
}
.cv-pill-seg.on{box-shadow:0 0 10px rgba(255,111,20,0.25)}
.chart-caption{font-size:10px;font-weight:800;color:var(--hx-dash-dim);margin:6px 0 2px}
.soft-h{font-size:12px;font-weight:800;color:var(--hx-dash-muted);margin:12px 0 8px}
.sleep-timeline{height:22px;border-radius:999px;overflow:hidden}
.sleep-seg{top:0;bottom:0;border-radius:0;opacity:1}
.hero-tile--stress strong{font-size:17px;font-weight:800;color:#ffc49a}

/* ── Body composition + urine cards (personal/family demo) ── */
.body-urine-cluster{margin-top:14px}
.body-urine-lead{margin:0 0 12px;line-height:1.45}
.body-urine-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch;
}
.body-urine-card{
  display:flex;flex-direction:column;gap:12px;min-width:0;width:100%;text-align:left;
  padding:16px;border-radius:20px;color:inherit;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background:linear-gradient(160deg,#13171f 0%,#0d1017 55%,#0a0d13 100%);
  border:1px solid var(--hx-dash-border);
  box-shadow:var(--hx-dash-shadow-card);
  transition:border-color .2s,box-shadow .2s,transform .15s;
}
.body-urine-card:hover{
  border-color:rgba(124,228,240,.35);
  box-shadow:0 0 0 1px rgba(124,228,240,.18),var(--hx-dash-shadow-card);
}
.body-urine-card:focus-visible{
  outline:2px solid rgba(124,228,240,.55);outline-offset:2px;
}
.body-urine-metrics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;
}
.bu-metric{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  padding:10px 10px 9px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
}
.bu-metric span{font-size:11px;font-weight:760;color:var(--hx-dash-muted)}
.bu-metric b{font-size:20px;font-weight:880;color:#fff;line-height:1.08;white-space:nowrap}
.bu-metric small{font-size:10px;font-weight:760;color:var(--hx-dash-dim);min-height:12px}
.body-urine-note{margin:0;color:var(--hx-dash-dim)}
.body-urine-open-hint{
  margin-top:auto;font-size:10px;font-weight:750;color:rgba(124,228,240,.72);text-align:center;
}

/* Body / urine detail modals */
.body-urine-panel{width:min(480px,100%);max-height:min(90vh,720px)}
.body-urine-panel--wide{width:min(560px,100%)}
.body-urine-panel--report{width:min(440px,100%);max-height:min(92vh,820px)}
.body-urine-panel--report .env-modal-body{gap:14px;padding-top:4px}

/* Report modal headers */
.hx-report-h{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06);
}
.hx-report-h-main{display:flex;align-items:flex-start;gap:10px;min-width:0}
.hx-report-h-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.hx-report-ico{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
}
.hx-report-ico--urine{color:#4ade80;background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.28)}
.hx-report-ico--body{color:#5eead4;background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.28)}
.hx-report-sub{margin:4px 0 0;font-size:11px;font-weight:700;color:var(--hx-dash-dim);line-height:1.35}
.hx-live-pill{
  display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;
  font-size:10px;font-weight:860;letter-spacing:.04em;color:#5eead4;
  border:1px solid rgba(94,234,212,.4);background:rgba(94,234,212,.1);
}

/* ── Body composition report ── */
.bc-ble-bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
}
.bc-ble-bar .bu-ble-actions{margin:0}
.bc-ble-bar .btn-ghost.sm{min-height:32px;padding:6px 10px;font-size:11px}
.bc-hero{
  position:relative;display:grid;grid-template-columns:1fr auto;gap:8px 16px;
  padding:16px 16px 28px;border-radius:16px;
  background:linear-gradient(160deg,rgba(94,234,212,.1),rgba(91,140,255,.06));
  border:1px solid rgba(94,234,212,.2);overflow:hidden;
}
.bc-hero-weight{font-size:34px;font-weight:900;color:#fff;line-height:1;letter-spacing:-.02em}
.bc-hero-weight small{font-size:14px;font-weight:750;color:var(--hx-dash-muted)}
.bc-hero-goal{margin-top:8px;font-size:12px;font-weight:720;color:var(--hx-dash-muted)}
.bc-heart{color:#f87171;margin-right:2px}
.bc-hero-right{text-align:right}
.bc-hero-score{font-size:36px;font-weight:900;color:#5eead4;line-height:1}
.bc-hero-band{margin-top:6px;font-size:13px;font-weight:820;color:#5eead4}
.bc-spark{grid-column:1/-1;width:100%;height:36px;display:block;margin-top:4px}
.bc-metrics{display:flex;flex-direction:column;gap:0}
.bc-metric-row{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:11px 2px;border-bottom:1px solid rgba(255,255,255,.06);
}
.bc-metric-row:last-child{border-bottom:0}
.bc-metric-label{font-size:13px;font-weight:780;color:#e8eef8}
.bc-metric-val{font-size:13px;font-weight:860;color:#fff;text-align:right;min-width:72px}
.bc-metric-val small{font-size:11px;font-weight:720;color:var(--hx-dash-dim)}
.bc-status-pill{
  justify-self:end;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:820;
  border:1px solid transparent;white-space:nowrap;
}
.bc-status-pill--ok{color:#5eead4;background:rgba(94,234,212,.12);border-color:rgba(94,234,212,.3)}
.bc-status-pill--warn{color:#fbbf24;background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.28)}
.bc-section{display:flex;flex-direction:column;gap:8px}
.bc-section-title{margin:0;font-size:12px;font-weight:820;color:#7dd3fc}
.bc-seg-list{display:flex;flex-direction:column;gap:6px}
.bc-seg-row{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  font-size:12px;font-weight:760;color:var(--hx-dash-muted);
}
.bc-seg-row b{color:#fff;font-weight:820;text-align:right}
.bc-delta-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bc-delta-card{
  padding:12px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;
}
.bc-delta-card span{font-size:11px;font-weight:750;color:var(--hx-dash-muted)}
.bc-delta-card b{font-size:15px;font-weight:880;color:#fbbf24}
.bc-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;
  border:0;border-radius:14px;cursor:pointer;color:#fff;font-size:14px;font-weight:860;
  background:linear-gradient(90deg,#14b8a6 0%,#3b82f6 100%);
  box-shadow:0 8px 24px rgba(59,130,246,.25);
}
.bc-cta:hover{filter:brightness(1.06)}
.bc-cta-ico{font-size:16px}

/* ── Urine CYBOW color-bar report ── */
.urine-score-card{
  padding:16px;border-radius:16px;
  background:linear-gradient(160deg,rgba(74,222,128,.1),rgba(91,140,255,.06));
  border:1px solid rgba(74,222,128,.22);
}
.urine-score--warn{
  background:linear-gradient(160deg,rgba(251,191,36,.1),rgba(91,140,255,.06));
  border-color:rgba(251,191,36,.28);
}
.urine-score--empty{border-style:dashed}
.urine-score-num{font-size:40px;font-weight:900;color:#4ade80;line-height:1;letter-spacing:-.02em}
.urine-score--warn .urine-score-num{color:#fbbf24}
.urine-score--ok .urine-score-num{color:#5eead4}
.urine-score-num small{font-size:16px;font-weight:800;margin-left:2px}
.urine-score-band{margin-top:6px;font-size:13px;font-weight:820;color:#4ade80}
.urine-score--warn .urine-score-band{color:#fbbf24}
.urine-score--ok .urine-score-band{color:#5eead4}
.urine-key-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.urine-key-badge{
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  padding:8px 9px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);
  min-width:0;
}
.urine-key-badge i{width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.25)}
.urine-key-badge span{font-size:10px;font-weight:750;color:var(--hx-dash-dim)}
.urine-key-badge b{font-size:12px;font-weight:860;color:#e8eef8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.urine-key-badge--warn b{color:#f9a8d4}
.urine-key-badge--ok b{color:#a7f3d0}

.urine-bars{display:flex;flex-direction:column;gap:2px}
.urine-bars-title{margin:0 0 8px;font-size:12px;font-weight:820;color:#7dd3fc}
.urine-bar-row{
  display:grid;grid-template-columns:minmax(108px,.9fr) minmax(0,1.4fr) minmax(72px,.55fr);
  gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.urine-bar-label{min-width:0;line-height:1.25}
.urine-bar-label b{display:block;font-size:12px;font-weight:840;color:#fff}
.urine-bar-label span{font-size:10px;font-weight:700;color:var(--hx-dash-dim)}
.urine-bar-track{display:flex;gap:3px;align-items:center;min-width:0}
.urine-bar-pad{
  flex:1 1 0;min-width:0;height:18px;border-radius:4px;
  border:1.5px solid rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.urine-bar-pad.is-on{
  border-color:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.95),inset 0 0 0 1px rgba(0,0,0,.15);
  transform:scaleY(1.12);
}
.urine-bar-val{font-size:11px;font-weight:820;text-align:right;white-space:nowrap}
.urine-bar-val--ok{color:#4ade80}
.urine-bar-val--warn{color:#f9a8d4}

.urine-hist-block{display:flex;flex-direction:column;gap:6px}
.urine-hist-empty{margin:0}
.urine-hist-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:160px;overflow:auto}
.urine-hist-list li{
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 10px;
  padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  font-size:11px;font-weight:700;color:var(--hx-dash-muted);
}
.urine-hist-date{display:inline-flex;align-items:center;gap:6px}
.urine-hist-cal{
  width:12px;height:12px;border-radius:2px;border:1.5px solid currentColor;opacity:.7;
  position:relative;display:inline-block;
}
.urine-hist-cal:before{
  content:"";position:absolute;left:2px;right:2px;top:3px;height:1px;background:currentColor;
}
.urine-hist-score{grid-column:2;grid-row:1/3;align-self:center;color:#c7d2fe;font-weight:860}
.urine-hist-sum{grid-column:1;color:var(--hx-dash-dim)}

.urine-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;
  border:0;border-radius:14px;cursor:pointer;color:#fff;font-size:15px;font-weight:880;
  background:linear-gradient(90deg,#2563eb 0%,#3b82f6 100%);
  box-shadow:0 8px 24px rgba(37,99,235,.28);
}
.urine-cta:hover{filter:brightness(1.06)}
.urine-cta svg{flex:0 0 auto}

.bu-detail-hero{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:14px;border-radius:16px;
  background:linear-gradient(135deg,rgba(124,228,240,.12),rgba(91,140,255,.08));
  border:1px solid rgba(124,228,240,.22);
}
.bu-detail-hero .bu-hero-val{font-size:28px;font-weight:900;color:#fff;line-height:1}
.bu-detail-hero .bu-hero-val small{font-size:12px;font-weight:700;color:var(--hx-dash-muted);margin-left:4px}
.bu-detail-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
}
.bu-detail-cell{
  padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.bu-detail-cell span{display:block;font-size:10px;font-weight:750;color:var(--hx-dash-muted);margin-bottom:4px}
.bu-detail-cell b{font-size:16px;font-weight:880;color:#fff}
.bu-detail-cell small{font-size:10px;color:var(--hx-dash-dim);margin-left:2px}
.bu-trend-wrap{margin-top:4px}
.bu-trend-wrap svg{width:100%;height:48px;display:block}
.bu-trend-cap{font-size:10px;font-weight:700;color:var(--hx-dash-dim);margin:4px 0 0}

.urine-cam-block{
  display:flex;flex-direction:column;gap:10px;
  padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
}
.urine-cam-actions{display:flex;flex-wrap:wrap;gap:8px}
.urine-cam-actions .btn-cta,.urine-cam-actions .btn-ghost{flex:1 1 120px;min-height:40px}
.urine-cam-preview{
  position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  background:#0a0d13;border:1px solid rgba(124,228,240,.2);
}
.urine-cam-preview video,.urine-cam-preview img,.urine-cam-preview canvas{
  width:100%;height:100%;object-fit:cover;display:block;
}
.urine-cam-preview .urine-roi{
  position:absolute;left:8%;right:8%;top:38%;height:24%;
  border:1.5px dashed rgba(124,228,240,.65);border-radius:8px;pointer-events:none;
}
.urine-cam-hint{font-size:11px;font-weight:700;color:var(--hx-dash-muted);line-height:1.45;margin:0}
.urine-cam-hint b{color:#9fdfff;font-weight:820}
.urine-demo-banner{
  padding:8px 10px;border-radius:10px;font-size:11px;font-weight:750;line-height:1.4;
  color:#9fdfff;background:rgba(124,228,240,.08);border:1px solid rgba(124,228,240,.28);
}
.urine-demo-banner--cool{
  color:#b8d4ff;background:rgba(91,140,255,.1);border-color:rgba(91,140,255,.28);
}
.urine-ref-chart{
  padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(124,228,240,.16);
  display:flex;flex-direction:column;gap:10px;
}
.urine-ref-chart-title{margin:0;font-size:11px;font-weight:800;color:#9fdfff}
.urine-ref-pads{display:flex;flex-direction:column;gap:7px;max-height:200px;overflow:auto}
.urine-ref-pad{
  display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;align-items:center;
}
.urine-ref-pad-label{display:flex;flex-direction:column;gap:1px;min-width:0}
.urine-ref-pad-label b{font-size:11px;font-weight:860;color:#fff}
.urine-ref-pad-label span{font-size:10px;font-weight:700;color:var(--hx-dash-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.urine-ref-swatches{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.urine-ref-swatch{
  width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.urine-auto-ok{
  padding:10px 12px;border-radius:12px;font-size:12px;font-weight:800;line-height:1.4;
  color:#7ce4f0;background:rgba(124,228,240,.12);border:1px solid rgba(124,228,240,.35);
}
.urine-analyzing,.urine-preview-placeholder{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:rgba(255,255,255,.55);font-size:12px;font-weight:750;text-align:center;padding:12px;
}
.urine-analyzing{color:#7ce4f0}
.urine-result-table{width:100%;border-collapse:collapse;font-size:12px}
.urine-result-table th,.urine-result-table td{
  padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;vertical-align:middle;
}
.urine-result-table th{font-size:10px;font-weight:780;color:var(--hx-dash-muted)}
.urine-chip{
  display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:middle;
  border:1px solid rgba(255,255,255,.2);margin-right:6px;
}
.urine-grade-ok{color:#7ce4f0;font-weight:800}
.urine-grade-warn{color:#c9b8ff;font-weight:800}
.urine-summary-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;background:rgba(124,228,240,.08);border:1px solid rgba(124,228,240,.2);
}
.urine-file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}

/* 앳플리 BLE device card */
.bu-device-card{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:14px;
  background:linear-gradient(135deg,rgba(124,228,240,.1),rgba(91,140,255,.08));
  border:1px solid rgba(124,228,240,.22);
}
.bu-device-brand{font-size:11px;font-weight:800;letter-spacing:.04em;color:#7ce4f0;text-transform:none}
.bu-device-model{font-size:15px;font-weight:880;color:#fff;margin:2px 0 4px}
.bu-ble-actions{margin:2px 0}
.bu-ble-status{
  flex:0 0 auto;padding:6px 10px;border-radius:999px;font-size:10px;font-weight:820;
  border:1px solid rgba(255,255,255,.14);white-space:nowrap;
}
.bu-ble-status--ok{color:#7ce4f0;background:rgba(124,228,240,.12);border-color:rgba(124,228,240,.35)}
.bu-ble-status--off{color:#9db4ff;background:rgba(91,140,255,.1);border-color:rgba(91,140,255,.28)}
.bu-ble-status--wait{color:#b8d4ff;background:rgba(157,180,255,.12);border-color:rgba(157,180,255,.3)}
.bu-ble-status--unsupported{color:#a8b4c8;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}

@media (max-width: 980px){
  .body-urine-row{grid-template-columns:1fr}
}
@media (max-width: 639px){
  .body-urine-metrics{grid-template-columns:1fr}
  .bu-detail-grid{grid-template-columns:1fr 1fr}
  .urine-ref-pad{grid-template-columns:72px minmax(0,1fr)}
  .urine-bar-row{grid-template-columns:minmax(90px,.85fr) minmax(0,1.2fr) minmax(64px,.5fr)}
  .urine-key-row{grid-template-columns:1fr}
  .bc-delta-row{grid-template-columns:1fr}
}

/* ── Env control cluster (단일 실내카드 + 워치·건강앱) ── */
.env-control-cluster{margin-top:14px;border-radius:22px;overflow:hidden}
.env-cluster-lead{margin:0 0 12px;line-height:1.45}
.env-health-row{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.9fr);gap:14px;align-items:stretch;
}
.env-unified-card{
  display:flex;flex-direction:column;gap:14px;text-align:left;
  background:var(--hx-dash-card);border:1px solid var(--hx-dash-border);
  border-radius:22px;padding:16px;box-shadow:var(--hx-dash-shadow-card);
  color:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s;
  appearance:none;-webkit-appearance:none;width:100%;min-width:0;
}
.env-unified-card:hover{border-color:var(--hx-dash-border-hi)}
.env-unified-card.focused{
  border-color:rgba(216,255,60,.55);
  box-shadow:0 0 0 1px rgba(216,255,60,.25),var(--hx-dash-shadow-card);
}
.env-unified-card.state-ok{border-color:rgba(56,189,248,.28)}
.env-unified-card.state-warn{border-color:rgba(255,176,26,.35)}
.env-unified-card.state-crit{border-color:rgba(255,45,106,.4)}
.env-unified-h .r{display:flex;gap:6px;align-items:center}
.env-compose-row{
  display:grid;grid-template-columns:1.2fr 0.8fr;gap:12px;align-items:stretch;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.07);
}
.env-light-thumb{
  display:flex;flex-direction:column;gap:8px;min-width:0;padding:0;border:none;
  background:transparent;color:inherit;cursor:pointer;text-align:left;
}
.env-light-thumb .light-visual{aspect-ratio:3/2;min-height:0;flex:1;width:100%}
.env-open-hint{
  font-size:10px;font-weight:750;color:var(--hx-dash-dim);text-align:center;
}
.env-actuator-stack{
  display:flex;flex-direction:column;gap:8px;min-width:0;
}
.scene-btn--stack{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  min-height:56px;padding:10px 12px;border-radius:16px;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid var(--hx-dash-border);color:inherit;
  transition:border-color .18s,background .18s,box-shadow .18s;flex:1;
}
.scene-btn--stack:hover{border-color:var(--hx-dash-border-hi)}
.scene-btn--stack.on{
  border-color:rgba(30,240,208,.45);background:rgba(30,240,208,.08);
  box-shadow:0 0 0 1px rgba(30,240,208,.12);
}
.scene-btn-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.scene-btn-txt strong{font-size:13px;font-weight:850}
.scene-btn-txt small{font-size:11px;font-weight:700;color:var(--hx-dash-dim)}
.env-aq-block{
  display:flex;flex-direction:column;gap:10px;
}
.env-gauge-row{display:flex;align-items:flex-end;gap:14px;min-width:0}
.env-semi-gauge{position:relative;flex:0 0 168px;height:108px}
.env-semi-svg{width:100%;height:100%;display:block}
.env-semi-track{stroke:rgba(255,255,255,.08)}
.env-semi-arc{stroke:var(--cv-aqi);transition:stroke-dashoffset .55s cubic-bezier(.2,.7,.3,1),stroke .3s}
.env-semi-center{
  position:absolute;left:0;right:0;bottom:2px;text-align:center;pointer-events:none;
}
.env-semi-center .score-num--hero{font-size:38px;color:#fff;text-shadow:0 0 20px rgba(56,189,248,.22)}
.env-grade{font-size:12px;font-weight:800;color:var(--hx-dash-muted);margin-top:2px}
.env-gauge-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-bottom:4px}
.env-gauge-meta .spark{margin-top:2px}
.env-metric-chips{
  display:flex;flex-wrap:nowrap;gap:8px;margin-top:2px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.env-metric-chips--row{
  margin-top:4px;padding:0;border:none;background:transparent;
}
.env-chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--hx-dash-border);
  font-size:11px;font-weight:750;color:var(--hx-dash-muted);
  flex:1 1 0;min-width:max-content;justify-content:center;white-space:nowrap;
}
.env-chip b{color:var(--hx-dash-text);font-weight:900;font-variant-numeric:tabular-nums}
.env-chip small{font-size:10px;color:var(--hx-dash-dim);font-weight:700}
.env-chip .cv-icon{width:22px!important;height:22px!important;border-radius:7px}
.light-visual{
  position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/2;
  background:#010204;border:1px solid var(--hx-dash-border);
}
.light-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;background:#010204;
  transition:opacity .28s ease;
  pointer-events:none;
}
.light-img--on{opacity:1;z-index:1}
.light-img--off{opacity:0;z-index:0}
.light-visual[data-on="0"] .light-img--on{opacity:0;z-index:0}
.light-visual[data-on="0"] .light-img--off{opacity:1;z-index:1}
.light-visual[data-on="0"]{background:#000}
.light-visual-badge{
  position:absolute;left:12px;bottom:12px;z-index:1;
  padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800;
  background:rgba(8,10,14,.72);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}
.watch-health-card{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  padding:16px;border-radius:22px;
  background:linear-gradient(165deg,#14171d 0%,#0c0e12 55%,#0a0c10 100%);
  border:1px solid rgba(255,255,255,.1);box-shadow:var(--hx-dash-shadow-card);
}
.watch-product-fig{
  margin:0;position:relative;border-radius:18px;overflow:hidden;
  aspect-ratio:5/4;background:#06080c;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.watch-product-img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  filter:saturate(1.05) contrast(1.04);
}
.watch-product-cap{
  position:absolute;left:10px;bottom:10px;z-index:1;
  margin:0;padding:5px 10px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.02em;
  color:rgba(255,255,255,.88);
  background:rgba(6,8,12,.72);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}
.watch-body-duo{
  display:grid;grid-template-columns:1.15fr .95fr;gap:10px;align-items:stretch;
}
.watch-body-energy,.watch-body-age{
  display:flex;flex-direction:column;gap:8px;min-width:0;
  padding:12px;border-radius:16px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
}
.watch-body-energy{
  background:linear-gradient(160deg,rgba(154,230,110,.1),rgba(255,255,255,.02) 55%);
  border-color:rgba(154,230,110,.22);
}
.watch-body-age{
  background:linear-gradient(160deg,rgba(46,230,200,.1),rgba(255,255,255,.02) 55%);
  border-color:rgba(46,230,200,.22);
}
.wbe-h,.wba-h{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:11px;font-weight:800;color:var(--hx-dash-muted);
}
.wbe-h .cv-icon,.wba-h .cv-icon{width:26px!important;height:26px!important;border-radius:9px}
.wbe-gauge{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:end;min-height:88px}
.wbe-bar-track{
  position:relative;width:18px;height:88px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
}
.wbe-bar-fill{
  position:absolute;left:0;right:0;bottom:0;border-radius:999px;
  background:linear-gradient(180deg,#c8f56a 0%,#9ae66e 40%,#2ee6c8 100%);
  box-shadow:0 0 14px rgba(154,230,110,.35);
  transition:height .55s cubic-bezier(.2,.7,.3,1);
}
.wbe-bar-fill[data-level="mid"]{background:linear-gradient(180deg,#ffe08a 0%,#ffb01a 55%,#ff8a4c 100%);box-shadow:0 0 14px rgba(255,176,26,.3)}
.wbe-bar-fill[data-level="lo"]{background:linear-gradient(180deg,#ff9a7a 0%,#ff2d6a 100%);box-shadow:0 0 14px rgba(255,45,106,.28)}
.wbe-readout{display:flex;align-items:baseline;gap:4px;padding-bottom:2px}
.wbe-readout b,.wba-readout b{
  font-size:34px;font-weight:900;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-1px;
  text-shadow:0 0 18px rgba(154,230,110,.18);
}
.wba-readout b{text-shadow:0 0 18px rgba(46,230,200,.2)}
.wbe-readout small,.wba-readout small{font-size:12px;font-weight:800;color:var(--hx-dash-dim)}
.wba-readout{display:flex;align-items:baseline;gap:4px;margin-top:2px}
.wba-delta{
  font-size:11px;font-weight:750;color:var(--hx-dash-muted);
  padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.wba-delta.good{color:var(--hx-dash-teal);border-color:rgba(30,240,208,.28);background:rgba(30,240,208,.08)}
.wba-delta.warn{color:var(--hx-dash-amber);border-color:rgba(255,176,26,.3);background:rgba(255,176,26,.08)}
.wbe-hint,.wba-hint{margin:0;line-height:1.35}
.cv-icon--energy{color:#9ae66e;background:rgba(154,230,110,.14);box-shadow:0 0 14px rgba(154,230,110,.22)}
.cv-icon--bodyAge{color:#2ee6c8;background:rgba(46,230,200,.14);box-shadow:0 0 14px rgba(46,230,200,.22)}
.watch-link-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.watch-link-label{font-size:12px;font-weight:750;color:var(--hx-dash-muted)}
.watch-link-status{
  font-size:11px;font-weight:850;padding:5px 10px;border-radius:999px;
  background:rgba(30,240,208,.12);color:var(--hx-dash-teal);border:1px solid rgba(30,240,208,.35);
}
.watch-link-status.demo{
  background:rgba(255,176,26,.1);color:var(--hx-dash-amber);border-color:rgba(255,176,26,.35);
}
.watch-rings{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.watch-ring{position:relative;display:grid;place-items:center;aspect-ratio:1}
.watch-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.wr-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:6}
.wr-arc{fill:none;stroke-width:6;stroke-linecap:round;
  stroke-dasharray:176;stroke-dashoffset:176;transition:stroke-dashoffset .5s ease}
.wr-arc--stress{stroke:#9ae66e}
.wr-arc--health{stroke:#2ee6c8}
.wr-arc--energy{stroke:#8b7cff}
.wr-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.wr-label b{font-size:13px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.wr-label small{font-size:9px;font-weight:750;color:var(--hx-dash-dim)}
.watch-metric-list{display:flex;flex-direction:column;gap:8px}
.watch-metric-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:11px 12px;border-radius:16px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
}
.watch-metric-row .cv-icon{width:36px!important;height:36px!important;border-radius:12px}
.wm-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.wm-txt>span{font-size:11px;font-weight:700;color:var(--hx-dash-dim)}
.wm-txt strong{font-size:15px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.wm-txt small{font-size:10px;font-weight:700;color:var(--hx-dash-dim)}
.pill.tiny{font-size:10px;padding:3px 8px}
.watch-foot{margin:0;text-align:center}
.cv-icon--bp{color:#5eb8ff;background:rgba(94,184,255,.14);box-shadow:0 0 16px rgba(94,184,255,.25)}
.cv-icon--glucose{color:#5eb8ff;background:rgba(94,184,255,.12);box-shadow:0 0 14px rgba(94,184,255,.2)}
.cv-icon--spo2{color:#4fd1ff;background:rgba(79,209,255,.12);box-shadow:0 0 14px rgba(79,209,255,.22)}
.cv-icon--activity{color:#6ee7a8;background:rgba(110,231,168,.12);box-shadow:0 0 14px rgba(110,231,168,.2)}
.cv-icon--exercise{color:#ff8a4c;background:rgba(255,138,76,.12);box-shadow:0 0 14px rgba(255,138,76,.22)}
.cv-icon--watch{color:#9db4ff;background:rgba(157,180,255,.14);box-shadow:0 0 14px rgba(157,180,255,.22)}
.light-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-light{
  min-height:40px;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800;
  background:rgba(255,255,255,.05);border:1px solid var(--hx-dash-border);color:var(--hx-dash-muted);
  transition:.18s;
}
.btn-light.on{background:rgba(251,191,36,.1);color:var(--cv-light);border-color:rgba(251,191,36,.28)}
.btn-light.on.active{background:rgba(251,191,36,.22);border-color:rgba(251,191,36,.55);box-shadow:0 0 16px rgba(251,191,36,.15)}
.btn-light.off.active{background:rgba(255,255,255,.1);color:var(--hx-dash-text);border-color:var(--hx-dash-border-hi)}
.light-timer{
  padding:12px;border-radius:16px;background:rgba(255,255,255,.03);
  border:1px solid var(--hx-dash-border);
}
.light-timer-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.light-timer-h strong{font-size:12px;font-weight:800}
.timer-presets{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.timer-label{font-size:10px;font-weight:800;color:var(--hx-dash-dim);min-width:52px}
.timer-chip{
  min-height:34px;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;
  background:rgba(255,255,255,.05);border:1px solid var(--hx-dash-border);color:var(--hx-dash-muted);
  transition:.15s;
}
.timer-chip:hover{color:var(--hx-dash-text);border-color:var(--hx-dash-border-hi)}
.timer-chip.on{
  background:rgba(30,240,208,.14);color:var(--hx-dash-teal);border-color:rgba(30,240,208,.4);
}
.light-timer-status{margin:0;font-size:11px}
.env-control-footer{
  margin-top:14px;padding:14px;border-radius:18px;
  background:rgba(255,255,255,.02);border:1px solid var(--hx-dash-border);
}
.auto-rules--compact{margin-bottom:10px}
.scene-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px}
.scene-row--compact .scene-btn{min-height:84px;padding:12px}
.scene-btn{
  display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:18px;text-align:left;
  background:var(--hx-dash-card-soft);border:1px solid var(--hx-dash-border);color:inherit;min-height:96px;
  transition:border-color .18s,background .18s;
}
.scene-btn.on{border-color:rgba(30,240,208,.45);background:rgba(30,240,208,.08)}
.auto-rules{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.auto-toggle{
  display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid var(--hx-dash-border);cursor:pointer;
}
.auto-toggle em{grid-column:2;font-style:normal;font-size:11px;color:var(--hx-dash-dim)}
.suggest-rail{display:flex;flex-direction:column;gap:10px}
.suggest-empty{
  padding:12px;border-radius:14px;font-size:12px;color:var(--hx-dash-dim);
  border:1px dashed var(--hx-dash-border);
}
.suggest-chip{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:12px;border-radius:16px;
  background:rgba(255,176,26,.08);border:1px solid rgba(255,176,26,.28);
}
.suggest-chip.ok{background:rgba(30,240,208,.07);border-color:rgba(30,240,208,.28)}
.suggest-chip .sc-actions{display:flex;flex-direction:column;gap:6px}
.btn-scene{
  min-height:40px;padding:8px 14px;border-radius:999px;background:rgba(251,191,36,.14);
  color:var(--cv-light);border:1px solid rgba(251,191,36,.4);font-weight:800;font-size:12px;
}

/* ── Personal/family connection strip (empty center of env card) ── */
.env-conn-zone{
  display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:168px;padding:18px 14px 14px;margin-top:2px;
  border-radius:18px;
  background:linear-gradient(165deg,rgba(18,22,28,.72),rgba(10,12,16,.88));
  border:1px solid rgba(46,230,200,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 28px rgba(46,230,200,.06);
}
body[data-audience="personal"] .env-conn-zone,
body[data-audience="family"] .env-conn-zone{
  display:flex;
}
body[data-audience="facility"] .env-conn-zone{display:none!important}
.env-analyze-pill{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  margin:0;padding:8px 16px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:-.01em;
  color:rgba(220,228,236,.82);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  transition:border-color .18s,color .18s,background .18s;
}
.env-analyze-pill:hover{
  color:#fff;border-color:rgba(46,230,200,.4);
  background:rgba(46,230,200,.1);
}
.env-conn-actions{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;width:100%;max-width:560px;
}
.env-conn-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:112px;padding:14px 10px;border-radius:18px;cursor:pointer;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.1);
  color:var(--hx-dash-text);
  transition:border-color .18s,background .18s,transform .15s,box-shadow .18s;
}
.env-conn-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(46,230,200,.4);
  background:rgba(46,230,200,.08);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.env-conn-btn:active{transform:scale(.98)}
.env-conn-ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
}
.env-conn-btn--iot .env-conn-ico{
  color:#2ee6c8;background:rgba(46,230,200,.12);border-color:rgba(46,230,200,.28);
  box-shadow:0 0 16px rgba(46,230,200,.18);
}
.env-conn-btn--contacts .env-conn-ico{
  color:#9ae66e;background:rgba(154,230,110,.12);border-color:rgba(154,230,110,.28);
  box-shadow:0 0 16px rgba(154,230,110,.16);
}
.env-conn-btn--msg .env-conn-ico{
  color:#7ec8ff;background:rgba(126,200,255,.12);border-color:rgba(126,200,255,.28);
  box-shadow:0 0 16px rgba(126,200,255,.16);
}
.env-conn-label{
  font-size:13.5px;font-weight:850;letter-spacing:-.02em;text-align:center;line-height:1.25;
}
.env-conn-badge{
  font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;
  border:1px solid transparent;
}
.env-conn-badge.demo{
  color:var(--hx-dash-amber);background:rgba(255,176,26,.1);border-color:rgba(255,176,26,.32);
}
.env-conn-badge.set{
  color:var(--hx-dash-teal);background:rgba(30,240,208,.1);border-color:rgba(30,240,208,.32);
}
.env-conn-note{margin:0;text-align:center;max-width:42ch;line-height:1.4}
@media(max-width:720px){
  .env-conn-actions{grid-template-columns:1fr;max-width:none}
  .env-conn-btn{min-height:72px;flex-direction:row;justify-content:flex-start;padding:12px 14px;gap:12px}
  .env-conn-ico{width:44px;height:44px;border-radius:14px;flex:0 0 auto}
  .env-conn-label{flex:1;text-align:left}
}

/* Connection settings modal */
.conn-settings-modal{z-index:85}
.conn-settings-panel{width:min(480px,100%)}
.conn-r0-status{
  margin:0 0 12px;padding:10px 12px;border-radius:12px;
  font-size:11.5px;font-weight:750;line-height:1.4;
  background:rgba(255,176,26,.08);border:1px solid rgba(255,176,26,.28);color:var(--hx-dash-amber);
}
.conn-r0-status.tone-ok{
  background:rgba(30,240,208,.08);border-color:rgba(30,240,208,.3);color:var(--hx-dash-teal);
}
.conn-r0-status.tone-warn{
  background:rgba(255,176,26,.08);border-color:rgba(255,176,26,.28);color:var(--hx-dash-amber);
}
.conn-r0-status.tone-demo{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:var(--hx-dash-muted);
}
.conn-field{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:750;color:var(--hx-dash-dim)}
.conn-field .tool-input,.conn-field .tool-select{width:100%}
.conn-device-list,.conn-msg-queue-wrap{
  padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--hx-dash-border);
}
.conn-device-h{font-size:12px;font-weight:850;margin-bottom:8px;color:var(--hx-dash-text)}
.conn-device-list ul,.conn-msg-queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.conn-device-list li,.conn-msg-queue li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);font-size:12px;
}
.conn-device-list li strong{font-weight:850}
.conn-device-list li span,.conn-msg-queue li em{font-size:11px;color:var(--hx-dash-dim);font-style:normal}
.conn-device-list li.empty{color:var(--hx-dash-dim)}
.conn-contact-row{
  display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:end;
  padding:10px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--hx-dash-border);
  margin-bottom:8px;
}
.conn-contacts-wrap{display:flex;flex-direction:column;gap:0}
.conn-msg-actions{display:flex;gap:8px;flex-wrap:wrap}
.conn-msg-queue time{font-size:10px;font-weight:800;color:var(--hx-dash-dim);min-width:7.5em}
.conn-settings-footer{
  display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07);
}
@media(max-width:560px){
  .conn-contact-row{grid-template-columns:1fr;align-items:stretch}
}

/* Env control modal */
.env-modal{
  position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;
  padding:16px;pointer-events:auto;
}
.env-modal[hidden]{display:none!important}
.env-modal-scrim{
  position:absolute;inset:0;background:rgba(4,6,10,.62);backdrop-filter:blur(6px);
}
.env-modal-panel{
  position:relative;z-index:1;width:min(420px,100%);max-height:min(86vh,640px);overflow:auto;
  border-radius:22px 22px 18px 18px;padding:16px 16px 12px;
  background:linear-gradient(180deg,#1a1e26 0%,#12151b 100%);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.env-modal-h{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;
}
.env-modal-h strong{display:block;font-size:16px;font-weight:900;margin-bottom:4px}
.env-modal-x{
  width:36px;height:36px;border-radius:12px;font-size:22px;line-height:1;
  background:rgba(255,255,255,.06);border:1px solid var(--hx-dash-border);color:var(--hx-dash-muted);
}
.env-modal-body{display:flex;flex-direction:column;gap:12px}
.env-modal-foot{margin:12px 0 0}
.env-modal-status{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);
  border:1px solid var(--hx-dash-border);font-size:12px;font-weight:750;
}
.cv-icon--light{color:var(--cv-light)}.cv-icon--temp{color:var(--cv-temp)}.cv-icon--humidity{color:var(--cv-humidity)}
.cv-icon--pm{color:var(--cv-pm)}.cv-icon--aqi{color:var(--cv-aqi)}.cv-icon--voc{color:var(--cv-voc)}
.cv-icon--tv{color:#9db4ff}.cv-icon--heat{color:#ff8a4c}
@media(min-width:720px){
  .env-modal{align-items:center}
  .env-modal-panel{border-radius:22px}
}
@media(max-width:1100px){
  .env-health-row{grid-template-columns:1fr}
}
@media(max-width:900px){
  .env-compose-row{grid-template-columns:1fr}
  .env-semi-gauge{flex:0 0 150px;height:96px}
  .scene-row{grid-template-columns:1fr}
  .env-actuator-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .env-light-thumb .light-visual{aspect-ratio:3/2}
}
@media(max-width:639px){
  .env-gauge-row{flex-direction:column;align-items:stretch}
  .env-semi-gauge{flex:0 0 auto;width:100%;max-width:220px;margin:0 auto}
  .env-actuator-stack{grid-template-columns:1fr}
  .watch-rings{gap:4px}
  .watch-body-duo{grid-template-columns:1fr}
  .wbe-gauge{min-height:72px}
  .wbe-bar-track{height:72px}
}

/* Facility / 요양원 — denser care cues, same Dash DNA (no alt-product cyan) */
body[data-audience="facility"] .env-control-cluster{
  border:1px solid var(--hx-dash-border);
  box-shadow:var(--hx-dash-shadow-card);
  border-radius:var(--hx-dash-r-card);
}
body[data-audience="facility"] .env-cluster-lead::after{
  content:" · 병실 환경 라운딩";
  color:var(--hx-dash-dim);
  font-weight:650;
}
body[data-audience="facility"] .env-unified-card,
body[data-audience="facility"] .watch-health-card{
  border-radius:var(--hx-dash-r-card);
  box-shadow:var(--hx-dash-shadow-card);
}
body[data-audience="facility"] .body-urine-cluster{display:none}
body[data-audience="facility"] .env-actuator-stack{gap:8px}
body[data-audience="facility"] .scene-btn--stack{
  min-height:52px;padding:9px 12px;border-radius:var(--hx-dash-r-sm);
}
body[data-audience="facility"] .facility-stats{gap:10px}
body[data-audience="facility"] .facility-grid{gap:10px}
body[data-audience="facility"] .env-metric-chips--row .env-chip{
  background:rgba(255,255,255,.04);border-color:var(--hx-dash-border);
}
body[data-audience="facility"] .bento.mosaic{
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  align-items:stretch;
}
body[data-audience="facility"] .bento.mosaic .vital-bundle{
  grid-column:1 / -1!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
body[data-audience="facility"] .bento.mosaic .vital-bundle .tile-a,
body[data-audience="facility"] .bento.mosaic .vital-bundle .tile-b,
body[data-audience="facility"] .bento.mosaic .vital-bundle .tile-c,
body[data-audience="facility"] .bento.mosaic .vital-bundle .tile-d{
  grid-column:span 1!important;
  min-height:220px;
  align-self:stretch;
}
body[data-audience="facility"] .bento.mosaic .care-bundle{
  grid-column:1 / -1!important;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);
}
body[data-audience="facility"] .bento.mosaic .care-bundle .tile-audio,
body[data-audience="facility"] .bento.mosaic .care-bundle .tile-f,
body[data-audience="facility"] .bento.mosaic .care-bundle .tile-h{
  min-height:300px;
  align-self:stretch;
}
body[data-audience="facility"] .bento-card{
  border-radius:var(--hx-dash-r-card);
}
body[data-audience="facility"] .hero-snap,
body[data-audience="facility"] .hero-tile{
  border-radius:var(--hx-dash-r-card);
}

@media (max-width:900px){
  .score-num{font-size:34px}
  .score-num--hero{font-size:40px}
  .analysis-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-label .score-num--hero{font-size:34px}
}
@media (max-width:560px){
  .score-num,.score-num--hero{font-size:36px;letter-spacing:-1px}
  .score-num--sm{font-size:22px}
  .overall-box{flex-direction:column;align-items:flex-start}
  .overall-box .score-block--end{align-items:flex-start}
  .analysis-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .analysis-kpis .ak b{font-size:16px}
  .cv-pill-seg{height:22px}
}

/* === BR card (live sine wave) === */
.bento.mosaic .tile-c.br-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(165deg, #161b22 0%, #12151a 100%);
}
.br-card .br-metric {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.6px;
}
.br-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #8a919c;
  line-height: 1.3;
}
.br-meta #br-status-txt { color: var(--cv-br); }
.br-meta #br-trend { color: #c8ced6; }
.br-dot { opacity: 0.45; }
.spark.br-wave {
  width: 100%;
  height: 56px;
  margin-top: 4px;
  flex-shrink: 0;
  overflow: visible;
}
.spark.br-wave .br-wave-stroke {
  stroke: url(#br-wave-grad);
  stroke-width: 2.2;
  fill: none;
  filter: drop-shadow(0 0 7px rgba(46, 196, 168, 0.55));
}
.spark.br-wave.is-absent .br-wave-stroke {
  stroke: rgba(61, 184, 255, 0.28);
  filter: none;
  stroke-dasharray: 4 4;
}
.spark.br-wave.is-absent .br-wave-fill { display: none; }
.br-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.br-foot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.br-foot-col b {
  font-size: 14px;
  font-weight: 850;
  color: #fff;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.br-foot-col span {
  font-size: 11px;
  font-weight: 650;
  color: #8a9099;
}
.br-r0 {
  margin: 0;
  font-size: 10px;
  color: #5c6470;
  text-align: center;
}

/* === HR card (vertical range bars) + POBC tick gauge === */
.bento.mosaic .tile-d.hr-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(165deg, #1c1d21 0%, #141518 100%);
}
.hr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 96px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  color: #8a919c;
  font-size: 13px;
  font-weight: 750;
}
.hr-empty em {
  font-style: normal;
  font-size: 10px;
  font-weight: 650;
  color: #5c6470;
}
.hr-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.hr-card-head .t {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 750;
  color: #fff;
}
.hr-bpm {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hr-bpm .metric-unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--hx-dash-dim);
  margin-left: 2px;
}
.hr-zones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.hr-zone {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hr-zone span {
  font-size: 10px;
  font-weight: 750;
  color: #7a828e;
  letter-spacing: 0.2px;
}
.hr-zone b {
  font-size: 12px;
  font-weight: 850;
  color: #f2f4f7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hr-range-wrap {
  flex: 1;
  min-height: 96px;
  margin-top: 2px;
}
.hr-range-wrap .cv-range { min-height: 96px; }

/* Wide bottom status bar (attachment) — main mosaic + pdash */
.hr-card .hr-status-bar {
  margin-top: auto;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  width: 100%;
}
.hr-card .hr-status-bar .pill {
  width: 100%;
  justify-content: center;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 850;
  border-radius: 999px;
}
.hr-card .hr-status-bar .pill.ok {
  background: rgba(30, 240, 208, 0.14);
  color: #5eead4;
  border-color: rgba(30, 240, 208, 0.42);
  box-shadow: 0 0 18px rgba(30, 240, 208, 0.18);
}
.hr-card .hr-status-bar .pill.warn {
  background: rgba(212, 162, 74, 0.14);
  color: #ffd08a;
  border-color: rgba(212, 162, 74, 0.4);
}
.bento.mosaic .br-card .cv-icon--br,
.bento.mosaic .hr-card .cv-icon--hr {
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(46, 196, 168, 0.22);
}
.bento.mosaic .br-card .cv-icon--br {
  color: #5ec8ff;
  background: rgba(62, 184, 255, 0.12);
  border: 1px solid rgba(62, 184, 255, 0.32);
  box-shadow: 0 0 18px rgba(62, 184, 255, 0.28);
}
.bento.mosaic .hr-card .cv-icon--hr {
  color: #5eead4;
  background: rgba(94, 234, 212, 0.1);
  border: 1px solid rgba(94, 234, 212, 0.28);
}

/* ── Hero primary POBC (Stress-style tick gauge) ── */
.hero-snap-side.pobc-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 18px 18px 14px;
  background: #2e2e2e;
  border-color: rgba(255, 255, 255, 0.06);
  --cv-pobc-fill-0: #d4845e;
  --cv-pobc-fill-1: #f3a07e;
  --cv-pobc-needle: #e67e4f;
  --cv-pobc-muted: #4a4a4a;
  --cv-pobc-spark-0: #ed8e7a;
  --cv-pobc-spark-1: #f4a482;
}
.hero-snap-side.pobc-card .card-h { width: 100%; margin-bottom: 0; }
.hero-snap-side.pobc-card .card-h .t { color: #fff; }

.bento.mosaic .tile-g.pobc-trend-card {
  display: none; /* removed · hero POBC only */
}
.pobc-daily-bento { width: 100%; margin-top: 2px; }
.pobc-daily-bento .cv-daily { min-height: 48px; width: 100%; }
.pobc-trend-card .card-drill { align-self: flex-start; }

/* Fall relocated to side column (with alerts / overall) */
button.panel.fall-side-card {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-color: rgba(255, 45, 106, 0.22);
}
button.panel.fall-side-card:hover {
  border-color: rgba(255, 45, 106, 0.45);
}
button.panel.fall-side-card.state-crit {
  border-color: rgba(255, 45, 106, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 45, 106, 0.2);
}
.fall-side-card .vital-row { align-items: center; gap: 12px; }
.fall-side-card .metric { font-size: 26px; }

/* Stress Activity card (bar+line · time-of-day) */
.bento.mosaic .tile-h.stress-activity-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #1e1e20;
  border-color: rgba(255, 255, 255, 0.06);
  text-align: left;
}

/* 비상음향 카드 — Dash DNA (수면·스트레스와 동일 차콜 톤) */
.bento.mosaic .tile-audio.audio-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(165deg, #1c1d21 0%, #141518 100%);
  border-color: rgba(255, 255, 255, 0.06);
  text-align: left;
}
.bento.mosaic .tile-audio.audio-card.state-warn,
.bento.mosaic .tile-audio.audio-card.is-live {
  border-color: rgba(30, 240, 208, 0.28);
}
.bento.mosaic .tile-audio.audio-card.state-crit {
  border-color: rgba(255, 176, 26, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 176, 26, 0.16);
  background: linear-gradient(165deg, #221e18 0%, #161412 100%);
}
.audio-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.audio-card-head .t {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 750;
  color: #fff;
}
.audio-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.audio-db-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.audio-card-body .score-num {
  font-size: 24px;
  letter-spacing: -0.6px;
  line-height: 1.05;
  color: #fff;
  max-width: 68%;
  word-break: keep-all;
}
.audio-db-block b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--hx-dash-teal);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.audio-db-block span {
  font-size: 11px;
  font-weight: 750;
  color: var(--hx-dash-dim);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.audio-card.is-live .audio-card-body .score-num { color: var(--hx-dash-teal); }
.audio-card.state-crit .audio-card-body .score-num { color: var(--cv-audio); }
.audio-card.state-crit .audio-db-block b { color: var(--cv-audio); }
.audio-card-sub {
  margin: 0;
  font-size: 11.5px;
  font-weight: 650;
  color: #9aa1ab;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.audio-level-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 100%;
  height: 44px;
  padding: 4px 3px 3px;
  margin-top: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--hx-dash-border);
  box-sizing: border-box;
  flex: 0 0 auto;
}
.audio-level-chart .al-bar {
  flex: 1 1 0;
  min-width: 0;
  height: var(--h, 8%);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--hx-dash-teal), rgba(30, 240, 208, 0.35));
  opacity: 0.85;
  transition: height 0.06s linear;
}
.audio-level-chart[data-class="scream"] .al-bar,
.audio-level-chart[data-class="impact"] .al-bar {
  background: linear-gradient(180deg, var(--cv-audio), rgba(255, 111, 20, 0.45));
}
.audio-level-chart.is-idle .al-bar {
  background: rgba(255, 255, 255, 0.12);
  opacity: 0.45;
}
.audio-card-meter {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hx-dash-border);
}
.audio-card-meter i {
  display: block;
  height: 100%;
  width: var(--rms, 0%);
  background: linear-gradient(90deg, var(--hx-dash-teal), var(--hx-dash-lime));
  border-radius: inherit;
  transition: width 0.08s linear;
}
.audio-card-meter[data-class="scream"] i,
.audio-card-meter[data-class="impact"] i {
  background: linear-gradient(90deg, var(--hx-dash-orange), var(--cv-audio));
}
.audio-live {
  width: 100%;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hx-dash-border);
  flex: 0 0 auto;
}
.audio-card.is-live .audio-live {
  border-color: rgba(30, 240, 208, 0.16);
}
.audio-card.state-crit .audio-live {
  border-color: rgba(255, 176, 26, 0.22);
}
.audio-live[hidden] { display: none !important; }
.audio-live-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hx-dash-border);
}
.audio-live-head > span {
  font-size: 11px;
  font-weight: 750;
  color: var(--hx-dash-dim);
  letter-spacing: 0.3px;
}
.audio-live-head > b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
  line-height: 1.15;
  word-break: keep-all;
}
.audio-card.state-crit .audio-live-head > b { color: var(--cv-audio); }
.audio-card.is-live:not(.state-crit) .audio-live-head > b { color: var(--hx-dash-teal); }
.audio-live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px 8px;
}
.al-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.al-cell span {
  font-size: 11px;
  font-weight: 700;
  color: var(--hx-dash-dim);
}
.al-cell b {
  font-size: 13px;
  font-weight: 800;
  color: var(--hx-dash-text);
  letter-spacing: -0.2px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-card-last {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--hx-dash-muted);
  line-height: 1.3;
  min-height: 0;
  margin-top: auto;
}
.audio-card-note {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--hx-dash-dim);
}


.audio-card-head .r {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.audio-listen-btn {
  appearance: none;
  border: 1px solid rgba(255, 176, 26, 0.35);
  background: rgba(255, 176, 26, 0.1);
  color: var(--cv-audio);
  font-size: 11px;
  font-weight: 780;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
}
.audio-listen-btn.on,
.audio-listen-btn[aria-pressed="true"] {
  border-color: rgba(30, 240, 208, 0.4);
  background: rgba(30, 240, 208, 0.12);
  color: var(--hx-dash-teal);
}
.audio-trend-strip {
  width: 100%;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hx-dash-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 0 0 auto;
}
.ats-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.ats-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ats-cell span {
  font-size: 10px;
  font-weight: 700;
  color: var(--hx-dash-dim);
}
.ats-cell b {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.ats-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
}
.ats-bars i {
  flex: 1 1 0;
  min-width: 0;
  height: var(--h, 8%);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--cv-audio), rgba(255, 111, 20, 0.35));
  opacity: 0.85;
}
.ats-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--hx-dash-muted);
}
.ats-kinds .ats-kind-info {
  color: #8b5cf6;
  opacity: 0.85;
}
.audio-feedback-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hx-dash-border);
}
.audio-feedback-row > span {
  font-size: 10px;
  font-weight: 750;
  color: var(--hx-dash-dim);
  margin-right: 2px;
}
.audio-fb-btn {
  appearance: none;
  border: 1px solid var(--hx-dash-border);
  background: rgba(255,255,255,0.04);
  color: var(--hx-dash-text);
  font-size: 11px;
  font-weight: 750;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.audio-fb-btn[data-audio-feedback="confirm"] {
  border-color: rgba(30, 240, 208, 0.3);
  color: var(--hx-dash-teal);
}
.audio-fb-btn[data-audio-feedback="reject"] {
  border-color: rgba(255, 176, 26, 0.3);
  color: var(--cv-audio);
}
.audio-level-chart[data-class="pain"] .al-bar,
.audio-card-meter[data-class="pain"] i {
  background: linear-gradient(180deg, #ff8a4c, rgba(255, 176, 26, 0.4));
}
.audio-card-last {
  min-height: 0;
}


.cv-icon--audio { color: var(--cv-audio); }
.cv-icon--audio.cv-icon--photo { box-shadow: 0 6px 18px var(--cv-audio-glow); }

.stress-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.stress-card-head .t {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 750;
  color: #fff;
}
.stress-activity-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.stress-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.stress-summary .score-num {
  font-size: 40px;
  letter-spacing: -1.2px;
  line-height: 0.95;
}
.stress-level-txt {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  color: #9aa1ab;
  line-height: 1.35;
  max-width: 22em;
}
.stress-tod-wrap {
  width: 100%;
  margin-top: auto;
  flex: 1 1 auto;
  min-height: 132px;
  max-height: 176px;
  display: flex;
  align-items: center;
  overflow: visible;
}
.stress-tod-wrap .cv-barline {
  width: 100%;
  height: auto;
  max-height: 176px;
  min-height: 120px;
  display: block;
  aspect-ratio: 280 / 148;
}

.pobc-gauge-wrap {
  width: min(100%, 320px);
  margin: 2px auto 0;
}
.pobc-gauge-wrap .cv-tick-gauge { width: 100%; height: auto; display: block; }
.pobc-gauge-wrap .cv-tick-score {
  font-variant-numeric: tabular-nums;
}
.pobc-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: -8px;
  pointer-events: none;
  z-index: 1;
}
.pobc-level strong {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.pobc-level span {
  font-size: 12px;
  font-weight: 550;
  color: #a0a4ab;
}
.pobc-score-inline {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pobc-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 26px;
  margin: 10px 0 6px;
  border-radius: 999px;
  background: #ffffff;
  color: #121214;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.2px;
  border: none;
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.pobc-pill-btn.is-anomaly {
  background: #ff2d6a;
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 45, 106, 0.35);
}
.pobc-daily {
  width: 100%;
  margin-top: 2px;
}
.pobc-daily .cv-daily { min-height: 56px; width: 100%; }
.pobc-hint {
  width: 100%;
  text-align: left;
  margin: 4px 0 0;
  font-size: 11px;
  color: #7a828e;
}
#hero-pobc-card.pobc-anomaly,
#card-pobc.pobc-anomaly {
  border-color: rgba(255, 45, 106, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 45, 106, 0.2);
  --cv-pobc-fill-0: #ff6b8a;
  --cv-pobc-fill-1: #ff2d6a;
  --cv-pobc-needle: #ff2d6a;
  --cv-pobc-spark-0: #ff6b8a;
  --cv-pobc-spark-1: #ff2d6a;
}
#hero-pobc-card.pobc-watch,
#card-pobc.pobc-watch { border-color: rgba(212, 132, 94, 0.35); }
#hero-pobc-card.pobc-anomaly .pobc-level strong { color: #ff8aa8; }

/* ── 움직임 FitFuel Calories-style capsules ── */
.bento.mosaic .tile-b.move-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.06);
  padding: 16px 16px 14px;
}
.move-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.move-card-head .t {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.move-card-head .t .cv-icon {
  background: rgba(255, 122, 24, 0.14);
  color: #ff7a18;
  box-shadow: none;
}
.move-goal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.move-goal b {
  font-size: 15px;
  font-weight: 850;
  color: #fff;
  letter-spacing: -0.2px;
  line-height: 1.1;
}
.move-goal span {
  font-size: 11px;
  font-weight: 650;
  color: #8a9099;
}
.move-card .move-val {
  font-size: 28px;
  font-weight: 850;
  color: #fff;
  letter-spacing: -0.5px;
  margin: 2px 0 0;
  line-height: 1.1;
}
.move-caps-wrap { width: 100%; margin-top: 4px; }
.cv-cap-gauge { width: 100%; }
.cv-cap-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 750;
  color: #7a828e;
  margin-bottom: 6px;
}
.cv-cap-row {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 52px;
  width: 100%;
}
.cv-cap-seg {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  transform-origin: bottom center;
}
.cv-cap-seg.on {
  box-shadow: 0 0 12px rgba(255, 122, 24, 0.28);
}
.cv-cap-seg.anim {
  animation: cv-cap-fill 0.42s ease both;
}
@keyframes cv-cap-fill {
  from { transform: scaleY(0.15); opacity: 0.35; }
  to { transform: scaleY(1); opacity: 1; }
}
.move-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.move-foot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.move-foot-col b {
  font-size: 14px;
  font-weight: 850;
  color: #fff;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.move-foot-col span {
  font-size: 11px;
  font-weight: 650;
  color: #8a9099;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .bento.mosaic .tile-a,
  .bento.mosaic .tile-b.move-card,
  .bento.mosaic .tile-c.br-card,
  .bento.mosaic .tile-d.hr-card { min-height: 210px; }
  .bento.mosaic .tile-f.sleep-card,
  .bento.mosaic .tile-audio.audio-card,
  .bento.mosaic .tile-h.stress-activity-card { min-height: 280px; }
}
@media (max-width: 639px) {
  .hr-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pobc-level { margin-top: 0; }
  .pobc-level strong { font-size: 14px; }
  .cv-cap-row { height: 44px; gap: 4px; }
  .sleep-legend-row { gap: 8px 12px; }
  .sleep-summary { gap: 8px; }
}

/* === Sleep card (stepped hypnogram) === */
.bento.mosaic .tile-f.sleep-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(165deg, #1c1d21 0%, #141518 100%);
  border-color: rgba(255, 255, 255, 0.06);
  text-align: left;
}
.sleep-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.sleep-card-head .t {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 750;
  color: #fff;
}
.sleep-card-head .t .cv-icon {
  width: 28px !important;
  height: 28px !important;
}
.sleep-menu {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #8a919c;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  line-height: 1;
}
.sleep-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 2px;
}
.sleep-sum-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sleep-sum-col b {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.6px;
  line-height: 1.05;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.sleep-sum-col span {
  font-size: 11px;
  font-weight: 650;
  color: #8a919c;
}
.sleep-sum-col b.trend-up { color: #7dffa0; }
.sleep-sum-col b.trend-down { color: #ff7a8a; }
.sleep-sum-col b.trend-flat { color: #c8ced6; }
.sleep-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  width: 100%;
  margin-top: 2px;
}
.sleep-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #9aa1ab;
  white-space: nowrap;
}
.sleep-leg-item i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.sleep-leg-item em {
  font-style: normal;
  font-weight: 650;
  color: #a8afb8;
}
.sleep-leg-item b {
  font-weight: 800;
  color: #e8eaed;
  font-variant-numeric: tabular-nums;
}
.sleep-hypno-wrap {
  flex: 1;
  min-height: 120px;
  width: 100%;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: stretch;
  overflow: visible;
}
.sleep-hypno-wrap .cv-hypno {
  width: 100%;
  height: auto;
  min-height: 120px;
  max-height: 160px;
  display: block;
  margin-top: 0 !important;
  /* meet 비율 유지 — none 강제 시 단계 라벨 찌그러짐 방지 */
  aspect-ratio: 360 / 72;
}
.sleep-card--detail .sleep-hypno-wrap .cv-hypno {
  min-height: 140px;
  max-height: 180px;
  aspect-ratio: 360 / 90;
}
.sleep-foot-axis {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
  color: #8a919c;
  font-size: 11px;
  font-weight: 700;
}
.sleep-axis-start,
.sleep-axis-end {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.sleep-axis-start b,
.sleep-axis-end b {
  color: #d5dae0;
  font-weight: 800;
}
.sleep-ico {
  width: 12px;
  height: 12px;
  color: #9aa1ab;
}
.sleep-ico-txt {
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}
.sleep-axis-ticks {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  height: 10px;
  padding: 0 4px;
}
.sleep-axis-ticks i {
  width: 1px;
  height: 7px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 1px;
}
.sleep-card .card-drill {
  margin-top: 2px;
  font-size: 11px;
  color: #8a919c;
}
.sleep-card--detail {
  background: linear-gradient(165deg, #1c1d21 0%, #141518 100%);
  border-color: rgba(255, 255, 255, 0.06);
}
.sleep-legend-row--detail { margin: 8px 0 4px; }


/* === Sensor scale 1–200 · density tiers · add workflow (UX concept) === */
.density-pill {
  font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--hx-dash-muted);
}
.dev-kpi { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 8px; }
.dev-kpi.crit { background: rgba(255,45,106,0.15); color: #ff8aa8; }
.dev-kpi.dim { color: var(--hx-dash-dim); }
.dev-chip.flash-add, .device-card.flash-add {
  animation: cv-flash-add 1.2s ease;
  border-color: rgba(216,255,60,0.55);
}
@keyframes cv-flash-add {
  0% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(216,255,60,0.45); }
  40% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(216,255,60,0); }
  100% { transform: scale(1); }
}
.dev-chip.more { opacity: 0.85; border-style: dashed; }
.dev-chip, .device-card, .bed-card, .btn-cta, .btn-ghost {
  transition: border-color .2s ease, background .2s ease, transform .18s ease, box-shadow .2s ease;
}
.btn-cta:active, .btn-ghost:active, .dev-chip:active { transform: scale(0.97); }

.sensor-kpi-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px;
  margin: 0 0 12px;
}
.sensor-kpi-strip .sk {
  background: rgba(255,255,255,0.04); border: 1px solid var(--hx-dash-border);
  border-radius: 12px; padding: 10px 8px; text-align: center;
}
.sensor-kpi-strip .sk span { display: block; font-size: 10px; color: var(--hx-dash-dim); font-weight: 750; }
.sensor-kpi-strip .sk b { font-size: 16px; font-weight: 900; }
.sensor-kpi-strip .sk.crit b { color: #ff8aa8; }
.sensor-kpi-strip .sk.dim b { color: var(--hx-dash-dim); }

.limit-banner {
  border-radius: 12px; padding: 10px 12px; font-size: 12px; font-weight: 750; margin-bottom: 10px;
}
.limit-banner.warn { background: rgba(255,193,90,.12); border: 1px solid rgba(255,193,90,.35); color: #ffcf7a; }
.limit-banner.crit { background: rgba(255,45,106,.12); border: 1px solid rgba(255,45,106,.35); color: #ff8aa8; }

.device-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: flex-end;
}
.tool-lab { display: flex; flex-direction: column; gap: 4px; font-size: 10px; font-weight: 800; color: var(--hx-dash-dim); }
.tool-input {
  min-height: 40px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--hx-dash-border); color: var(--hx-dash-text); font-weight: 700; font-size: 12px;
}

.scale-demo { margin-bottom: 14px; padding: 12px 14px; }
.scale-demo-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.scale-demo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scale-demo-row input[type=range] { flex: 1; min-width: 140px; }
.scale-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.device-card.compact { padding: 10px 12px; }
.device-card.compact .dc-top strong { font-size: 13px; }
.zone-group { margin-bottom: 14px; }
.zone-group-h {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 850;
  margin: 0 0 8px; color: var(--hx-dash-muted);
}
.zone-group-h span {
  font-size: 10px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,0.06);
}
.device-list.compact-list .device-card,
.device-list.virtual-list .device-card { margin-bottom: 8px; }
.device-pager, .facility-pager {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 4px;
}
.pager-meta { font-size: 11px; font-weight: 750; color: var(--hx-dash-dim); }
.density-empty-inline { text-align: center; padding: 28px 12px; }
.density-empty-inline p { margin-bottom: 12px; color: var(--hx-dash-muted); }

.facility-grid.density-medium,
.facility-grid.density-large {
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 10px;
}
.bed-card.compact {
  padding: 11px 12px 10px; min-height: 0; gap: 0;
  border-radius: 18px;
}
.bed-card.compact .bed-name { font-size: 13.5px; margin: 2px 0 6px; }
.bed-card.compact .bed-flags { margin-bottom: 6px; gap: 4px; }
.bed-card.compact .flag { padding: 2px 7px; font-size: 9.5px; }
.bed-card.compact .bed-metrics {
  font-size: 10.5px; padding-top: 6px; gap: 4px 8px;
}
.bed-card.compact .bed-metrics b { font-size: 12px; }
.bed-card.compact .pill { font-size: 10px; padding: 2px 7px; }

@media (max-width: 720px) {
  .facility-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .stat-mini b { font-size: 18px; }
  .bed-card { padding: 12px; border-radius: 18px; }
  .bed-name { font-size: 14px; }
}
@media (max-width: 480px) {
  .facility-stats { gap: 8px; }
  .facility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bed-card .pill .d { width: 5px; height: 5px; }
}

.pobc-cta {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px;
  animation: cv-cta-in .35s ease;
}
@keyframes cv-cta-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.alert-cta { margin-top: 6px; }

.sensor-add-modal {
  position: fixed; inset: 0; z-index: 120000; display: flex; align-items: flex-end; justify-content: center;
}
.sensor-add-modal[hidden] { display: none !important; }
.sensor-add-scrim { position: absolute; inset: 0; background: rgba(2,6,12,.72); backdrop-filter: blur(6px); }
.sensor-add-sheet {
  position: relative; width: min(440px, 100%); max-height: 88vh; overflow: auto;
  background: linear-gradient(165deg, #1c1d21, #121318); border: 1px solid var(--hx-dash-border);
  border-radius: 20px 20px 0 0; padding: 18px 16px 22px;
  box-shadow: 0 -12px 40px rgba(0,0,0,.45);
  animation: cv-sheet-up .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes cv-sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.sensor-add-h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.sensor-add-h h3 { margin: 0; font-size: 18px; font-weight: 900; }
.sensor-add-h .btn-ghost { margin-left: auto; }
.sensor-add-sheet .tool-lab { margin-bottom: 10px; width: 100%; }
.sensor-add-sheet .tool-select, .sensor-add-sheet .tool-input { width: 100%; }
.sensor-add-actions { display: flex; gap: 8px; margin-top: 8px; }
.sensor-add-actions .btn-cta, .sensor-add-actions .btn-ghost { flex: 1; }
.sensor-add-err { min-height: 16px; font-size: 11px; color: #ff8aa8; font-weight: 750; margin: 4px 0; }

.env-control-cluster .scene-btn--stack,
.env-actuator-stack .scene-btn {
  transition: transform .18s ease, border-color .2s, background .2s;
}
.env-control-cluster .scene-btn--stack:active { transform: scale(0.98); }

@media (min-width: 720px) {
  .sensor-add-modal { align-items: center; }
  .sensor-add-sheet { border-radius: 18px; padding: 20px; }
}
@media (max-width: 720px) {
  .sensor-kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .device-strip { padding: 8px 14px 0; }
  .dev-strip-track { order: 3; width: 100%; }
  .dev-strip-scroll { width: 100%; }
}


/* care-bundle 높이 균형: 수면·스트레스 차트 영역이 남는 공간 채움 */
.bento.mosaic .care-bundle .tile-f.sleep-card,
.bento.mosaic .care-bundle .tile-h.stress-activity-card,
.bento.mosaic .care-bundle .tile-audio.audio-card {
  display: flex;
  flex-direction: column;
}
.bento.mosaic .care-bundle .sleep-hypno-wrap {
  flex: 1 1 auto;
  min-height: 100px;
  display: flex;
  align-items: center;
}
.bento.mosaic .care-bundle .stress-tod-wrap {
  flex: 1 1 auto;
  min-height: 140px;
  max-height: none;
  align-items: center;
}
.bento.mosaic .care-bundle .audio-card-body {
  gap: 6px;
}
.bento.mosaic .care-bundle .audio-card-note {
  margin-top: 0;
}

/* === 계정 → 시설 → 위치·센서 등록부 === */
.account-btn {
  min-height: 34px;
  max-width: 132px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--hx-dash-border);
  background: rgba(255,255,255,0.05);
  color: var(--hx-dash-text);
  font-size: 11px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-btn:hover { border-color: rgba(30,240,208,0.42); color: var(--hx-dash-teal); }
body.account-modal-open { overflow: hidden; }
.account-registry-modal[hidden] { display: none !important; }
.account-registry-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.acct-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(30,240,208,0.13), transparent 34%),
    radial-gradient(circle at 80% 90%, rgba(167,139,250,0.12), transparent 38%),
    rgba(7,8,11,0.96);
  backdrop-filter: blur(18px);
}
.acct-modal-body {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border-radius: 26px;
}
.acct-card,
.acct-shell {
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(165deg, rgba(28,30,36,0.98), rgba(15,16,20,0.98));
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.acct-login-card {
  width: min(430px, 100%);
  margin: auto;
  padding: 28px;
  border-radius: 24px;
}
.acct-login-card--careview,
.acct-login-card--insights {
  width: min(440px, 100%);
  padding: 36px 34px 28px;
  border-radius: 18px;
  border: 0;
  background: #fff;
  color: #1f2430;
  box-shadow: 0 18px 48px rgba(20, 28, 45, 0.12);
}
.account-registry-modal[data-stage="login"] .acct-backdrop {
  background: #f3f5f8;
  backdrop-filter: none;
}
.acct-login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.acct-login-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, #1ef0d0 0%, #3b82f6 55%, #7c8bff 100%);
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.28);
}
.acct-login-word {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #1a2333;
}
.acct-login-title {
  margin: 0;
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #121826;
  line-height: 1.15;
}
.acct-login-tag {
  margin: 8px 0 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
  color: #6b7380;
}
.acct-login-form .acct-field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  color: #374151;
  font-size: 12px;
  font-weight: 800;
}
.acct-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid #d7dde7;
  border-radius: 10px;
  background: #fff;
  color: #121826;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
}
.acct-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}
.acct-pass-wrap {
  position: relative;
  display: block;
}
.acct-pass-wrap .acct-input { padding-right: 46px; }
.acct-pass-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #6b7380;
  background: transparent;
  font-size: 14px;
}
.acct-pass-toggle:hover { background: rgba(15, 23, 42, 0.05); color: #111827; }
.acct-security-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 12px 13px;
  border-radius: 10px;
  background: #f3f5f8;
  border: 1px solid #e5e9f0;
}
.acct-security-ico { flex: 0 0 auto; font-size: 16px; line-height: 1.2; }
.acct-security-box strong {
  display: block;
  font-size: 12px;
  font-weight: 850;
  color: #1f2937;
}
.acct-security-box small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 650;
  color: #6b7380;
  line-height: 1.4;
}
.acct-signin {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}
.acct-signin:hover { background: #1d4ed8; }
.acct-create-link {
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
}
.acct-create-link:hover { background: rgba(37, 99, 235, 0.06); }
.acct-login-hint {
  margin: 10px 0 0;
  text-align: center;
  color: #8a919c;
  font-size: 11px;
  font-weight: 650;
}
.acct-login-card--careview .acct-msg,
.acct-login-card--insights .acct-msg {
  text-align: center;
  margin-top: 10px;
}
.acct-login-card--careview .acct-msg.error,
.acct-login-card--insights .acct-msg.error { color: #dc2626; }
.acct-login-card--careview .acct-msg.ok,
.acct-login-card--insights .acct-msg.ok { color: #059669; }
.acct-login-card--careview .acct-msg.info,
.acct-login-card--insights .acct-msg.info { color: #d97706; }
.acct-shell {
  padding: 24px;
  border-radius: 26px;
}
.acct-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.acct-head > div:first-child { min-width: 0; }
.acct-eyebrow {
  display: inline-flex;
  padding: 3px 8px;
  margin-bottom: 6px;
  border-radius: 999px;
  color: var(--hx-dash-teal);
  background: rgba(30,240,208,0.1);
  border: 1px solid rgba(30,240,208,0.22);
  font-size: 10px;
  font-weight: 850;
}
.acct-head h2 { margin: 0; font-size: clamp(21px, 3vw, 30px); line-height: 1.1; color: #fff; }
.acct-head p { margin: 7px 0 0; color: var(--hx-dash-muted); font-size: 12px; font-weight: 650; }
.acct-head-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.acct-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 0 0 18px;
}
.acct-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
  color: var(--hx-dash-dim);
  font-size: 11px;
  font-weight: 800;
}
.acct-steps li b {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  font-size: 10px;
}
.acct-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-steps li.on { color: #fff; border-color: rgba(30,240,208,0.35); background: rgba(30,240,208,0.07); }
.acct-steps li.on b { color: #07110f; background: var(--hx-dash-teal); }
.acct-steps li.done { color: #b8e62a; }
.acct-steps li.done b { color: #10140a; background: #b8e62a; }
.acct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.acct-pane {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
}
.acct-pane h3 { margin: 0 0 13px; color: #fff; font-size: 14px; font-weight: 850; }
.acct-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.acct-pane-head h3 { margin: 0; }
.acct-form { display: grid; gap: 12px; }
.acct-form label,
.acct-select-label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--hx-dash-muted);
  font-size: 11px;
  font-weight: 800;
}
.acct-form .tool-input,
.acct-form .tool-select,
.acct-select-label .tool-select {
  width: 100%;
  min-height: 44px;
}
.acct-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.acct-actions > button { min-height: 44px; }
.acct-wide { width: 100%; min-height: 44px; margin-top: 4px; }
.acct-facility-list,
.acct-location-list {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  max-height: 330px;
  overflow: auto;
}
.acct-facility-item,
.acct-location-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 13px;
  background: rgba(0,0,0,0.18);
}
.acct-facility-item.on { border-color: rgba(30,240,208,0.38); background: rgba(30,240,208,0.055); }
.acct-facility-select {
  display: grid;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  text-align: left;
  color: inherit;
}
.acct-facility-select strong,
.acct-location-item strong {
  display: block;
  min-width: 0;
  color: #fff;
  font-size: 12.5px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-facility-select span,
.acct-location-item span {
  display: block;
  min-width: 0;
  color: var(--hx-dash-muted);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-facility-select small,
.acct-location-item small {
  display: block;
  color: var(--hx-dash-dim);
  font-size: 9.5px;
  font-weight: 700;
}
.acct-location-item > div { flex: 1 1 auto; min-width: 0; }
.acct-location-item .btn-ghost.sm { flex: 0 0 auto; white-space: nowrap; }
.acct-link-state {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  color: #fbbf24 !important;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.22);
  font-size: 9px !important;
  font-weight: 800 !important;
}
.acct-icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--hx-dash-dim);
  background: rgba(255,255,255,0.04);
}
.acct-icon-btn:hover { color: #ff8aa8; background: rgba(255,45,106,0.1); }
.acct-empty {
  padding: 24px 14px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 13px;
  color: var(--hx-dash-dim);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.acct-msg {
  min-height: 18px;
  margin: 12px 2px 0;
  font-size: 11px;
  font-weight: 750;
}
.acct-msg.error { color: #ff8aa8; }
.acct-msg.ok { color: var(--hx-dash-teal); }
.acct-msg.info { color: #fbbf24; }
.acct-security-note {
  margin: 13px 0 0;
  color: var(--hx-dash-dim);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .account-registry-modal { padding: 0; place-items: stretch; }
  .acct-modal-body { width: 100%; max-height: 100dvh; border-radius: 0; }
  .acct-shell { min-height: 100dvh; padding: 18px 14px; border-radius: 0; }
  .acct-grid { grid-template-columns: 1fr; }
  .acct-head { align-items: flex-start; }
  .acct-head-actions { flex-direction: column; }
  .acct-login-card { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; border-radius: 0; }
}
@media (max-width: 520px) {
  .top-utils .clock,
  .top-utils .tick-meta { display: none; }
  .account-btn { max-width: 88px; }
  .acct-steps li { justify-content: center; padding: 8px 4px; }
  .acct-steps li span { display: none; }
  .acct-actions { grid-template-columns: 1fr; }
  .acct-location-item { align-items: flex-start; flex-wrap: wrap; }
  .acct-link-state { order: 3; }
}

.acct-serial-pool {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.acct-serial-pool h4 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 850;
}
.acct-serial-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 160px;
  overflow: auto;
}
.acct-serial-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
}
.acct-serial-list li code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
}
.acct-serial-list li.free span { color: #1ef0d0; font-weight: 800; }
.acct-serial-list li.used {
  opacity: 0.55;
}
.acct-serial-list li.used span { color: var(--hx-dash-dim, #8b93a1); font-weight: 700; }

/* ── 감지영역 보기 (area alert · view id=tracker) ── */
/* 구 tracker-layout(240px|1fr)이 루트에 남아 있으면 전체가 왼쪽 칸으로 몰림 → host는 전폭 */
.area-alert-host,
#tracker-root {
  display: block;
  width: 100%;
  min-width: 0;
}
.area-alert-layout { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; }
.area-triage {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.area-kpi {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hx-dash-border, rgba(255,255,255,0.1));
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.area-kpi span {
  font-size: 10px;
  font-weight: 800;
  color: var(--hx-dash-dim, #8b93a1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.area-kpi b { font-size: 20px; font-weight: 850; letter-spacing: -0.03em; }
.area-kpi.p1 { border-color: rgba(255,45,106,0.45); background: rgba(255,45,106,0.1); }
.area-kpi.p1 b { color: #ff6b9a; }
.area-kpi.p2 { border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.08); }
.area-kpi.p2 b { color: #fbbf24; }
.area-kpi.p3 { border-color: rgba(167,139,250,0.4); background: rgba(167,139,250,0.08); }
.area-kpi.p3 b { color: #c4b5fd; }
.area-kpi.ok b { color: #1ef0d0; }
.area-ward-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.area-ward {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hx-dash-border, rgba(255,255,255,0.12));
  color: var(--hx-dash-muted, #c5ccd8);
  min-height: var(--tap, 44px);
}
.area-ward.on {
  border-color: rgba(78,245,255,0.5);
  background: rgba(78,245,255,0.1);
  color: #b9f5ff;
}
.area-alert-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: start;
}
.area-board-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.area-board-h h3 { margin: 0; font-size: 14px; font-weight: 850; }
.area-card-list { display: grid; gap: 8px; max-height: 520px; overflow: auto; }
.area-card {
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--hx-dash-border, rgba(255,255,255,0.1));
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: var(--tap, 44px);
  cursor: pointer;
}
.area-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.area-card strong { font-size: 13px; font-weight: 850; }
.area-card span, .area-card em { font-size: 11px; color: var(--hx-dash-dim, #8b93a1); font-style: normal; }
.area-st {
  font-size: 10px !important;
  font-weight: 850;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.area-card.occ { border-color: rgba(30,240,208,0.4); background: rgba(30,240,208,0.08); }
.area-card.occ .area-st { color: #1ef0d0; background: rgba(30,240,208,0.12); }
.area-card.absent { border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.08); }
.area-card.absent .area-st { color: #fbbf24; background: rgba(251,191,36,0.12); }
.area-card.restless { border-color: rgba(167,139,250,0.45); background: rgba(167,139,250,0.1); }
.area-card.restless .area-st { color: #c4b5fd; }
.area-card.fall {
  border-color: rgba(255,45,106,0.55);
  background: rgba(255,45,106,0.14);
  animation: pulse 1.2s infinite;
}
.area-card.fall .area-st { color: #ff6b9a; background: rgba(255,45,106,0.16); }
.area-card.on { box-shadow: 0 0 0 2px rgba(78,245,255,0.35); }
.area-log-panel { min-height: 360px; }
.area-log-tools { display: flex; gap: 6px; }
.area-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
}
.area-log-item {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 13px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--hx-dash-border, rgba(255,255,255,0.1));
  border-left: 3px solid rgba(148,163,184,0.5);
}
.area-log-item.p1 { border-left-color: #ff2d6a; background: rgba(255,45,106,0.08); }
.area-log-item.p2 { border-left-color: #fbbf24; }
.area-log-item.p3 { border-left-color: #a78bfa; }
.area-log-item.ack { opacity: 0.62; }
.area-log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--hx-dash-dim, #8b93a1);
}
.area-log-kind {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #e2e8f0;
}
.area-log-item strong { font-size: 12.5px; font-weight: 800; line-height: 1.35; }
.area-log-action { font-size: 11px; color: var(--hx-dash-muted, #aeb6c4); }
.area-log-done { font-size: 10px; font-weight: 800; color: #1ef0d0; }
.area-log-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--hx-dash-dim, #8b93a1);
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 1023px) {
  .area-triage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .area-alert-grid { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .area-triage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === CareView 2.0 상단 메뉴 (구 Insights형 레이아웃 · CareView 전용) === */
.shell-top--careview,
.shell-top--insights {
  flex-wrap: wrap;
  gap: 10px 14px;
  row-gap: 10px;
}
.shell-greet {
  margin: 0;
  flex: 0 1 auto;
  font-size: 13px;
  font-weight: 750;
  color: var(--hx-dash-muted, #aeb6c4);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-utils--careview,
.top-utils--insights {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.shell-facility {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px 0 8px;
  border-radius: 10px;
  border: 1px solid var(--hx-dash-border);
  background: rgba(255,255,255,0.05);
  color: var(--hx-dash-text);
  max-width: min(240px, 42vw);
}
.shell-facility-ico { font-size: 13px; opacity: 0.9; }
.shell-facility select {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  min-width: 0;
  max-width: 200px;
  padding: 8px 4px;
  cursor: pointer;
}
.shell-facility select:disabled { opacity: 0.55; cursor: not-allowed; }
/* 드롭다운인데 appearance:none 으로 화살표가 지워져 **글자만** 보였다.
   누를 수 있다는 표시가 없으니 "시설 선택이 고정돼 있다"로 보인다(대표님 지적).
   화살표를 되살리고 눌림 상태를 눈에 보이게 한다. */
.shell-facility {
  position: relative;
  padding-right: 26px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.shell-facility::after {
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .65;
  pointer-events: none;
}
.shell-facility:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.28);
}
.shell-facility:focus-within {
  border-color: var(--hx-dash-accent, #7CE7B0);
  box-shadow: 0 0 0 2px rgba(124,231,176,.22);
}
.shell-facility select { padding-right: 2px; }
.shell-action-btn {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--hx-dash-border);
  background: rgba(255,255,255,0.05);
  color: var(--hx-dash-text);
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}
.shell-action-btn:hover {
  border-color: rgba(30,240,208,0.42);
  color: var(--hx-dash-teal);
}
.shell-action-btn--primary {
  background: rgba(30,240,208,0.14);
  border-color: rgba(30,240,208,0.38);
  color: var(--hx-dash-teal);
}
.shell-action-btn--ghost { opacity: 0.9; }
@media (max-width: 1100px) {
  .shell-top--careview .pill-nav,
  .shell-top--insights .pill-nav { order: 5; flex: 1 1 100%; }
  .shell-greet { max-width: 160px; font-size: 12px; }
  .top-utils--careview .clock,
  .top-utils--insights .clock,
  .top-utils--careview .tick-meta,
  .top-utils--insights .tick-meta,
  .top-utils--careview .dev-online-badge,
  .top-utils--insights .dev-online-badge { display: none; }
}

/* === 계정 관리(사용자/프로필) · CareView 라이트 모달 === */
.account-registry-modal[data-stage="users"] .acct-backdrop,
.account-registry-modal[data-stage="profile"] .acct-backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
}
.acct-shell--manage {
  width: min(720px, 100%);
  margin: auto;
  padding: 0;
  border-radius: 16px;
  border: 0;
  background: #fff;
  color: #1f2430;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}
.acct-manage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 12px;
}
.acct-manage-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.acct-manage-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eef2ff;
  font-size: 18px;
}
.acct-manage-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #111827;
}
.acct-manage-title p {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 650;
  color: #6b7280;
}
.acct-manage-x {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.acct-manage-x:hover { background: #e5e7eb; color: #111827; }
.acct-manage-tabs {
  display: flex;
  gap: 0;
  margin: 0 22px;
  border-bottom: 1px solid #e5e7eb;
}
.acct-manage-tab {
  flex: 1;
  padding: 12px 8px;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.acct-manage-tab.on {
  color: #2563eb;
  border-bottom-color: #2563eb;
}
.acct-manage-body {
  padding: 18px 22px 22px;
  display: grid;
  gap: 18px;
}
.acct-user-create h3,
.acct-user-list-wrap h3,
.acct-profile-card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 850;
  color: #111827;
}
.acct-user-form,
.acct-user-create {
  display: grid;
  gap: 10px;
}
.acct-user-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.acct-user-form label,
.acct-select-label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
  color: #374151;
}
.acct-shell--manage .tool-input,
.acct-shell--manage .tool-select,
.thr-panel .tool-input {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  padding: 8px 12px;
  font-size: 13px;
}
.acct-shell--manage .tool-input:focus,
.acct-shell--manage .tool-select:focus,
.thr-panel .tool-input:focus {
  outline: 2px solid rgba(37,99,235,0.28);
  border-color: #93c5fd;
}
.acct-build-assign { display: grid; gap: 8px; }
.acct-build-lab { font-size: 12px; font-weight: 750; color: #374151; }
.acct-build-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  font-size: 12px;
  font-weight: 750;
  color: #374151;
  cursor: pointer;
}
.acct-chip input { accent-color: #2563eb; }
.acct-chip.on {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.acct-user-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.acct-shell--manage .btn-cta {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.acct-shell--manage .btn-ghost {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
}
.acct-user-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.acct-user-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
}
.acct-user-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.acct-user-name strong { font-size: 14px; color: #111827; }
.acct-role-badge {
  font-size: 10.5px;
  font-weight: 850;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
}
.acct-user-email,
.acct-join {
  margin-top: 2px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 650;
}
.acct-user-builds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.acct-build-pill {
  font-size: 11px;
  font-weight: 750;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
}
.acct-user-ops { display: flex; gap: 6px; flex: 0 0 auto; }
.acct-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
}
.acct-icon-btn.danger { color: #b91c1c; }
.acct-icon-btn:hover { border-color: #93c5fd; }
.acct-manage-foot { margin-top: 12px; }
.acct-profile-card {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  display: grid;
  gap: 8px;
}
.acct-profile-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.acct-profile-shield {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #dcfce7;
  color: #15803d;
  font-weight: 900;
}
.acct-building-grid {
  display: grid;
  gap: 8px;
}
.acct-building-item {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
}
.acct-building-item strong { font-size: 13px; color: #111827; }
.acct-building-item span { font-size: 11.5px; color: #6b7280; }
.acct-empty {
  padding: 14px;
  text-align: center;
  color: #9ca3af;
  font-size: 12.5px;
  font-weight: 700;
}
.acct-shell--manage .acct-msg {
  margin: 0 22px 18px;
  color: #6b7280;
}
.acct-shell--manage .acct-msg.ok { color: #15803d; }
.acct-shell--manage .acct-msg.error { color: #b91c1c; }
.acct-shell--manage .sub2 { color: #6b7280; font-size: 12px; }
.acct-shell--manage .acct-security-note {
  margin: 0;
  font-size: 11.5px;
  color: #9ca3af;
  font-weight: 650;
}

/* 임계값 설정 모달 */
.threshold-settings-modal[hidden] { display: none !important; }
.threshold-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: grid;
  place-items: center;
  padding: 16px;
}
.thr-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border-radius: 16px;
  background: #fff;
  color: #1f2430;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
  padding: 0 0 8px;
}
.thr-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 8px;
}
.thr-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #111827;
}
.thr-head p {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b7280;
  font-weight: 650;
  line-height: 1.45;
}
.thr-form {
  display: grid;
  gap: 10px;
  padding: 8px 20px 16px;
}
.thr-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
  color: #374151;
}
.thr-field span { color: #9ca3af; font-weight: 650; }
.thr-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.thr-panel .btn-cta {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.thr-panel .btn-ghost {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
}
@media (max-width: 639px) {
  .acct-user-row2 { grid-template-columns: 1fr; }
  .acct-user-row { flex-direction: column; }
}

/* === 요양원 다채널 스테이션 === */
.facility-station { margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.fac-svc-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fac-chip {
  font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--hx-dash-border); background: rgba(255,255,255,0.04); color: var(--hx-dash-muted);
}
.fac-chip--ok { border-color: rgba(30,240,208,0.35); color: #1ef0d0; }
.fac-chip--demo { border-color: rgba(255,176,26,0.35); color: var(--hx-dash-amber); }
.fac-chip--warn { border-color: rgba(251,191,36,0.4); color: #fbbf24; }
.fac-alert-banner {
  position: relative; overflow: hidden;
  padding: 14px 16px; border-radius: var(--hx-dash-r);
  background: var(--hx-dash-panel);
  border: 1px solid var(--hx-dash-border-hi);
  box-shadow: var(--hx-dash-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.fac-alert-banner::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--cv-hair, linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent));
  pointer-events: none;
}
.fac-alert-banner::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(30, 240, 208, 0.06), transparent 50%),
    radial-gradient(110% 90% at 100% 0%, rgba(255, 45, 106, 0.05), transparent 52%);
}
.fac-alert-banner > * { position: relative; z-index: 1; }
.fac-alert-hd {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px;
}
.fac-alert-hd strong {
  font-size: 13px; font-weight: 900; letter-spacing: -0.02em;
  color: var(--hx-dash-text);
}
.fac-alert-hd .sub2 { color: var(--hx-dash-dim); font-weight: 650; }
.fac-alert-pills {
  display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 4px;
}
.fac-alert-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fac-alert-tools .btn-ghost.sm {
  border-radius: var(--hx-dash-pill); font-weight: 800; letter-spacing: 0.2px;
}
.fac-alert-tools .btn-ghost.sm.on {
  border-color: rgba(30, 240, 208, 0.45); color: var(--hx-dash-teal);
  background: rgba(30, 240, 208, 0.1);
}
.fac-ack-all {
  background: linear-gradient(135deg, rgba(255, 45, 106, 0.22), rgba(255, 111, 20, 0.14)) !important;
  border-color: rgba(255, 45, 106, 0.42) !important;
  color: #ffd0dd !important;
  border-radius: var(--hx-dash-pill) !important;
}
.fac-alert-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fac-alert-card {
  position: relative; overflow: hidden;
  padding: 12px 14px; border-radius: var(--hx-dash-r-card);
  background: var(--hx-dash-card);
  border: 1px solid var(--hx-dash-border);
  border-left: 3px solid var(--hx-dash-amber);
  box-shadow: var(--hx-dash-shadow-card);
  display: grid; gap: 6px; text-align: left;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.fac-alert-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  pointer-events: none;
}
.fac-alert-card:hover {
  border-color: var(--hx-dash-border-hi);
  transform: translateY(-2px);
  box-shadow: var(--cv-lift, 0 16px 34px rgba(0, 0, 0, 0.46)), var(--hx-dash-shadow-card);
}
.fac-alert-card.p1 {
  border-left-color: var(--hx-dash-coral);
  box-shadow: var(--hx-dash-shadow-card), inset 0 0 0 1px rgba(255, 45, 106, 0.08);
}
.fac-alert-card.p2 { border-left-color: var(--hx-dash-amber); }
.fac-alert-card-h { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.fac-alert-card-h strong { font-weight: 850; color: var(--hx-dash-text); letter-spacing: -0.02em; }
.fac-alert-card-h span, .fac-alert-card-b { font-size: 11px; color: var(--hx-dash-dim); }
.fac-alert-card-b em {
  font-style: normal; font-weight: 850;
  color: var(--hx-dash-coral);
}
.fac-alert-card.p2 .fac-alert-card-b em { color: var(--hx-dash-amber); }
.fac-alert-card-b time { display: block; margin-top: 2px; font-size: 10px; font-variant-numeric: tabular-nums; }
.fac-alert-state { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.fac-alert-card-actions { display: flex; gap: 6px; margin-top: 2px; }
.fac-alert-card { cursor: pointer; }
.fac-alert-card:focus-visible { outline: 2px solid rgba(78,245,255,0.55); outline-offset: 2px; }
.fac-care-ack-badge, .fac-care-prop-badge {
  display: inline-flex; align-items: center; font-style: normal; font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: var(--hx-dash-pill); border: 1px solid transparent;
  letter-spacing: 0.2px; line-height: 1.35;
}
.fac-care-ack-badge.open {
  background: rgba(255, 176, 26, 0.14); color: var(--hx-dash-amber);
  border-color: rgba(255, 176, 26, 0.36);
}
.fac-care-ack-badge.done {
  background: rgba(30, 240, 208, 0.15); color: var(--hx-dash-teal);
  border-color: rgba(30, 240, 208, 0.32);
}
.fac-care-prop-badge {
  background: rgba(255, 255, 255, 0.04); color: var(--hx-dash-muted);
  border-color: var(--hx-dash-border);
}
.fac-prop-monitor {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 12px; padding: 12px 14px; border-radius: var(--hx-dash-r-card);
  background: var(--hx-dash-card);
  border: 1px solid var(--hx-dash-border);
  box-shadow: var(--hx-dash-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.fac-prop-monitor::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  pointer-events: none;
}
.fac-prop-monitor::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(140% 90% at 0% 0%, rgba(30, 240, 208, 0.06), transparent 52%),
    radial-gradient(140% 100% at 100% 0%, rgba(216, 255, 60, 0.04), transparent 55%);
}
.fac-prop-monitor > * { position: relative; z-index: 1; }
.fac-prop-hd { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.fac-prop-hd strong {
  font-size: 11px; font-weight: 850; letter-spacing: 0.35px; text-transform: uppercase;
  color: var(--hx-dash-muted); opacity: 0.95;
}
.fac-prop-hd span { font-size: 11px; color: var(--hx-dash-dim); font-weight: 700; font-variant-numeric: tabular-nums; }
.fac-prop-people { display: flex; flex-wrap: wrap; gap: 8px; }
.fac-prop-chip {
  position: relative; overflow: hidden;
  display: grid; gap: 2px; text-align: left; min-width: 140px; max-width: 200px;
  padding: 10px 12px; border-radius: var(--hx-dash-r-sm); cursor: pointer;
  border: 1px solid var(--hx-dash-border);
  background: var(--hx-dash-card-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--hx-dash-text);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.fac-prop-chip::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  pointer-events: none;
}
.fac-prop-chip:hover {
  border-color: rgba(30, 240, 208, 0.42);
  background: rgba(30, 240, 208, 0.06);
  transform: translateY(-1px);
  box-shadow: var(--cv-lift, 0 12px 28px rgba(0, 0, 0, 0.4));
}
.fac-prop-chip b { font-size: 12px; font-weight: 850; letter-spacing: -0.02em; }
.fac-prop-chip span, .fac-prop-chip em, .fac-prop-chip i {
  font-size: 10px; font-style: normal; font-weight: 700; color: var(--hx-dash-dim);
}
.fac-prop-chip em { color: var(--hx-dash-coral); }
.fac-prop-chip i.on { color: var(--hx-dash-teal); }
.fac-prop-chip i.off { color: var(--hx-dash-amber); }
.fac-prop-note { margin: 8px 0 0; font-size: 10px; color: var(--hx-dash-dim); font-weight: 650; }
.fac-station-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.fac-station-head h3 { margin: 0; font-size: 15px; font-weight: 900; }
.fac-station-sub { margin: 4px 0 0; font-size: 12px; color: var(--hx-dash-dim); font-weight: 650; }
.fac-station-actions { display: flex; gap: 6px; }
.fac-kpis {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
}
.fac-kpi {
  position: relative; overflow: hidden;
  padding: 12px 13px; border-radius: var(--hx-dash-r-card);
  background: var(--hx-dash-card);
  border: 1px solid var(--hx-dash-border);
  box-shadow: var(--hx-dash-shadow-card);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.fac-kpi:hover {
  border-color: var(--hx-dash-border-hi);
  transform: translateY(-2px);
  box-shadow: var(--cv-lift, 0 16px 34px rgba(0, 0, 0, 0.46)), var(--hx-dash-shadow-card);
}
.fac-kpi:focus-visible {
  outline: 2px solid rgba(78, 245, 255, 0.55);
  outline-offset: 2px;
}
.fac-kpi:active { transform: translateY(0); }
.fac-kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  pointer-events: none;
}
.fac-kpi span {
  font-size: 10px; font-weight: 800; color: var(--hx-dash-dim);
  letter-spacing: 0.25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fac-kpi b { font-size: 21px; font-weight: 850; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; color: var(--hx-dash-text); }
.fac-kpi.p1 { border-color: rgba(255, 45, 106, 0.28); box-shadow: var(--hx-dash-shadow-card), inset 3px 0 0 var(--hx-dash-coral); }
.fac-kpi.p1 b { color: var(--hx-dash-coral); }
.fac-kpi.p2 { border-color: rgba(255, 176, 26, 0.28); box-shadow: var(--hx-dash-shadow-card), inset 3px 0 0 var(--hx-dash-amber); }
.fac-kpi.p2 b { color: var(--hx-dash-amber); }
.fac-kpi.ok { box-shadow: var(--hx-dash-shadow-card), inset 3px 0 0 rgba(30, 240, 208, 0.55); }
.fac-kpi.ok b { color: var(--hx-dash-teal); }
.fac-kpi.dim b { color: var(--hx-dash-muted); }
.fac-wall-tools {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.fac-search { flex: 1 1 220px; min-width: 160px; }
.fac-search .tool-input {
  width: 100%; min-height: 36px; border-radius: var(--hx-dash-pill);
  border: 1px solid var(--hx-dash-border); background: rgba(255,255,255,0.04);
  color: var(--hx-dash-text); padding: 8px 14px; font-weight: 650;
}
.fac-filter {
  min-height: 36px; padding: 7px 12px; border-radius: var(--hx-dash-pill);
  font-size: 11px; font-weight: 850; letter-spacing: 0.2px;
  border: 1px solid var(--hx-dash-border); background: rgba(255,255,255,0.04);
  color: var(--hx-dash-muted); cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.18s;
}
.fac-filter:hover { border-color: var(--hx-dash-border-hi); color: var(--hx-dash-text); }
.fac-filter.on {
  border-color: rgba(30, 240, 208, 0.45);
  background: rgba(30, 240, 208, 0.12);
  color: var(--hx-dash-teal);
}
.fac-ward-mini {
  display: flex; flex-wrap: nowrap; gap: 6px;
  max-width: 100%; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}
.fac-ward-mini::-webkit-scrollbar { height: 5px; }
.fac-ward-mini::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 999px;
}
.fac-ward-mini .area-ward { flex: 0 0 auto; }
.bed-card.has-alert { box-shadow: 0 0 0 1px rgba(255,140,60,0.35); }
.bed-card.state-off { opacity: 0.72; border-style: dashed; }
.bed-card.state-nosensor {
  opacity: 0.88; border-style: dashed;
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(148, 163, 184, 0.06);
}
.bed-card.cohort-recent { box-shadow: inset 3px 0 0 rgba(78, 245, 255, 0.65); }
.bed-card.cohort-existing { box-shadow: inset 3px 0 0 rgba(216, 255, 60, 0.45); }
.bed-admit { margin: 2px 0 6px; font-size: 10px; font-weight: 700; color: var(--hx-dash-dim); }
.bed-guardian {
  margin: 0 0 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(78, 245, 255, 0.06);
  border: 1px solid rgba(78, 245, 255, 0.14);
  text-align: left;
  font-size: 11px;
  line-height: 1.35;
  color: var(--hx-dash-text, #e8f7ff);
}
.bed-guardian.missing {
  background: rgba(255, 176, 26, 0.08);
  border-color: rgba(255, 176, 26, 0.28);
  color: var(--hx-dash-dim);
  font-weight: 700;
}
.bed-guardian .bg-lab {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(78, 245, 255, 0.9);
  text-transform: none;
}
.bed-guardian .bg-name { font-weight: 700; margin-bottom: 2px; }
.bed-guardian .bg-phones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--hx-dash-dim);
  font-weight: 600;
}
.bed-guardian .bg-phones b { color: var(--hx-dash-text, #e8f7ff); font-weight: 800; }
.bed-guardian.compact {
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 10.5px;
  color: var(--hx-dash-dim);
  font-weight: 600;
}
.bed-card.compact .bed-guardian { margin-bottom: 4px; padding: 4px 6px; }
.bed-row-name .bed-guardian {
  display: block;
  margin-top: 2px;
}
.pdash-guardian {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(78, 245, 255, 0.2);
  background: rgba(12, 28, 40, 0.55);
}
.pdash-guardian > strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}
.pdash-guardian-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.pdash-guardian-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pdash-guardian-summary {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
}
.pdash-guardian-summary em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--hx-dash-dim);
  margin-right: 6px;
}
.pdash-rel-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  background: rgba(78, 245, 255, 0.12);
  border: 1px solid rgba(78, 245, 255, 0.28);
  color: #4ef5ff;
}
@media (max-width: 900px) {
  .pdash-guardian-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pdash-guardian-grid,
  .pdash-guardian-grid--4 { grid-template-columns: 1fr; }
}
.pdash-guardian-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--hx-dash-dim);
}
.pdash-guardian-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.fac-family-guardian {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.fac-family-guardian strong { display: block; margin-bottom: 4px; font-size: 12px; }
.fac-family-guardian p { margin: 2px 0; font-size: 13px; }
.fac-family-guardian a { color: #4ef5ff; }
@media (max-width: 720px) {
  .pdash-guardian-grid { grid-template-columns: 1fr; }
}
.flag.cohort-recent { background: rgba(78, 245, 255, 0.16); color: #9aefff; }
.flag.cohort-existing { background: rgba(216, 255, 60, 0.14); color: #d8ff3c; }

.facility-grid-host { display: grid; gap: 14px; }
.fac-cohorts { display: grid; gap: 14px; }
.fac-cohort {
  padding: 14px; border-radius: var(--hx-dash-r);
  border: 1px solid var(--hx-dash-border);
  background: linear-gradient(165deg, rgba(36, 38, 46, 0.72) 0%, rgba(22, 22, 28, 0.88) 55%, rgba(16, 16, 20, 0.94) 100%);
  box-shadow: var(--hx-dash-shadow-card);
}
.fac-cohort--recent { border-color: rgba(78, 245, 255, 0.28); }
.fac-cohort--existing { border-color: rgba(216, 255, 60, 0.22); }
.fac-cohort-h {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.fac-cohort-h h4 { margin: 0; font-size: 14px; font-weight: 850; letter-spacing: -0.02em; }
.fac-cohort-h .sub2 { margin: 3px 0 0; }
.fac-cohort-badge {
  font-size: 10px; font-weight: 850; padding: 5px 10px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.fac-cohort-badge.recent {
  border-color: rgba(78, 245, 255, 0.45); background: rgba(78, 245, 255, 0.12); color: #9aefff;
}
.fac-cohort-badge.existing {
  border-color: rgba(216, 255, 60, 0.4); background: rgba(216, 255, 60, 0.1); color: #d8ff3c;
}
.fac-cohort-sum {
  margin: 0; padding: 8px 10px; border-radius: 10px;
  border: 1px dashed var(--hx-dash-border); font-size: 11px; font-weight: 700;
  color: var(--hx-dash-dim); background: rgba(255,255,255,0.02);
}
.fac-cohort-mini { display: flex; flex-wrap: wrap; gap: 6px; }
.fac-empty.soft {
  padding: 16px; border-style: dashed; opacity: 0.9;
}
.flag.off { background: rgba(148,163,184,0.16); color: #94a3b8; }
.flag.attn { background: rgba(255,140,60,0.18); color: #ffc08a; }
.fac-empty {
  grid-column: 1 / -1; padding: 28px 16px; text-align: center;
  border-radius: 14px; border: 1px dashed var(--hx-dash-border); background: rgba(255,255,255,0.02);
}
.fac-empty strong { display: block; font-size: 14px; margin-bottom: 6px; }
.fac-empty p { margin: 0 0 12px; font-size: 12px; color: var(--hx-dash-dim); }
.fac-handoff {
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hx-dash-border);
  background: rgba(255,255,255,0.03); display: grid; gap: 8px;
}
.fac-handoff-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }
.fac-handoff-ta { width: 100%; min-height: 56px; resize: vertical; }
.fac-handoff-foot { display: flex; align-items: center; gap: 10px; }
.svc-status-chip {
  font-size: 10px; font-weight: 800; padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35); background: rgba(148,163,184,0.1); color: #cbd5e1;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.svc-status-chip.has-open {
  border-color: rgba(255,140,60,0.45); background: rgba(255,140,60,0.12); color: #ffc08a;
}
/* === 요양원 역할 전환 (케어 당직 · 원장 · 보호자) === */
.fac-role-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px; border-radius: var(--hx-dash-pill);
  border: 1px solid var(--hx-dash-border);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.fac-role {
  flex: 1 1 150px; min-width: 130px;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 9px 14px; border-radius: var(--hx-dash-pill); cursor: pointer;
  border: 1px solid transparent; background: transparent;
  color: var(--hx-dash-muted); font-size: 12.5px; font-weight: 850; letter-spacing: -0.01em;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.fac-role span { font-size: 10px; font-weight: 750; color: var(--hx-dash-dim); }
.fac-role:hover { background: rgba(255,255,255,0.04); color: var(--hx-dash-text); }
.fac-role.on {
  border-color: rgba(30, 240, 208, 0.4);
  background: rgba(30, 240, 208, 0.12);
  color: var(--hx-dash-teal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fac-role.on span { color: rgba(30, 240, 208, 0.75); }

.fac-station-actions[hidden], .fac-alert-banner[hidden], .fac-wall-panel[hidden], .fac-kpis[hidden], .fac-placement[hidden], .fac-wall-tools[hidden], .facility-grid[hidden], .fac-handoff[hidden], .fac-guardian[hidden], .fac-director[hidden] { display: none !important; }
/* 보호자 역할도 동일하게 스테이션만 — 상단 facility 모드 규칙으로 통합 */

/* 보호자·가족 안심 보기 */
.fac-family-pick { margin-bottom: 12px; }
.fac-family-pick label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; color: var(--hx-dash-dim); }
.fac-family-pick .tool-select { min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--hx-dash-border); background: rgba(255,255,255,0.04); color: var(--hx-dash-fg, #eaf7ff); font-size: 14px; font-weight: 700; }
.fac-family-card {
  position: relative; overflow: hidden;
  padding: 20px; border-radius: var(--hx-dash-r-card); border: 1px solid var(--hx-dash-border);
  background: var(--hx-dash-card); box-shadow: var(--hx-dash-shadow-card);
  display: grid; gap: 14px; max-width: 520px;
}
.fac-family-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  pointer-events: none;
}
.fac-family-card.calm { border-color: rgba(30,240,208,0.4); background: rgba(30,240,208,0.06); }
.fac-family-card.attn { border-color: rgba(255,140,60,0.45); background: rgba(255,140,60,0.08); }
.fac-family-who { display: flex; flex-direction: column; gap: 2px; }
.fac-family-who strong { font-size: 22px; font-weight: 850; letter-spacing: -0.02em; }
.fac-family-who span { font-size: 13px; color: var(--hx-dash-dim); font-weight: 700; }
.fac-family-status { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.5; }
.fac-family-card.calm .fac-family-status { color: #1ef0d0; }
.fac-family-card.attn .fac-family-status { color: #ffc08a; }
.fac-family-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fac-family-metrics > div {
  padding: 10px; border-radius: var(--hx-dash-r-sm); text-align: center;
  border: 1px solid var(--hx-dash-border); background: var(--hx-dash-card-soft);
}
.fac-family-metrics span { display: block; font-size: 10px; font-weight: 800; color: var(--hx-dash-dim); margin-bottom: 3px; }
.fac-family-metrics b { font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums; }
/* 재실 · 심박 · 호흡 — 개인용 카드와 동일 바이탈 색 악센트 */
.fac-family-metrics > div:nth-child(1) b { color: var(--cv-presence); }
.fac-family-metrics > div:nth-child(2) b { color: var(--cv-hr); }
.fac-family-metrics > div:nth-child(3) b { color: var(--cv-br); }
.fac-family-note { margin: 0; font-size: 11px; line-height: 1.5; color: var(--hx-dash-dim); }

/* 원장·관리자 요약 */
.fac-director { display: grid; gap: 12px; }
.fac-dir-h { margin: 4px 0 0; font-size: 13px; font-weight: 850; color: var(--hx-dash-muted); }
.fac-dir-wards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fac-dir-ward {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--hx-dash-r-sm); cursor: pointer; text-align: left;
  border: 1px solid var(--hx-dash-border); background: var(--hx-dash-card-soft); color: var(--hx-dash-fg, #eaf7ff);
  box-shadow: var(--hx-dash-shadow-card);
  transition: border-color 0.2s, transform 0.2s;
}
.fac-dir-ward:hover { border-color: var(--hx-dash-border-hi); transform: translateY(-1px); }
.fac-dir-ward.on { border-color: rgba(78,245,255,0.5); background: rgba(78,245,255,0.1); }
.fac-dir-ward strong { font-size: 14px; font-weight: 850; }
.fac-dir-ward span { font-size: 11px; color: var(--hx-dash-dim); font-weight: 700; }
.fac-dir-risk { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fac-dir-risk button {
  width: 100%; text-align: left; padding: 10px 13px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(255,140,60,0.35); background: rgba(255,140,60,0.07); color: var(--hx-dash-fg, #eaf7ff);
  font-size: 13px; font-weight: 700;
}
.fac-dir-risk button b { font-weight: 850; }

/* === v116-placement · 입소·병동 배치 / 경영 한눈 (cool teal · no red) === */
.fac-placement {
  margin: 0 0 12px;
}
.fac-place-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 16px 16px 14px;
  border-radius: var(--hx-dash-r-card, 16px);
  border: 1px solid rgba(78, 245, 255, 0.22);
  background:
    linear-gradient(155deg, rgba(20, 42, 48, 0.92), rgba(10, 16, 22, 0.96)),
    radial-gradient(120% 80% at 0% 0%, rgba(30, 240, 208, 0.1), transparent 55%);
  box-shadow: var(--hx-dash-shadow-card);
  color: var(--hx-dash-fg, #eaf7ff);
}
.fac-place-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.45), transparent);
  pointer-events: none;
}
.fac-place-hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.fac-place-kicker {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #5eead4;
  margin-bottom: 3px;
}
.fac-place-title {
  display: block;
  font-size: 17px; font-weight: 850; letter-spacing: -0.02em;
  color: var(--hx-dash-text, #eaf7ff);
}
.fac-place-copy {
  margin: 4px 0 0;
  font-size: 12px; line-height: 1.45; font-weight: 650;
  color: var(--hx-dash-muted, #9bb0bd);
  max-width: 42em;
}
.fac-place-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.fac-place-kpi {
  position: relative; overflow: hidden;
  padding: 10px 12px;
  border-radius: var(--hx-dash-r-sm, 12px);
  border: 1px solid rgba(78, 245, 255, 0.16);
  background: rgba(12, 24, 30, 0.55);
}
.fac-place-kpi::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: rgba(94, 234, 212, 0.65);
}
.fac-place-kpi.ex::before { background: #b8e62a; }
.fac-place-kpi.nw::before { background: #4ef5ff; }
.fac-place-kpi.dim::before { background: rgba(148, 163, 184, 0.55); }
.fac-place-kpi em {
  display: block; font-style: normal;
  font-size: 10.5px; font-weight: 800; color: var(--hx-dash-dim);
  margin-bottom: 2px;
}
.fac-place-kpi b {
  font-size: 22px; font-weight: 900; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: #9fe8d8;
}
.fac-place-kpi.ex b { color: #d8ff3c; }
.fac-place-kpi.nw b { color: #4ef5ff; }
.fac-place-kpi.dim b,
.fac-place-na { color: #94a3b8; font-size: 15px; font-weight: 800; }
.fac-place-kpi small {
  display: block; margin-top: 2px;
  font-size: 10.5px; font-weight: 700; color: var(--hx-dash-muted);
}
.fac-place-wards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.fac-place-ward {
  display: flex; flex-direction: column; gap: 7px;
  padding: 11px 12px;
  border-radius: var(--hx-dash-r-sm, 12px);
  border: 1px solid rgba(78, 245, 255, 0.18);
  background: rgba(8, 18, 24, 0.55);
  color: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.fac-place-ward:hover {
  border-color: rgba(78, 245, 255, 0.4);
  transform: translateY(-1px);
  background: rgba(16, 36, 42, 0.7);
}
.fac-place-ward.on {
  border-color: rgba(78, 245, 255, 0.55);
  background: rgba(30, 240, 208, 0.08);
  box-shadow: inset 0 0 0 1px rgba(78, 245, 255, 0.12);
}
.fac-place-ward-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.fac-place-ward-h strong { font-size: 13.5px; font-weight: 850; }
.fac-place-ward-h b {
  font-size: 18px; font-weight: 900; color: #9fe8d8;
  font-variant-numeric: tabular-nums;
}
.fac-place-ward-h b small { font-size: 11px; font-weight: 700; margin-left: 2px; color: var(--hx-dash-muted); }
.fac-place-bar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.fac-place-bar i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #1ef0d0, #4ef5ff);
}
.fac-place-split {
  display: flex; gap: 4px; min-height: 22px;
}
.fac-place-split span {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; padding: 3px 6px; border-radius: 7px;
  font-size: 10.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fac-place-split .ex {
  background: rgba(184, 230, 42, 0.14);
  color: #d8ff3c;
  border: 1px solid rgba(184, 230, 42, 0.28);
}
.fac-place-split .nw {
  background: rgba(78, 245, 255, 0.12);
  color: #4ef5ff;
  border: 1px solid rgba(78, 245, 255, 0.28);
}
.fac-place-split em { font-style: normal; opacity: 0.8; font-weight: 700; }
.fac-place-ward-meta {
  font-size: 10.5px; font-weight: 700; color: var(--hx-dash-dim);
}
.fac-place-unassigned {
  margin: 0; font-size: 12px; font-weight: 700; color: #94a3b8;
}
.fac-place-unassigned b { color: #9fe8d8; font-weight: 850; }
.fac-place-trend {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.fac-place-trend span {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 11px; border-radius: 10px;
  border: 1px solid rgba(78, 245, 255, 0.14);
  background: rgba(12, 24, 30, 0.45);
  font-size: 11px; font-weight: 700; color: var(--hx-dash-muted);
}
.fac-place-trend em {
  font-style: normal; font-size: 10px; font-weight: 800;
  letter-spacing: 0.04em; color: #5eead4;
}
.fac-place-trend b {
  font-size: 16px; font-weight: 900; color: #9fe8d8;
  font-variant-numeric: tabular-nums;
}
.fac-place-trend small { font-size: 10.5px; font-weight: 650; }
.fac-place-note,
.fac-place-empty {
  margin: 0;
  font-size: 11px; line-height: 1.5; font-weight: 650;
  color: var(--hx-dash-dim);
}
.fac-place-filter-hint {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--hx-dash-r-sm, 12px);
  border: 1px dashed rgba(78, 245, 255, 0.28);
  background: rgba(30, 240, 208, 0.06);
  font-size: 11.5px; line-height: 1.4; font-weight: 700;
  color: #9fe8d8;
}
.fac-place-filter-hint b { color: #4ef5ff; font-weight: 850; }
.fac-wall-filter-note {
  width: 100%;
  margin: 0 0 2px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(78, 245, 255, 0.22);
  background: rgba(12, 28, 34, 0.65);
  font-size: 11.5px; line-height: 1.4; font-weight: 700;
  color: #9bb0bd;
}
.fac-place-detail { flex: none; }

/* 원장 면 · 입소 요약 스트립 */
.fac-dir-place-lead {
  margin: -4px 0 8px;
  font-size: 12px; line-height: 1.45; font-weight: 650;
  color: var(--hx-dash-muted);
}
.fac-dir-place-sum {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 10px;
}
.fac-dir-place-sum > span {
  display: inline-flex; flex-direction: column; gap: 2px;
  min-width: 72px; padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid rgba(78, 245, 255, 0.16);
  background: rgba(12, 24, 30, 0.5);
}
.fac-dir-place-sum em {
  font-style: normal; font-size: 10px; font-weight: 800; color: var(--hx-dash-dim);
}
.fac-dir-place-sum b {
  font-size: 18px; font-weight: 900; color: #9fe8d8;
  font-variant-numeric: tabular-nums;
}
.fac-dir-place-sum b small { font-size: 11px; font-weight: 700; color: var(--hx-dash-muted); }
.fac-dir-place-sum .ex b { color: #d8ff3c; }
.fac-dir-place-sum .nw b { color: #4ef5ff; }
.fac-dir-place-sum .dim b { color: #94a3b8; font-size: 14px; }
.fac-dir-demo-tag {
  margin-left: 6px;
  font-style: normal; font-size: 10.5px; font-weight: 750;
  color: #94a3b8;
}

/* 시설 통계 · 입소 배치 섹션 */
.stats-fac-place {
  margin: 0 0 12px;
}
.stats-fac-place .fac-place-card {
  border-radius: 18px;
}

@media (max-width: 720px) {
  .fac-place-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fac-place-wards { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .fac-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .top-utils--careview .svc-status-chip,
  .top-utils--insights .svc-status-chip { display: none; }
}
@media (max-width: 639px) {
  .fac-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fac-alert-cards { grid-template-columns: 1fr; }
  .fac-role { flex: 1 1 100%; }
}

/* === 요양원 이벤트·케어 기록 팝업 === */
body.fac-care-open { overflow: hidden; }
.fac-care-modal[hidden] { display: none !important; }
.fac-care-modal {
  position: fixed; inset: 0; z-index: 10055; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.fac-care-scrim {
  position: absolute; inset: 0; background: rgba(2,6,12,.72); backdrop-filter: blur(6px);
}
.fac-care-sheet {
  position: relative; z-index: 1; width: min(560px, 100%); max-height: calc(100dvh - 32px);
  overflow: auto; border-radius: 18px; padding: 18px 18px 14px;
  background: linear-gradient(165deg, rgba(22,28,36,0.98), rgba(10,12,16,0.98));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.45), var(--hx-dash-shadow-card);
  color: var(--hx-dash-fg, #eaf7ff);
}
.fac-care-h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.fac-care-h > div { flex: 1; min-width: 0; }
.fac-care-kicker { margin: 0 0 4px; font-size: 10px; font-weight: 850; letter-spacing: 0.04em; color: #b9f5ff; }
.fac-care-h h3 { margin: 0; font-size: 16px; font-weight: 900; }
.fac-care-body { display: grid; gap: 14px; }
.fac-care-foot { margin: 12px 0 0; }
.fac-care-event {
  padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid #fbbf24; background: rgba(255,255,255,0.03);
}
.fac-care-event.p1 { border-left-color: #ff8a4c; background: rgba(255,138,76,0.10); } /* facility no-red · amber rail */
.fac-care-event.p2 { border-left-color: #fbbf24; }
.fac-care-event-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.fac-care-event-h em { font-style: normal; font-weight: 900; color: #ffc08a; font-size: 13px; }
.fac-care-detail { margin: 0 0 10px; font-size: 13px; font-weight: 700; line-height: 1.45; }
.fac-care-dl {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0;
}
.fac-care-dl div { display: grid; gap: 2px; }
.fac-care-dl dt { font-size: 10px; font-weight: 800; color: var(--hx-dash-dim); }
.fac-care-dl dd { margin: 0; font-size: 12px; font-weight: 750; }
.fac-care-section h4 { margin: 0 0 8px; font-size: 12px; font-weight: 900; color: #b9f5ff; }
.fac-care-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 280px; overflow: auto; }
.fac-care-hist.compact { max-height: 180px; }
.fac-care-hist-item, .fac-care-hist li {
  border-radius: 11px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
}
.fac-care-hist-item.ack, .fac-care-hist li.ack { opacity: 0.72; }
.fac-care-hist-item.on, .fac-care-hist li.on { border-color: rgba(78,245,255,0.4); }
.fac-care-hist-open, .fac-care-hist button {
  width: 100%; text-align: left; padding: 10px 12px; border: 0; background: transparent;
  color: inherit; cursor: pointer; display: grid; gap: 4px;
}
.fac-care-hist-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 10px; color: var(--hx-dash-dim); }
.fac-care-kind { font-weight: 850; color: #ffc08a; }
.fac-care-hist time { font-variant-numeric: tabular-nums; }
.fac-care-hist strong { font-size: 12px; font-weight: 850; }
.fac-care-hist span { font-size: 11px; color: var(--hx-dash-dim); font-weight: 650; }
.fac-care-roster { max-height: 360px; }
.fac-care-roster-item {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 8px; padding: 10px 11px;
}
.fac-care-roster-main {
  display: grid; gap: 3px; flex: 1 1 180px; min-width: 0;
}
.fac-care-roster-main strong { font-size: 13px; font-weight: 850; }
.fac-care-roster-meta { font-size: 11px; color: var(--hx-dash-dim); font-weight: 650; }
.fac-care-roster-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fac-care-note-lab { display: block; }
.fac-care-note { width: 100%; min-height: 64px; resize: vertical; }
.fac-care-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.fac-care-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fac-care-notes li {
  display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.2);
}
.fac-care-notes time { font-size: 10px; color: var(--hx-dash-dim); }
.fac-care-notes span { font-size: 12px; font-weight: 700; }
.fac-care-empty { padding: 12px; font-size: 12px; color: var(--hx-dash-dim); font-weight: 650; }
.fac-care-prop-strip {
  display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(78,245,255,0.2); background: rgba(78,245,255,0.06);
}
.fac-care-prop-strip strong { font-size: 12px; font-weight: 900; color: #b9f5ff; }
.fac-care-prop-strip span { font-size: 11px; font-weight: 750; }
.fac-care-prop-strip em { font-style: normal; font-size: 10px; color: var(--hx-dash-dim); }
@media (max-width: 639px) {
  .fac-care-dl { grid-template-columns: 1fr; }
  .fac-care-sheet { border-radius: 14px; max-height: 100dvh; }
}

/* === CNMA 2.0 구매자 초기 로그인 할당 === */
.cnma-provision-modal[hidden] { display: none !important; }
.cnma-provision-modal {
  position: fixed; inset: 0; z-index: 10070; display: grid; place-items: center; padding: 16px;
}
body.cnma-provision-open { overflow: hidden; }
.cnma-prov-panel {
  position: relative; z-index: 1; width: min(720px, 100%); max-height: calc(100dvh - 32px);
  overflow: auto; border-radius: 16px; background: #fff; color: #1f2430;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
}
.cnma-prov-head {
  display: flex; justify-content: space-between; gap: 12px; padding: 18px 20px 8px;
}
.cnma-prov-head h2 { margin: 0; font-size: 18px; font-weight: 900; color: #111827; }
.cnma-prov-head p { margin: 6px 0 0; font-size: 12px; color: #6b7280; font-weight: 650; line-height: 1.45; }
.cnma-prov-body { padding: 8px 20px 18px; display: grid; gap: 16px; }
.cnma-prov-note { font-size: 13px; color: #4b5563; line-height: 1.5; }
.cnma-prov-create h3, .cnma-prov-list-wrap h3 {
  margin: 0 0 10px; font-size: 14px; font-weight: 850; color: #111827;
}
.cnma-prov-form { display: grid; gap: 10px; }
.cnma-prov-form label {
  display: grid; gap: 6px; font-size: 12px; font-weight: 750; color: #374151;
}
.cnma-prov-ta { min-height: 72px; resize: vertical; font-family: inherit; }
.cnma-prov-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cnma-prov-row {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid #e5e7eb; background: #fafafa;
}
.cnma-prov-ops { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.cnma-prov-serials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cnma-prov-reveal {
  padding: 12px 14px; border-radius: 12px; border: 1px solid #93c5fd; background: #eff6ff; display: grid; gap: 8px;
}
.cnma-prov-reveal strong { font-size: 12.5px; color: #1d4ed8; }
.cnma-prov-cred { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12px; }
.cnma-prov-cred span { color: #6b7280; font-weight: 700; min-width: 72px; }
.cnma-prov-cred code {
  font-size: 13px; font-weight: 800; color: #111827; background: #fff;
  padding: 4px 8px; border-radius: 8px; border: 1px solid #e5e7eb;
}
.cnma-prov-panel .btn-cta { background: #2563eb; border-color: #2563eb; color: #fff; }
.cnma-prov-panel .btn-ghost { border: 1px solid #d1d5db; background: #fff; color: #374151; }
.cnma-prov-panel .tool-input, .cnma-prov-panel .tool-select {
  min-height: 40px; border-radius: 10px; border: 1px solid #d1d5db; background: #fff; color: #111827; padding: 8px 12px;
}
@media (max-width: 639px) {
  .cnma-prov-row { flex-direction: column; }
}

/* === CNMA XK 서버 연동 (CNMA OTP 전용) === */
.cnma-xk-link-modal .cnma-prov-panel { width: min(760px, 100%); }
.cnma-xk-keyrow { display: flex; gap: 8px; align-items: stretch; }
.cnma-xk-keyrow .tool-input { flex: 1; min-width: 0; }
.cnma-xk-masked { display: block; margin-top: 6px; font-size: 11.5px; color: #6b7280; font-weight: 650; }
.cnma-xk-masked code {
  font-size: 12px; font-weight: 800; color: #111827; background: #f3f4f6;
  padding: 2px 8px; border-radius: 6px;
}
.cnma-xk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.cnma-xk-paths { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cnma-xk-path {
  padding: 12px 14px; border-radius: 12px; border: 1px solid #e5e7eb; background: #fafafa;
}
.cnma-xk-path-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.cnma-xk-path-top strong { font-size: 13px; color: #111827; }
.cnma-xk-path p { margin: 6px 0 0; font-size: 12px; color: #4b5563; line-height: 1.45; font-weight: 600; }
.cnma-xk-badge {
  flex-shrink: 0; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px;
  background: #e5e7eb; color: #374151;
}
.cnma-xk-path[data-st="ok"] { border-color: #86efac; background: #f0fdf4; }
.cnma-xk-path[data-st="ok"] .cnma-xk-badge { background: #16a34a; color: #fff; }
.cnma-xk-path[data-st="no_response"],
.cnma-xk-path[data-st="key_saved"] { border-color: #fcd34d; background: #fffbeb; }
.cnma-xk-path[data-st="no_response"] .cnma-xk-badge,
.cnma-xk-path[data-st="key_saved"] .cnma-xk-badge { background: #d97706; color: #fff; }
.cnma-xk-path[data-st="no_key"],
.cnma-xk-path[data-st="skipped"] { border-color: #e5e7eb; background: #f9fafb; }
.cnma-xk-path[data-st="testing"] .cnma-xk-badge { background: #2563eb; color: #fff; }
.cnma-prov-list-wrap h3 small { font-weight: 650; color: #6b7280; font-size: 11.5px; }
.acct-msg.warn { color: #b45309; }

/* === CNMA 계정 관리 테이블 (서버 연동) === */
.cnma-prov-panel--wide { width: min(1100px, 100%); max-height: min(92vh, 920px); }
.cnma-badge-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.cnma-badge {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800;
  padding: 5px 10px; border-radius: 999px; letter-spacing: 0.02em;
}
.cnma-badge--ok { background: #dcfce7; color: #166534; }
.cnma-badge--err { background: #fee2e2; color: #991b1b; }
.cnma-badge--wait { background: #e0e7ff; color: #3730a3; }
.cnma-badge-sub { font-size: 11.5px; color: #6b7280; font-weight: 650; }
.cnma-table-wrap {
  overflow: auto; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff;
  max-height: min(48vh, 420px);
}
.cnma-acct-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 760px;
}
.cnma-acct-table th,
.cnma-acct-table td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid #f3f4f6; vertical-align: top;
}
.cnma-acct-table thead th {
  position: sticky; top: 0; background: #f8fafc; z-index: 1;
  font-size: 11.5px; color: #374151; font-weight: 800;
}
.cnma-th-btn {
  border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 800; color: inherit; text-align: left;
}
.cnma-th-btn:hover { color: #2563eb; }
.cnma-email { font-size: 12.5px; font-weight: 800; color: #111827; background: #f3f4f6; padding: 2px 6px; border-radius: 6px; }
.cnma-status {
  display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
}
.cnma-status--on { background: #dcfce7; color: #166534; }
.cnma-status--off { background: #f3f4f6; color: #6b7280; }
.cnma-ops { display: flex; flex-wrap: wrap; gap: 4px; min-width: 200px; }
.cnma-table-err { color: #991b1b; line-height: 1.55; }
.cnma-prov-form .tool-select { width: 100%; }

/* ── 1차 개인용 대시보드 팝업 · 2차 상세 (v81) ── */
.pdash-step {
  margin: 0 0 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
  color: #d8ff3c; text-transform: none;
}
.resident-monitor-modal {
  position: fixed; inset: 0; z-index: 130000; display: flex; align-items: flex-end; justify-content: center;
}
.resident-monitor-modal[hidden] { display: none !important; }
.resident-monitor-scrim { position: absolute; inset: 0; background: rgba(2,6,12,.72); backdrop-filter: blur(6px); }
.resident-monitor-sheet.pdash-sheet,
.pdash-l1-modal .resident-monitor-sheet {
  width: min(1180px, calc(100vw - 24px));
  max-height: min(92vh, 980px);
}

/* 이벤트 이력 · 상태 변화 (L1) */
.pdash-event-bundle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.pdash-event-card,
.pdash-status-card { text-align: left; cursor: default; min-height: 0; }
.pdash-event-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}
.pdash-event-kpis > div {
  padding: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.pdash-event-kpis span {
  display: block; font-size: 10px; font-weight: 800; color: var(--hx-dash-dim); margin-bottom: 2px;
}
.pdash-event-kpis b { font-size: 18px; font-weight: 900; }
.pdash-event-list,
.pdash-status-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 220px; overflow: auto;
}
.pdash-event-list li,
.pdash-status-list li {
  display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.pdash-event-list li.live { border-color: rgba(255,45,106,0.35); }
.pdash-event-list time,
.pdash-status-list time { font-size: 11px; font-weight: 800; color: var(--hx-dash-dim); }
.pdash-event-list strong { font-size: 13px; font-weight: 850; color: #ff6b8a; }
.pdash-event-list span,
.pdash-status-list span { font-size: 12.5px; line-height: 1.4; }
.pdash-st-badge {
  display: inline-block; width: fit-content; font-style: normal; font-size: 11px; font-weight: 850;
  padding: 2px 8px; border-radius: 999px;
}
.pdash-status-list li.rec .pdash-st-badge { color: #1ef0d0; background: rgba(30,240,208,0.12); }
.pdash-status-list li.worse .pdash-st-badge { color: #ff6b8a; background: rgba(255,45,106,0.12); }
.pdash-status-list li.stable .pdash-st-badge { color: #d8ff3c; background: rgba(216,255,60,0.12); }
@media (max-width: 820px) {
  .pdash-event-bundle { grid-template-columns: 1fr; }
}

.pdash-clinical-bundle.clinical-bundle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.pdash-clinical-card,
.pdash-med-card {
  text-align: left;
  min-height: 0;
  cursor: default;
}
.pdash-clinical-view { display: grid; gap: 10px; margin-top: 4px; }
.pdash-dx .k {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--hx-dash-dim);
  margin-bottom: 3px;
}
.pdash-dx strong {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
}
.pdash-dx p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--hx-dash-text, #e8f7ff);
  white-space: pre-wrap;
}
.pdash-med-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pdash-med-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.pdash-med-list strong { font-size: 13.5px; font-weight: 850; }
.pdash-med-dose {
  font-size: 12px;
  font-weight: 800;
  color: #7ad4ff;
  justify-self: end;
}
.pdash-med-sch {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 12px;
  font-weight: 750;
  color: #d8ff3c;
}
.pdash-med-note {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--hx-dash-dim);
}
.pdash-empty {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--hx-dash-dim);
  font-weight: 700;
}
.pdash-edit-details {
  margin-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.1);
  padding-top: 8px;
}
.pdash-edit-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  color: #4ef5ff;
  list-style: none;
}
.pdash-edit-details summary::-webkit-details-marker { display: none; }
.pdash-edit-details[open] summary { margin-bottom: 8px; }
.pdash-edit-details label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 750;
  color: var(--hx-dash-dim);
}
.pdash-edit-details textarea.tool-input {
  min-height: 72px;
  resize: vertical;
  font-family: inherit;
}
@media (max-width: 820px) {
  .pdash-clinical-bundle.clinical-bundle { grid-template-columns: 1fr; }
}

.pdash-mosaic.bento.mosaic {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
}
.pdash-mosaic .vital-bundle,
.pdash-mosaic .care-bundle {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.pdash-mosaic .vital-bundle {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pdash-mosaic .care-bundle {
  grid-template-columns: 1.1fr 1.35fr 1fr;
}
.pdash-mosaic .bento-card {
  text-align: left;
  cursor: pointer;
  min-height: 210px;
}
.pdash-mosaic .pdash-chart-slot,
.pdash-mosaic .sleep-hypno-wrap,
.pdash-mosaic .stress-tod-wrap,
.pdash-mosaic .hr-range-wrap {
  margin-top: 6px;
  min-height: 72px;
}
.pdash-mosaic .pdash-chart-slot svg,
.pdash-mosaic .sleep-hypno-wrap svg,
.pdash-mosaic .stress-tod-wrap svg,
.pdash-mosaic .hr-range-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}
.pdash-mosaic .pdash-br-wave { width: 100%; height: 56px; margin: 6px 0; }
.pdash-mosaic .pdash-card-foot { margin-top: 8px; }
.pdash-mosaic .audio-card { min-height: 240px; }
.pdash-audio-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 8px 0;
  font-size: 12px;
  color: var(--hx-dash-dim);
}
.pdash-audio-stats b { color: var(--hx-dash-text); font-weight: 850; }
.pdash-audio-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  height: 10px;
  margin: 8px 0;
}
.pdash-audio-bar i {
  display: block;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}
.pdash-audio-bar i.s2 { background: #ff8a4c; }
.fac-kpi.highlight {
  border-color: rgba(78, 245, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(78, 245, 255, 0.12);
}
.facility-grid.density-glance,
.facility-grid.show-all.density-glance {
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 8px;
}
.facility-grid.density-glance-xl,
.facility-grid.show-all.density-glance-xl {
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 6px;
}
.facility-grid.density-glance .bed-card,
.facility-grid.density-glance-xl .bed-card {
  padding: 10px;
  border-radius: 14px;
  min-height: 0;
}
/* 대규모 관제(40·100·200장)에서도 실시간 바이탈은 유지 — 입소일/코호트만 접는다 */
.facility-grid.density-glance .bed-admit,
.facility-grid.density-glance-xl .bed-admit,
.facility-grid.density-glance-xl .bed-flags .flag.cohort-recent,
.facility-grid.density-glance-xl .bed-flags .flag.cohort-existing { display: none; }
.facility-grid.density-glance-xl .bed-flags { margin-bottom: 0; gap: 3px; }
/* 신규/기존 칩을 접는 대신 카드 좌측 스트라이프로 유지 */
.facility-grid.density-glance-xl .bed-card.cohort-recent {
  box-shadow: inset 3px 0 0 rgba(78, 245, 255, 0.45), var(--hx-dash-shadow-card);
}
.facility-grid.density-glance-xl .bed-name { font-size: 12px; }
.facility-grid.density-glance .bed-metrics,
.facility-grid.density-glance-xl .bed-metrics {
  display: flex; flex-wrap: wrap;
  gap: 3px 7px; padding-top: 6px;
  font-size: 10px;
}
.facility-grid.density-glance .bed-metrics b { font-size: 11.5px; }
.facility-grid.density-glance-xl .bed-metrics { gap: 2px 6px; font-size: 9.5px; }
.facility-grid.density-glance-xl .bed-metrics b { font-size: 11px; }
.facility-grid.density-glance-xl .bed-metrics .m-chip { padding: 1px 5px; }
@media (max-width: 980px) {
  .pdash-mosaic .vital-bundle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdash-mosaic .care-bundle { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pdash-mosaic .vital-bundle { grid-template-columns: 1fr; }
}
.resident-monitor-sheet {
  position: relative; width: min(720px, 100%); max-height: 90vh; overflow: auto;
  background: linear-gradient(165deg, #1c1d21, #121318); border: 1px solid var(--hx-dash-border);
  border-radius: 20px 20px 0 0; padding: 18px 16px 20px;
  box-shadow: 0 -12px 40px rgba(0,0,0,.45);
  animation: cv-sheet-up .28s cubic-bezier(.2,.7,.3,1);
}
.resident-monitor-h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.resident-monitor-h h3 { margin: 0; font-size: 17px; font-weight: 900; }
.resident-monitor-h .btn-ghost { margin-left: auto; }

.pdash-hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; margin-bottom: 12px;
}
.pdash-hero-main {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 14px; border-radius: 16px; border: 1px solid var(--hx-dash-border);
  background: rgba(216,255,60,0.06);
}
.pdash-pobc { font-size: 36px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.pdash-hero-tiles { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pdash-mini {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--hx-dash-border); background: rgba(255,255,255,0.04); color: inherit;
}
.pdash-mini span { font-size: 11px; font-weight: 750; color: var(--hx-dash-dim); }
.pdash-mini b { font-size: 15px; font-weight: 900; }
.pdash-mini:hover { border-color: rgba(216,255,60,0.4); }
.pdash-hint {
  margin: 0 0 10px; font-size: 12px; font-weight: 650; color: var(--hx-dash-muted);
}
.pdash-hint b { color: #d8ff3c; font-weight: 850; }
.pdash-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px;
}
.pdash-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 12px 28px; border-radius: 14px; text-align: left; cursor: pointer; min-height: 88px;
  border: 1px solid var(--hx-dash-border); background: rgba(255,255,255,0.04); color: inherit;
  transition: border-color .15s, transform .15s;
}
.pdash-card:hover { border-color: rgba(216,255,60,0.45); transform: translateY(-1px); }
.pdash-card.state-crit { border-color: rgba(255,45,106,0.4); }
.pdash-card.state-warn { border-color: rgba(255,176,26,0.35); }
.pdash-card-k { font-size: 11px; font-weight: 750; color: var(--hx-dash-dim); }
.pdash-card-v { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }
.pdash-card em { font-style: normal; font-size: 10px; color: var(--hx-dash-muted); font-weight: 700; }
.pdash-card-go {
  position: absolute; right: 10px; bottom: 8px;
  font-size: 10.5px; font-weight: 800; color: #d8ff3c;
}

.rm-sensor, .rm-alerts { margin-bottom: 12px; }
.rm-sensor strong, .rm-alerts strong { display: block; font-size: 12px; margin-bottom: 6px; }
.rm-sensor p, .rm-alerts p { margin: 0; font-size: 12.5px; color: var(--hx-dash-muted); }
.rm-sensor p.warn { color: #ffb01a; }
.rm-alerts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rm-alerts li {
  font-size: 12px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--hx-dash-border);
}
.rm-alerts em { font-style: normal; font-weight: 800; color: #ff8c3c; margin-right: 4px; }
.rm-alerts time { color: var(--hx-dash-dim); font-size: 11px; }

/* 2차 상세: 1차 위에 모달 오버레이 */
.detail-drawer.pdash-l2 {
  position: fixed; inset: 0; z-index: 140000; width: auto; right: auto; bottom: auto;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 0; padding: 16px;
  box-shadow: none; max-height: none;
}
.detail-drawer.pdash-l2 .detail-l2-scrim {
  position: absolute; inset: 0; background: rgba(2,6,12,.55); backdrop-filter: blur(4px);
  border: 0; width: auto; height: auto; margin: 0; border-radius: 0;
}
.detail-drawer.pdash-l2 .detail-panel-inner {
  position: relative; z-index: 1; width: min(420px, 100%); max-height: 86vh; overflow: auto;
  background: linear-gradient(165deg, #1c1d21, #121318);
  border: 1px solid var(--hx-dash-border-hi); border-radius: 18px; padding: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.detail-drawer:not(.pdash-l2) .detail-l2-scrim { display: none !important; }
.detail-drawer:not(.pdash-l2) .detail-panel-inner { display: contents; }
.detail-title-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.detail-title-wrap .pdash-step { width: 100%; }

.fac-scale-bar, .fac-view-mini, .fac-pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
}
.fac-scale-lab { font-size: 11px; font-weight: 750; color: var(--hx-dash-dim); }
.fac-pager {
  justify-content: space-between; padding: 10px 4px 2px;
  border-top: 1px solid rgba(255,255,255,.06); margin-top: 8px;
}
.fac-pager-meta { font-size: 11.5px; font-weight: 650; color: var(--hx-dash-muted); }

.fac-list { display: grid; gap: 4px; }
.bed-row {
  display: grid; grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center; gap: 8px 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 12px; min-height: 44px;
  background: rgba(255,255,255,.03); border: 1px solid var(--hx-dash-border);
  color: inherit; cursor: pointer;
}
.bed-row:hover { border-color: var(--hx-dash-border-hi); background: rgba(255,255,255,.05); }
.bed-row.on { border-color: rgba(78, 245, 255, 0.45); }
.bed-row.has-alert { box-shadow: inset 3px 0 0 rgba(255,140,60,.7); }
.bed-row.state-crit { border-color: rgba(255,45,106,.4); }
.bed-row.state-warn { border-color: rgba(255,176,26,.35); }
.bed-row.state-off, .bed-row.state-nosensor { opacity: .78; }
.bed-row-bed { font-weight: 900; font-size: 13px; }
.bed-row-name { font-size: 13px; font-weight: 700; min-width: 0; }
.bed-row-name em { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--hx-dash-dim); }
.bed-row-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.bed-row-vitals { font-size: 11px; color: var(--hx-dash-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bed-row-vitals b { color: var(--hx-dash-text); font-weight: 800; }

.fac-roi-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px;
}
.fac-roi {
  position: relative; overflow: hidden;
  background: var(--hx-dash-card); border: 1px solid var(--hx-dash-border);
  box-shadow: var(--hx-dash-shadow-card);
  border-radius: var(--hx-dash-r-sm); padding: 12px 13px;
}
.fac-roi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  pointer-events: none;
}
.fac-roi span { display: block; font-size: 10.5px; font-weight: 700; color: var(--hx-dash-dim); margin-bottom: 4px; }
.fac-roi b { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fac-roi b small { font-size: 11px; font-weight: 700; margin-left: 2px; color: var(--hx-dash-muted); }
.fac-roi em { display: block; font-style: normal; font-size: 10.5px; color: var(--hx-dash-muted); margin-top: 2px; }

@media (min-width: 720px) {
  .resident-monitor-modal { align-items: center; }
  .resident-monitor-sheet { border-radius: 18px; padding: 20px; }
}
@media (max-width: 720px) {
  .pdash-hero { grid-template-columns: 1fr; }
  .pdash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fac-roi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bed-row { grid-template-columns: 56px minmax(0, 1fr); }
  .bed-row-flags, .bed-row-vitals { grid-column: 1 / -1; }
}

/* ── XK 게이트웨이 서버측 연동 상태 (CNMA 관리자) ── */
.cnma-xk-gw {
  margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid #e5e7eb; background: #f9fafb;
}
.cnma-xk-gw-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.cnma-xk-gw-top strong { font-size: 13px; color: #111827; }
.cnma-xk-gw p { margin: 6px 0 0; font-size: 11.5px; color: #4b5563; line-height: 1.5; font-weight: 600; }
.cnma-xk-gw code {
  font-size: 10.5px; background: #eef2ff; color: #3730a3;
  padding: 1px 5px; border-radius: 5px;
}
.cnma-xk-badge[data-tone="live"] { background: #16a34a; color: #fff; }
.cnma-xk-badge[data-tone="wait"] { background: #d97706; color: #fff; }
.cnma-xk-badge[data-tone="demo"] { background: #6b7280; color: #fff; }
.cnma-xk-badge[data-tone="idle"] { background: #cbd5e1; color: #1f2937; }
.cnma-xk-badge[data-tone="nokey"] { background: #9ca3af; color: #111827; }
.cnma-xk-gw .cnma-xk-actions { margin-top: 10px; }

.cnma-xk-conn-status {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(148, 163, 184, .14); border: 1px solid rgba(148,163,184,.28);
}
.cnma-xk-conn-status[data-tone="live"] { background: rgba(22, 163, 74, .12); border-color: rgba(22,163,74,.35); }
.cnma-xk-conn-status[data-tone="nokey"] { background: rgba(107, 114, 128, .12); }
.cnma-xk-conn-status[data-tone="wait"] { background: rgba(217, 119, 6, .12); border-color: rgba(217,119,6,.35); }
.cnma-xk-conn-status p { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: #4b5563; }
.cnma-xk-map { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cnma-xk-map-row {
  display: grid; grid-template-columns: minmax(7rem,auto) 1fr 1fr 1fr; gap: 6px; align-items: center;
}
.cnma-xk-map-row code { font-size: 11px; font-weight: 700; }
@media (max-width: 720px) {
  .cnma-xk-map-row { grid-template-columns: 1fr 1fr; }
}
.conn-xk-strip {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
  background: rgba(148, 163, 184, .12); border: 1px solid rgba(148,163,184,.25);
}
.conn-xk-strip.tone-ok { background: rgba(22, 163, 74, .12); border-color: rgba(22,163,74,.35); }
.conn-xk-strip.tone-warn { background: rgba(217, 119, 6, .1); border-color: rgba(217,119,6,.3); }
.conn-xk-strip p { margin: 6px 0 8px; font-size: 12px; font-weight: 600; color: #4b5563; }
.conn-xk-strip span { margin-left: 8px; font-weight: 800; font-size: 12px; }

/* ── 보호자 알림 발송 요청 결과 (요양원 케어 팝업) ── */
.fac-care-notify-out {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 9px;
  font-size: 11.5px; font-weight: 700; line-height: 1.45;
  background: rgba(148, 163, 184, .16); color: var(--cv-text, #e8eef8);
}
.fac-care-notify-out[data-tone="ok"] { background: rgba(22, 163, 74, .18); color: #34d399; }
.fac-care-notify-out[data-tone="warn"] { background: rgba(217, 119, 6, .18); color: #fbbf24; }
.fac-care-notify-out[data-tone="err"] { background: rgba(220, 38, 38, .18); color: #fca5a5; }

/* ═══════════════════════════════════════════════════════════════════
   CareView 2.0 · DESIGN DNA 강화 레이어 (v97-designdna)
   기존 --hx-dash-* / --cv-* 팔레트만 강화 · 신규 purple/cream 컬러 도입 금지
   깊이(mosaic/bento) · 계층(KPI·bed·alert·L1·device) · 상태강조 · 타이포 · 마이크로 인터랙션
   상호작용(카드→L1 · KPI 팝업 · strip 스크롤 · 필터)은 유지 — 시각 강화만 추가
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --cv-ease: cubic-bezier(0.22, 0.68, 0.32, 1);
  --cv-lift: 0 16px 34px rgba(0, 0, 0, 0.46);
  --cv-hair: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

/* ── 1. 모자이크/벤토 깊이·분위기 (은은한 상태색 광원 + inset 하이라이트) ── */
.bento.mosaic .vital-bundle,
.bento.mosaic .care-bundle {
  position: relative;
  isolation: isolate;
  box-shadow: var(--hx-dash-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.bento.mosaic .vital-bundle::after,
.bento.mosaic .care-bundle::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(140% 90% at 0% 0%, rgba(30, 240, 208, 0.055), transparent 52%),
    radial-gradient(140% 100% at 100% 0%, rgba(216, 255, 60, 0.045), transparent 55%);
}
.bento.mosaic .vital-bundle > *,
.bento.mosaic .care-bundle > * { position: relative; z-index: 1; }

/* ── 2. 타이포: 라벨 타이트 · 지표 숫자 강조 ── */
.card-h .t {
  letter-spacing: 0.35px; text-transform: uppercase; font-weight: 800; opacity: 0.92;
}
.metric,
.score-num,
.fac-kpi b,
.bed-metrics b,
.overall-box .big,
.hero-tile strong {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv01" 1;
}
.metric { letter-spacing: -0.9px; }
.score-num--hero { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.hero-title { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.hero-kicker { color: var(--hx-dash-muted); opacity: 0.85; }

/* ── 3. Pill 일관성 (통일 패딩·라인·미세 블러) ── */
.pill { letter-spacing: 0.3px; line-height: 1.35; }
.pill.ok, .pill.warn, .pill.crit { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* ── 4. 벤토 카드 호버 리프트 (미세 상승 + 그림자) ── */
.bento-card,
.bed-card,
.fac-kpi,
.stat-mini,
.dev-chip {
  transition: border-color 0.2s var(--cv-ease), transform 0.2s var(--cv-ease), box-shadow 0.2s var(--cv-ease), background 0.2s var(--cv-ease);
}
.bento-card:hover,
.bed-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cv-lift), var(--hx-dash-shadow-card);
}
.stat-mini:hover { transform: translateY(-2px); border-color: var(--hx-dash-border-hi); box-shadow: var(--cv-lift); }

/* ── 5. 상태색 강조 — 재실(teal) · 낙상(coral) · 움직임(lime/orange) ── */
.bento-card[data-metric="presence"]:hover { border-color: rgba(30, 240, 208, 0.45); }
.bento-card[data-metric="fall"]:hover,
.fall-side-card:hover { border-color: rgba(255, 45, 106, 0.5); }
.bento-card[data-metric="movement"]:hover { border-color: rgba(216, 255, 60, 0.42); }
.bento-card[data-metric="hr"]:hover { border-color: rgba(255, 59, 92, 0.42); }
.bento-card[data-metric="br"]:hover { border-color: rgba(61, 184, 255, 0.42); }
.bento-card[data-metric="stress"]:hover { border-color: rgba(255, 111, 20, 0.4); }
.bento-card[data-metric="sleep"]:hover { border-color: rgba(167, 139, 250, 0.42); }

/* 우선케어(낙상) 사이드카드 — 상태 강조 + 임계 시 호흡 글로우 */
.fall-side-card { transition: border-color 0.2s var(--cv-ease), transform 0.2s var(--cv-ease), box-shadow 0.2s var(--cv-ease); }
.fall-side-card:hover { transform: translateY(-2px); }
.fall-side-card.state-crit,
.fall-side-card.crit {
  border-color: rgba(255, 45, 106, 0.55);
  box-shadow: inset 3px 0 0 var(--cv-fall), var(--hx-dash-shadow);
  animation: cv-crit-breathe 2s var(--cv-ease) infinite;
}

/* ── 6. 시설 KPI(듀티) — 좌측 상태 액센트 바 + 숫자 글로우 (풀필 amber/coral 금지) ── */
.fac-kpi.p1 { background: var(--hx-dash-card); box-shadow: var(--hx-dash-shadow-card), inset 3px 0 0 var(--cv-fall, var(--hx-dash-coral)); }
.fac-kpi.p1 b { text-shadow: 0 0 18px rgba(255, 45, 106, 0.35); }
.fac-kpi.p1 { animation: cv-crit-breathe 2.2s var(--cv-ease) infinite; }
.fac-kpi.p2 { background: var(--hx-dash-card); box-shadow: var(--hx-dash-shadow-card), inset 3px 0 0 var(--hx-dash-amber); }
.fac-kpi.ok { background: var(--hx-dash-card); box-shadow: var(--hx-dash-shadow-card), inset 3px 0 0 rgba(30, 240, 208, 0.55); }
.fac-kpi:hover { transform: translateY(-2px); box-shadow: var(--cv-lift); }
.fac-kpi b { letter-spacing: -0.4px; }

/* ── 7. Bed 카드 — 임계 좌측 액센트 + 이름 강조 + 호흡 글로우 ── */
.bed-card.state-crit {
  box-shadow: 0 0 0 1px rgba(255, 45, 106, 0.18), inset 3px 0 0 var(--cv-fall), var(--hx-dash-shadow-card);
  animation: cv-crit-breathe 2s var(--cv-ease) infinite;
}
.bed-card.state-crit .bed-name { color: #ffd0dd; }
.bed-card.state-warn { box-shadow: inset 3px 0 0 var(--hx-dash-amber), var(--hx-dash-shadow-card); }

/* ── 8. Alert strip — 임계 좌측 액센트 + 은은한 펄스 링 ── */
.alert-item.crit {
  box-shadow: inset 3px 0 0 var(--cv-fall);
  animation: cv-alert-pulse 1.9s var(--cv-ease) infinite;
}
.alert-item b { letter-spacing: -0.1px; }
.attention-banner { box-shadow: inset 3px 0 0 var(--hx-dash-orange); }

/* 시설 알림 배너 — cool mosaic 테두리 호흡 (amber 풀필 제거) */
.fac-alert-banner { animation: cv-fac-alert 2.6s var(--cv-ease) infinite; }
.fac-alert-card.p1 {
  background: var(--hx-dash-card);
  box-shadow: var(--hx-dash-shadow-card), inset 3px 0 0 var(--hx-dash-coral), 0 0 0 1px rgba(255, 45, 106, 0.1);
}
.fac-alert-card.p2 {
  background: var(--hx-dash-card);
  box-shadow: var(--hx-dash-shadow-card), inset 3px 0 0 var(--hx-dash-amber);
}
.fac-alert-card,
.fac-prop-chip {
  transition: border-color 0.2s var(--cv-ease), transform 0.2s var(--cv-ease), box-shadow 0.2s var(--cv-ease), background 0.2s var(--cv-ease);
}

/* ── 9. Device strip — 온라인 상태 강조 + 호버 리프트 ── */
.dev-chip:hover { transform: translateY(-1px); border-color: var(--hx-dash-border-hi); background: rgba(255, 255, 255, 0.06); }
.dev-chip.online { border-color: rgba(30, 240, 208, 0.28); }
.dev-chip.online:hover { border-color: rgba(30, 240, 208, 0.5); }
.dev-chip.error { border-color: rgba(255, 45, 106, 0.35); }
.dev-strip-title strong { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }

/* ── 10. L1 개인용 대시보드 모자이크 팝업 — 시트 깊이 + 헤더 강조 ── */
.resident-monitor-sheet.pdash-sheet,
.pdash-l1-modal .resident-monitor-sheet {
  box-shadow: var(--hx-dash-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pdash-step { letter-spacing: 0.4px; }
.pdash-event-kpis b,
.fac-roi b { font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.pdash-event-card,
.pdash-status-card,
.pdash-clinical-card,
.pdash-med-card { transition: border-color 0.18s var(--cv-ease), transform 0.18s var(--cv-ease); }

/* ── 11. 모션 키프레임 ── */
@keyframes cv-crit-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 45, 106, 0.12), inset 3px 0 0 var(--cv-fall), var(--hx-dash-shadow-card); }
  50% { box-shadow: 0 0 0 3px rgba(255, 45, 106, 0.14), inset 3px 0 0 var(--cv-fall), var(--hx-dash-shadow-card); }
}
@keyframes cv-alert-pulse {
  0%, 100% { box-shadow: inset 3px 0 0 var(--cv-fall), 0 0 0 0 rgba(255, 45, 106, 0); }
  50% { box-shadow: inset 3px 0 0 var(--cv-fall), 0 0 0 3px rgba(255, 45, 106, 0.09); }
}
@keyframes cv-fac-alert {
  0%, 100% { border-color: rgba(255, 255, 255, 0.12); }
  50% { border-color: rgba(30, 240, 208, 0.28); }
}

/* ── 12. 접근성: reduced-motion 전역 가드 (강화 모션 무력화) ── */
@media (prefers-reduced-motion: reduce) {
  .fall-side-card.state-crit,
  .fall-side-card.crit,
  .fac-kpi.p1,
  .bed-card.state-crit,
  .alert-item.crit,
  .fac-alert-banner { animation: none !important; }
  .bento-card,
  .bed-card,
  .fac-kpi,
  .fac-alert-card,
  .fac-prop-chip,
  .stat-mini,
  .dev-chip { transition: border-color 0.2s, box-shadow 0.2s !important; }
  .bento-card:hover,
  .bed-card:hover,
  .stat-mini:hover,
  .fac-kpi:hover,
  .fac-alert-card:hover,
  .fac-prop-chip:hover,
  .dev-chip:hover,
  .fall-side-card:hover { transform: none !important; }
}
/* ═══════════════ /v97-designdna ═══════════════ */

/* ═══════════════════════════════════════════════════════════════════
   CareView 2.0 · 요양원 당직 DNA 정렬 (v99-facdna)
   개인/가족 모자이크와 동일 cool dark DNA · severity는 좌측 스트라이프/액센트만
   ═══════════════════════════════════════════════════════════════════ */
.fac-alert-banner.has-open {
  box-shadow: var(--hx-dash-shadow-card), inset 3px 0 0 var(--hx-dash-coral), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.fac-alert-banner.is-clear {
  box-shadow: var(--hx-dash-shadow-card), inset 3px 0 0 rgba(30, 240, 208, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.fac-handoff {
  background: var(--hx-dash-card);
  border-radius: var(--hx-dash-r-card);
  box-shadow: var(--hx-dash-shadow-card);
}
.fac-station-head h3 { letter-spacing: -0.02em; color: var(--hx-dash-text); }
.fac-scale-lab {
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  color: var(--hx-dash-dim); text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .fac-filter { transition: border-color 0.2s, color 0.2s, background 0.2s !important; }
}
/* ═══════════════ /v99-facdna ═══════════════ */

/* ═══════════════════════════════════════════════════════════════════
   CareView 2.0 · 케어 당직 TOP/BOTTOM 시각 분리 (v100-facsplit)
   TOP = 사건/대응 레인 (티켓·타임라인) · BOTTOM = 상시 관제 벽 (병상 모자이크)
   DNA: teal / lime / coral · severity = pill·좌측 바 only
   ═══════════════════════════════════════════════════════════════════ */

/* —— TOP: 사건/대응 레인 —— */
.fac-alert-banner {
  padding: 0;
  border-radius: 14px;
  border-color: rgba(255, 45, 106, 0.22);
  background:
    linear-gradient(180deg, rgba(28, 18, 24, 0.92) 0%, rgba(16, 16, 22, 0.96) 100%);
  box-shadow: var(--hx-dash-shadow-card), inset 0 1px 0 rgba(255, 80, 120, 0.08);
}
.fac-alert-banner::after {
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(255, 45, 106, 0.1), transparent 55%),
    radial-gradient(80% 60% at 100% 0%, rgba(255, 176, 26, 0.05), transparent 50%);
}
.fac-alert-banner.has-open {
  box-shadow: var(--hx-dash-shadow-card), inset 4px 0 0 var(--hx-dash-coral), inset 0 1px 0 rgba(255, 80, 120, 0.1);
}
.fac-lane-kicker {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(90deg, rgba(255, 45, 106, 0.16), rgba(255, 111, 20, 0.06) 55%, transparent);
  border-bottom: 1px solid rgba(255, 45, 106, 0.18);
}
.fac-lane-tag {
  font-size: 10px; font-weight: 900; letter-spacing: 0.55px; text-transform: uppercase;
  color: #ffb0c4;
}
.fac-lane-hint {
  font-size: 10.5px; font-weight: 700; color: var(--hx-dash-dim);
}
.fac-alert-hd {
  padding: 12px 14px 10px; margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.fac-alert-hd strong {
  font-size: 14px; font-weight: 900; letter-spacing: -0.02em;
  color: #ffe4ec;
}

/* 상황 전파 = situation-first glance cards (horizontal rail) */
.fac-prop-monitor {
  margin: 0; padding: 10px 14px 12px;
  border-radius: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.18);
  box-shadow: none;
}
.fac-prop-monitor::before,
.fac-prop-monitor::after { display: none; }
.fac-prop-hd {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin-bottom: 8px;
}
.fac-prop-hd strong {
  font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--hx-dash-teal); opacity: 0.9;
}
.fac-prop-concept {
  font-size: 10.5px; font-style: normal; font-weight: 700;
  color: #a8b4c4; letter-spacing: -0.01em;
}
.fac-prop-hd > span {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  color: var(--hx-dash-dim); font-variant-numeric: tabular-nums;
}
.fac-prop-people.fac-prop-rail,
.fac-prop-rail {
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 2px 0 6px; scrollbar-width: thin;
}
.fac-prop-chip {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: 4px auto minmax(0, 1fr) auto;
  align-items: center; gap: 0 8px;
  flex: 0 0 auto; min-width: 168px; max-width: 240px;
  padding: 9px 12px 9px 0;
  border-radius: 12px;
  background: rgba(18, 22, 28, 0.92);
  border: 1px solid rgba(122, 134, 152, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--hx-dash-text);
  text-align: left; cursor: pointer;
  font: inherit;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.fac-prop-chip::before { display: none; }
.fac-prop-sev {
  grid-row: 1 / -1; align-self: stretch; width: 4px; margin: 0;
  border-radius: 12px 0 0 12px;
  background: #8a96a8;
}
.fac-prop-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #c5d0dc; flex-shrink: 0;
}
.fac-prop-ico .cv-icon,
.fac-prop-ico .fac-prop-svg {
  width: 22px !important; height: 22px !important;
}
.fac-prop-body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.fac-prop-sit {
  font-size: 12.5px; font-weight: 900; letter-spacing: -0.03em;
  line-height: 1.2; color: #f2f5f8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fac-prop-who {
  font-size: 10.5px; font-weight: 650; color: #8e9aab;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fac-prop-where { color: #6f7c8e; font-weight: 600; }
.fac-prop-st {
  font-size: 9.5px; font-style: normal; font-weight: 800;
  letter-spacing: 0.2px; white-space: nowrap;
  padding: 3px 7px; border-radius: 999px;
  border: 1px solid transparent;
  align-self: center;
}
.fac-prop-st.off {
  color: #d4a574;
  background: rgba(255, 176, 26, 0.1);
  border-color: rgba(255, 176, 26, 0.28);
}
.fac-prop-st.on {
  color: #9fe8d8;
  background: rgba(94, 234, 212, 0.1);
  border-color: rgba(94, 234, 212, 0.3);
}
.fac-prop-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 234, 212, 0.38);
  background: rgba(22, 28, 34, 0.96);
}
.fac-prop-chip.kind-fall .fac-prop-sev { background: #ff8a4c; }
.fac-prop-chip.kind-fall .fac-prop-ico { color: #ffb08a; background: rgba(255, 138, 76, 0.12); }
.fac-prop-chip.kind-fall .fac-prop-sit { color: #ffd2b8; }
.fac-prop-chip.kind-area_exit .fac-prop-sev { background: #ffb01a; }
.fac-prop-chip.kind-area_exit .fac-prop-ico { color: #ffcf7a; background: rgba(255, 176, 26, 0.12); }
.fac-prop-chip.kind-area_exit .fac-prop-sit { color: #ffe0a8; }
.fac-prop-chip.kind-long_absent .fac-prop-sev { background: #c4b5e0; }
.fac-prop-chip.kind-long_absent .fac-prop-ico { color: #d4c8ec; background: rgba(168, 148, 210, 0.12); }
.fac-prop-chip.kind-long_absent .fac-prop-sit { color: #e4daf4; }
.fac-prop-chip.kind-restless .fac-prop-sev { background: #e0a86a; }
.fac-prop-chip.kind-restless .fac-prop-ico { color: #f0c894; background: rgba(224, 168, 106, 0.12); }
.fac-prop-chip.kind-restless .fac-prop-sit { color: #f5d9b0; }
.fac-prop-chip.is-off {
  border-color: rgba(122, 134, 152, 0.22);
  background: rgba(16, 20, 26, 0.94);
}
.fac-prop-chip.is-on {
  border-color: rgba(94, 234, 212, 0.28);
  background: rgba(14, 28, 28, 0.55);
}
.fac-prop-chip.is-on .fac-prop-sev { background: #5eead4; }
.fac-prop-chip.is-on .fac-prop-sit { color: #c8f5ec; }
.fac-prop-chip.is-on .fac-prop-ico {
  color: #7fe6d8; background: rgba(94, 234, 212, 0.12);
}
.fac-prop-note { margin: 4px 0 0; opacity: 0.85; }

/* Alert items = horizontal action tickets (not bed-card grid) */
.fac-alert-cards.fac-alert-tickets,
.fac-alert-tickets {
  display: flex; flex-direction: column; gap: 0;
  padding: 0; margin: 0;
  border-top: 0;
}
.fac-alert-ticket.fac-alert-card,
.fac-alert-card.fac-alert-ticket {
  display: grid;
  grid-template-columns: auto minmax(100px, 0.9fr) minmax(0, 1.4fr) auto auto;
  align-items: center; gap: 10px 12px;
  padding: 10px 14px 10px 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.fac-alert-ticket.fac-alert-card::before { display: none; }
.fac-alert-ticket.fac-alert-card:last-child { border-bottom: 0; }
.fac-alert-ticket.fac-alert-card:hover {
  transform: none;
  background: rgba(255, 45, 106, 0.05);
  box-shadow: none;
  border-color: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.fac-alert-sev {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: stretch; min-width: 36px; padding: 0 6px;
  font-size: 9.5px; font-weight: 900; letter-spacing: 0.3px;
  writing-mode: horizontal-tb;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--hx-dash-amber);
  background: linear-gradient(90deg, rgba(255, 176, 26, 0.14), transparent);
}
.fac-alert-ticket.p1 .fac-alert-sev {
  color: #ffb0c4;
  background: linear-gradient(90deg, rgba(255, 45, 106, 0.22), transparent);
  box-shadow: inset 3px 0 0 var(--hx-dash-coral);
}
.fac-alert-ticket.p2 .fac-alert-sev,
.fac-alert-ticket:not(.p1) .fac-alert-sev {
  box-shadow: inset 3px 0 0 var(--hx-dash-amber);
}
.fac-alert-ticket-id {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.fac-alert-ticket-id strong {
  font-size: 13px; font-weight: 850; letter-spacing: -0.02em; color: var(--hx-dash-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fac-alert-ticket-id span {
  font-size: 10.5px; font-weight: 700; color: var(--hx-dash-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fac-alert-ticket-body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.fac-alert-ticket-body em {
  font-style: normal; font-size: 12px; font-weight: 850; color: var(--hx-dash-coral);
}
.fac-alert-ticket.p2 .fac-alert-ticket-body em { color: var(--hx-dash-amber); }
.fac-alert-ticket-body span {
  font-size: 11px; font-weight: 650; color: var(--hx-dash-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fac-alert-ticket-body time {
  display: block; margin: 0; font-size: 10px; font-variant-numeric: tabular-nums;
  color: var(--hx-dash-muted);
}
.fac-alert-ticket .fac-alert-state {
  margin: 0; flex-direction: column; align-items: stretch; gap: 4px;
}
.fac-alert-ticket .fac-alert-card-actions {
  margin: 0; flex-direction: column; gap: 4px; align-items: stretch;
}
.fac-alert-ticket .fac-alert-card-actions .btn-cta.sm {
  min-width: 64px; font-weight: 850;
}
.fac-care-prop-badge.on {
  background: rgba(30, 240, 208, 0.12); color: var(--hx-dash-teal);
  border-color: rgba(30, 240, 208, 0.32);
}

@media (max-width: 900px) {
  .fac-alert-ticket.fac-alert-card,
  .fac-alert-card.fac-alert-ticket {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "sev id act"
      "sev body act"
      "sev state act";
  }
  .fac-alert-sev { grid-area: sev; }
  .fac-alert-ticket-id { grid-area: id; }
  .fac-alert-ticket-body { grid-area: body; }
  .fac-alert-ticket .fac-alert-state { grid-area: state; flex-direction: row; }
  .fac-alert-ticket .fac-alert-card-actions { grid-area: act; }
}
@media (max-width: 560px) {
  .fac-alert-ticket.fac-alert-card,
  .fac-alert-card.fac-alert-ticket {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "sev id"
      "sev body"
      "sev state"
      "sev act";
  }
  .fac-alert-ticket .fac-alert-card-actions {
    flex-direction: row; justify-content: flex-end;
  }
}

/* —— BOTTOM: 상시 관제 벽 —— */
.fac-wall-panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 4px; padding: 14px 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(30, 240, 208, 0.14);
  background:
    linear-gradient(165deg, rgba(18, 28, 30, 0.55) 0%, rgba(14, 16, 22, 0.72) 55%, rgba(12, 14, 18, 0.85) 100%);
  box-shadow: inset 0 1px 0 rgba(30, 240, 208, 0.06);
}
.fac-wall-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, rgba(30, 240, 208, 0.55), rgba(216, 255, 60, 0.35), transparent 70%);
  pointer-events: none;
}
.fac-wall-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(30, 240, 208, 0.07), transparent 50%),
    radial-gradient(100% 70% at 100% 0%, rgba(216, 255, 60, 0.04), transparent 55%);
}
.fac-wall-panel > * { position: relative; z-index: 1; }
.fac-wall-kicker {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0; padding: 0 2px 2px;
}
.fac-wall-tag {
  font-size: 10px; font-weight: 900; letter-spacing: 0.55px; text-transform: uppercase;
  color: var(--hx-dash-teal);
}
.fac-wall-hint {
  font-size: 10.5px; font-weight: 700; color: var(--hx-dash-dim);
}
.fac-wall-panel .fac-station-head {
  padding-bottom: 2px;
  border-bottom: 1px dashed rgba(30, 240, 208, 0.12);
}
.fac-wall-panel .fac-station-head h3 {
  font-size: 15px; color: #c8fff6;
}
.fac-wall-panel .fac-kpis {
  padding: 2px 0 0;
}
.fac-wall-panel .fac-kpi {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.07);
}
.fac-wall-panel .fac-handoff {
  margin-top: 2px;
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(30, 240, 208, 0.12);
}

/* Clear visual separator between lane ↔ wall */
.facility-station {
  gap: 16px;
}
.fac-alert-banner + .fac-wall-panel {
  margin-top: 2px;
  position: relative;
}
.fac-alert-banner:not([hidden]) + .fac-wall-panel {
  box-shadow:
    inset 0 1px 0 rgba(30, 240, 208, 0.06),
    0 -10px 28px -18px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .fac-alert-ticket.fac-alert-card:hover,
  .fac-prop-chip:hover { transform: none !important; }
}
/* ═══════════════ /v100-facsplit ═══════════════ */

/* ═══════════════════════════════════════════════════════════════════
   CareView 2.0 · 요양원(시설) 레퍼런스 미학 흡수 (v101-facref)
   흡수 DNA: charcoal base + 레이어드 매트 카드(넉넉한 radius) ·
   olive/lime = 정상, coral = 위험, teal/cyan = 보조 · 큰 tabular 숫자 ·
   Finor식 존 대비(TOP 어두운 인시던트 / BOTTOM 밝은 관제 필드) · amber 절제
   ═══════════════════════════════════════════════════════════════════ */
.facility-station {
  --fac-ink: #f4f6f9;
  --fac-label: #8b95a5;
  --fac-lane-bg: linear-gradient(178deg, #131016 0%, #0f0f13 55%, #0d0d10 100%);
  --fac-field-bg: linear-gradient(168deg, #24262c 0%, #1e2025 58%, #1a1c20 100%);
  --fac-tile-bg: linear-gradient(158deg, #1b1d22 0%, #16171b 100%);
  --fac-tile-line: rgba(255, 255, 255, 0.07);
  --fac-tile-line-hi: rgba(255, 255, 255, 0.15);
  --fac-tile-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --fac-ok: #c6e94a;
  --fac-ok-soft: rgba(198, 233, 74, 0.13);
  gap: 18px;
  padding: 18px 18px 20px;
  border-radius: 26px;
  border-color: rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(30, 240, 208, 0.035), transparent 58%),
    linear-gradient(172deg, #17181c 0%, #131417 60%, #101114 100%);
}

/* ── 역할 전환: 캡슐 세그먼트 ── */
.facility-station .fac-role-bar {
  padding: 5px;
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.06);
}
.facility-station .fac-role.on {
  border-color: rgba(198, 233, 74, 0.35);
  background: rgba(198, 233, 74, 0.11);
  color: var(--fac-ok);
}
.facility-station .fac-role.on span { color: rgba(198, 233, 74, 0.72); }

/* ═══ TOP · 사건·대응 레인 (Finor 인시던트 존 = 가장 어둡게) ═══ */
.facility-station .fac-alert-banner {
  border-radius: 20px;
  border-color: rgba(255, 76, 118, 0.2);
  background: var(--fac-lane-bg);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 120, 150, 0.07);
  animation: cv-fac-incident 3.4s var(--cv-ease) infinite;
}
.facility-station .fac-alert-banner::after {
  background:
    radial-gradient(95% 65% at 0% 0%, rgba(255, 45, 106, 0.11), transparent 58%),
    radial-gradient(80% 55% at 100% 0%, rgba(255, 111, 20, 0.045), transparent 55%);
}
@keyframes cv-fac-incident {
  0%, 100% { border-color: rgba(255, 76, 118, 0.18); }
  50% { border-color: rgba(255, 76, 118, 0.34); }
}
.facility-station .fac-lane-kicker {
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(255, 45, 106, 0.18), rgba(255, 111, 20, 0.05) 52%, transparent);
  border-bottom-color: rgba(255, 76, 118, 0.16);
}
.facility-station .fac-lane-tag { color: #ff9db4; letter-spacing: 0.7px; }
.facility-station .fac-alert-hd { padding: 13px 16px 11px; }
.facility-station .fac-alert-hd strong {
  font-size: 15px; letter-spacing: -0.03em; color: #ffeaf0;
}
.facility-station .fac-prop-monitor { padding: 10px 16px 12px; background: rgba(0, 0, 0, 0.26); }
.facility-station .fac-prop-hd strong { color: #7fe6d8; letter-spacing: 0.6px; }
.facility-station .fac-prop-chip {
  background: rgba(16, 20, 26, 0.94);
  border-color: rgba(122, 134, 152, 0.18);
  border-radius: 12px;
  padding: 9px 12px 9px 0;
}
.facility-station .fac-prop-chip.is-on {
  border-color: rgba(94, 234, 212, 0.28); background: rgba(14, 28, 28, 0.55);
}
.facility-station .fac-prop-chip.is-off {
  border-color: rgba(122, 134, 152, 0.22); background: rgba(16, 20, 26, 0.94);
}
.facility-station .fac-prop-chip i.off,
.facility-station .fac-prop-st.off { color: #d4a574; }

/* 티켓 행 — severity = 캡슐 배지 + 좌측 레일 */
.facility-station .fac-alert-ticket.fac-alert-card {
  padding: 11px 16px 11px 0;
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
.facility-station .fac-alert-ticket.fac-alert-card:hover {
  background: rgba(255, 45, 106, 0.055);
}
.facility-station .fac-alert-sev {
  align-self: center; min-width: 54px; margin: 0 2px 0 12px; padding: 5px 9px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.2px;
}
.facility-station .fac-alert-ticket.p1 .fac-alert-sev {
  color: #ffb0c4;
  background: rgba(255, 45, 106, 0.16);
  border-color: rgba(255, 45, 106, 0.42);
  box-shadow: none;
}
.facility-station .fac-alert-ticket.p2 .fac-alert-sev,
.facility-station .fac-alert-ticket:not(.p1) .fac-alert-sev {
  color: #ffcf8f;
  background: rgba(255, 176, 26, 0.11);
  border-color: rgba(255, 176, 26, 0.34);
  box-shadow: none;
}
.facility-station .fac-alert-ticket.p1 { box-shadow: inset 3px 0 0 var(--hx-dash-coral); }
.facility-station .fac-alert-ticket.p2,
.facility-station .fac-alert-ticket:not(.p1) { box-shadow: inset 3px 0 0 rgba(255, 176, 26, 0.55); }
.facility-station .fac-alert-ticket-id strong { font-size: 13.5px; color: var(--fac-ink); }
.facility-station .fac-alert-ticket-body em { font-size: 12.5px; }

/* ═══ BOTTOM · 상시 관제 벽 (밝은 매트 필드 + 어두운 타일) ═══ */
.facility-station .fac-wall-panel {
  gap: 14px;
  margin-top: 2px;
  padding: 16px 16px 18px;
  border-radius: 24px;
  border-color: rgba(255, 255, 255, 0.09);
  background: var(--fac-field-bg);
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.facility-station .fac-wall-panel::before {
  background: linear-gradient(90deg, rgba(30, 240, 208, 0.45), rgba(198, 233, 74, 0.3) 38%, transparent 72%);
}
.facility-station .fac-wall-panel::after {
  background:
    radial-gradient(110% 70% at 0% 0%, rgba(30, 240, 208, 0.05), transparent 55%),
    radial-gradient(90% 60% at 100% 0%, rgba(198, 233, 74, 0.035), transparent 55%);
}
.facility-station .fac-alert-banner:not([hidden]) + .fac-wall-panel {
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.facility-station .fac-wall-tag { color: #7fe6d8; letter-spacing: 0.7px; }
.facility-station .fac-wall-hint { color: var(--fac-label); }
.facility-station .fac-wall-panel .fac-station-head {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.facility-station .fac-wall-panel .fac-station-head h3 {
  font-size: 16.5px; letter-spacing: -0.03em; color: var(--fac-ink);
}
.facility-station .fac-station-sub { color: var(--fac-label); }

/* KPI 타일 — 지표별 고유 액센트 + 큰 tabular 숫자 (VEXORA metric pill) */
.facility-station .fac-kpis { gap: 10px; padding-top: 2px; }
.facility-station .fac-kpi {
  --fac-kpi-accent: #9aa3b2;
  --fac-kpi-tint: rgba(255, 255, 255, 0.04);
  gap: 6px;
  padding: 13px 14px 15px;
  border-radius: 18px;
  border-color: var(--fac-tile-line);
  background:
    radial-gradient(120% 90% at 0% 100%, var(--fac-kpi-tint), transparent 62%),
    var(--fac-tile-bg);
  box-shadow: var(--fac-tile-shadow);
}
.facility-station .fac-kpi::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--fac-kpi-accent), transparent 78%);
  opacity: 0.85; pointer-events: none;
}
.facility-station .fac-kpi:hover {
  border-color: var(--fac-tile-line-hi);
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.facility-station .fac-kpi span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.35px;
  color: var(--fac-label);
}
.facility-station .fac-kpi span::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fac-kpi-accent); opacity: 0.9;
}
.facility-station .fac-kpi b {
  font-size: clamp(19px, 1.5vw, 25px); font-weight: 850; letter-spacing: -0.05em;
  line-height: 1.05; color: var(--fac-ink);
}
.facility-station .fac-kpi[data-fac-kpi="residents"] {
  --fac-kpi-accent: var(--fac-ok); --fac-kpi-tint: rgba(198, 233, 74, 0.09);
}
.facility-station .fac-kpi[data-fac-kpi="residents"] b { color: #e2f78a; }
.facility-station .fac-kpi[data-fac-kpi="cohort"] {
  --fac-kpi-accent: var(--hx-dash-cyan); --fac-kpi-tint: rgba(78, 245, 255, 0.08);
}
.facility-station .fac-kpi[data-fac-kpi="cohort"] b { color: #a9eeff; }
.facility-station .fac-kpi[data-fac-kpi="fall"] {
  --fac-kpi-accent: var(--hx-dash-coral); --fac-kpi-tint: rgba(255, 45, 106, 0.1);
}
.facility-station .fac-kpi[data-fac-kpi="fall"] b { color: #ff7d9e; }
.facility-station .fac-kpi[data-fac-kpi="exit"] {
  --fac-kpi-accent: var(--hx-dash-orange); --fac-kpi-tint: rgba(255, 111, 20, 0.09);
}
.facility-station .fac-kpi[data-fac-kpi="exit"] b { color: #ffa066; }
.facility-station .fac-kpi[data-fac-kpi="open"] {
  --fac-kpi-accent: var(--hx-dash-amber); --fac-kpi-tint: rgba(255, 176, 26, 0.07);
}
.facility-station .fac-kpi[data-fac-kpi="open"] b { color: #ffd08a; }
.facility-station .fac-kpi[data-fac-kpi="acked"] {
  --fac-kpi-accent: var(--hx-dash-teal); --fac-kpi-tint: rgba(30, 240, 208, 0.08);
}
.facility-station .fac-kpi[data-fac-kpi="acked"] b { color: #7fe6d8; }
.facility-station .fac-kpi[data-fac-kpi="sensors"] {
  --fac-kpi-accent: #7c8797; --fac-kpi-tint: rgba(148, 163, 184, 0.06);
}
.facility-station .fac-kpi[data-fac-kpi="sensors"] b { color: #b9c2cf; }
/* p1(낙상) 호흡 글로우는 유지하되 좌측 스트라이프 대신 하단 액센트로 통일 */
.facility-station .fac-kpi.p1,
.facility-station .fac-kpi.p2,
.facility-station .fac-kpi.ok {
  background:
    radial-gradient(120% 90% at 0% 100%, var(--fac-kpi-tint), transparent 62%),
    var(--fac-tile-bg);
  box-shadow: var(--fac-tile-shadow);
}
.facility-station .fac-kpi.p1 { animation: cv-fac-kpi-breathe 2.6s var(--cv-ease) infinite; }
@keyframes cv-fac-kpi-breathe {
  0%, 100% { box-shadow: var(--fac-tile-shadow), 0 0 0 0 rgba(255, 45, 106, 0); }
  50% { box-shadow: var(--fac-tile-shadow), 0 0 0 3px rgba(255, 45, 106, 0.13); }
}

/* 벽 도구(검색·필터·규모·병동) — 밝은 필드 위 캡슐 */
.facility-station .fac-wall-tools { gap: 8px; }
.facility-station .fac-search .tool-input,
.facility-station .fac-filter {
  background: rgba(0, 0, 0, 0.26);
  border-color: rgba(255, 255, 255, 0.09);
}
.facility-station .fac-filter.on {
  border-color: rgba(198, 233, 74, 0.42);
  background: rgba(198, 233, 74, 0.13);
  color: var(--fac-ok);
}
.facility-station .fac-pager-bar { color: var(--fac-label); }

/* 병상 모자이크 — 밝은 필드 위 어두운 매트 타일 */
.facility-station .facility-grid { gap: 12px; }
.facility-station .bed-card {
  padding: 14px 14px 13px;
  border-radius: 18px;
  border-color: var(--fac-tile-line);
  background: var(--fac-tile-bg);
  box-shadow: var(--fac-tile-shadow);
}
.facility-station .bed-card::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
.facility-station .bed-card:hover {
  border-color: var(--fac-tile-line-hi);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.facility-station .bed-card.on,
.facility-station .bed-card.focused {
  border-color: rgba(198, 233, 74, 0.45);
  box-shadow: 0 0 0 1px rgba(198, 233, 74, 0.18), var(--fac-tile-shadow);
}
.facility-station .bed-card.state-warn {
  border-color: rgba(255, 176, 26, 0.26);
  box-shadow: inset 3px 0 0 rgba(255, 176, 26, 0.6), var(--fac-tile-shadow);
}
.facility-station .bed-card.state-crit {
  border-color: rgba(255, 45, 106, 0.4);
  box-shadow: inset 3px 0 0 var(--cv-fall), var(--fac-tile-shadow);
  animation: cv-fac-bed-crit 2.2s var(--cv-ease) infinite;
}
@keyframes cv-fac-bed-crit {
  0%, 100% { box-shadow: inset 3px 0 0 var(--cv-fall), var(--fac-tile-shadow); }
  50% { box-shadow: inset 3px 0 0 var(--cv-fall), 0 0 0 3px rgba(255, 45, 106, 0.13), var(--fac-tile-shadow); }
}
.facility-station .bed-top strong {
  font-size: 10.5px; font-weight: 850; letter-spacing: 0.5px; color: var(--fac-label);
}
.facility-station .bed-name {
  margin: 5px 0 8px; font-size: 15.5px; letter-spacing: -0.03em; color: var(--fac-ink);
}
.facility-station .bed-admit { color: #74808f; }
.facility-station .flag.attn {
  background: rgba(255, 111, 20, 0.14); color: #ffab72;
  border-color: rgba(255, 111, 20, 0.3);
}
.facility-station .flag.cohort-existing {
  background: rgba(198, 233, 74, 0.1); color: #cfe86f;
  border-color: rgba(198, 233, 74, 0.24);
}
.facility-station .flag.cohort-recent {
  background: rgba(78, 245, 255, 0.12); color: #9aefff;
  border-color: rgba(78, 245, 255, 0.26);
}

/* 바이탈 칩 — 지표별 고유 컬러 pill (HR·BR·POBC / 재실·수면·낙상) */
.facility-station .bed-metrics {
  gap: 5px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.facility-station .bed-metrics > span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px; font-weight: 800; letter-spacing: 0.1px;
  color: #93a0b0; white-space: nowrap;
}
.facility-station .bed-metrics > span b {
  font-size: 12px; font-weight: 850; letter-spacing: -0.02em;
}
.facility-station .bed-metrics [data-m="hr"] {
  background: rgba(255, 59, 92, 0.11); border-color: rgba(255, 59, 92, 0.28); color: #ffa8b7;
}
.facility-station .bed-metrics [data-m="hr"] b { color: #ff5d7b; }
.facility-station .bed-metrics [data-m="br"] {
  background: rgba(61, 184, 255, 0.11); border-color: rgba(61, 184, 255, 0.28); color: #9fd8ff;
}
.facility-station .bed-metrics [data-m="br"] b { color: #5cc2ff; }
.facility-station .bed-metrics [data-m="pobc"] {
  background: rgba(184, 230, 42, 0.1); border-color: rgba(184, 230, 42, 0.28); color: #d3e893;
}
.facility-station .bed-metrics [data-m="pobc"] b { color: #c6e94a; }
.facility-station .bed-metrics [data-m="pobc"].anomaly {
  background: rgba(255, 45, 106, 0.13); border-color: rgba(255, 45, 106, 0.34); color: #ffb0c4;
}
.facility-station .bed-metrics [data-m="pobc"].anomaly b { color: #ff8aa8; }
.facility-station .bed-metrics .m-chip.ok {
  background: rgba(30, 240, 208, 0.13); border-color: rgba(30, 240, 208, 0.32); color: #7fe6d8;
}
.facility-station .bed-metrics .m-chip.sleep {
  background: rgba(167, 139, 250, 0.15); border-color: rgba(167, 139, 250, 0.34); color: #c4b5fd;
}
.facility-station .bed-metrics .m-chip.warn {
  background: rgba(255, 176, 26, 0.12); border-color: rgba(255, 176, 26, 0.32); color: #ffcf8f;
}
.facility-station .bed-metrics .m-chip.off {
  background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.3); color: #a8b3c2;
}
.facility-station .bed-metrics .m-chip.crit {
  background: rgba(255, 45, 106, 0.17); border-color: rgba(255, 45, 106, 0.44); color: #ff9db4;
}
/* 고밀도(100·200 병상) — 컬러는 유지하고 패딩만 압축 */
.facility-station .facility-grid.density-glance .bed-metrics > span {
  padding: 2px 7px; font-size: 9.5px; gap: 3px;
}
.facility-station .facility-grid.density-glance .bed-metrics > span b { font-size: 11px; }
.facility-station .facility-grid.density-glance-xl .bed-metrics > span {
  padding: 1px 6px; font-size: 9px; gap: 3px; border-radius: 8px;
}
.facility-station .facility-grid.density-glance-xl .bed-metrics > span b { font-size: 10.5px; }
.facility-station .facility-grid.density-glance .bed-card,
.facility-station .facility-grid.density-glance-xl .bed-card { border-radius: 15px; }

/* 목록 보기 바이탈 — 카드와 같은 컬러 랭킹 */
.facility-station .bed-row-vitals b:nth-of-type(1) { color: var(--cv-hr); }
.facility-station .bed-row-vitals b:nth-of-type(2) { color: var(--cv-br); }
.facility-station .bed-row-vitals b:nth-of-type(3) { color: var(--cv-pobc); }

/* 인수인계 — 밝은 필드 안의 어두운 인셋 */
.facility-station .fac-wall-panel .fac-handoff {
  padding: 13px 15px; border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.facility-station .fac-handoff-h strong { color: var(--fac-ink); letter-spacing: -0.02em; }
.facility-station .fac-cohort-sum {
  border-color: rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.2);
}

/* 원장·보호자 면도 동일 프리미엄 다크 시스템 */
.facility-station .fac-cohort {
  border-radius: 22px; border-color: rgba(255, 255, 255, 0.08);
  background: var(--fac-field-bg);
}
.facility-station .fac-dir-ward,
.facility-station .fac-family-metrics > div {
  border-radius: 16px; border-color: var(--fac-tile-line);
  background: var(--fac-tile-bg);
}
.facility-station .fac-family-card { border-radius: 22px; }

@media (max-width: 1100px) {
  .facility-station { padding: 14px 14px 16px; border-radius: 22px; }
  .facility-station .fac-wall-panel { padding: 14px 14px 16px; border-radius: 20px; }
}
@media (max-width: 639px) {
  .facility-station .fac-kpi b { font-size: 21px; }
  .facility-station .fac-alert-sev { margin-left: 10px; min-width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .facility-station .fac-alert-banner,
  .facility-station .fac-kpi.p1,
  .facility-station .bed-card.state-crit { animation: none !important; }
}
/* ═══════════════ /v101-facref ═══════════════ */

/* ═══════════════════════════════════════════════
   v103-hgrid — 가로 dense 메트릭 카드 + 요양원 no-red
   세로 리스트 → 가로 카드 그리드 · 위험=amber/orange
   (개인/가족 coral DNA 전역 변수는 유지 · facility 스코프만 치환)
   ═══════════════════════════════════════════════ */

/* —— Horizontal dense metric cards (env · IoT) —— */
.stats-hgrid-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stats-hgrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  width: 100%;
}
.stats-hgrid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hx-hcard {
  --hx-hcard-accent: #4ecdc4;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 14px 12px;
  border-radius: 18px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(165deg, #1c1e24 0%, #14161b 55%, #101218 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.hx-hcard:hover {
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hx-hcard:focus-visible {
  outline: 2px solid rgba(78, 245, 255, 0.5);
  outline-offset: 2px;
}
.hx-hcard-h {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.hx-hcard-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 18px rgba(78, 245, 255, 0.12);
  color: var(--hx-hcard-accent);
}
.hx-hcard-ico .cv-icon {
  width: 16px !important;
  height: 16px !important;
}
.hx-hcard-lab {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #f2f5f8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx-hcard-h .pill,
.hx-hcard-h .stats-iot-state {
  margin-left: auto;
  flex: 0 0 auto;
}
.hx-hcard-v {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.hx-hcard-num {
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.hx-hcard-unit {
  font-size: 12px;
  font-weight: 750;
  color: #8b95a5;
}
.hx-hcard-kpi3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.hx-hcard-kpi3 em {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-style: normal;
  padding: 6px 6px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.hx-hcard-kpi3 b {
  font-size: 12px;
  font-weight: 850;
  color: #f4f7fb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.hx-hcard-kpi3 small {
  font-size: 9.5px;
  font-weight: 750;
  color: #8b95a5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx-hcard-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}
.hx-hcard-stats em {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  font-style: normal;
  min-width: 0;
}
.hx-hcard-stats small {
  font-size: 9px;
  font-weight: 750;
  color: #7d8796;
  letter-spacing: 0.2px;
}
.hx-hcard-stats b {
  font-size: 11px;
  font-weight: 800;
  color: #c9d2de;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hx-hcard-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: #c6e94a;
  border: 1px solid rgba(198, 233, 74, 0.4);
  background: rgba(0, 0, 0, 0.28);
}
.hx-hcard-bars {
  margin-top: 2px;
  min-height: 72px;
  overflow: hidden;
}
.hx-hcard-bars .cv-chart {
  width: 100% !important;
  height: 78px !important;
  display: block;
}
.hx-hcard--iot.is-on {
  border-color: rgba(198, 233, 74, 0.22);
}
.hx-hcard .pill.crit {
  background: rgba(255, 176, 26, 0.18) !important;
  color: #ffd08a !important;
  border-color: rgba(255, 176, 26, 0.48) !important;
}
.hx-hcard .pill.warn {
  background: rgba(255, 111, 20, 0.14) !important;
  color: #ffb078 !important;
  border-color: rgba(255, 111, 20, 0.38) !important;
}
.hx-hcard .pill.ok {
  background: rgba(198, 233, 74, 0.12) !important;
  color: #d8f07a !important;
  border-color: rgba(198, 233, 74, 0.38) !important;
}

@media (max-width: 1180px) {
  .stats-hgrid,
  .stats-hgrid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .stats-hgrid,
  .stats-hgrid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hx-hcard { padding: 12px; border-radius: 16px; }
  .hx-hcard-num { font-size: 28px; }
}
@media (max-width: 420px) {
  .stats-hgrid,
  .stats-hgrid--5 { grid-template-columns: 1fr; }
}

/* —— Facility / 요양원: no-red (coral·pink → amber/orange/teal/olive) —— */
body[data-audience="facility"] {
  --hx-dash-coral: #ff8a4c;
  --hx-dash-glow-coral: 0 8px 22px rgba(255, 138, 76, 0.22);
  --cv-hr: #5eead4;
  --cv-hr-glow: rgba(94, 234, 212, 0.4);
  --cv-fall: #ff8a4c;
  --cv-fall-glow: rgba(255, 138, 76, 0.42);
  --cv-voc: #2dd4bf;
  --cv-pm: #9db4ff;
  --hx-dash-magenta: #5eead4;
}
body[data-audience="facility"] .pill.crit,
.facility-station .pill.crit {
  background: rgba(255, 176, 26, 0.2) !important;
  color: #ffd08a !important;
  border-color: rgba(255, 176, 26, 0.5) !important;
}
body[data-audience="facility"] .stats-cat-head[data-cat="crit"] .stats-cat-dot {
  background: #ff8a4c;
}
body[data-audience="facility"] .trend-down { color: #ff9f5a; }

/* TOP 사건 레인 — coral 헤더/티켓 → amber */
.facility-station .fac-alert-banner::after {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(30, 240, 208, 0.06), transparent 50%),
    radial-gradient(110% 90% at 100% 0%, rgba(255, 176, 26, 0.07), transparent 52%);
}
.facility-station .fac-ack-all {
  background: linear-gradient(135deg, rgba(255, 176, 26, 0.22), rgba(255, 111, 20, 0.14)) !important;
  border-color: rgba(255, 176, 26, 0.45) !important;
  color: #ffe2b0 !important;
}
.facility-station .fac-alert-card.p1,
.facility-station .fac-alert-ticket.p1 {
  border-left-color: #ff8a4c !important;
  box-shadow: var(--hx-dash-shadow-card), inset 0 0 0 1px rgba(255, 138, 76, 0.1);
}
.facility-station .fac-alert-card-b em { color: #ffb078; }
.facility-station .fac-lane-tag { color: #ffc08a; }
.facility-station .fac-alert-hd strong { color: #ffe8d2; }

/* KPI 낙상 — orange (not coral/pink) */
.facility-station .fac-kpi[data-fac-kpi="fall"] {
  --fac-kpi-accent: #ff8a4c;
  --fac-kpi-tint: rgba(255, 138, 76, 0.1);
}
.facility-station .fac-kpi[data-fac-kpi="fall"] b { color: #ffb078; }
.facility-station .fac-kpi.p1 {
  border-color: rgba(255, 138, 76, 0.28);
  box-shadow: var(--hx-dash-shadow-card), inset 3px 0 0 #ff8a4c;
}
.facility-station .fac-kpi.p1 b {
  color: #ffb078;
  text-shadow: 0 0 18px rgba(255, 138, 76, 0.28);
}
@keyframes cv-fac-kpi-breathe {
  0%, 100% { box-shadow: var(--fac-tile-shadow), 0 0 0 0 rgba(255, 138, 76, 0); }
  50% { box-shadow: var(--fac-tile-shadow), 0 0 0 3px rgba(255, 138, 76, 0.14); }
}

/* 병상 crit / HR / 낙상 칩 — teal·orange (no red) */
.facility-station .bed-card.state-crit {
  border-color: rgba(255, 138, 76, 0.42);
  box-shadow: inset 3px 0 0 #ff8a4c, var(--fac-tile-shadow);
  animation: cv-fac-bed-crit-nr 2.2s var(--cv-ease) infinite;
}
@keyframes cv-fac-bed-crit-nr {
  0%, 100% { box-shadow: inset 3px 0 0 #ff8a4c, var(--fac-tile-shadow); }
  50% { box-shadow: inset 3px 0 0 #ff8a4c, 0 0 0 3px rgba(255, 138, 76, 0.14), var(--fac-tile-shadow); }
}
.facility-station .bed-metrics [data-m="hr"] {
  background: rgba(94, 234, 212, 0.12);
  border-color: rgba(94, 234, 212, 0.32);
  color: #9feee2;
}
.facility-station .bed-metrics [data-m="hr"] b { color: #5eead4; }
.facility-station .bed-metrics [data-m="pobc"].anomaly {
  background: rgba(255, 176, 26, 0.12);
  border-color: rgba(255, 176, 26, 0.34);
  color: #ffd08a;
}
.facility-station .bed-metrics [data-m="pobc"].anomaly b { color: #ffb01a; }
.facility-station .bed-metrics .m-chip.crit {
  background: rgba(255, 138, 76, 0.16);
  border-color: rgba(255, 138, 76, 0.42);
  color: #ffb078;
}
.facility-station .bed-row-vitals b:nth-of-type(1) { color: #5eead4; }

/* Facility dashboard env actuators — horizontal (not vertical stack) */
body[data-audience="facility"] .env-actuator-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body[data-audience="facility"] .env-compose-row {
  grid-template-columns: 1fr;
}
body[data-audience="facility"] .env-metric-chips--row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
}
body[data-audience="facility"] .env-metric-chips--row .env-chip {
  flex: none;
  min-width: 0;
  justify-content: flex-start;
  border-radius: 14px;
  padding: 10px 12px;
}
@media (max-width: 900px) {
  body[data-audience="facility"] .env-metric-chips--row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  body[data-audience="facility"] .env-actuator-stack,
  body[data-audience="facility"] .env-metric-chips--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .facility-station .bed-card.state-crit { animation: none !important; }
  .hx-hcard:hover { transform: none; }
}
/* ═══════════════ /v103-hgrid ═══════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v105-facsys — Facility Design System (요양원 전용 · personal/family 불변)

   Design intent
   · TOP 사건·대응 > BOTTOM 상시 관제 > Env/IoT (importance hierarchy)
   · Dark charcoal original bg restored (v104 light-field REVERTED)
   · Active alerts = horizontal card GRID (not vertical tickets)
   · Env/IoT = dense 5-up hcards on dark panels
   · Semantic palette: olive·amber·orange·teal·violet·slate — NO red family
   · 4/8px rhythm · tabular metrics · WCAG AA on dark · R0-2 honesty

   Token map (facility-station / body[data-audience="facility"] only)
   ─────────────────────────────────────────────────────────────────
   Surface   --fac-bg / --fac-lane / --fac-field / --fac-card / --fac-elev
   Ink       --fac-ink · --fac-ink-2 · --fac-label · --fac-muted · --fac-ghost
   Semantic  --fac-ok(olive) · --fac-caution(amber) · --fac-attn(orange)
             --fac-info(teal) · --fac-sleep(violet) · --fac-off(slate)
   Type      --fac-fs-display · title · body · label · caption · micro
   Space     --fac-s1(4) · s2(8) · s3(12) · s4(16) · s5(24) · s6(32)
   Radius    --fac-r-sm(10) · r(14) · r-lg(18) · r-xl(22) · r-pill(999)
   Elevation --fac-shadow-card · --fac-shadow-lift · --fac-inset-hair
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. Tokens ─────────────────────────────────────────────────── */
.facility-station,
body[data-audience="facility"] {
  /* Surfaces (dark original) */
  --fac-bg: #101114;
  --fac-lane: #0e0e12;
  --fac-field: #1a1c21;
  --fac-card: #16181e;
  --fac-elev: #1c1f26;
  --fac-line: rgba(255, 255, 255, 0.075);
  --fac-line-hi: rgba(255, 255, 255, 0.14);
  --fac-line-soft: rgba(255, 255, 255, 0.045);

  /* Ink (AA ≥ 4.5 on #16181e) */
  --fac-ink: #f3f5f8;
  --fac-ink-2: #c5ccd6;
  --fac-label: #8b95a5;
  --fac-muted: #6b7685;
  --fac-ghost: #4e5866;

  /* Semantic — single source of truth */
  --fac-ok: #c6e94a;
  --fac-ok-soft: rgba(198, 233, 74, 0.12);
  --fac-ok-line: rgba(198, 233, 74, 0.38);
  --fac-caution: #ffb01a;
  --fac-caution-soft: rgba(255, 176, 26, 0.14);
  --fac-caution-line: rgba(255, 176, 26, 0.42);
  --fac-attn: #ff8a4c;
  --fac-attn-soft: rgba(255, 138, 76, 0.14);
  --fac-attn-line: rgba(255, 138, 76, 0.42);
  --fac-info: #5eead4;
  --fac-info-soft: rgba(94, 234, 212, 0.12);
  --fac-info-line: rgba(94, 234, 212, 0.36);
  --fac-sleep: #a78bfa;
  --fac-sleep-soft: rgba(167, 139, 250, 0.12);
  --fac-off: #7c8797;
  --fac-off-soft: rgba(124, 135, 151, 0.12);

  /* Type scale */
  --fac-fs-display: clamp(22px, 1.7vw, 28px);
  --fac-fs-title: 15px;
  --fac-fs-body: 13px;
  --fac-fs-label: 11px;
  --fac-fs-caption: 10.5px;
  --fac-fs-micro: 10px;
  --fac-lh-tight: 1.15;
  --fac-lh-snug: 1.35;
  --fac-lh-body: 1.5;

  /* Space (4/8 grid) */
  --fac-s1: 4px;
  --fac-s2: 8px;
  --fac-s3: 12px;
  --fac-s4: 16px;
  --fac-s5: 24px;
  --fac-s6: 32px;

  /* Radius / elevation */
  --fac-r-sm: 10px;
  --fac-r: 14px;
  --fac-r-lg: 18px;
  --fac-r-xl: 22px;
  --fac-r-pill: 999px;
  --fac-shadow-card: 0 12px 28px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --fac-shadow-lift: 0 18px 40px -18px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --fac-inset-hair: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --fac-rail: 3px;

  /* Remap legacy aliases → tokens (no-red) */
  --fac-ink: #f3f5f8;
  --fac-label: #8b95a5;
  --fac-lane-bg: linear-gradient(178deg, #131016 0%, #0f0f13 55%, #0d0d10 100%);
  --fac-field-bg: linear-gradient(168deg, #1e2026 0%, #191b20 58%, #15171b 100%);
  --fac-tile-bg: linear-gradient(158deg, #1b1d22 0%, #16181d 100%);
  --fac-tile-line: var(--fac-line);
  --fac-tile-line-hi: var(--fac-line-hi);
  --fac-tile-shadow: var(--fac-shadow-card);
  --hx-dash-coral: var(--fac-attn);
  --hx-dash-glow-coral: 0 8px 22px rgba(255, 138, 76, 0.22);
  --cv-hr: var(--fac-info);
  --cv-hr-glow: rgba(94, 234, 212, 0.4);
  --cv-fall: var(--fac-attn);
  --cv-fall-glow: rgba(255, 138, 76, 0.42);
  --cv-voc: #2dd4bf;
  --cv-pm: #9db4ff;
  --hx-dash-magenta: var(--fac-info);
}

/* ── 1. Station shell · hierarchy & rhythm ──────────────────────── */
.facility-station {
  gap: var(--fac-s5);
  padding: var(--fac-s5) var(--fac-s5) var(--fac-s5);
  border-radius: 26px;
  border-color: var(--fac-line);
  background:
    radial-gradient(120% 55% at 100% 0%, rgba(94, 234, 212, 0.03), transparent 58%),
    radial-gradient(90% 40% at 0% 100%, rgba(198, 233, 74, 0.02), transparent 55%),
    linear-gradient(172deg, #17181c 0%, #131417 60%, var(--fac-bg) 100%);
}
.facility-station .fac-role-bar {
  padding: 5px;
  background: rgba(0, 0, 0, 0.32);
  border-color: var(--fac-line-soft);
}
.facility-station .fac-role.on {
  border-color: var(--fac-ok-line);
  background: var(--fac-ok-soft);
  color: var(--fac-ok);
}
.facility-station .fac-role.on span { color: rgba(198, 233, 74, 0.72); }

/* ── 2. TOP · 사건·대응 레인 (highest visual weight) ───────────── */
.facility-station .fac-alert-banner {
  border-radius: var(--fac-r-xl);
  border-color: rgba(255, 176, 26, 0.18);
  background: var(--fac-lane-bg);
  box-shadow: 0 20px 48px -22px rgba(0, 0, 0, 0.85), var(--fac-inset-hair);
  animation: cv-fac-incident 3.6s var(--cv-ease) infinite;
}
.facility-station .fac-alert-banner::after {
  background:
    radial-gradient(100% 70% at 0% 0%, rgba(94, 234, 212, 0.05), transparent 55%),
    radial-gradient(90% 60% at 100% 0%, rgba(255, 176, 26, 0.07), transparent 52%);
}
.facility-station .fac-alert-banner.has-open {
  box-shadow: 0 20px 48px -22px rgba(0, 0, 0, 0.85), inset var(--fac-rail) 0 0 var(--fac-caution), var(--fac-inset-hair);
}
.facility-station .fac-alert-banner.is-clear {
  box-shadow: 0 20px 48px -22px rgba(0, 0, 0, 0.85), inset var(--fac-rail) 0 0 var(--fac-info), var(--fac-inset-hair);
}
@keyframes cv-fac-incident {
  0%, 100% { border-color: rgba(255, 176, 26, 0.14); }
  50% { border-color: rgba(255, 176, 26, 0.3); }
}
.facility-station .fac-lane-kicker {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--fac-s2);
  padding: 10px var(--fac-s4);
  background: linear-gradient(90deg, rgba(255, 176, 26, 0.12), rgba(255, 138, 76, 0.04) 48%, transparent);
  border-bottom: 1px solid rgba(255, 176, 26, 0.14);
}
.facility-station .fac-lane-tag {
  font-size: var(--fac-fs-micro);
  font-weight: 900;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: #ffc08a;
}
.facility-station .fac-lane-hint {
  font-size: var(--fac-fs-caption);
  font-weight: 700;
  color: var(--fac-label);
  line-height: var(--fac-lh-snug);
}
.facility-station .fac-alert-hd {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--fac-s2) var(--fac-s3);
  padding: 14px var(--fac-s4) 12px;
  border-bottom: 1px solid var(--fac-line-soft);
}
.facility-station .fac-alert-hd strong {
  font-size: var(--fac-fs-title);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #ffe8d2;
  line-height: var(--fac-lh-tight);
}
.facility-station .fac-alert-hd .sub2 {
  width: 100%;
  font-size: var(--fac-fs-caption);
  color: var(--fac-label);
  font-weight: 650;
  line-height: var(--fac-lh-snug);
}
.facility-station .fac-alert-pills { gap: 6px; margin-left: 2px; }
.facility-station .fac-alert-tools { margin-left: auto; gap: 6px; }
.facility-station .fac-alert-tools .btn-ghost.sm {
  border-radius: var(--fac-r-pill);
  font-size: var(--fac-fs-caption);
  font-weight: 800;
  padding: 6px 11px;
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--fac-line);
  color: var(--fac-ink-2);
}
.facility-station .fac-alert-tools .btn-ghost.sm.on {
  border-color: var(--fac-info-line);
  color: var(--fac-info);
  background: var(--fac-info-soft);
}
.facility-station .fac-ack-all {
  background: linear-gradient(135deg, rgba(255, 176, 26, 0.24), rgba(255, 138, 76, 0.14)) !important;
  border-color: var(--fac-caution-line) !important;
  color: #ffe2b0 !important;
  border-radius: var(--fac-r-pill) !important;
  font-weight: 850 !important;
  box-shadow: 0 0 20px rgba(255, 176, 26, 0.12);
}

/* Prop monitor — situation-first glance cards */
.facility-station .fac-prop-monitor {
  padding: 10px var(--fac-s4) 12px;
  background: rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid var(--fac-line-soft);
}
.facility-station .fac-prop-hd strong {
  font-size: var(--fac-fs-micro);
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--fac-info);
}
.facility-station .fac-prop-concept {
  font-size: var(--fac-fs-caption);
  font-style: normal;
  font-weight: 700;
  color: var(--fac-label);
}
.facility-station .fac-prop-chip {
  background: rgba(16, 20, 26, 0.94);
  border-color: var(--fac-line);
  border-radius: 12px;
  padding: 9px 12px 9px 0;
  min-width: 172px;
}
.facility-station .fac-prop-chip.is-on {
  border-color: var(--fac-info-line); background: rgba(14, 28, 28, 0.55);
}
.facility-station .fac-prop-chip.is-off {
  border-color: rgba(122, 134, 152, 0.22); background: rgba(16, 20, 26, 0.94);
}
.facility-station .fac-prop-chip i.off,
.facility-station .fac-prop-st.off { color: #d4a574; }
.facility-station .fac-prop-note {
  margin: 6px 0 0;
  font-size: var(--fac-fs-micro);
  color: var(--fac-muted);
  line-height: var(--fac-lh-snug);
}

/* ── 3. Active alert CARD GRID (attachment 2 · not ticket list) ── */
.facility-station .fac-alert-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--fac-s3);
  padding: var(--fac-s3) var(--fac-s4) var(--fac-s4);
  align-items: stretch;
}
.facility-station .fac-alert-card {
  display: flex;
  flex-direction: column;
  gap: var(--fac-s2);
  min-width: 0;
  padding: 12px 14px 12px 14px;
  border-radius: var(--fac-r-lg);
  border: 1px solid var(--fac-line);
  border-left: var(--fac-rail) solid var(--fac-caution);
  background:
    linear-gradient(165deg, rgba(28, 24, 18, 0.55) 0%, rgba(18, 18, 22, 0.92) 100%);
  box-shadow: var(--fac-shadow-card);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.facility-station .fac-alert-card::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
.facility-station .fac-alert-card:hover {
  transform: translateY(-2px);
  border-color: var(--fac-line-hi);
  box-shadow: var(--fac-shadow-lift);
}
.facility-station .fac-alert-card:focus-visible {
  outline: 2px solid rgba(94, 234, 212, 0.55);
  outline-offset: 2px;
}
.facility-station .fac-alert-card.p1 {
  border-left-color: var(--fac-attn) !important;
  background:
    linear-gradient(165deg, rgba(40, 24, 16, 0.65) 0%, rgba(18, 18, 22, 0.94) 100%);
  box-shadow: var(--fac-shadow-card), inset 0 0 0 1px rgba(255, 138, 76, 0.08);
}
.facility-station .fac-alert-card.p2 {
  border-left-color: var(--fac-caution);
}
.facility-station .fac-alert-card-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--fac-s2);
  font-size: var(--fac-fs-label);
  line-height: var(--fac-lh-snug);
}
.facility-station .fac-alert-card-h strong {
  font-size: var(--fac-fs-body);
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--fac-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.facility-station .fac-alert-card-h span {
  flex: 0 1 auto;
  font-size: var(--fac-fs-caption);
  font-weight: 700;
  color: var(--fac-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
  text-align: right;
}
.facility-station .fac-alert-card-b {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: var(--fac-fs-label);
  color: var(--fac-label);
  line-height: var(--fac-lh-snug);
}
.facility-station .fac-alert-card-b em {
  font-style: normal;
  font-size: 13.5px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #ffb078;
  line-height: var(--fac-lh-tight);
}
.facility-station .fac-alert-card.p2 .fac-alert-card-b em,
.facility-station .fac-alert-card:not(.p1) .fac-alert-card-b em {
  color: var(--fac-caution);
}
.facility-station .fac-alert-card-b span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fac-muted);
}
.facility-station .fac-alert-card-b time {
  display: block;
  margin-top: 2px;
  font-size: var(--fac-fs-micro);
  font-variant-numeric: tabular-nums;
  color: var(--fac-ghost);
}
.facility-station .fac-alert-card-actions {
  margin-top: auto;
  padding-top: 4px;
}
.facility-station .fac-alert-ack-wide {
  width: 100%;
  justify-content: center;
  border-radius: var(--fac-r-sm);
  padding: 8px 10px;
  font-size: var(--fac-fs-caption);
  font-weight: 850;
  letter-spacing: -0.01em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--fac-line);
  color: var(--fac-ink-2);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.facility-station .fac-alert-ack-wide:hover {
  background: var(--fac-ok-soft);
  border-color: var(--fac-ok-line);
  color: var(--fac-ok);
}
.facility-station .fac-alert-ack-wide:focus-visible {
  outline: 2px solid rgba(94, 234, 212, 0.55);
  outline-offset: 1px;
}

/* Kill residual ticket-list layout if class ever reappears */
.facility-station .fac-alert-cards.fac-alert-tickets,
.facility-station .fac-alert-tickets {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: var(--fac-s3) !important;
  padding: var(--fac-s3) var(--fac-s4) var(--fac-s4) !important;
}
.facility-station .fac-alert-ticket.fac-alert-card,
.facility-station .fac-alert-card.fac-alert-ticket {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  padding: 12px 14px !important;
  border-radius: var(--fac-r-lg) !important;
  border: 1px solid var(--fac-line) !important;
  border-left: var(--fac-rail) solid var(--fac-caution) !important;
  border-bottom: 1px solid var(--fac-line) !important;
  background: linear-gradient(165deg, rgba(28, 24, 18, 0.55) 0%, rgba(18, 18, 22, 0.92) 100%) !important;
  box-shadow: var(--fac-shadow-card) !important;
}
.facility-station .fac-alert-sev { display: none !important; }

/* Semantic pills (unified) */
.facility-station .pill.ok,
body[data-audience="facility"] .pill.ok {
  background: var(--fac-ok-soft) !important;
  color: #d8f07a !important;
  border-color: var(--fac-ok-line) !important;
}
.facility-station .pill.warn,
body[data-audience="facility"] .pill.warn {
  background: var(--fac-caution-soft) !important;
  color: #ffd08a !important;
  border-color: var(--fac-caution-line) !important;
}
.facility-station .pill.crit,
body[data-audience="facility"] .pill.crit {
  background: var(--fac-attn-soft) !important;
  color: #ffb078 !important;
  border-color: var(--fac-attn-line) !important;
}

/* ── 4. BOTTOM · 상시 관제 벽 (dark original restored) ─────────── */
.facility-station .fac-wall-panel {
  gap: var(--fac-s4);
  margin-top: 2px;
  padding: var(--fac-s4) var(--fac-s4) 18px;
  border-radius: 24px;
  border-color: var(--fac-line);
  background: var(--fac-field-bg);
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.72), var(--fac-inset-hair);
}
.facility-station .fac-wall-panel::before {
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.4), rgba(198, 233, 74, 0.28) 38%, transparent 72%);
}
.facility-station .fac-wall-panel::after {
  background:
    radial-gradient(110% 70% at 0% 0%, rgba(94, 234, 212, 0.045), transparent 55%),
    radial-gradient(90% 60% at 100% 0%, rgba(198, 233, 74, 0.03), transparent 55%);
}
.facility-station .fac-alert-banner:not([hidden]) + .fac-wall-panel {
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.72), var(--fac-inset-hair);
}
.facility-station .fac-wall-tag {
  font-size: var(--fac-fs-micro);
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--fac-info);
}
.facility-station .fac-wall-hint { color: var(--fac-label); font-size: var(--fac-fs-caption); }
.facility-station .fac-wall-panel .fac-station-head {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--fac-line);
}
.facility-station .fac-wall-panel .fac-station-head h3 {
  font-size: 16.5px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--fac-ink);
  line-height: var(--fac-lh-tight);
}
.facility-station .fac-station-sub {
  font-size: var(--fac-fs-caption);
  color: var(--fac-label);
  line-height: var(--fac-lh-snug);
}

/* KPI strip — tabular display numbers + accent rail */
.facility-station .fac-kpis { gap: 10px; padding-top: 2px; }
.facility-station .fac-kpi {
  --fac-kpi-accent: var(--fac-off);
  --fac-kpi-tint: var(--fac-off-soft);
  gap: 6px;
  padding: 13px 14px 15px;
  border-radius: var(--fac-r-lg);
  border-color: var(--fac-line);
  background:
    radial-gradient(120% 90% at 0% 100%, var(--fac-kpi-tint), transparent 62%),
    var(--fac-tile-bg);
  box-shadow: var(--fac-shadow-card);
}
.facility-station .fac-kpi::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--fac-kpi-accent), transparent 78%);
  opacity: 0.85; pointer-events: none;
}
.facility-station .fac-kpi:hover {
  border-color: var(--fac-line-hi);
  box-shadow: var(--fac-shadow-lift);
}
.facility-station .fac-kpi span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fac-fs-micro);
  font-weight: 800;
  letter-spacing: 0.35px;
  color: var(--fac-label);
  line-height: var(--fac-lh-snug);
}
.facility-station .fac-kpi span::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fac-kpi-accent); opacity: 0.9;
}
.facility-station .fac-kpi b {
  font-size: var(--fac-fs-display);
  font-weight: 850;
  letter-spacing: -0.05em;
  line-height: var(--fac-lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--fac-ink);
}
.facility-station .fac-kpi[data-fac-kpi="residents"] {
  --fac-kpi-accent: var(--fac-ok); --fac-kpi-tint: var(--fac-ok-soft);
}
.facility-station .fac-kpi[data-fac-kpi="residents"] b { color: #e2f78a; }
.facility-station .fac-kpi[data-fac-kpi="cohort"] {
  --fac-kpi-accent: var(--fac-info); --fac-kpi-tint: var(--fac-info-soft);
}
.facility-station .fac-kpi[data-fac-kpi="cohort"] b { color: #9feee2; }
.facility-station .fac-kpi[data-fac-kpi="fall"] {
  --fac-kpi-accent: var(--fac-attn); --fac-kpi-tint: var(--fac-attn-soft);
}
.facility-station .fac-kpi[data-fac-kpi="fall"] b { color: #ffb078; }
.facility-station .fac-kpi[data-fac-kpi="exit"] {
  --fac-kpi-accent: #ff9f5a; --fac-kpi-tint: rgba(255, 159, 90, 0.1);
}
.facility-station .fac-kpi[data-fac-kpi="exit"] b { color: #ffb078; }
.facility-station .fac-kpi[data-fac-kpi="open"] {
  --fac-kpi-accent: var(--fac-caution); --fac-kpi-tint: var(--fac-caution-soft);
}
.facility-station .fac-kpi[data-fac-kpi="open"] b { color: #ffd08a; }
.facility-station .fac-kpi[data-fac-kpi="acked"] {
  --fac-kpi-accent: var(--fac-info); --fac-kpi-tint: var(--fac-info-soft);
}
.facility-station .fac-kpi[data-fac-kpi="acked"] b { color: #7fe6d8; }
.facility-station .fac-kpi[data-fac-kpi="sensors"] {
  --fac-kpi-accent: var(--fac-off); --fac-kpi-tint: var(--fac-off-soft);
}
.facility-station .fac-kpi[data-fac-kpi="sensors"] b { color: #b9c2cf; }
.facility-station .fac-kpi.p1,
.facility-station .fac-kpi.p2,
.facility-station .fac-kpi.ok {
  background:
    radial-gradient(120% 90% at 0% 100%, var(--fac-kpi-tint), transparent 62%),
    var(--fac-tile-bg);
  box-shadow: var(--fac-shadow-card);
}
.facility-station .fac-kpi.p1 {
  border-color: var(--fac-attn-line);
  box-shadow: var(--fac-shadow-card), inset var(--fac-rail) 0 0 var(--fac-attn);
  animation: cv-fac-kpi-breathe 2.6s var(--cv-ease) infinite;
}
.facility-station .fac-kpi.p1 b {
  color: #ffb078;
  text-shadow: 0 0 18px rgba(255, 138, 76, 0.28);
}
@keyframes cv-fac-kpi-breathe {
  0%, 100% { box-shadow: var(--fac-tile-shadow), inset var(--fac-rail) 0 0 var(--fac-attn), 0 0 0 0 rgba(255, 138, 76, 0); }
  50% { box-shadow: var(--fac-tile-shadow), inset var(--fac-rail) 0 0 var(--fac-attn), 0 0 0 3px rgba(255, 138, 76, 0.14); }
}

/* Wall tools — dark capsules */
.facility-station .fac-wall-tools { gap: var(--fac-s2); }
.facility-station .fac-search .tool-input,
.facility-station .fac-filter,
.facility-station .area-ward {
  background: rgba(0, 0, 0, 0.28);
  border-color: var(--fac-line);
  color: var(--fac-ink-2);
  border-radius: var(--fac-r-pill);
  font-size: var(--fac-fs-caption);
  font-weight: 750;
}
.facility-station .fac-search .tool-input::placeholder { color: var(--fac-ghost); }
.facility-station .fac-filter:hover,
.facility-station .area-ward:hover {
  border-color: var(--fac-line-hi);
  color: var(--fac-ink);
}
.facility-station .fac-filter.on {
  border-color: var(--fac-ok-line);
  background: var(--fac-ok-soft);
  color: var(--fac-ok);
}
.facility-station .area-ward.on {
  border-color: var(--fac-info-line);
  background: var(--fac-info-soft);
  color: var(--fac-info);
}
.facility-station .fac-pager-bar,
.facility-station .fac-scale-lab { color: var(--fac-label); font-size: var(--fac-fs-micro); }

/* Bed mosaic */
.facility-station .facility-grid { gap: var(--fac-s3); }
.facility-station .bed-card {
  padding: 14px 14px 13px;
  border-radius: var(--fac-r-lg);
  border-color: var(--fac-line);
  background: var(--fac-tile-bg);
  box-shadow: var(--fac-shadow-card);
}
.facility-station .bed-card:hover {
  border-color: var(--fac-line-hi);
  box-shadow: var(--fac-shadow-lift);
}
.facility-station .bed-card.on,
.facility-station .bed-card.focused {
  border-color: var(--fac-ok-line);
  box-shadow: 0 0 0 1px rgba(198, 233, 74, 0.18), var(--fac-shadow-card);
}
.facility-station .bed-card.state-warn {
  border-color: rgba(255, 176, 26, 0.28);
  box-shadow: inset var(--fac-rail) 0 0 var(--fac-caution), var(--fac-shadow-card);
}
.facility-station .bed-card.state-crit {
  border-color: var(--fac-attn-line);
  box-shadow: inset var(--fac-rail) 0 0 var(--fac-attn), var(--fac-shadow-card);
  animation: cv-fac-bed-crit-nr 2.2s var(--cv-ease) infinite;
}
@keyframes cv-fac-bed-crit-nr {
  0%, 100% { box-shadow: inset var(--fac-rail) 0 0 var(--fac-attn), var(--fac-shadow-card); }
  50% { box-shadow: inset var(--fac-rail) 0 0 var(--fac-attn), 0 0 0 3px rgba(255, 138, 76, 0.14), var(--fac-shadow-card); }
}
.facility-station .bed-top strong {
  font-size: var(--fac-fs-micro); font-weight: 850; letter-spacing: 0.5px; color: var(--fac-label);
}
.facility-station .bed-name {
  margin: 5px 0 8px; font-size: 15.5px; letter-spacing: -0.03em; color: var(--fac-ink);
  line-height: var(--fac-lh-tight);
}
.facility-station .bed-admit { color: var(--fac-muted); }
.facility-station .flag.attn {
  background: var(--fac-attn-soft); color: #ffab72; border-color: rgba(255, 138, 76, 0.3);
}
.facility-station .bed-metrics [data-m="hr"] {
  background: var(--fac-info-soft); border-color: var(--fac-info-line); color: #9feee2;
}
.facility-station .bed-metrics [data-m="hr"] b { color: var(--fac-info); }
.facility-station .bed-metrics [data-m="pobc"].anomaly {
  background: var(--fac-caution-soft); border-color: var(--fac-caution-line); color: #ffd08a;
}
.facility-station .bed-metrics [data-m="pobc"].anomaly b { color: var(--fac-caution); }
.facility-station .bed-metrics .m-chip.crit {
  background: var(--fac-attn-soft); border-color: var(--fac-attn-line); color: #ffb078;
}
.facility-station .bed-metrics [data-m="sleep"],
.facility-station .bed-row-vitals [data-m="sleep"] { color: var(--fac-sleep); }

/* Handoff */
.facility-station .fac-handoff {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(94, 234, 212, 0.12);
  border-radius: var(--fac-r-lg);
  box-shadow: var(--fac-shadow-card);
}
.facility-station .fac-handoff-h strong {
  color: var(--fac-ink); letter-spacing: -0.02em; font-size: var(--fac-fs-body);
}
.facility-station .fac-handoff-ta {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--fac-line);
  color: var(--fac-ink);
  border-radius: var(--fac-r-sm);
}
.facility-station .fac-handoff-ta::placeholder { color: var(--fac-ghost); }

/* Density guards (100 / 200 beds) */
.facility-station.density-glance .bed-metrics .m-chip,
.facility-station.density-glance-xl .bed-metrics .m-chip {
  padding: 3px 6px;
  font-size: 9px;
}
.facility-station.density-glance-xl .bed-name { font-size: 13.5px; }
.facility-station.density-glance-xl .fac-kpi b { font-size: clamp(17px, 1.3vw, 22px); }

/* ── 5. Env / IoT horizontal dense cards (attachments 3–4) ─────── */
body[data-audience="facility"] .stats-hgrid-panel,
.facility-station ~ .stats-hgrid-panel,
body[data-audience="facility"] .panel.stats-hgrid-panel {
  background:
    radial-gradient(100% 60% at 0% 0%, rgba(94, 234, 212, 0.03), transparent 55%),
    linear-gradient(168deg, #1a1c21 0%, #15171b 60%, #12141a 100%);
  border-color: var(--fac-line);
  box-shadow: var(--fac-shadow-card);
  border-radius: var(--fac-r-xl);
  gap: var(--fac-s3);
  padding: var(--fac-s4);
}
body[data-audience="facility"] .stats-hgrid-panel .card-h .t {
  font-size: var(--fac-fs-title);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--fac-ink);
}
body[data-audience="facility"] .stats-hgrid-panel .card-h .r,
body[data-audience="facility"] .stats-hgrid-panel .sub2,
body[data-audience="facility"] .stats-hgrid-panel .stats-foot {
  font-size: var(--fac-fs-caption);
  color: var(--fac-label);
  line-height: var(--fac-lh-snug);
}
body[data-audience="facility"] .stats-hgrid {
  gap: var(--fac-s3);
}
body[data-audience="facility"] .hx-hcard {
  --hx-hcard-accent: var(--fac-info);
  gap: 10px;
  padding: 14px 14px 12px;
  border-radius: var(--fac-r-lg);
  background: linear-gradient(165deg, #1c1e24 0%, #14161b 55%, #101218 100%);
  border: 1px solid var(--fac-line);
  box-shadow: var(--fac-shadow-card);
}
body[data-audience="facility"] .hx-hcard:hover {
  border-color: var(--fac-line-hi);
  transform: translateY(-2px);
  box-shadow: var(--fac-shadow-lift);
}
body[data-audience="facility"] .hx-hcard-ico {
  width: 32px;
  height: 32px;
  border-radius: var(--fac-r-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--hx-hcard-accent);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.02), 0 0 18px currentColor;
}
body[data-audience="facility"] .hx-hcard-lab {
  font-size: var(--fac-fs-body);
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--fac-ink);
}
body[data-audience="facility"] .hx-hcard-num {
  font-size: clamp(26px, 2vw, 32px);
  font-weight: 850;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: var(--fac-lh-tight);
  color: var(--fac-ink);
}
body[data-audience="facility"] .hx-hcard-unit {
  font-size: var(--fac-fs-label);
  font-weight: 700;
  color: var(--fac-label);
}
body[data-audience="facility"] .hx-hcard-kpi3 em b,
body[data-audience="facility"] .hx-hcard-stats b {
  font-variant-numeric: tabular-nums;
  color: var(--fac-ink-2);
  font-weight: 800;
}
body[data-audience="facility"] .hx-hcard-kpi3 small,
body[data-audience="facility"] .hx-hcard-stats small {
  font-size: var(--fac-fs-micro);
  color: var(--fac-muted);
  font-weight: 700;
  letter-spacing: 0.2px;
}
body[data-audience="facility"] .hx-hcard-chip {
  font-size: var(--fac-fs-micro);
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--fac-r-pill);
  color: var(--fac-ok);
  border: 1px solid var(--fac-ok-line);
  background: rgba(0, 0, 0, 0.28);
}
body[data-audience="facility"] .hx-hcard--iot .hx-hcard-chip {
  color: #ffc08a;
  border-color: rgba(255, 176, 26, 0.4);
}
body[data-audience="facility"] .hx-hcard-foot {
  display: block;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--fac-line-soft);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15px;
  color: var(--fac-ghost);
  line-height: var(--fac-lh-snug);
}
body[data-audience="facility"] .hx-hcard--iot.is-on {
  border-color: rgba(198, 233, 74, 0.22);
}
body[data-audience="facility"] .stats-iot-state {
  font-size: var(--fac-fs-micro);
  font-weight: 850;
  padding: 3px 8px;
  border-radius: var(--fac-r-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--fac-line);
  color: var(--fac-label);
}
body[data-audience="facility"] .stats-iot-state.on {
  background: var(--fac-caution-soft);
  border-color: var(--fac-caution-line);
  color: #ffd08a;
}
body[data-audience="facility"] .hx-hcard .pill.crit {
  background: var(--fac-attn-soft) !important;
  color: #ffb078 !important;
  border-color: var(--fac-attn-line) !important;
}
body[data-audience="facility"] .hx-hcard .pill.warn {
  background: var(--fac-caution-soft) !important;
  color: #ffd08a !important;
  border-color: var(--fac-caution-line) !important;
}
body[data-audience="facility"] .hx-hcard .pill.ok {
  background: var(--fac-ok-soft) !important;
  color: #d8f07a !important;
  border-color: var(--fac-ok-line) !important;
}
body[data-audience="facility"] .hx-hcard-bars { min-height: 72px; }
body[data-audience="facility"] .hx-hcard-bars .cv-chart {
  width: 100% !important;
  height: 78px !important;
}

/* Facility env actuators stay horizontal */
body[data-audience="facility"] .env-actuator-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fac-s2);
}
body[data-audience="facility"] .env-compose-row { grid-template-columns: 1fr; }
body[data-audience="facility"] .env-metric-chips--row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--fac-s2);
  overflow: visible;
}
body[data-audience="facility"] .env-metric-chips--row .env-chip {
  flex: none; min-width: 0; justify-content: flex-start;
  border-radius: var(--fac-r); padding: 10px 12px;
}

/* ── 6. Responsive wrap 5→3→2→1 ────────────────────────────────── */
@media (max-width: 1180px) {
  .facility-station .fac-alert-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  body[data-audience="facility"] .stats-hgrid,
  body[data-audience="facility"] .stats-hgrid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .facility-station .fac-alert-hd .sub2 { order: 3; }
  body[data-audience="facility"] .env-metric-chips--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .facility-station { gap: var(--fac-s4); padding: var(--fac-s4); }
  .facility-station .fac-alert-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body[data-audience="facility"] .stats-hgrid,
  body[data-audience="facility"] .stats-hgrid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body[data-audience="facility"] .hx-hcard { padding: 12px; border-radius: 16px; }
  body[data-audience="facility"] .hx-hcard-num { font-size: 26px; }
}
@media (max-width: 560px) {
  .facility-station .fac-alert-cards { grid-template-columns: 1fr; }
  body[data-audience="facility"] .env-actuator-stack,
  body[data-audience="facility"] .env-metric-chips--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  body[data-audience="facility"] .stats-hgrid,
  body[data-audience="facility"] .stats-hgrid--5 { grid-template-columns: 1fr; }
}

/* ── 7. Motion / a11y ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .facility-station .fac-alert-banner,
  .facility-station .fac-kpi.p1,
  .facility-station .bed-card.state-crit { animation: none !important; }
  .facility-station .fac-alert-card:hover,
  body[data-audience="facility"] .hx-hcard:hover { transform: none; }
}
body[data-audience="facility"] .trend-down { color: #ff9f5a; }
body[data-audience="facility"] .stats-cat-head[data-cat="crit"] .stats-cat-dot {
  background: var(--fac-attn);
}
/* ═══════════════ /v105-facsys ═══════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v106-faccool — Cool charcoal de-warm + alert-card biometric bars
   User: "느낌이 붉게" + 주요 이벤트 카드에 env/IoT 스타일 미니 막대
   Facility scope only · no red family · amber muted as severity accent
   ═══════════════════════════════════════════════════════════════════ */

.facility-station,
body[data-audience="facility"] {
  /* Cool charcoal surfaces (blue-slate undertone, not warm brown-black) */
  --fac-bg: #0f1216;
  --fac-lane: #0c0f14;
  --fac-field: #171b22;
  --fac-card: #141820;
  --fac-elev: #1a1f28;
  --fac-lane-bg: linear-gradient(178deg, #10141a 0%, #0c0f14 55%, #0a0d12 100%);
  --fac-field-bg: linear-gradient(168deg, #1a1e26 0%, #151920 58%, #12161c 100%);
  --fac-tile-bg: linear-gradient(158deg, #181c24 0%, #13171e 100%);

  /* Quieter semantic — caution muted, attn only as accent */
  --fac-caution: #d4a24a;
  --fac-caution-soft: rgba(212, 162, 74, 0.1);
  --fac-caution-line: rgba(212, 162, 74, 0.32);
  --fac-attn: #e08a52;
  --fac-attn-soft: rgba(224, 138, 82, 0.1);
  --fac-attn-line: rgba(224, 138, 82, 0.34);
  --fac-olive: #9aab56;
  --fac-olive-soft: rgba(154, 171, 86, 0.12);
  --fac-olive-line: rgba(154, 171, 86, 0.36);
  --fac-slate: #7a8698;

  --hx-dash-amber: var(--fac-caution);
  --hx-dash-orange: var(--fac-attn);
  --hx-dash-coral: var(--fac-attn);
  --cv-fall: var(--fac-attn);
  --cv-fall-glow: rgba(224, 138, 82, 0.32);
}

.facility-station {
  background:
    radial-gradient(120% 55% at 100% 0%, rgba(94, 234, 212, 0.04), transparent 58%),
    radial-gradient(90% 40% at 0% 100%, rgba(154, 171, 86, 0.025), transparent 55%),
    linear-gradient(172deg, #14181e 0%, #10141a 60%, var(--fac-bg) 100%);
}

/* TOP lane — cool slate chrome; amber only as quiet open-rail */
.facility-station .fac-alert-banner {
  border-color: rgba(122, 134, 152, 0.22);
  background: var(--fac-lane-bg);
  box-shadow: 0 20px 48px -22px rgba(0, 0, 0, 0.85), var(--fac-inset-hair);
}
.facility-station .fac-alert-banner::after {
  background:
    radial-gradient(100% 70% at 0% 0%, rgba(94, 234, 212, 0.06), transparent 55%),
    radial-gradient(90% 60% at 100% 0%, rgba(154, 171, 86, 0.04), transparent 52%);
}
.facility-station .fac-alert-banner.has-open {
  box-shadow: 0 20px 48px -22px rgba(0, 0, 0, 0.85), inset var(--fac-rail) 0 0 var(--fac-slate), var(--fac-inset-hair);
}
@keyframes cv-fac-incident {
  0%, 100% { border-color: rgba(122, 134, 152, 0.16); }
  50% { border-color: rgba(94, 234, 212, 0.22); }
}
.facility-station .fac-lane-kicker {
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.08), rgba(154, 171, 86, 0.04) 48%, transparent);
  border-bottom: 1px solid rgba(122, 134, 152, 0.16);
}
.facility-station .fac-lane-tag {
  color: #8fd4c8;
}
.facility-station .fac-alert-hd strong {
  color: var(--fac-ink);
}
.facility-station .fac-ack-all {
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.14), rgba(154, 171, 86, 0.1)) !important;
  border-color: rgba(94, 234, 212, 0.32) !important;
  color: #b8f0e6 !important;
  box-shadow: 0 0 16px rgba(94, 234, 212, 0.06);
}

/* Prop chips — cool charcoal; amber only on 미전파 status */
.facility-station .fac-prop-chip.is-off {
  border-color: rgba(122, 134, 152, 0.22);
  background: rgba(16, 20, 26, 0.94);
}
.facility-station .fac-prop-chip i.off,
.facility-station .fac-prop-st.off {
  color: #d4a574;
}


/* TOP/BOTTOM concept labels — persona glance (v112) */
.fac-lane-concept,
.fac-wall-concept,
.fac-handoff-concept {
  font-size: 11px; font-weight: 800; letter-spacing: -0.02em;
  color: #d8c4a4;
}
.facility-station .fac-lane-concept { color: #ffcf8f; }
.facility-station .fac-wall-concept { color: #9fe8d8; }
.facility-station .fac-handoff-concept {
  color: #b8c4a8; margin-left: 8px; font-size: var(--fac-fs-caption);
}
.facility-station .fac-lane-kicker {
  gap: 8px 12px;
}
.facility-station .fac-wall-kicker {
  gap: 8px 12px;
}
.fac-lane-tag,
.fac-wall-tag {
  display: inline-flex; align-items: center; gap: 6px;
}


/* Alert card — situation type first (간호사 NOW scan) */
.facility-station .fac-alert-card-sit {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0;
}
.facility-station .fac-alert-card-sit em {
  font-size: 14px !important; font-weight: 900 !important; letter-spacing: -0.03em;
  line-height: 1.15;
}
.facility-station .fac-alert-card-sit time {
  font-size: 10px; color: var(--fac-muted); font-weight: 650;
}
.facility-station .fac-alert-card-detail {
  margin: 0;
}
.facility-station .fac-alert-card-detail span {
  font-size: 11px; color: var(--fac-label); font-weight: 650;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.facility-station .fac-alert-card-h {
  margin-top: 2px;
}

/* Alert cards — cool charcoal fill; severity = thin rail only */
.facility-station .fac-alert-card {
  border-color: rgba(122, 134, 152, 0.16);
  border-left: var(--fac-rail) solid var(--fac-slate);
  background:
    linear-gradient(165deg, rgba(24, 28, 36, 0.92) 0%, rgba(14, 17, 22, 0.96) 100%);
}
.facility-station .fac-alert-card.p1 {
  border-left-color: var(--fac-attn) !important;
  background:
    linear-gradient(165deg, rgba(26, 28, 34, 0.94) 0%, rgba(14, 17, 22, 0.97) 100%);
  box-shadow: var(--fac-shadow-card), inset 0 0 0 1px rgba(224, 138, 82, 0.05);
}
.facility-station .fac-alert-card.p2 {
  border-left-color: var(--fac-caution);
}
.facility-station .fac-alert-card-b em {
  color: #d4b07a;
}
.facility-station .fac-alert-card.p2 .fac-alert-card-b em,
.facility-station .fac-alert-card:not(.p1) .fac-alert-card-b em {
  color: #c9b07a;
}
.facility-station .fac-alert-ticket.fac-alert-card,
.facility-station .fac-alert-card.fac-alert-ticket {
  background: linear-gradient(165deg, rgba(24, 28, 36, 0.92) 0%, rgba(14, 17, 22, 0.96) 100%) !important;
  border-left-color: var(--fac-slate) !important;
}

/* 위험 pill — muted amber/olive, not pink-red */
.facility-station .pill.crit,
body[data-audience="facility"] .pill.crit {
  background: rgba(154, 171, 86, 0.1) !important;
  color: #d4b07a !important;
  border-color: rgba(154, 171, 86, 0.38) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}
.facility-station .pill.warn,
body[data-audience="facility"] .pill.warn {
  background: var(--fac-caution-soft) !important;
  color: #dcc08a !important;
  border-color: var(--fac-caution-line) !important;
}

/* Alert-card biometric mini bars (env/IoT DNA) */
.facility-station .fac-alert-metrics {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 0;
  padding: 8px 8px 6px;
  border-radius: var(--fac-r-sm);
  border: 1px solid rgba(122, 134, 152, 0.14);
  background: rgba(8, 11, 16, 0.45);
  min-height: 0;
}
.facility-station .fac-alert-metric-h {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.facility-station .fac-alert-metric-h > b {
  font-size: var(--fac-fs-micro);
  font-weight: 850;
  letter-spacing: 0.3px;
  color: var(--fac-label);
  text-transform: uppercase;
}
.facility-station .fac-alert-metric-h > em {
  font-style: normal;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--fac-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.facility-station .fac-alert-metric-h > em small {
  margin-left: 2px;
  font-size: 9px;
  font-weight: 700;
  color: var(--fac-muted);
}
.facility-station .fac-alert-metric-chips {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.facility-station .fac-alert-metric-chips i {
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1px;
  padding: 2px 6px;
  border-radius: var(--fac-r-pill);
  border: 1px solid rgba(122, 134, 152, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: #9aa8b8;
  font-variant-numeric: tabular-nums;
}
.facility-station .fac-alert-metric-bars {
  min-height: 88px;
  margin-top: 2px;
}
.facility-station .fac-alert-metric-bars .cv-chart {
  width: 100% !important;
  height: 88px !important;
  display: block;
  margin: 0;
}
.facility-station .fac-alert-metric-bars .cv-bar-lb {
  font-size: 8px !important;
  letter-spacing: -0.02em;
}
.facility-station .fac-alert-metric-bars .cv-bar-val {
  font-size: 9px !important;
  font-weight: 800;
}
.facility-station .fac-alert-metric-chips i.on {
  color: #5eead4;
  border-color: rgba(94, 234, 212, 0.35);
  background: rgba(94, 234, 212, 0.1);
}
.facility-station .fac-alert-metric-chips i.off {
  color: #9aa8b8;
}
.facility-station .fac-alert-metric-foot {
  font-size: 9px;
  font-weight: 650;
  color: var(--fac-ghost);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.facility-station .fac-alert-card-actions {
  margin-top: 2px;
  padding-top: 2px;
}

/* Soften KPI fall/exit orange flood */
.facility-station .fac-kpi[data-fac-kpi="fall"] {
  --fac-kpi-accent: var(--fac-attn);
  --fac-kpi-tint: rgba(224, 138, 82, 0.07);
}
.facility-station .fac-kpi[data-fac-kpi="fall"] b { color: #e0a078; }
.facility-station .fac-kpi[data-fac-kpi="exit"] {
  --fac-kpi-accent: var(--fac-slate);
  --fac-kpi-tint: rgba(122, 134, 152, 0.08);
}
.facility-station .fac-kpi[data-fac-kpi="exit"] b { color: #b0bcc8; }
.facility-station .fac-kpi[data-fac-kpi="open"] {
  --fac-kpi-accent: var(--fac-caution);
  --fac-kpi-tint: rgba(212, 162, 74, 0.06);
}
.facility-station .fac-kpi[data-fac-kpi="open"] b { color: #dcc08a; }

body[data-audience="facility"] .hx-hcard .pill.crit {
  background: rgba(154, 171, 86, 0.1) !important;
  color: #d4b07a !important;
  border-color: rgba(154, 171, 86, 0.38) !important;
}
body[data-audience="facility"] .trend-down { color: #e0a078; }

@media (max-width: 720px) {
  .facility-station .fac-alert-metric-chips { width: 100%; margin-left: 0; }
}
/* ═══════════════ /v106-faccool ═══════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v107-vitalscan — Facility bed-card vital chips: glance-scannable
   User: "첨부 부분이 눈에 잘 들어 오지를 않아요."
   · Filled tinted chips (not ghost thin-border) · brighter ink
   · Hierarchy: presence primary · HR/BR large nums · POBC tertiary
   · Cool semantic (teal HR · blue BR · olive POBC · violet sleep ·
     amber away · slate offline) — no red family
   · Density compress at glance / glance-xl; vitals always visible
   · R0-2: is-empty slate for offline / 센서 미연결 (—)
   ═══════════════════════════════════════════════════════════════════ */

.facility-station .bed-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  align-content: start;
}

/* Base chip shell — solid tinted fill + thicker edge */
.facility-station .bed-metrics > span {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 9px;
  border-radius: 11px;
  border: 1.5px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.1);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #c5ceda;
  white-space: nowrap;
  line-height: 1.15;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.facility-station .bed-metrics > span b {
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-left: auto;
}

/* Label vs value split (markup <i>/<b>) */
.facility-station .bed-metrics .m-vital i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  opacity: 0.88;
  flex: 0 0 auto;
}
.facility-station .bed-metrics .m-vital b {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: var(--fac-ink);
}

/* ── Presence / fall = PRIMARY (filled, centered, bolder) ── */
.facility-station .bed-metrics .m-chip[data-m="state"],
.facility-station .bed-metrics .m-chip[data-m="fall"] {
  justify-content: center;
  gap: 0;
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-align: center;
}
.facility-station .bed-metrics .m-chip.ok {
  background: rgba(94, 234, 212, 0.24);
  border-color: rgba(94, 234, 212, 0.58);
  color: #d2fff7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(94, 234, 212, 0.08);
}
.facility-station .bed-metrics .m-chip.sleep {
  background: rgba(167, 139, 250, 0.26);
  border-color: rgba(167, 139, 250, 0.58);
  color: #e4dcff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(167, 139, 250, 0.08);
}
.facility-station .bed-metrics .m-chip.warn {
  background: rgba(212, 162, 74, 0.22);
  border-color: rgba(212, 162, 74, 0.55);
  color: #ffe3b0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(212, 162, 74, 0.08);
}
.facility-station .bed-metrics .m-chip.off {
  background: rgba(122, 134, 152, 0.2);
  border-color: rgba(148, 163, 184, 0.48);
  color: #d0d8e4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.facility-station .bed-metrics .m-chip.crit {
  background: rgba(224, 138, 82, 0.24);
  border-color: rgba(224, 138, 82, 0.58);
  color: #ffd4b8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(224, 138, 82, 0.1);
  animation: none;
}

/* ── HR teal (secondary large num) ── */
.facility-station .bed-metrics [data-m="hr"] {
  background: rgba(94, 234, 212, 0.16);
  border-color: rgba(94, 234, 212, 0.48);
  color: #9feee2;
}
.facility-station .bed-metrics [data-m="hr"] b { color: #7ff5e4; }

/* ── BR blue (secondary large num) ── */
.facility-station .bed-metrics [data-m="br"] {
  background: rgba(94, 168, 255, 0.16);
  border-color: rgba(94, 168, 255, 0.48);
  color: #a8cfff;
}
.facility-station .bed-metrics [data-m="br"] b { color: #7eb8ff; }

/* ── POBC olive tertiary (slightly quieter) ── */
.facility-station .bed-metrics [data-m="pobc"] {
  background: rgba(154, 171, 86, 0.14);
  border-color: rgba(154, 171, 86, 0.42);
  color: #c5d48a;
}
.facility-station .bed-metrics [data-m="pobc"] b {
  color: #d4e86a;
  font-size: 12.5px;
  font-weight: 850;
}
.facility-station .bed-metrics [data-m="pobc"].anomaly {
  background: rgba(212, 162, 74, 0.2);
  border-color: rgba(212, 162, 74, 0.55);
  color: #ffe0a8;
}
.facility-station .bed-metrics [data-m="pobc"].anomaly b {
  color: #ffc45c;
  font-size: 12.5px;
}

/* Offline / 센서 미연결 — honest empty slate (R0-2) */
.facility-station .bed-metrics .m-vital.is-empty {
  background: rgba(122, 134, 152, 0.1);
  border-color: rgba(122, 134, 152, 0.32);
  color: #8b97a8;
  box-shadow: none;
}
.facility-station .bed-metrics .m-vital.is-empty i { opacity: 0.75; }
.facility-station .bed-metrics .m-vital.is-empty b {
  color: #9aa6b6;
  font-weight: 800;
}

/* Fall chip spans when 5 items (낙상 + 4) — keep 2-col rhythm */
.facility-station .bed-metrics .m-chip[data-m="fall"] {
  grid-column: 1 / -1;
}

/* ── Density: 40 / 100 / 200 — compress padding/type, keep fills ── */
.facility-station .facility-grid.density-glance .bed-metrics {
  gap: 4px;
  padding-top: 8px;
}
.facility-station .facility-grid.density-glance .bed-metrics > span {
  padding: 4px 7px;
  font-size: 9.5px;
  border-radius: 9px;
  border-width: 1.5px;
}
.facility-station .facility-grid.density-glance .bed-metrics .m-chip[data-m="state"],
.facility-station .facility-grid.density-glance .bed-metrics .m-chip[data-m="fall"] {
  padding: 4px 6px;
  font-size: 10.5px;
}
.facility-station .facility-grid.density-glance .bed-metrics .m-vital i { font-size: 8.5px; }
.facility-station .facility-grid.density-glance .bed-metrics .m-vital b { font-size: 12.5px; }
.facility-station .facility-grid.density-glance .bed-metrics [data-m="pobc"] b { font-size: 11.5px; }

.facility-station .facility-grid.density-glance-xl .bed-metrics {
  gap: 3px;
  padding-top: 6px;
}
.facility-station .facility-grid.density-glance-xl .bed-metrics > span {
  padding: 3px 5px;
  font-size: 9px;
  border-radius: 8px;
  border-width: 1px;
  gap: 3px;
}
.facility-station .facility-grid.density-glance-xl .bed-metrics .m-chip[data-m="state"],
.facility-station .facility-grid.density-glance-xl .bed-metrics .m-chip[data-m="fall"] {
  padding: 3px 5px;
  font-size: 9.5px;
}
.facility-station .facility-grid.density-glance-xl .bed-metrics .m-vital i { font-size: 8px; }
.facility-station .facility-grid.density-glance-xl .bed-metrics .m-vital b { font-size: 11.5px; }
.facility-station .facility-grid.density-glance-xl .bed-metrics [data-m="pobc"] b { font-size: 10.5px; }

/* List-row vitals — match semantic ink (cards remain primary) */
.facility-station .bed-row-vitals b:nth-of-type(1) { color: #7ff5e4; }
.facility-station .bed-row-vitals b:nth-of-type(2) { color: #7eb8ff; }
.facility-station .bed-row-vitals b:nth-of-type(3) { color: #d4e86a; }

@media (prefers-reduced-motion: reduce) {
  .facility-station .bed-metrics .m-chip.crit { animation: none !important; }
}
/* ═══════════════ /v107-vitalscan ═══════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v108-l1vital — L1 popup 호흡/심박 cards match dashboard reference
   + facility cool no-red heart · bed chips remain v107
   ═══════════════════════════════════════════════════════════════════ */

/* L1 mosaic: BR/HR cards inherit main bento DNA, tighten to ref */
.pdash-mosaic .br-card,
.pdash-mosaic .hr-card {
  min-height: 268px;
  padding: 16px 16px 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pdash-mosaic .br-card {
  background: linear-gradient(165deg, #161b22 0%, #12151a 100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pdash-mosaic .hr-card {
  background: linear-gradient(165deg, #1a1d22 0%, #131518 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdash-mosaic .br-card .card-h,
.pdash-mosaic .hr-card-head {
  margin-bottom: 2px;
}
.pdash-mosaic .br-card .card-h .t,
.pdash-mosaic .hr-card-head .t {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.pdash-mosaic .br-metric {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pdash-mosaic .br-metric .metric-unit,
.pdash-mosaic .hr-bpm .metric-unit {
  font-size: 14px;
  font-weight: 700;
  color: #8a919c;
  margin-left: 4px;
}
.pdash-mosaic .br-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #8a919c;
  line-height: 1.3;
}
.pdash-mosaic .br-meta .br-status-txt { color: #7ec8ff; }
.pdash-mosaic .br-meta .br-trend { color: #c8ced6; }
.pdash-mosaic .pdash-br-wave {
  width: 100%;
  height: 64px;
  margin: 4px 0 2px;
  flex-shrink: 0;
  overflow: visible;
}
.pdash-mosaic .pdash-br-wave .br-wave-stroke {
  filter: drop-shadow(0 0 8px rgba(46, 196, 168, 0.55));
}
.pdash-mosaic .br-footer {
  margin-top: auto;
  padding-top: 10px;
}
.pdash-mosaic .br-foot-col b { font-size: 15px; }
.pdash-mosaic .br-r0 {
  margin: 2px 0 0;
  font-size: 10px;
  color: #5c6470;
  text-align: center;
}

/* BR: glowing blue lung SVG (no photo) */
.pdash-mosaic .br-card .cv-icon--br {
  color: #5ec8ff;
  background: rgba(62, 184, 255, 0.12);
  border: 1px solid rgba(62, 184, 255, 0.34);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(62, 184, 255, 0.32);
}

/* HR: teal SVG heart (no red photo) + wide bottom status */
.pdash-mosaic .hr-card .cv-icon--hr {
  color: #5eead4;
  background: rgba(94, 234, 212, 0.1);
  border: 1px solid rgba(94, 234, 212, 0.28);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(94, 234, 212, 0.28);
}
.pdash-mosaic .hr-bpm {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
}
.pdash-mosaic .hr-zones {
  gap: 8px;
  margin-top: 2px;
}
.pdash-mosaic .hr-zone span { color: #7a828e; font-size: 10.5px; }
.pdash-mosaic .hr-zone b { color: #f2f4f7; font-size: 12.5px; font-weight: 850; }
.pdash-mosaic .hr-range-wrap {
  flex: 1;
  min-height: 108px;
  margin-top: 4px;
}
.pdash-mosaic .hr-range-wrap .cv-range { min-height: 108px; width: 100%; }
.pdash-mosaic .hr-status-bar {
  margin-top: auto;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.pdash-mosaic .hr-status-bar .pill {
  width: 100%;
  justify-content: center;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 850;
  border-radius: 999px;
}
.pdash-mosaic .hr-status-bar .pill.ok {
  background: rgba(30, 240, 208, 0.14);
  color: #5eead4;
  border-color: rgba(30, 240, 208, 0.42);
  box-shadow: 0 0 18px rgba(30, 240, 208, 0.18);
}
.pdash-mosaic .hr-status-bar .pill.warn {
  background: rgba(212, 162, 74, 0.14);
  color: #ffd08a;
  border-color: rgba(212, 162, 74, 0.4);
}
.pdash-mosaic .br-card .pill.ok,
.pdash-mosaic .hr-card .pill.ok {
  background: rgba(30, 240, 208, 0.12);
  color: #5eead4;
  border-color: rgba(30, 240, 208, 0.38);
}

/* Facility L1: cool remap, no red crit wash on these cards */
body[data-audience="facility"] .pdash-mosaic .hr-card .cv-icon--hr,
.facility-station ~ * .pdash-mosaic .hr-card .cv-icon--hr {
  color: #5eead4;
}
body[data-audience="facility"] .pdash-l1-modal .br-card.state-crit,
body[data-audience="facility"] .pdash-l1-modal .hr-card.state-crit {
  border-color: rgba(224, 138, 82, 0.35);
}

@media (max-width: 980px) {
  .pdash-mosaic .br-card,
  .pdash-mosaic .hr-card { min-height: 240px; }
}
/* ═══════════════ /v108-l1vital ═══════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v110-l1vitalfix — Finish attachment parity (wave + HR hist)
   · Pdash BR wave: live rAF (was static stub) · green→teal→cyan glow
   · BR/HR icons: SVG only (no photo) · lung blue glow / heart teal
   · HR hist: contiguous teal highlight segment + AM/PM time axis
   · Main #card-hr: wide 정상 status bar (was sr-only)
   · Bed vital chips: v107 retained
   · R0-2 footers honest
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v109-vitalaxis — Alert-card axes: named vitals (not −6…지금)
   User: "이게 무슨 의미인지 모르겠어요… 호흡·심박·움직임·POBC·수면질"
   · fac-alert-metrics x-axis = 호흡/심박/움직임/POBC/수면질 (+재실 when exit)
   · Bar height = comparable 0–100 level · tip numbers = real readings
   · Cool palette · R0-2 demo footer
   ═══════════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════════════
   v113-facstats — Facility-wide statistics (요양원 전체 통계)
   · 시설「통계」= 입소자·센서·알림 집계 (개인/선택 병상 아님)
   · Banner KPI strip · cool charcoal/teal/amber (no red)
   · Personal/family stats unchanged
   ═══════════════════════════════════════════════════════════════════
   v114-periodkpi — 주·월 기간 기록 KPI 1순위 · 지금=보조 스냅샷
   ═══════════════════════════════════════════════════════════════════ */
.stats-fac-banner {
  margin: 0 0 14px;
  padding: 14px 16px 12px;
  border-radius: 16px;
  border: 1px solid rgba(122, 134, 152, 0.2);
  background:
    linear-gradient(145deg, rgba(18, 28, 36, 0.96), rgba(12, 18, 24, 0.94)),
    radial-gradient(120% 80% at 0% 0%, rgba(94, 234, 212, 0.07), transparent 55%);
}
.stats-fac-banner.is-history {
  border-color: rgba(94, 234, 212, 0.28);
  background:
    linear-gradient(145deg, rgba(16, 30, 36, 0.98), rgba(10, 16, 22, 0.96)),
    radial-gradient(110% 90% at 100% 0%, rgba(125, 211, 192, 0.1), transparent 50%);
}
.stats-fac-banner-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 12px;
}
.stats-fac-banner-h strong {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #e8f4f2;
}
.stats-fac-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9fe8d8;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(94, 234, 212, 0.28);
  background: rgba(94, 234, 212, 0.08);
}
.stats-fac-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.stats-fac-kpis--period {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .stats-fac-kpis--period { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .stats-fac-kpis,
  .stats-fac-kpis--period { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stats-fac-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(122, 134, 152, 0.16);
  background: rgba(16, 22, 28, 0.72);
}
.stats-fac-kpi em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #8a96a4;
}
.stats-fac-kpi b {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #f0f4f8;
  line-height: 1.1;
}
.stats-fac-kpi small {
  font-size: 10.5px;
  color: #7a8694;
  font-weight: 650;
}
.stats-fac-kpi.warn b { color: #ffcf8f; }
.stats-fac-kpi.ok b { color: #9fe8d8; }
body[data-audience="facility"] .stats-fac-banner .stats-foot {
  margin-top: 10px;
  color: #8a96a4;
}
body[data-audience="facility"] .stats-goal .score-num,
body[data-audience="facility"] .stats-hr .score-num {
  color: #e8f4f2;
}

/* v114 — compact 지금 snapshot */
.stats-fac-now {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(122, 134, 152, 0.18);
  background: rgba(14, 20, 26, 0.78);
}
.stats-fac-now.is-focus {
  border-color: rgba(94, 234, 212, 0.22);
  background:
    linear-gradient(120deg, rgba(18, 28, 34, 0.9), rgba(12, 18, 24, 0.88));
}
.stats-fac-now-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 8px;
}
.stats-fac-now-h strong {
  font-size: 13px;
  font-weight: 850;
  color: #d5e4e8;
}
.stats-fac-now-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.stats-fac-now-kpis span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(122, 134, 152, 0.16);
  background: rgba(255, 255, 255, 0.03);
}
.stats-fac-now-kpis em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #8a96a4;
}
.stats-fac-now-kpis b {
  font-size: 13px;
  font-weight: 850;
  color: #e8f4f2;
  font-variant-numeric: tabular-nums;
}
.stats-fac-alert-wrap {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(122, 134, 152, 0.14);
  background: rgba(10, 16, 22, 0.55);
}
.stats-fac-alert-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #d5e4e8;
}
.stats-fac-alert-h .sub2 {
  font-weight: 650;
  color: #8a96a4;
  white-space: nowrap;
}
.stats-fac-alert-cap {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  color: #8a96a4;
}
.stats-fac-alert-bars {
  min-height: 100px;
}
.stats-fac-alert-bars .cv-chart {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.stats-fac-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.stats-fac-meta {
  font-size: 11px;
  font-weight: 650;
  color: #8a96a4;
}
.stats-sensor-online {
  margin-top: 2px;
}

/* v113 bed distribution bars */
.stats-fac-dist {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 72px;
  margin: 8px 0 6px;
  padding: 6px 4px 0;
}
.stats-fac-dist-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  height: 100%;
}
.stats-fac-dist-col b {
  font-size: 12px;
  font-weight: 850;
  color: #e8f4f2;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stats-fac-dist-bar {
  width: 100%;
  max-width: 28px;
  min-height: 4px;
  border-radius: 6px 6px 3px 3px;
  background: #5eead4;
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.18);
}
.stats-fac-dist-col em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #8a96a4;
  letter-spacing: 0.02em;
}


/* 항상 보이는 융합 엔진 상태(footer) */
.foot-fusion { color: #c3b6ff; font-weight: 600; white-space: nowrap; }
.foot-fusion b.ff-live { color: #05231d; background: #1ef0d0; padding: 1px 6px; border-radius: 999px; font-size: .92em; }

/* ── 히어로 융합 위험 게이지 ── */
.hero-fusion { margin: 10px 0 4px; padding: 9px 11px; border-radius: 12px;
  border: 1px solid rgba(124, 92, 255, 0.30);
  background: linear-gradient(100deg, rgba(124, 92, 255, 0.14), rgba(30, 240, 208, 0.05)); }
.hero-fusion.lv-warn { border-color: rgba(255, 176, 32, 0.42); background: linear-gradient(100deg, rgba(255, 176, 32, 0.16), rgba(124, 92, 255, 0.06)); }
.hero-fusion.lv-crit { border-color: rgba(255, 77, 79, 0.5); background: linear-gradient(100deg, rgba(255, 77, 79, 0.18), rgba(124, 92, 255, 0.05)); }
.hf-top { display: flex; align-items: baseline; gap: 8px; }
.hf-lbl { font-size: 10px; font-weight: 800; letter-spacing: .03em; color: #c3b6ff; text-transform: uppercase; }
.hero-fusion.lv-warn .hf-lbl { color: #ffcf7a; }
.hero-fusion.lv-crit .hf-lbl { color: #ff9a9b; }
.hf-score { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 21px; font-weight: 800; color: #eef2f7; line-height: 1; }
.hf-lv { font-size: 11px; font-weight: 700; color: #9aa3b2; margin-left: auto; }
.hero-fusion.lv-warn .hf-lv { color: #ffb020; }
.hero-fusion.lv-crit .hf-lv { color: #ff6b6d; }
.hf-meter { position: relative; height: 7px; border-radius: 999px; margin: 8px 0 6px;
  background: linear-gradient(90deg, #1ef0d0 0%, #7c5cff 45%, #ffb020 72%, #ff4d4f 100%); opacity: .32; overflow: visible; }
.hf-fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #1ef0d0 0%, #7c5cff 45%, #ffb020 72%, #ff4d4f 100%);
  opacity: 1; transition: width .5s ease; }
.hf-mark { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff;
  border: 2px solid #0b0d12; box-shadow: 0 0 8px rgba(255, 255, 255, .6); transform: translate(-50%, -50%); transition: left .5s ease; }
.hf-sub { font-size: 10px; color: #8a93a3; font-family: ui-monospace, Menlo, monospace; }

/* ── 수면·스트레스 카드 적응 기준선 라인 ── */
.hx-baseline-line { display: block; margin-top: 6px; font-size: 10px; color: #9aa3b2;
  font-family: ui-monospace, Menlo, monospace; }
.hx-baseline-line b { color: #c3b6ff; font-weight: 700; }

/* 케어 리포트 실 인쇄 플로팅 버튼 */
.hx-print-fab { position: fixed; left: 18px; bottom: 18px; z-index: 900;
  padding: 10px 15px; border-radius: 999px; border: 1px solid rgba(124,92,255,.4);
  background: linear-gradient(100deg, #1b1030, #0f1a17); color: #e9e4ff; font-size: 12.5px; font-weight: 700;
  box-shadow: 0 6px 22px rgba(0,0,0,.45); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.hx-print-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(124,92,255,.35); border-color: #7c5cff; }
.hx-print-fab:active { transform: translateY(0); }

/* ═══ 데이터 시각화 강화: 인터랙티브 툴팁 + 호버 이펙트 ═══ */
.hx-viz-tip { position: fixed; z-index: 1200; pointer-events: none; max-width: 260px;
  padding: 8px 11px; border-radius: 10px; font-size: 11.5px; line-height: 1.5;
  background: rgba(14, 16, 22, 0.97); color: #e9edf5; border: 1px solid rgba(124, 92, 255, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(30, 240, 208, 0.08);
  opacity: 0; transform: translateY(4px) scale(.97); transition: opacity .12s, transform .12s; }
.hx-viz-tip.on { opacity: 1; transform: translateY(0) scale(1); }
.hx-viz-tip b { display: block; font-size: 12.5px; font-weight: 800; color: #c3b6ff; margin-bottom: 2px; letter-spacing: .01em; }
.hx-viz-tip span { display: block; color: #9aa3b2; font-family: ui-monospace, Menlo, monospace; font-size: 11px; }

/* 호버 이펙트 — 막대·점·세그먼트 글로우/스케일(전 차트 공통) */
.cv-chart [data-tip], .cv-chart rect, .cv-chart circle, .cv-stack-seg, .cv-cap-seg, .cv-pill-seg { transition: filter .14s, opacity .14s, transform .14s; }
.cv-chart rect.hx-hovering, .cv-chart circle.hx-hovering { filter: drop-shadow(0 0 6px rgba(30, 240, 208, .8)) brightness(1.18); }
.cv-stack-seg.hx-hovering, .cv-cap-seg.hx-hovering, .cv-pill-seg.hx-hovering { filter: brightness(1.2) saturate(1.15); transform: translateY(-1px); }
.cv-hypno-bar.hx-hovering, [data-tip].hx-hovering { filter: brightness(1.15); }
/* 커서 힌트: 툴팁 있는 요소 */
.cv-chart [data-tip], .cv-chart rect[data-tip], .cv-chart circle[data-tip], .cv-stack-seg[data-tip] { cursor: crosshair; }

/* ═══ 카드 인터랙티브 오버레이 (미니 추세차트 + 통계) ═══ */
.hx-viz-ov { position: fixed; z-index: 1250; pointer-events: none; width: 250px;
  padding: 12px 13px 10px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(18,20,28,.99), rgba(12,14,20,.99));
  border: 1px solid rgba(124,92,255,.42); box-shadow: 0 18px 46px rgba(0,0,0,.6), 0 0 0 1px rgba(30,240,208,.06);
  opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .14s, transform .14s; }
.hx-viz-ov.on { opacity: 1; transform: translateY(0) scale(1); }
.hx-ov-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.hx-ov-h b { font-size: 11px; font-weight: 800; color: #c3b6ff; letter-spacing: .02em; text-transform: uppercase; }
.hx-ov-cur { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-size: 19px; font-weight: 800; }
.hx-ov-cur i { font-style: normal; font-size: 10px; color: #8b95a7; margin-left: 2px; }
.hx-ov-tr { font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; }
.hx-ov-spark { display: block; width: 100%; height: auto; margin: 2px 0 6px; }
.hx-ov-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.hx-ov-stats span { font-size: 8.5px; color: #8b95a7; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.hx-ov-stats b { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; color: #eef2f7; }
.hx-ov-foot { margin-top: 7px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.09); font-size: 8.5px; color: #6b7280; text-align: center; }

/* ═══ 카드 호버 리프트/글로우 (전 생체 카드) ═══ */
.bento-card[data-metric] { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; position: relative; }
.bento-card[data-metric].hx-card-hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.4), 0 0 0 1px rgba(124,92,255,.35); border-color: rgba(124,92,255,.45) !important; cursor: pointer; z-index: 5; }

/* ═══ '추세' 어포던스 칩 (정지 상태 가시 단서) ═══ */
.hx-trend-chip { position: absolute; right: 9px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 8.5px; font-weight: 700; color: #9aa3b2; padding: 2px 7px 2px 6px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); opacity: .7; transition: opacity .16s, color .16s; pointer-events: none; }
.hx-trend-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--hxc, #7c5cff); box-shadow: 0 0 6px var(--hxc, #7c5cff); animation: hxTrendPulse 1.6s ease-in-out infinite; }
.bento-card[data-metric].hx-card-hover .hx-trend-chip { opacity: 1; color: #e9edf5; }
@keyframes hxTrendPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }

/* ═══ 센서 UX: 마이크로 인터랙션 + 로딩 스테이트 ═══ */
/* 센서 상태 칩(레이더 스윕) */
.hx-sensor-chip{position:fixed;left:18px;bottom:64px;z-index:950;display:none;align-items:center;gap:9px;
  padding:8px 13px 8px 9px;border-radius:999px;background:rgba(12,14,20,.92);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.42);backdrop-filter:blur(6px);transition:border-color .25s,box-shadow .25s}
.hx-sensor-chip.on{display:inline-flex}
.hx-sensor-chip.just{animation:hxChipIn .5s ease}
@keyframes hxChipIn{0%{transform:scale(.9);opacity:.4}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.hxs-radar{width:26px;height:26px;flex:none}
.hxs-radar svg{width:100%;height:100%}
.hxs-radar .hxs-ring,.hxs-radar .hxs-ring2{fill:none;stroke:currentColor;stroke-width:1;opacity:.28}
.hxs-radar .hxs-core{fill:currentColor}
.hxs-radar .hxs-sweep{transform-origin:18px 18px;animation:hxSweep 2.4s linear infinite}
.hxs-radar .hxs-sweep path{fill:currentColor;opacity:.5}
@keyframes hxSweep{to{transform:rotate(360deg)}}
.hxs-txt{display:flex;flex-direction:column;line-height:1.15}
.hxs-title{font-size:8.5px;font-weight:800;letter-spacing:.06em;color:#9aa3b2;text-transform:uppercase}
.hxs-sub{font-size:11px;font-weight:700}
.hxs-rx{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35;flex:none}
.hxs-rx.tick{animation:hxRx .6s ease}
@keyframes hxRx{0%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 currentColor}60%{transform:scale(1.9);opacity:.5}100%{transform:scale(1);opacity:.35;box-shadow:0 0 0 6px transparent}}
/* 상태별 색 */
.hx-sensor-chip[data-state="live"]{color:#1ef0d0;border-color:rgba(30,240,208,.5);box-shadow:0 8px 24px rgba(30,240,208,.18)}
.hx-sensor-chip[data-state="live"] .hxs-sub{color:#1ef0d0}
.hx-sensor-chip[data-state="measuring"]{color:#ffb020;border-color:rgba(255,176,32,.5)}
.hx-sensor-chip[data-state="measuring"] .hxs-sub{color:#ffcf7a}
.hx-sensor-chip[data-state="calibrating"]{color:#7c5cff;border-color:rgba(124,92,255,.5)}
.hx-sensor-chip[data-state="calibrating"] .hxs-sub{color:#c3b6ff}
.hx-sensor-chip[data-state="waiting"]{color:#9aa3b2}
.hx-sensor-chip[data-state="waiting"] .hxs-sub{color:#9aa3b2}

/* 측정/보정 중 로딩 셔머(카드 전면 스윕) */
.bento-card.hx-measuring::before,.bento-card.hx-calibrating::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);background-size:220% 100%;animation:hxShimmer 1.5s ease-in-out infinite;z-index:1}
@keyframes hxShimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}
.bento-card.hx-measuring #val-hr,.bento-card.hx-measuring #val-br{opacity:.5}
/* 측정 중 마이크로카피 */
.hx-ux-note{position:absolute;left:12px;bottom:9px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  font-size:9.5px;font-weight:700;color:#ffcf7a}
.hx-calibrating .hx-ux-note{color:#c3b6ff}
.hx-ux-dots{display:inline-flex;gap:3px}
.hx-ux-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:hxDots 1.1s infinite}
.hx-ux-dots i:nth-child(2){animation-delay:.15s}.hx-ux-dots i:nth-child(3){animation-delay:.3s}
@keyframes hxDots{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

/* 라이브 카드 표시(코너 펄스 점) */
.bento-card.hx-live::after{content:'';position:absolute;top:9px;right:9px;width:6px;height:6px;border-radius:50%;
  background:#1ef0d0;box-shadow:0 0 7px #1ef0d0;animation:hxLiveDot 1.6s ease-in-out infinite;z-index:2}
@keyframes hxLiveDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
.bento-card.hx-live.hx-measuring::after{background:#ffb020;box-shadow:0 0 7px #ffb020}

/* 값 변경 마이크로 플래시 */
.hx-flash{animation:hxFlash .7s ease}
@keyframes hxFlash{0%{color:#fff;text-shadow:0 0 12px rgba(30,240,208,.9);transform:scale(1.06)}100%{text-shadow:none;transform:scale(1)}}

/* 측정/보정 로딩 = 스피너 아이콘만(텍스트 제거) */
.hx-ux-note{gap:0}
.hx-ux-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(245,176,32,.28);border-top-color:#ffb020;
  display:inline-block;animation:hxUxSpin .7s linear infinite}
.hx-ux-note.calib .hx-ux-spin{border-color:rgba(124,92,255,.28);border-top-color:#7c5cff}
@keyframes hxUxSpin{to{transform:rotate(360deg)}}
/* 추세 칩 = 아이콘(맥동 점)만 · 원형 축소 */
.hx-trend-chip{padding:5px;gap:0;width:auto;min-width:0}
.hx-trend-chip i{margin:0}

/* ═══════════ 센서 UX 초고급 리파인(겹침 제거 + 프리미엄 라이브) ═══════════ */
/* 겹치던 코너 인디케이터 전부 제거 */
.hx-trend-chip{display:none!important}
.bento-card.hx-live::after{display:none!important}
.hx-ux-note{display:none!important}

@property --hxang{syntax:'<angle>';inherits:false;initial-value:0deg}
/* 라이브 카드 — 회전 그라디언트 테두리 글로우(콘텐츠 위에 안 겹침) + 은은한 브리딩 */
.bento-card.hx-live,.bento-card.hx-measuring,.bento-card.hx-calibrating{position:relative}
.bento-card.hx-live{box-shadow:0 0 0 1px rgba(30,240,208,.22),0 10px 30px -12px rgba(30,240,208,.35);animation:hxBreath 3.4s ease-in-out infinite}
.bento-card.hx-live::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:0;
  background:conic-gradient(from var(--hxang),transparent 0deg,rgba(30,240,208,.7) 40deg,rgba(124,92,255,.35) 70deg,transparent 110deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:hxSpinBorder 3.2s linear infinite;opacity:.95}
@keyframes hxSpinBorder{to{--hxang:360deg}}
@keyframes hxBreath{0%,100%{box-shadow:0 0 0 1px rgba(30,240,208,.18),0 10px 30px -14px rgba(30,240,208,.28)}50%{box-shadow:0 0 0 1px rgba(30,240,208,.34),0 12px 34px -10px rgba(30,240,208,.5)}}

/* 측정 중(HR/BR 보류) — 앰버 회전 테두리 + 스캔 스윕(살아있음·죽은 것 아님) */
.bento-card.hx-measuring{box-shadow:0 0 0 1px rgba(255,176,32,.24),0 10px 30px -12px rgba(255,176,32,.34);animation:none}
.bento-card.hx-measuring::before{background:conic-gradient(from var(--hxang),transparent 0deg,rgba(255,176,32,.75) 42deg,transparent 96deg);animation-duration:1.5s;
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* 스캔 스윕 오버레이(측정 중 = 능동 감지 표현) */
.bento-card.hx-measuring::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,transparent 42%,rgba(255,176,32,.14) 50%,transparent 58%);background-size:250% 100%;
  animation:hxScan 1.35s ease-in-out infinite;display:block}
@keyframes hxScan{0%{background-position:170% 0}100%{background-position:-70% 0}}

/* 보정 중 — 퍼플 고속 회전 */
.bento-card.hx-calibrating::before{background:conic-gradient(from var(--hxang),transparent 0deg,rgba(124,92,255,.8) 40deg,transparent 92deg);animation:hxSpinBorder .9s linear infinite;
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* 카드 콘텐츠는 테두리 위로 */
.bento-card.hx-live>*,.bento-card.hx-measuring>*,.bento-card.hx-calibrating>*{position:relative;z-index:1}

/* ═══ 회전 스핀 제거(로딩/랙처럼 보임) → 브리딩 글로우로 대체 ═══ */
.bento-card.hx-live::before,.bento-card.hx-measuring::before,.bento-card.hx-calibrating::before{display:none!important}
.bento-card.hx-live{animation:hxBreathLive 2.8s ease-in-out infinite}
@keyframes hxBreathLive{0%,100%{box-shadow:0 0 0 1px rgba(30,240,208,.16),0 8px 26px -15px rgba(30,240,208,.28)}50%{box-shadow:0 0 0 1.5px rgba(30,240,208,.40),0 12px 32px -10px rgba(30,240,208,.55)}}
.bento-card.hx-measuring{animation:hxBreathMeas 2.4s ease-in-out infinite}
@keyframes hxBreathMeas{0%,100%{box-shadow:0 0 0 1px rgba(255,176,32,.18),0 8px 26px -15px rgba(255,176,32,.28)}50%{box-shadow:0 0 0 1.5px rgba(255,176,32,.42),0 12px 32px -10px rgba(255,176,32,.55)}}
.bento-card.hx-calibrating{animation:hxBreathCal 1.8s ease-in-out infinite}
@keyframes hxBreathCal{0%,100%{box-shadow:0 0 0 1px rgba(124,92,255,.2)}50%{box-shadow:0 0 0 1.5px rgba(124,92,255,.5),0 10px 28px -12px rgba(124,92,255,.5)}}
/* 측정 스캔은 아주 은은하게 유지(능동 감지 느낌) */
.bento-card.hx-measuring::after{opacity:.5}

/* AI 모니터 대시보드 상시 마운트(bento 위) */
.hxai-dash-mount{margin:0 16px 14px}
.hxai-dash-mount[hidden]{display:none}

/* ═══ 블루/글로우 전면 제거(사용자 요청) — 과한 발광 제거, 절제된 헬릭스 DNA ═══ */
.bento-card.hx-live,.bento-card.hx-measuring,.bento-card.hx-calibrating{animation:none!important;box-shadow:none!important;transform:none!important}
.bento-card.hx-live::before,.bento-card.hx-live::after,
.bento-card.hx-measuring::before,.bento-card.hx-measuring::after,
.bento-card.hx-calibrating::before,.bento-card.hx-calibrating::after{display:none!important;content:none!important;animation:none!important;background:none!important}
/* 값 변경 플래시: 글로우(text-shadow) 제거, 아주 짧은 스케일만 */
.hx-flash{animation:hxFlashLite .45s ease!important}
@keyframes hxFlashLite{0%{transform:scale(1.04)}100%{transform:scale(1)}}
/* 카드 호버 리프트도 글로우 없이 미세하게 */
.bento-card[data-metric].hx-card-hover{box-shadow:none!important;border-color:rgba(255,255,255,.14)!important;transform:none!important}
/* 오버레이 툴팁 글로우 최소화(테두리만) */
.hx-viz-ov{box-shadow:0 12px 34px rgba(0,0,0,.5)!important}

/* ═══ 측정 중 '감지 스캔' — 중립 화이트 라인(블루 글로우 아님·살아있음) ═══ */
.bento-card.hx-measuring{overflow:hidden}
.bento-card.hx-measuring::after{display:block!important;content:''!important;
  position:absolute;top:0;bottom:0;left:-3%;width:1.5px;z-index:2;pointer-events:none;background:none;
  background-image:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0))!important;
  animation:hxScanLine 1.5s linear infinite!important}
@keyframes hxScanLine{0%{left:-3%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:103%;opacity:0}}

/* ═══ 실시간 카메라 인터페이스(히어로) — 헬릭스 DNA 다크·절제 ═══ */
.hx-cam-ov{position:absolute;inset:0;z-index:6;display:none;border-radius:inherit;overflow:hidden;background:#05070a}
.hx-cam-ov.on{display:block}
.hx-cam-video,.hx-cam-ip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#05070a}
.hx-cam-badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;background:rgba(5,7,10,.6);backdrop-filter:blur(4px);
  font-size:10.5px;font-weight:700;color:#e9eef6;letter-spacing:.02em}
.hx-cam-dot{width:7px;height:7px;border-radius:50%;background:#ff4d4f;animation:hxCamRec 1.4s ease-in-out infinite}
@keyframes hxCamRec{0%,100%{opacity:1}50%{opacity:.35}}
.hx-cam-bar{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hx-cam-sel{height:30px;max-width:150px;border-radius:8px;background:rgba(10,14,20,.85);border:1px solid rgba(255,255,255,.14);
  color:#e9eef6;font-size:11px;padding:0 8px}
.hx-cam-btn{height:30px;padding:0 11px;border-radius:8px;border:1px solid rgba(255,255,255,.14);
  background:rgba(10,14,20,.8);color:#e9eef6;font-size:11px;font-weight:700;cursor:pointer;transition:.12s}
.hx-cam-btn:hover{border-color:var(--hx-accent,#7c5cff);color:#fff}
.hx-cam-btn.talk{margin-left:auto;background:#1f7a4d;border-color:transparent}
.hx-cam-btn.talk:hover{background:#26a565}
.hx-cam-btn.stop{background:rgba(120,20,24,.55);border-color:transparent}
.hero-snap-btn.hx-cam-toggle{background:linear-gradient(100deg,rgba(124,92,255,.25),rgba(255,255,255,.05));border-color:rgba(124,92,255,.4)}

/* ═══ 심박 ECG 파형(살아있는 펄스) ═══ */
.hr-ecg-wrap{margin:7px 0 5px;height:52px;overflow:hidden;border-radius:9px;
  background:linear-gradient(180deg,rgba(255,107,109,.05),rgba(255,107,109,.02));border:1px solid rgba(255,107,109,.1)}
.cv-ecg{display:block;width:100%;height:100%}
.cv-ecg-scroll{animation-name:cvEcgScroll;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}
@keyframes cvEcgScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hr-ecg-wrap.live{border-color:rgba(255,107,109,.22)}

/* ═══ 카메라 오버레이 z-index 상향(방 이미지 위로) + 움직임·심박 상태 pill 제거 ═══ */
.hx-cam-ov{z-index:30 !important}
.hx-cam-bar{z-index:32}
.hx-cam-badge{z-index:32}
/* 움직임·심박 카드의 정상/주의 pill 제거(사용자 요청) */
#card-movement #pill-movement{display:none !important}
#card-hr .hr-status-bar{display:none !important}
/* 카메라 권한 안내(중앙, 크게) */
.hx-cam-perm{position:absolute;inset:0;z-index:33;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(5,7,10,.86);color:#e9eef6;text-align:center;padding:20px}
.hx-cam-perm b{font-size:15px;font-weight:800}
.hx-cam-perm span{font-size:12px;color:#9aa3b2;max-width:260px;line-height:1.5}
.hx-cam-perm button{margin-top:4px;padding:10px 20px;border-radius:10px;border:0;background:#7c5cff;color:#fff;font-weight:800;font-size:13px;cursor:pointer}

/* 정정: 움직임 캡슐은 복원, 제거 대상은 '이전 심박 파형'(HR range 차트) — ECG로 대체됨 */
#card-hr .hr-range-wrap, #hr-range-chart{display:none !important}

/* ═══ 카메라 소스 선택 허브 팝업 ═══ */
.hx-cam-hub{position:absolute;inset:0;z-index:34;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(5,7,10,.9);backdrop-filter:blur(3px);padding:20px}
.hx-cam-hub[hidden]{display:none}
.hx-cam-hub-h{font-size:15px;font-weight:800;color:#e9eef6}
.hx-cam-hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(360px,92%)}
.hx-cam-src-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#e9eef6;cursor:pointer;transition:.14s}
.hx-cam-src-btn:hover{border-color:#7c5cff;background:rgba(124,92,255,.14);transform:translateY(-2px)}
.hx-cam-src-btn i{font-size:26px;font-style:normal}
.hx-cam-src-btn b{font-size:13px;font-weight:700}
.hx-cam-src-btn span{font-size:9.5px;color:#9aa3b2}
.hx-cam-hub-close{margin-top:2px;padding:8px 20px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#9aa3b2;font-size:12px;cursor:pointer}
.hx-cam-hub .hx-cam-sel{width:min(360px,92%);height:34px}

/* 카메라 토글 버튼(독립 스타일 — hero-snap-btn 미상속) */
.hx-cam-toggle{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px;border-radius:8px;
  border:1px solid rgba(124,92,255,.45);background:linear-gradient(100deg,rgba(124,92,255,.28),rgba(255,255,255,.05));
  color:#e9eef6;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;line-height:1}
.hx-cam-toggle:hover{border-color:#7c5cff;filter:brightness(1.12)}

/* ═══ 카메라를 고정 모달로(항상 보임·무반응 방지) + 호흡 서브텍스트 제거 ═══ */
/* FIX 20260806: 이전 규칙이 top/left/right/bottom 설정 직후 inset:auto+width/height:auto로
   오버레이를 2px로 쪼그라뜨려 화면 밖(하단)에 박아 '카메라 무반응'을 유발함.
   inset 단축속성 하나로 4방향을 !important 지정해 풀스크린 모달로 고정. */
.hx-cam-ov{position:fixed !important;inset:4vh 4vw !important;width:auto !important;height:auto !important;
  z-index:3000 !important;border-radius:16px;box-shadow:0 40px 120px rgba(0,0,0,.8);border:1px solid rgba(124,92,255,.35)}
.hx-cam-ov.on{display:block !important}
#br-r0{display:none !important}

/* ═══ 20260806: 재실·움직임·호흡·심박 4카드 수직 리듬 균형 정렬 ═══
   측정: 파형 top이 103/133/143/150으로 최대 47px 어긋나고 심박 푸터만 35px 위로 떴음.
   → 파형대(58px 동일)+3열 푸터(48px 동일)를 flex-order로 카드 하단에 앵커링해
     4카드가 동일한 세로 위치·높이로 정렬되도록 통일. */
.vital-bundle .bento-card{display:flex;flex-direction:column}
.vital-bundle .card-h,.vital-bundle .move-card-head{min-height:32px;flex:0 0 auto}
.vital-bundle .metric{flex:0 0 auto;margin-top:6px}
.vital-bundle .br-meta{flex:0 0 auto}
/* 파형대: 3카드 동일 높이 + 하단 앵커(margin-top:auto)로 top 자동 정렬 */
.vital-bundle #card-br .br-wave,
.vital-bundle #card-hr .hr-ecg-wrap,
.vital-bundle #card-movement .move-caps-wrap{
  order:98;flex:0 0 auto;height:58px !important;width:100%;overflow:hidden;
  margin:auto 0 12px !important}
/* 3열 푸터: 항상 맨 아래·동일 높이로 하단 정렬 */
.vital-bundle .br-footer,
.vital-bundle .move-footer{order:99;flex:0 0 auto;height:48px;margin:0 !important;
  display:flex;align-items:flex-end;justify-content:space-between}
/* 재실: 파형·푸터가 없으므로 링+상태를 세로 중앙 배치(빈 하단 방지, 균형감) */
#card-presence{display:flex;flex-direction:column}
#card-presence .card-h{flex:0 0 auto}
#card-presence .vital-row{flex:1 1 auto;display:flex;align-items:center;margin:0 !important}
/* 텍스트 크기 통일: 움직임 카드 제목 14→12, 값 28→32 로 4카드 동일화 */
.vital-bundle .move-card-head .t{font-size:12px !important}
.vital-bundle #card-movement .metric{font-size:32px !important}

/* ═══ 측정중(재실 중 움직임으로 HR/BR 순간 보류) 라이브 상태 ═══
   죽은 "—" 대신 '측정중' + 파형 스캔 스윕으로 센서가 살아있음을 표시(R0-2: 실측 아님 명시). */
@keyframes hxScanSweep{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes hxScanPulse{0%,100%{opacity:.4}50%{opacity:.9}}
#card-hr.measuring .hr-metric,#card-br.measuring .br-metric{font-size:17px !important;font-weight:700;color:#9fb0c4}
#card-hr.measuring .metric-unit,#card-br.measuring .metric-unit{display:none}
#hr-ecg.scanning,#spark-br.scanning{animation:hxScanPulse 1.6s ease-in-out infinite}
#hr-ecg.scanning{position:relative;overflow:hidden}
#hr-ecg.scanning::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,107,109,.30) 50%,transparent 58%);
  background-size:230% 100%;animation:hxScanSweep 1.8s linear infinite}

/* ═══ 카드별 담당 AI (HxCardAI) — 아바타 + 팝오버 ═══ */
@keyframes hxCaiPulse{0%,100%{box-shadow:0 0 0 0 var(--cai)}50%{box-shadow:0 0 10px 1px var(--cai)}}
.hx-cardai{--cai:#7c5cff;position:relative;width:22px;height:22px;flex:0 0 auto;margin-right:6px;padding:0;
  border-radius:50%;border:1px solid color-mix(in srgb,var(--cai) 55%,transparent);
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--cai) 32%,transparent),rgba(8,11,16,.9));
  color:#eaf2ff;font-size:12px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .12s ease,box-shadow .2s ease;vertical-align:middle}
.hx-cardai:hover{transform:scale(1.12);box-shadow:0 0 10px 0 var(--cai)}
.hx-cardai .hx-cardai-em{filter:saturate(1.1);pointer-events:none}
.hx-cardai .hx-cardai-dot{position:absolute;right:-1px;bottom:-1px;width:7px;height:7px;border-radius:50%;
  background:#5b6b7f;border:1.5px solid #0a0e14;transition:background .2s}
.hx-cardai[data-lv="ok"] .hx-cardai-dot{background:#3ddc84}
.hx-cardai[data-lv="warn"]{--cai:#ffb020}
.hx-cardai[data-lv="warn"] .hx-cardai-dot{background:#ffb020}
.hx-cardai[data-lv="measuring"] .hx-cardai-dot{background:var(--cai);animation:hxCaiPulse 1.4s ease-in-out infinite}
.hx-cardai[data-lv="idle"]{opacity:.62}
/* 팝오버 */
.hx-cardai-pop{--cai:#7c5cff;position:fixed;z-index:3200;width:268px;padding:12px 13px 11px;
  background:linear-gradient(180deg,rgba(16,20,28,.98),rgba(10,13,19,.98));
  border:1px solid color-mix(in srgb,var(--cai) 45%,transparent);border-radius:14px;
  box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset;color:#e9eef6;
  backdrop-filter:blur(8px)}
.hx-cardai-pop-h{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.hx-cardai-pop-em{font-size:16px}
.hx-cardai-pop-name{font-weight:800;font-size:13.5px;letter-spacing:-.2px;color:color-mix(in srgb,var(--cai) 70%,#fff)}
.hx-cardai-pop-x{margin-left:auto;width:22px;height:22px;border-radius:7px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);color:#cfd8e6;font-size:15px;line-height:1;cursor:pointer}
.hx-cardai-pop-x:hover{background:rgba(220,60,60,.5);border-color:transparent}
.hx-cardai-pop-role{font-size:10.5px;color:#8b97a8;margin-bottom:8px}
.hx-cardai-pop-body{font-size:12.5px;line-height:1.55;color:#dfe7f2;
  border-left:2px solid var(--cai);padding-left:9px;margin-bottom:10px;min-height:34px}
.hx-cardai-pop[data-lv="warn"]{--cai:#ffb020}
.hx-cardai-pop-ft{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hx-cardai-more{height:26px;padding:0 11px;border-radius:8px;font-size:11.5px;font-weight:700;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--cai) 50%,transparent);
  background:color-mix(in srgb,var(--cai) 16%,transparent);color:#eaf2ff}
.hx-cardai-more:hover{filter:brightness(1.15)}
.hx-cardai-more:disabled{opacity:.6;cursor:default}
.hx-cardai-src{font-size:9.5px;color:#6b788a}

/* ═══ L3 총괄 케어 오케스트레이터 스트립 (HxCareOrch / CNMA) ═══ */
#hx-orch-strip{--oc:#1ef0d0;margin:0 0 12px;border-radius:14px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--oc) 34%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--oc) 8%,rgba(12,16,22,.96)),rgba(10,13,19,.96));
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset}
#hx-orch-strip[data-lv="warn"]{--oc:#ffb020}
#hx-orch-strip[data-lv="crit"]{--oc:#ff5470}
#hx-orch-strip[data-lv="info"]{--oc:#7c5cff}
.hx-orch-head{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;cursor:pointer;
  background:transparent;border:0;color:#e9eef6;text-align:left;font:inherit}
.hx-orch-ic{width:26px;height:26px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--oc) 32%,transparent),rgba(8,11,16,.9));
  border:1px solid color-mix(in srgb,var(--oc) 55%,transparent);font-size:15px}
.hx-orch-name{font-weight:800;font-size:13px;letter-spacing:-.2px;white-space:nowrap;
  color:color-mix(in srgb,var(--oc) 72%,#fff)}
.hx-orch-pill{flex:0 0 auto;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--oc) 20%,transparent);color:color-mix(in srgb,var(--oc) 78%,#fff);
  border:1px solid color-mix(in srgb,var(--oc) 45%,transparent)}
.hx-orch-line{flex:1 1 auto;min-width:0;font-size:12px;color:#c3cdda;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-orch-caret{flex:0 0 auto;color:#8b97a8;transition:transform .18s}
#hx-orch-strip.open .hx-orch-caret{transform:rotate(180deg)}
.hx-orch-body{padding:0 14px 13px 50px;display:flex;flex-direction:column;gap:9px}
.hx-orch-narr{font-size:12.5px;line-height:1.6;color:#e3ebf5;border-left:2px solid var(--oc);padding-left:10px}
.hx-orch-reasons{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px}
.hx-orch-reasons li{font-size:11.5px;color:#a9b4c4;line-height:1.45}
.hx-orch-rag{font-size:10.5px;color:#8b97a8;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hx-orch-rag b{color:#c3cdda;font-size:10px;margin-right:2px}
.hx-orch-ragchip{padding:2px 8px;border-radius:999px;background:rgba(124,92,255,.14);
  border:1px solid rgba(124,92,255,.3);color:#cdbcff;font-weight:700}
.hx-orch-ragchip[data-lv="crit"]{background:rgba(255,84,112,.14);border-color:rgba(255,84,112,.35);color:#ff9bb0}
.hx-orch-ragchip[data-lv="warn"]{background:rgba(255,176,32,.14);border-color:rgba(255,176,32,.35);color:#ffcf7a}
.hx-orch-ragchip[data-lv="kb"]{background:rgba(30,240,208,.13);border-color:rgba(30,240,208,.34);color:#7ef0dc}
.hx-orch-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.hx-orch-refresh{height:26px;padding:0 12px;border-radius:8px;font-size:11.5px;font-weight:700;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--oc) 50%,transparent);background:color-mix(in srgb,var(--oc) 16%,transparent);color:#eaf2ff}
.hx-orch-refresh:hover{filter:brightness(1.15)}
.hx-orch-src{font-size:9.5px;color:#6b788a}
/* 서버 심층 트리아지 블록 */
.hx-orch-deep{margin-top:4px;padding-top:9px;border-top:1px dashed rgba(255,255,255,.1);display:flex;flex-direction:column;gap:7px}
.hx-orch-deep-h{font-size:11.5px;font-weight:800;color:color-mix(in srgb,var(--oc) 72%,#fff)}
.hx-orch-deep-mode{font-size:9.5px;font-weight:600;color:#8b97a8;margin-left:4px}
.hx-orch-rank{display:flex;flex-wrap:wrap;gap:6px}
.hx-orch-rankchip{font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);color:#c3cdda}
.hx-orch-rankchip b{color:#eaf2ff;font-weight:700;margin-right:3px}
.hx-orch-rankchip[data-lv="warn"]{background:rgba(255,176,32,.14);border-color:rgba(255,176,32,.34);color:#ffcf7a}
.hx-orch-rankchip[data-lv="crit"]{background:rgba(255,84,112,.16);border-color:rgba(255,84,112,.4);color:#ff9bb0}
.hx-orch-deep-sum{font-size:12px;line-height:1.55;color:#dfe7f2;background:rgba(255,255,255,.03);
  border-radius:8px;padding:8px 10px}

/* 카메라 큰 닫기 버튼(갇힘 방지) */
.hx-cam-x{position:absolute;top:12px;right:12px;z-index:36;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(5,7,10,.7);color:#fff;font-size:18px;font-weight:800;cursor:pointer;line-height:1}
.hx-cam-x:hover{background:rgba(200,40,40,.6);border-color:transparent}
.acct-hint{display:block;margin-top:5px;font-size:11px;color:rgba(255,255,255,.5);line-height:1.4}
.acct-opt{font-style:normal;font-size:11px;color:rgba(255,255,255,.45);font-weight:500;margin-left:4px}

/* 전용 입구에서는 모드 전환 탭을 감춘다 — 그 화면은 한 가지 용도만 한다 */
html[data-cv-locked] #audience-switch { display: none !important; }

/* ── 병실 카메라 (HxRoomCam) — 환자 카드 상세 안 ────────────────────── */
.pdash-roomcam { margin: 0 0 14px; }
.hxrc { border: 1px solid rgba(120,160,220,.24); border-radius: 14px;
        background: linear-gradient(180deg, rgba(16,24,38,.9), rgba(10,16,26,.9)); overflow: hidden; }
.hxrc-head { display: flex; align-items: center; gap: 10px; padding: 10px 13px;
             border-bottom: 1px solid rgba(120,160,220,.18); }
.hxrc-head h4 { margin: 0; font-size: 13px; font-weight: 800; }
.hxrc-kind { font-size: 11px; color: #8fd6ff; font-weight: 700;
             background: rgba(90,170,255,.12); border-radius: 999px; padding: 3px 9px; }
.hxrc-head .btn-ghost { margin-left: auto; }
.hxrc-stage { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.hxrc-video, .hxrc-img { position: absolute; inset: 0; width: 100%; height: 100%;
                         object-fit: contain; background: #000; }
.hxrc-note { position: absolute; inset: 0; display: flex; flex-direction: column;
             align-items: center; justify-content: center; gap: 6px; text-align: center;
             padding: 16px; background: rgba(6,10,18,.86); }
.hxrc-note b { font-size: 13px; }
.hxrc-note span { font-size: 11px; color: #9fb2c8; max-width: 46ch; line-height: 1.5; }
.hxrc-err b { color: #ff9db0; }
.hxrc-idle b { color: #8fd6ff; }
.hxrc-panel { padding: 12px 13px; border-top: 1px solid rgba(120,160,220,.18); }
.hxrc-form { display: grid; gap: 9px; }
.hxrc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; }
.hxrc-actions { display: flex; gap: 8px; margin-top: 4px; }
.hxrc-foot { padding: 8px 13px; margin: 0; font-size: 10px; }
.hxrc-share { font-size: 10.5px; color: #9fb2c8; font-weight: 700;
              border: 1px solid rgba(120,160,220,.28); border-radius: 999px; padding: 2px 8px; }

/* ── 병실 보조 패널: 비상음향 · 공기질 ────────────────────────────── */
.pdash-roompanels { margin: 0 0 14px; }
.hxrp-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.hxrp { border: 1px solid rgba(120,160,220,.24); border-radius: 14px; padding: 11px 13px;
        background: linear-gradient(180deg, rgba(16,24,38,.9), rgba(10,16,26,.9)); }
.hxrp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.hxrp-head h4 { margin: 0; font-size: 12.5px; font-weight: 800; }
.hxrp-head .btn-ghost { margin-left: auto; }
.hxrp-badge { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 2px 8px;
              border: 1px solid rgba(120,160,220,.3); color: #9fb2c8; }
.hxrp-badge.live { color: #7ef0c0; border-color: rgba(60,220,170,.45); }
.hxrp-badge.ok   { color: #8fd6ff; border-color: rgba(90,170,255,.4); }
.hxrp-badge.warn { color: #ffd28f; border-color: rgba(255,190,90,.45); }
.hxrp-badge.crit { color: #ff9db0; border-color: rgba(255,110,140,.5); }
.hxrp-badge.demo { color: #d9b98f; border-color: rgba(220,180,110,.4); }
.hxrp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 7px; }
.hxrp-cell { background: rgba(255,255,255,.04); border-radius: 9px; padding: 7px 9px; }
.hxrp-cell .k { display: block; font-size: 9.5px; color: #8ea3c4; font-weight: 700; }
.hxrp-cell strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.hxrp-cell strong i { font-size: 9.5px; font-style: normal; color: #8ea3c4; margin-left: 2px; }
.hxrp-cell.t-warn strong { color: #ffd28f; }
.hxrp-cell.t-crit strong { color: #ff9db0; }
.hxrp-empty, .hxrp-foot { margin: 8px 0 0; font-size: 10.5px; color: #8ea3c4; line-height: 1.5; }

/* ── 장치 ↔ 방 매핑 빌더 (HxCamMap) ──────────────────────────────── */
.hxcm-ov { position: fixed; inset: 0; z-index: 100064; background: rgba(2,6,14,.86);
           display: flex; align-items: center; justify-content: center; padding: 18px; }
.hxcm-box { position: relative; background: linear-gradient(180deg,#0f1826,#0a1018);
            border: 1px solid rgba(120,160,220,.28); border-radius: 16px;
            width: min(1080px, 96vw); max-height: 92vh; overflow: auto; padding: 18px 20px; }
.hxcm-x { position: absolute; top: 12px; right: 14px; background: none; border: 0;
          color: #7b8ba3; font-size: 18px; cursor: pointer; }
.hxcm-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hxcm-head h3 { margin: 0; font-size: 15px; font-weight: 800; }
.hxcm-actions { margin-left: auto; display: flex; gap: 7px; }
.hxcm-err { background: rgba(255,110,140,.1); border: 1px solid rgba(255,110,140,.34);
            border-radius: 10px; padding: 9px 12px; font-size: 11px; color: #ffb9c6; margin-bottom: 11px; }
.hxcm-scroll { overflow-x: auto; }
.hxcm-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 720px; }
.hxcm-table th { text-align: left; font-size: 10.5px; color: #8ea3c4; font-weight: 800;
                 padding: 6px 8px; border-bottom: 1px solid rgba(120,160,220,.22); white-space: nowrap; }
.hxcm-table td { padding: 7px 8px; border-bottom: 1px solid rgba(120,160,220,.12); vertical-align: top; }
.hxcm-room strong { display: block; font-size: 12.5px; }
.hxcm-room small, .hxcm-table td small { display: block; font-size: 9.5px; color: #8ea3c4; margin-top: 2px; }
.hxcm-na span { font-size: 10px; color: #7d8ca0; }
.hxcm-why { font-size: 9.5px; color: #8ea3c4; }
.hxcm-why.ok { color: #7ef0c0; }
.hxcm-empty, .hxcm-foot { font-size: 11px; color: #8ea3c4; line-height: 1.6; }
.hxact-pane { margin-top: 12px; border: 1px solid rgba(120,160,220,.28); border-radius: 12px;
              padding: 12px 14px; background: rgba(255,255,255,.03); }
.hxact-pane h4 { margin: 0 0 9px; font-size: 12.5px; font-weight: 800; }
.hxact-form { display: grid; gap: 8px; }
.hxact-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; }
.hxact-result { margin: 8px 0 0; }
.acct-serial-list li { display: flex; align-items: center; gap: 8px; }
.acct-serial-list li span { margin-left: auto; }
.acct-serial-list .acct-icon-btn { flex: 0 0 auto; }
.acct-serial-add { display: flex; gap: 7px; margin-top: 9px; }
.acct-serial-add .tool-input { flex: 1; min-width: 0; }
.acct-bid-row { display: flex; gap: 7px; }
.acct-bid-row .tool-input { flex: 1; min-width: 0; }
.acct-target { display: flex; align-items: center; gap: 9px; padding: 9px 11px;
               background: rgba(255,255,255,.04); border-radius: 10px; }
.acct-target .k { font-size: 10.5px; color: #8ea3c4; font-weight: 700; }
.acct-target strong { font-size: 13px; }
.acct-target .btn-ghost { margin-left: auto; }
/* [hidden] 이 display:flex 에 밀려 무시되던 문제 — 폼 라벨은 명시적으로 숨긴다
   (실측: 「새 우리 집 이름」 칸이 hidden 인데도 화면에 보였다) */
.acct-form label[hidden], .hxrc-form label[hidden], .hxact-form label[hidden] { display: none !important; }

/* ── XK 양식 시설 선택 드롭다운 ─────────────────────────────────── */
.shell-fac-btn { background: rgba(255,255,255,.06); border: 1px solid rgba(120,160,220,.28);
                 border-radius: 10px; padding: 7px 12px; color: #eaf1fb; font: 700 12px inherit;
                 cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; }
.fac-pop-wrap { position: fixed; z-index: 100080; }
.fac-pop { width: 330px; max-height: 70vh; overflow: auto;
           background: linear-gradient(180deg,#0f1826,#0a1018);
           border: 1px solid rgba(120,160,220,.3); border-radius: 14px;
           box-shadow: 0 16px 44px rgba(0,0,0,.55); }
.fac-pop-head { padding: 11px 14px; font-size: 12.5px; font-weight: 800;
                border-bottom: 1px solid rgba(120,160,220,.18); }
.fac-pop-all { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 12px;
               border-bottom: 1px solid rgba(120,160,220,.14); cursor: pointer; }
.fac-pop-search { padding: 9px 12px; }
.fac-pop-list { padding: 2px 0 6px; }
.fac-pop-item { display: flex; align-items: center; gap: 6px; padding: 7px 12px; }
.fac-pop-item.on { background: rgba(90,170,255,.12); }
.fac-pop-item label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.fac-pop-item .nm { font-size: 12.5px; font-weight: 700; }
.fac-pop-item small { display: block; font-size: 10px; color: #8ea3c4;
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.fac-pop-empty { padding: 14px; font-size: 11.5px; color: #8ea3c4; text-align: center; }
.fac-pop-add { width: 100%; background: none; border: 0; border-top: 1px solid rgba(120,160,220,.18);
               padding: 11px; color: #8fd6ff; font: 700 12px inherit; cursor: pointer; text-align: left;
               padding-left: 14px; }


/* ── 센서허브 (HxSensorHub) ────────────────────────────────── */
.sh-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.sh-kpi{background:var(--card,#141417);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:14px;padding:11px 16px;min-width:110px}
.sh-kpi .v{font-family:var(--mono,monospace);font-size:22px;font-weight:600;line-height:1}
.sh-kpi .l{color:var(--mut2,#5f5f6a);font-size:11px;font-weight:700;margin-top:5px}
.sh-h{font-size:15px;font-weight:900;margin:24px 0 10px}
.sh-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.sh-card{background:var(--card,#141417);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:15px;padding:14px 15px;transition:border-color .18s,transform .18s}
.sh-card:hover{transform:translateY(-2px)}
.sh-card.live{border-color:rgba(47,230,168,.42);box-shadow:0 0 0 1px rgba(47,230,168,.1)}
.sh-card.warn{border-color:rgba(245,197,66,.3)}
.sh-card.off{opacity:.72}
.sh-chd{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;margin-bottom:8px}
.sh-nm{font-weight:900;font-size:14.5px;line-height:1.3}
.sh-vd{color:var(--mut2,#5f5f6a);font-size:10.5px;font-weight:700;margin-top:2px}
.sh-pill{font-family:var(--mono,monospace);font-size:10px;font-weight:600;padding:3px 8px;border-radius:99px;white-space:nowrap;border:1px solid transparent;display:inline-block}
.sh-pill.live{background:rgba(47,230,168,.14);color:#2fe6a8;border-color:rgba(47,230,168,.35)}
.sh-pill.wait{background:rgba(245,197,66,.13);color:#f5c542;border-color:rgba(245,197,66,.3)}
.sh-pill.info{background:rgba(55,195,245,.12);color:#37c3f5;border-color:rgba(55,195,245,.28)}
.sh-pill.off{background:rgba(255,255,255,.06);color:var(--mut,#8b8b96)}
.sh-meta{font-family:var(--mono,monospace);font-size:10.5px;color:var(--mut,#8b8b96);margin:6px 0;line-height:1.6;word-break:break-word}
.sh-meta.dim{color:var(--mut2,#5f5f6a)}
.sh-sn{font-family:var(--mono,monospace);font-size:10.5px;color:#2fe6a8;margin-top:6px}
.sh-caps{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.sh-cap{font-size:10px;color:var(--mut,#8b8b96);background:rgba(255,255,255,.06);border-radius:6px;padding:2px 7px}
.sh-note{margin-top:7px;color:var(--mut2,#5f5f6a);font-size:10.5px;line-height:1.55}
.sh-howto{margin-top:9px;padding:7px 10px;border-radius:9px;background:rgba(245,197,66,.07);border:1px solid rgba(245,197,66,.18);color:#f5c542;font-size:11px;line-height:1.55}
.sh-panel{background:var(--card,#141417);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:16px;padding:16px 17px}
.sh-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.sh-row label{display:block;font-size:11px;color:var(--mut,#8b8b96);font-weight:700;margin-bottom:4px}
.sh-row input,.sh-row select{background:var(--bg2,#08080b);border:1px solid var(--line,rgba(255,255,255,.08));color:var(--txt,#f4f4f7);border-radius:10px;padding:8px 11px;font-family:var(--mono,monospace);font-size:12px;min-width:150px}
.sh-hint{margin-top:11px;font-size:11.5px;color:var(--mut,#8b8b96);line-height:1.6}
.sh-msg{margin-top:10px;padding:9px 12px;border-radius:9px;font-size:12px;line-height:1.6;display:none}
.sh-msg.ok{display:block;background:rgba(47,230,168,.1);border:1px solid rgba(47,230,168,.3);color:#2fe6a8}
.sh-msg.err{display:block;background:rgba(240,85,95,.1);border:1px solid rgba(240,85,95,.3);color:#f0555f}
.sh-tbl{width:100%;border-collapse:collapse;font-size:12px}
.sh-tbl th{text-align:left;color:var(--mut2,#5f5f6a);font-size:10.5px;font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.sh-tbl td{padding:8px;border-bottom:1px solid rgba(255,255,255,.045)}
.sh-tbl td.m{font-family:var(--mono,monospace);font-size:11px}
.sh-tbl .dim{color:var(--mut2,#5f5f6a)}
.sh-del{background:transparent;color:#f0555f;border:1px solid rgba(240,85,95,.35);border-radius:8px;padding:4px 10px;font-size:11px;cursor:pointer}
.sh-empty{color:var(--mut2,#5f5f6a);font-size:12px;padding:14px 2px;line-height:1.7}
@media(max-width:640px){.sh-row>div{flex:1 1 100%}.sh-row input,.sh-row select{width:100%;min-width:0}}


/* ── AS-613 동작 모드 패널 (HxAs613Modes) ─────────────────── */
.am-modal{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:3vh 3vw}
.am-modal[hidden]{display:none!important}
.am-scrim{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.am-panel{position:relative;background:var(--card,#141417);border:1px solid var(--line,rgba(255,255,255,.1));
  border-radius:20px;max-width:1080px;width:100%;max-height:94vh;overflow:auto;
  box-shadow:0 30px 90px rgba(0,0,0,.6)}
.am-body{padding:20px 22px 24px}
.am-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.am-head h3{margin:0 0 4px;font-size:19px;font-weight:900}
.am-head p{margin:0;color:var(--mut,#8b8b96);font-size:12.5px;line-height:1.6}
.am-x{background:rgba(255,255,255,.06);border:1px solid var(--line,rgba(255,255,255,.1));
  color:var(--txt,#f4f4f7);border-radius:10px;width:34px;height:34px;cursor:pointer;font-size:14px;flex:0 0 auto}
.am-warn{padding:9px 12px;border-radius:10px;background:rgba(245,197,66,.08);
  border:1px solid rgba(245,197,66,.22);color:#f5c542;font-size:11.5px;line-height:1.6;margin-bottom:14px}
.am-err{padding:9px 12px;border-radius:10px;background:rgba(240,85,95,.1);
  border:1px solid rgba(240,85,95,.3);color:#f0555f;font-size:12px;line-height:1.6;margin-bottom:12px}
.am-h{font-size:13px;font-weight:900;margin:20px 0 9px;display:flex;align-items:center;gap:8px}
.am-h em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--mut2,#5f5f6a);
  background:rgba(255,255,255,.05);border-radius:6px;padding:2px 7px}
.am-grid{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.am-card{background:var(--bg2,#08080b);border:1px solid var(--line,rgba(255,255,255,.08));
  border-radius:14px;padding:13px 14px;transition:border-color .18s,transform .18s}
.am-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18)}
.am-card.on{border-color:rgba(47,230,168,.5);box-shadow:0 0 0 1px rgba(47,230,168,.14)}
.am-card.lock{opacity:.86}
.am-chd{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;margin-bottom:8px}
.am-nm{font-weight:900;font-size:13.5px;line-height:1.35}
.am-en{color:var(--mut2,#5f5f6a);font-size:10px;margin-top:2px}
.am-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;white-space:nowrap;flex:0 0 auto}
.am-badge.on{background:rgba(47,230,168,.16);color:#2fe6a8;border:1px solid rgba(47,230,168,.35)}
.am-badge.lock{background:rgba(245,197,66,.12);color:#f5c542;border:1px solid rgba(245,197,66,.3)}
.am-badge.free{background:rgba(255,255,255,.06);color:var(--mut,#8b8b96)}
.am-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.am-tag{font-size:10px;color:var(--mut,#8b8b96);background:rgba(255,255,255,.055);border-radius:6px;padding:2.5px 7px}
.am-tag.ok{color:#2fe6a8;background:rgba(47,230,168,.1)}
.am-tag.warn{color:#ff6a3d;background:rgba(255,106,61,.11)}
.am-desc{font-size:11.5px;color:var(--mut,#8b8b96);line-height:1.65}
.am-gives{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.am-give{font-size:10px;color:#37c3f5;background:rgba(55,195,245,.1);border-radius:6px;padding:2px 7px}
.am-acc{margin-top:7px;font-size:10.5px;color:#2fe6a8}
.am-cav{margin-top:8px;font-size:10.5px;color:#f5c542;line-height:1.55;
  background:rgba(245,197,66,.06);border-radius:8px;padding:6px 9px}
.am-act{margin-top:11px}
.am-apply{width:100%;background:var(--accent,#37c3f5);color:#04202c;border:0;border-radius:9px;
  padding:8px 12px;font-weight:900;font-size:12px;cursor:pointer}
.am-apply:hover{filter:brightness(1.1)}
.am-card.lock .am-apply{background:rgba(245,197,66,.16);color:#f5c542;border:1px solid rgba(245,197,66,.3)}
.am-cur{display:block;text-align:center;font-size:11.5px;color:#2fe6a8;font-weight:700;padding:7px}
.am-opts{display:grid;gap:9px}
.am-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--bg2,#08080b);border:1px solid var(--line,rgba(255,255,255,.08));
  border-radius:12px;padding:11px 13px}
.am-onm{font-size:12.5px;font-weight:700}
.am-ont{font-size:10.5px;color:var(--mut2,#5f5f6a);margin-top:3px;line-height:1.5}
.am-obtn{background:rgba(255,255,255,.07);border:1px solid var(--line,rgba(255,255,255,.1));
  color:var(--txt,#f4f4f7);border-radius:8px;padding:6px 13px;font-size:11.5px;font-weight:700;cursor:pointer;flex:0 0 auto}
.am-codes{display:flex;flex-wrap:wrap;gap:6px}
.am-code{font-size:10.5px;color:var(--mut,#8b8b96);background:rgba(255,255,255,.05);
  border-radius:7px;padding:4px 9px}
.am-code b{color:var(--txt,#f4f4f7);font-family:var(--mono,monospace)}
.am-note{margin-top:14px;font-size:11px;color:var(--mut2,#5f5f6a);line-height:1.65}
.am-msg{margin-top:12px;padding:10px 13px;border-radius:10px;font-size:12px;line-height:1.6;display:none}
.am-msg.ok{display:block;background:rgba(47,230,168,.1);border:1px solid rgba(47,230,168,.3);color:#2fe6a8}
.am-msg.err{display:block;background:rgba(240,85,95,.1);border:1px solid rgba(240,85,95,.3);color:#f0555f}
.am-msg.wait{display:block;background:rgba(245,197,66,.1);border:1px solid rgba(245,197,66,.28);color:#f5c542}
.am-msg code{font-family:var(--mono,monospace);font-size:11px}
.am-empty{color:var(--mut2,#5f5f6a);font-size:12.5px;padding:22px 2px}
body.am-open{overflow:hidden}
@media(max-width:640px){.am-body{padding:15px 14px 18px}.am-grid{grid-template-columns:1fr}}
.sh-modebtn{margin-top:10px;width:100%;background:rgba(183,107,245,.14);color:#cf9bff;
  border:1px solid rgba(183,107,245,.32);border-radius:9px;padding:8px 12px;
  font-weight:800;font-size:11.5px;cursor:pointer}
.sh-modebtn:hover{background:rgba(183,107,245,.22)}
/* 상단 액션바 센서허브 버튼 — 센서 상태로 바로 가는 입구 */
.shell-action-btn--hub{border-color:rgba(183,107,245,.4)!important;color:#cf9bff!important;
  background:rgba(183,107,245,.12)!important}
.shell-action-btn--hub:hover{background:rgba(183,107,245,.2)!important}
.shell-action-btn--hub.on{background:rgba(183,107,245,.28)!important}
.sh-ifs{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-bottom:6px}
.sh-if{background:var(--card,#141417);border:1px solid var(--line,rgba(255,255,255,.08));
  border-radius:11px;padding:10px 12px;opacity:.68}
.sh-if.ok{opacity:1;border-color:rgba(47,230,168,.28)}
.sh-ifn{font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:7px;justify-content:space-between}
.sh-ifd{font-size:10.5px;color:var(--mut,#8b8b96);margin-top:5px;line-height:1.55}
.sh-h em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--mut2,#5f5f6a);
  background:rgba(255,255,255,.05);border-radius:6px;padding:2px 7px;margin-left:7px}
.sh-give b{color:var(--txt,#f4f4f7);font-family:var(--mono,monospace)}
.sh-give{display:inline-block;margin:2px 4px 2px 0}
.sh-msg code{font-family:var(--mono,monospace);font-size:11px;display:inline-block;margin:2px 0;
  background:rgba(255,255,255,.06);padding:2px 6px;border-radius:5px;word-break:break-all}
.sh-hint code{font-family:var(--mono,monospace);font-size:10.5px;background:rgba(255,255,255,.06);
  padding:2px 5px;border-radius:5px}
.sh-msg.wait{display:block;background:rgba(245,197,66,.1);border:1px solid rgba(245,197,66,.28);color:#f5c542}
.sh-actions{display:flex;gap:9px;flex-wrap:wrap;margin:2px 0 16px}
.sh-actions .sh-modebtn{margin-top:0;width:auto;padding:9px 16px;font-size:12.5px}

/* ── 사람 ↔ 장비 매핑 (2026-09-02) ──────────────────────────────────
   대표님 지시: 「사람과 장비 매핑을 시켜야 합니다. 사람에게 매핑된 장비의
   출력값들을 보여 줍니다.」
   ⚠ 숫자를 **가리지 않습니다.** 가리면 「고장」으로 읽힙니다. 대신 그 숫자가
      무엇인지(센서 값인지 표본인지) 카드 위에 적습니다. */
.pdm-host { margin: 0 0 12px; }
.pdm-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--hx-dash-r-sm);
  font-size: 13px; line-height: 1.45;
  border: 1px solid var(--hx-dash-border);
}
.pdm-bar b { font-weight: 700; }
.pdm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pdm-ok { background: rgba(30,240,208,.08); border-color: rgba(30,240,208,.28); color: #cbfff6; }
.pdm-ok .pdm-dot { background: var(--hx-dash-teal); box-shadow: 0 0 8px var(--hx-dash-teal); }
.pdm-warn { background: rgba(255,176,26,.10); border-color: rgba(255,176,26,.34); color: #ffe3ad; }
.pdm-warn .pdm-dot { background: var(--hx-dash-amber); box-shadow: 0 0 8px var(--hx-dash-amber); }
.pdm-sub { color: var(--hx-dash-muted); font-size: 12px; }
.pdm-warn .pdm-sub { color: #ffd489; }
.pdm-warn .pdm-sub b { color: #fff2d6; }
.pdm-btn {
  margin-left: auto; min-height: 32px; padding: 0 13px;
  border-radius: var(--hx-dash-pill); cursor: pointer; font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,.08); border: 1px solid var(--hx-dash-border-hi);
  color: var(--hx-dash-text);
}
.pdm-btn:hover { background: rgba(255,255,255,.15); }

.pdm-panel {
  position: fixed; inset: 0; z-index: 9000; display: none;
  background: rgba(0,0,0,.58); padding: 4vh 16px;
  overflow-y: auto;
}
.pdm-panel.is-open { display: block; }
.pdm-panel-in {
  max-width: 860px; margin: 0 auto; background: var(--hx-dash-surface);
  border: 1px solid var(--hx-dash-border-hi); border-radius: var(--hx-dash-r);
  box-shadow: var(--hx-dash-shadow); overflow: hidden;
}
.pdm-panel-h {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--hx-dash-border);
}
.pdm-panel-h h2 { margin: 0; font-size: 16px; font-weight: 700; }
.pdm-x {
  margin-left: auto; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--hx-dash-border);
  color: var(--hx-dash-text); font-size: 15px;
}
.pdm-panel-b { padding: 14px 18px 20px; }

.pdm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pdm-table th, .pdm-table td {
  text-align: left; padding: 10px 8px; vertical-align: top;
  border-bottom: 1px solid var(--hx-dash-border);
}
.pdm-table thead th { font-size: 11.5px; color: var(--hx-dash-muted); font-weight: 700; }
.pdm-table tbody th { font-weight: 700; white-space: nowrap; }
.pdm-table tr.is-now { background: rgba(216,255,60,.06); }
.pdm-now {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--hx-dash-pill);
  background: var(--hx-dash-lime); color: #121214; font-size: 10px; font-weight: 800;
}
.pdm-dev {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 5px 0;
}
.pdm-devn { font-weight: 600; }
.pdm-ser { font-size: 11px; color: var(--hx-dash-dim); }
.pdm-st {
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--hx-dash-pill);
  background: rgba(255,255,255,.07); color: var(--hx-dash-muted);
}
.pdm-dev.is-on .pdm-st { background: rgba(30,240,208,.16); color: #7ff3e2; }
.pdm-demo {
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--hx-dash-pill);
  background: rgba(255,111,20,.16); color: #ffb98a;
}
.pdm-sel {
  margin-left: auto; min-height: 32px; padding: 0 10px; font-size: 12px;
  background: var(--hx-dash-bg2); color: var(--hx-dash-text);
  border: 1px solid var(--hx-dash-border-hi); border-radius: 9px;
}
.pdm-none, .pdm-empty { color: var(--hx-dash-dim); font-size: 12.5px; padding: 5px 0; }
.pdm-val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdm-fake { color: var(--hx-dash-dim); }
.pdm-fake em { font-style: normal; color: var(--hx-dash-amber); font-size: 11px; }
.pdm-orph {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--hx-dash-r-sm);
  background: rgba(255,176,26,.08); border: 1px solid rgba(255,176,26,.26);
}
.pdm-orph p { margin: 0 0 6px; font-size: 12.5px; color: #ffe3ad; }
.pdm-note {
  margin: 16px 0 0; padding: 11px 13px; border-radius: var(--hx-dash-r-sm);
  background: rgba(255,45,106,.08); border: 1px solid rgba(255,45,106,.26);
  font-size: 12px; color: #ffc4d2; line-height: 1.5;
}
.pdm-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  z-index: 9100; padding: 12px 20px; border-radius: var(--hx-dash-pill);
  background: var(--hx-dash-text); color: #121214; font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: min(560px, calc(100vw - 32px)); text-align: center;
}
.pdm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  .pdm-btn { margin-left: 0; }
  .pdm-sel { margin-left: 0; width: 100%; }
  .pdm-table thead { display: none; }
  .pdm-table tbody th, .pdm-table td { display: block; border-bottom: 0; padding: 4px 0; }
  .pdm-table tbody tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--hx-dash-border); }
}

/* ── 사람 · 장비 관리 창 (2026-09-02) ─────────────────────────────── */
.pdm-need { background: rgba(78,245,255,.09); border-color: rgba(78,245,255,.3); color: #cdf6ff; }
.pdm-need .pdm-dot { background: var(--hx-dash-cyan); box-shadow: 0 0 8px var(--hx-dash-cyan); }
.pdm-need .pdm-sub { color: #a6e9f5; }

.pdm-sec { margin: 0 0 20px; }
.pdm-sec h3, .pdm-add h3 {
  margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--hx-dash-text);
  padding-bottom: 7px; border-bottom: 1px solid var(--hx-dash-border);
}
.pdm-hint { margin: 0 0 11px; font-size: 12px; color: var(--hx-dash-muted); line-height: 1.55; }
.pdm-hint b { color: var(--hx-dash-text); }
.pdm-ok-line { margin: 0; font-size: 12.5px; color: #7ff3e2; }

.pdm-add { margin: 0 0 22px; }
.pdm-form { display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end; }
.pdm-f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0; }
.pdm-f > span { font-size: 11px; font-weight: 700; color: var(--hx-dash-muted); }
.pdm-f > span em { font-style: normal; font-weight: 400; color: var(--hx-dash-dim); }
.pdm-f input, .pdm-f select {
  min-height: 40px; padding: 0 11px; font-size: 13.5px;
  background: var(--hx-dash-bg2); color: var(--hx-dash-text);
  border: 1px solid var(--hx-dash-border-hi); border-radius: 10px; width: 100%;
}
.pdm-f input:focus-visible, .pdm-f select:focus-visible {
  outline: 2px solid var(--hx-dash-lime); outline-offset: 1px;
}
.pdm-add-btn {
  min-height: 40px; padding: 0 18px; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; flex: none;
  background: var(--hx-dash-lime); color: #121214; border: 0;
}
.pdm-add-btn:hover { filter: brightness(1.08); }
.pdm-warnbox {
  margin: 12px 0 0; padding: 11px 13px; border-radius: var(--hx-dash-r-sm);
  background: rgba(255,176,26,.10); border: 1px solid rgba(255,176,26,.32);
  font-size: 12px; color: #ffe3ad; line-height: 1.55;
}
.pdm-warnbox b { color: #fff2d6; }

.pdm-tablewrap { overflow-x: auto; }
.pdm-pn { font-weight: 700; }
.pdm-bed, .pdm-acct {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: var(--hx-dash-pill); font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,.08); color: var(--hx-dash-muted);
}
.pdm-acct { background: rgba(78,245,255,.16); color: #a6e9f5; }
.pdm-real {
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--hx-dash-pill);
  background: rgba(30,240,208,.16); color: #7ff3e2;
}
.pdm-src { display: block; font-style: normal; font-size: 10.5px; color: #7ff3e2; margin-top: 2px; }
.pdm-act { white-space: nowrap; }
.pdm-del, .pdm-devdel {
  min-height: 30px; padding: 0 11px; border-radius: 8px; cursor: pointer;
  font-size: 11.5px; font-weight: 700;
  background: rgba(255,45,106,.12); border: 1px solid rgba(255,45,106,.34); color: #ffb3c6;
}
.pdm-del:hover, .pdm-devdel:hover { background: rgba(255,45,106,.24); color: #fff; }
.pdm-devdel { margin-left: 6px; flex: none; }

.pdm-needs { padding: 13px 15px; border-radius: var(--hx-dash-r-sm);
  background: rgba(78,245,255,.06); border: 1px solid rgba(78,245,255,.24); }
.pdm-danger { padding: 13px 15px; border-radius: var(--hx-dash-r-sm);
  background: rgba(255,45,106,.06); border: 1px solid rgba(255,45,106,.24); }
.pdm-danger-row { display: flex; gap: 9px; flex-wrap: wrap; }
.pdm-danger-btn {
  min-height: 38px; padding: 0 16px; border-radius: var(--hx-dash-pill); cursor: pointer;
  font-size: 12.5px; font-weight: 700;
  background: rgba(255,45,106,.18); border: 1px solid rgba(255,45,106,.44); color: #ffc4d2;
}
.pdm-danger-btn:hover { background: rgba(255,45,106,.32); color: #fff; }

.pdm-reload {
  position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%);
  z-index: 9200; min-height: 44px; padding: 0 22px; border-radius: var(--hx-dash-pill);
  font-size: 13.5px; font-weight: 700; cursor: pointer; display: none;
  background: var(--hx-dash-lime); color: #121214; border: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.pdm-reload.is-on { display: block; }

@media (max-width: 720px) {
  .pdm-form { flex-direction: column; align-items: stretch; }
  /*  ⚠ `flex: 1 1 150px` 의 150px 는 **가로 배치용 너비**로 쓴 값입니다.
      세로로 눕히면 그 150px 가 **높이**가 되어, 이름 칸 하나가 150px 로
      부풀고 「+ 등록」이 저 아래로 밀립니다(실측 2026-09-02: 칸 높이 150px).
      메모 칸을 빼면서 칸이 둘로 줄자 그 빈틈이 눈에 띄었습니다. */
  .pdm-f { flex: 0 0 auto; }
  .pdm-add-btn { width: 100%; }
  .pdm-devdel { margin-left: 0; }
}

/* ── 켜짐 / 꺼짐 (2026-09-02) ────────────────────────────────────────
   ⚠ 켜짐·꺼짐과 온라인·미연결은 **다른 축**입니다. 한 배지로 합치면
      「껐다」와 「빠졌다」를 구분 못 해 멀쩡한 센서를 뽑았다 꽂았다 하게 됩니다. */
.pdm-power {
  font-size: 10.5px; font-weight: 800; padding: 1px 8px;
  border-radius: var(--hx-dash-pill); white-space: nowrap; letter-spacing: .02em;
}
.pdm-power.on { background: rgba(216,255,60,.18); color: #e8ff9a; }
.pdm-power.off { background: rgba(255,255,255,.07); color: var(--hx-dash-dim); }
.pdm-toggle {
  min-height: 30px; padding: 0 12px; border-radius: 8px; cursor: pointer; flex: none;
  font-size: 11.5px; font-weight: 700;
  background: rgba(255,255,255,.08); border: 1px solid var(--hx-dash-border-hi);
  color: var(--hx-dash-text); margin-left: 6px;
}
.pdm-toggle:hover { background: rgba(255,255,255,.18); }
.pdm-toggle[aria-checked="false"] { background: rgba(216,255,60,.16); border-color: rgba(216,255,60,.4); color: #e8ff9a; }
.pdm-dev.is-off { opacity: .62; }
.pdm-dev.is-off .pdm-devn { text-decoration: line-through; }
.pdm-offbox {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--hx-dash-r-sm);
  background: rgba(255,255,255,.04); border: 1px dashed var(--hx-dash-border-hi);
}
.pdm-offbox p { margin: 0 0 8px; font-size: 12.5px; color: var(--hx-dash-muted); }
.pdm-offbox p b { color: var(--hx-dash-text); }

/* ── 「사람·장비」 메뉴 단추 (2026-09-02) ──────────────────────────── */
.pdm-menubtn { position: relative; }
.pdm-menubtn.is-need {
  background: rgba(78,245,255,.14) !important;
  border-color: rgba(78,245,255,.42) !important;
  color: #cdf6ff !important;
}
.pdm-menubtn-n {
  display: inline-grid; place-items: center; margin-left: 6px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--hx-dash-pill);
  background: var(--hx-dash-cyan); color: #06222a; font-size: 10.5px; font-weight: 800;
}

/* ── 패널 접고 펴기 (2026-09-02) ──────────────────────────────────────
   ⚠ 접어도 **머리글은 남깁니다.** 자동 숨김의 제일 나쁜 점이
      「없어진 것과 구분이 안 되는 것」이었습니다. */
[data-fold-id] { position: relative; }
.fold-btn {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  display: grid; place-items: center; font-size: 12px; line-height: 1;
  background: rgba(255,255,255,.06); border: 1px solid var(--hx-dash-border);
  color: var(--hx-dash-muted); padding: 0;
}
.fold-btn:hover { background: rgba(255,255,255,.16); color: var(--hx-dash-text); }
.fold-btn:focus-visible { outline: 2px solid var(--hx-dash-lime); outline-offset: 1px; }

/*  접힘 — 위쪽(머리글)만 남기고 아래를 잘라 냅니다.
    ⚠ 처음엔 «머리글이 아닌 직계 자식을 display:none» 으로 했습니다. 그랬더니
       머리글이 직계 자식이 **아닌** 패널에서는 통째로 사라져 **높이 0** 이
       됐습니다(실측 2026-09-02: 14개 중 2개). 그건 자동 숨김과 똑같은 결과입니다.
    → DOM 구조에 기대지 않고 **높이로 자릅니다.** 어떤 구조든 위쪽은 남습니다. */
[data-fold-id].is-folded {
  max-height: 62px !important;
  min-height: 62px !important;
  height: 62px !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
  opacity: .82;
}
[data-fold-id].is-folded > * { pointer-events: none; }
[data-fold-id].is-folded > .fold-btn { pointer-events: auto; }
[data-fold-id].is-folded::after {
  content: '접힘'; position: absolute; right: 40px; top: 12px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 8px; border-radius: var(--hx-dash-pill);
  background: rgba(255,255,255,.08); color: var(--hx-dash-dim);
}

.fold-allbtn.is-folded {
  background: rgba(216,255,60,.14) !important;
  border-color: rgba(216,255,60,.4) !important;
  color: #e8ff9a !important;
}

@media (max-width: 720px) {
  .fold-btn { top: 6px; right: 6px; }
  [data-fold-id].is-folded::after { display: none; }
}

/* ── 사람 고르기 · 고른 분 지우기 (2026-09-02) ────────────────────
   대표님: 「등록 인원 제거는 선택 후 제거 할 수 있어야 합니다. 모두 비우기가 아닙니다.」 */
.pdm-selbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 11px; margin: 0 0 10px; border-radius: var(--hx-dash-r-sm);
  background: rgba(255,255,255,.04); border: 1px solid var(--hx-dash-border);
}
.pdm-selcnt { font-size: 12.5px; font-weight: 700; color: var(--hx-dash-muted); }
.pdm-selbtn:disabled { opacity: .4; cursor: not-allowed; }
.pdm-selbtn:not(:disabled) { background: rgba(255,45,106,.2); color: #fff; }
.pdm-selclear { margin-left: auto; }
.pdm-pick { width: 34px; vertical-align: middle !important; }
.pdm-chkwrap {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; cursor: pointer;   /* 터치 영역 확보 */
}
.pdm-chk { width: 17px; height: 17px; cursor: pointer; accent-color: var(--hx-dash-lime); }
.pdm-chk:focus-visible { outline: 2px solid var(--hx-dash-lime); outline-offset: 2px; }

/*  「전부 비우기」는 접어 둡니다 — 정상 경로가 아닙니다 */
details.pdm-danger { padding: 0; }
details.pdm-danger > summary {
  cursor: pointer; padding: 11px 14px; font-size: 12.5px; font-weight: 700;
  color: var(--hx-dash-muted); list-style: none;
}
details.pdm-danger > summary::-webkit-details-marker { display: none; }
details.pdm-danger > summary::before { content: '▸ '; }
details.pdm-danger[open] > summary::before { content: '▾ '; }
details.pdm-danger > summary:hover { color: var(--hx-dash-text); }
details.pdm-danger > *:not(summary) { padding-left: 14px; padding-right: 14px; }
details.pdm-danger .pdm-danger-row { padding-bottom: 13px; }

@media (max-width: 720px) {
  .pdm-selclear { margin-left: 0; }
  .pdm-table tbody td.pdm-pick { display: inline-block; }
}

/* ── 매핑 초기화 안내 (2026-09-02) ──────────────────────────────── */
.pdm-reset { background: rgba(216,255,60,.10); border-color: rgba(216,255,60,.34); color: #e8ff9a; }
.pdm-reset .pdm-dot { background: var(--hx-dash-lime); box-shadow: 0 0 8px var(--hx-dash-lime); }
.pdm-reset .pdm-sub { color: #cfe98a; }
.pdm-reset .pdm-btn { margin-left: 6px; }
.pdm-reset .pdm-btn:first-of-type { margin-left: auto; }
.pdm-zonetag {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: var(--hx-dash-pill); font-size: 10px; font-weight: 800;
  background: rgba(78,245,255,.16); color: #a6e9f5;
}

/* ── 센서 경고 띠 — 이제 «고칠 수 있는» 띠입니다 (2026-09-02) ────── */
#hxBindBar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#hxBindBar .hxbind-msg { flex: 1 1 320px; min-width: 0; }
#hxBindBar .hxbind-acts { display: flex; gap: 6px; margin-left: auto; flex: none; }
#hxBindBar button {
  min-height: 30px; padding: 0 11px; border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.34); color: #fff;
}
#hxBindBar button:hover { background: rgba(0,0,0,.4); }
#hxBindBar button[data-hxbind="hide"] { padding: 0 9px; }
@media (max-width: 720px) {
  #hxBindBar .hxbind-acts { margin-left: 0; width: 100%; }
  #hxBindBar button { flex: 1 1 auto; }
}

/* ── 배지: 등록한 이름이 크게, 센서는 작게 (2026-09-02) ─────────────
   대표님: 「센서명이 아니라 사람, 장소, 위치 등등의 명칭으로 등록된 이름으로
   나와야 하고 작게 어떤 센서와 연동 되는지를 표시해 주면 됩니다」 */
.mode-badge.has-name {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  line-height: 1.15; padding-top: 4px; padding-bottom: 4px; gap: 1px;
}
.mode-badge.has-name .mb-name { font-size: 12.5px; font-weight: 800; }
.mode-badge.has-name .mb-src {
  font-size: 9.5px; font-weight: 600; opacity: .72; letter-spacing: .01em;
}

/* ── 「관리 ▾」 드롭다운 (2026-09-02) ───────────────────────────────
   대표님: 「드롭다운 메뉴로 빌드」·「덕지 덕지 쌓지 마세요」·「꽉차있어요」
   오늘 헤더에 흩어 놓은 단추들을 여기 하나로 모읍니다. */
.pdm-menubtn { display: inline-flex; align-items: center; gap: 5px; }
.pdm-menubtn-c { font-size: 10px; opacity: .7; }
.pdm-menu {
  position: fixed; z-index: 9000; display: none;
  background: var(--hx-dash-surface);
  border: 1px solid var(--hx-dash-border-hi);
  border-radius: var(--hx-dash-r-sm);
  box-shadow: var(--hx-dash-shadow);
  overflow: hidden; padding: 5px;
}
.pdm-menu.is-open { display: block; }
.pdm-mi {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; background: transparent; cursor: pointer;
  border-radius: 9px; text-align: left; color: var(--hx-dash-text);
  min-height: 44px;                      /* 터치 영역 */
}
.pdm-mi:hover { background: rgba(255,255,255,.08); }
.pdm-mi:focus-visible { outline: 2px solid var(--hx-dash-lime); outline-offset: -2px; }
.pdm-mi-ic {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 7px; background: rgba(255,255,255,.07); font-size: 12px;
}
.pdm-mi-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pdm-mi-tx b { font-size: 13px; font-weight: 700; }
.pdm-mi-tx small { font-size: 11px; color: var(--hx-dash-muted); }
.pdm-mi.is-need .pdm-mi-ic { background: rgba(78,245,255,.2); color: #a6e9f5; }
.pdm-mi.is-need .pdm-mi-tx small { color: #a6e9f5; }
.pdm-mi-sep { height: 1px; margin: 4px 8px; background: var(--hx-dash-border); }
.pdm-menu-foot { border-top: 1px solid var(--hx-dash-border); margin-top: 4px; padding-top: 4px; }
/*  시연 모드 — 평소엔 조용히, 켜져 있을 때만 눈에 띄게 */
.pdm-mi-quiet .pdm-mi-tx b { font-weight: 600; color: var(--hx-dash-muted); }
.pdm-mi-quiet .pdm-mi-ic { background: rgba(255,255,255,.04); color: var(--hx-dash-dim); }
.pdm-mi-quiet.is-simon .pdm-mi-tx b { color: var(--hx-dash-orange); font-weight: 800; }
.pdm-mi-quiet.is-simon .pdm-mi-ic { background: rgba(255,111,20,.2); color: var(--hx-dash-orange); }

/* ── 헤더 단순화 (2026-09-02) ────────────────────────────────────────
   대표님: 「일단 가장 심플하게 정리해주세요.」
   ⚠ 지우지 않고 감춥니다. 드롭다운이 원래 단추를 대신 눌러 주므로
      기능은 그대로입니다 — 되돌리려면 이 규칙 한 줄만 지우면 됩니다. */
.hx-tidy-hidden { display: none !important; }

/* ══ 떠 있는 단추 감추기 ═════════════════════════════════════════════
   2026-09-02 대표님: 「제거해 주세요」(왼쪽 아래 「도움 요청」·「케어 리포트
   인쇄」가 카드를 가림) → 「새로고침 할때 나왔다 사라져요」

   ⚠ **왜 CSS 로 올라왔나 — 두 번 물렸습니다**
     ① 클래스로 감췄더니 `helix-help-fab.js` 의 `paint()` 가
        `btn.className = 'hxh-btn…'` 로 **통째로 덮어써** 20초마다 지웠습니다.
     ② 그래서 자바스크립트로 `<style>` 을 붙였더니, 이번엔 **새로고침 순간**에
        보였습니다 — 단추는 스크립트가 실행되자마자 생기는데(`helix-help-fab.js`
        99행 · 인쇄 단추는 1.2초 뒤), 우리 `<style>` 은 저장소가 준비되길
        기다렸다 붙습니다. 그 사이가 통째로 «보이는 시간» 이었습니다.
   → 규칙을 **head 의 스타일시트**로 옮깁니다. CSS 는 첫 그리기 **전에**
     적용되므로 단추가 보이는 순간이 아예 없습니다.
   ⚠ **지운 것이 아니라 감춘 것**입니다(R0-6). 「설정」 메뉴가 대신 눌러 주고,
     `CareViewPersonDeviceMap.showFabs()` 로 언제든 다시 보입니다 —
     그때 `<html data-fabs="show">` 가 붙어 이 규칙이 비켜섭니다.
   ⚠ `display:none` 이어도 `.click()` 은 그대로 먹습니다 — 기능은 살아 있습니다. */
html:not([data-fabs="show"]) #hx-print-fab,
html:not([data-fabs="show"]) #hxhFab,
html:not([data-fabs="show"]) #helixHelpFab,
html:not([data-fabs="show"]) .hx-print-fab,
html:not([data-fabs="show"]) .hxh-fab,
html:not([data-fabs="show"]) .hxh-wrap,
html:not([data-fabs="show"]) .hxh-btn { display: none !important; }

/* ══ 헤더 항목도 CSS 로 ═══════════════════════════════════════════════
   2026-09-02 「새로고침 할때 나왔다 사라져요」 — 실측: 「임계값 설정」·
   「센서허브」가 새로고침 뒤 **첫 260ms 동안 보였습니다**(17프레임).

   ⚠ `tidyHeader()` 는 **글자로** 찾아 감춥니다. 그건 자바스크립트가 돌아야
      하고, 우리 스크립트는 저장소를 기다렸다 `boot()` 에서야 돕니다.
      그 사이는 통째로 «보이는 시간» 입니다 — 관찰자를 달아도 소용없습니다.
      관찰자는 «이미 돌기 시작한 뒤» 부터만 지켜 주니까요.
   ⚠ 그런데 이 항목들은 **정적 markup 이고 선택자가 분명합니다**
      (helix-careview-2.html 110~120행). 글자로 찾을 필요가 없었습니다.
      → head 스타일시트에 올립니다. 첫 그리기 전에 정해집니다.
   ⚠ `tidyHeader()` 는 그대로 둡니다(R0-6) — 나중에 자바스크립트가 만들어
      끼우는 항목(시뮬레이터 단추 등)은 여전히 글자로 잡아야 합니다.
      또 「설정 ▾」 이 대신 눌러 줄 원래 단추를 모으는 일도 거기서 합니다.
   ⚠ **「+ 위치 추가」는 여기 없습니다** — 대표님이 제자리에 두라고 하신 것입니다. */
html:not([data-hx-header="full"]) .top-utils [data-shell-thresholds],
html:not([data-hx-header="full"]) .top-utils .shell-action-btn--hub,
html:not([data-hx-header="full"]) .top-utils #svc-status-chip,
html:not([data-hx-header="full"]) .top-utils #data-mode-badge,
html:not([data-hx-header="full"]) .top-utils .dev-online-badge,
html:not([data-hx-header="full"]) .top-utils .clock,
html:not([data-hx-header="full"]) .top-utils .tick-meta { display: none !important; }

/* ══ 센서 띠 (#hxSensBar) ═════════════════════════════════════════════
   2026-09-02 대표님: (첨부 이미지 —「센서 값 옴 · 이름에 안 붙음 ─ ■ 측정 정지」)
   「이 버튼을 삭제해 주세요」 → 「첨부 부분」 = **띠 전체**

   ⚠ **무엇을 잃고 무엇을 남겼나** (R0-6 — 지우기 전에 밝힙니다)
     · 상태 글자(「값 옴」/「이름에 안 붙음」/「센서가 안 붙어 있습니다」)
       → 카드의 「값 옴 · 값 대기 · 센서 없음」과 「설정 ▾」 숫자 배지가 맡습니다.
     · 호흡·심박 숫자 → **카드에 그대로** 있습니다(오히려 거기가 제자리입니다).
     · 「■ 측정 정지 / ▶ 측정 시작」 → 「설정 ▾」 메뉴에 **이미 있습니다.**
     · 「센서 깨우기」 → 이 띠에**만** 있던 되살리기 길이라, 「설정 ▾」 으로
       옮겼습니다. **센서가 죽었을 때만** 나옵니다(`needsWake()`).
   ⚠ 코드는 그대로 돕니다 — 상태를 계속 재서 `/diag` 와 진단에 남깁니다.
     화면에서 치운 것이지 **끈 것이 아닙니다.**
   ⚠ 되돌리려면 `<html data-hx-sensbar="show">`. */
html:not([data-hx-sensbar="show"]) #hxSensBar { display: none !important; }

/* ══ 확인 창 ═════════════════════════════════════════════════════════
   2026-09-02 대표님: 「이건 브라우저에서 붙이는거 아닌가요? 대시보드 연결이
   아닌것 같아요.」 — `confirm()` 은 맨 위에 「127.0.0.1:8080 내용:」 이라고
   주소가 찍혀 **브라우저가 말하는 것처럼** 보입니다. 제품 안에서 묻습니다.
   ⚠ 고르기(9500)·센서추가(9600) 보다 **위**입니다. */
.cf-pop {
  position: fixed; inset: 0; z-index: 9700; display: none;
  background: rgba(0,0,0,.72); padding: 8vh 16px; overflow-y: auto;
}
.cf-pop.is-open { display: block; }
.cf-in {
  max-width: 420px; margin: 0 auto;
  background: var(--hx-dash-surface);
  border: 1px solid var(--hx-dash-border-hi);
  border-radius: var(--hx-dash-r); box-shadow: var(--hx-dash-shadow);
  overflow: hidden;
}
.cf-h { padding: 15px 18px 0; font-size: 15px; }
.cf-b { padding: 14px 18px 4px; }
/*  «무엇에서 무엇으로» 를 한눈에 — 줄글보다 빠릅니다. */
.cf-line {
  display: flex; align-items: baseline; gap: 9px; margin: 0 0 2px;
  padding: 10px 12px; border-radius: 11px;
  background: rgba(255,255,255,.045); border: 1px solid var(--hx-dash-border);
}
.cf-k { flex: none; font-size: 10.5px; font-weight: 700; color: var(--hx-dash-dim);
  min-width: 30px; }
.cf-line b { font-size: 14px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-line small { margin-left: auto; flex: none; font-size: 10.5px; color: var(--hx-dash-dim); }
.cf-arrow { margin: 2px 0; text-align: center; font-size: 13px; color: var(--hx-dash-dim); }
/*  ⚠ 무거운 문장은 **굵게** 보일 수 있어야 합니다 — `confirm()` 으로는
    줄바꿈 말고 아무 표현도 못 했습니다. */
.cf-warn {
  margin: 12px 18px 0; padding: 11px 12px; border-radius: 11px;
  font-size: 11.5px; line-height: 1.65; color: #ffc4d2;
  background: rgba(255,45,106,.08); border: 1px solid rgba(255,45,106,.26);
}
.cf-warn b { color: #ff9db4; }
.cf-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 18px; margin-top: 14px;
  border-top: 1px solid var(--hx-dash-border); background: rgba(0,0,0,.16);
}
.cf-no, .cf-yes {
  padding: 10px 18px; border-radius: 11px; cursor: pointer;
  font-size: 13px; font-weight: 700;
}
.cf-no { background: rgba(255,255,255,.06); border: 1px solid var(--hx-dash-border);
  color: var(--hx-dash-muted); }
.cf-no:hover { background: rgba(255,255,255,.12); color: var(--hx-dash-text); }
.cf-yes { background: var(--hx-dash-lime); border: 1px solid var(--hx-dash-lime); color: #10160a; }
.cf-yes:hover { filter: brightness(1.08); }
/*  떼기처럼 «잃는» 일은 색을 달리합니다 — 붙이기와 같은 색이면 손이 먼저 갑니다. */
.cf-yes.is-danger { background: #ff2d6a; border-color: #ff2d6a; color: #fff; }
.cf-no:focus-visible, .cf-yes:focus-visible {
  outline: 2px solid var(--hx-dash-lime); outline-offset: 2px;
}
@media (max-width: 460px) {
  .cf-foot { flex-direction: column-reverse; }
  .cf-no, .cf-yes { width: 100%; }
}

/*  센서 줄도 값만 남깁니다 — 연결 방식·대수는 내부 상태입니다 */
.hx-tidy-hidden + .hx-tidy-hidden { display: none !important; }
.pdm-menu-sec {
  margin: 8px 10px 3px; font-size: 10.5px; font-weight: 800;
  color: var(--hx-dash-dim); letter-spacing: .03em;
}
.pdm-mi-slim { min-height: 36px; padding: 7px 10px; }
.pdm-mi-slim .pdm-mi-tx b { font-size: 12.5px; font-weight: 600; }
.pdm-menu { max-height: min(72vh, 620px); overflow-y: auto; }

/* ── 장비 카드: 등록한 이름이 제목, 센서는 작게 (2026-09-02) ────────
   대표님: 「명칭/호칭 등과 매핑을 하면 그 이름으로 카드가 생성 되어야 합니다」 */
.device-card .dc-top strong { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.device-card .dc-src {
  font-size: 10px; font-weight: 600; color: var(--hx-dash-dim);
  letter-spacing: .01em;
}

/* ── 이름 카드: 센서가 안 붙었을 때 (2026-09-02) ────────────────────
   대표님: 「명칭 카드를 생성 후 카드를 클릭하여 센서를 붙을 수 있게」 */
.dev-chip.unbound {
  border-style: dashed;
  opacity: .9;
}
.dev-chip.unbound .dot { background: var(--hx-dash-dim); box-shadow: none; }
.dev-chip.unbound .ds { color: var(--hx-dash-lime); font-weight: 700; }
.dev-chip.unbound:hover { border-color: var(--hx-dash-lime); opacity: 1; }

/* ── 이름 카드 = 헤더 배지와 같은 모양 (2026-09-02) ─────────────────
   대표님: 「카드가 이렇게 나와야 하는 겁니다」 (강민구 / AS-613 실 레이더)
   이름이 크게, 어느 센서인지는 아래 작게. */
.dev-chip .dnwrap {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; line-height: 1.18; min-width: 0;
}
.dev-chip .dn {
  font-size: 13px; font-weight: 800; letter-spacing: -.01em;
  color: var(--hx-dash-teal);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.dev-chip .ds {
  font-size: 9.5px; font-weight: 600; color: var(--hx-dash-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.dev-chip.unbound .dn { color: var(--hx-dash-muted); }
.dev-chip.online .dn, .dev-chip.ok .dn { color: var(--hx-dash-teal); }


/* ══ 이름 카드 ═══════════════════════════════════════════════════════
   2026-09-02 대표님: 「카드 디자인을 뚜렷한 색상과 디자인의 카드 스타일로」

   ⚠ 상태는 **색만으로 말하지 않습니다** — 색 + 글자(값 옴/값 대기/센서 없음)
      + 테두리 모양(실선/점선) 셋으로 말합니다. 색각 이상이나 흑백 출력에서도
      구분돼야 합니다.
   ⚠ 카드 본문 = 정보 보기 · 톱니 = 센서 연결. 한 자리에 두 일을 걸지 않습니다.
   ⚠ 왼쪽 동그라미는 **얼굴 사진 자리**입니다. 지금은 이름 첫 글자가 들어갑니다.
   ══════════════════════════════════════════════════════════════════ */
.dev-strip-scroll { gap: 12px !important; padding: 4px 2px 6px !important; }

.dev-chip-wrap {
  position: relative; display: inline-flex; align-items: stretch;
  min-width: 234px; border-radius: 18px; overflow: hidden;
  border: 1.5px solid var(--hx-dash-border-hi);
  background: var(--hx-dash-card);
  box-shadow: 0 6px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.dev-chip-wrap:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.46); }

/* ── 상태별 색 (왼쪽 굵은 띠로 한눈에) ───────────────────────────── */
.dev-chip-wrap::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 2;
}
.dev-chip-wrap.ind-live {
  border-color: rgba(30,240,208,.62);
  background: linear-gradient(150deg, rgba(30,240,208,.14) 0%, rgba(22,22,28,.96) 62%);
}
.dev-chip-wrap.ind-live::before { background: var(--hx-dash-teal); box-shadow: 0 0 14px rgba(30,240,208,.7); }

.dev-chip-wrap.ind-wait {
  border-color: rgba(255,176,26,.55);
  background: linear-gradient(150deg, rgba(255,176,26,.12) 0%, rgba(22,22,28,.96) 62%);
}
.dev-chip-wrap.ind-wait::before { background: var(--hx-dash-amber); }

.dev-chip-wrap.ind-none {
  border-style: dashed; border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.035);
  box-shadow: none;
}
.dev-chip-wrap.ind-none::before { background: transparent; }

/* ── 본문 ────────────────────────────────────────────────────────── */
.dev-chip-wrap .dev-chip {
  flex: 1 1 auto; display: flex; align-items: center; gap: 11px;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 12px 8px 12px 15px; cursor: pointer;
  text-align: left; min-width: 0;
}

/* 얼굴 사진 자리 */
.dc-face {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800; letter-spacing: -.02em;
  background: rgba(255,255,255,.07); color: var(--hx-dash-muted);
  border: 1.5px solid rgba(255,255,255,.12);
  background-size: cover; background-position: center;
}
.ind-live .dc-face { background: rgba(30,240,208,.16); color: #9df6e7; border-color: rgba(30,240,208,.4); }
.ind-wait .dc-face { background: rgba(255,176,26,.16); color: #ffd489; border-color: rgba(255,176,26,.36); }
.ind-none .dc-face { border-style: dashed; }

.dc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dc-name {
  font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--hx-dash-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ind-none .dc-name { color: var(--hx-dash-muted); }
.dc-src {
  font-size: 10.5px; font-weight: 600; color: var(--hx-dash-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ind-live .dc-src { color: rgba(157,246,231,.8); }

/* 값 — 붙어 있을 때만 */
.dc-vals { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }
.dc-vals b {
  font-size: 15px; font-weight: 800; color: var(--hx-dash-teal);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.dc-vals em {
  font-style: normal; font-size: 9.5px; font-weight: 600;
  color: var(--hx-dash-dim); margin-right: 5px;
}

/* 상태 글자 (색만으로 말하지 않기 위해) */
.dc-state {
  flex: none; align-self: flex-start; margin-top: 2px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.dc-state.ind-live { background: rgba(30,240,208,.2); color: #9df6e7; }
.dc-state.ind-wait { background: rgba(255,176,26,.2); color: #ffd489; }
.dc-state.ind-none { background: rgba(255,255,255,.07); color: var(--hx-dash-dim); }

/* ── 톱니 ────────────────────────────────────────────────────────── */
.dev-chip-gear {
  flex: none; width: 40px; border: 0; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.045);
  border-left: 1px solid var(--hx-dash-border);
  color: var(--hx-dash-muted); transition: background .14s ease, color .14s ease;
}
.dev-chip-gear:hover { background: rgba(255,255,255,.16); color: var(--hx-dash-text); }
.dev-chip-gear:focus-visible { outline: 2px solid var(--hx-dash-lime); outline-offset: -3px; }
.ind-none .dev-chip-gear { color: var(--hx-dash-lime); background: rgba(216,255,60,.1); }
.ind-none .dev-chip-gear:hover { background: rgba(216,255,60,.22); }

@media (max-width: 720px) {
  .dev-chip-wrap { min-width: 188px; }
  .dev-chip-wrap .dev-chip { padding: 10px 6px 10px 13px; gap: 9px; }
  .dc-face { width: 34px; height: 34px; font-size: 14px; }
  .dc-name { font-size: 14px; }
}

/* ══ 센서 고르기 팝업 ═══════════════════════════════════════════════
   2026-09-02 대표님: 「등록된 센서 리스트가 팝업으로 나와야 하는데 없어요.」
   ⚠ 센서가 하나여도 목록을 보여 줍니다 — 기록에 남는 일은 눈으로 확인하고 합니다. */
.pk-pop {
  position: fixed; inset: 0; z-index: 9500; display: none;
  background: rgba(0,0,0,.6); padding: 6vh 16px; overflow-y: auto;
}
.pk-pop.is-open { display: block; }
.pk-in {
  max-width: 520px; margin: 0 auto;
  background: var(--hx-dash-surface);
  border: 1px solid var(--hx-dash-border-hi);
  border-radius: var(--hx-dash-r); box-shadow: var(--hx-dash-shadow);
  overflow: hidden;
}
.pk-h {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--hx-dash-border);
  font-size: 14.5px;
}
.pk-x {
  margin-left: auto; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--hx-dash-border);
  color: var(--hx-dash-text); font-size: 14px;
}
.pk-b { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pk-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 12px 13px; border-radius: 13px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.035); border: 1.5px solid var(--hx-dash-border);
  color: var(--hx-dash-text); min-height: 56px;
}
.pk-row:hover { background: rgba(255,255,255,.09); border-color: var(--hx-dash-border-hi); }
.pk-row:focus-visible { outline: 2px solid var(--hx-dash-lime); outline-offset: 1px; }
.pk-row.is-on { border-color: rgba(30,240,208,.5); background: rgba(30,240,208,.09); }
.pk-ic {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
  background: rgba(255,255,255,.07); color: var(--hx-dash-muted);
}
.pk-ic.on { background: rgba(30,240,208,.18); color: #9df6e7; }
.pk-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pk-tx b { font-size: 13.5px; font-weight: 700; }
.pk-tx small { font-size: 10.5px; color: var(--hx-dash-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-st {
  flex: none; font-size: 10.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.07); color: var(--hx-dash-dim);
}
.pk-st.on { background: rgba(30,240,208,.16); color: #9df6e7; }
.pk-empty { margin: 0; padding: 26px 16px; text-align: center; font-size: 13px;
  color: var(--hx-dash-muted); line-height: 1.7; }
.pk-note {
  margin: 0; padding: 12px 16px 15px; font-size: 11.5px; line-height: 1.6;
  color: #ffc4d2; background: rgba(255,45,106,.07);
  border-top: 1px solid rgba(255,45,106,.2);
}
/*  줄 + 「깜빡여 보기」 — 줄 안에 단추를 넣을 수 없어 형제로 둡니다(중첩 금지) */
.pk-rowwrap { display: flex; gap: 6px; align-items: stretch; }
.pk-rowwrap > .pk-row { flex: 1 1 auto; min-width: 0; }
.pk-wink {
  flex: none; width: 46px; border-radius: 13px; cursor: pointer; font-size: 17px;
  background: rgba(216,255,60,.07); border: 1.5px solid var(--hx-dash-border);
  color: var(--hx-dash-lime);
}
.pk-wink:hover { background: rgba(216,255,60,.2); border-color: rgba(216,255,60,.45); }
.pk-wink:active { transform: scale(.94); }
.pk-wink:focus-visible { outline: 2px solid var(--hx-dash-lime); outline-offset: 1px; }
.pk-row.pk-add { border-style: dashed; background: rgba(216,255,60,.05); }
.pk-row.pk-add:hover { background: rgba(216,255,60,.13); border-color: rgba(216,255,60,.4); }
.pk-ic.add { background: rgba(216,255,60,.16); color: var(--hx-dash-lime); }

/* ══ 센서 추가 팝업 ═════════════════════════════════════════════════
   2026-09-02 대표님: 「센서 추가 팝업은 XK300 Essence 추가 방법에 대한 것인데
   이 방법이 잘못 되어 있어요」 「이 방식은 제거해 주시고 새로 팝업을 만들어
   주세요」 — 시설 개통 화면(계정 등록부 「위치 추가」) 대신 센서에 관한 것만
   묻는 작은 창입니다. 모델 · 시리얼 · 이름(선택), 셋뿐입니다.
   ⚠ 고르기 팝업(9500)보다 **위**에 뜹니다 — 뒤에 깔리면 눌러도 안 보입니다. */
.sa-pop {
  position: fixed; inset: 0; z-index: 9600; display: none;
  background: rgba(0,0,0,.66); padding: 5vh 16px; overflow-y: auto;
}
.sa-pop.is-open { display: block; }
.sa-in {
  max-width: 520px; margin: 0 auto;
  background: var(--hx-dash-surface);
  border: 1px solid var(--hx-dash-border-hi);
  border-radius: var(--hx-dash-r); box-shadow: var(--hx-dash-shadow);
  overflow: hidden;
}
.sa-h {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--hx-dash-border);
  font-size: 14.5px;
}
.sa-x {
  margin-left: auto; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--hx-dash-border);
  color: var(--hx-dash-text); font-size: 14px;
}
.sa-b { padding: 14px 16px 4px; }
.sa-lead { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--hx-dash-muted); }
.sa-sub { margin: 0 0 12px; font-size: 11.5px; line-height: 1.6; color: var(--hx-dash-dim); }
.sa-sub b { color: var(--hx-dash-muted); }
.sa-models { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sa-model {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 11px 12px; border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.03); border: 1.5px solid var(--hx-dash-border);
  color: var(--hx-dash-text);
}
.sa-model:hover { background: rgba(255,255,255,.08); border-color: var(--hx-dash-border-hi); }
.sa-model:focus-visible { outline: 2px solid var(--hx-dash-lime); outline-offset: 1px; }
.sa-go { flex: none; align-self: center; color: var(--hx-dash-dim); font-size: 17px; }
.sa-model:hover .sa-go { color: var(--hx-dash-lime); }
/*  ⚠ 상태는 **색만으로** 알리지 않습니다 — 옆에 글자가 늘 함께 붙습니다. */
.sa-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
  background: var(--hx-dash-dim); }
.sa-dot.live { background: #1ef0d0; box-shadow: 0 0 0 3px rgba(30,240,208,.16); }
.sa-dot.wait { background: #ffc07a; }
.sa-dot.off, .sa-dot.unknown { background: rgba(255,255,255,.22); }
.sa-st { flex: none; align-self: center; font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.07); color: var(--hx-dash-dim); }
.sa-st.live { background: rgba(30,240,208,.16); color: #9df6e7; }
.sa-st.wait { background: rgba(255,192,122,.14); color: #ffc07a; }
.sa-mtx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

/* ── 2단계: 고른 센서의 절차 ─────────────────────────────────────── */
.sa-back {
  display: inline-block; margin-bottom: 11px; padding: 6px 11px 6px 8px;
  border-radius: 9px; cursor: pointer; font-size: 11.5px; font-weight: 700;
  background: rgba(255,255,255,.05); border: 1px solid var(--hx-dash-border);
  color: var(--hx-dash-muted);
}
.sa-back:hover { background: rgba(255,255,255,.11); color: var(--hx-dash-text); }
.sa-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sa-head b { font-size: 15px; }
.sa-steps { margin: 0 0 14px; padding: 0 0 0 4px; list-style: none; counter-reset: sa; }
/*  ⚠ 번호는 **진짜 순서**입니다 — 이 센서는 이 차례로만 붙습니다. */
.sa-steps li { counter-increment: sa; position: relative; padding: 0 0 13px 30px; }
.sa-steps li::before {
  content: counter(sa); position: absolute; left: 0; top: 0;
  width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  background: rgba(216,255,60,.14); color: var(--hx-dash-lime);
}
/*  세로줄로 «이어지는 절차» 임을 보입니다 — 마지막 칸에는 긋지 않습니다. */
.sa-steps li:not(:last-child)::after {
  content: ''; position: absolute; left: 10px; top: 24px; bottom: 4px;
  width: 1px; background: var(--hx-dash-border);
}
.sa-sx { display: block; font-size: 13px; line-height: 1.55; }
.sa-sx b { color: var(--hx-dash-lime); font-weight: 700; }
.sa-cmd {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  margin-top: 6px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  background: rgba(0,0,0,.34); border: 1px solid var(--hx-dash-border);
  color: #cfe98a; overflow-x: auto; white-space: pre;
}
.sa-cmd:hover { border-color: rgba(216,255,60,.4); background: rgba(0,0,0,.5); }
.sa-cmd:focus-visible { outline: 2px solid var(--hx-dash-lime); outline-offset: 1px; }
.sa-cmdc { margin-left: auto; flex: none; font-family: inherit; font-size: 10px;
  padding: 2px 7px; border-radius: 999px; background: rgba(216,255,60,.14);
  color: var(--hx-dash-lime); }
.sa-shint { display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.55;
  font-style: normal; color: var(--hx-dash-dim); }
.sa-shint b { color: #ffc07a; }
/*  「같은 모델 여러 대」 — 안 되는 것이 섞여 있어 경고색을 씁니다.
    되는 것처럼 조용히 두면 두 대 꽂아 놓고 하나만 뜨는 걸 겪게 됩니다. */
.sa-multi { margin: 0 0 14px; padding: 11px 12px; border-radius: 11px;
  font-size: 11.5px; line-height: 1.7; color: #ffd8ab;
  background: rgba(255,192,122,.07); border: 1px solid rgba(255,192,122,.3); }
.sa-multi > b:first-child { display: block; margin-bottom: 4px; color: #ffc07a; font-size: 12px; }
.sa-multi b { color: #ffdcb4; }
.sa-multi code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; padding: 1px 5px; border-radius: 5px;
  background: rgba(0,0,0,.3); color: #cfe98a; }
/*  창 안에서 끝내는 절차 (XK 계정·빌딩ID / AS-BW 주소) */
.sa-inline { margin: 0 0 14px; padding: 13px 14px; border-radius: 12px;
  background: rgba(255,255,255,.035); border: 1px solid var(--hx-dash-border); }
.sa-hr { height: 1px; margin: 14px 0 12px; background: var(--hx-dash-border); }
.sa-sub2 { display: flex; align-items: center; gap: 8px; margin: 0 0 9px;
  font-size: 12px; font-weight: 700; color: var(--hx-dash-muted); }
.sa-num { flex: none; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800;
  background: rgba(255,255,255,.09); color: var(--hx-dash-dim); }
.sa-num.is-done { background: rgba(30,240,208,.2); color: #9df6e7; }
.sa-ok { margin: 0 0 10px; font-size: 11.5px; line-height: 1.6; color: #9df6e7; }
.sa-ok code, .sa-mnote code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  padding: 1px 5px; border-radius: 5px; background: rgba(0,0,0,.3);
}
/*  기기에 적어 넣을 값 — 눌러서 복사 */
.sa-copy {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  margin: 0 6px 6px 0; padding: 9px 13px; border-radius: 10px; cursor: pointer;
  background: rgba(30,240,208,.09); border: 1.5px solid rgba(30,240,208,.35);
  color: var(--hx-dash-text); text-align: left;
}
.sa-copy:hover { background: rgba(30,240,208,.18); }
.sa-copy b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.sa-copy span { font-size: 10px; color: var(--hx-dash-dim); }
.sa-copy:focus-visible { outline: 2px solid var(--hx-dash-lime); outline-offset: 2px; }
/*  이름 줄에서 «붙이기» 로 들어가는 길 — 톱니와 같은 창을 엽니다 */
.pdm-bindbtn {
  padding: 8px 13px; border-radius: 10px; cursor: pointer;
  font-size: 12px; font-weight: 700;
  background: rgba(216,255,60,.1); border: 1.5px dashed rgba(216,255,60,.4);
  color: var(--hx-dash-lime);
}
.pdm-bindbtn:hover { background: rgba(216,255,60,.2); border-style: solid; }
.sa-probe-row { margin-bottom: 12px; }
.sa-check {
  padding: 9px 16px; border-radius: 10px; cursor: pointer; font-size: 12.5px; font-weight: 700;
  background: rgba(216,255,60,.13); border: 1.5px solid rgba(216,255,60,.42);
  color: var(--hx-dash-lime);
}
.sa-check:hover { background: rgba(216,255,60,.22); }
.sa-check[disabled] { opacity: .55; cursor: default; }
.sa-check:focus-visible { outline: 2px solid var(--hx-dash-lime); outline-offset: 2px; }
.sa-probe { margin: 0 0 8px; padding: 11px 12px; border-radius: 11px;
  font-size: 12px; line-height: 1.6; border: 1px solid var(--hx-dash-border);
  background: rgba(255,255,255,.04); color: var(--hx-dash-muted); }
.sa-probe.live { border-color: rgba(30,240,208,.4); background: rgba(30,240,208,.09); color: #b8f5ea; }
.sa-probe.wait { border-color: rgba(255,192,122,.35); background: rgba(255,192,122,.08); color: #ffd8ab; }
.sa-probe.off  { border-color: rgba(255,45,106,.3); background: rgba(255,45,106,.07); color: #ffc4d2; }
.sa-probe-x { margin: 0 0 8px; font-size: 11px; line-height: 1.6; color: var(--hx-dash-dim); }
.sa-serials { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sa-serial {
  padding: 8px 12px; border-radius: 9px; cursor: pointer; font-size: 11.5px; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(30,240,208,.1); border: 1.5px solid rgba(30,240,208,.35); color: #9df6e7;
}
.sa-serial:hover { background: rgba(30,240,208,.2); }
/*  손으로 미리 등록 — **접어 둡니다.** 펴 놓으면 그게 정답처럼 보입니다. */
.sa-manual { margin: 4px 0 12px; border-top: 1px solid var(--hx-dash-border); padding-top: 12px; }
.sa-manual > summary { cursor: pointer; font-size: 11.5px; color: var(--hx-dash-dim);
  list-style: none; }
.sa-manual > summary::-webkit-details-marker { display: none; }
.sa-manual > summary::before { content: '▸ '; }
.sa-manual[open] > summary::before { content: '▾ '; }
.sa-manual > summary:hover { color: var(--hx-dash-muted); }
.sa-mnote { margin: 10px 0 12px; font-size: 11px; line-height: 1.6; color: var(--hx-dash-dim); }
.sa-mnote b { color: #ffc07a; }
.sa-save-in { margin-bottom: 4px; }
.sa-mtx b { font-size: 13.5px; font-weight: 700; }
.sa-mtx small { font-size: 11px; line-height: 1.5; color: var(--hx-dash-dim); }
.sa-cant { font-size: 10.5px; line-height: 1.5; font-style: normal; color: #ffc07a; }
.sa-f { display: block; margin-bottom: 12px; }
.sa-f > span { display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 5px;
  color: var(--hx-dash-muted); }
.sa-f > span i { font-style: normal; font-weight: 500; color: var(--hx-dash-dim); }
.sa-f input, .sa-f select {
  width: 100%; padding: 11px 12px; border-radius: 11px; font-size: 13.5px;
  background: rgba(0,0,0,.28); border: 1.5px solid var(--hx-dash-border);
  color: var(--hx-dash-text);
}
.sa-f input:focus, .sa-f select:focus { outline: none; border-color: var(--hx-dash-lime); }
/*  「이름」이 두 곳에 있어 헷갈린다는 지적(2026-09-02) — 아닌 것을 아니라고
    적는 줄. 칸 **바로 밑**에 둡니다, 아래 안내문에 섞으면 안 읽힙니다. */
.sa-hint { display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.55;
  font-style: normal; color: var(--hx-dash-dim); }
.sa-hint b { color: #ffc07a; }
.sa-err:empty { display: none; }
.sa-err { margin: 0 0 12px; font-size: 12px; line-height: 1.6; color: #ff9db4;
  background: rgba(255,45,106,.09); border: 1px solid rgba(255,45,106,.28);
  border-radius: 10px; padding: 9px 11px; }
.sa-note { margin: 0 0 14px; font-size: 11.5px; line-height: 1.65; color: var(--hx-dash-dim); }
.sa-note b { color: var(--hx-dash-muted); }
.sa-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--hx-dash-border);
  background: rgba(0,0,0,.16);
}
.sa-cancel, .sa-save {
  padding: 10px 18px; border-radius: 11px; cursor: pointer;
  font-size: 13px; font-weight: 700;
}
.sa-cancel { background: rgba(255,255,255,.06); border: 1px solid var(--hx-dash-border);
  color: var(--hx-dash-muted); }
.sa-cancel:hover { background: rgba(255,255,255,.12); color: var(--hx-dash-text); }
.sa-save { background: var(--hx-dash-lime); border: 1px solid var(--hx-dash-lime); color: #10160a; }
.sa-save:hover { filter: brightness(1.08); }
.sa-cancel:focus-visible, .sa-save:focus-visible {
  outline: 2px solid var(--hx-dash-lime); outline-offset: 2px;
}
@media (max-width: 520px) {
  .sa-pop { padding: 3vh 10px; }
  .sa-foot { flex-direction: column-reverse; }
  .sa-cancel, .sa-save { width: 100%; }
}

/*  계정에 할당돼 이미 목록에 올라온 시리얼 — 다시 올릴 필요가 없다는 표시 */
.sa-serial.is-have { background: rgba(255,255,255,.06); border-color: var(--hx-dash-border);
  color: var(--hx-dash-dim); cursor: default; }

/*  화면에서는 숨기고 **읽어 주는 기계에는 남기는** 글자.
    ⚠ 이 규칙이 없어서 ✦ 단추 안에 「AS-613 레이더 깜빡여 확인」이 **그대로 보이고**
       단추가 세로로 길게 늘어났습니다(실측 2026-09-02).
       `person-device-map.js` 가 `.cv-vh` 를 쓰는데 이 파일에 정의가 없었습니다 —
       클래스를 쓰기 전에 **정의가 있는지 확인해야** 합니다. */
.cv-vh {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%); border: 0;
}

/*  5분 평균(Insights 집계) — 「값 옴」(초 단위 실시간)과 **눈으로 갈라야** 합니다.
    색은 청록(실시간)이 아니라 호박색, 글자는 「5분 평균」. 숫자는 보입니다. */
.dev-chip-wrap.ind-agg { border-color: rgba(255,192,122,.45); }
.ind-agg .dc-state { background: rgba(255,192,122,.16); color: #ffc07a; }
.ind-agg .dc-src { color: rgba(255,192,122,.8); }
.ind-agg .dc-vals b { color: #ffd8ab; }

/*  값이 없어 «모른다» 고 적는 알약 — 「정상」과 **눈으로 갈라야** 합니다.
    2026-09-02: 호흡 「— rpm」 옆에 「주의」, 심박 「— bpm」 옆에 「정상」이
    붙어 있었습니다. 값을 모르는데 상태를 말하면 그건 추측입니다. */
.pill.none { background: rgba(255,255,255,.06) !important; color: var(--hx-dash-dim) !important; }
.pill.none .d { background: var(--hx-dash-dim) !important; }

/*  알림 목록 — 「지켜보고 있지 않습니다」 (2026-09-03 대표님 「데모 값 치우기」)
    ⚠ `ok/warn/crit` 만 스타일이 있어, 새로 만든 `none` 이 맨몸으로 보였습니다.
       색으로만 말하지 않습니다 — 글자가 이미 «지켜보고 있지 않다» 고 적습니다.
       색은 «경고» 가 아니라 **«모름»** 으로 읽히게 흐리게 둡니다. */
.alert-item.none { opacity: .78; }
.alert-item.none .ico,
.alert-item.none svg { color: var(--hx-dash-dim); opacity: .7; }