/* 간병인: 폰 「내 환자」(js/mobile/care.js) · PC 「간병인 관리」(js/screens/caregivers.js). 색·길이는 tokens.css 변수만. */

/* ───────── 간병인 폰 · 내 환자 — 지금 할 일 1개(docs/FLOW-REDESIGN.md §3) ───────── */
.cr { display: grid; gap: var(--s-4); }
/* 지금 할 일 */
.cn { --tone: var(--text-3); --tone-bg: var(--surface-2); position: relative; display: grid; gap: var(--s-4); padding: var(--s-5) var(--s-4) var(--s-4); border-radius: 24px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 16px 40px -24px rgb(0 0 0 / .35); overflow: hidden; animation: mo-rise var(--d-slow) var(--ease) both;
  transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease); }
.cn[hidden] { display: none; }
.cn::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tone); transition: background-color var(--d-base) var(--ease); }
.cn[data-tone="active"] { --tone: var(--brand); --tone-bg: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.cn[data-tone="caution"] { --tone: var(--st-delay-line); --tone-bg: var(--st-delay-bg); border-color: color-mix(in srgb, var(--st-delay-line) 45%, var(--border)); }
.cn[data-tone="critical"] { --tone: var(--st-critical-line); --tone-bg: var(--st-critical-bg); border-color: color-mix(in srgb, var(--st-critical-line) 60%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-critical-line) 16%, transparent), 0 16px 40px -20px var(--st-critical-line); }
.cn[data-tone="done"] { --tone: var(--st-done-line); --tone-bg: var(--st-done-bg); }
.cn-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.cn-k { font-size: var(--fs-12); font-weight: 700; letter-spacing: .02em; color: var(--text-2); }
.cn-phase { padding: 2px 10px; border-radius: 999px; background: var(--tone-bg); color: var(--tone); font-size: var(--fs-12); font-weight: 700; }
.cn[data-tone="muted"] .cn-phase { color: var(--text-2); }
.cn-main { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.cn-who { display: grid; gap: 2px; min-width: 0; }
.cn-bed { font-size: 2.75rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cn-name { font-size: 1.0625rem; font-weight: 650; }
.cn-pos { color: var(--text-2); font-size: var(--fs-14); }
.cn-ringw { position: relative; flex: none; width: 8.5rem; height: 8.5rem; display: grid; place-items: center; }
.bt-ring.cn-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.bt-ring.cn-ring circle { stroke-width: 1.9; }
.bt-ring.cn-ring .ar { stroke: var(--brand); }
.bt-ring.cn-ring[data-lv="soon"] .ar { stroke: var(--brand); }
.bt-ring.cn-ring[data-lv="over"] .ar, .bt-ring.cn-ring[data-lv="done"] .ar { stroke: var(--tone); }
.cn-ringt { position: relative; display: grid; justify-items: center; line-height: 1; }
.cn-num { font-size: 2.75rem; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--text); }
.cn[data-tone="caution"] .cn-num, .cn[data-tone="critical"] .cn-num { color: var(--tone); }
.cn-unit { margin-top: 4px; color: var(--text-2); font-size: var(--fs-12); font-weight: 650; }
.cn-next { display: flex; align-items: center; gap: var(--s-3); padding: .625rem .75rem; border-radius: 14px; background: var(--surface-2); }
.cn-next > div:last-child { display: grid; gap: 1px; }
.cn-next small { color: var(--text-2); font-size: 11px; }
.cn-next b { font-size: 1rem; }
.cn-fig { flex: none; width: 2.25rem; height: 3.25rem; }
.cn-fig svg { width: 100%; height: 100%; }
.cn-note { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--text-2); font-size: var(--fs-14); }
.cn-note svg { flex: none; width: 1rem; height: 1rem; margin-top: 2px; }
.cn-done { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-4) 0; text-align: center; }
.cn-done b { font-size: 1.25rem; }
.cn-done span:last-child { color: var(--text-2); font-size: var(--fs-14); }
.cn-done-ico { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--st-done-bg); color: var(--st-done-fg); animation: mo-pop var(--d-slow) var(--ease-spring) both; }
.cn-done-ico svg { width: 2.25rem; height: 2.25rem; stroke-width: 2.6; }
@keyframes mo-pop { from { transform: scale(.6); } to { transform: none; } }
/* 내 환자 줄 */
.cr-lh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding: 0 2px; }
.cr-lh h2 { font-size: 1rem; }
.cr-lh-n { color: var(--st-delay-fg); font-size: var(--fs-12); font-weight: 700; }
.cr-rows { display: grid; gap: var(--s-2); }
.cr-row { --tone: var(--text-2); display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 4.25rem; padding: .5rem .75rem .5rem .5rem; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), background-color var(--d-base) var(--ease); }
.cr-row:active { transform: scale(.985); }
.cr-row > svg:last-child { flex: none; width: 1rem; height: 1rem; color: var(--text-3); }
.cr-row[data-tone="active"] { --tone: var(--brand); }
.cr-row[data-tone="caution"] { --tone: var(--st-delay-fg); border-color: color-mix(in srgb, var(--st-delay-line) 45%, var(--border)); }
.cr-row[data-tone="critical"] { --tone: var(--st-critical-fg); border-color: color-mix(in srgb, var(--st-critical-line) 55%, var(--border)); background: color-mix(in srgb, var(--st-critical-bg) 50%, var(--surface)); }
.cr-row[data-tone="done"] { --tone: var(--st-done-fg); }
.cr-rw { position: relative; flex: none; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; }
.bt-ring.cr-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.bt-ring.cr-ring circle { stroke-width: 2.2; }
.bt-ring.cr-ring .ar { stroke: var(--brand); }
.bt-ring.cr-ring[data-lv="over"] .ar { stroke: var(--st-delay-line); }
.bt-ring.cr-ring[data-lv="done"] .ar { stroke: var(--st-done-line); }
.cr-rt { position: relative; display: grid; justify-items: center; line-height: 1; }
.cr-n { font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cr-u { color: var(--text-3); font-size: 9.5px; margin-top: 1px; white-space: nowrap; }
.cr-who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.cr-l { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.cr-nm { color: var(--text-2); font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-st { flex: none; color: var(--tone); font-size: var(--fs-14); font-weight: 700; }
/* 줄 상세 시트 */
.cd { display: grid; gap: var(--s-4); }
.cd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.cd-cell { display: grid; justify-items: center; align-content: start; gap: 4px; padding: var(--s-3) var(--s-2); border-radius: 14px; background: var(--surface-2); text-align: center; }
.cd-cell small { color: var(--text-2); font-size: 11px; }
.cd-cell b { font-size: var(--fs-14); }
.cd-fig { width: 2.5rem; height: 3.75rem; } .cd-fig svg { width: 100%; height: 100%; }
.cd-heat { width: 2.25rem; height: 3.75rem; border-radius: 8px; object-fit: cover; }
.cd-noheat { display: grid; place-items: center; width: 2.25rem; height: 3.75rem; color: var(--text-3); }
.cd-big { font-size: 1.25rem; font-weight: 800; line-height: 3.75rem; }

/* ───────── PC · 간병인 관리 ───────── */
.cg-page .cg-body { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.cg-tools { display: flex; justify-content: flex-start; }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: var(--s-3); }
.cg-card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  animation: mo-rise var(--d-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--stagger)); transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease); }
.cg-card:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); box-shadow: 0 10px 28px -20px rgb(0 0 0 / .35); }
.cg-card[data-off="1"] { background: var(--surface-2); }
.cg-card[data-off="1"] .cg-av { filter: grayscale(1); opacity: .6; }
.cg-top { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.cg-av { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--st-done-bg); color: var(--st-done-fg); font-weight: 800; font-size: 1.0625rem; }
.cg-id { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.cg-id b { font-size: 1.0625rem; }
.cg-id small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-line { display: flex; align-items: center; gap: var(--s-2); padding: .5rem .625rem; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-12); min-width: 0; }
.cg-line > svg { flex: none; width: 1rem; height: 1rem; }
.cg-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-line[data-st="done"] { background: var(--st-done-bg); color: var(--st-done-fg); }
.cg-line[data-st="due"] { background: var(--st-due-bg); color: var(--st-due-fg); }
.cg-line[data-st="caution"] { background: var(--st-delay-bg); color: var(--st-delay-fg); }
.cg-acct { background: transparent; padding: 0 .125rem; }
.cg-pats { display: grid; gap: var(--s-2); }
.cg-pats-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.cg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-pchip { display: inline-flex; align-items: center; gap: 6px; min-height: 2rem; padding: 0 .625rem 0 .25rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-12); }
.cg-pchip b { display: grid; place-items: center; min-width: 2.25rem; height: 1.5rem; padding: 0 6px; border-radius: 999px; background: var(--surface-3); font-variant-numeric: tabular-nums; }
.cg-pchip.is-empty { border-style: dashed; }
.cg-none { font-size: var(--fs-12); }
.cg-note { display: flex; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-12); }
.cg-note svg { flex: none; width: .875rem; height: .875rem; margin-top: 2px; }
.cg-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: var(--s-2); }
.cg-box { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px dashed var(--border); border-radius: 16px; }
.cg-box-h { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.cg-form .cg-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-3); }
.cg-sw { display: flex; align-items: center; gap: var(--s-2); min-height: 2.5rem; }
.cg-del { margin-right: auto; }
.cg-pdlg { display: grid; gap: var(--s-3); }
.cg-plist { display: grid; gap: 4px; max-height: min(52vh, 28rem); overflow-y: auto; padding-right: 2px; }
.cg-prow { display: grid; grid-template-columns: auto 3rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: 3rem; padding: 0 var(--s-3); border-radius: 12px; border: 1px solid var(--border); cursor: pointer; transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.cg-prow:hover { background: var(--surface-2); }
.cg-prow:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.cg-prow input { width: 1.25rem; height: 1.25rem; accent-color: var(--brand); }
.cg-pbed { font-weight: 800; font-variant-numeric: tabular-nums; }
.cg-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-pother { color: var(--text-2); font-size: 11px; }
.cg-pcount { color: var(--text-2); font-size: var(--fs-12); text-align: right; }