:root {
  --ink: #14213d;
  --muted: #64748b;
  --line: #dbe4ee;
  --surface: #ffffff;
  --canvas: #f4f7fb;
  --navy: #12356b;
  --blue: #2374e1;
  --green: #07866f;
  --amber: #cc7a00;
  --red: #c7353a;
  --room-1: #2374e1;
  --room-2: #07866f;
  --room-3: #b56b00;
  --room-4: #7455b7;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Noto Sans KR", Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  letter-spacing: 0;
}
button, input, select { font: inherit; }
button { cursor: pointer; }

.topbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  color: #fff;
  background: var(--navy);
  border-bottom: 4px solid #55b5f6;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 8px; background: #fff; color: var(--navy); font-weight: 900;
}
.brand strong { display: block; font-size: 18px; }
.brand span { display: block; color: #bdd8f8; font-size: 11px; font-weight: 700; }
.top-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; }
.admin-topbar { flex-wrap: wrap; }
.admin-topbar .top-meta { flex-wrap: wrap; }
@media (max-width: 640px) {
  .admin-topbar .top-meta { width: 100%; gap: 8px; }
  .admin-topbar .top-meta .btn { padding: 10px 12px; }
}
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #7ee0bf; box-shadow: 0 0 0 4px rgba(126,224,191,.16); }

.admin-shell { max-width: 1500px; margin: 0 auto; padding: 20px; }
.control-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(110px, .7fr) minmax(110px, .7fr) auto;
  gap: 10px;
  align-items: end;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--line);
}
.field { display: grid; gap: 7px; }
.field label { color: #52647a; font-size: 12px; font-weight: 800; }
.field input, .field select {
  width: 100%; height: 48px; padding: 0 13px;
  border: 1px solid #b9c8d9; border-radius: 6px; background: #fff; color: var(--ink);
  outline: none;
}
.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(35,116,225,.12); }
.btn {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; border: 1px solid transparent; border-radius: 6px;
  font-weight: 900; white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-call { background: #f16522; color: #fff; }
.btn-recall { background: #f3b400; color: #1f2937; }
.btn-complete { background: var(--green); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: #bdcbd9; }
.btn-danger { background: #fff; color: var(--red); border-color: #e5a9ac; }
.btn:disabled { opacity: .42; cursor: not-allowed; }

.admin-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0 12px;
}
.admin-summary h1 { margin: 0; font-size: 25px; }
.admin-summary p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.summary-stats { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reset-dialog { width: min(460px, calc(100% - 32px)); border: 1px solid #bdcbd9; border-radius: 8px; padding: 24px; color: var(--ink); background: #fff; }
.reset-dialog::backdrop { background: rgba(0,0,0,.4); }
.reset-dialog h2 { margin: 0 0 14px; font-size: 20px; }
.reset-dialog p { font-size: 14px; line-height: 1.7; }
.reset-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.reset-error { color: var(--red); }
.demo-privacy-note { margin: 12px 0; padding: 12px 14px; border-left: 4px solid #b56b00; background: #fff7e6; color: #654d00; font-size: 13px; line-height: 1.6; }
.stat-chip { min-width: 104px; padding: 9px 12px; border-left: 3px solid var(--blue); background: #eaf2fd; }
.stat-chip span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; }
.stat-chip strong { font-size: 22px; }

.room-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.room-column { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--room-color); }
.room-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }
.room-head h2 { margin: 0; font-size: 19px; }
.room-count { color: var(--room-color); font-size: 12px; font-weight: 900; }
.patient-list { min-height: 340px; display: grid; align-content: start; }
.empty-state { padding: 34px 14px; color: #8a98aa; text-align: center; font-size: 13px; }
.patient-row { padding: 13px; border-bottom: 1px solid #e7edf4; }
.patient-row.is-called { background: #fff7e6; box-shadow: inset 4px 0 0 #f3b400; }
.patient-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.patient-name { font-size: 16px; font-weight: 900; overflow-wrap: anywhere; }
.patient-ticket { color: var(--muted); font-size: 11px; font-weight: 800; }
.order-badge { min-width: 42px; padding: 5px 7px; border-radius: 5px; background: #edf3f9; color: #3a526f; text-align: center; font-size: 11px; font-weight: 900; }
.patient-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.patient-actions .btn { min-height: 36px; padding: 0 6px; font-size: 11px; }
.status-picker { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; margin-top: 3px; }
.status-picker label { color: #61738a; font-size: 11px; font-weight: 900; }
.status-picker select { min-width: 0; height: 36px; padding: 0 9px; border: 1px solid #bdcbd9; border-radius: 5px; color: #18314f; background: #fff; font-size: 12px; font-weight: 900; }
.status-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: 5px; font-size: 11px; font-weight: 900; }
.status-badge.waiting { color: #31506f; background: #edf3f9; }
.status-badge.called { color: #7a4c00; background: #fff0c2; }
.status-badge.treatment { color: #075c4e; background: #d9f5ed; }
.status-badge.testing { color: #2856a4; background: #e1ebff; }
.status-badge.surgery { color: #8a2d35; background: #ffe2e4; }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  max-width: min(380px, calc(100vw - 40px)); padding: 13px 16px;
  border-radius: 6px; background: #10243e; color: #fff; font-weight: 800;
  box-shadow: 0 16px 40px rgba(15,35,60,.26); opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* TV display */
.display-page { min-height: 100vh; background: #eef3f8; overflow: hidden; }
.display-topbar { min-height: 84px; padding: 14px 30px; }
.display-topbar .brand strong { font-size: 25px; }
.clock { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.display-audio-btn {
  min-height: 38px; padding: 0 13px; border: 1px solid rgba(255,255,255,.5);
  border-radius: 6px; color: #12356b; background: #fff; font-weight: 900;
}
.display-audio-btn:disabled { opacity: .7; cursor: wait; }
.display-shell { min-height: calc(100vh - 84px); display: grid; grid-template-rows: auto 1fr auto; padding: 18px 24px 20px; gap: 14px; }
.display-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.display-title h1 { margin: 0; font-size: clamp(26px, 2.4vw, 42px); }
.display-title p { margin: 4px 0 0; color: var(--muted); font-size: clamp(12px, 1vw, 17px); font-weight: 700; }
.display-title .notice { color: var(--navy); font-weight: 900; }
.display-rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-height: 0; }
.display-room { min-width: 0; display: grid; grid-template-rows: auto auto 1fr; background: #fff; border: 1px solid #cfdbe7; border-top: 8px solid var(--room-color); box-shadow: 0 10px 30px rgba(31,57,87,.08); }
.display-room { border-radius: 6px 6px 0 0; overflow: hidden; }
.display-room-head { padding: 14px 16px 11px; color: var(--room-color); font-size: clamp(19px, 1.7vw, 30px); font-weight: 900; border-bottom: 1px solid var(--line); }
.now-serving { padding: 14px 16px; color: #fff; background: var(--room-color); }
.now-label { opacity: .8; font-size: clamp(10px, .8vw, 14px); font-weight: 800; }
.now-number { margin-top: 3px; font-size: clamp(46px, 5vw, 88px); line-height: .95; font-weight: 900; font-variant-numeric: tabular-nums; }
.now-name { min-height: 1.2em; margin-top: 8px; font-size: clamp(19px, 1.7vw, 30px); line-height: 1.1; font-weight: 900; overflow-wrap: anywhere; }
.now-status { width: fit-content; margin-top: 8px; padding: 5px 9px; border-radius: 5px; color: var(--room-color); background: rgba(255,255,255,.92); font-size: clamp(10px, .8vw, 14px); font-weight: 900; }
.waiting-list { min-height: 0; overflow: hidden; }
.waiting-head { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 13px; color: #718198; background: #f5f8fb; font-size: clamp(10px, .75vw, 13px); font-weight: 800; }
.waiting-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 8px 13px; border-top: 1px solid #e5ebf2; font-size: clamp(13px, 1.15vw, 21px); }
.waiting-item > span:first-child { width: 38px; height: 32px; display: grid; place-items: center; border-radius: 5px; color: var(--room-color); background: color-mix(in srgb, var(--room-color) 10%, white); font-weight: 900; }
.waiting-item strong { overflow-wrap: anywhere; }
.waiting-item.is-next { border-left: 4px solid #14b8a6; background: #effcf9; }
.waiting-item.is-next::after { content: "곧 호출"; padding: 5px 7px; border: 1px solid #7dd3c7; border-radius: 5px; color: #0f766e; background: #fff; font-size: clamp(10px, .7vw, 12px); font-weight: 900; white-space: nowrap; }
.waiting-empty { padding: 24px 12px; color: #94a3b8; text-align: center; font-size: 14px; }
.display-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 42px; color: #4e6178; font-size: clamp(11px, .9vw, 15px); font-weight: 700; }

.call-overlay { position: fixed; inset: 0; z-index: 50; display: none; grid-template-columns: minmax(320px, 42vw) 1fr; color: #fff; background: #071524; }
.call-overlay.show { display: grid; animation: overlayIn .24s ease-out; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.call-media { position: relative; min-height: 100vh; background: #0a1d31; overflow: hidden; }
.call-media video { width: 100%; height: 100%; object-fit: cover; opacity: .84; }
.call-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #071524); }
.call-message { display: grid; align-content: center; padding: clamp(36px, 5vw, 90px); }
.call-kicker { color: #7dd3fc; font-size: clamp(14px, 1.3vw, 24px); font-weight: 900; }
.call-patient { margin-top: 16px; font-size: clamp(52px, 7vw, 126px); line-height: 1; font-weight: 900; overflow-wrap: anywhere; }
.call-room { margin-top: 24px; color: #8de4c9; font-size: clamp(34px, 4vw, 72px); font-weight: 900; }
.call-copy { margin-top: 18px; color: #d4dfeb; font-size: clamp(17px, 1.5vw, 29px); font-weight: 700; }

@media (max-width: 1050px) {
  .room-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .display-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .display-page { overflow: auto; }
  .display-room { min-height: 430px; }
}
@media (max-width: 720px) {
  .topbar { padding: 10px 14px; }
  .top-meta .hide-mobile { display: none; }
  .admin-shell { padding: 12px; }
  .control-strip { grid-template-columns: 1fr 1fr; }
  .control-strip .patient-field { grid-column: 1 / -1; }
  .control-strip .btn-primary { grid-column: 1 / -1; }
  .admin-summary { align-items: flex-start; flex-direction: column; }
  .summary-stats { width: 100%; }
  .stat-chip { flex: 1; min-width: 0; }
  .room-board { grid-template-columns: 1fr; }
  .patient-list { min-height: 120px; }
  .display-rooms { grid-template-columns: 1fr; }
  .call-overlay { grid-template-columns: 1fr; }
  .call-media { min-height: 42vh; }
  .call-message { min-height: 58vh; }
}