/* TwinCare 욕창 케어 — 설계 캔버스(욕창 케어 작업실 UI)의 색·간격·모서리를 그대로 옮긴 화면 양식.
   외부 글꼴을 불러오지 않는다(CSP). 'Noto Sans KR'이 깔린 기기는 그 글꼴, 아니면 시스템 한글 글꼴. */
:root {
  --page: #f4f6f5;
  --ink: #1b2340;
  --ink-2: #1b2a24;
  --hero-ink: #16322a;
  --muted: #5a6275;
  --muted-2: #5b6b64;
  --muted-3: #6b7385;
  --line: #e4e7ef;
  --line-2: #d5dbe6;
  --line-g: #d5ddd9;
  --line-g2: #e3e8e5;
  --card: #ffffff;
  --shadow: 0 4px 16px rgba(16, 40, 30, 0.08);
  --shadow-n: 0 4px 16px rgba(27, 35, 64, 0.07);
  --blue: #2563eb;
  --blue-ink: #1d4ed8;
  --navy: #1b2340;
  --green: #1f4a3a;
  --green-ok: #1f9d55;
  --amber-bg: #fff3dc; --amber-line: #f1d6a6; --amber-ink: #7a4600; --amber-dot: #e8912d;
  --red-bg: #ffe9df; --red-line: #f0a987; --red-ink: #9a3412; --red-strong: #c2410c;
  --blue-bg: #e8f0ff; --blue-line: #b9cbf5;
  --gray-bg: #f5f6fa; --gray-ink: #3f4a5f;
  --green-bg: #e3f4ea; --green-line: #a9d8bd; --green-ink: #1f6b46;
  --violet-bg: #f1ecff; --violet-line: #cdbdf6; --violet-ink: #5b3cc4;
  --series-1: #2563eb;
  --grid: #edf0f5;
  --axis: #c9d0dc;
  --t-granulation: #c8434b; --t-slough: #d9bb68; --t-necrosis: #3b2a26; --t-epithelial: #f0b3ad;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); }
body { min-height: 100vh; font-size: 15px; line-height: 1.5; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { color: #1e3a8a; text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
[hidden] { display: none !important; }
svg { flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boot { padding: 40px; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1 1 auto; min-width: 0; }
.ml-auto { margin-left: auto; }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 바탕 배치: 떠 있는 왼쪽 메뉴 + 본문 (+ 오른쪽 패널) ───────────────── */
.layout { display: flex; align-items: flex-start; min-height: 100vh; }
.nav-col { flex: 0 0 288px; padding: 16px 0 16px 16px; }
.layout.collapsed .nav-col { flex-basis: 104px; }
.main { flex: 1 1 560px; min-width: 0; position: relative; padding: 24px 40px 120px; }
.main.task-main { padding: 22px 32px 40px; display: flex; flex-direction: column; gap: 16px; }
.side-panel { flex: 0 1 380px; min-width: 300px; padding: 22px 24px 32px 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
.wrap880 { max-width: 880px; margin-left: auto; margin-right: auto; }
.page-w { max-width: 1120px; }

/* 메뉴 */
.nav { background: #fff; border-radius: 24px; border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(27, 35, 64, 0.08);
       padding: 20px 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 14px; }
.brand .name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand b { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.brand small { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: var(--muted-3); }
.icon-btn { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #d9dee8; background: #fff; display: inline-flex;
            align-items: center; justify-content: center; color: #33405e; }
.brand .icon-btn { margin-left: auto; }
.workspace { margin: 0 4px 12px; padding: 12px 14px; border-radius: 14px; background: var(--gray-bg); border: 1px solid var(--line);
             display: flex; flex-direction: column; gap: 3px; }
.workspace .k { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: var(--muted-3); }
.workspace .v { font-size: 15px; font-weight: 800; }
.workspace .s { font-size: 12px; color: var(--muted); }
.nav-group { padding: 12px 12px 4px; font-size: 12px; font-weight: 700; color: var(--muted-3); }
.nav-group:first-child { padding-top: 4px; }
.nav-sep { height: 1px; background: #e6e9ef; margin: 10px 8px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: 12px;
            color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; border: 1.5px solid transparent; }
.nav-item:hover { text-decoration: none; background: #f7f8fb; color: var(--ink); }
.nav-item.head { cursor: default; background: none; min-height: 42px; }
.nav-item.sub { min-height: 40px; padding: 0 12px 0 52px; font-size: 14px; font-weight: 600; }
.nav-item[aria-current="page"] { background: #f3f5fb; border-color: var(--navy); box-shadow: 0 2px 8px rgba(27, 35, 64, 0.12); }
.nav-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.nav-meta { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.nav-meta.count { font-size: 13px; }
.nav-meta.soon { padding: 2px 8px; border-radius: 999px; background: #f1f3f7; color: #545c6e; font-size: 11px; font-weight: 700; }
.nav-meta.ask { display: inline-flex; align-items: center; gap: 6px; color: #8a4f00; font-weight: 700; }
.nav-meta.ask::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--amber-dot); }
.badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #b45309; color: #fff;
         font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.nav-foot { margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 10px 8px 0; border-top: 1px solid #e6e9ef; }
.nav-foot .who { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.nav-foot .who span { color: var(--muted); font-size: 12px; }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 17px; background: #eef1f6; color: var(--ink); font-weight: 800;
          display: inline-flex; align-items: center; justify-content: center; }
.layout.collapsed .nav .label, .layout.collapsed .nav .nav-meta, .layout.collapsed .nav .badge, .layout.collapsed .nav .brand .name,
.layout.collapsed .nav .workspace, .layout.collapsed .nav .nav-group, .layout.collapsed .nav .nav-item.sub,
.layout.collapsed .nav .nav-foot .who, .layout.collapsed .nav .nav-foot .logout-text { display: none; }
.layout.collapsed .nav .brand { flex-direction: column; }
.layout.collapsed .nav .brand .icon-btn { margin: 8px 0 0; transform: rotate(180deg); }
.layout.collapsed .nav .nav-item { justify-content: center; padding: 0; }

/* ── 머리: 경로·모드·사용자 ─────────────────────────────────────────── */
.topline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.crumbs { font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a.here, .crumbs strong { color: var(--ink); font-weight: 700; }
.crumbs a.link { color: var(--blue-ink); }
.mode-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
             background: #fff7e8; border: 1px solid var(--amber-line); color: var(--amber-ink); font-size: 13px; font-weight: 700; }
.me-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff;
           box-shadow: 0 1px 4px rgba(16, 40, 30, 0.12); font-size: 13px; color: #33443d; }
.me-pill.role { background: #eef3ff; border: 1px solid var(--blue-line); box-shadow: none; color: var(--blue-ink); }
.me-pill.role b { font-weight: 800; }

/* ── 홈 ───────────────────────────────────────────────────────────── */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-top: 24px; }
.hero h1 { font-size: 40px; font-weight: 800; letter-spacing: -1px; color: var(--hero-ink); }
.hero p { font-size: 16px; color: #4b5b55; }
.composer { max-width: 880px; margin: 26px auto 0; background: #fff; border-radius: 22px; box-shadow: 0 10px 30px rgba(16, 40, 30, 0.10);
            padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 12px; }
.ctx-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ctx { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 30px 0 14px; border-radius: 12px;
       border: 1px solid var(--line-g); background: #f7faf8; color: var(--ink-2); font-size: 14px; }
.ctx span { color: var(--muted-2); }
.ctx b { font-weight: 700; }
.ctx::after { content: "▾"; position: absolute; right: 12px; font-size: 12px; color: var(--ink-2); pointer-events: none; }
.ctx select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.composer textarea { border: 0; resize: none; font-size: 17px; color: var(--ink-2); padding: 6px 4px; background: transparent; min-height: 78px; }
.composer textarea:focus-visible { outline: none; }
.composer .foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.round-btn { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--line-g); background: #fff; display: inline-flex;
             align-items: center; justify-content: center; color: #33443d; }
.agent-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #f1f5f3;
              font-size: 14px; color: #33443d; }
.agent-pill b { font-weight: 700; }
.agent-pill select { border: 0; background: transparent; font-weight: 700; color: var(--ink-2); padding: 0; }
.send-btn { margin-left: auto; width: 52px; height: 52px; border-radius: 26px; border: 0; background: var(--blue); color: #fff; display: inline-flex;
            align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35); }
.send-btn:disabled { background: #b8c9f2; box-shadow: none; }
.cap-chips { max-width: 880px; margin: 16px auto 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cap-chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-g); background: #fff; color: var(--ink-2);
            font-size: 15px; font-weight: 500; }
.cap-chip[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: #fff; font-weight: 700; }
.cap-chip.soon { border-style: dashed; border-color: #c9d2ce; background: #f7f9f8; color: #6b7a74; }
.alerts { max-width: 880px; margin: 22px auto 0; display: flex; flex-direction: column; gap: 12px; }
.alert { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; border: 1px solid; }
.alert.amber { background: #fff7e8; border-color: var(--amber-line); }
.alert.red { background: #fff1ea; border-color: #f4c3ab; }
.alert.blue { background: #f1f5ff; border-color: var(--blue-line); }
.alert .ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none;
              font-size: 22px; font-weight: 800; }
.alert.amber .ico { background: #f5c04a; color: #3d2600; }
.alert.red .ico { background: var(--red-strong); color: #fff; }
.alert.blue .ico { background: var(--blue); color: #fff; }
.alert .body { flex: 1 1 300px; display: flex; flex-direction: column; gap: 4px; }
.alert .body strong { font-size: 16px; }
.alert.amber .body span { font-size: 14px; color: var(--amber-ink); }
.alert.red .body span { font-size: 14px; color: #8a2f08; }
.alert.blue .body span { font-size: 14px; color: #1e3a8a; }
.sec { max-width: 880px; margin: 34px auto 0; display: flex; flex-direction: column; gap: 14px; }
.sec-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.sec-head h2 { font-size: 20px; font-weight: 800; }
.sec-head .sub { font-size: 13px; color: var(--muted-2); }
.seg { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 12px; background: #e9edf3; }
.seg button { min-height: 38px; padding: 0 14px; border-radius: 9px; border: 0; background: transparent; color: #4a5468; font-size: 14px; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(27, 35, 64, 0.18); }
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.search { flex: 1 1 240px; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; }
.fchip { min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-size: 14px; }
.fchip b { margin-left: 4px; font-weight: 800; }
.fchip[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; font-weight: 700; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.empty { padding: 24px; border-radius: 16px; background: #fff; border: 1px dashed var(--line-2); color: var(--muted); text-align: center; }
.foot-note { margin-top: 18px; font-size: 13px; color: var(--muted-2); }
.fab { position: fixed; right: 28px; bottom: 24px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center;
       gap: 2px; padding: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); z-index: 20; }
.fab .wrap { position: relative; display: inline-flex; filter: drop-shadow(0 6px 10px rgba(16, 40, 30, 0.18)); }
.fab .dot { position: absolute; top: 2px; right: 0; min-width: 22px; height: 22px; border-radius: 11px; background: var(--amber-dot); color: #fff;
            font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* 상태 표시 (칩) */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid; font-size: 12px;
       font-weight: 700; white-space: nowrap; }
.tag.amber { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink); }
.tag.red { background: var(--red-bg); border-color: var(--red-line); color: var(--red-ink); }
.tag.blue { background: var(--blue-bg); border-color: var(--blue-line); color: var(--blue-ink); }
.tag.gray { background: var(--gray-bg); border-color: var(--line-2); color: var(--gray-ink); }
.tag.green { background: var(--green-bg); border-color: var(--green-line); color: var(--green-ink); }
.tag.violet { background: var(--violet-bg); border-color: var(--violet-line); color: var(--violet-ink); }
.tag.mode { background: #fff7e8; border-color: var(--amber-line); color: var(--amber-ink); }
.tag.plain { border-color: transparent; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: currentColor; }
.status.amber { background: var(--amber-bg); color: var(--amber-ink); } .status.amber::before { background: var(--amber-dot); }
.status.blue { background: var(--blue-bg); color: var(--blue-ink); } .status.blue::before { background: var(--blue); }
.status.green { background: var(--green-bg); color: var(--green-ink); } .status.green::before { display: none; }
.status.red { background: var(--red-bg); color: var(--red-ink); } .status.red::before { background: var(--red-strong); }
.status.gray { background: var(--gray-bg); color: var(--gray-ink); } .status.gray::before { background: #8a94a8; }

/* ── 환자 카드 (같은 틀) ─────────────────────────────────────────────── */
.pcard { background: #fff; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-n); padding: 14px; display: flex;
         flex-direction: column; gap: 12px; min-width: 0; }
.pcard .head { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.pcard .head strong { font-size: 17px; white-space: nowrap; }
.pcard .head .tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pcard .head .room { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pcard .head .tag { margin-left: auto; }
.photo { margin: 0; position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #e7d2c2; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo .chip { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.88);
               color: var(--gray-ink); font-size: 11px; font-weight: 700; }
.photo.none { background: #eef1f6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #6b7385;
              font-size: 13px; font-weight: 600; }
.pcard .site { margin-top: -4px; font-size: 13px; color: #33405e; }
.lbl { font-size: 12px; font-weight: 700; color: var(--muted-3); }
.pcard .summary { height: 42px; font-size: 14px; font-weight: 600; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical; }
.pcard dl { margin: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); row-gap: 6px; font-size: 13px; line-height: 20px; }
.pcard dt { color: var(--muted-3); }
.pcard dd { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard dd.area { display: flex; align-items: center; gap: 8px; }
.mini-bars { flex: none; }
.acts { display: flex; gap: 8px; margin-top: auto; }
.btn-line, .btn-navy, .btn, .btn-blue, .btn-green, .btn-red { min-height: 42px; padding: 0 16px; border-radius: 10px; font-size: 14px; display: inline-flex;
       align-items: center; justify-content: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.acts > * { flex: 1 1 0; }
.btn-line, .btn { border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-weight: 600; }
.btn-navy { border: 0; background: var(--navy); color: #fff; font-weight: 700; }
.btn-blue { border: 0; background: var(--blue); color: #fff; font-weight: 700; }
.btn-green { border: 0; background: var(--green); color: #fff; font-weight: 700; }
.btn-red { border: 1px solid #f0b8b0; background: #fff; color: #b42318; font-weight: 700; }
.btn-line:hover, .btn:hover, .btn-navy:hover, .btn-blue:hover, .btn-green:hover, .btn-red:hover { text-decoration: none; filter: brightness(0.97); }
.btn-navy:hover, .btn-blue:hover, .btn-green:hover { color: #fff; }
.btn-blue:disabled, .btn-navy:disabled, .btn-green:disabled { background: #b8c9f2; color: #fff; filter: none; }
.btn-line.dashed { border-style: dashed; color: #8a94a8; background: #f7f9f8; }
.btn.small, .btn-line.small { min-height: 34px; padding: 0 12px; font-size: 13px; }

/* 표 보기 */
.ptable { overflow-x: auto; background: #fff; border-radius: 16px; border: 1px solid var(--line); }
.ptable .tr { display: grid; grid-template-columns: 120px 150px 120px minmax(0, 1fr) 130px 90px; gap: 12px; align-items: center; min-height: 56px;
              padding: 8px 16px; border-top: 1px solid #edf0f5; min-width: 820px; font-size: 14px; }
.ptable .tr.th { background: var(--gray-bg); color: var(--muted); font-size: 13px; font-weight: 700; border-top: 0; min-height: 0; padding: 12px 16px; }
.ptable .room { font-size: 12px; color: var(--muted); }

/* 최근 결과 */
.rcard { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.rcard .art { height: 92px; border-radius: 12px; box-sizing: border-box; }
.rcard .art.doc { background: #eef2fb; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.rcard .art.doc span { height: 8px; border-radius: 4px; background: #d8e0f4; }
.rcard .art.doc span:first-child { width: 60%; background: #c7d2ee; }
.rcard .art.doc span:nth-child(2) { width: 85%; } .rcard .art.doc span:nth-child(3) { width: 72%; }
.rcard .art.bars { background: #eaf5ef; display: flex; align-items: flex-end; gap: 12px; padding: 14px 20px; }
.rcard .art.bars span.b { width: 34px; border-radius: 6px; }
.rcard .art.bars .v { margin-left: auto; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--green-ink); }
.rcard .art.handoff { background: #eef1f6; display: flex; align-items: center; justify-content: center; gap: 10px; color: #4b5b72; font-size: 13px; font-weight: 700; }
.rcard strong { font-size: 16px; }
.rcard .meta { font-size: 13px; color: var(--muted-2); }
.rcard .meta .sig { color: #b4400b; font-weight: 700; }
.rcard .acts > * { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-color: var(--line-g); }

/* ── 공통 카드·패널 ─────────────────────────────────────────────────── */
.card { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card.bordered { box-shadow: none; border: 1px solid var(--line); }
.card h2 { font-size: 20px; font-weight: 800; }
.card h3 { font-size: 18px; font-weight: 800; }
.card .h-sub { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note { padding: 12px; border-radius: 12px; background: #f1f5f3; font-size: 13px; color: #33443d; line-height: 1.6; }
.note.gray { background: #f5f6fa; color: var(--muted); }
.note.blue { background: #eef3ff; border: 1px solid #d3defa; color: #1e3a8a; }
.note.amber { background: #fff7e8; border: 1px solid var(--amber-line); color: var(--amber-ink); }
.info-card { background: #eef3fb; border: 1px solid #d3defa; border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #33405e; line-height: 1.6; }
.info-card b { font-size: 15px; color: var(--ink); }

/* 위험 띠 (환자·결과) */
.signal { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: #fff1ea; border: 1px solid #f4c3ab; }
.signal .ico { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--red-strong); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.signal strong { font-size: 16px; color: #8a2f08; }
.signal .t { font-size: 14px; color: #8a2f08; }
.signal.big { border-width: 2px; border-color: #f0b49a; padding: 20px; }
.signal.big .ico { width: 48px; height: 48px; border-radius: 12px; }
.signal.big strong { font-size: 20px; }
.chip-out { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; border: 1px solid #e3a588; background: #fff;
            color: #8a2f08; font-size: 13px; font-weight: 700; }
.chip-soft { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: #f1f5f3; color: #33443d; font-size: 13px; }
.chip-soft.gray { background: #f1f3f7; color: #3f4a5f; }

/* ── 환자 상세 ──────────────────────────────────────────────────────── */
.ptabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.ptab { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2);
        background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; }
.ptab:hover { text-decoration: none; color: var(--ink); }
.ptab .dot { width: 8px; height: 8px; border-radius: 4px; background: var(--amber-dot); }
.ptab[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 800; }
.phead { margin-top: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 18px; background: #fff;
         box-shadow: var(--shadow); }
.phead .av { flex: none; width: 56px; height: 56px; border-radius: 16px; background: #eef1f6; display: inline-flex; align-items: center; justify-content: center; color: #4b5568; }
.phead .id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.phead .id strong { font-size: 24px; font-weight: 800; }
.phead .id .m { font-size: 14px; color: var(--muted); }
.phead .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.phead .acts { margin: 0 0 0 auto; flex-wrap: wrap; }
.phead .acts > * { flex: 0 0 auto; min-height: 46px; padding: 0 18px; border-radius: 12px; }
.pgrid { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: 16px; align-items: start; }
.pgrid > .col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.now .photo { aspect-ratio: 16 / 10; }
.now .cap { font-size: 13px; color: #33405e; margin-top: 8px; }
.now .cap-sub { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.kv { margin: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); row-gap: 8px; column-gap: 8px; font-size: 14px; }
.kv dt { color: var(--muted-3); }
.kv dd { margin: 0; min-width: 0; }
.kv dd .sub { color: var(--muted); }
.kv dd.alert-v { color: #b4400b; font-weight: 700; }
.kv dd .ai { margin-left: 6px; }
.barchart { display: flex; align-items: flex-end; gap: 0; height: 170px; padding: 0 8px; border-bottom: 1px solid #d8dde6; }
.barchart .col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.barchart .bar { width: 42px; border-radius: 4px 4px 0 0; background: #6f95e0; }
.barchart .bar.sel { background: #1e4fb8; }
.barchart .v { font-size: 12px; font-weight: 700; color: var(--ink); }
.bar-x { display: flex; padding: 6px 8px 0; }
.bar-x span { flex: 1 1 0; text-align: center; font-size: 12px; color: var(--muted); }
.tl-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-day { font-size: 14px; font-weight: 800; margin: 8px 0 4px; }
.tl-item { display: grid; grid-template-columns: 52px 20px minmax(0, 1fr); gap: 8px; padding: 6px 0 10px; }
.tl-item .time { font-size: 13px; font-weight: 700; color: var(--ink); padding-top: 2px; }
.tl-item .dot { width: 10px; height: 10px; border-radius: 5px; margin: 7px auto 0; }
.tl-item .dot.k-result { background: #1b2340; } .tl-item .dot.k-obs { background: #5b85dc; } .tl-item .dot.k-follow { background: #e8912d; }
.tl-item .dot.k-signal { background: #c2410c; } .tl-item .dot.k-photo { background: #8a94a8; }
.tl-item .ttl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 700; }
.tl-item .src { padding: 2px 8px; border-radius: 999px; background: #f5f6fa; border: 1px solid var(--line-2); font-size: 11px; font-weight: 700; color: var(--gray-ink); }
.tl-item .src.ai { background: var(--blue-bg); border-color: var(--blue-line); color: var(--blue-ink); }
.tl-item .body { font-size: 14px; color: #3f4a5f; margin-top: 4px; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-grid figure { margin: 0; }
.photo-grid .photo { aspect-ratio: 16 / 10; border-radius: 10px; }
.photo-grid figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }
.photo-grid figcaption b { color: var(--ink); }
.fu { padding: 12px 14px; border-radius: 12px; background: #f5f6fa; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.fu b { font-size: 14px; }
.fu span { font-size: 13px; color: var(--muted); }
.fu.red { background: #fff1ea; border-color: #f4c3ab; }
.fu.red b { color: #8a2f08; } .fu.red span { color: #8a2f08; }
.jobs { display: flex; flex-direction: column; }
.job { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid #edf0f5; }
.job:first-child { border-top: 0; }
.job b { font-size: 14px; } .job span { font-size: 12px; color: var(--muted); }
.job a { margin-left: auto; font-size: 14px; }

/* ── 작업 (진행·검토·결과) ──────────────────────────────────────────── */
.task-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.task-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.task-head .agent { font-size: 14px; color: var(--muted-2); }
.task-head .ml-auto { margin-left: auto; }
.ctx-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 12px 16px; border-radius: 14px; background: #fff;
           border: 1px solid var(--line-g2); font-size: 14px; }
.ctx-bar strong { font-size: 15px; }
.ctx-bar span { color: #4b5b55; }
.ctx-bar .tag { margin-left: auto; }
.bubble { align-self: flex-end; max-width: 520px; padding: 14px 18px; border-radius: 18px 18px 6px 18px; background: var(--blue); color: #fff;
          font-size: 16px; box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25); }
.agent-turn { display: flex; gap: 12px; align-items: flex-start; }
.agent-turn .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.agent-turn .say { margin-top: 6px; font-size: 16px; line-height: 1.6; }
.steps { display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.step .lbl2 { flex: 1; }
.step.pending, .step.skipped { color: var(--muted-2); }
.step.current .lbl2 { font-weight: 700; }
.step .meta { font-size: 13px; color: var(--muted-2); }
.step.current .meta { color: #8a4f00; font-weight: 700; }
.step.skipped .lbl2 { text-decoration: line-through; text-decoration-color: #c9d2ce; }
.spin { animation: spin 1.2s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.qcard { background: #fffaf0; border: 2px solid var(--amber-line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.qcard h2 { font-size: 18px; font-weight: 800; }
.qcard p { font-size: 14px; color: #6b4a12; line-height: 1.6; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { min-height: 48px; padding: 0 18px; border-radius: 14px; border: 2px solid var(--line-g); background: #fff; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.choice[aria-checked="true"] { border-color: var(--green); background: var(--green); color: #fff; font-weight: 700; }
.input { min-height: 46px; border-radius: 12px; border: 1px solid var(--line-g); padding: 0 14px; font-size: 15px; background: #fff; color: var(--ink-2); width: 100%; }
textarea.input { padding: 10px 14px; min-height: 84px; resize: vertical; }
select.input { padding-right: 30px; }
.qcard .send { min-height: 48px; padding: 0 22px; border-radius: 14px; font-size: 16px; }
.qcard .due { font-size: 13px; color: #6b4a12; }
.rtabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #e6ebe8; }
.rtabs button { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: #4b5b55; font-size: 15px; }
.rtabs button[aria-selected="true"] { background: #fff; color: var(--ink-2); font-weight: 700; box-shadow: 0 1px 4px rgba(16, 40, 30, 0.12); }
.pv-sec { display: flex; flex-direction: column; gap: 6px; }
.pv-sec .h { font-size: 13px; font-weight: 700; color: var(--muted-2); }
.pv-sec .h.green { color: var(--green-ink); } .pv-sec .h.amber { color: #8a4f00; }
.pv-sec .v { font-size: 14px; line-height: 1.5; }
.pv-sec .s { font-size: 12px; color: var(--muted-2); }
.green-box { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--green); color: #fff; font-size: 14px; line-height: 1.5; }
.log { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.log .it { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.log .it .ok { color: var(--green-ok); } .log .it .err { color: #b42318; }
.log .tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.log .tools span { padding: 2px 8px; border-radius: 999px; background: #f1f3f7; font-size: 12px; color: #3f4a5f; }

/* 검토 */
.finding { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 8px 0; }
.kind { padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #eef1f6; color: #3f4a5f; }
.kind.reported_fact { background: var(--green-bg); color: var(--green-ink); }
.kind.user_answer { background: var(--amber-bg); color: var(--amber-ink); }
.kind.calculation, .kind.prediction { background: var(--blue-bg); color: var(--blue-ink); }
.kind.reported_signal { background: var(--red-bg); color: var(--red-ink); }
.kind.image_analysis { background: var(--violet-bg); color: var(--violet-ink); }
.kind.proposal { background: #eef1f6; color: #3f4a5f; }
.finding .text { font-size: 15px; line-height: 1.5; }
.finding .src { grid-column: 2; font-size: 12px; color: var(--muted-3); }
.fu-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: #f5f6f8; font-size: 14px; }
.fu-row .r { margin-left: auto; color: #3f4a5f; font-size: 13px; }
.approve { border: 2px solid #a9c1f5; box-shadow: none; }
.approve .check { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.approve .check input { width: 22px; height: 22px; }
.approve .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.approve .btns > * { min-height: 48px; padding: 0 22px; border-radius: 12px; font-size: 15px; }
.src-list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.src-list .h { font-size: 13px; font-weight: 700; color: var(--green-ink); }
.src-list .h.gray { color: var(--muted); margin-top: 6px; }
.src-list .o { display: flex; gap: 8px; } .src-list .o span { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.src-list .c { display: flex; flex-direction: column; gap: 1px; }
.src-list .c span { font-size: 12px; color: var(--muted-3); }
.src-list .c span.warn { color: #b45309; }
.advice-edit { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #f7f8fb; border: 1px solid var(--line); }
.advice-edit.removed { opacity: 0.5; }

/* 결과 */
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.big-num { font-size: 36px; font-weight: 800; letter-spacing: -0.5px; }
.big-num .d { font-size: 18px; color: var(--blue-ink); margin-left: 8px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.cmp-bars { display: flex; gap: 18px; align-items: flex-end; height: 100px; }
.cmp-bars .c { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cmp-bars .b { width: 56px; border-radius: 4px; background: #bcd0f7; }
.cmp-bars .b.last { background: var(--blue); }
.pchips { display: flex; flex-wrap: wrap; gap: 8px; }
.prop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #f5f6f8; font-size: 15px; }
.prop .r { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.prop.high { background: #fff4ef; }
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.role { padding: 14px; border-radius: 12px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.role b { font-size: 15px; } .role span { font-size: 13px; color: var(--muted); } .role span.red { color: #b4400b; font-weight: 700; }
.stage-box { padding: 14px; border-radius: 12px; background: var(--violet-bg); border: 1px solid var(--violet-line); display: flex; flex-direction: column; gap: 4px; }
.stage-box .big { font-size: 20px; font-weight: 800; color: #3b2a8c; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { padding: 12px; border-radius: 12px; background: #f5f6f8; display: flex; flex-direction: column; gap: 2px; }
.stat .label { font-size: 12px; color: var(--muted); } .stat .value { font-size: 18px; font-weight: 800; }
.tissue { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #eef1f6; }
.tissue-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.tissue-legend .key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; }
.tip { position: absolute; display: none; transform: translate(-50%, -120%); background: #1b2340; color: #fff; padding: 6px 10px; border-radius: 8px;
       font-size: 12px; pointer-events: none; white-space: nowrap; }
.tip b { margin-right: 6px; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { text-align: left; padding: 8px 10px; border-top: 1px solid #edf0f5; }
table.data th { color: var(--muted); font-weight: 700; background: var(--gray-bg); border-top: 0; }
.table-wrap { overflow-x: auto; }
details summary { cursor: pointer; }
.answer { white-space: pre-line; font-size: 15px; line-height: 1.7; }
.cite { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 22px; font-size: 14px; }
.cite .p { color: var(--muted); font-size: 13px; }

/* 폼·필드 */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: #33405e; }
.field .input, .field select, .field input, .field textarea { font-weight: 400; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; }
legend { font-size: 13px; font-weight: 700; padding: 0 6px; color: #33405e; }
.checkline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.msg-err { padding: 12px 14px; border-radius: 12px; background: #fff1ea; border: 1px solid #f4c3ab; color: #8a2f08; font-size: 14px; }
.msg-ok { padding: 12px 14px; border-radius: 12px; background: var(--green-bg); border: 1px solid var(--green-line); color: var(--green-ink); font-size: 14px; }
.msg-info { padding: 12px 14px; border-radius: 12px; background: #eef3ff; border: 1px solid #d3defa; color: #1e3a8a; font-size: 14px; }
.msg-warn { padding: 12px 14px; border-radius: 12px; background: #fff7e8; border: 1px solid var(--amber-line); color: var(--amber-ink); font-size: 14px; }
.modal-back { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px;
              overflow-y: auto; z-index: 50; }
.modal { width: min(720px, 100%); background: #fff; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 50px rgba(16, 24, 40, 0.25); }
.modal h2 { font-size: 20px; font-weight: 800; }
.mtabs { display: flex; gap: 6px; }
.mtabs button { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; }
.mtabs button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; }
#toast .msg { background: #1b2340; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; box-shadow: 0 8px 20px rgba(16, 24, 40, 0.25); }
#toast .msg.err { background: #9a3412; }

/* ── 욕창 관리 영역 ──────────────────────────────────────────────────── */
.page-title { font-size: 34px; font-weight: 800; letter-spacing: -0.8px; margin-top: 26px; }
.page-sub { font-size: 15px; color: var(--muted); margin-top: 8px; }
.area-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.area-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2);
            background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; }
.area-tab:hover { text-decoration: none; color: var(--ink); }
.area-tab .n { padding: 2px 8px; border-radius: 999px; background: #f1f3f7; color: #545c6e; font-size: 12px; font-weight: 700; }
.area-tab[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.area-tab[aria-current="page"] .n { background: rgba(255, 255, 255, 0.18); color: #fff; }
.area-head { margin-top: 18px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.area-head h2 { font-size: 20px; font-weight: 800; }
.area-head p { font-size: 14px; color: #33405e; margin-top: 4px; }
.area-head .n { margin-left: auto; font-size: 13px; color: var(--muted); }
.care-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ccard { background: #fff; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-n); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ccard .head { display: flex; align-items: center; gap: 8px; }
.ccard .head strong { font-size: 17px; }
.ccard .head .tag { margin-left: auto; }
.ccard .art { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #eef1f8; display: flex; align-items: center; justify-content: center; }
.ccard .art svg { width: 100%; height: 100%; display: block; }
.ccard .basis { font-size: 13px; color: #33405e; }
.ccard .sum { font-size: 14px; font-weight: 700; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 42px; }
.ccard dl { margin: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); row-gap: 6px; font-size: 13px; }
.ccard dt { color: var(--muted-3); } .ccard dd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard dd.not { color: #b4400b; font-weight: 600; }
.care-note { margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: #eef3fb; border: 1px solid #d3defa; font-size: 13px; color: #33405e; }

/* ── 목록 (받은 것·맡긴 일·기록함) ─────────────────────────────────── */
.list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.li { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.li .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.li .t b { font-size: 16px; } .li .t span { font-size: 13px; color: var(--muted); }
.li .r { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* 문헌 */
.lib-item { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.lib-item a.t { font-size: 15px; font-weight: 700; color: var(--ink); }
.lib-item .m { font-size: 13px; color: var(--muted); }
.lib-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 16px; align-items: start; margin-top: 16px; }

/* 운영 */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.kpi { padding: 16px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; }
.kpi .l { font-size: 13px; color: var(--muted); } .kpi .v { font-size: 26px; font-weight: 800; } .kpi .s { font-size: 12px; color: var(--muted); }

/* 로그인 */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-card { width: min(440px, 100%); background: #fff; border-radius: 24px; box-shadow: 0 10px 30px rgba(16, 40, 30, 0.10); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.login-card h1 { font-size: 26px; font-weight: 800; color: var(--hero-ink); text-align: center; }
.login-card .lead { font-size: 14px; color: #4b5b55; text-align: center; }
.who-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.who-pick button { min-height: 64px; padding: 6px; border-radius: 14px; border: 1px solid var(--line-g); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: 700; word-break: keep-all; }
.who-pick button span { font-size: 11px; color: var(--muted); font-weight: 500; }
.who-pick button[aria-pressed="true"] { border: 2px solid var(--green); background: #f1f7f4; }

/* ── 휴대폰 ─────────────────────────────────────────────────────────── */
.m-head, .tabbar, .m-only { display: none; }
@media (max-width: 900px) {
  body { background: var(--page); }
  .nav-col, .pc-only { display: none !important; }
  .m-only { display: block; }
  .layout { display: block; }
  .main { padding: 12px 16px 104px; }
  .main.task-main { padding: 12px 16px 104px; }
  .side-panel { position: static; padding: 0 16px 104px; min-width: 0; }
  .m-head { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; padding: 12px 14px; background: rgba(255, 255, 255, 0.96);
            border-bottom: 1px solid #edf0f5; backdrop-filter: blur(8px); }
  .m-head .home-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 14px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; }
  .m-head .home-pill:hover { color: #fff; text-decoration: none; }
  .m-head .ttl { font-size: 18px; font-weight: 800; }
  .m-head .ttl small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 4px; }
  .m-head .circle { width: 44px; height: 44px; border-radius: 22px; border: 1px solid #d9dee8; background: #fff; display: inline-flex; align-items: center; justify-content: center; position: relative; color: #33405e; }
  .m-head .circle .pip { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 5px; background: var(--amber-dot); }
  .m-head .back { width: 44px; height: 44px; border-radius: 14px; border: 1px solid #d9dee8; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #33405e; }
  .m-head .ml { margin-left: auto; display: flex; gap: 8px; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff;
            border-top: 1px solid #e6e9ef; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; justify-content: center; color: #6b7385; font-size: 12px; }
  .tabbar a:hover { text-decoration: none; }
  .tabbar a[aria-current="page"] { color: var(--ink); font-weight: 800; }
  .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: -7px; width: 56px; height: 3px; border-radius: 2px; background: var(--navy); }
  .tabbar .badge { position: absolute; top: 2px; left: 54%; margin: 0; min-width: 20px; height: 20px; font-size: 11px; }
  .topline .crumbs, .topline .mode-pill, .topline .me-pill { display: none; }
  .hero h1 { font-size: 28px; } .hero p { font-size: 14px; }
  .task-head h1 { font-size: 22px; }
  .pgrid, .now { grid-template-columns: minmax(0, 1fr); }
  .phead .acts { margin: 0; width: 100%; }
  .phead .acts > * { flex: 1 1 0; }
  .fab { right: 14px; bottom: 84px; }
  .page-title { font-size: 26px; margin-top: 8px; }
  .lib-layout { grid-template-columns: minmax(0, 1fr); }
  .tl-item { grid-template-columns: 44px 16px minmax(0, 1fr); }
  .barchart .bar { width: 28px; }
  .cards-grid.m-list { grid-template-columns: minmax(0, 1fr); }
  .ptabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .ptab { flex: none; }
  .area-tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
  .area-tab { flex: none; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  /* 휴대폰 홈 */
  .m-hero { margin: 4px 0 0; background: var(--green); color: #fff; border-radius: 24px; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
  .m-hero .top { display: flex; gap: 12px; align-items: center; }
  .m-hero .pill { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 12px; }
  .m-hero h1 { font-size: 20px; font-weight: 800; margin-top: 6px; }
  .m-hero .s { font-size: 13px; color: rgba(255, 255, 255, 0.78); }
  .m-compose { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 6px 6px 6px 18px; }
  .m-compose input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; color: var(--ink-2); min-height: 44px; }
  .m-compose input:focus-visible { outline: none; }
  .m-compose .round-btn { width: 40px; height: 40px; }
  .m-compose .send-btn { width: 44px; height: 44px; margin: 0; }
  .m-answer { margin-top: 14px; background: #fffaf0; border: 2px solid var(--amber-line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
  .m-answer .k { font-size: 12px; font-weight: 700; color: var(--amber-ink); }
  .m-answer h2 { font-size: 18px; font-weight: 800; line-height: 1.4; }
  .m-answer .choices { gap: 8px; }
  .m-answer .choice { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .m-answer .s { font-size: 12px; color: #6b4a12; }
  .m-signal { margin-top: 12px; display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: #fff1ea; border: 1px solid #f4c3ab; }
  .m-signal .ico { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--red-strong); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
  .m-signal b { color: #8a2f08; font-size: 16px; } .m-signal span { color: #8a2f08; font-size: 13px; }
  .m-signal:hover { text-decoration: none; }
  .m-sec { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; }
  .m-sec h2 { font-size: 18px; font-weight: 800; } .m-sec small { color: var(--muted); font-size: 14px; } .m-sec a { margin-left: auto; font-size: 14px; font-weight: 700; }
  .m-scroll { display: flex; gap: 12px; overflow-x: auto; margin: 10px -16px 0; padding: 0 16px 8px; scroll-snap-type: x mandatory; }
  .m-mini { flex: 0 0 172px; scroll-snap-align: start; background: #fff; border-radius: 16px; border: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
  .m-mini:hover { text-decoration: none; color: var(--ink); }
  .m-mini .photo { aspect-ratio: 4 / 3; border-radius: 10px; }
  .m-mini .h { display: flex; align-items: center; gap: 6px; } .m-mini .h b { font-size: 15px; } .m-mini .h .tag { margin-left: auto; font-size: 11px; padding: 2px 8px; }
  .m-mini .s { font-size: 12px; color: var(--muted); }
  .m-strip { display: flex; gap: 8px; overflow-x: auto; margin: 8px -16px 0; padding: 0 16px 4px; }
  .m-strip .fchip { flex: none; min-height: 38px; }
  .m-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  .with-side { flex-wrap: wrap; }
  .with-side .side-panel { flex: 1 1 100%; position: static; padding: 0 32px 40px; }
}

/* 케어 마스터 대화창 (모든 화면) */
.mc-dock { position: fixed; right: 24px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mc-fab { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; }
.mc-fab .wrap { display: inline-flex; filter: drop-shadow(0 6px 10px rgba(16, 40, 30, 0.2)); }
.mc-dock.open .mc-fab .lbl { display: none; }
.mc-panel { width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100vh - 140px)); background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 12px 36px rgba(16, 40, 30, 0.18); display: flex; flex-direction: column; overflow: hidden; }
.mc-panel[hidden] { display: none; }
.mc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mc-head div { display: flex; flex-direction: column; margin-right: auto; }
.mc-head small { color: var(--muted); font-size: 11px; }
.mc-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--page); }
.mc-msg { max-width: 92%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.mc-msg.me { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.mc-msg.bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.mc-msg.typing { color: var(--muted); }
.mc-items { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.mc-items li { padding: 4px 8px; border-radius: 8px; background: #f3f5f9; }
.mc-items li.tone-warn { background: var(--amber-bg); }
.mc-items li.tone-alert { background: #fde8e8; }
.mc-items li.tone-ok { background: #e7f6ee; }
.mc-items a { color: inherit; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mc-act { font-size: 12.5px; padding: 6px 10px; text-decoration: none; }
.mc-confirm { border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font-size: 13px; background: #f8fafc; }
.mc-confirm p { margin: 0 0 6px; white-space: normal; }
.mc-note { margin-top: 6px; font-size: 11px; color: var(--muted); }
.mc-quick { display: flex; gap: 6px; padding: 8px 12px 0; overflow-x: auto; }
.mc-chip { white-space: nowrap; font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; }
.mc-form { display: flex; gap: 8px; padding: 10px 12px 12px; }
.mc-form .input { flex: 1; }
@media (max-width: 900px) {
  .mc-dock { right: 12px; bottom: 76px; }
  .mc-fab .lbl { display: none; }
  .mc-dock.open { inset: 0; right: 0; bottom: 0; background: var(--card); align-items: stretch; gap: 0; }
  .mc-dock.open .mc-panel { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .mc-dock.open .mc-fab { display: none; }
}

/* 에이전트 설정 */
.set-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; margin: 0; }
.set-grid dt { color: var(--muted); }
.set-grid dd { margin: 0; }
.set-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.set-skills li { display: flex; gap: 12px; align-items: flex-start; }
.set-skills p { margin: 2px 0 0; }
.set-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.set-filters .input { width: auto; min-width: 160px; flex: 1; }
.switch { position: relative; width: 44px; height: 26px; border-radius: 13px; border: 0; background: #cfd5df; cursor: pointer; flex: none; padding: 0; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
.switch.on { background: var(--green-ok); }
.switch.on .knob { left: 21px; }
.switch:disabled { opacity: .5; cursor: default; }