/* NeCALL ROOM 현황판 — 국내판 키오스크 디자인 (파랑·빨강·흰 카드). 가로 1920×1080 / 세로 1080×1920 */
#stage { display: grid; background: #eef1f5; }
#stage.landscape { grid-template-columns: 660px 1fr; grid-template-rows: 96px 1fr 58px; grid-template-areas: "hd hd" "q map" "ft ft"; }
#stage.portrait { grid-template-columns: 1fr; grid-template-rows: 96px 46% 1fr 58px; grid-template-areas: "hd" "q" "map" "ft"; }

/* 머리 */
.hd { grid-area: hd; display: flex; align-items: center; gap: 22px; padding: 0 24px; background: #fff; border-bottom: 3px solid var(--blue); min-width: 0; }
.hd .logo { flex: none; }
.hosp { display: flex; flex-direction: column; min-width: 0; flex: none; max-width: 300px; }
.hosp b { font-size: 24px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hosp small { color: var(--muted); font-size: 15px; }
.wards { flex: 1; display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wards button { height: 58px; padding: 0 20px; border-radius: 12px; background: var(--blue-3); color: var(--blue); font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
.wards button small { font-size: 15px; font-weight: 700; opacity: .7; }
.wards button.on { background: var(--blue); color: #fff; box-shadow: inset 0 -5px 0 var(--red); }
.clock { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.clock b { font-size: 38px; font-weight: 900; letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1; }
.clock small { font-size: 15px; color: var(--muted); }
.hb { width: 54px; height: 54px; border-radius: 12px; background: var(--bg); display: flex; align-items: center; justify-content: center; flex: none; }
.hb .mi { font-size: 30px; color: #444; }
.portrait .hosp { display: none; }
.portrait .clock small { display: none; }

/* 호출 큐 */
.queue { grid-area: q; display: flex; flex-direction: column; min-height: 0; background: #23272e; }
.qh { height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 22px; color: #fff; flex: none; }
.qh b { font-size: 26px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.qh b .mi { font-size: 32px; color: #ff6b63; }
.qh i { font-style: normal; font-size: 18px; font-weight: 800; border-radius: 16px; padding: 3px 14px; }
.qh i.n { background: var(--red); } .qh i.w { background: #f39a1e; }
.qlist { flex: 1; overflow-y: auto; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.portrait .qlist { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.qempty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #9aa3ad; text-align: center; grid-column: 1 / -1; min-height: 300px; }
.qempty .mi { font-size: 88px; color: #5bbf73; } .qempty b { font-size: 28px; color: #d9dde3; } .qempty span { font-size: 18px; }
.map .qempty .mi { color: #b8c2cf; } .map .qempty b { color: #555; }

.qc { display: grid; grid-template-columns: 92px 1fr; gap: 10px 14px; background: #fff; border-radius: 16px; padding: 14px; border-left: 10px solid var(--red); animation: pop .25s; min-width: 0; }
.qc.accepted { border-left-color: #f39a1e; } .qc.arrived { border-left-color: var(--blue-2); }
.qc.calling.warn { box-shadow: 0 0 0 4px #f39a1e; }
.qc.calling.alert { box-shadow: 0 0 0 5px var(--red); animation: flash 1.2s infinite; }
.qc.emg { background: #fff0ef; border-left-color: #b00; }
.qc.emg.calling { animation: emg 0.9s infinite; }
.qc.flash { animation: flash .5s 3; }
.qc .ki { width: 92px; height: 92px; border-radius: 14px; background: var(--red); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.qc.accepted .ki { background: #f39a1e; } .qc.arrived .ki { background: var(--blue-2); } .qc.emg .ki { background: #b00; }
.qc .ki .mi { font-size: 48px; } .qc .ki small { font-size: 15px; font-weight: 800; }
.qc .body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qc .loc { font-size: 34px; font-weight: 900; letter-spacing: -.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc .loc small { font-size: 18px; font-weight: 700; color: var(--muted); margin-left: 10px; letter-spacing: 0; }
.qc .pt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 20px; }
.qc .pt b { font-size: 24px; } .qc .pt .none { color: #999; font-size: 17px; }
.qc .pt em { font-style: normal; font-size: 14px; font-weight: 800; border-radius: 8px; padding: 2px 8px; background: #fff1de; color: var(--orange); display: inline-flex; align-items: center; gap: 2px; }
.qc .pt em.r1 { background: #fdeaea; color: var(--red-2); } .qc .pt em.iso { background: #fdeaea; color: var(--red-2); } .qc .pt em.rep { background: #eee; color: #444; }
.qc .pt em .mi { font-size: 16px; }
.qc .note { font-size: 16px; color: #8a4b00; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc .note .mi { font-size: 18px; }
.chip { display: inline-block; border-radius: 10px; padding: 3px 12px; font-size: 16px; font-weight: 800; background: #fdeaea; color: var(--red-2); }
.chip.accepted { background: #fff1de; color: var(--orange); } .chip.arrived { background: var(--blue-3); color: var(--blue); }
.qc .side { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qc .el { font-size: 46px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1; }
.qc.warn .el { color: var(--orange); } .qc.alert .el, .qc.emg .el { color: var(--red); }
.qc .acts { display: flex; gap: 6px; }
.qc .acts .b { height: 58px; min-width: 76px; padding: 0 10px; border-radius: 12px; font-size: 18px; font-weight: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.qc .acts .b .mi { font-size: 24px; }
.qc .acts .acc { background: var(--red); color: #fff; } .qc .acts .arr { background: var(--blue-3); color: var(--blue); } .qc .acts .done { background: var(--blue); color: #fff; }
.qc .acts .x { min-width: 48px; background: #eee; color: #666; }
.qc .acts .b:disabled { opacity: .5; }
.portrait .qc { grid-template-columns: 70px 1fr; } .portrait .qc .ki { width: 70px; height: 70px; } .portrait .qc .ki .mi { font-size: 36px; }
.portrait .qc .loc { font-size: 26px; } .portrait .qc .el { font-size: 40px; }

/* 병동 지도 */
.map { grid-area: map; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.wd h3 { margin: 0 0 10px; font-size: 24px; font-weight: 900; color: var(--blue); display: flex; align-items: center; gap: 8px; }
.wd h3 .mi { font-size: 28px; } .wd h3 small { font-size: 16px; color: var(--muted); font-weight: 600; background: #fff; border-radius: 8px; padding: 2px 10px; }
.rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.portrait .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compact .rooms { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.portrait .compact .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rm { background: #fff; border-radius: 14px; border: 2px solid var(--line-2); padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rm.icu { grid-column: span 2; } .rm.icu .beds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rm.closed { opacity: .5; }
.rm.rcall { border-color: var(--red); } .rm.rcall.accepted { border-color: #f39a1e; } .rm.rcall.arrived { border-color: var(--blue-2); }
.rm.rcall.calling { animation: flash 1.2s infinite; }
.rh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.rh b { white-space: nowrap; }
.rh b { font-size: 22px; font-weight: 900; } .rh span { font-size: 14px; color: var(--muted); white-space: nowrap; }
.rcb { margin-left: auto; font-style: normal; background: var(--red); color: #fff; border-radius: 10px; padding: 2px 8px; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.rm.accepted .rcb { background: #f39a1e; } .rm.arrived .rcb { background: var(--blue-2); }
.rcb .mi { font-size: 17px; }
.beds { display: flex; flex-direction: column; gap: 6px; }
.bd { height: 44px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; gap: 8px; padding: 0 10px; min-width: 0; position: relative; }
.compact .bd { height: 38px; }
.bd i { font-style: normal; width: 26px; height: 26px; border-radius: 7px; background: #fff; color: #555; font-weight: 900; font-size: 15px; display: flex; align-items: center; justify-content: center; flex: none; }
.bd b { font-size: 19px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.compact .bd b { font-size: 17px; }
.bd small { font-size: 14px; color: var(--muted); white-space: nowrap; flex: none; }
.bd .ic { margin-left: auto; display: flex; gap: 1px; flex: none; } .bd .ic .mi { font-size: 18px; color: var(--orange); }
.bd.empty { background: transparent; border: 2px dashed #d6dbe2; } .bd.empty span { color: #a8b0bb; font-size: 15px; }
.bd.calling, .bd.accepted, .bd.arrived { color: #fff; }
.bd.calling { background: var(--red); animation: flash 1.2s infinite; cursor: pointer; } .bd.accepted { background: #f39a1e; cursor: pointer; } .bd.arrived { background: var(--blue-2); cursor: pointer; }
.bd.emg.calling { background: #b00; animation: emg .9s infinite; }
.bd.calling small, .bd.accepted small, .bd.arrived small, .bd.calling .ic .mi, .bd.accepted .ic .mi, .bd.arrived .ic .mi { color: rgba(255,255,255,.9); }
.bd.calling .ic, .bd.accepted .ic, .bd.arrived .ic { display: none; }
.bd .t { margin-left: auto !important; font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; margin-left: 6px; flex: none; }
.bd.warn { box-shadow: 0 0 0 3px #f39a1e; } .bd.alert { box-shadow: 0 0 0 4px #111; }

/* 아래 띠 */
.ft { grid-area: ft; display: flex; align-items: center; gap: 28px; padding: 0 24px; background: #fff; border-top: 2px solid var(--line); font-size: 19px; color: #555; white-space: nowrap; overflow: hidden; }
.ft b { color: var(--text); font-size: 22px; margin-left: 4px; }
.ft .r b { color: var(--red); } .ft .o { color: var(--orange); display: flex; align-items: center; gap: 4px; } .ft .o b { color: var(--orange); }
.ft .conn .mi { font-size: 24px; }
.ft .lg { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.ft .lg i { width: 16px; height: 16px; border-radius: 4px; margin-left: 8px; } .ft .lg i.calling { background: var(--red); } .ft .lg i.accepted { background: #f39a1e; } .ft .lg i.arrived { background: var(--blue-2); }
.portrait .ft { gap: 18px; font-size: 17px; } .portrait .ft .lg { display: none; }

/* 완료 · 취소 */
.m-done { width: 760px; padding: 30px 32px 26px; }
.m-done h3 { margin: 0; font-size: 32px; font-weight: 900; }
.m-done .loc { margin: 6px 0 20px; font-size: 22px; color: var(--muted); }
.m-done .rs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.m-done .rs button { height: 64px; border-radius: 12px; border: 2px solid var(--line); font-size: 20px; font-weight: 800; background: #fff; }
.m-done .rs button.on { border-color: var(--blue); background: var(--blue); color: #fff; }
.m-done .row { display: flex; gap: 12px; margin-top: 22px; } .m-done .row .btn { flex: 1; height: 72px; font-size: 24px; }

.toast { bottom: 90px; }
@keyframes emg { 0%, 100% { box-shadow: 0 0 0 0 rgba(187,0,0,0) } 50% { box-shadow: 0 0 0 10px rgba(187,0,0,.5) } }