:root {
  --bg:#fbf8f5; --panel:#fffdfb; --panel-soft:#fff8f7; --line:#eadfd9;
  --line-soft:#f2e9e4; --text:#302826; --muted:#8f817a; --brown:#4a3d38;
  --pink:#e65383; --pink-strong:#df3f73; --pink-soft:#fff0f4;
  --orange:#e28a45; --orange-soft:#fff5e9; --green:#3d9b6f;
  --green-soft:#edf8f2; --blue:#4b87c8; --blue-soft:#eef6ff;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px;
  --page-standard:1180px; --page-dashboard:1320px; --page-tool:1440px;
  --surface-base:var(--bg); --surface-work:#fff; --surface-inset:#fdfaf8;
  --surface-status:var(--pink-soft); --surface-overlay:#fff;
  --shadow:0 10px 28px rgba(88,61,49,.045); --shadow-overlay:0 24px 70px rgba(60,42,35,.18);
  --radius-lg:16px; --radius-md:12px; --sidebar:228px; --topbar:78px;
}
/* The initial HTML gate remains closed through identity, workspace and credit bootstrap. */
html.auth-pending body > :not(.app-bootstrap),
html.auth-pending body > :not(.app-bootstrap) * { visibility:hidden !important; pointer-events:none !important; }
.auth-pending.auth-resuming body > :not(.app-bootstrap),
.auth-pending.auth-resuming body > :not(.app-bootstrap) * { visibility:visible !important; }
.auth-pending.auth-resuming body > :not(.app-bootstrap) { pointer-events:none !important; opacity:.72; }
.auth-pending.auth-resuming .app-bootstrap { display:none !important; }
.app-bootstrap { display:none; }
html.auth-pending .app-bootstrap {
  display:block; position:fixed; inset:0; padding:32px; background:var(--bg); z-index:1000;
}
.app-bootstrap-brand { color:var(--brown); font-size:22px; font-weight:800; }
.app-bootstrap-status { margin:56px auto; max-width:640px; color:var(--muted); }
.app-bootstrap-line { height:14px; margin:20px 0; border-radius:7px; background:var(--line-soft); }
.app-bootstrap-line + .app-bootstrap-line { width:65%; }
html.auth-pending noscript { visibility:visible !important; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body {
  margin:0; min-width:320px; color:var(--text);
  background:radial-gradient(circle at 78% 18%,rgba(230,83,131,.035),transparent 24%),var(--bg);
  font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { color:inherit; }
.hidden { display:none !important; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); }
.sidebar {
  position:sticky; top:0; height:100vh; padding:22px 16px 18px;
  border-right:1px solid var(--line); background:rgba(255,253,251,.9);
  backdrop-filter:blur(10px); z-index:30;
}
.brand { display:flex; min-height:58px; align-items:center; margin-bottom:24px; padding:0 8px; }
.brand img { width:min(164px,100%); max-height:54px; object-fit:contain; object-position:left center; }
.main-nav { display:grid; gap:6px; }
.nav-item {
  min-height:46px; display:flex; align-items:center; gap:12px; padding:0 12px;
  border-radius:10px; color:#5d514c; font-size:14px; font-weight:700;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.nav-item:hover,.nav-item.active { color:var(--pink); background:var(--pink-soft); }
.nav-item:active { transform:translateY(1px); }
.nav-icon {
  position:relative; flex:0 0 24px; width:24px; height:24px; display:inline-block;
  background-color:#2f2f33; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  -webkit-mask-size:contain; mask-repeat:no-repeat; mask-position:center; mask-size:contain;
}
.icon-home { -webkit-mask-image:url("/assets/icons/menu/home.svg"); mask-image:url("/assets/icons/menu/home.svg"); }
.icon-analysis-history { -webkit-mask-image:url("/assets/icons/menu/analysis-history.svg"); mask-image:url("/assets/icons/menu/analysis-history.svg"); }
.icon-case-share { -webkit-mask-image:url("/assets/icons/menu/case-share.svg"); mask-image:url("/assets/icons/menu/case-share.svg"); }
.icon-clinic-management { -webkit-mask-image:url("/assets/icons/menu/clinic-management.svg"); mask-image:url("/assets/icons/menu/clinic-management.svg"); }
.icon-account { -webkit-mask-image:url("/assets/icons/menu/user.svg"); mask-image:url("/assets/icons/menu/user.svg"); }
.nav-icon img { position:absolute; inset:0; width:24px; height:24px; transition:opacity .16s ease; }
.nav-item:hover .nav-icon,.nav-item.active .nav-icon { background-color:var(--pink); }
.sidebar-support {
  position:absolute; left:16px; right:16px; bottom:18px; padding:14px;
  border:1px solid var(--line-soft); border-radius:var(--radius-md); background:var(--surface-inset);
}
.sidebar-support strong { display:block; font-size:13px; line-height:1.4; }
.sidebar-support p { margin:6px 0 10px; color:var(--muted); font-size:12px; line-height:1.5; }
.sidebar-support a { display:inline-flex; align-items:center; gap:5px; color:var(--pink); font-size:12px; font-weight:800; }
.main-area { min-width:0; container:app-main / inline-size; }
.topbar {
  height:var(--topbar); position:sticky; top:0; z-index:20; display:flex; align-items:center;
  gap:12px; padding:0 24px; border-bottom:1px solid var(--line);
  background:rgba(255,253,251,.92); backdrop-filter:blur(12px);
}
.mobile-menu-button { display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:11px; background:#fff; cursor:pointer; }
.mobile-menu-button span { display:block; width:18px; height:2px; margin:4px auto; border-radius:999px; background:var(--brown); }
.workspace-wrap { position:relative; }
.workspace-button,.profile-button,.analysis-count { border:1px solid var(--line); background:#fff; box-shadow:0 3px 12px rgba(88,61,49,.025); }
.workspace-button:hover,.profile-button:hover,.analysis-count:hover { border-color:#eac8d3; background:#fff9fa; }
.workspace-button:focus-visible,.profile-button:focus-visible,.analysis-count:focus-visible { outline:2px solid var(--pink); outline-offset:3px; }
.workspace-button { min-width:200px; height:48px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 17px; border-radius:12px; font-size:13px; font-weight:800; cursor:pointer; }
.workspace-menu,.profile-menu { position:absolute; top:calc(100% + 9px); min-width:220px; padding:7px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); z-index:80; }
.workspace-menu button,.profile-menu a,.profile-menu button { width:100%; min-height:42px; display:flex; align-items:center; padding:0 11px; border:0; border-radius:8px; background:transparent; text-align:left; color:var(--brown); cursor:pointer; }
.workspace-menu button:hover,.profile-menu a:hover,.profile-menu button:hover { background:var(--pink-soft); color:var(--pink); }
.topbar-actions {
  position:relative; margin-left:auto; display:flex; align-items:center; gap:6px; padding:4px;
  border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.72);
  box-shadow:0 4px 16px rgba(88,61,49,.035);
}
.topbar-actions > .workspace-wrap { height:44px; }
.topbar-actions > .workspace-wrap .workspace-button,
.topbar-actions > .analysis-count,
.topbar-actions > .profile-button {
  height:44px; border-color:transparent; background:transparent; box-shadow:none;
  transition:background .16s ease,color .16s ease;
}
.topbar-actions > .workspace-wrap .workspace-button:hover,
.topbar-actions > .analysis-count:hover,
.topbar-actions > .profile-button:hover { border-color:transparent; background:var(--pink-soft); }
.analysis-count { height:48px; display:flex; align-items:center; gap:11px; padding:0 16px; border-radius:12px; font-size:13px; cursor:pointer; }
.analysis-count strong { color:var(--pink); }
.credit-dot { width:17px; height:17px; position:relative; border-radius:50%; background:var(--pink); box-shadow:0 -4px 0 -2px #fff,0 4px 0 -2px #fff; }
.profile-button { min-width:160px; height:48px; display:flex; align-items:center; gap:10px; padding:0 11px; border-radius:12px; cursor:pointer; }
.profile-avatar { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#f5e8e1,#fff); color:var(--brown); font-size:14px; font-weight:900; }
.profile-copy { display:grid; flex:1; gap:2px; text-align:left; }
.profile-copy strong { font-size:13px; }
.profile-copy small { color:var(--pink); font-size:10px; font-weight:900; letter-spacing:.04em; }
.profile-menu { right:0; top:66px; min-width:170px; }
.chevron { color:var(--muted); font-size:17px; }
.content { width:min(var(--content-max,var(--page-standard)),calc(100% - 48px)); margin:24px auto 0; }
.eyebrow { margin:0 0 8px; color:var(--pink); font-size:10px; font-weight:900; letter-spacing:.13em; }
.primary-button,.secondary-button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; padding:0 23px; border-radius:11px; font-size:14px; font-weight:900; cursor:pointer; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; }
.primary-button { border:1px solid var(--pink); background:linear-gradient(135deg,#ec5b88,var(--pink-strong)); color:#fff; box-shadow:0 10px 20px rgba(223,63,115,.18); }
.primary-button:hover { transform:translateY(-1px); box-shadow:0 13px 24px rgba(223,63,115,.22); }
.secondary-button { border:1px solid var(--line); background:#fff; color:var(--brown); }
.secondary-button:hover { background:#fff9fa; border-color:#eac8d3; }
.section-header { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.section-header h2 { margin:0; color:var(--brown); font-size:18px; letter-spacing:-.02em; }
.section-header a,.text-button { border:0; background:transparent; color:var(--pink); font-size:13px; font-weight:900; cursor:pointer; }
.section-header a span,.text-button span { font-size:17px; vertical-align:-1px; }
.analysis-table-wrap { overflow-x:auto; border:1px solid var(--line-soft); border-radius:13px; }
.analysis-table { width:100%; min-width:660px; border-collapse:collapse; background:#fff; }
.analysis-table th,.analysis-table td { height:54px; padding:0 13px; border-bottom:1px solid var(--line-soft); font-size:13px; text-align:left; white-space:nowrap; }
.analysis-table th { height:45px; color:#7d7069; background:#fffcfa; font-size:12px; font-weight:800; }
.analysis-table tbody tr:last-child td { border-bottom:0; }
.analysis-table tbody tr:hover { background:#fffafb; }
.patient-name { font-weight:900; }
.status-badge { display:inline-flex; min-height:26px; align-items:center; padding:0 10px; border-radius:8px; font-size:11px; font-weight:900; }
.status-complete { color:var(--green); background:var(--green-soft); }
.status-review { color:var(--orange); background:var(--orange-soft); }
.status-processing { color:var(--blue); background:var(--blue-soft); }
.status-error { color:#c14a55; background:#fff0f1; }
.row-action { min-width:86px; min-height:31px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #f0a8bd; border-radius:8px; background:#fff; color:var(--pink); font-size:11px; font-weight:900; }
.row-action:hover { background:var(--pink-soft); }
.empty-state { padding:28px 20px; color:var(--muted); text-align:center; font-size:13px; line-height:1.6; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(45,34,30,.28); backdrop-filter:blur(3px); }
.modal { width:min(420px,100%); position:relative; padding:32px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(60,42,35,.18); }
.modal h2 { margin:0 0 12px; font-size:21px; }
.modal p:not(.eyebrow) { margin:0 0 22px; color:var(--muted); font-size:13px; line-height:1.65; }
.modal-close { position:absolute; top:12px; right:14px; width:32px; height:32px; border:0; background:transparent; color:var(--muted); font-size:24px; cursor:pointer; }
.modal-action { border:0; }
.credit-panel { width:min(440px,100%); }
.credit-panel-workspace { margin:0 0 5px !important; color:var(--pink) !important; font-size:12px !important; font-weight:900; }
.credit-panel h2 { margin-bottom:18px; }
.credit-panel-balance { display:grid; gap:6px; padding:18px; border:1px solid var(--line-soft); border-radius:13px; background:var(--panel-soft); }
.credit-panel-balance strong { font-size:20px; color:var(--brown); }
.credit-panel-balance span { color:var(--pink); font-size:14px; font-weight:800; }
.credit-panel-conversion { margin:9px 2px 18px !important; font-size:12px !important; }
.credit-alpha-note { padding:15px 16px; border-radius:13px; background:var(--pink-soft); }
.credit-alpha-note strong { display:block; margin-bottom:6px; color:var(--brown); font-size:13px; }
.credit-alpha-note p { margin:0 !important; font-size:12px !important; line-height:1.65 !important; }
.credit-panel-eligibility { margin:13px 2px !important; font-size:12px !important; }
.credit-action-slot { display:flex; }
.credit-alpha-button { width:100%; border:0; }
.credit-panel-status { min-height:20px; margin:11px 2px 0 !important; color:#b54c63 !important; font-size:12px !important; }
.toast { position:fixed; left:50%; bottom:28px; z-index:130; transform:translateX(-50%); padding:11px 17px; border-radius:999px; background:#3d332f; color:#fff; box-shadow:var(--shadow); font-size:12px; font-weight:800; }
@media (max-width:1180px) {
  .content { width:min(100% - 32px,var(--content-max,var(--page-standard))); }
}
@media (max-width:820px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; top:0; width:250px; transform:translateX(-104%); transition:transform .2s ease; box-shadow:18px 0 45px rgba(56,38,32,.12); }
  body.sidebar-open .sidebar { transform:translateX(0); }
  body.sidebar-open::after { content:""; position:fixed; inset:0; z-index:25; background:rgba(45,34,30,.22); }
  .mobile-menu-button { display:block; }
  :root { --topbar:68px; }
  .topbar { height:var(--topbar); padding:0 16px; }
  .workspace-button { min-width:0; width:160px; }
  .analysis-count span:not(.credit-dot),.profile-copy { display:none; }
  .analysis-count { padding:0 13px; }
  .profile-button { min-width:54px; width:54px; padding:0 8px; }
  .profile-button .chevron { display:none; }
  .content { width:min(100% - 24px,760px); min-width:0; margin-top:18px; }
}
@media (max-width:620px) {
  .workspace-button { width:130px; padding:0 12px; font-size:12px; }
  .topbar-actions { gap:5px; padding:3px; border-radius:14px; }
  .topbar-actions > .workspace-wrap { height:44px; }
  .topbar-actions > .analysis-count,.topbar-actions > .profile-button { height:44px; }
}
@media (max-height:680px) and (min-width:821px) { .sidebar-support { display:none; } }

/* Shared area switch stays beside credit and account controls. */
.topbar-actions { min-width:0; max-width:100%; }
.workspace-wrap { min-width:0; flex:0 1 280px; }
.workspace-button { min-width:0; width:100%; max-width:280px; gap:8px; }
#workspaceName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-kind { flex:none; font-size:10px; color:var(--pink); background:var(--pink-soft); padding:3px 6px; border-radius:5px; }
.workspace-button .chevron { margin-left:auto; }
.workspace-menu { right:0; width:340px; max-width:calc(100vw - 32px); max-height:60vh; overflow-y:auto; }
.workspace-group-label { padding:9px 11px 5px; font-size:11px; color:var(--muted); font-weight:800; }
.workspace-menu [role="group"] + [role="group"] { border-top:1px solid var(--line-soft); margin-top:6px; }
.workspace-menu button { gap:10px; padding:12px 11px; }
.workspace-menu button[aria-selected="true"] { background:var(--pink-soft); color:var(--pink); }
.workspace-option-copy { display:grid; gap:5px; min-width:0; overflow-wrap:anywhere; }
.workspace-option-copy strong { font-size:13px; }
.workspace-option-copy small { font-size:11px; color:#766861; line-height:1.5; }
.workspace-check { margin-left:auto; flex:none; }
.workspace-help { margin:7px 0 0; padding:12px; border-top:1px solid var(--line); font-size:12px; color:#766861; line-height:1.6; }
.workspace-button:focus-visible,.workspace-menu button:focus-visible { outline:2px solid var(--pink); outline-offset:3px; }
.workspace-context { font-size:13px; color:#766861; line-height:1.6; overflow-wrap:anywhere; }
.profile-copy { min-width:0; max-width:150px; }
.profile-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.analysis-count { flex:none; white-space:nowrap; }
.final-shell { min-height:calc(100vh - var(--topbar)); }
@media (max-width:1100px) {
  .profile-button { min-width:54px; }
  .profile-copy,.profile-button > .chevron { display:none; }
}
@media (max-width:820px) {
  .mobile-menu-button { flex:none; }
  .topbar-actions { flex:1; justify-content:flex-end; }
  .workspace-menu { position:fixed; right:16px; top:70px; }
  .analysis-count #analysisCount { display:inline; }
  .final-shell { min-height:calc(100vh - var(--topbar)); }
}
@media (max-width:480px) {
  .topbar { gap:6px; padding:0 8px; }
  .topbar-actions { gap:3px; padding:3px; }
  .workspace-button { padding:0 8px; font-size:12px; }
  .workspace-button,.analysis-count,.profile-button { height:44px; }
  .workspace-kind,.analysis-count .credit-dot { display:none; }
  .analysis-count { padding:0 8px; }
  .profile-button { width:42px; min-width:42px; padding:0 4px; }
  .profile-avatar { width:32px; height:32px; flex-basis:32px; }
  .workspace-menu { position:fixed; right:8px; top:70px; }
}
