@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   Saebom Care Bridge · 병원 포털 (hospital portal) stylesheet

   Load order — this file is 2nd of 4 and may only rely on the token layer:
     shared/common.css  →  hospital/style.css  →  shared/notes.css  →  shared/board.css
   shared/* is owned by the main session. Where a shared rule already decides a
   layout (`.doc-chips` 2×2 grid, `.row` button pairing, lane/card sticky offsets)
   this file does not fight it; such couplings are marked NOTE SHARED below.

   Everything here is expressed in the design tokens declared in common.css:
     colour  --canvas --surface-1..3 --ink-1..3 --line-1..3 --accent --success
             --warning --danger --info (+ -soft) --focus-ring
     type    --text-caption|label|body|body-lg|title|section|page
             --weight-normal|medium|bold   (600 is the heaviest weight allowed)
     space   --space-1..10                 radius  --radius-control|surface|pill
     shadow  --shadow-raised|overlay       control --control-sm|md|lg
   No raw hex outside the :root block below.

   Sections
     1  Root · legacy aliases · dark-surface palette
     2  Normalization — base elements
     3  Control primitives — button · field · badge · chip · table
     4  App shell — sidebar · topbar · content · page header
     5  Layout primitives — panel · grid · toolbar · tabs · states
     6  Metric strip — KPI tiles · priority filters · quick filters
     7  Decision inbox — 지금 결정할 일
     8  Board — kanban lane · patient card
     9  Patient detail — header · 지금 · panels · Patient DATA
    10  Documents · review dialog · evidence
    11  Calendar · 진료 가능 시간 · slot picker
    12  Money · agency · settings · account · memo threads
    13  Dialog · toast · login
    14  Responsive — tablet · phone
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1 ── Root · legacy aliases · dark-surface palette ───────────────────── */
:root{
  /* Legacy names other rules (and the sibling stylesheets) still reference.
     They now resolve to the token scale instead of raw hex. */
  --brand:var(--accent);
  --brand-hover:var(--accent-hover);
  --teal:var(--accent);
  --hospital-accent:var(--accent);
  --line:var(--line-1);
  --muted:var(--ink-3);
  /* The navigation rail, the login artwork and the toast sit on the green rail colours, which live in
     shared/common.css with the agency portal's (2026-09-27): these are aliases only, no raw colour. */
  --nav:var(--nav-bg);
  --nav-ink:var(--nav-text);          /* nav label, resting */
  --nav-ink-quiet:var(--nav-text-2);  /* nav caption, footer copy */
  --nav-surface:var(--nav-selected);  /* active nav item, portal card */
  --nav-focus:var(--nav-highlight);   /* focus ring that survives the dark ground */

  font-family:var(--font);
  font-size:var(--text-body-lg);
  line-height:var(--leading-normal);
  color:var(--ink-2);
  background:var(--canvas);
}


/* ── 2 ── Normalization — base elements ──────────────────────────────────── */
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}

h1,h2,h3,h4,p{margin-top:0}
h1{margin-bottom:var(--space-2);font-size:var(--text-page);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:-.01em;color:var(--ink-1)}
/* W5-2B (A W5-2A): a section title (h2) is 16/600 and a sub-title (h3) 14/600 wherever nothing more specific is said; a
   dialog's and the login box's title stay 20 (the title of their own surface), a board card's name 16 (UI step 2) */
h2{font-size:var(--text-title);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:-.01em;color:var(--ink-1)}
h3{font-size:var(--text-body-lg);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--ink-1)}
/* W5-a: the space under a title is a token - it was the browser's em margin (1em of the 14px h3: 14; .83em of the 16px h2:
   13.3), so it moved with W5-2B's sizes. A section title keeps 16 under it, a sub-title 12. Own rules (.panel-title, a
   dialog, the login box, cards) still say theirs. */
h2{margin-bottom:var(--space-4)}
h3{margin-bottom:var(--space-3)}
h4{font-size:var(--text-body-lg);font-weight:var(--weight-bold);color:var(--ink-1)}
p{line-height:var(--leading-normal)}
/* 600 is the heaviest weight in the system: b/strong must not fall back to 700. */
b,strong{font-weight:var(--weight-bold)}
small,.muted{font-size:var(--text-label);color:var(--ink-3)}
.help{margin:0;font-size:var(--text-label);line-height:var(--leading-normal);color:var(--ink-3)}
.note{margin:0;font-size:var(--text-body);line-height:var(--leading-normal);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink-2)}
a{color:var(--accent-ink)}
button,a{-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font-family:inherit}

/* One focus treatment for the whole portal: a 2px ring plus a soft halo. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 4px var(--focus-ring)}
/* …and its light counterpart wherever the ground is dark. */
.sidebar :focus-visible,.login-art :focus-visible,#toast :focus-visible,
.cb-offline :focus-visible,.cb-owner[data-owner=hospital]:focus-visible{outline-color:var(--nav-focus);box-shadow:none}


/* ── 3 ── Control primitives ─────────────────────────────────────────────── */

/* 3.1 Buttons — five roles, one height, one padding, one radius, one gap.
   primary(accent) · secondary(default) · tertiary(.link) · danger · icon-only */
button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--control-md);padding:var(--space-2) var(--space-4);
  border:1px solid var(--line-2);border-radius:var(--radius-control);
  background:var(--surface-1);color:var(--ink-1);
  font-size:var(--text-body);font-weight:var(--weight-medium);line-height:var(--leading-tight);
  text-align:center;cursor:pointer;
  transition:background var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease);
}
button:hover{background:var(--surface-3);border-color:var(--line-3)}
button:active{background:var(--surface-3)}
button:disabled{opacity:.55;cursor:not-allowed}
button:disabled:hover{background:var(--surface-1);border-color:var(--line-2)}

button.primary{background:var(--accent);border-color:var(--accent);color:var(--ink-inverse);font-weight:var(--weight-bold)}
button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
button.danger{color:var(--danger);border-color:var(--line-2)}
button.danger:hover{background:var(--danger-soft);border-color:var(--danger)}
button.primary.danger-fill{background:var(--danger);border-color:var(--danger);color:var(--ink-inverse)}
button.primary.danger-fill:hover{background:var(--danger);filter:brightness(.9)}
/* W5-3B (A W5-3A): one filled action per screen - the heading's (＋ 기관 등록, ＋ 상담 시간 확정 ...) or a tab's own. An
   action repeated on every row or card (할 일 행, 보드 카드, 입금·환불 표, 아카이브 행) or riding in a notice banner
   (상담·재진 카드의 '요청 처리') is an outline: 600, accent text, no fill. A disabled action has no fill either - at .55
   it still read as the screen's main action ('선택한 0개 내려받기 (ZIP)', '재진 시작' before its time). */
.cb-inbox-item button.primary,.cb-patient-row button.primary,.stack-table button.primary,.lead-card button.primary,
.money-table button.primary,#page .cb-banner button.primary{background:var(--surface-1);border-color:var(--accent);color:var(--accent-ink)}
.cb-inbox-item button.primary:hover,.cb-inbox-item button.primary:active,.cb-patient-row button.primary:hover,.cb-patient-row button.primary:active,
.stack-table button.primary:hover,.stack-table button.primary:active,.lead-card button.primary:hover,.lead-card button.primary:active,
.money-table button.primary:hover,.money-table button.primary:active,#page .cb-banner button.primary:hover,#page .cb-banner button.primary:active{
  background:var(--accent-soft);border-color:var(--accent-hover);color:var(--accent-ink)}
#page button.primary:disabled,#page button.primary:disabled:hover{background:var(--surface-1);border-color:var(--line-2);color:var(--ink-1)}

/* Dense variant: the same height (the touch floor never shrinks), tighter box. */
button.small{min-height:var(--control-md);padding:var(--space-1) var(--space-3);font-size:var(--text-label)}
/* Tertiary: a real button that reads as text. (It keeps the base inline-flex box so
   any component that needs another display — .card-memos, .auth-switch — still wins.) */
button.link{min-height:0;padding:0;border:0;background:none;justify-content:flex-start;
  color:var(--accent-ink);font-size:inherit;font-weight:var(--weight-medium);text-align:left}
button.link:hover{background:none;text-decoration:underline}
/* W2-3B: a row's name link reads 600 like the agency's (common.css .cb-row-link); button.link above is more specific */
button.link.cb-row-link{font-weight:var(--weight-bold)}
/* W4-5B (A W4-5A): a customer name drawn as a link button kept button.link's inherited size (13px in the 입금·환불 cards) -
   it outranks .customer; the row's lead is 14/600 on every screen */
button.link.customer{font-size:var(--text-body-lg);font-weight:var(--weight-bold)}
/* Icon-only controls stay square. */
button.icon-only{width:var(--control-md);min-width:var(--control-md);padding:0;font-size:var(--icon-md)}

/* 3.2 Fields — input, select and textarea share height, padding, border, radius
   and focus. The label sits above its control (`label` is a grid). */
input,select,textarea{
  width:100%;min-height:var(--control-md);padding:var(--space-2) var(--space-3);
  border:1px solid var(--line-2);border-radius:var(--radius-control);
  background:var(--surface-1);color:var(--ink-1);
  font-family:inherit;font-size:var(--text-body-lg);line-height:var(--leading-normal);
}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus-visible,select:focus-visible,textarea:focus-visible,
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;box-shadow:0 0 0 4px var(--focus-ring)}
textarea{min-height:96px;resize:vertical}
/* Tick boxes are controls, not text fields: they must not inherit the field box. */
input[type=checkbox],input[type=radio]{width:auto;min-height:0;padding:0;accent-color:var(--accent)}
/* W-form mirror (A 2748c38): a field's track never takes its control's least width - a native date / date-time control is as
   wide as its text (418px at 320 / text 200%) and pushed its label past the dialog, cutting the label words; now the
   label wraps in its box and the control scrolls its own fields */
label{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);margin-bottom:var(--space-4);
  font-size:var(--text-body);font-weight:var(--weight-medium);color:var(--ink-1)}
label>.help{font-weight:var(--weight-normal)}
fieldset{min-width:0}

/* 3.3 Badge · chip · owner · assignee · count.
   A badge is subdued state; a chip carries meaning; only these may be pills. */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);
  padding:var(--space-1) var(--space-2);border-radius:var(--radius-control);
  background:var(--surface-3);color:var(--ink-2);
  font-size:var(--text-label);font-weight:var(--weight-medium);white-space:nowrap}
.badge.green{background:var(--success-soft);color:var(--success)}
.badge.amber{background:var(--warning-soft);color:var(--warning)}
.badge.blue{background:var(--info-soft);color:var(--info)}
.badge.red{background:var(--danger-soft);color:var(--danger)}
.badge.gray{background:var(--surface-3);color:var(--ink-2)}

.cb-chip{padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);
  font-size:var(--text-label);font-weight:var(--weight-medium)}
.cb-count{min-width:20px;padding:0 var(--space-2);border-radius:var(--radius-pill);
  font-size:var(--text-label);font-weight:var(--weight-bold);line-height:20px}

/* Whose turn it is. W5-4B (A W5-4A): an owner is an outline - fills are states (기한, 서두름, 미입금 ...). The hospital's own
   turn is the call to act: an accent line, 600 and its word '병원', not a fill. 1px less padding keeps the 26px line. */
.cb-owner{display:inline-flex;align-items:center;padding:calc(var(--space-1) - 1px) calc(var(--space-2) - 1px);
  border:1px solid var(--line-2);border-radius:var(--radius-pill);background:transparent;color:var(--ink-2);
  font-size:var(--text-label);font-weight:var(--weight-medium);white-space:nowrap}
.cb-owner[data-owner=hospital]{border-color:var(--accent);color:var(--accent-ink);font-weight:var(--weight-bold)}
.cb-owner[data-owner=agency]{border-color:var(--line-2);color:var(--ink-2)}
.cb-owner[data-owner=waiting]{border-color:var(--line-1);color:var(--ink-3)}
.cb-owner[data-owner=none]{border-color:var(--line-1);color:var(--ink-3)}

/* 3.4 Tables — one row height, a quiet head on --surface-3, numerals tabular. */
.table-wrap{overflow-x:auto;border-radius:var(--radius-control)}
table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}
th{padding:var(--space-3);background:var(--surface-3);border-bottom:1px solid var(--line-1);
  font-size:var(--text-label);font-weight:var(--weight-medium);color:var(--ink-2)}
td{padding:var(--space-4) var(--space-3);border-bottom:1px solid var(--line-1);
  font-size:var(--text-body);color:var(--ink-2);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
td .row{flex-wrap:wrap;gap:var(--space-2)}
/* The three levels of emphasis rule 9 asks for: name · state · metadata. */
.customer{display:block;margin-bottom:var(--space-1);
  font-size:var(--text-body-lg);font-weight:var(--weight-bold);color:var(--ink-1)}
td small{display:block;font-size:var(--text-label);color:var(--ink-3)}

/* 3.5 Numerals that line up in a column. */
.cb-time,.cb-time-clinic,.cb-time-local{font-variant-numeric:tabular-nums}
.cb-time-local{font-size:var(--text-caption);color:var(--ink-3)}


/* ── 4 ── App shell ──────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}

/* 4.1 Navigation rail */
.sidebar{position:fixed;inset:0 auto 0 0;width:240px;display:flex;flex-direction:column;
  padding:var(--space-6) var(--space-4);overflow-y:auto;
  background:var(--nav);color:var(--nav-ink)}
.brand{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-6)}
.brand-logo{display:block;width:164px;max-width:100%;height:auto;object-fit:contain}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;
  border:1px solid var(--nav-line);border-radius:var(--radius-surface);
  font-size:var(--text-section);color:var(--nav-ink)}
.brand strong{font-size:var(--text-title)}
.brand small{display:block;margin-top:var(--space-1);color:var(--nav-ink-quiet);
  font-size:var(--text-caption);letter-spacing:.16em}

.nav{display:grid;gap:var(--space-1)}
.nav button{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-3);flex-wrap:wrap;
  min-height:var(--control-md);padding:var(--space-3);
  border:0;border-radius:var(--radius-control);background:transparent;color:var(--nav-ink);
  font-size:var(--text-body);font-weight:var(--weight-medium);text-align:left}
.nav button:hover{background:var(--nav-surface);border-color:transparent}
.nav button.active{background:var(--nav-surface);color:var(--ink-inverse);font-weight:var(--weight-bold);
  box-shadow:inset 3px 0 0 var(--nav-focus)}
.nav .icon{width:20px;font-size:var(--icon-md);opacity:.85}
.nav .cb-count{margin-left:auto;white-space:nowrap;font-size:var(--text-label)}

.sidebar-footer{margin-top:auto;padding-top:var(--space-8)}
.sidebar-footer .portal{margin-bottom:var(--space-4);padding:var(--space-3);
  border-radius:var(--radius-control);background:var(--nav-surface)}
.portal strong{display:block;margin-bottom:var(--space-1);font-size:var(--text-label);color:var(--ink-inverse)}
.portal small{font-size:var(--text-caption);color:var(--nav-ink-quiet)}
.sidebar-footer p{margin:0 0 var(--space-3);font-size:var(--text-label);color:var(--nav-ink-quiet)}
.sidebar-footer button.link{color:var(--nav-ink)}
.sidebar-me-name{display:none}   /* the desktop top bar shows the name; the phone shows it in 더보기 (W4-1B) */

/* 4.2 Top bar. Deliberately NOT sticky: `.doc-bulk` already sticks at top:0 inside
   the 고객 자료 tab, and two sticky bars at the same offset need a browser to tune. */
.main{grid-column:2;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  min-height:64px;padding:0 var(--space-8);
  background:var(--surface-1);border-bottom:1px solid var(--line-1)}
.topbar .date{font-size:var(--text-label);color:var(--ink-3)}
.topbar .cb-fresh{margin-left:auto;font-size:var(--text-caption);color:var(--ink-3)}
.identity{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-label)}
.identity .link{font-weight:var(--weight-bold);color:var(--ink-1)}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-pill);
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:var(--text-label);font-weight:var(--weight-bold)}

/* 4.3 Content well */
.content{max-width:1440px;margin:0 auto;padding:var(--space-8) var(--space-8) var(--space-10)}
.board-page{max-width:none!important}
.loading{padding:var(--space-10);color:var(--ink-3)}
.demo-strip{margin-bottom:var(--space-5);padding:var(--space-2) var(--space-3);
  border:1px solid var(--line-1);border-radius:var(--radius-control);
  background:var(--warning-soft);color:var(--warning);font-size:var(--text-label)}
/* each half of the strip wraps as a whole ('Google Calendar·Drive 연결 전' never leaves '전' alone on a line) */
.demo-strip>span{display:inline-block}

/* 4.4 Page header grammar — eyebrow (caption) · h1 (one --text-page per screen)
   · subtitle (body) · one primary action, separated from the page by a hairline. */
.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-5);
  margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--line-1)}
.eyebrow{margin-bottom:var(--space-2);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:normal;color:var(--ink-3)}   /* W1-B2: Korean words, not spaced-out English capitals */
.subtitle{margin-bottom:0;font-size:var(--text-body);color:var(--ink-3)}
.back{margin-bottom:var(--space-5)}
button.link.back{display:inline-flex;align-items:center;min-height:var(--control-lg);
  margin:0 0 var(--space-5);padding:0 var(--space-4);
  border:1px solid var(--line-2);border-radius:var(--radius-control);
  background:var(--surface-1);color:var(--ink-1);
  font-size:var(--text-body-lg);font-weight:var(--weight-medium);line-height:var(--leading-tight);
  text-decoration:none;box-shadow:none}
button.link.back::first-letter{margin-right:var(--space-1);font-size:var(--text-section);
  line-height:1;vertical-align:-2px;color:var(--accent)}
button.link.back:hover,button.link.back:focus-visible{background:var(--accent-soft);border-color:var(--accent)}


/* ── 5 ── Layout primitives ──────────────────────────────────────────────── */

/* A panel is a group with a name. It earns a border; it never gets a shadow. W5-1B (A W5-1A): 16px on a phone, 20px
   above (was 24 - the agency's panels have been 20), the same 20 as the gap between blocks. */
.panel{margin-bottom:var(--space-5);padding:var(--space-5);
  border:1px solid var(--line-1);border-radius:var(--radius-surface);
  background:var(--surface-1);box-shadow:var(--shadow-none)}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  margin-bottom:var(--space-5)}
.panel-title h2,.panel-title h3{margin:0;font-size:var(--text-title)}
.panel-title h2 .cb-chip{margin-left:var(--space-2);vertical-align:middle;letter-spacing:0}
.panel-title small{color:var(--ink-3)}
/* W5-c: a title with its description stacked under it (<div><h2/><small/></div>: 진료 가능 시간, 고객 자료 요약) - the
   description is a block 4px under the title; inline it sat 3px off (its line box only). */
.panel-title>div>h2+small{display:block;margin-top:var(--space-1)}
.panel>p:not([class]){font-size:var(--text-body)}   /* W5-2B (A W5-2A): body text is 13/400 - a plain panel paragraph inherited 14 */
/* W5-1B (A W5-1A): the flush panel - a panel inside another surface (a patient tab, or .panel.flush anywhere) has no
   surface of its own; flush neighbours are divided by a rule with 20px either side. The patient tabs used to stack three
   surfaces (tab panel > panel > tiles), 17px narrower on each side on a phone; the decision and patient-data panels lose
   their accent top line with their box (their place in the tab and their titles name them). */
.panel.flush,.tab-panel .panel{margin:0;padding:0;border:0;border-radius:0;background:none}
.panel.flush+.panel.flush,.tab-panel .panel+.panel{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--line-1)}

.grid2{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr);gap:var(--space-5);margin-bottom:var(--space-5)}
.grid-equal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5)}
/* W5-1B (A W5-1A): a column of panels ends flush and the grid gap alone spaces the columns - with the last panel's
   margin too it was 40px when they stack on a phone (설정: Google Calendar -> Google Drive). A .grid-equal of form fields
   is untouched. */
.grid2>.panel,.grid2>div>.panel:last-child,.grid-equal>.panel{margin-bottom:0}
.grid-equal:has(>.panel){margin-bottom:var(--space-5)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:var(--space-5)}
.stack{display:grid;gap:var(--space-3)}
.row{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* Toolbar: a filter bar, not a card. Controls share the field height. */
.toolbar{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-5)}
.toolbar input{max-width:320px}
.toolbar select{width:auto}
.toolbar>button:not(.link),.toolbar>input,.toolbar>select{min-height:var(--control-md)}
/* A toolbar's "selected filter" is a state, not the screen's primary action: it
   is tinted, never filled, so it cannot compete with the real primary button. */
.toolbar>button.primary{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.toolbar>button.primary:hover{background:var(--accent-soft);border-color:var(--accent-hover)}

/* Tab strip. The strip line is an inset shadow so an active tab can cover it
   even though the strip scrolls sideways. */
.tabs{--tab-line:var(--line-2);--tab-surface:var(--surface-1);
  position:relative;display:flex;flex-wrap:nowrap;align-items:flex-end;gap:var(--space-1);
  margin:0;padding:var(--space-1) var(--space-3) 0;border-bottom:0;
  box-shadow:inset 0 -1px 0 var(--tab-line);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.tabs button{flex:0 0 auto;min-height:var(--control-lg);padding:var(--space-2) var(--space-5);
  border:1px solid var(--line-1);border-bottom-color:var(--tab-line);
  border-radius:var(--radius-control) var(--radius-control) 0 0;
  background:var(--surface-3);color:var(--ink-2);
  font-size:var(--text-body);font-weight:var(--weight-medium);white-space:nowrap}
.tabs button:hover{background:var(--surface-2);color:var(--ink-1)}
.tabs button:focus-visible{outline-offset:-4px}
.tabs button.active,.tabs button.active:hover{background:var(--tab-surface);
  border:1px solid var(--tab-line);border-bottom-color:var(--tab-surface);
  color:var(--accent-ink);font-weight:var(--weight-bold);box-shadow:inset 0 3px 0 var(--accent)}
/* W5-1B: the tab and its panel are one white surface (as in the agency portal) holding flush panels; 20 all round - the
   4px bottom was there for the inner panels' own 20px margin, gone with their boxes */
.tab-panel{margin-bottom:var(--space-5);padding:var(--space-5);
  border:1px solid var(--line-2);border-top:0;
  border-radius:0 0 var(--radius-surface) var(--radius-surface);background:var(--surface-1)}
.tab-panel>.empty{margin-bottom:var(--space-5)}
.tab-panel>:last-child,.tab-panel>.detail-grid>*>:last-child{margin-bottom:0}

/* Segmented view switch (월/주, 보드/표). */
.view-switch{display:inline-flex;padding:var(--space-1);
  border:1px solid var(--line-2);border-radius:var(--radius-control);background:var(--surface-3)}
.view-switch button{min-height:var(--control-sm);padding:var(--space-1) var(--space-3);
  border:0;border-radius:var(--radius-control);background:transparent;
  font-size:var(--text-label);color:var(--ink-2)}
.view-switch button.active{background:var(--surface-1);color:var(--accent-ink);font-weight:var(--weight-bold)}

/* States: every one says what happened and what to do next. No illustrations. */
.empty{padding:var(--space-8) var(--space-5);border-radius:var(--radius-control);
  background:var(--surface-2);color:var(--ink-3);
  font-size:var(--text-body);line-height:var(--leading-normal);text-align:center}
.lane-empty{padding:var(--space-8) var(--space-3);border:1px dashed var(--line-2);
  border-radius:var(--radius-control);color:var(--ink-3);font-size:var(--text-label);text-align:center}
.cb-inbox-empty{padding:var(--space-4);border:1px dashed var(--line-2);border-radius:var(--radius-surface);
  color:var(--ink-3);font-size:var(--text-body-lg)}
.warning{padding:var(--space-3) var(--space-4);border-radius:var(--radius-control);
  background:var(--warning-soft);color:var(--warning);
  font-size:var(--text-body);line-height:var(--leading-normal)}
.login-error,.dialog-error{font-size:var(--text-body);line-height:var(--leading-normal);color:var(--danger)}
.cb-banner{margin-bottom:var(--space-3);padding:var(--space-3);border-radius:var(--radius-control);
  font-size:var(--text-body);line-height:var(--leading-normal)}
.cb-banner .row{margin-top:var(--space-2)}
.cb-banner .help{display:block;color:inherit}
.cb-banner .note{margin:var(--space-2) 0 0}
.cb-banner button.link{color:inherit;text-decoration:underline}
.banner-list,.time-list{display:grid;gap:var(--space-2);margin:var(--space-2) 0;padding-left:var(--space-5)}
.time-list{list-style:none;padding-left:0}
.time-list li{padding:var(--space-2) var(--space-3);border:1px solid var(--line-2);
  border-radius:var(--radius-control);background:var(--surface-1);color:var(--ink-1)}
.cb-offline button{margin-left:var(--space-2);border:0;background:var(--surface-1);color:var(--danger)}

/* Process steps (환자 상세 상단). */
.steps{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-6) 0}
.step{padding:var(--space-2) var(--space-3);border-radius:var(--radius-control);
  background:var(--surface-3);color:var(--ink-3);font-size:var(--text-label)}
/* W5-3B (A W5-3A): the current step (.done[aria-current=step]) is ringed in ink, not tinted green - its place is told by
   a mark. The hospital line names stages, not a single path ('에이전시 준비 중' comes first in time, last in the line), so
   the steps before it are not marked as reached. */
.step.done{background:var(--surface-1);color:var(--ink-1);font-weight:var(--weight-bold);box-shadow:inset 0 0 0 2px var(--ink-2)}
/* W4-6A mirror: on a phone the step line is one row - the current step with its place ('2/7') and the next one; wider
   screens keep the full line. Markup: .step.done[aria-current=step][data-step-of], .step[data-step-of] */
@media (max-width:760px){
  .steps .step{display:none}
  .steps .step.done,.steps .step.done+.step{display:inline-flex;align-items:center;gap:var(--space-1)}
  .steps .step.done::after{content:'\00b7\00a0' attr(data-step-of);font-variant-numeric:tabular-nums}
  .steps .step.done+.step::before{content:'\B2E4\C74C';color:var(--ink-3)}
  .steps:not(:has(.step.done)){display:none}   /* an archived customer has no current step */
}

/* Activity / drop-reason rows */
.activity{display:flex;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line-1)}
.activity:last-child{border-bottom:0}
.activity-dot{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;
  border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-ink)}
.activity p{margin:0 0 var(--space-1);font-size:var(--text-body);color:var(--ink-1)}
.activity small{font-size:var(--text-caption);color:var(--ink-3)}
/* B (A §23): an appointment row (time + status badge) lets the badge drop below when the clock does not fit
   beside it; the clock is never narrower than '12:13 KST' (enlarged text cut it to "K / ST"). Rows with a dot
   are not touched. */
.activity:has(>span>.cb-time-clinic){flex-wrap:wrap}
.activity>span:has(>.cb-time-clinic){overflow-wrap:break-word}

.legend{display:flex;gap:var(--space-5);margin-top:var(--space-5);font-size:var(--text-label);color:var(--ink-3)}
.integration-icon{display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line-1);border-radius:var(--radius-control);
  background:var(--surface-1);color:var(--info);font-size:var(--text-section)}


/* ── 6 ── Metric strip: KPI tiles · priority filters · quick filters ─────── */
/* Rule 6 — a number is not a group, so none of these is a card. They read as one
   measured strip separated by hairlines, sitting directly on the page. */

.stats,.hospital-priorities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin:0 0 var(--space-6);border-bottom:1px solid var(--line-2)}
.stat,.priority-tile{display:grid;align-content:start;justify-content:stretch;gap:var(--space-1);min-width:0;
  padding:var(--space-3) var(--space-4);border:0;border-bottom:2px solid transparent;
  border-radius:0;background:transparent;color:var(--ink-2);text-align:left}
.stat+.stat,.priority-tile+.priority-tile{box-shadow:inset 1px 0 0 var(--line-1)}

.stat-top{display:flex;justify-content:space-between;gap:var(--space-2);
  font-size:var(--text-label);font-weight:var(--weight-medium);color:var(--ink-3)}
.stat strong{display:block;margin:var(--space-2) 0 0;
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:var(--text-page);font-weight:var(--weight-bold);line-height:var(--leading-tight);
  letter-spacing:-.02em;color:var(--ink-1)}
.stat small{font-size:var(--text-caption);color:var(--ink-3)}

.priority-tile>span{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);
  font-size:var(--text-body);font-weight:var(--weight-medium);color:var(--ink-1)}
.priority-tile strong{font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:var(--text-section);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--ink-1)}
.priority-tile small{display:block;font-size:var(--text-caption);line-height:var(--leading-normal);color:var(--ink-3)}
.priority-tile:hover{background:var(--surface-2);border-bottom-color:var(--line-3)}
/* Selected reads as a chosen filter (underline + tint + ink), not as a filled card. */
.priority-tile.selected,.priority-tile[aria-pressed=true]{background:var(--accent-soft);
  border-bottom-color:var(--accent)}
.priority-tile.selected>span,.priority-tile.selected strong,
.priority-tile[aria-pressed=true]>span,.priority-tile[aria-pressed=true] strong{color:var(--accent-ink)}
.priority-tile.selected small,.priority-tile[aria-pressed=true] small{color:var(--accent-ink)}

/* Quick filters (H-17): a chip row. State is a tick + border + weight, never colour alone. */
.filter-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin:0 0 var(--space-4)}
.filter-chip{gap:var(--space-1);min-height:var(--control-md);padding:var(--space-2) var(--space-3);
  border:1px solid var(--line-2);border-radius:var(--radius-pill);background:var(--surface-1);
  font-size:var(--text-label);font-weight:var(--weight-medium);color:var(--ink-2)}
.filter-chip b{margin-left:var(--space-1);font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-weight:var(--weight-bold);color:var(--ink-1)}
.filter-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);
  font-weight:var(--weight-bold)}
.filter-chip.on::before{content:"✓";margin-right:var(--space-1)}
.filter-chip.on b{color:var(--accent-ink)}

/* The five-step pipeline shortcut on the dashboard. */
.pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2)}
.pipeline button{display:grid;align-content:start;justify-content:stretch;gap:var(--space-2);
  padding:var(--space-4) var(--space-3);border:1px solid var(--line-1);background:var(--surface-2);text-align:left}
.pipeline b{display:block;font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:var(--text-section);color:var(--ink-1)}
.pipeline span{font-size:var(--text-label);color:var(--ink-3)}

.board-summary{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center;
  margin:0 0 var(--space-6);font-size:var(--text-label);color:var(--ink-3)}
.board-summary strong{margin-right:var(--space-1);font-size:var(--text-section);color:var(--ink-1)}
.board-summary .divider{width:1px;height:20px;background:var(--line-1)}
.workflow-note{margin-top:0;font-size:var(--text-label);color:var(--ink-3)}


/* ── 7 ── Decision inbox — 지금 결정할 일 ────────────────────────────────── */
.inbox-section{margin:0 0 var(--space-6)}
.inbox-heading{flex-wrap:wrap;margin-bottom:var(--space-3)}
.inbox-heading h2{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-title)}

.inbox-group{margin:0 0 var(--space-3)}
.inbox-group-head{display:flex;align-items:center;gap:var(--space-3);width:100%;
  padding:var(--space-2) var(--space-3);border:1px solid var(--line-2);
  border-radius:var(--radius-surface);background:var(--surface-3);
  font-size:var(--text-body);justify-content:flex-start;text-align:left}
.inbox-group[data-open="1"] .inbox-group-head{border-radius:var(--radius-surface) var(--radius-surface) 0 0;border-bottom:0}
.inbox-group-title{font-weight:var(--weight-bold);color:var(--ink-1)}
.inbox-group-caret{margin-left:auto;color:var(--ink-3)}
.inbox-group[data-inbox-group=urgent] .inbox-group-head{background:var(--danger-soft);border-color:var(--danger)}
.inbox-group[data-inbox-group=urgent] .inbox-group-title{color:var(--danger)}
.inbox-group-list{max-height:60vh;overflow-y:auto;scrollbar-gutter:stable;
  margin:0;padding:0;border:1px solid var(--line-2);border-top:0;
  border-radius:0 0 var(--radius-surface) var(--radius-surface);background:var(--surface-2)}
.cb-inbox{gap:0}

/* One row per patient. Severity is carried by a rail, a word and a chip — never colour alone. */
/* W-acct mirror (A fefb329): the title column keeps at least 8em - with overflow-wrap:anywhere a 0 floor lets a wide button
   press it to one letter a line; in em, so it only bites when the text is large, and min(...,100%) never pushes past a row */
.cb-inbox-item{grid-template-columns:minmax(min(8em,100%),1fr) auto;gap:var(--space-1) var(--space-3);
  align-items:start;padding:var(--space-3) var(--space-4);
  border:0;border-bottom:1px solid var(--line-1);border-left:var(--space-1) solid var(--line-3);
  border-radius:0;background:var(--surface-1)}
/* Owner first, severity last: a critical row keeps its danger rail whoever owns it. */
.cb-inbox-item[data-owner=hospital]{border-left-color:var(--accent)}
.cb-inbox-item[data-owner=agency],.cb-inbox-item[data-owner=waiting]{border-left-color:var(--line-3);background:var(--surface-1)}
.cb-inbox-item[data-inbox=purge-hold]{border-left-color:var(--line-3)}
.cb-inbox-item[data-severity=high]{border-left-color:var(--warning);background:var(--warning-soft)}
.cb-inbox-item[data-severity=critical],.cb-inbox-item[data-overdue],.cb-inbox-item.urgent{
  border-left-color:var(--danger);background:var(--danger-soft)}
/* W5-4B2: a state chip on a tinted row keeps its shape - its own fill was the row's colour ('서두름' on a warning row
   read as indented text); a white fill, still a fill (a state, not an owner's outline) */
.cb-inbox-item[data-severity=high] .cb-chip:not(.inbox-chip),.cb-inbox-item[data-severity=critical] .cb-chip:not(.inbox-chip),
.cb-inbox-item[data-overdue] .cb-chip:not(.inbox-chip),.cb-inbox-item.urgent .cb-chip:not(.inbox-chip){background:var(--surface-1)}

.cb-inbox-title{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  font-size:var(--text-body);font-weight:var(--weight-normal);color:var(--ink-2);overflow-wrap:anywhere}
.cb-inbox-title button{min-height:var(--control-sm);width:auto}
.inbox-group-list>.cb-inbox-item:last-child{border-bottom:0}
.inbox-group[data-inbox-group=waiting] .cb-count{background:var(--line-2);color:var(--ink-1)}
/* Primary: the patient. */
.cb-inbox-title .inbox-patient{font-size:var(--text-title);font-weight:var(--weight-bold);color:var(--ink-1)}
/* Secondary: what is waiting. Tertiary: when and why. */
.cb-inbox-meta{grid-column:1;font-size:var(--text-label);color:var(--ink-3);overflow-wrap:anywhere}
.cb-inbox-meta b{font-size:var(--text-body);font-weight:var(--weight-bold);color:var(--ink-1)}
.cb-inbox-extra{grid-column:1;display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
/* W5-4B: a to-do row's extra actions (Referral 발급, 독촉 메모, 재진 열기 ...) are buttons - the button radius and a 32px
   box (40 on a phone), not outlined pills that read like the owner badge beside them */
.inbox-chip{display:inline-flex;align-items:center;min-height:var(--control-sm);padding:0 var(--space-3);
  border:1px solid var(--line-2);border-radius:var(--radius-control);background:var(--surface-1);
  font-size:var(--text-label);font-weight:var(--weight-medium);color:var(--ink-1)}
.inbox-chip:hover{background:var(--surface-3)}
/* The row's one action. common.css already gives it the 44px touch height. */
.cb-inbox-item>button.inbox-main{grid-row:1/span 2;grid-column:2;align-self:center;white-space:nowrap}
#inbox-more{margin-top:calc(var(--space-2) * -1)}


/* ── 8 ── Board — lane and patient card ──────────────────────────────────── */
.lane-jumps{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-4)}
.lane-jumps button{min-height:var(--control-md);padding:var(--space-2) var(--space-3);
  background:transparent;border-color:var(--line-2);font-size:var(--text-label)}
.lane-jumps button:hover{background:var(--surface-3)}
.lane-jumps b{display:inline-block;margin-left:var(--space-2);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--text-label);color:var(--accent-ink)}

.kanban{display:flex;gap:var(--space-4);align-items:flex-start;overflow-x:auto;
  padding:2px 2px var(--space-6)}   /* D-04: no fixed 580px - a folded step stretches to the row, so the row is the tallest open step (490px min) */
/* NOTE SHARED: shared/board.css pins the sticky lane head with `margin:-13px`, so the
   lane's padding must stay 13px until that rule moves to the space scale. */
.lane{flex:0 0 268px;min-height:490px;padding:var(--space-3);
  border:1px solid var(--line-1);border-radius:var(--radius-surface);background:var(--surface-3);
  transition:background var(--motion-fast) var(--ease)}
.lane.drop-target{background:var(--accent-soft);border-color:var(--accent)}
.lane-head{display:flex;justify-content:space-between;align-items:center;padding:var(--space-1) var(--space-1) var(--space-4)}
.lane-head h2{display:flex;gap:var(--space-2);align-items:center;margin:0;
  font-size:var(--text-body);font-weight:var(--weight-bold);color:var(--ink-1)}
.lane-head .lane-dot{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--accent)}
.lane-head small{padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);
  background:var(--surface-1);color:var(--ink-2);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:var(--text-label);font-weight:var(--weight-medium)}
.lane-desc{padding:0 var(--space-1) var(--space-3);font-size:var(--text-caption);color:var(--ink-3)}
.hospital-kanban .agency-preparation{background:var(--surface-2)}
.hospital-kanban .agency-preparation .lane-dot{background:var(--line-3)}

/* 8.1 The patient card.
   Three levels of emphasis, so the eye lands in the same place on every card:
     PRIMARY    patient name  ·  다음 할 일  ·  the one action button
     SECONDARY  concern · stage · appointment · document tiles
     TERTIARY   agency · country · stay · money · memo count
   A card gets a border, never a shadow. Its left rail says whose turn it is. */
.lead-card{position:relative;margin-bottom:var(--space-3);padding:var(--space-4);
  border:1px solid var(--line-1);border-radius:var(--radius-surface);
  background:var(--surface-1);box-shadow:var(--shadow-none);cursor:pointer;
  transition:border-color var(--motion-fast) var(--ease)}
.lead-card:hover{border-color:var(--line-3)}
.lead-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lead-card[draggable=true]{cursor:grab}

.hospital-card{border-left:4px solid var(--line-2)}
.hospital-card[data-owner=hospital]{border-left-color:var(--accent)}
.hospital-card[data-owner=agency]{border-left-color:var(--line-3)}
.hospital-card[data-owner=waiting]{border-left-color:var(--line-1)}
.hospital-card[data-severity=critical],.hospital-card[data-overdue]{border-left-color:var(--danger);background:var(--danger-soft)}
/* Review status is conveyed by the lane, owner and action, with the same card frame. */

/* tertiary — where the patient came from */
.lead-card .card-agency{display:flex;justify-content:space-between;gap:var(--space-2);
  margin-bottom:var(--space-3);font-size:var(--text-caption);color:var(--ink-3)}
.card-agency .cb-age{font-size:var(--text-caption);white-space:nowrap}

/* primary — who this is */
/* squeeze sweep (B1 family, A W4-6A2): the name asks for 7em before it shares the row with the owner badge - with flex:1
   (basis 0) a long name was pressed to 142px / 7 lines (1280) and 70px / 14 lines (text 200%); now the badge wraps under */
.card-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-2)}
.card-head h3{flex:1 1 7em;min-width:0;margin:0 0 var(--space-2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);
  font-size:var(--text-title);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--ink-1)}
.card-head-side{display:inline-flex;align-items:center;gap:var(--space-2);flex-shrink:0}
/* 담당 직원은 이름에 붙는 속성이다: 카드에서는 이름 바로 옆(자리가 없을 때만 다음 줄), 나이·성별과 같은 크기 —
   에이전시 카드와 같은 자리(Codex UI 인계 §7, B-03 2026-09-27). 환자 상세 머리는 이름 아래 줄 그대로. */
.card-head h3 .name-meta,.detail-title h1 .name-meta{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-1) var(--space-2);margin-top:var(--space-1);
  font-size:var(--text-label);font-weight:var(--weight-normal);letter-spacing:0;line-height:var(--leading-normal)}
.detail-title h1 .name-meta{margin-top:var(--space-2);gap:var(--space-1) var(--space-3)}
.card-head h3 .name-meta{display:inline-flex;margin-top:0}
.card-age,.patient-age{display:inline-block;margin:0;font-size:var(--text-label);
  font-weight:var(--weight-normal);color:var(--ink-3)}

.cb-assignee{display:inline-block;min-width:0;max-width:16ch;min-height:0;
  padding:0 var(--space-2);border:1px solid var(--line-2);border-radius:var(--radius-pill);
  background:var(--surface-3);color:var(--accent-ink);
  font-size:var(--text-label);font-weight:var(--weight-medium);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.cb-assignee.none{border-style:dashed;background:transparent;color:var(--ink-3);font-weight:var(--weight-normal)}
.cb-assignee:hover,.cb-assignee:focus-visible{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.cb-assignee.none:hover,.cb-assignee.none:focus-visible{background:var(--surface-3);color:var(--ink-2)}

/* tertiary — stay window */
.card-stay{margin:0 0 var(--space-2);font-size:var(--text-label);color:var(--ink-3)}
/* secondary — what they asked for */
.lead-card .card-concern{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:0 0 var(--space-3);font-size:var(--text-body);line-height:var(--leading-normal);color:var(--ink-2)}

/* NOTE SHARED: shared/board.css owns the 2×2 grid and the tile box. Only spacing here. */
.doc-chips{margin-bottom:var(--space-3)}
.doc-chip{border:1px solid var(--line-1);border-radius:var(--radius-control);
  background:var(--surface-2);color:var(--ink-3);font-size:var(--text-label)}
.doc-chip.ready{border-color:var(--accent-soft);background:var(--accent-soft);color:var(--accent-ink)}
.missing-docs{max-width:100%;white-space:normal;text-align:left;line-height:var(--leading-normal)}

/* stage is subdued; 단계/지금 keys are quiet labels. */
.stage-badge{display:inline-flex;align-items:center;gap:var(--space-1)}
.stage-key,.now-key{flex:none;font-size:var(--text-caption);font-weight:var(--weight-medium);color:var(--ink-3)}

/* primary — the next action. The loudest text on the card after the name. */
.card-next{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line-1);
  font-size:var(--text-label);line-height:var(--leading-normal);color:var(--ink-3)}
.card-next>small{font-size:var(--text-caption);color:var(--ink-3)}
.card-next b{font-size:var(--text-body-lg);font-weight:var(--weight-bold);color:var(--accent-ink)}
.card-next[data-owner=agency] b,.card-next[data-owner=waiting] b,.card-next[data-owner=none] b{color:var(--ink-2)}
.card-chips{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-2)}
.card-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);margin-top:var(--space-3)}

/* tertiary — money and appointment */
.money-chips{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-2)}
/* W5-4B (A W5-4A meta-line action): a card's money item is an action - a warning (refund: danger) outline with a '!'
   mark, worded as the action ('! 상담비 입금 확인'), the button radius and a 32px box (40 on a phone); the state stays in
   its aria-label ('상담비 미입금 - 입금 확인'). '입금 완료' has nothing to do: a muted state chip. */
.money-chip{display:inline-flex;align-items:center;min-height:var(--control-sm);padding:0 var(--space-3);
  border:1px solid var(--warning);border-radius:var(--radius-control);background:var(--surface-1);color:var(--warning);
  font-size:var(--text-label);font-weight:var(--weight-medium);text-align:left;cursor:pointer}
.money-chip.danger{border-color:var(--danger);color:var(--danger)}
.money-chip:hover{background:var(--warning-soft)}
.money-chip.danger:hover{background:var(--danger-soft)}
.hospital-appointment{margin:var(--space-2) 0;font-size:var(--text-label);color:var(--ink-2)}
.hospital-appointment .cb-time-local{margin-left:var(--space-4)}

/* the card's actions: one accent button, then quieter ones. */
.hospital-card>button[data-hospital-open]{width:100%;justify-content:center;margin-top:var(--space-2);
  min-height:var(--control-md);font-size:var(--text-body)}
.chart-card-link{display:block;width:100%;box-sizing:border-box;margin-top:var(--space-2);
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--line-2);border-radius:var(--radius-control);
  background:var(--surface-1);color:var(--ink-2);
  font-size:var(--text-label);font-weight:var(--weight-medium);text-align:center;text-decoration:none}
.chart-card-link:hover{background:var(--surface-3);border-color:var(--line-3)}
.card-memos{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:var(--space-2);width:100%;margin-top:var(--space-3);padding-top:var(--space-3)!important;
  border-top:1px solid var(--line-1)!important;font-size:var(--text-body)!important;color:var(--ink-3)}
/* W5-2B: a control, not a caption - 13 with a 500 count as in the agency portal (was 11 with a 600 count) */
.card-memos b{padding:var(--space-1) var(--space-2);border-radius:var(--radius-control);
  background:var(--surface-3);font-weight:var(--weight-medium);color:var(--ink-2)}
span.memo-waiting-count{font-size:var(--text-caption)}

/* The board's own horizontal scrollbar above the lanes. */
.board-top-scroll{height:20px;margin-bottom:var(--space-3);overflow-x:scroll;overflow-y:hidden;
  border-radius:var(--radius-control);scrollbar-width:auto}
.board-top-scroll[hidden]{display:none}
.board-top-scroll-track{height:1px}
.board-top-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.board-empty{margin:0 0 var(--space-4)}
.board-empty .row{margin-top:var(--space-3)}
.board-empty [data-field=active-filters]{font-weight:var(--weight-bold)}


/* ── 9 ── Patient detail ─────────────────────────────────────────────────── */
.detail-title{display:flex;justify-content:space-between;gap:var(--space-4);container:cb-detail / inline-size}
/* W3-1B (A W3-1A groups; the header's wrap and the name's 20em are shared since W3-1A2, common.css): the hospital
   side carries three to five buttons, not the agency's two. Where the side would squeeze the name (a main column
   under 64em, or five buttons anywhere) it takes its own row under the name - chips from the left, the buttons in
   equal columns that wrap. A phone keeps the shared auto-fit rule. */
@container cb-detail (max-width:64em){.cb-detail-side{width:100%;align-items:stretch}.cb-detail-status{justify-content:flex-start}}
.cb-detail-side:has(>.cb-detail-actions>:nth-child(5)){width:100%;align-items:stretch}
.cb-detail-side:has(>.cb-detail-actions>:nth-child(5))>.cb-detail-status{justify-content:flex-start}
@media (min-width:761px){
  @container cb-detail (max-width:64em){.row.cb-detail-actions{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(12em,1fr))}}
  .row.cb-detail-actions:has(>:nth-child(5)){grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(12em,1fr))}
}
.detail-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:var(--space-4) 0;
  font-size:var(--text-label);color:var(--ink-3)}
.detail-meta a{color:var(--accent-ink);overflow-wrap:anywhere}

/* 지금 — the single most important line on the page. */
.detail-now{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2);
  margin:var(--space-4) 0 0;font-size:var(--text-body-lg)}
.detail-now b{font-weight:var(--weight-bold);color:var(--accent-ink)}
.detail-now[data-owner=hospital]{padding:var(--space-3);border-left:3px solid var(--accent);background:var(--accent-soft)}
.detail-now[data-owner=agency] b,.detail-now[data-owner=waiting] b,.detail-now[data-owner=none] b{color:var(--ink-2)}

.hospital-next{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);
  margin-bottom:var(--space-5);padding:var(--space-4) var(--space-5);
  border:1px solid var(--line-2);border-radius:var(--radius-surface);background:var(--accent-soft)}
.hospital-next>span{font-size:var(--text-label);color:var(--ink-3)}
.hospital-next[data-owner=hospital]{border-left:3px solid var(--accent)}
.hospital-next[data-owner=agency],.hospital-next[data-owner=waiting],.hospital-next[data-owner=none]{background:var(--surface-2)}
.hospital-decision-panel button.primary:not(:disabled){background:var(--accent);color:var(--ink-inverse);border-color:var(--accent)}
/* B1 (night 2026-10-01): the title asks for 16em before it shares the row - with flex:1 (basis 0) long chips beside it
   squeezed it to one word per line (768: 61px, 7 lines); now the chips and the button wrap under it instead */
.hospital-next strong{flex:1 1 16em;min-width:0;font-size:var(--text-title);font-weight:var(--weight-bold);color:var(--ink-1)}
.hospital-next button{font-size:var(--text-body)}

.hospital-decision-panel>button{margin:var(--space-1) var(--space-2) var(--space-1) 0}
.hospital-decision-panel>.row{margin-top:var(--space-1)}

.status-card{margin-bottom:var(--space-4);padding:var(--space-4);
  border:1px solid var(--line-1);border-radius:var(--radius-control);background:var(--surface-2)}
.status-card p{margin:var(--space-2) 0 0;font-size:var(--text-body)}
.status-card .cb-time-clinic{font-size:var(--text-title);font-weight:var(--weight-bold);color:var(--ink-1)}

/* 진료 차트 */
.hospital-chart{border-left:4px solid var(--accent)}
.hospital-chart .chart-card-link{width:auto;margin:0}
.hospital-chart .row>a.chart-card-link{display:inline-flex;align-items:center;justify-content:center;
  flex:1 1 0;min-width:112px;padding:var(--space-2) var(--space-3)}
.hospital-chart .row>button.keep-size{flex:0 0 auto}

/* Patient DATA — four equal tiles: name top-left, count bottom-right. */
.hospital-patient-data .panel-title{margin-bottom:var(--space-4)}
.hospital-patient-data .panel-title small{display:block;margin-top:var(--space-1);font-size:var(--text-caption)}
.hospital-patient-data .panel-title button{white-space:nowrap;font-size:var(--text-label)}
.patient-data-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;
  gap:var(--space-2);align-items:stretch}
.patient-data-item{display:grid;grid-template-rows:1fr auto;justify-items:start;justify-content:stretch;gap:var(--space-2);
  min-height:104px;padding:var(--space-3);text-align:left;
  border:1px solid var(--line-1);border-radius:var(--radius-control);
  background:var(--surface-2);font-weight:var(--weight-normal)}
.patient-data-item:hover{background:var(--surface-3);border-color:var(--line-3)}
.patient-data-item>span:first-child{display:block;width:100%;min-width:0}
.patient-data-item strong{display:block;font-size:var(--text-body);font-weight:var(--weight-bold);
  line-height:var(--leading-tight);color:var(--ink-1)}
.patient-data-item small{display:block;margin-top:var(--space-1);font-size:var(--text-caption);
  line-height:var(--leading-normal);white-space:normal;overflow-wrap:anywhere;color:var(--ink-3)}
.data-count{font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:var(--text-label);font-weight:var(--weight-bold);color:var(--accent-ink);white-space:nowrap}
.patient-data-item .data-count{justify-self:end;align-self:end}
.data-count>span{margin-left:var(--space-2)}

/* 처리 필요 — a list, not a card. */
.hospital-pending-tasks{padding:0 var(--space-1) var(--space-3)}
.hospital-pending-tasks>h3{margin:0 0 var(--space-2);font-size:var(--text-label);
  font-weight:var(--weight-medium);color:var(--ink-3)}
.hospital-task-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  padding:var(--space-3) 0;border-bottom:1px solid var(--line-1)}
.hospital-task-row:last-child{border-bottom:0}
.hospital-task-label strong{font-size:var(--text-body);color:var(--ink-1)}
.hospital-task-label small{display:block;margin-top:var(--space-1);font-size:var(--text-caption);color:var(--ink-3)}
.hospital-task-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end;align-items:center}
.hospital-task-actions button{font-size:var(--text-label)}
.hospital-data-column{min-width:0}

/* Patient dialogs: whose record is being edited. */
.dialog-patient{margin:calc(var(--space-2) * -1) 0 var(--space-4);padding:var(--space-2) var(--space-3);
  border-left:3px solid var(--accent);border-radius:0 var(--radius-control) var(--radius-control) 0;
  background:var(--accent-soft);font-size:var(--text-body);color:var(--ink-1)}
.lookalike-list{display:grid;gap:var(--space-2);list-style:none;margin:0 0 var(--space-3);padding:0}
.lookalike-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-3);border:1px solid var(--line-1);border-radius:var(--radius-control)}
.lookalike-row small{display:block;margin-top:var(--space-1);font-size:var(--text-label);color:var(--ink-3)}
.lookalike-row small.lookalike-why{color:var(--warning)}
.restore-flag{margin-top:var(--space-1);min-width:180px;max-width:340px;white-space:normal}
.restore-flag small.restore-reason{color:inherit;overflow-wrap:anywhere}
[data-restore-effect]{margin-top:calc(var(--space-1) * -1)}
[data-field=referral-earlier]{margin-top:var(--space-5)}
.referral-rounds{list-style:none;margin:0 0 var(--space-3);padding:0;
  border:1px solid var(--line-1);border-radius:var(--radius-control)}
.referral-round-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);
  padding:var(--space-2) var(--space-3);border-top:1px solid var(--line-1);font-size:var(--text-label)}
.referral-round-row:first-child{border-top:0}
.referral-round-row small.referral-round-reason{flex-basis:100%;overflow-wrap:anywhere}
.referral-round-files{margin-top:var(--space-3)}
.referral-round-files h4{margin:0 0 var(--space-1);font-size:var(--text-body)}

/* Online consultation room */
.meeting-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.meeting-row .meeting-key{min-width:66px;font-size:var(--text-label);color:var(--ink-3)}
.meeting-row small{color:var(--ink-3)}
a.meeting-link{display:inline-flex;align-items:center;gap:var(--space-1);
  font-weight:var(--weight-medium);text-decoration:none;white-space:nowrap}
a.meeting-link:hover,a.meeting-link:focus-visible{text-decoration:underline}
a.meeting-link.card-meeting,a.meeting-link.inbox-meeting,a.meeting-link.cal-meeting{
  margin-left:var(--space-2);font-size:var(--text-label)}
.event-wrap{display:block}
.event-wrap a.meeting-link.cal-meeting{margin:2px 0 var(--space-1) var(--space-1);font-size:var(--text-caption)}
/* TC-05 (B QA): on a phone or touch screen the patient-page meeting row wraps at 320px and the next line's
   '링크 수정' sat on the lower half of the 44px overlay of '미팅 시작 →' (real hit 26px). Both controls take a
   44px box of their own, so no invisible tap area reaches into the other line. Same breakpoint as the shared
   overlay rule. */
@media (max-width:760px),(pointer:coarse){
  .meeting-row{row-gap:0}   /* the 44px boxes already space the lines */
  .meeting-row a.meeting-link,.meeting-row #edit-meeting{min-height:var(--control-lg)}
}


/* ── 10 ── Documents · review dialog · evidence ──────────────────────────── */
.doc-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;
  padding:var(--space-3) 0;border-bottom:1px solid var(--line-1)}
.doc-icon{display:grid;place-items:center;flex-shrink:0;width:max-content;min-width:36px;height:42px;
  padding-inline:var(--space-1);   /* B (A §23): 36px at normal size; enlarged 'PDF' widens the mark instead of splitting */
  border-radius:var(--radius-control);background:var(--accent-soft);color:var(--accent-ink);
  font-size:var(--text-label)}
.doc-row .doc-content{flex:1;min-width:0}
.doc-content a{font-size:var(--text-body);overflow-wrap:anywhere}
.doc-content p{margin:var(--space-1) 0 0;font-size:var(--text-label);color:var(--ink-3)}
.doc-content p.doc-reason{color:var(--danger)}
.doc-side{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;justify-content:flex-end}
.doc-side button.small,.hospital-task-actions button.small{min-width:76px}
.doc-side button.small,.agency-memo button.small{min-height:var(--control-md)}
.doc-row[data-doc-state=voided] .doc-icon,.doc-row[data-doc-state=done] .doc-icon,
.doc-row[data-doc-state=pending] .doc-icon{opacity:.5}
.doc-row[data-doc-provider=link] .doc-content>span{font-size:var(--text-label)}
.doc-link-open{margin-left:var(--space-1);font-size:var(--text-label);font-weight:var(--weight-medium);white-space:nowrap}
.doc-link-tag .cb-chip{margin-right:2px}
.doc-link-host{overflow-wrap:anywhere}
.doc-pick{flex:0 0 24px;display:grid;place-items:center}
.doc-pick input,.doc-bulk .check-row input{width:20px;height:20px;margin:0;padding:0;cursor:pointer}
.doc-row[data-picked]{background:var(--accent-soft)}
/* The bulk bar floats over the list while it scrolls: it may carry a shadow. */
.doc-bulk{position:sticky;top:0;z-index:3;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);
  margin:0 0 var(--space-1);padding:var(--space-2) var(--space-3);
  border:1px solid var(--line-2);border-radius:var(--radius-surface);
  background:var(--surface-1);box-shadow:var(--shadow-raised)}
.doc-bulk label.check-row{align-items:center;margin:0;font-size:var(--text-body);font-weight:var(--weight-medium)}
.doc-bulk-count{font-size:var(--text-label);color:var(--ink-3)}
.doc-bulk #doc-zip{margin-left:auto}
.doc-bulk-help{margin:0 0 var(--space-2)}   /* C-01: read once in the flow, not stuck to the screen with the bar */
.doc-source{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-6)}
.doc-source label.check-row{margin:0}
.edit-current{overflow-wrap:anywhere}
.edit-replace label{margin-bottom:var(--space-2)}
.edit-replace .cb-banner,.edit-replace .warning{margin:var(--space-2) 0 0}
[data-banner=identity-hold] .row{margin-top:var(--space-2)}
[data-banner=identity-hold] button{background:var(--surface-1)}

/* 병원 검토 dialog: evidence on the left, the decision on the right. */
.review-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-6)}
.review-evidence{min-width:0;padding-right:var(--space-6);border-right:1px solid var(--line-1)}
.review-form{min-width:0}
.review-evidence .doc-chips{max-width:420px;margin:0 0 var(--space-4)}
.evidence-group{margin-bottom:var(--space-4)}
.evidence-group h3{display:flex;gap:var(--space-2);align-items:center;margin-bottom:var(--space-1);
  font-size:var(--text-body-lg)}
.evidence-row{display:grid;gap:var(--space-1);padding:var(--space-2) 0;border-top:1px solid var(--line-1);
  font-size:var(--text-body);overflow-wrap:anywhere}

/* Choice groups: one box, one legend, 44px rows. */
.choice-group{min-width:0;margin:0 0 var(--space-4);padding:var(--space-3);
  border:1px solid var(--line-2);border-radius:var(--radius-control)}
.choice-group legend{padding:0 var(--space-1);font-size:var(--text-body);font-weight:var(--weight-bold);color:var(--ink-1)}
label.check-row{display:flex;align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-2);
  font-size:var(--text-body-lg);font-weight:var(--weight-normal);line-height:var(--leading-normal);cursor:pointer}
label.check-row:last-child{margin-bottom:0}
label.check-row.cb-banner{margin-bottom:var(--space-3)}
.check-row input{flex:0 0 auto;width:18px;height:18px;margin:3px 0 0;padding:0}


/* ── 11 ── Calendar · 진료 가능 시간 · slot picker ───────────────────────── */
.cal-nav{display:flex;align-items:center;gap:var(--space-3)}
.cal-nav h2{margin:0 var(--space-3);font-size:var(--text-title)}
.cal-nav .view-switch{margin-left:var(--space-3)}
.cal-nav button.icon-only{display:inline-grid;place-items:center;flex:0 0 auto;
  width:var(--control-md);min-width:var(--control-md);height:var(--control-md);padding:0;
  font-size:var(--icon-md);line-height:1}
.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  border-left:1px solid var(--line-1);border-top:1px solid var(--line-1)}
.weekday{padding:var(--space-3);border-right:1px solid var(--line-1);border-bottom:1px solid var(--line-1);
  background:var(--surface-3);color:var(--ink-2);
  font-size:var(--text-label);font-weight:var(--weight-medium);text-align:center}
.day{min-height:130px;padding:var(--space-2);border-right:1px solid var(--line-1);
  border-bottom:1px solid var(--line-1);background:var(--surface-1)}
.day.outside{background:var(--surface-2);color:var(--ink-3)}
.day-num{display:inline-grid;place-items:center;width:24px;height:24px;margin-bottom:var(--space-2);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--text-label)}
.today .day-num{border-radius:var(--radius-pill);background:var(--accent);color:var(--ink-inverse);
  font-weight:var(--weight-bold)}
.calendar-week .day{min-height:320px}

.event{display:block;width:100%;min-height:0;margin-bottom:var(--space-1);padding:var(--space-1) var(--space-2);
  border:0;border-left:3px solid var(--warning);border-radius:var(--radius-control);
  background:var(--warning-soft);color:var(--ink-1);
  font-size:var(--text-label);font-weight:var(--weight-medium);line-height:var(--leading-normal);
  text-align:left;overflow:hidden;text-overflow:ellipsis}
.event.confirmed{background:var(--success-soft);border-left-color:var(--success)}
.event.busy{background:var(--surface-3);border-left-color:var(--line-3);color:var(--ink-3);cursor:default}
.event strong{display:block;font-size:var(--text-label)}

/* 입국~출국 band */
.stay-bands{display:grid;gap:3px;margin-top:var(--space-1)}
.stay-band{display:block;width:100%;min-height:0;padding:var(--space-1) var(--space-2);
  border:0;border-left:3px solid var(--info);border-radius:var(--radius-control);
  background:var(--info-soft);color:var(--info);
  font-size:var(--text-label);font-weight:var(--weight-medium);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stay-band.starts{border-left-width:5px}
.stay-band.ends{opacity:.8}
.stay-more{font-size:var(--text-caption);color:var(--ink-3)}

/* Closed days and closed hours are shaded, never hidden. */
.day[data-closed=day]{background:repeating-linear-gradient(135deg,var(--surface-3),var(--surface-3) 6px,var(--surface-2) 6px,var(--surface-2) 12px)}
.day[data-closed=day].outside{opacity:.8}
.cal-closed{display:inline-block;margin:0 0 var(--space-1) var(--space-1);
  padding:var(--space-1) var(--space-2);border-radius:var(--radius-control);
  background:var(--surface-3);color:var(--ink-2);
  font-size:var(--text-caption);font-weight:var(--weight-medium);vertical-align:top}
.cal-closed[data-closed-tag=hours]{background:var(--warning-soft);color:var(--warning)}
.cal-open-line{margin:0 0 var(--space-1);font-size:var(--text-caption);line-height:var(--leading-normal);color:var(--ink-3)}
.cal-hours{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;margin:0 0 var(--space-2)}
.cal-hour{display:block;padding:3px 0;background:var(--accent-soft);color:var(--accent-ink);
  font-size:var(--text-caption);text-align:center;line-height:var(--leading-tight)}
.cal-hour[data-open=partial]{background:var(--warning-soft);color:var(--warning)}
.cal-hour[data-open=closed]{background:var(--surface-3);color:var(--ink-3)}

/* 진료 가능 시간 editor */
.hours-grid{display:grid;gap:var(--space-2);margin:0 0 var(--space-3)}
.hours-day{padding:var(--space-3);border:1px solid var(--line-1);border-radius:var(--radius-surface);
  background:var(--surface-2)}
.hours-day[data-mode=closed]{background:var(--danger-soft);border-color:var(--line-2)}
.hours-day[data-mode=ranges]{background:var(--surface-1)}
.hours-day-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2)}
.hours-day-head strong{font-size:var(--text-body-lg)}
.hours-mode{flex-wrap:wrap}
.hours-mode button{min-height:var(--control-sm);white-space:nowrap}
.hours-day>.help{margin:var(--space-2) 0 0}
.hours-ranges{display:grid;gap:var(--space-2);margin:var(--space-2) 0}
.hours-range{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-2)}
.hours-range label{flex:0 1 150px;margin:0;font-size:var(--text-label)}
.hours-ranges .help{margin:0}
.hours-dash{padding-bottom:var(--space-3);color:var(--ink-3)}
.hours-actions,.hours-save-row{margin:0 0 var(--space-4)}
.hours-actions .help,.hours-save-row .help{margin:0}
.hours-blocks{display:grid;gap:var(--space-2);margin:0 0 var(--space-2)}
.hours-block{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border:1px solid var(--line-1);
  border-radius:var(--radius-surface);background:var(--surface-1)}
.hours-block label{flex:0 1 130px;margin:0;font-size:var(--text-label)}
.hours-block label:first-child{flex:0 1 170px}
.hours-block label:nth-child(4){flex:1 1 200px}
.hours-block[data-past]{opacity:.6;background:var(--surface-2)}
.hours-past{margin:var(--space-2) 0 var(--space-3)}
.hours-past>button.link{display:block;margin-bottom:var(--space-2);font-size:var(--text-label)}
[data-field=hours-problems]{margin:0 0 var(--space-2)}
[data-field=hours-problems] p{margin:0 0 var(--space-1);font-size:var(--text-label);line-height:var(--leading-normal)}

/* The slot picker's two locks must not look alike:
   예약 있음 never opens; 진료시간 밖 opens with the tick box. */
/* display:block — the slot stacks clinic time over the viewer's local time. */
.cb-slot{display:block;border-radius:var(--radius-control);font-size:var(--text-body-lg)}
.cb-slot[aria-pressed=true]{font-weight:var(--weight-bold)}
.cb-slot-offhours{border-style:dashed;border-color:var(--warning);background:var(--warning-soft);color:var(--warning)}
.cb-slot-offhours:disabled{background:var(--surface-2);color:var(--ink-3);text-decoration:none}
[data-slot-offhours] .help{display:block;margin-top:var(--space-1);color:inherit}
li.slot-offhours{border-style:dashed;border-color:var(--warning)}
.slot-other{margin:0 0 var(--space-3);padding:var(--space-3);border:1px solid var(--line-1);
  border-radius:var(--radius-surface)}
[data-slot-other-toggle]{margin:0 0 var(--space-3)}
.cb-slot-day label{margin-bottom:0}


/* ── 12 ── Money · agency · settings · account · memo threads ────────────── */
.money{margin-bottom:var(--space-3);font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:var(--text-section);font-weight:var(--weight-bold);color:var(--ink-1)}
.money small{margin-left:var(--space-2);font-family:var(--font);font-size:var(--text-label);
  font-weight:var(--weight-normal)}
.money-table td{min-width:120px;white-space:normal;vertical-align:top}
.money-table td small{display:block;margin-top:var(--space-1)}
.cb-money{border-radius:var(--radius-control);font-size:var(--text-body-lg)}

/* The payment confirmation block: the amount is the one thing that must not be misread. */
.pay-confirm{margin-bottom:var(--space-4);padding:var(--space-4) var(--space-5);
  border:1px solid var(--accent);border-radius:var(--radius-surface);background:var(--accent-soft)}
.pay-item{margin:0;font-size:var(--text-body-lg);font-weight:var(--weight-bold);color:var(--accent-ink)}
.pay-amount{margin:2px 0 var(--space-3);font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:var(--text-page);font-weight:var(--weight-bold);line-height:var(--leading-tight);
  letter-spacing:-.02em;color:var(--ink-1)}
.pay-confirm dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-4);margin:0}
.pay-confirm dt{padding-top:2px;font-size:var(--text-body);color:var(--ink-3)}
.pay-confirm dd{margin:0;font-size:var(--text-title);font-weight:var(--weight-bold);
  line-height:var(--leading-tight);overflow-wrap:anywhere;color:var(--ink-1)}
.pay-confirm dd small{display:block;font-size:var(--text-label);font-weight:var(--weight-normal)}
.pay-confirm dd .cb-time-local{font-size:var(--text-body);font-weight:var(--weight-normal)}
.fee-report-info{margin-top:var(--space-2);font-size:var(--text-label);color:var(--accent-ink)}
.fee-report-info summary{cursor:pointer}
.fee-report-info .note{margin-bottom:0;font-size:var(--text-label)}
.fee-report-info .help{margin-top:var(--space-2);font-size:var(--text-label)}

/* Agencies */
.agency-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.agency-card{padding:var(--space-5);border:1px solid var(--line-1);border-radius:var(--radius-surface);
  background:var(--surface-1)}
.agency-card .avatar{margin-bottom:var(--space-5)}
/* W5-1B: name, date and contact are one group, 8px apart on tokens - the name kept the browser's 16.6px under it and the
   inline date added its line box to the contact's 8 (10px) */
.agency-card>h2{margin-bottom:var(--space-2)}
.agency-card>small{display:block}
.agency-card h3{margin:var(--space-4) 0 var(--space-1)}
.agency-card>.row{margin-top:var(--space-3)}
.agency-card.suspended{background:var(--danger-soft);border-color:var(--line-2)}
.agency-card .board-link{width:100%;margin-top:var(--space-3);justify-content:center;text-align:center}
.agency-contact{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin-top:var(--space-2);
  font-size:var(--text-label);color:var(--ink-3)}
.agency-contact a{font-weight:var(--weight-medium)}
.count-row{display:flex;justify-content:space-between;margin-top:var(--space-5);padding-top:var(--space-4);
  border-top:1px solid var(--line-1);font-size:var(--text-label);color:var(--ink-3)}
.user-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-2);
  padding:var(--space-3) 0;border-top:1px solid var(--line-1)}
.user-row small{display:block;margin-top:var(--space-1);overflow-wrap:anywhere}

/* AP-1B: the agency's money terms and coverage - label left, value right; a long country list wraps in its cell */
.agency-terms{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line-1)}
.agency-card .agency-terms h3{margin:0 0 var(--space-2);font-size:var(--text-body-lg)}
.agency-terms-list{display:grid;gap:var(--space-2);margin:0}
.agency-terms-list>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-1) var(--space-3)}
.agency-terms-list dt{font-size:var(--text-label);color:var(--ink-3)}
.agency-terms-list dd{margin:0;min-width:0;text-align:right;font-weight:var(--weight-bold);color:var(--ink-1)}
.agency-terms-list dd .cb-chip{margin-left:var(--space-1);font-weight:var(--weight-medium)}
.agency-terms>.row{margin-top:var(--space-3)}
.agency-terms-history{margin-top:var(--space-3);font-size:var(--text-body)}
.agency-terms-history summary{cursor:pointer;color:var(--accent-ink);font-size:var(--text-label)}
.agency-terms-line{padding:var(--space-2) 0;border-top:1px solid var(--line-1)}
.agency-terms-line p{margin:0}
.agency-terms-line small{display:block;color:var(--ink-3)}
/* AP-2B: the out-of-coverage chip sits after the country it qualifies */
.cb-chip[data-chip="out-of-coverage"]{margin-left:var(--space-1);white-space:nowrap}
/* AP-4B: countries are picked from the standard list. The coverage form keeps the chosen ones as chips with a remove
   button (an outlined box - pills are for counts); an old free-typed name says '목록에 없음' in words, not only colour. */
.help.warn{color:var(--warning)}
.country-picker{min-width:0;margin:0 0 var(--space-4);padding:var(--space-3);
  border:1px solid var(--line-2);border-radius:var(--radius-control)}
.country-picker legend{padding:0 var(--space-1);font-size:var(--text-body);font-weight:var(--weight-bold);color:var(--ink-1)}
.country-picker>.help{margin:0 0 var(--space-3)}
.country-picker>label{margin-bottom:var(--space-2)}
.country-picked{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-3);padding:0;list-style:none}
.country-picked:empty{display:none}
.country-chip{display:inline-flex;align-items:center;gap:var(--space-1);max-width:100%;min-height:var(--control-sm);
  padding:0 0 0 var(--space-3);border:1px solid var(--line-2);border-radius:var(--radius-control);
  background:var(--accent-soft);color:var(--accent-ink);font-size:var(--text-body);font-weight:var(--weight-medium)}
/* the name takes what the remove button leaves; an off-list mark wraps under the name inside it, never beside it */
.country-chip>span{flex:1 1 auto;min-width:0}
.country-chip[data-legacy]{border-color:var(--warning);background:var(--warning-soft);color:var(--warning)}
.country-chip small{font-size:var(--text-label)}
.country-remove{flex:none;width:var(--control-sm);min-height:var(--control-sm);padding:0;border:0;
  background:none;color:inherit;font-size:var(--text-title)}
.country-results{display:grid;gap:var(--space-1);margin:0;padding:0;list-style:none}
.country-results:empty{display:none}
.country-option{width:100%;flex-wrap:wrap;justify-content:space-between;gap:0 var(--space-3);text-align:left}
.country-option small{font-size:var(--text-label);font-weight:var(--weight-normal);color:var(--ink-3)}
@media(max-width:750px),(pointer:coarse){
  /* 44px: the chip and its remove button are themselves the targets (no overlay that could reach the next chip) */
  .country-chip{min-height:var(--control-lg)}
  .country-remove{width:var(--control-lg);min-height:var(--control-lg)}
  .country-option{min-height:var(--control-lg)}
}
.agency-memo{margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--line-1);
  border-radius:var(--radius-surface);background:var(--surface-2)}
.agency-memo-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
.agency-card .agency-memo h3{margin:0;font-size:var(--text-body-lg)}
.agency-memo .help{margin:var(--space-1) 0 var(--space-2)}
.agency-memo-text{margin:0 0 var(--space-1);font-size:var(--text-body)}
.agency-memo-text.clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden}
.agency-memo button.link{display:block;margin-bottom:var(--space-1);font-size:var(--text-label)}
.agency-memo small{display:block;color:var(--ink-3)}
.agency-memo .agency-memo-empty{margin:0}
textarea.agency-memo-input{min-height:200px}

/* The one-time credential a new account is shown. */
.credential{display:block;margin:0 0 var(--space-3);padding:var(--space-3);
  border:2px dashed var(--accent);border-radius:var(--radius-surface);background:var(--accent-soft);
  font-family:var(--font-num);font-size:var(--text-section);font-weight:var(--weight-bold);
  line-height:var(--leading-tight);overflow-wrap:anywhere;user-select:all}

/* Memo threads (shared/notes.css owns the view switcher and scope banner). */
.memo-thread{margin-top:var(--space-4);padding:var(--space-5);border:1px solid var(--line-1);
  border-radius:var(--radius-surface);background:var(--surface-1)}
.memo-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);
  font-size:var(--text-label);color:var(--ink-3)}
.memo-meta strong{font-size:var(--text-body);color:var(--ink-1)}
.memo-meta time{margin-left:auto;font-size:var(--text-caption)}
.memo-body{margin:var(--space-3) 0 0;font-size:var(--text-body-lg);line-height:var(--leading-normal)}
.memo-replies{margin:var(--space-4) 0 0 var(--space-3);padding-left:var(--space-4);
  border-left:2px solid var(--line-2)}
.memo-replies:empty{display:none}
.memo-reply{margin-top:var(--space-2);padding:var(--space-4);border-radius:var(--radius-control);
  background:var(--surface-2)}
.memo-reply-button{margin-top:var(--space-4);font-size:var(--text-label)}
.memo-quote{margin:0 0 var(--space-5);padding:var(--space-3) var(--space-4);
  border-left:3px solid var(--accent);background:var(--surface-2);max-height:180px;overflow:auto}
.memo-quote p{margin:var(--space-2) 0 0}
.memo-retract{margin-left:var(--space-2);font-size:var(--text-label);text-decoration:underline}
.memo-internal{border-left:3px solid var(--warning)}


/* ── 13 ── Dialog · toast · login ────────────────────────────────────────── */
/* Genuinely floating: these are the only things that carry an overlay shadow. */
dialog{width:560px;max-width:calc(100vw - var(--space-8));max-height:90vh;overflow:auto;
  padding:var(--space-6);border:1px solid var(--line-1);border-radius:var(--radius-surface);
  background:var(--surface-1);color:var(--ink-2);box-shadow:var(--shadow-overlay)}
dialog::backdrop{background:var(--overlay);backdrop-filter:blur(2px)}
dialog h2{margin-bottom:var(--space-5);font-size:var(--text-section)}
dialog.wide{width:960px}
.dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-6)}

#toast{position:fixed;bottom:var(--space-6);left:50%;transform:translateX(-50%);z-index:var(--z-toast);
  display:none;max-width:90vw;padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-control);background:var(--ink-1);color:var(--ink-inverse);
  font-size:var(--text-body);box-shadow:var(--shadow-overlay)}
#toast.show{display:flex;align-items:center;gap:var(--space-3)}
.toast-action{min-height:var(--control-sm);padding:var(--space-1) var(--space-3);
  border:0;border-radius:var(--radius-control);background:var(--surface-1);color:var(--accent-ink);
  font-size:var(--text-body);white-space:nowrap}

.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-art{display:flex;flex-direction:column;justify-content:center;align-items:center;
  position:relative;overflow:hidden;padding:var(--space-10) var(--space-8);
  background:var(--accent);color:var(--ink-inverse)}
.login-art:before{content:none}
.login-art .brand{margin:0 0 var(--space-8)}
.login-art .brand-logo{width:240px}
.login-art .partners-title{margin:0;color:var(--nav-ink-quiet);
  font-size:var(--text-body-lg);font-weight:var(--weight-medium);letter-spacing:normal;
  line-height:var(--leading-normal);text-align:center}
.login-art h1{margin:var(--space-8) 0 var(--space-5);color:var(--ink-inverse);font-size:var(--text-page)}
.login-art p{color:var(--nav-ink-quiet);font-size:var(--text-body-lg)}
.login-art small{margin-top:var(--space-10);color:var(--nav-ink-quiet);font-size:var(--text-label)}
.login-form{display:flex;justify-content:center;align-items:center;padding:var(--space-8)}
.login-box{width:380px}
.login-box h2{margin-bottom:var(--space-6);font-size:var(--text-section)}
/* D-11-B2: the demo line sits under the title with the title's own gap below it, not against the 이메일 label */
.login-box [data-demo-login]{margin:calc(var(--space-6) * -1 + var(--space-2)) 0 var(--space-5)}
.login-box .subtitle{margin-bottom:var(--space-8)}
.login-box button.primary{width:100%;margin-top:var(--space-2);min-height:var(--control-lg)}
.login-box .cb-banner{margin-bottom:var(--space-4)}
.demo-buttons{display:flex;gap:var(--space-2);margin:var(--space-4) 0}
.demo-buttons button{flex:1;font-size:var(--text-label)}
.credentials{padding:var(--space-3);border-radius:var(--radius-control);background:var(--surface-3);
  color:var(--ink-2);font-size:var(--text-label);line-height:var(--leading-normal)}
.auth-switch{display:block;margin:var(--space-6) auto 0!important;text-align:center!important;
  font-size:var(--text-body)}


/* ── 14 ── Responsive — re-prioritise, do not merely shrink ──────────────── */
/* The phone tab bar exists only below 750px (it is switched on inside that query). */
.mobile-tabs{display:none}

@media(min-width:1600px){
  .content{padding-top:var(--space-10)}
  .day{min-height:155px}
}

@media(max-width:1150px){
  .shell{grid-template-columns:200px minmax(0,1fr)}
  .sidebar{width:200px;padding:var(--space-5) var(--space-3)}
  .content{padding:var(--space-6)}
  .topbar{padding:0 var(--space-6)}
  .grid2,.detail-grid{grid-template-columns:minmax(0,1fr)}
  .agency-list{grid-template-columns:1fr 1fr}
  .hospital-data-column{grid-row:1}
}

@media(max-width:1050px){
  /* Two per row: the vertical hairline only belongs between the two in a row. */
  .hospital-priorities{grid-template-columns:repeat(2,minmax(0,1fr))}
  .priority-tile:nth-child(odd){box-shadow:none}
}

@media(max-width:750px){
  /* Shell becomes a stacked page with a bottom tab bar. */
  .shell{display:block}
  .sidebar{position:relative;width:100%;padding:var(--space-2) var(--space-4);overflow-y:visible}
  .brand{margin-bottom:0}
  .sidebar .brand-logo{width:auto;height:calc(var(--control-lg) + var(--space-3))}
  .login-art .brand-logo{width:136px}
  .sidebar-footer{display:none}
  .nav{display:none}
  body.menu-open .nav{display:grid;gap:var(--space-1);margin-top:var(--space-2);max-height:60vh;overflow:auto}
  body.menu-open .nav button{min-height:var(--control-lg);padding:var(--space-3)}
  .nav .cb-count{margin-left:var(--space-1)}
  body{padding-bottom:max(72px,calc(var(--cb-bottom-bar,0px) + var(--space-4)))}

  .topbar{min-height:auto;flex-wrap:wrap;gap:var(--space-1) var(--space-3);padding:var(--space-2) var(--space-4)}
  /* W4-1B: one chrome row on a phone - the date wraps in its own column beside 마지막 갱신·새로고침 (a narrow screen
     moves 새로고침 under it). The signed-in name and 로그아웃 are in 더보기, which also has 계정 관리 (where the name led). */
  .topbar .date{flex:1 1 9em;min-width:0}
  .topbar .date>span{display:inline-block}   /* '병원 시간(KST)' moves under the date whole */
  .topbar .identity{display:none}
  body.menu-open .sidebar-footer{display:block;margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--nav-line)}
  body.menu-open .sidebar-footer .portal,body.menu-open .sidebar-footer>p{display:none}
  .sidebar-me{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-1) var(--space-3)}
  .sidebar-me-name{display:inline;font-size:var(--text-body);font-weight:var(--weight-bold);color:var(--ink-inverse)}
  .sidebar-me [data-logout]{display:inline-flex;align-items:center;min-height:var(--control-lg)}   /* a 44px touch row */
  .identity .avatar{display:none}
  .content{padding:var(--space-5) var(--space-4)}
  .page-heading{align-items:flex-start;flex-wrap:wrap}
  h1{font-size:var(--text-section)}
  .page-heading .subtitle{font-size:var(--text-label)}
  .demo-strip{margin-bottom:var(--space-3);padding:var(--space-1) var(--space-3)}

  /* The board leads with the work, not with the page title. */
  .board-page .page-heading{margin-bottom:var(--space-3);padding-bottom:var(--space-3)}
  .board-page .page-heading .eyebrow,.board-page .page-heading .subtitle{display:none}
  .board-page h1{margin-bottom:0;font-size:var(--text-title)}
  .inbox-section{margin-bottom:var(--space-4)}
  .inbox-group-list{max-height:none;padding:0}
  .cb-inbox-item>button.inbox-main{grid-row:auto;grid-column:1;width:100%;margin-top:var(--space-1)}

  /* 44px touch targets everywhere text is not the control. */
  button,.filter-chip,.priority-tile,.patient-data-item,.stay-band,.event{min-height:var(--control-lg)}
  button.small,.lane-jumps button{min-height:var(--control-lg)}
  button.link,.cb-assignee,.cb-inbox-title button,.money-chip,.inbox-chip,.card-memos{min-height:0}
  .cal-nav button.icon-only{width:var(--control-lg);min-width:var(--control-lg);height:var(--control-lg)}

  .grid-equal{grid-template-columns:minmax(0,1fr)}
  .pipeline{gap:var(--space-1)}
  .pipeline button{padding:var(--space-3) var(--space-1)}
  .panel{padding:var(--space-4)}
  .agency-list{grid-template-columns:1fr}
  .agency-card{padding:var(--space-4)}   /* W5-1B: a phone panel is 16 */
  .detail-title{flex-wrap:wrap}
  .detail-meta{flex-wrap:wrap;gap:var(--space-2)}
  .card-head h3 .name-meta{gap:var(--space-1)}
  .lookalike-row{flex-wrap:wrap}
  .agency-contact{gap:var(--space-1) var(--space-2)}

  .tabs{padding:var(--space-1) var(--space-1) 0}
  .tabs button{padding:var(--space-2) var(--space-3);font-size:var(--text-body)}
  .tab-panel{padding:var(--space-3) var(--space-2)}   /* W5-1B: 12 / 8 as the agency's (its 16 is left for wave 6 there too) */
  .doc-bulk #doc-zip{margin-left:0;width:100%}

  .review-layout{grid-template-columns:1fr}
  .review-evidence{padding:0 0 var(--space-3);border-right:0;border-bottom:1px solid var(--line-1)}
  dialog{padding:var(--space-5)}
  .pay-amount{font-size:var(--text-section)}

  .hours-day-head{align-items:flex-start}
  .hours-mode{width:100%}
  .hours-mode button{flex:1 1 auto}
  .hours-range label,.hours-block label,.hours-block label:first-child,.hours-block label:nth-child(4){flex:1 1 130px}
  .hours-dash{display:none}

  .memo-thread{padding:var(--space-4)}
  .memo-meta time{margin-left:0;flex-basis:100%}
  .memo-replies{margin-left:0;padding-left:var(--space-2)}
  .memo-reply{padding:var(--space-3)}

  .login{grid-template-columns:1fr}
  .login-art{padding:var(--space-6)}
  .login-art .brand{margin-bottom:var(--space-4)}
  .login-art .brand-logo{width:138px}
  .login-art .partners-title{font-size:var(--text-label)}
  .login-art h1{margin:var(--space-5) 0 var(--space-2);font-size:var(--text-section)}
  .login-art p,.login-art small{display:none}
  .login-box{width:100%;max-width:380px}
  .login-form{padding:var(--space-6) var(--space-5) var(--space-8)}

  /* Bottom tab bar (H-18): the nine-item menu hides behind 더보기. */
  .mobile-tabs{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dropdown);
    display:grid;grid-template-columns:repeat(5,1fr);gap:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:var(--surface-1);border-top:1px solid var(--line-1);box-shadow:var(--shadow-overlay)}
  .mobile-tabs button{display:grid;justify-items:center;gap:3px;min-height:56px;padding:var(--space-2) var(--space-1);
    border:0;border-radius:0;background:transparent;color:var(--ink-3);
    font-size:var(--text-caption);font-weight:var(--weight-medium)}
  .mobile-tabs button.active{color:var(--accent-ink);box-shadow:inset 0 3px 0 var(--accent)}
  .mobile-tab-icon{font-size:var(--icon-sm);line-height:1}

  .stats,.hospital-priorities{grid-template-columns:1fr 1fr}
  .stat:nth-child(odd),.priority-tile:nth-child(odd){box-shadow:none}
}

@media(max-width:600px){
  .hospital-priorities{margin-bottom:var(--space-4)}
  .priority-tile{padding:var(--space-3) var(--space-2)}
  .priority-tile>span{font-size:var(--text-label)}
  .priority-tile strong{font-size:var(--text-title)}
  .hospital-next{padding:var(--space-3)}
  .hospital-next strong{flex-basis:100%}
  .patient-data-list{grid-template-columns:1fr}
  .patient-data-item{min-height:0}
  .memo-heading .row{width:100%}
}

/* TL-01 (B 2026-09-29): a touch screen wider than a phone (844x390 landscape, 768 tablet) gets the 750px block's
   44px targets too - that block is width-only, so there every plain button, filter chip and tile stayed 40px.
   Same lines, same place in the cascade (before the phone-and-touch block, whose .cb-assignee 44px must win). */
@media(min-width:751px) and (pointer:coarse){
  button,.filter-chip,.priority-tile,.patient-data-item,.stay-band,.event{min-height:var(--control-lg)}
  button.small,.lane-jumps button{min-height:var(--control-lg)}
  button.link,.cb-assignee,.cb-inbox-title button,.money-chip,.inbox-chip,.card-memos{min-height:0}
  .cal-nav button.icon-only{width:var(--control-lg);min-width:var(--control-lg);height:var(--control-lg)}
}

/* Phone and touch: the agency portal's rule, which this portal lacked (release-3 mobile QA 2026-09-26).
   The 750px block above says `button{44px}`, but selectors that name a place (a card's open button, the
   toolbar, a row's button pair in board.css) are more specific and put 40px back; they are raised here. */
@media(max-width:750px),(pointer:coarse){
  /* the to-do group heads are 40px buttons (base rule): 44px on phones and touch screens too (844x390 landscape) */
  .inbox-group-head{min-height:var(--control-lg)}
  /* The 44px tap overlay of a to-do row's or a card's 40px action buttons (W5-4B; they were 25px pills, the overlay
     reached 9.5px past them and needed 20 between lines) reaches 2px past: 8 between wrapped lines; the button that
     follows keeps its 12 (to-do row: '환불 완료 기록', board card: '진료 진행 관리 →'). */
  .cb-inbox-extra,.money-chips{row-gap:var(--space-2)}
  .cb-inbox-extra+button.inbox-main,.money-chips+button,.hospital-card>.money-chips+button[data-hospital-open]{margin-top:var(--space-3)}
  /* 16px is the smallest size iOS will not zoom into on focus; it is --text-title on the scale. */
  input,select,textarea{font-size:var(--text-title)}
  input:not([type=checkbox]):not([type=radio]),select{min-height:var(--control-lg)}
  button.small,.toolbar>button:not(.link),.toolbar>input,.toolbar>select,
  .hospital-card>button[data-hospital-open],.doc-side button.small,.agency-memo button.small,
  .row:has(>button+button)>button,.row:has(>button+a.button)>button,.row:has(>button+a.button)>a.button{min-height:var(--control-lg)}
  .choice-group label.check-row{min-height:var(--control-lg);align-items:center;margin-bottom:0}
  .choice-group .check-row input{margin-top:0}
  /* Text-sized controls keep their look; an invisible overlay carries the tap (shared/board.css pattern). */
  button.link:not(.back),.inbox-chip,.money-chip{position:relative}
  button.link:not(.back)::after,.inbox-chip::after,.money-chip::after{content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:max(100%,var(--control-lg));height:var(--control-lg)}
  /* D-09-B (C 2026-09-29, portrait phone): what looks tappable is at least 36px (--control-md), not only its hit.
     The account name and '전체 자료 →' become quiet outlined buttons, the chips 40px pills; the patient name in a
     to-do row is 44px tall, so its line is its own target (the badges beside it keep theirs, 8px+ apart). */
  #my-account.link,#patient-data-all.link{display:inline-flex;align-items:center;min-height:var(--control-md);
    padding:0 var(--space-3);border:1px solid var(--line-2);border-radius:var(--radius-control)}
  .inbox-chip,.money-chip{display:inline-flex;align-items:center;min-height:var(--control-md);padding:0 var(--space-3)}
  .cb-inbox-title .inbox-patient{display:inline-flex;align-items:center;min-height:var(--control-lg)}
  /* The outlined account button is wider: the identity pair wraps as whole buttons (320 with text 200% split
     '로그아웃' and '연세새봄의원' mid-word when they shared one squeezed line). */
  .identity{flex-wrap:wrap;justify-content:flex-end;row-gap:var(--space-2);margin-left:auto}
  .identity>button{flex:none}
  .detail-meta a,.doc-content a{display:inline-block;min-height:var(--control-lg);padding:var(--space-3) 0}
  /* The assignee pill cuts long names with overflow:hidden, which also cuts its own ::after tap overlay
     (hit-test 2026-09-26), so on touch the pill itself is 44px tall — as the agency portal already does. */
  .cb-assignee,.cb-inbox-title .cb-assignee{height:auto;min-height:var(--control-lg);line-height:calc(var(--control-lg) - 2px)}
  .fu-notes summary{padding-block:var(--space-3)}
  .doc-bulk label.check-row{min-height:var(--control-lg)}
  /* The per-file box is not inside a label, so the box itself grows to the 24px minimum target. */
  .doc-pick input,.doc-bulk .check-row input{width:24px;height:24px}
  /* Pre-existing phone layout (found in H5-R QA 2026-09-27): the name column is flex:1 with a 0 basis, so the
     badges and buttons stayed on its line and squeezed it to one character. The side moves under the name. */
  .doc-row .doc-content{flex:1 1 calc(100% - 96px)}
  .doc-side{flex-basis:100%;justify-content:flex-start}
  /* A panel title's action button keeps its label on one line instead of shrinking beside long help text. */
  .panel-title{flex-wrap:wrap}
  .panel-title>button{flex:0 0 auto}
}


/* ───────────── H4-5 재진 (follow-up) tab */
.fu-visit,.fu-inquiry{padding:var(--space-4) 0;border-top:1px solid var(--line-1)}
.fu-visit:first-of-type,.fu-inquiry:first-of-type{border-top:0;padding-top:0}
.fu-visit>.row,.fu-inquiry>.row{margin-bottom:var(--space-2)}
.fu-guidance{margin:var(--space-3) 0;padding:var(--space-3) var(--space-4);border:1px solid var(--line-2);border-radius:var(--radius-control);background:var(--surface-2)}
.fu-guidance .note{margin:var(--space-2) 0}
.fu-guidance small,.fu-visit>small{display:block;color:var(--ink-3);font-size:var(--text-caption)}
.fu-notes{margin-top:var(--space-3)}
.fu-notes summary{cursor:pointer;font-size:var(--text-label);font-weight:var(--weight-medium);color:var(--ink-2)}
.fu-participants{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin:var(--space-2) 0 0;font-size:var(--text-label)}
.fu-participants .meeting-key{color:var(--ink-3);margin-right:var(--space-1)}
.fu-participant-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,1fr) auto;gap:var(--space-2);align-items:center;margin-bottom:var(--space-2)}
@media(max-width:640px){.fu-participant-row{grid-template-columns:1fr 1fr}}
.fu-translated{color:var(--ink-2)}

/* ───────────── H5-R 판독지 (reading reports) in the 고객 자료 tab */
.reading-row{padding:var(--space-3) 0;border-top:1px solid var(--line-1)}
.reading-row:first-child{border-top:0}
.reading-head{display:flex;gap:var(--space-3);align-items:flex-start}
.reading-head small{display:block;color:var(--ink-3);font-size:var(--text-caption);margin-top:var(--space-1)}
.reading-memo{margin:var(--space-2) 0;padding:var(--space-2) var(--space-3);border:1px solid var(--line-2);border-radius:var(--radius-control);background:var(--surface-2)}
.reading-memo .note{margin:var(--space-1) 0 0}
.reading-memo-label{display:block;font-size:var(--text-label);font-weight:var(--weight-medium);color:var(--ink-2)}
.reading-history{margin-top:var(--space-2)}
.reading-history summary{cursor:pointer;font-size:var(--text-label);color:var(--ink-2)}
.reading-history ul{margin:var(--space-2) 0 0;padding-left:var(--space-4)}
.reading-history .reading-row{padding-left:var(--space-3)}
.reading-actions{margin-top:var(--space-2)}
.reading-basis{max-height:240px;overflow-y:auto}
@media(max-width:750px),(pointer:coarse){.reading-history summary{padding-block:var(--space-3);min-height:var(--control-lg)}}

/* NAV-B: the patient page header is the shared .cb-detail-nav (A §26, board.css). Hospital only adjusts it to its own
   page padding — on a phone the page starts 20px down (not 16px), and at 751–760px the hospital still has its sidebar
   and 24px padding, so the header sits inside it as it does from 761px. board.css loads last, hence '.main'. */
@media (max-width:750px){.main .cb-detail-nav{margin:calc(-1 * var(--space-5)) calc(-1 * var(--space-4)) var(--space-3)}}
@media (min-width:751px) and (max-width:760px){.main .cb-detail-nav{margin:0 0 var(--space-3)}}
/* the document selection bar sticks under that header, not behind it (--cb-detail-nav: its measured height) */
@media (max-width:1023px){.doc-bulk{top:var(--cb-detail-nav,0px)}}
/* D-01: in a dashboard row a status badge wraps at words inside the row (with text x2 '치료 시작 대기 · Lab. test 필요'
   is wider than a 324px phone row); a badge elsewhere keeps its one line. Same as board.css .panel-title>.badge. */
.cb-pr-state .badge{min-width:0;max-width:100%;white-space:normal;overflow-wrap:break-word}
/* D-01b: archive rows - the reason, the meta line and the restore-request mark are shared (board.css, A f739027);
   the hospital's restore-request flag under the name keeps its own width here. */
.archive-rows .restore-flag{min-width:0;max-width:100%}
/* D-01b-F1 (C): who and when, then the reason, each on its own line (they ran together as '…09:32가상 요청'); one
   request time is one unit like CB.dual (no break between the date and the time). */
.restore-flag>small{display:block}
/* D-01c (C 2026-09-28): refund and change-penalty tables (정산 and the patient page's money panel) stay tables when
   their panel is wide enough (the 5-column table needs about 600px, 43em at 14px); in a narrower panel - a phone, a
   tablet, or the patient page's side column on a desktop - each record stacks, every value under its own label.
   Judged by the panel (container), not the screen. Words wrap; nothing is cut. */
.money-wrap{container-type:inline-size}
@container (max-width:44em){
  .money-wrap .money-table,.money-wrap .money-table tbody,.money-wrap .money-table tr,.money-wrap .money-table td{display:block}
  .money-wrap .money-table thead{display:none}
  .money-wrap .money-table tr{padding:var(--space-3) 0;border-top:1px solid var(--line-1)}
  .money-wrap .money-table tr:first-child{border-top:0}
  .money-wrap .money-table td{min-width:0;padding:var(--space-1) 0;border:0}
  .money-wrap .money-table td::before{content:attr(data-label);display:block;margin-bottom:2px;
    font-size:var(--text-label);font-weight:var(--weight-medium);color:var(--ink-3)}
}