/* tokens.css 에 없는 이 앱만의 모양 */
[hidden] { display: none !important; }   /* .btn·.tabbar 같은 display 규칙보다 hidden 이 이긴다 */

#offline-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  background: var(--bad-bg); color: var(--bad);
  padding: var(--s1) var(--s2);
}

main.app > section { padding-top: var(--s2); }
main.app > h1.t-title:first-child { padding-top: var(--s2); }   /* 제목으로 시작하는 화면도 위가 붙지 않게 (section 과 같은 16) */

/* 구독 안내 띠 (5단계) — 화면 맨 위, 흐름 안에 (고정 아님) */
.sub-banner { margin: var(--s2) 0 0; padding: var(--s1) var(--s2); border-radius: var(--radius); background: var(--warn-bg); color: var(--warn); }

/* 대기 목록 */
#room-tabs button { min-height: var(--tap); }
#queue-body { margin-top: var(--s2); }
.q-head { margin: 0 0 var(--s1); font-weight: 600; }
.q-row { cursor: pointer; }
.q-row .num, .list-item .num { min-width: 44px; text-align: center; flex: none; }
.list-item .badge { margin-top: 4px; }
.q-actions { display: flex; gap: var(--s1); flex: none; }
.fix-row > .btn { flex: none; }   /* 상세 팝업의 되돌리기·건너뛰기 글자 버튼은 글자 폭만큼 */
.q-top { display: none; }          /* PC 만 (아래 960px) */
.q-bar { display: contents; }      /* 폰은 예약 줄 → 고르기 순서 그대로 */

/* PC(960px 이상) — ADR-043. 폰 화면은 이 블록 밖이라 그대로 */
:root { --side-w: 200px; --pc-max: 1200px; --pc-list: minmax(360px, 440px); --pc-btn-w: 160px; }
/* 왼쪽 세로 메뉴 폭 · PC 본문 최대 폭 · 목록+오른쪽 칸 화면(입원·간호사실)의 왼쪽 목록 폭 · 머리 줄·오른쪽 칸 주 버튼 최소 폭 */
@media (min-width: 960px) {
  /* 직원 화면 공통: 아래 탭 바 → 왼쪽 세로 메뉴. 탭 바가 보이는 화면만 본문을 오른쪽으로 민다 (메신저 새 창 제외) */
  body:not(.chat-pop):has(.app-foot:not([hidden]) #tabbar) { padding-left: var(--side-w); }
  .app-foot #tabbar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--side-w); flex-direction: column; gap: 4px;
    padding: var(--s3) var(--s2); border-top: 0; border-right: 1px solid var(--line); }
  .app-foot #tabbar a { flex: none; display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 0 12px;
    border-radius: var(--radius-sm); font-size: var(--fs-body); }
  .app-foot #tabbar a svg { width: 20px; height: 20px; }
  .app-foot #tabbar a[aria-current="page"] { background: var(--ink-soft); }
  body.chat-room-open:not(.chat-pop) .app-foot { left: var(--side-w); }   /* 바닥에 고정한 입력 줄이 메뉴를 덮지 않게 */
  /* 아래 주 버튼 띠는 본문(480px) 폭에 맞춘다 — 메뉴 오른쪽 전체로 퍼지면 버튼만 너무 길다 */
  .app-foot .bottom-bar { max-width: var(--app-max); margin: 0 auto; border-top: 0; background: var(--page); }   /* 바탕색: 스크롤 때 뒤 글자가 비치지 않게 */

  /* 대기 화면: 위에 숫자 4칸, 아래 한 표 (TASTE 2026-10-26 시안 C) */
  main.app.is-wide { max-width: var(--pc-max); padding: var(--s3); }
  .is-wide .q-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); }
  /* PC 머리 줄 주 버튼 — 대기 [+ 접수] · 입원 [+ 입원 등록] 같은 폭 */
  .is-wide .q-top .btn-primary, .ip-top #btn-admit-top { min-width: var(--pc-btn-w); }
  .is-wide .q-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-bottom: var(--s3); }
  .q-stats .stat .label { display: block; font-size: var(--fs-cap); color: var(--muted); margin-bottom: 4px; }
  .is-wide .q-bar { display: flex; align-items: center; gap: var(--s2); }
  .is-wide .q-bar .seg { flex: 0 1 520px; }
  .is-wide .q-bar .res-link { order: 2; margin: 0 0 0 auto; }

  /* 입원 화면: 왼쪽 목록 + 오른쪽 상세·등록·시간표 (ADR-044, TASTE 2026-10-26 시안 A) */
  main.app.ip-app { max-width: var(--pc-max); padding: var(--s3); display: grid; gap: 0 var(--s3); align-items: start;
    grid-template-columns: var(--pc-list) minmax(0, 1fr); }
  .ip-app > .ip-top, .ip-app > .q-stats, .ip-app > .sub-banner { grid-column: 1 / -1; }   /* 제목 줄·숫자 4칸·구독 안내 띠는 두 칸 위에 걸쳐 (ADR-046) */
  .ip-app > #list { grid-column: 1; grid-row: 3; }
  /* 오른쪽 칸은 화면 높이 안에서 따로 스크롤 — 저장·취소 띠가 칸 바닥에 붙는다 */
  .ip-app > #form, .ip-app > #schedule, .ip-app > #ip-pick { grid-column: 2; grid-row: 3; position: sticky; top: var(--s3);
    max-height: calc(100vh - var(--s3) * 4); overflow-y: auto; background: var(--bg);   /* 위 여백·[화면 보기] 띠가 있어도 바닥 줄이 화면 안에 */
    border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s2) 0; }
  .ip-app > #ip-pick { padding-bottom: var(--s2); color: var(--muted); }
  .ip-top #btn-admit-top { display: inline-flex; }

  /* 간호사실 (ADR-045, TASTE 2026-10-26 'b숫자+ c'): 제목 줄 한 줄 · 숫자 4칸(.q-stats) · 왼쪽 목록 + 오른쪽 기록 */
  .nc-top { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
  .is-wide .nc-top > h1.t-title { padding-top: 0; }   /* 폰 규칙이 이 블록 뒤에 있어 한 단계 높게 */
  .nc-top .card-head { flex: 1; margin: 0; }

  /* ── PC 기본 틀 (ADR-046, TASTE 확정): 숫자 4칸(.q-stats) 아래 두 칸 — 왼쪽 목록 + 오른쪽 칸(.pc-side) ── */
  .pc-two { display: grid; grid-template-columns: var(--pc-list) minmax(0, 1fr); gap: var(--s3); align-items: start; }
  .pc-side { position: sticky; top: var(--s3); padding: var(--s3); max-height: calc(100vh - var(--s3) * 4); overflow-y: auto; }
  .pc-side > .state { padding: 0; color: var(--muted); }
  .pc-side > .t-title { margin-bottom: var(--s2); }
  .pc-side-foot { display: flex; gap: var(--s1); border-top: 1px solid var(--line); padding-top: var(--s2); margin-top: var(--s2); }
  .pc-side-foot .btn-primary { margin-left: auto; min-width: var(--pc-btn-w); }
  /* 칸 맨 끝 버튼 줄은 칸 안에서 스크롤해도 바닥에 붙어 있게 (긴 입력 폼 — 예약) */
  .pc-side > .pc-side-foot:last-child { position: sticky; bottom: calc(var(--s3) * -1); background: var(--bg); padding-bottom: var(--s3); }
  /* 머리 줄은 모든 PC 화면이 같은 높이(주 버튼 48px)·같은 아래 간격 — 버튼이 없는 화면(회진·부서 요청·직원 관리)도 (TASTE 2026-10-27) */
  main.app.is-wide > h1.t-title:first-child, main.app.is-wide > #staff > h1.t-title, .is-wide .q-top, .ip-app .ip-top, .is-wide .nc-top, .is-wide .pc-top, .is-wide .chat-top {
    min-height: 48px; padding-top: 0; margin-bottom: var(--s3); display: flex; align-items: center; }
  /* 머리 줄: 제목 + 주 버튼(PC 만) — 목록 화면 공통. 아래 주 버튼 띠는 PC 에서 숨긴다 */
  .pc-top { justify-content: space-between; gap: var(--s2); }
  main.app.is-wide > section { padding-top: 0; }   /* 대기·직원 관리 화면 묶음의 위 여백 — 머리 줄 높이로 맞춘다 */
  .pc-top-btns { display: flex; gap: var(--s1); }
  .pc-top .pc-only { display: inline-flex; min-width: var(--pc-btn-w); }
  main.app.is-wide > .seg { max-width: 520px; }   /* 탭·담당의 고르기가 1200px 로 늘어나지 않게 */
  /* 탭 칸은 글자 길이와 상관없이 같은 폭. 입원 탭은 왼쪽 목록 칸 안에 있어(시간표 모드가 목록을 바꾼다) 목록 폭을 따른다 */
  .is-wide .seg button { flex: 1 1 0; min-width: 0; }
  /* 예약: 날짜 넘기기 + 날짜 고르기를 한 줄로 (폰은 두 줄) — 목록이 다른 화면보다 아래로 밀리지 않게 */
  main.app.is-wide > .rs-month, main.app.is-wide > .rv-tools { display: inline-flex; vertical-align: middle; margin: 0 0 var(--s2); }
  main.app.is-wide > .rs-month { width: 420px; margin-right: var(--s2); }
  .iv-copy { resize: vertical; }   /* 재고 주문할 것 복사 미리보기 */
  /* 메신저 PC 두 칸 (ADR-047): 오른쪽 칸 = 방 머리 · 메시지(따로 스크롤) · 입력 줄 */
  .is-wide .chat-top .btn-primary { min-width: var(--pc-btn-w); margin-left: var(--s1); }
  .chat-pane { display: flex; flex-direction: column; padding: 0; height: calc(100vh - var(--s3) * 4); overflow: hidden; }
  .chat-pane > .state { padding: var(--s3); color: var(--muted); }
  .chat-pane .chat-room-head { position: static; padding: var(--s2) var(--s3); background: var(--bg); border-bottom: 1px solid var(--line); }
  .chat-pane-body { flex: 1; overflow-y: auto; padding: var(--s2) var(--s3); }
  .chat-pane-foot { border-top: 1px solid var(--line); padding: var(--s1) var(--s2); }
  .chat-pane-foot:empty { display: none; }
  .chat-room-row { user-select: none; }   /* 두 번 누를 때 글자가 선택되지 않게 */
  .pc-side > .section:first-child { margin-top: 0; }
  /* 회진: 담당의 고르기 폭, 지금 환자 칸 */
  .rd-now-label { display: block; font-size: var(--fs-cap); color: var(--muted); }
  .rd-now-name { font-size: var(--fs-num); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 4px 0; }
  .rd-now-room { color: var(--muted); font-weight: 500; }
  .rd-bar { height: 6px; border-radius: 3px; background: var(--fill); margin: var(--s2) 0 4px; overflow: hidden; }
  .rd-bar > span { display: block; height: 100%; background: var(--ink); }
  .pc-side-foot .rd-next { align-self: center; }
  .is-wide .round-list .list-item.is-current { margin: 0; border-radius: 0; box-shadow: inset 3px 0 0 var(--ink); }   /* 두 칸 안에서는 옆으로 튀어나오지 않게 */
  .is-wide .round-list .list-item { flex-wrap: nowrap; }   /* PC 는 [위로]·[아래로] 를 이름 옆 한 줄에 (폰은 둘째 줄) */
  .is-wide .round-list .row-btns { flex-basis: auto; }
  .nurse-list .ip-room { min-width: 88px; }   /* '305호 2병상' 과 '306호' 줄의 요청 이름 시작을 맞춘다 — 폰은 글자 자리가 모자라 그대로 */
  /* 병동 안 고름·불러오는 중·오류: 오른쪽 칸이 숨으면 한 칸으로, 빈 숫자 칸은 자리를 차지하지 않게 */
  .pc-two:not(:has(> .pc-side:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
  .is-wide .q-stats:empty { margin-bottom: 0; }
  .ip-app .ip-top { margin-bottom: var(--s3); padding-top: 0; }   /* 제목 줄 아래 숫자 칸 (대기·회진과 같은 간격) */
  .ip-app .list-item.is-sel, .pc-two .list-item.is-sel { background: var(--ink-soft); box-shadow: inset 3px 0 0 var(--ink); }
  .ip-app .list-item.is-sel .badge, .pc-two .list-item.is-sel .badge:not(.chat-unread) { background: var(--bg); }   /* 선택 줄 바탕과 같은 색이라 묻히지 않게 */
}
.ip-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); padding-top: var(--s2); }   /* 위 여백: 제목 줄이 목록 밖으로 나와서(ADR-046) 제목 줄이 맡는다 */
main.app.ip-app > #list { padding-top: 0; }
#btn-admit-top { display: none; }   /* PC 만 — 폰은 아래 띠 */
.pc-only { display: none; }   /* PC 머리 줄 주 버튼 (ADR-046) — 폰은 아래 띠 */
.pc-top { padding-top: var(--s2); }   /* 폰: main 첫 제목과 같은 위 여백 (PC 는 위 블록에서 0) */
.nc-top > h1.t-title { padding-top: var(--s2); }   /* 폰: main 첫 제목과 같은 위 여백 (PC 는 위 블록에서 0) */

/* 접수 버튼 + 아래 탭 바를 한 덩어리로 바닥에 고정 */
.app-foot { position: sticky; bottom: 0; z-index: 10; }
.app-foot .bottom-bar, .app-foot .tabbar { position: static; }

/* 팝업 */
.call-list { max-height: 50vh; overflow-y: auto; margin-bottom: var(--s2); }
.kv { display: grid; grid-template-columns: 72px 1fr; gap: var(--s1) 12px; margin: var(--s2) 0; }
.kv dd { margin: 0; white-space: pre-wrap; }
.modal .error { color: var(--bad); margin: var(--s1) 0 0; }

/* 접수 */
.field .opt { font-weight: 400; color: var(--muted); margin-left: 4px; }
#ci-rooms button, #jn-rooms button, #rv-rooms button { min-height: var(--tap); }
#ci-note-count { text-align: right; }
.form-alert { margin: 0; padding: 12px var(--s2); border: 1px solid var(--bad-line); border-radius: var(--radius); background: var(--bad-bg); color: var(--bad); font-size: var(--fs-cap); }
#ci-rooms button[aria-pressed="true"], #jn-rooms button[aria-pressed="true"], #rv-rooms button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.textarea[aria-invalid="true"] { border-color: var(--bad); }

/* 설정: 카드 안 목록은 테두리 없이 줄만 (카드 안 카드 금지) */
.set-list .list-item { padding: 6px 0; gap: var(--s1); }
.set-list .list-item.is-off .title { color: var(--muted); font-weight: 400; }
.set-name { min-height: var(--tap); border: 0; background: none; padding: 0; text-align: left; color: inherit; cursor: pointer; }
.set-move { padding: 0 10px; flex: none; }
.set-list .check { flex: none; gap: 6px; font-size: var(--fs-cap); }
.set-empty { padding: var(--s1) 0; }
.set-version { text-align: center; margin-top: var(--s2); }

/* 공개 대기 화면 — 폰은 위아래로 쌓고, 960px 이상(TV)은 4열·전체 폭·큰 글자 */
.pub { --pub-num: var(--fs-num); --pub-text: var(--fs-sub); }
.pub-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); padding: var(--s3) 0 var(--s2); }
#board { display: grid; gap: var(--s2); }
.pub-card { min-width: 0; }
.pub-room { margin-bottom: 12px; }
.pub-serving { display: flex; align-items: center; gap: var(--s2); padding: 12px; margin: 0 -12px var(--s1); border-radius: var(--radius); }
.pub-serving.is-fresh { background: var(--ink-soft); }
.pub-num { font-size: var(--pub-num); color: var(--ink); min-width: 2ch; flex: none; }
.pub-who { min-width: 0; display: grid; }
.pub-name { font-size: var(--pub-text); font-weight: 600; }
.pub-msg { font-size: var(--pub-text); color: var(--muted); }
.pub-count { margin: var(--s2) 0 var(--s1); font-size: var(--fs-cap); font-weight: 600; color: var(--muted); }
.pub-wait { list-style: none; margin: 0; padding: 0; }
.pub-wait li { display: flex; gap: 12px; padding: 4px 0; font-size: var(--pub-text); }
.pub-wnum { min-width: 2ch; font-weight: 600; }
.pub-qr { display: none; }   /* 960px 미만(환자 폰)에서는 숨긴다 — 자기 폰 화면의 QR 은 찍을 수 없다 */
.pub-empty { grid-column: 1 / -1; text-align: center; font-size: var(--pub-text); color: var(--muted); }
@media (min-width: 960px) {
  .pub { max-width: none; padding: 0 var(--s4) var(--s4); --pub-num: clamp(40px, 5vw, 96px); --pub-text: clamp(18px, 2vw, 36px); }
  .pub .t-title { font-size: clamp(20px, 2.4vw, 44px); }
  .pub #updated-at { font-size: clamp(13px, 1.4vw, 24px); }
  .pub .t-sub { font-size: clamp(16px, 2vw, 36px); }
  .pub-count { font-size: clamp(13px, 1.4vw, 24px); }
  #board { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .pub-qr { display: grid; justify-items: center; gap: 4px; width: max-content; margin: var(--s2) 0 0 auto; }
  .pub-qr .qr-img { width: 120px; }
}

/* 통계: 요약 3칸 + 날짜별 카드 안 줄 목록 (표 대신 — 390px 가로 스크롤 방지) */
.st-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); }
.st-rows { list-style: none; margin: 0; padding: 0; }
.st-rows li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--s1); padding: 6px 0; }
.st-rows li + li { border-top: 1px solid var(--line); }
a.btn { text-decoration: none; }

/* 내 대기 화면 — 핵심만 크게, 버튼은 바닥에 (TASTE 2026-10-22) */
.me-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); padding: var(--s3) 0 var(--s2); }
.me-head > p { margin: 0; }
.me-hero { padding: var(--s3) var(--s2); text-align: center; }
.me-hero .badge { margin-bottom: var(--s1); }
.me-title { margin: 0; }
.me-detail { margin: var(--s1) 0 0; }
.me-hero .btn-text { margin-top: var(--s2); }
.me-hero.is-serving { background: var(--ink-soft); }
.me-hero.is-serving .me-detail { font-size: var(--fs-sub); font-weight: 600; color: var(--text); }
.me-link { text-align: center; margin: var(--s3) 0 0; }

/* QR — 그림만 보여 준다(주소·열쇠는 글자로 쓰지 않는다). 라이브러리는 js/vendor/qrcode.js (ADR-012) */
.qr-box { display: grid; justify-items: center; gap: var(--s2); margin: var(--s2) 0; }
.qr-img { display: block; width: 240px; max-width: 100%; height: auto; }
.qr-sm { width: 96px; margin: 0 0 12px; }
.qr-lg { width: 300px; }
.qr-cap { margin: 0; font-size: var(--fs-sub); text-align: center; }
.print-only { display: none; }

/* 대기실 신청 QR 인쇄 — A4 한 장 가운데에 QR·문구만 (나머지 화면은 숨김) */
@media print {
  @page { size: A4 portrait; margin: 14mm; }
  body > *:not(#modal-root), .modal > *:not(.qr-print) { display: none !important; }
  #modal-root, .scrim, .modal {
    position: static; inset: auto; display: block; padding: 0; max-width: none;
    background: none; animation: none;
  }
  .qr-print { margin-top: 25mm; gap: 10mm; }
  .qr-print .qr-img { width: 90mm; image-rendering: pixelated; }   /* 늘려도 칸이 또렷하게 */
  .qr-print .print-only { display: block; }
  .qr-print .qr-title { margin: 0; font-size: 32pt; font-weight: 700; }
  .qr-print .maker { margin-top: 30mm; }
}

/* 접수 폼의 아래 고정 버튼 줄: .app 좌우 여백까지 펼쳐 양옆 틈으로 뒤 내용이 비치지 않게 */
#checkin-form .bottom-bar, #ip-form .bottom-bar, #schedule .bottom-bar { margin: 0 calc(var(--s2) * -1); }

/* 안내문 속 글자 링크 — 줄 높이는 그대로 두고 누르는 영역만 위아래로 넓힌다 */
.policy-link { color: var(--ink); text-decoration: underline; display: inline-block; padding: 13px 0; margin: -13px 0; }

/* ── 입원 ─────────────────────────────── */
.ip-room { flex: none; min-width: 72px; font-weight: 600; }
/* 치료 시간표 — design/schedule-admin/final.html */
.ip-mode { margin-bottom: var(--s3); }
.sl-slot { display: grid; grid-template-columns: 56px 1fr; gap: 0 var(--s1); }
.sl-slot + .sl-slot { margin-top: var(--s2); }
.sl-slot > b { padding-top: 18px; }
.sch-hd { display: flex; align-items: center; gap: var(--s1); padding: var(--s2) 0; }
.sch-hd .grow { flex: 1; min-width: 0; }
.sch-hd .t-cap { margin: 0; }
.sch-week { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.sch-day { display: grid; grid-template-columns: 40px 1fr; gap: var(--s1); padding: 12px var(--s2) 12px 12px; border-top: 1px solid var(--line); }
.sch-day:first-child { border-top: 0; }
.sch-day > b { padding-top: 11px; text-align: center; }
.sch-day.is-off > b { color: var(--muted); font-weight: 600; padding-top: 7px; }
.sch-items { min-width: 0; }
.sch-items > * + * { margin-top: var(--s1); }
.sch-item { display: grid; grid-template-columns: minmax(0, 1fr) 92px var(--tap); gap: 4px; }
.sch-item .error { grid-column: 1 / -1; margin: 0; }
.sch-items .btn-text { padding: 0; min-width: var(--tap); }
.sch-note { padding: 12px; margin: 0; }
.ip-rx { display: grid; grid-template-columns: 1fr 76px; align-items: center; gap: var(--s1); }

/* 입원환자 폰 — 머리에 꼭 필요한 것만, 치료는 카드 하나씩 (TASTE 2026-10-22 시안 C) */
.stay-head { padding: var(--s3) 0 var(--s2); }
.stay-head > p { margin: 0 0 2px; }
.stay-away { margin: 0; padding: 12px var(--s2); border-radius: var(--radius);
             background: var(--warn-bg); color: var(--warn); font-size: var(--fs-cap); }
.tx-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); }
.tx-card > p { margin: var(--s1) 0 0; }
.tx-card .btn { margin-top: 12px; }
.tx-card.is-serving { background: var(--ink-soft); }
.tx-card.is-serving .tx-msg { font-size: var(--fs-sub); font-weight: 600; }
.tx-card.is-done { color: var(--muted); }
/* 잠금 화면 알림 칸 — 큰 버튼이 아니라 카드 한 줄 */
.push-card { padding: var(--s1) var(--s2); }
.push-card .push-row { display: flex; align-items: center; gap: var(--s1); min-height: var(--tap); }
.push-card .push-row .grow { flex: 1; min-width: 0; font-weight: 600; }
.stay-call + .push-card { margin-top: var(--s2); }
.stay-bell { text-align: center; margin: var(--s1) 0 0; }
.stay-call p { margin: var(--s1) 0 0; }
/* 요청 단계 (ADR-041) — 택배 조회처럼 4칸, 지난 칸까지 네이비 */
.stay-call .req { margin-top: var(--s1); padding: 12px var(--s2); }
.stay-call .req p { margin: 0; }
.req-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); }
.req-head .title { font-weight: 600; }
.req-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: var(--s1) 0 4px; padding: 0; list-style: none; }
.req-steps li { padding-top: 4px; border-top: 3px solid var(--line); font-size: var(--fs-cap); color: var(--muted); }
.req-steps li.is-on { border-top-color: var(--ink); color: var(--text); }
.req-steps li[aria-current] { font-weight: 600; }
.req-now { font-weight: 600; }
/* 첫 화면 회진 큰 숫자 + 다음 치료 한 줄, 큰 버튼 2개 (design/inpatient-home/c.html) */
.stay-hero { padding: var(--s3) var(--s2); }
.stay-hero .num { margin: var(--s1) 0 4px; }
.stay-hero .t-cap { margin: 0; }
.stay-hero.is-now { background: var(--ink-soft); border-color: var(--ink); }
.stay-next { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line);
             margin-top: var(--s2); padding-top: 12px; }
.stay-next b { font-variant-numeric: tabular-nums; }
.stay-next .grow { flex: 1; }
.stay-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.stay-tile { display: grid; gap: var(--s1); justify-items: start; align-content: center; min-height: 88px; padding: var(--s2);
             border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg);
             color: var(--text); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.stay-tile svg { width: 24px; height: 24px; }
.stay-tile.is-main { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.stay-tile:active { opacity: .85; }
.stay-tile:disabled { opacity: .5; cursor: default; }
.stay-gone { display: grid; gap: 4px; padding: var(--s4) 0; text-align: center; margin: 0; }
.stay-gone .t-cap { font-weight: 400; }
.req-alert { position: fixed; top: calc(var(--s2) + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
             width: min(calc(100% - 2 * var(--s2)), 480px); z-index: 75; display: grid; gap: var(--s1); border-color: var(--ink); }
/* 겹침 순서: 팝업 50 · 토스트 60 · 연결 끊김 띠 70 · 요청 카드 75(가장 급함) */
#offline-banner:not([hidden]) ~ .req-alert { top: calc(48px + env(safe-area-inset-top)); }   /* 띠가 있으면 그 아래로 */
.req-alert-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-weight: 600; }
.scan-video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--ink); }
/* 시간표 탭 — 요일마다 한 줄 묶음, 오늘은 강조 */
.week-day { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.week-day > b { line-height: 1.6; }
.week-day.is-today { background: var(--ink-soft); border-color: var(--ink); }
.week-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.week-day li b { font-variant-numeric: tabular-nums; margin-right: var(--s1); }
.call-types .btn { min-height: 56px; }
/* 안내 — 긴 문구도 줄바꿈해서 다 보이게. 새 안내가 오면 잠깐 강조 */
.notice-list .title, .stay-notice-top .title { white-space: normal; }
.stay-notice-top.is-new, .nurse-list .is-new { background: var(--ink-soft); }
.nc-pick { padding-left: 0; padding-right: 0; }   /* 병동 안 고름 안내 — 제목과 같은 왼쪽 선에서 시작 */
@media (prefers-reduced-motion: no-preference) {
  .stay-notice-top.is-new, .nurse-list .is-new { animation: fade .2s ease-out; }
}

/* 환자 폰: 내용이 짧아도 아래 탭이 화면 바닥에 붙게 */
.page-fill { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page-fill > main { flex: 1; width: 100%; }

/* 회진 (rounds.html) */
.round-docs { flex-wrap: wrap; margin-bottom: var(--s2); }
.round-docs button { flex: 1 1 auto; min-height: var(--tap); }
.round-list .list-item.is-current { background: var(--ink-soft); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--radius); }
.round-list .list-item.is-dim .title, .round-list .list-item.is-dim .ip-room { color: var(--muted); font-weight: 400; }
.round-list .row-btns { display: flex; gap: var(--s1); flex: none; }
.round-done { text-align: center; padding: 12px 0; color: var(--muted); }

/* 회진 줄: 버튼은 이름 아래 둘째 줄로 (폰 폭에서 이름이 잘리지 않게) */
.round-list .list-item { flex-wrap: wrap; }
.round-list .row-btns { flex-basis: 100%; justify-content: flex-end; }
/* 입원 탭 보기 바꾸기·요일 버튼도 손가락 크기 */
.ip-mode button, #sl-view .seg button { min-height: var(--tap); }
/* 대기실 TV 공개 주소: 토큰이 들어가 길어서 그대로 두면 가로 스크롤이 생긴다 */
.org-url { overflow-wrap: anywhere; }

/* 식단표 사진 (ADR-028). A4 가로세로가 제각각이라 비율은 사진에 맡기고 폭만 맞춘다 */
/* A4 세로 사진이 설정 화면을 다 차지하지 않게 높이를 제한한다 (확인은 [크게 보기] 로) */
.meal-thumb { display: block; width: 100%; max-height: 180px; object-fit: contain; object-position: top; border-radius: var(--radius); }
.meal-box { margin: var(--s2) 0; }
.meal-full { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.meal-warn { color: var(--warn); }
.card .row-btns { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
/* 입원환자 홈의 식단 칸: 사진은 작게, 누르면 크게 (A4 세로 사진이 홈을 다 차지하지 않게) */
.stay-meal { display: flex; align-items: center; gap: var(--s2); }
.stay-meal .meal-sm { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); flex: none; }
.stay-meal-text { display: grid; justify-items: start; gap: 4px; }
.stay-meal-text .t-sub { margin: 0; }

/* 직원 관리 (3-3): 담당 병동 고르기 버튼 — 여러 개라 줄바꿈 */
.ward-pick { display: flex; flex-wrap: wrap; gap: var(--s1); }
.ward-pick .btn { min-width: calc(var(--tap) * 2); }
/* 고른 병동: 여러 개 고를 수 있어 주 버튼(채움) 대신 연한 배경 + 네이비 테두리 — 채움은 [저장] 하나만 */
.ward-pick .btn[aria-pressed="true"] { background: var(--ink-soft); border: 2px solid var(--ink); color: var(--ink); }
#staff .t-title { overflow-wrap: anywhere; }
.pw-row { display: flex; gap: var(--s1); }
.pw-row .input { flex: 1; min-width: 0; }
.pw-row .btn { flex: none; }

/* 직원 메신저 (ADR-033) — 말풍선: 내 것은 오른쪽 네이비, 남의 것은 왼쪽 흰 바탕. 옆에 안 읽은 사람 수·시각 */
.chat-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); padding-top: var(--s2); margin-bottom: var(--s2); }
.chat-top-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.chat-push-off { margin-left: 4px; }
.chat-dept { margin: 0; font-weight: 600; }
.chat-pick .chat-dept { margin-top: var(--s1); }
.chat-person { width: 100%; border: 0; border-top: 1px solid var(--line); background: var(--bg); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.chat-person:first-child { border-top: 0; }
.chat-person .meta:empty { display: none; }
.chat-unread { background: var(--ink); color: var(--bg); min-width: 24px; justify-content: center; flex: none; font-variant-numeric: tabular-nums; }
.chat-room-head { display: flex; align-items: center; gap: var(--s1); padding-top: var(--s2); }
.chat-room-head .grow { flex: 1; min-width: 0; }
.chat-room-head .t-cap { margin: 0; }
.chat-room-head > .btn { flex: none; }
/* 제목 아래 [참여자 N명] — 글자 줄 높이는 그대로, 누르는 자리는 44px (위아래 음수 여백) */
.chat-members-btn { min-height: var(--tap); margin: calc((var(--tap) - 1.4em) / -2) 0; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); font-weight: 600; cursor: pointer; }
.chat-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-msgs { display: grid; gap: var(--s1); padding: var(--s2) 0; }
.msg { display: grid; justify-items: start; gap: 4px; }
.msg.is-mine { justify-items: end; }
.msg-from { font-size: var(--fs-cap); color: var(--muted); margin-top: var(--s1); }
.msg-row { display: flex; align-items: flex-end; gap: var(--s1); max-width: 85%; }
.msg.is-mine .msg-row { flex-direction: row-reverse; }
.msg-bubble { margin: 0; padding: var(--s1) 12px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
              white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.is-mine .msg-bubble { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.msg-side { display: grid; justify-items: start; flex: none; font-size: var(--fs-cap); color: var(--muted); font-variant-numeric: tabular-nums; }
.msg.is-mine .msg-side { justify-items: end; }
.msg-unread { color: var(--ink); }
.chat-compose { display: flex; align-items: flex-end; gap: var(--s1); }
.chat-compose .textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 120px; resize: none; }
.chat-compose .btn { flex: none; }
.chat-pick { max-height: 50vh; overflow-y: auto; }
#chat > .t-title + .state { margin-top: var(--s2); }
/* 메시지가 적을 때 말풍선은 입력칸 바로 위에 (120px ≈ 방 이름 줄 + 여백) */
.chat-room-open #chat-body { display: flex; flex-direction: column; justify-content: flex-end;
  min-height: calc(100vh - var(--foot-h, 73px) - 120px); min-height: calc(100dvh - var(--foot-h, 73px) - 120px); }
/* 대화방: 입력 줄은 화면 바닥에 고정, 방 이름 줄은 위에 붙인다 */
.chat-room-open .app-foot { position: fixed; left: 0; right: 0; bottom: 0; }
.chat-room-open main.app { padding-bottom: calc(var(--foot-h, 73px) + var(--s3)); }   /* --foot-h: 입력 줄 실제 높이 (chat.js) */
.chat-room-open .maker { display: none; }   /* 고정된 입력 줄 뒤에 가려진다 — 목록 화면에는 그대로 */
.chat-room-head { position: sticky; top: 0; z-index: 5; background: var(--page); padding-bottom: var(--s1); }
/* 메신저 PC: 방 줄에 [새 창] (960px 이상에서만 그린다) · 새 창(?pop=1) */
.chat-row-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; align-self: stretch; color: inherit; text-decoration: none; }
.chat-row > .btn { flex: none; }
.chat-pop .tabbar { display: none; }
/* 메신저 파일 말풍선 (ADR-035) — 버튼이지만 말풍선과 같은 모양 */
button.msg-bubble { font: inherit; text-align: left; cursor: pointer; color: inherit; min-height: var(--tap); }
.msg.is-mine button.msg-bubble { color: var(--bg); }
.msg-image { padding: 4px; line-height: 0; }
.msg-image img { display: block; width: min(220px, 60vw); height: 160px; object-fit: cover; border-radius: calc(var(--radius) - 4px); }   /* 칸 크기 고정 — 늦게 그려져도 아래 메시지를 밀지 않게 */
.msg-file { display: grid; gap: 2px; }
.msg-file-name { font-weight: 600; overflow-wrap: anywhere; }
.msg-file-size { font-size: var(--fs-cap); opacity: .7; font-variant-numeric: tabular-nums; }
.msg-gone { color: var(--muted); font-size: var(--fs-cap); }
.msg.is-mine .msg-gone { color: var(--bg); opacity: .7; }

/* 근무표 (ADR-036) — 폰은 한 사람 달력, 1100px 이상은 직원×날짜 표 */
.rs-month { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); margin: var(--s1) 0; }
.rs-month .t-sub { margin: 0; }
#rs-tabs { margin-bottom: var(--s2); }
#rs-tabs button { min-height: var(--tap); }
.rs-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }   /* 390px 에서 칸 폭 44px 이상 */
.rs-wd { text-align: center; }
.rs-day { min-height: 52px; display: grid; align-content: start; justify-items: center; gap: 2px; padding: 4px 0;
          border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
          font: inherit; cursor: pointer; }
.rs-day.is-empty { border: 0; background: transparent; cursor: default; }
.rs-day.is-leave { background: var(--ink-soft); }
.rs-day.is-today .rs-dnum { color: var(--ink); font-weight: 700; }
.rs-day.is-picked { border: 2px solid var(--ink); }
.rs-cal > .skeleton { height: 52px; margin: 0; }   /* 불러오는 중: 달력 칸 모양 (.rs-day 와 같은 높이) */
.rs-dnum { font-size: var(--fs-cap); color: var(--muted); font-variant-numeric: tabular-nums; }
.rs-code { min-height: 18px; font-size: var(--fs-cap); font-weight: 700; color: var(--ink); }
.rs-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); }
.rs-palette .btn { min-height: var(--tap); padding: 0 4px; }
.rs-palette .btn[aria-pressed="true"] { background: var(--ink-soft); border: 2px solid var(--ink); color: var(--ink); }   /* 병동 고르기와 같은 선택 모양 — 주 버튼은 [저장] 하나 */
.rs-leave-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }
.rs-leave-top .badge { margin-top: 0; flex: none; }
.rs-app.is-wide .rs-palette { grid-template-columns: repeat(8, minmax(0, 1fr)); }
/* 휴가 줄: 버튼이 날짜를 밀어 자르지 않게 버튼은 아랫줄 오른쪽 */
.rs-leave .list-item { flex-wrap: wrap; }
.rs-leave .row-btns { flex-basis: 100%; justify-content: flex-end; margin-top: var(--s1); }
.rs-app.is-wide { max-width: 1240px; }
.rs-table-card { padding: 0; overflow: hidden; }
.rs-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-cap); }
.rs-table th, .rs-table td { height: var(--tap); padding: 0; border: 1px solid var(--line); text-align: center; }
.rs-table thead th { font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rs-table thead th:first-child, .rs-table th[scope="row"] { width: 112px; }
.rs-table th[scope="row"] { padding: 0 var(--s1); text-align: left; font-weight: 600;
                            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-table .is-weekend { background: var(--page); }
.rs-table td.is-leave { background: var(--ink-soft); }
.rs-table td, .rs-table td button { font-weight: 700; color: var(--ink); }
.rs-table td button { width: 100%; height: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; }
.rs-table td button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* 외래 예약 (ADR-037) — 달 넘기기 줄(.rs-month)은 근무표와 같은 모양 */
.res-link { display: flex; align-items: center; min-height: var(--tap); margin-bottom: var(--s1);
            font-size: var(--fs-cap); font-weight: 600; color: var(--ink); text-decoration: none; }
.rv-tools { display: flex; align-items: center; justify-content: flex-start; gap: var(--s1); margin-bottom: var(--s2); }
.rv-date { width: auto; flex: 0 1 180px; }
.rv-row { align-items: center; }
.rv-time { flex: none; width: 48px; align-self: flex-start; line-height: 1.6; font-weight: 700; color: var(--ink); }   /* 이름과 같은 높이 */
.rv-main { display: grid; gap: 4px; min-height: var(--tap); padding: 0; border: 0; background: transparent;
           font: inherit; text-align: left; color: inherit; cursor: pointer; }
.rv-main:disabled { cursor: default; }
.rv-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.rv-row > .btn { flex: none; }

/* 소모품 재고 (ADR-038) */
.iv-tabs { margin-bottom: var(--s2); }
.iv-tabs button, #iv-kinds button { min-height: var(--tap); }
#iv-kinds button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.iv-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }
.iv-head .q-head { margin: 0; }
.iv-row { width: 100%; border-width: 1px 0 0; border-style: solid; border-color: var(--line); background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.iv-row:disabled { cursor: default; }
.list > .iv-row:first-child { border-top: 0; }
.iv-row.is-off, .iv-row.is-off .title { color: var(--muted); }   /* 흐림(opacity)은 글자 대비가 기준 아래로 떨어진다 */
.iv-name { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.iv-name .badge { margin-top: 0; }
.iv-qty { flex: none; font-size: var(--fs-sub); font-weight: 700; color: var(--ink); }
.iv-qty .unit { font-size: var(--fs-cap); font-weight: 400; color: var(--muted); }
.iv-now { margin: 0; color: var(--muted); }
.iv-now b { font-size: var(--fs-title); color: var(--ink); }
.iv-import { align-self: flex-start; min-height: var(--tap); padding-left: 0; padding-right: 0; }   /* 목록 왼쪽 선에 맞춤 */
.iv-amount { position: relative; }
.iv-amount .input { padding-right: 56px; }
.iv-unit { position: absolute; right: var(--s2); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
#iv-amount::-webkit-inner-spin-button, #iv-amount::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#iv-amount { -moz-appearance: textfield; appearance: textfield; }

/* 시설 고장 (ADR-039) — 목록 줄·배지는 재고(.iv-name)와 같은 모양 */
.fc-row { align-items: center; }
.fc-main { display: grid; gap: 4px; min-width: 0; min-height: var(--tap); padding: 0; border: 0; background: transparent;
           font: inherit; text-align: left; color: inherit; cursor: pointer; overflow-wrap: anywhere; }   /* 긴 글도 가로로 밀리지 않게 */
.fc-row > .btn { flex: none; min-width: 88px; }   /* 처리 시작·완료 버튼 폭을 같게 */
.fc-main .iv-name { min-width: 0; }
.fc-main .iv-name .title { min-width: 0; white-space: normal; overflow-wrap: anywhere; }   /* 긴 제목은 줄바꿈 — 오른쪽 버튼 밑으로 넘치지 않게 */

/* ── 생활 안내 (ADR-040) — 줄 모양은 시설 고장(.fc-row) 그대로 ── */
.fc-row.is-off .title, .fc-row.is-off .meta { color: var(--muted); }   /* 내용 없는 안내·끝난 공지 */
.stay-ann { display: grid; gap: var(--s1); }
.stay-ann p { margin: 0; overflow-wrap: anywhere; }
.stay-guide-item { display: block; }   /* 펼치는 줄: 제목(summary) 아래로 내용 */
.stay-guide-item summary { min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
                           cursor: pointer; font-weight: 600; list-style: none; }
.stay-guide-item summary::-webkit-details-marker { display: none; }
.stay-guide-item summary::after { content: "›"; color: var(--muted); font-size: var(--fs-title); line-height: 1; transform: rotate(90deg); }
.stay-guide-item[open] summary::after { transform: rotate(-90deg); }
.stay-guide-item p { margin: var(--s1) 0 0; white-space: pre-line; overflow-wrap: anywhere; }

/* 개발자 '화면 보기' (ADR-042) — 개발자 계정에만, 모든 직원 화면 **오른쪽 위 끝** 같은 자리 (드드 K261026-03)
   가운데 단 밖 화면 전체 맨 위 한 줄. 덮지 않고 자리를 차지해 폰에서도 다른 글자·버튼을 가리지 않는다 */
.dev-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--s1); min-width: 0;
           padding: calc(4px + env(safe-area-inset-top)) max(var(--s1), env(safe-area-inset-right)) 0 var(--s1); }   /* 4 바꾸면 아래 .chat-room-head top 도 */
.dev-bar.is-preview { position: sticky; top: 0; z-index: 20; justify-content: space-between; padding-bottom: 4px; background: var(--ink); color: var(--bg); }
.dev-now { margin: 0; min-width: 0; padding-left: var(--s1); font-size: var(--fs-cap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-bar.is-preview .dev-now { color: var(--bg); font-weight: 600; }
.dev-pick { position: relative; flex: none; }
.dev-btn { min-height: var(--tap); padding: 0 12px; font-size: var(--fs-cap); }
.dev-bar.is-preview .dev-btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.dev-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 4px 0; list-style: none;
  width: min(260px, calc(100vw - 2 * var(--s1))); max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.dev-opt { display: block; width: 100%; min-height: var(--tap); padding: 0 var(--s2); border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-opt.is-indent { padding-left: calc(var(--s2) + var(--s2)); color: var(--text); font-size: var(--fs-cap); }
.dev-group { padding: var(--s1) var(--s2) 4px; font-size: var(--fs-cap); font-weight: 600; color: var(--muted); }
.dev-opt[aria-selected="true"] { font-weight: 700; background: var(--fill); }
.dev-opt[aria-selected="true"]::before { content: "✓ "; }
.dev-opt:hover, .dev-opt:focus-visible { background: var(--fill); }
/* 미리보기 띠(위 4 + 버튼 + 아래 4) 가 붙어 있으면 메신저 방 이름 줄을 그 아래에 붙인다 */
body:has(.dev-bar.is-preview) .chat-room-head { top: calc(var(--tap) + 8px + env(safe-area-inset-top)); }

/* 아래 탭 [메시지] 안 읽은 수 (ADR-047) — 폰: 아이콘 오른쪽 위 / PC 왼쪽 메뉴: 줄 오른쪽 끝 */
.tabbar a { position: relative; }
.tab-badge { position: absolute; top: 4px; left: min(calc(50% + 6px), calc(100% - 34px));   /* 맨 끝 탭에서 99+ 가 화면 밖으로 나가지 않게 */
  background: var(--ink); color: var(--bg);
  min-width: 20px; height: 18px; padding: 0 6px; font-size: 11px; justify-content: center; font-variant-numeric: tabular-nums; }
@media (min-width: 960px) { .app-foot #tabbar .tab-badge { position: static; margin-left: auto; } }

/* 프로필 사진 (0049) — 사진 없으면 이름 첫 글자. 여러 명 방은 두 장 겹침 */
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-soft); color: var(--ink); font-weight: 600; }
.avatar-lg { width: 96px; height: 96px; font-size: 32px; }
.avatar-box { flex: none; display: inline-flex; width: 40px; height: 40px; position: relative; }
.avatar-box.is-two .avatar { width: 28px; height: 28px; font-size: 12px; position: absolute; }
.avatar-box.is-two .avatar:first-child { top: 0; left: 0; }
.avatar-box.is-two .avatar:last-child { right: 0; bottom: 0; outline: 2px solid var(--bg); }
.chat-person, .chat-row-link, .chat-room-row { gap: 12px; }
.chat-photo-now { display: flex; justify-content: center; }