/* 병동폰(#/phone) · 병실 스피커 콘솔(#/speaker) 전용 스타일. 색은 tokens.css 변수만 쓴다. */

/* ───────── 병동폰 ───────── */
body.is-phone .alarm-banner { display: none; }
.page.ph { gap: var(--s-4); }
.ph-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.ph-head-t { display: grid; gap: var(--s-1); min-width: 0; }
.ph-title { font-size: var(--fs-24); line-height: var(--lh-tight); letter-spacing: var(--tracking-title); font-weight: 750; }
.ph-sub { color: var(--text-2); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.ph-notice { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-ctl); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-13); }
.ph-notice .icon { width: 1rem; height: 1rem; flex: none; }
.ph-slot { display: grid; gap: var(--s-3); }
.ph-slot:empty, .ph-sound:empty { display: none; }

.ph-sound-btn { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 4rem; padding: var(--s-3) var(--s-4); text-align: left; border-radius: var(--r-card); border: 1px solid var(--st-delay-line); background: var(--st-delay-bg); color: var(--st-delay-fg); cursor: pointer; font: inherit; }
.ph-sound-btn:hover { background: color-mix(in srgb, var(--st-delay-line) 16%, var(--surface)); }
.ph-sound-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: color-mix(in srgb, var(--st-delay-line) 18%, transparent); flex: none; }
.ph-sound-ico .icon { width: 1.375rem; height: 1.375rem; }
.ph-sound-t { display: grid; gap: 2px; }
.ph-sound-t b { font-size: var(--fs-16); }
.ph-sound-t small { font-size: var(--fs-13); opacity: .85; }
.ph-sound-on { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-13); font-weight: 550; }
.ph-sound-on .icon { width: 1rem; height: 1rem; color: var(--st-done-line); }
.ph-sound-m { color: var(--st-delay-fg); }

.ph-list { display: grid; gap: var(--s-3); }
.ph-empty .empty-state { padding-block: var(--s-8); }

.ph-card { --_line: var(--st-normal-line); position: relative; display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + .375rem); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.ph-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .375rem; background: var(--_line); }
.ph-card[data-lv="p1"] { --_line: var(--st-critical-line); background: color-mix(in srgb, var(--st-critical-line) 6%, var(--surface)); border-color: color-mix(in srgb, var(--st-critical-line) 40%, var(--border)); }
.ph-card[data-lv="p2"] { --_line: var(--st-delay-line); }
.ph-card[data-lv="p3"] { --_line: var(--st-caution-line); }
.ph-card[data-alarm="on"] { animation: ph-pulse var(--d-pulse) var(--ease) var(--loop); }
.ph-card[data-mode="mine"] { border-color: var(--st-active-line); background: color-mix(in srgb, var(--st-active-line) 6%, var(--surface)); }
.ph-card[data-mode="mine"]::before { background: var(--st-active-line); }
.ph-card[data-mode="taken"], .ph-card[data-mode="held"] { opacity: .92; }
.ph-card.is-new { animation: ph-in var(--d-slow) var(--ease); }
@keyframes ph-in { from { transform: translateY(.5rem) scale(.985); } to { transform: none; } } /* transform 만: 숨은 탭에서도 내용이 보이게 */
@keyframes ph-pulse { 0% { box-shadow: 0 0 0 0 var(--glow-critical); } 70%, 100% { box-shadow: 0 0 0 .625rem transparent; } }

.ph-top { display: flex; align-items: center; gap: var(--s-3); }
.ph-lv .lv { height: 1.5rem; min-width: 2.125rem; font-size: var(--fs-13); }
.ph-bed { font-size: var(--fs-32); line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ph-card[data-lv="p1"] .ph-bed { color: var(--st-critical-fg); }
.ph-age { color: var(--text-2); font-size: var(--fs-13); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-sum { font-size: var(--fs-16); font-weight: 600; line-height: 1.4; }
.ph-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ph-meta[hidden], .ph-status[hidden], .ph-actions[hidden] { display: none; }
.ph-going { display: inline-flex; align-items: center; gap: var(--s-2); width: fit-content; max-width: 100%; padding: .375rem .75rem; border-radius: var(--r-full); background: var(--st-normal-bg); color: var(--st-normal-fg); font-size: var(--fs-14); font-weight: 650; }
.ph-going .icon { width: 1rem; height: 1rem; }
.ph-going.is-mine { background: var(--st-active-bg); color: var(--st-active-fg); }
.ph-going.is-held { background: var(--st-due-bg); color: var(--st-due-fg); }
.ph-going.is-check { background: var(--st-caution-bg); color: var(--st-caution-fg); }
.ph-actions { display: grid; gap: var(--s-2); }
.ph-go { min-height: 3.5rem; font-size: var(--fs-16); font-weight: 700; border-radius: var(--r-card); }
.ph-go .icon { width: 1.25rem; height: 1.25rem; }
.ph-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.ph-row2 .btn:only-child { grid-column: 1 / -1; }
.ph-row2 .btn { min-height: 3rem; }
.ph-note:empty { display: none; }

/* 사유 시트 */
.ph-sheet { display: grid; gap: var(--s-3); }
.ph-sheet-l { color: var(--text-2); font-size: var(--fs-13); font-weight: 650; }
.ph-reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
.ph-reason { min-height: 3rem; padding: var(--s-2) var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-16); font-weight: 600; cursor: pointer; }
.ph-reason:hover { background: var(--surface-2); }
.ph-reason[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-soft-fg); box-shadow: inset 0 0 0 1px var(--brand); }
.ph-minutes { display: grid; gap: var(--s-2); }
.ph-minutes[hidden] { display: none; }
.ph-text { width: 100%; }

@media (min-width: 769px) {
  .page.ph { max-width: 44rem; }
  .ph-card { padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + .375rem); }
  .ph-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-card[data-alarm="on"] { animation: none; box-shadow: 0 0 0 2px var(--st-critical-line); }
  .ph-card.is-new { animation: none; }
}

/* ───────── 병실 스피커 콘솔 ───────── */
.sp-view { padding: 0; max-width: none; }
.sp-root { min-height: calc(100dvh - var(--strip-h)); background: var(--bg); display: flex; }
.sp-console { flex: 1; display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-6) var(--s-7); width: 100%; max-width: 90rem; margin: 0 auto; }
.sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.sp-head-l { display: grid; gap: var(--s-2); min-width: 0; }
.sp-eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-14); font-weight: 650; letter-spacing: .02em; }
.sp-eyebrow .icon { width: 1.125rem; height: 1.125rem; color: var(--brand); }
.sp-room { font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.sp-sub { color: var(--text-2); font-size: var(--fs-16); font-variant-numeric: tabular-nums; }
.sp-conn { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }

.sp-main { flex: 1; display: grid; gap: var(--s-5); align-content: center; }
.sp-idle { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-9) var(--s-4); text-align: center; color: var(--text-2); }
.sp-idle-ico { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.sp-idle-ico .icon { width: 2.25rem; height: 2.25rem; }
.sp-idle-t { font-size: var(--fs-32); font-weight: 750; color: var(--text); letter-spacing: var(--tracking-title); }
.sp-idle-s { font-size: var(--fs-20); max-width: 32rem; }

.sp-unlock { display: grid; justify-items: center; gap: var(--s-2); width: 100%; padding: var(--s-6) var(--s-5); border: 2px dashed var(--st-delay-line); border-radius: var(--r-panel); background: var(--st-delay-bg); color: var(--st-delay-fg); cursor: pointer; font: inherit; text-align: center; }
.sp-unlock:hover { background: color-mix(in srgb, var(--st-delay-line) 16%, var(--surface)); }
.sp-unlock-ico .icon { width: 2.5rem; height: 2.5rem; }
.sp-unlock-t { font-size: var(--fs-24); font-weight: 750; }
.sp-unlock-s { font-size: var(--fs-14); opacity: .9; max-width: 34rem; }

.sp-ann { display: grid; gap: var(--s-5); padding: var(--s-7); border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--shadow-1); }
.sp-ann.is-active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-2); }
.sp-ann-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); color: var(--text-2); font-size: var(--fs-16); font-weight: 650; }
.sp-ann-state { display: inline-flex; align-items: center; gap: var(--s-2); }
.sp-ann.is-active .sp-ann-state { color: var(--brand-soft-fg); }
.sp-ann-bed { font-variant-numeric: tabular-nums; color: var(--text); }
.sp-eq { width: .75rem; height: .75rem; border-radius: 50%; background: var(--brand); animation: sp-beat var(--d-beat) var(--ease) var(--loop); }
@keyframes sp-beat { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
.sp-lines { display: grid; gap: var(--s-4); }
.sp-line { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-2) var(--s-4); align-items: start; padding: var(--s-4) 0; border-top: 1px solid var(--hairline); }
.sp-line:first-child { border-top: 0; padding-top: 0; }
.sp-lang { display: grid; justify-items: center; gap: 2px; width: 4.5rem; padding: var(--s-2) 0; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--text); font-size: var(--fs-24); font-weight: 750; line-height: 1.1; }
.sp-lang small { font-size: var(--fs-12); font-weight: 600; color: var(--text-2); }
.sp-text { font-size: clamp(1.5rem, 3.6vw, 3rem); line-height: 1.3; font-weight: 650; letter-spacing: -.01em; overflow-wrap: anywhere; word-break: keep-all; }
.sp-empty { color: var(--text-2); font-size: var(--fs-20); }
.sp-line[data-status="wait"] .sp-text { color: var(--text-2); }
.sp-line[data-status="speaking"] .sp-lang { background: var(--brand); color: var(--brand-fg); }
.sp-line[data-status="speaking"] .sp-lang small { color: inherit; opacity: .85; }
.sp-note { grid-column: 2; display: inline-flex; align-items: center; gap: var(--s-2); width: fit-content; padding: .25rem .625rem; border-radius: var(--r-chip); background: var(--st-normal-bg); color: var(--st-normal-fg); font-size: var(--fs-14); font-weight: 600; }
.sp-note .icon { width: 1rem; height: 1rem; }
.sp-note.warn { background: var(--st-delay-bg); color: var(--st-delay-fg); }
.sp-note.ok { background: var(--st-done-bg); color: var(--st-done-fg); }

.sp-foot { position: sticky; bottom: 0; z-index: var(--z-sticky); background: var(--bg); padding-bottom: var(--s-4); margin-bottom: calc(var(--s-4) * -1); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding-top: var(--s-4); border-top: 1px solid var(--border); }
.sp-vol-wrap { display: flex; align-items: center; gap: var(--s-3); flex: 1 1 18rem; max-width: 30rem; color: var(--text-2); }
.sp-vol-wrap .icon { width: 1.5rem; height: 1.5rem; flex: none; }
.sp-vol { flex: 1; min-width: 0; height: 2.5rem; accent-color: var(--brand); }
.sp-vol-out { min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text); }
.sp-foot-r { display: flex; gap: var(--s-3); flex-wrap: wrap; }

.sp-pair { flex: 1; display: grid; place-items: center; padding: var(--s-6) var(--s-4); }
.sp-pair-card { width: 100%; max-width: 26rem; display: grid; gap: var(--s-4); padding: var(--s-7) var(--s-6); border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--shadow-2); text-align: center; justify-items: center; }
.sp-pair-ico { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--r-card); background: var(--brand-soft); color: var(--brand); }
.sp-pair-ico .icon { width: 2rem; height: 2rem; }
.sp-code { width: 100%; height: 4.5rem; text-align: center; font-size: clamp(1.5rem, 9vw, 2.25rem); font-weight: 750; letter-spacing: .3em; padding: 0 0 0 .3em; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.sp-go { width: 100%; }
.sp-msg { width: 100%; text-align: left; }
.sp-msg:empty { display: none; }
.sp-fine { color: var(--text-3); font-size: var(--fs-13); }

@media (max-width: 768px) {
  .sp-console { padding: var(--s-4); gap: var(--s-4); }
  .sp-ann { padding: var(--s-5); }
  .sp-line { grid-template-columns: 3.25rem 1fr; }
  .sp-lang { width: 3.25rem; font-size: var(--fs-20); }
  .sp-note { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .sp-eq { animation: none; } }

.ph-report { min-height: 3rem; }
.ph-fa { display: flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; padding: 0 var(--s-1); color: var(--text-2); }
.ph-fa input { width: 1.25rem; height: 1.25rem; }

/* 병동폰 단추 통일: 알림 처리 영역(bed.css .al-primary/.al-tile)과 같은 크기·모양 — 바쁜 손으로도 누르기 쉽게 */
.ph-go { min-height: 4rem; font-size: 1.125rem; border-radius: 16px; letter-spacing: -.01em; box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / .16); transition: transform var(--d-fast) var(--ease), filter var(--d-fast) var(--ease); }
.ph-go:active { transform: scale(.98); }
.ph-go.btn-danger { box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--st-critical-line) 75%, transparent), inset 0 1px 0 rgb(255 255 255 / .18); }
.ph-go .icon { width: 1.5rem; height: 1.5rem; }
.ph-row2 .btn, .ph-report { min-height: 4rem; flex-direction: column; justify-content: center; gap: 4px; padding: var(--s-2); border-radius: 14px; font-size: .9375rem; font-weight: 600; }
.ph-row2 .btn .icon, .ph-report .icon { width: 1.5rem; height: 1.5rem; color: var(--brand); }
.ph-report { width: 100%; }

/* 이 폰으로 알림 받기(푸시 설정 카드) */
.pc-card { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.pc-card[data-state="on"] { border-color: color-mix(in srgb, var(--st-done-line) 45%, var(--border)); }
.pc-card[data-state="blocked"] { border-color: color-mix(in srgb, var(--st-delay-line) 50%, var(--border)); }
.pc-head { display: flex; gap: var(--s-3); align-items: flex-start; }
.pc-head > div { display: grid; gap: 2px; min-width: 0; }
.pc-head b { font-size: 1.0625rem; }
.pc-head .muted { font-size: var(--fs-13); line-height: 1.4; }
.pc-ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; background: var(--brand-soft); color: var(--brand-soft-fg); }
.pc-card[data-state="on"] .pc-ico { background: var(--st-done-bg); color: var(--st-done-fg); }
.pc-ico svg { width: 1.375rem; height: 1.375rem; }
.pc-steps { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.pc-step { display: inline-flex; align-items: center; gap: 6px; min-height: 1.875rem; padding: 0 var(--s-3); border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-12); }
.pc-step i { display: inline-grid; place-items: center; width: .875rem; height: .875rem; }
.pc-step i svg { width: .875rem; height: .875rem; }
.pc-step[data-state="done"] { background: var(--st-done-bg); border-color: transparent; color: var(--st-done-fg); }
.pc-step[data-state="todo"] { border-color: var(--brand); color: var(--brand-soft-fg); font-weight: 600; }
.pc-step[data-state="blocked"] { opacity: .6; }
.pc-step[data-state="optional"] { border-style: dashed; color: var(--text-2); }
.pc-install { display: flex; gap: 6px; align-items: flex-start; }
.pc-install svg { flex: none; width: .875rem; height: .875rem; margin-top: 3px; }
.pc-blocked { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; padding: var(--s-3); border-radius: var(--r-ctl); background: var(--st-delay-bg); color: var(--st-delay-fg); font-size: var(--fs-13); line-height: 1.4; }
.pc-blocked svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 1px; }
.pc-hint { margin: 0; font-size: var(--fs-13); }
.pc-actions { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.pc-actions .al-primary { grid-column: 1 / -1; }

/* 지금 할 일 1개(docs/FLOW-REDESIGN.md §3): 맨 위 카드만 크게, 나머지는 한 줄 + 주 단추 하나 */
.ph-sub > span { display: inline-flex; align-items: center; gap: 6px; }
.ph-sub svg { width: 1rem; height: 1rem; color: var(--st-done-fg); }
.ph-card[data-compact="1"] { gap: var(--s-2); padding-top: .75rem; padding-bottom: .75rem; box-shadow: none; }
.ph-card[data-compact="1"] .ph-in { gap: var(--s-2); }
.ph-card[data-compact="1"] .ph-bed { font-size: 1.5rem; }
.ph-card[data-compact="1"] .ph-sum { font-size: var(--fs-14); }
.ph-card[data-compact="1"] .ph-meta { display: none; }
.ph-card[data-compact="1"] .ph-go { min-height: 2.75rem; font-size: 1rem; }
.fc[data-compact="1"] .fc-meta { display: none; }