/* 병동폰 모바일 웹앱(js/mobile/shell.js · screens/phone.js · mobile/*.js) — 관리자 셸 없이, 한 손·엄지 기준. 색·길이는 tokens.css 변수만. */

/* ───────── 셸 ───────── */
body.m-mode { background: var(--bg); }
body.m-mode .notice-strip { height: 1.375rem; font-size: 11px; }
.m-app { min-height: calc(100dvh - var(--strip-h)); display: flex; justify-content: center; background: var(--bg); }
.m-frame { position: relative; width: 100%; max-width: 440px; min-height: calc(100dvh - var(--strip-h)); display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); }
/* 넓은 화면(PC·태블릿 가로)에서는 가운데 폰 크기 프레임 — 늘어나지 않게 */
@media (min-width: 640px) {
  .m-app { padding: var(--s-5) var(--s-4); background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand) 8%, var(--bg)), var(--bg) 60%); }
  .m-frame { height: calc(100dvh - var(--strip-h) - 2 * var(--s-5)); min-height: 0; max-height: 920px; border: 1px solid var(--border); border-radius: 32px; overflow: hidden; box-shadow: 0 30px 80px -30px rgb(0 0 0 / .45), 0 0 0 8px color-mix(in srgb, var(--surface-2) 70%, transparent); }
  .m-view { overflow-y: auto; overscroll-behavior: contain; }
}

.m-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: calc(env(safe-area-inset-top) + .625rem) var(--s-4) .625rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.m-id { display: grid; min-width: 0; line-height: 1.2; }
.m-ward { font-size: 1.0625rem; font-weight: 750; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-who { color: var(--text-2); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-tools { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.m-conn { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--fs-12); }
.m-conn i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--st-delay-line); }
.m-conn[data-conn="live"] i { background: var(--st-done-line); animation: mo-breath var(--d-breath) var(--ease-in-out) var(--loop); }
.m-conn[data-conn="live"] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* 실시간이면 점만 */
.m-push { display: inline-flex; align-items: center; gap: 4px; min-height: 2.25rem; padding: 0 .75rem; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: var(--fs-12); font-weight: 650; cursor: pointer;
  background: var(--st-delay-bg); color: var(--st-delay-fg); transition: transform var(--d-fast) var(--ease), background-color var(--d-base) var(--ease); }
.m-push svg { width: 1rem; height: 1rem; }
.m-push[data-state="on"] { background: var(--st-done-bg); color: var(--st-done-fg); }
.m-push:active { transform: scale(.96); }
.m-admin { display: inline-flex; align-items: center; gap: 4px; min-height: 2.25rem; padding: 0 .625rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-12); text-decoration: none; }
.m-admin svg { width: 1rem; height: 1rem; }

.m-view { min-height: 0; padding: var(--s-3) var(--s-4) calc(5.5rem + env(safe-area-inset-bottom)); }
.m-view:focus { outline: none; }

.m-tabs { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); padding: .375rem var(--s-2) calc(.375rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-top: 1px solid var(--border); }
@media (max-width: 639px) { .m-tabs { position: fixed; left: 0; right: 0; } }
.m-tab { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 3.5rem; padding-top: .375rem; border-radius: 14px; color: var(--text-2); text-decoration: none; font-size: 11px; font-weight: 600;
  transition: color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); -webkit-tap-highlight-color: transparent; }
.m-tab:active { transform: scale(.94); }
.m-tab-ico { position: relative; display: grid; place-items: center; width: 3rem; height: 1.875rem; border-radius: 999px; transition: background-color var(--d-base) var(--ease); }
.m-tab-ico svg { width: 1.375rem; height: 1.375rem; }
.m-tab[aria-current="page"] { color: var(--brand); }
.m-tab[aria-current="page"] .m-tab-ico { background: var(--brand-soft); color: var(--brand-soft-fg); }
.m-badge { position: absolute; top: -4px; right: 2px; min-width: 1.125rem; height: 1.125rem; padding: 0 4px; border-radius: 999px; background: var(--st-critical-line); color: var(--brand-fg); font-size: 10px; font-weight: 800; line-height: 1.125rem; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.m-setup { display: grid; gap: var(--s-3); }

/* ───────── 알림(screens/phone.js) ───────── */
.ph { display: grid; gap: var(--s-3); }
.ph-head { display: flex; align-items: center; min-height: 2rem; }
.ph-sub { color: var(--text-2); font-size: var(--fs-14); }
.ph-sub b { color: var(--text); font-size: 1.0625rem; }
.ph-sub em { font-style: normal; color: var(--st-critical-fg); font-weight: 700; }
.ph-sub svg { width: 1rem; height: 1rem; vertical-align: -2px; color: var(--st-done-line); }
.ph-hint { display: flex; align-items: center; gap: 6px; margin: var(--s-2) 0 0; color: var(--text-3, var(--text-2)); font-size: var(--fs-12); }
.ph-hint svg { width: .875rem; height: .875rem; }
/* 카드: 바깥(테두리·띠·밀기 배경) + 안쪽(내용 — 손가락을 따라 움직임) */
.ph-card { padding: 0; display: block; touch-action: pan-y; }
.ph-in { position: relative; z-index: 1; display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + .375rem); background: inherit; transform: translateX(var(--sx, 0)); transition: transform var(--d-base) var(--ease-spring); }
.ph-card.is-swiping .ph-in { transition: none; }
.ph-card::before { z-index: 2; }
.ph-swipe-bg { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-5); font-weight: 750; font-size: var(--fs-14); }
.ph-swipe-bg span { display: inline-flex; align-items: center; gap: 6px; opacity: .35; transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.ph-swipe-bg svg { width: 1.25rem; height: 1.25rem; }
.ph-sw-ack { color: var(--st-done-fg); }
.ph-sw-sheet { color: var(--st-active-fg); }
.ph-card[data-swipe="ack"] .ph-swipe-bg { background: var(--st-done-bg); }
.ph-card[data-swipe="ack"] .ph-sw-ack, .ph-card[data-swipe="sheet"] .ph-sw-sheet { opacity: 1; transform: scale(1.06); }
.ph-card[data-swipe="sheet"] .ph-swipe-bg { background: var(--st-active-bg); }
/* 처리 완료: 체크가 그려진 뒤 접힌다(motion.css .mo-check) */
.ph-done { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 6px; background: color-mix(in srgb, var(--st-done-bg) 94%, transparent); color: var(--st-done-fg); }
.ph-done-ico svg { width: 2.5rem; height: 2.5rem; stroke-width: 2.6; }
.ph-card.is-done { animation: ph-out var(--d-slow) var(--ease) calc(var(--d-slow) * 1.4) forwards; }
@keyframes ph-out { to { transform: scale(.96) translateY(-4px); opacity: 0; } }

/* ───────── 내 담당 침대 · 기록 · 내 정보 ───────── */
.mb, .ml, .mm { display: grid; gap: var(--s-3); }
.mb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.mb-head h1, .mm h2 { font-size: 1.25rem; letter-spacing: -.01em; }
.mm h2 { font-size: var(--fs-14); color: var(--text-2); font-weight: 650; margin: 0; }
.mb-sub { margin: 0; font-size: var(--fs-13); }
.mb-list, .ml-list { display: grid; gap: var(--s-2); }
.mb-card { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; animation: mo-rise var(--d-slow) var(--ease) both; }
.mb-card[data-role="backup"] { border-style: dashed; }
.mb-card[data-st="critical"] { border-color: color-mix(in srgb, var(--st-critical-line) 50%, var(--border)); }
.mb-card[data-st="delay"] { border-color: color-mix(in srgb, var(--st-delay-line) 50%, var(--border)); }
.mb-main { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; width: 100%; min-height: 4.25rem; padding: var(--s-3) var(--s-4); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mb-label { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 3.25rem; }
.mb-txt { display: grid; min-width: 0; }
.mb-txt b { font-size: var(--fs-15, 15px); }
.mb-txt small { color: var(--text-2); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-side { display: grid; justify-items: end; gap: 4px; }
.mb-time { color: var(--text-2); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.mb-bar { height: 4px; background: var(--surface-2); }
.mb-bar i { display: block; height: 100%; background: var(--st-done-line); border-radius: 0 4px 4px 0; transition: width var(--d-slow) var(--ease); }
.mb-bar[data-lv="soon"] i { background: var(--st-due-line); }
.mb-bar[data-lv="over"] i { background: var(--st-delay-line); }
.mb-more { display: grid; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); border-top: 1px solid var(--border); animation: mo-rise var(--d-base) var(--ease) both; }
.mb-al { display: grid; gap: var(--s-2); }
.mb-al-h { display: flex; justify-content: space-between; gap: var(--s-2); }
.ml-row { display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.ml-time { color: var(--text-2); font-size: var(--fs-13); }
.ml-main { display: grid; gap: 2px; min-width: 0; }
.ml-ok { color: var(--st-done-line); }
.ml-ok svg { width: 1.125rem; height: 1.125rem; }
.mm-card { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.mm-card .pc-card { border: 0; padding: 0; background: none; }
.mm-who { grid-template-columns: auto 1fr; align-items: center; }
.mm-who > div { display: grid; gap: 2px; }
.mm-av { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand-soft-fg); font-size: 1.25rem; font-weight: 800; }
.mm-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 2.75rem; }
.mm-row svg { width: 1rem; height: 1rem; vertical-align: -2px; color: var(--text-2); }
.mm-ok { color: var(--st-done-fg); font-weight: 650; font-size: var(--fs-13); }
.mm-devs { display: grid; gap: var(--s-2); }
.mm-dev { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2); align-items: center; }
.mm-dev > div { display: grid; }
.mm-dev svg { width: 1.125rem; height: 1.125rem; color: var(--text-2); }
.mm-links { gap: 0; padding: var(--s-1) 0; }
.mm-link { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; min-height: 3.25rem; padding: 0 var(--s-4); border: 0; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.mm-link + .mm-link { border-top: 1px solid var(--border); }
.mm-link svg { width: 1.125rem; height: 1.125rem; color: var(--text-2); }
.mm-out { color: var(--st-critical-fg); }
.mm-foot { text-align: center; font-size: var(--fs-12); margin: 0; }
/* 안내 시트 안의 설정 카드: 시트 제목과 겹치는 머리는 숨기고 단계·단추만 */
.m-setup .pc-card { border: 0; padding: 0; background: none; }
.m-setup .pc-head { display: none; }
.m-setup .pc-card[data-state="on"] .pc-head { display: flex; }
.mm-row > span:first-child { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ───────── 프레임 안 띄우기(PC 폭): 시트·창·토스트를 폰 프레임 안에 가둔다. 위치는 shell.js 가 --m-frame-* 로 알려 준다 ───────── */
@media (min-width: 640px) {
  body.m-mode dialog.dlg.dlg-sheet { position: fixed; margin: 0; inset: auto auto var(--m-frame-b, 0px) var(--m-frame-l, 0px);
    width: var(--m-frame-w, 440px); max-width: var(--m-frame-w, 440px); max-height: calc(100dvh - var(--m-frame-t, 0px) - var(--m-frame-b, 0px) - 2rem);
    border-radius: var(--r-panel) var(--r-panel) 32px 32px; border: 1px solid var(--border); padding-bottom: 0; }
  body.m-mode dialog.dlg:not(.dlg-sheet) { max-width: calc(var(--m-frame-w, 440px) - 2rem); }
  body.m-mode .toasts { left: var(--m-frame-l, 50%); right: auto; width: var(--m-frame-w, 440px); padding: 0 var(--s-3); box-sizing: border-box;
    bottom: calc(var(--m-frame-b, 0px) + 5rem); justify-items: stretch; }
}