/* ============================================================
   다복메드플러스 CRM — 공통 구조 스타일 (base)
   색·모서리·밀도는 전부 CSS 변수. 시안별 파일(t1/t2/t3)에서 덮어씁니다.
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-page);color:var(--text-body);
  font-family:var(--font-sans);font-size:var(--fs-14);line-height:1.55;
  /* 한글은 기본 줄바꿈 규칙상 글자 사이 아무 데서나 끊깁니다(다복메/디칼).
     띄어쓰기 기준으로만 끊고, 한 덩어리가 칸을 넘칠 때만 예외로 쪼갭니다. */
  word-break:keep-all;overflow-wrap:break-word;
}
a{color:inherit;text-decoration:none}
/* 가이드 06 — 모든 인터랙티브 요소에 :focus-visible (키보드 사용자) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--border-brand);outline-offset:1px;box-shadow:var(--sh-focus);border-radius:var(--r-sm)}
button{font-family:inherit}
img{max-width:100%}
.num,.mono{font-variant-numeric:tabular-nums}
.hide{display:none!important}
/* 바로 눈에 띄어야 할 건수 — 굵게 + 강조색 */
.em{font-weight:var(--fw-extra);color:var(--status-danger)}
.em-lg{font-weight:var(--fw-extra);color:var(--status-danger);font-size:1.15em;font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}

/* ---------------- GNB ---------------- */
.gnb{
  position:sticky;top:0;z-index:100;height:var(--h-gnb);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-16);padding:0 var(--sp-20);
  background:var(--gnb-bg);color:var(--gnb-fg);border-bottom:1px solid var(--gnb-border);
}
.gnb-l,.gnb-r{display:flex;align-items:center;gap:var(--sp-12)}
.brand{display:flex;align-items:center;gap:var(--sp-8);font-weight:var(--fw-black);
  font-size:var(--fs-16);letter-spacing:-.4px;color:var(--gnb-fg)}
.brand .logo{width:26px;height:26px;border-radius:var(--r-logo);background:var(--brand-grad);
  display:grid;place-items:center;color:#fff;font-size:12px;font-weight:900;flex:none}
.brand small{font-weight:var(--fw-regular);font-size:var(--fs-11);opacity:.62;letter-spacing:0}
.gnb-sep{width:1px;height:18px;background:var(--gnb-border)}
.gnb-nav{display:flex;gap:var(--sp-4)}
.gnb-nav a{padding:6px 10px;border-radius:var(--r-md);font-size:var(--fs-12);
  font-weight:var(--fw-bold);color:var(--gnb-fg);opacity:.68}
.gnb-nav a:hover{opacity:1;background:var(--gnb-hover)}
.gnb-nav a.on{opacity:1;background:var(--gnb-on-bg);color:var(--gnb-on-fg)}
.ic-btn{position:relative;width:32px;height:32px;border:0;background:transparent;color:var(--gnb-fg);
  border-radius:var(--r-md);cursor:pointer;font-size:15px;display:grid;place-items:center}
.ic-btn:hover{background:var(--gnb-hover)}
.ic-btn .dot{position:absolute;top:1px;right:0;min-width:15px;height:15px;padding:0 4px;
  border-radius:999px;background:var(--status-danger);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;font-style:normal}
.user{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-12);color:var(--gnb-fg)}
.user .u-txt{opacity:.8;text-align:left;line-height:1.25;white-space:nowrap}
.user .u-txt b{display:block;font-weight:var(--fw-bold);opacity:1}
.avatar{width:28px;height:28px;border-radius:var(--r-avatar);background:var(--brand-grad);
  color:#fff;display:grid;place-items:center;font-size:11px;font-weight:var(--fw-black);flex:none}

/* ---------------- Shell / Sidebar ---------------- */
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - var(--h-gnb))}
.side{
  width:var(--w-sidebar);flex:none;position:sticky;top:var(--h-gnb);
  height:calc(100vh - var(--h-gnb));overflow-y:auto;
  background:var(--side-bg);border-right:1px solid var(--side-border);
  padding:var(--side-pad);
}
.side-role{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-10) var(--sp-12);
  margin-bottom:var(--sp-12);border-radius:var(--r-lg);background:var(--side-role-bg);
  border:1px solid var(--side-role-border)}
.side-role .rdot{width:8px;height:8px;border-radius:999px;background:var(--role);flex:none}
.side-role .rname{font-size:var(--fs-12);font-weight:var(--fw-extra);color:var(--side-role-fg);
  white-space:nowrap;flex:none}
.side-role .rsub{font-size:var(--fs-11);color:var(--side-muted);margin-left:auto;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.side-grp{margin-bottom:var(--sp-16)}
.side-grp>h6{margin:0 0 var(--sp-6);padding:0 var(--sp-12);font-size:var(--fs-11);
  font-weight:var(--fw-extra);letter-spacing:.4px;color:var(--side-muted);text-transform:none}
/* 개인회원(B2B/B2C) 사이드바: 메뉴 그룹 사이 여백을 더 넓게 */
.role-b2b .side-grp,.role-b2c .side-grp{margin-bottom:var(--sp-32)}
.role-b2b .side-grp>h6,.role-b2c .side-grp>h6{margin-bottom:var(--sp-8)}
.side a{display:flex;align-items:center;gap:var(--sp-8);height:var(--h-menu);
  padding:0 var(--sp-12);border-radius:var(--r-md);font-size:var(--fs-13);
  color:var(--side-fg);font-weight:var(--fw-regular);white-space:nowrap}
.side a>span:not(.mi):not(.cnt){overflow:hidden;text-overflow:ellipsis}
.side a .mi{width:16px;text-align:center;font-size:13px;opacity:.85;flex:none}
.side a:hover{background:var(--side-hover)}
.side a.on{background:var(--side-on-bg);color:var(--side-on-fg);font-weight:var(--fw-bold);
  box-shadow:var(--side-on-shadow)}
.side a .cnt{margin-left:auto;font-size:var(--fs-11);font-weight:var(--fw-bold);
  color:var(--side-muted);font-variant-numeric:tabular-nums}
.side a.on .cnt{color:var(--side-on-fg)}
.side a .cnt.hot{background:var(--status-danger);color:#fff;border-radius:999px;padding:1px 6px}
.side-foot{margin-top:var(--sp-20);padding:var(--sp-12);border-radius:var(--r-lg);
  background:var(--side-foot-bg);font-size:var(--fs-11);color:var(--side-muted);line-height:1.5}
.side-foot b{display:block;color:var(--side-fg);font-size:var(--fs-12);margin-bottom:2px}

/* ---------------- Main ---------------- */
.main{flex:1;min-width:0;padding:var(--main-pad);max-width:var(--main-max)}
.crumb{display:flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--text-muted);
  margin-bottom:var(--sp-8)}
.crumb i{font-style:normal;opacity:.5}
.pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-16);
  margin-bottom:var(--sp-20);flex-wrap:wrap}
.pg-head h1{margin:0;font-size:var(--fs-20);font-weight:var(--fw-extra);color:var(--text-heading);
  letter-spacing:-.4px;display:flex;align-items:center;gap:var(--sp-8)}
.pg-head .pg-sub{margin:var(--sp-4) 0 0;font-size:var(--fs-13);color:var(--text-muted)}
.pg-actions{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
.sec-gap{height:var(--sp-24)}

/* ---------------- Grid ---------------- */
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.g-3-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
/* 3-2(60:40) 와 2-1(67:33) 사이 — 목록 칸이 넓어야 하는 표에 씁니다 */
.g-7-4{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.span2{grid-column:span 2}
.stack{display:flex;flex-direction:column;gap:var(--gap)}

/* ---------------- Card ---------------- */
.card{background:var(--bg-surface);border:1px solid var(--card-border);border-radius:var(--r-card);
  box-shadow:var(--card-shadow);overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);
  padding:var(--card-hpad);border-bottom:1px solid var(--card-border)}
.card-h.plain{border-bottom:0;padding-bottom:0}
.card-t{margin:0;font-size:var(--fs-16);font-weight:var(--fw-extra);color:var(--text-heading);
  letter-spacing:-.3px;display:flex;align-items:center;gap:var(--sp-8)}
.card-t small{font-weight:var(--fw-regular);font-size:var(--fs-12);color:var(--text-muted);letter-spacing:0}
/* 좁은 열에 들어가는 카드 — 제목이 두 줄로 쪼개지지 않게 */
.card.nw-t .card-t{white-space:nowrap}
.card.nw-t .card-t small{line-height:1.35}
.card-x{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-12);color:var(--text-muted)}
.card-b{padding:var(--card-pad)}
.card-b.flush{padding:0}
/* flush 카드(표가 카드 끝까지 붙는 형태) 안에서 표 위에 오는 요약 줄 —
   카드 본문과 같은 좌우 여백을 주고 위아래로 숨통을 틔웁니다. */
.card-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:var(--sp-8);padding:var(--card-pad);border-bottom:1px solid var(--card-border)}
.card-meta>.flex{gap:5px;flex-wrap:wrap;min-width:0}
.card-f{padding:var(--sp-10) var(--card-pad);border-top:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);
  font-size:var(--fs-12);color:var(--text-muted);background:var(--card-foot-bg)}
.card.accent{border-left:3px solid var(--role)}

/* ---------------- Stat ---------------- */
.stat{background:var(--bg-surface);border:1px solid var(--card-border);border-radius:var(--r-card);
  padding:var(--stat-pad);box-shadow:var(--card-shadow);position:relative;overflow:hidden}
.stat .s-l{display:flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--text-muted);
  font-weight:var(--fw-bold)}
.stat .s-v{margin-top:var(--sp-6);font-size:var(--fs-30);line-height:1.15;font-weight:var(--fw-black);
  color:var(--text-heading);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.stat .s-v small{font-size:var(--fs-14);font-weight:var(--fw-bold);color:var(--text-muted);
  margin-left:3px;letter-spacing:0}
.stat .s-d{margin-top:var(--sp-6);font-size:var(--fs-12);color:var(--text-muted);
  display:flex;align-items:center;gap:5px}
.stat .s-d b{font-weight:var(--fw-bold)}
.s-d.up b{color:var(--status-success-fg)}
.s-d.down b{color:var(--status-danger)}
.s-d.flat b{color:var(--text-muted)}
.stat .s-ic{position:absolute;top:var(--sp-16);right:var(--sp-16);width:32px;height:32px;
  border-radius:var(--r-md);display:grid;place-items:center;font-size:15px;
  background:var(--soft);color:var(--role-text)}
.stat.hl{background:var(--stat-hl-bg);border-color:var(--stat-hl-border)}

/* ---------------- Badge ---------------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;
  border-radius:var(--r-badge);font-size:var(--fs-11);font-weight:var(--fw-bold);
  background:var(--bd-bg,var(--bg-subtle));color:var(--bd-fg,var(--text-muted));
  border:1px solid var(--bd-border,transparent);
  white-space:nowrap;line-height:1;letter-spacing:-.2px}
.badge .bd{width:5px;height:5px;border-radius:999px;background:var(--bd-dot,var(--c-neutral));flex:none}
.badge.lg{height:24px;padding:0 10px;font-size:var(--fs-12)}
.badge.b2b{--bd-bg:var(--role-b2b-soft);--bd-fg:var(--role-b2b-text);--bd-dot:var(--role-b2b)}
.badge.b2c{--bd-bg:var(--role-b2c-soft);--bd-fg:var(--role-b2c-text);--bd-dot:var(--role-b2c)}
.badge.corp{--bd-bg:var(--role-corp-soft);--bd-fg:var(--role-corp-text);--bd-dot:var(--role-corp)}
.badge.hosp{--bd-bg:var(--role-hospital-soft);--bd-fg:var(--role-hospital-text);--bd-dot:var(--role-hospital)}
.badge.adm{--bd-bg:var(--role-admin-soft);--bd-fg:var(--role-admin-text);--bd-dot:var(--role-admin)}
.badge.info{--bd-bg:var(--status-info-bg);--bd-fg:var(--status-info-fg);--bd-dot:var(--status-info)}
.badge.ok{--bd-bg:var(--status-success-bg);--bd-fg:var(--status-success-fg);--bd-dot:var(--status-success)}
.badge.warn{--bd-bg:var(--status-warn-bg);--bd-fg:var(--status-warn-fg);--bd-dot:var(--status-warn)}
.badge.danger{--bd-bg:var(--status-danger-bg);--bd-fg:var(--status-danger);--bd-dot:var(--status-danger)}
.badge.b2x{--bd-bg:var(--status-info-bg);--bd-fg:var(--status-info-fg);--bd-dot:var(--status-info)}
.badge.q{--bd-bg:var(--bg-subtle);--bd-fg:var(--text-muted)}
.badge.line{--bd-bg:transparent;--bd-border:var(--border-strong);--bd-fg:var(--text-muted)}

/* ---------------- Button ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--h-control-md);padding:0 var(--sp-16);border-radius:var(--r-btn);
  font-size:var(--fs-13);font-weight:var(--fw-bold);letter-spacing:-.2px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  background:var(--bg-surface);color:var(--text-body);
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
.btn-sm{height:var(--h-control-sm);padding:0 10px;font-size:var(--fs-12)}
.btn-lg{height:var(--h-control-lg);padding:0 var(--sp-20);font-size:var(--fs-14)}
.btn-block{width:100%}
.btn-primary{background:var(--btn-p-bg);color:var(--btn-p-fg);border-color:var(--btn-p-border);
  box-shadow:var(--btn-p-shadow)}
.btn-primary:hover{background:var(--btn-p-hover);border-color:var(--btn-p-hover)}
.btn-secondary{background:var(--bg-surface);color:var(--text-body);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--bg-hover)}
.btn-ghost{background:transparent;color:var(--text-brand);border-color:transparent}
.btn-ghost:hover{background:var(--bg-brand-soft)}
.btn-danger{background:var(--status-danger);color:#fff;border-color:var(--status-danger)}
.btn-danger:hover{background:var(--status-danger-hover)}
.btn-quiet{background:var(--bg-subtle);color:var(--text-body);border-color:transparent}
.btn-quiet:hover{background:var(--bg-hover)}
.btn:disabled{background:var(--bg-subtle)!important;color:var(--text-disabled)!important;
  border-color:var(--border-default)!important;cursor:not-allowed;box-shadow:none!important}

/* ---------------- Form ---------------- */
.form{display:grid;gap:var(--sp-16)}
.form.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field>label{font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--text-heading)}
.field>label .req{color:var(--status-danger);margin-left:2px}
.input,.select,.textarea{
  height:var(--h-control-md);padding:0 var(--sp-12);border-radius:var(--r-input);
  border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text-body);
  font-size:var(--fs-13);font-family:inherit;width:100%}
.textarea{height:auto;min-height:82px;padding:9px var(--sp-12);line-height:1.5;resize:vertical}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),
  linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
.input::placeholder,.textarea::placeholder{color:var(--text-placeholder)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--border-brand);
  box-shadow:var(--sh-focus)}
.input.err{border-color:var(--status-danger)}
.input[readonly]{background:var(--bg-subtle);color:var(--text-muted)}
.help{font-size:var(--fs-12);color:var(--text-muted)}
.err-msg{font-size:var(--fs-12);color:var(--status-danger)}
.suffix{display:flex;align-items:center;gap:6px}
.suffix .u{font-size:var(--fs-13);color:var(--text-muted);flex:none}
.check{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-13);cursor:pointer}
.check input{appearance:none;width:16px;height:16px;border-radius:var(--r-check);flex:none;
  border:1px solid var(--border-strong);background:var(--input-bg);position:relative;margin:0}
.check input:checked{background:var(--check-bg);border-color:var(--check-border)}
.check input:checked::after{content:"";position:absolute;left:50%;top:50%;width:3.5px;height:7px;
  border:solid var(--check-mark);border-width:0 1.8px 1.8px 0;
  transform:translate(-50%,-56%) rotate(42deg)}
.check input[type=radio]{border-radius:999px}
.check input[type=radio]:checked::after{left:50%;top:50%;width:6px;height:6px;border:0;
  border-radius:999px;background:var(--check-mark);transform:translate(-50%,-50%)}
.check.dis{color:var(--text-disabled);cursor:not-allowed}
/* 보기 전용 체크박스 — 흐려지지 않고 일반 체크박스와 같은 색으로 보이게 */
.tbl input[type=checkbox]:disabled{appearance:none;width:16px;height:16px;position:relative;
  border-radius:var(--r-check);border:1px solid var(--border-strong);background:var(--input-bg);
  margin:0;opacity:1;cursor:not-allowed}
.tbl input[type=checkbox]:disabled:checked{background:var(--check-bg);border-color:var(--check-border)}
.tbl input[type=checkbox]:disabled:checked::after{content:"";position:absolute;left:50%;top:50%;
  width:3.5px;height:7px;border:solid var(--check-mark);border-width:0 1.8px 1.8px 0;
  transform:translate(-50%,-56%) rotate(42deg)}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-13);cursor:pointer}
.toggle span.tk{width:34px;height:20px;border-radius:999px;background:var(--border-strong);
  position:relative;flex:none;transition:background .15s}
.toggle span.tk::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.toggle input{display:none}
.toggle input:checked+.tk{background:var(--role)}
.toggle input:checked+.tk::after{left:16px}
.seg{display:inline-flex;padding:3px;border-radius:var(--r-input);background:var(--bg-subtle);gap:2px}
.seg button{border:0;background:transparent;height:26px;padding:0 12px;border-radius:calc(var(--r-input) - 2px);
  font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--text-muted);cursor:pointer}
.seg button.on{background:var(--bg-surface);color:var(--text-heading);box-shadow:var(--sh-sm)}

/* ---------------- Filters ---------------- */
.filters{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;
  padding:var(--sp-12) var(--card-pad);border-bottom:1px solid var(--card-border);
  background:var(--filter-bg)}
.filters .fl{font-size:var(--fs-12);color:var(--text-muted);font-weight:var(--fw-bold)}
.filters .input,.filters .select{height:var(--h-control-sm);font-size:var(--fs-12);width:auto;min-width:120px}
.filters .grow{flex:1;min-width:150px}
.filters .right{margin-left:auto;display:flex;gap:var(--sp-8);align-items:center}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;height:var(--h-control-sm);padding:0 10px;
  border-radius:var(--r-chip);border:1px solid var(--border-default);background:var(--bg-surface);
  font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--text-muted);cursor:pointer}
.chip.on{background:var(--chip-on-bg);border-color:var(--chip-on-border);color:var(--chip-on-fg)}
.chip .c{font-variant-numeric:tabular-nums;opacity:.7}

/* ---------------- Table ---------------- */
.tbl-wrap{overflow-x:auto}
/* 한 줄로 보여줄 표 — 칸 안에서 줄바꿈하지 않고 필요하면 가로 스크롤 */
.tbl.nowrap th,.tbl.nowrap td{white-space:nowrap}
.tbl th.nw,.tbl td.nw{white-space:nowrap}
/* 칸이 많은 표 — 가로 스크롤 대신 머리글을 접고 여백을 줄여 폭 안에 담습니다.
   값 칸의 .nw 는 그대로라 전화번호·날짜는 여전히 한 줄로 유지됩니다. */
.tbl.fit th{white-space:normal;line-height:1.25;padding:var(--sp-8) var(--sp-6)}
.tbl.fit td{padding:var(--td-pad) var(--sp-6)}
.tbl.fit th.w-chk,.tbl.fit td.w-chk{padding-right:0}
/* flush 카드의 표 — 양 끝 칸에만 카드 여백만큼 들여쓰기 */
.tbl.px th:first-child,.tbl.px td:first-child{padding-left:var(--card-pad)}
.tbl.px th:last-child,.tbl.px td:last-child{padding-right:var(--card-pad)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
.tbl th{height:var(--h-row-head);padding:0 var(--sp-12);text-align:left;font-size:var(--fs-12);
  font-weight:var(--fw-bold);color:var(--text-muted);background:var(--th-bg);
  border-bottom:1px solid var(--card-border);white-space:nowrap}
.tbl td{height:var(--h-row);padding:var(--td-pad) var(--sp-12);border-bottom:1px solid var(--tr-border);
  color:var(--text-body);vertical-align:middle}
.tbl tbody tr:hover{background:var(--bg-hover)}
.tbl tbody tr.sel{background:var(--soft)}
.tbl tbody tr[data-view]{cursor:pointer}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .ctr{text-align:center}
.tbl .strong{font-weight:var(--fw-bold);color:var(--text-heading)}
/* 표 안 이름 링크 — 누르면 해당 회원 상세로 이동 */
.tbl a.nm{color:var(--text-heading);text-decoration:underline;
  text-decoration-color:var(--border-strong);text-underline-offset:3px;cursor:pointer}
.tbl a.nm:hover{color:var(--text-brand);text-decoration-color:var(--border-brand)}
/* 눌러서 고르는 행 · 폼 도움말 안의 링크 */
.tbl tr.pick{cursor:pointer}
.help a.lnk,.help a{color:var(--text-brand);text-decoration:underline;
  text-underline-offset:2px}
.tbl .sub{display:block;font-size:var(--fs-11);color:var(--text-muted);margin-top:1px}
.tbl .act{text-align:right;white-space:nowrap}
.tbl .act .btn+.btn{margin-left:var(--sp-6)}
.tbl th.w-chk,.tbl td.w-chk{width:36px;padding-right:0}
.tbl.nowrap th,.tbl.nowrap td{white-space:nowrap}
/* 열이 많은 표 — 칸 사이에 세로 구분선을 넣어 열을 읽기 쉽게 */
.tbl.cols th + th,.tbl.cols td + td{border-left:1px solid var(--tr-border)}
/* 어드민 화면(대시보드 ~ 시스템 설정)의 모든 표 — 줄바꿈 없이 · 세로 구분선 · 줄무늬 */
.role-admin .tbl th,.role-admin .tbl td{white-space:nowrap}
/* 라벨 · 값을 한 줄로 유지할 항목 목록 */
.kv.nw dt,.kv.nw dd{white-space:nowrap}
.role-admin .tbl th + th,.role-admin .tbl td + td{border-left:1px solid var(--tr-border)}
.role-admin .tbl tbody tr:nth-child(even){background:var(--stripe)}
.role-admin .tbl tbody tr:nth-child(even):hover{background:var(--bg-hover)}
.tbl.striped tbody tr:nth-child(even){background:var(--stripe)}
.tbl.striped tbody tr:nth-child(even):hover{background:var(--bg-hover)}
.pager{display:flex;align-items:center;gap:4px}
.pager a,.pager span{min-width:26px;height:26px;padding:0 7px;border-radius:var(--r-md);
  display:grid;place-items:center;font-size:var(--fs-12);font-weight:var(--fw-bold);
  color:var(--text-muted);border:1px solid transparent}
.pager a:hover{background:var(--bg-hover)}
.pager .cur{background:var(--btn-p-bg);color:var(--btn-p-fg)}

/* ---------------- Alert ---------------- */
.alert{display:flex;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);border-radius:var(--r-card);
  border:1px solid var(--al-border);background:var(--al-bg);border-left:3px solid var(--al-accent);
  align-items:flex-start}
.alert .a-ic{width:20px;height:20px;border-radius:999px;background:var(--al-accent);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;margin-top:1px}
.alert .a-b{flex:1;min-width:0}
.alert .a-t{font-size:var(--fs-13);font-weight:var(--fw-extra);color:var(--text-heading)}
.alert .a-d{font-size:var(--fs-13);color:var(--text-body);margin-top:2px}
.alert .a-x{display:flex;gap:var(--sp-8);align-items:center;flex:none}
.alert.info{--al-bg:var(--status-info-bg);--al-border:transparent;--al-accent:var(--status-info)}
.alert.ok{--al-bg:var(--status-success-bg);--al-border:transparent;--al-accent:var(--status-success)}
.alert.warn{--al-bg:var(--status-warn-bg);--al-border:transparent;--al-accent:var(--status-warn)}
.alert.danger{--al-bg:var(--status-danger-bg);--al-border:transparent;--al-accent:var(--status-danger)}
.alert.brand{--al-bg:var(--bg-brand-soft);--al-border:transparent;--al-accent:var(--role)}

/* ---------------- List / task ---------------- */
.lst{display:flex;flex-direction:column}
.lst>li{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-12) var(--card-pad);
  border-bottom:1px solid var(--tr-border);list-style:none}
.lst>li:last-child{border-bottom:0}
.lst>li:hover{background:var(--bg-hover)}
.lst{margin:0;padding:0}
.lst .l-ic{width:30px;height:30px;border-radius:var(--r-md);display:grid;place-items:center;
  font-size:13px;flex:none;background:var(--bg-subtle);color:var(--text-muted)}
.lst .l-ic.warn{background:var(--status-warn-bg);color:var(--status-warn-fg)}
.lst .l-ic.danger{background:var(--status-danger-bg);color:var(--status-danger)}
.lst .l-ic.info{background:var(--status-info-bg);color:var(--status-info-fg)}
.lst .l-ic.ok{background:var(--status-success-bg);color:var(--status-success-fg)}
.lst .l-ic.role{background:var(--soft);color:var(--role-text)}
.lst .l-b{flex:1;min-width:0}
.lst .l-t{font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--text-heading)}
/* 리스트 제목 안 건수 강조 — 아이콘 종류(danger/warn/info)와 같은 색 계열 */
.lst .l-t .n{font-weight:var(--fw-black);font-size:var(--fs-14);color:var(--text-brand)}
.lst .l-t .n.danger{color:var(--status-danger)}
.lst .l-t .n.warn{color:var(--status-warn-fg)}
.lst .l-t .n.info{color:var(--status-info-fg)}
.lst .l-t .n.ok{color:var(--status-success-fg)}
.lst .l-d{font-size:var(--fs-12);color:var(--text-muted);margin-top:1px}
.lst .l-x{flex:none;display:flex;align-items:center;gap:var(--sp-8)}

/* ---------------- KV ---------------- */
.kv{display:grid;grid-template-columns:var(--kv-col) 1fr;gap:0;font-size:var(--fs-13)}
.kv dt{padding:var(--sp-10) var(--sp-12);color:var(--text-muted);font-size:var(--fs-12);
  font-weight:var(--fw-bold);background:var(--kv-dt-bg);border-bottom:1px solid var(--tr-border)}
.kv dd{margin:0;padding:var(--sp-10) var(--sp-12);border-bottom:1px solid var(--tr-border);
  color:var(--text-body)}
.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:0}
/* 값을 강조해 읽히게 하는 변형 — 항목이 적고 하나씩 확인하는 상세 카드에 씁니다 */
.kv.em{font-size:var(--fs-13)}
.kv.em dt{color:var(--text-body);font-weight:var(--fw-extra)}
.kv.em dd{color:var(--text-heading);font-weight:var(--fw-bold)}

/* ---------------- 회원 상세 팝업 ---------------- */
.mv-hd{display:flex;align-items:center;gap:var(--sp-12)}
.mv-hd .avatar.xl{width:44px;height:44px;font-size:16px;border-radius:var(--r-lg)}
.mv-hd .mv-i{flex:1;min-width:0}
.mv-hd .mv-n{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;
  font-size:var(--fs-16);font-weight:var(--fw-extra);color:var(--text-heading)}
.mv-hd .mv-sub{margin-top:3px;font-size:var(--fs-12);color:var(--text-muted)}
.mv-hd .mv-x{flex:none}
.mv-t{font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--text-muted);
  margin:0 0 var(--sp-8)}
.mv-t small{font-weight:var(--fw-regular);color:var(--text-placeholder);margin-left:4px}
.mv-gap{height:var(--sp-16)}
.ovl .m-b .kv,.ovl .m-b .tbl-wrap{border:1px solid var(--card-border);
  border-radius:var(--r-md);overflow:hidden}
.ovl .m-b .tbl-wrap{overflow-x:auto}
.ovl .m-b .agr{display:flex;flex-wrap:wrap;gap:6px}

/* ---------------- Charts ---------------- */
/* 값 라벨이 막대 꼭대기 위로 올라오므로 위쪽에 자리를 비워 둡니다 */
.bars{display:flex;align-items:flex-end;gap:var(--bar-gap);height:var(--chart-h);padding-top:22px}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars .stackbar{width:100%;max-width:var(--bar-w);display:flex;flex-direction:column;justify-content:flex-end;
  gap:2px;flex:1;min-height:0}
/* 데이터가 끝나는 쪽만 둥글게 · 바닥은 각지게 (기준선에 붙어 있다는 신호) */
.bars .b{width:100%;border-radius:4px 4px 0 0;background:var(--c-n700);position:relative;min-height:3px}
/* 값이 0 인 칸 — 비어 보이면 '데이터 없음'으로 오해하므로 옅은 바닥선을 남깁니다 */
.bars .b.zero{background:var(--c-n200)}
/* 값 라벨 — 차트 꼭대기가 아니라 '그 막대의 머리 위'에 붙습니다 */
.bars .bv{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:5px;
  font-size:var(--fs-12);font-weight:var(--fw-black);color:var(--text-heading);
  line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
/* 아직 안 끝난 달 — 같은 색을 옅게 써서 '확정 아님'을 알립니다 (빗금은 얇은 막대에서 지저분합니다) */
.bars .b.cur{background:var(--c-n300)}
.bars .b.b2b{background:var(--chart-b2b)}
.bars .b.b2c{background:var(--chart-b2c)}
/* 강조(수용 임박 등) — 기본 막대와 확실히 갈라지는 색 */
/*   기본 #5F7C99 대비 색맹 구분 ΔE 16.5 · 배경 대비 3:1 통과 */
.bars .b.n7{background:var(--status-warn-fg)}
.bars .b.n3{background:var(--c-n300)}
/* x축 라벨 칸을 고정 높이로 — 축선 위치를 픽셀로 확정하기 위해서입니다 */
.bars .cl{font-size:var(--fs-11);color:var(--text-muted);white-space:nowrap;
  height:14px;line-height:14px;font-variant-numeric:tabular-nums}

/* ── 축이 있는 막대 차트 ──────────────────────────────
   위 22px = 값 라벨 자리 · 아래 20px = 눈금(6px 간격 + 14px 라벨)
   그 사이가 그래프 영역이고, 막대는 가로축 위에 붙어 섭니다. */
.chart{position:relative;padding-left:38px;display:flex;flex-direction:column}
.chart>.bars{flex:1;min-height:var(--chart-h)}

/* 차트 카드가 옆 카드 높이에 맞춰 늘어나고, 그래프가 그 높이를 채웁니다
   (고정 높이로 두면 카드 아래쪽에 빈 여백이 크게 남습니다) */
.card.fill-chart{display:flex;flex-direction:column}
.card.fill-chart>.card-b{flex:1;display:flex;flex-direction:column}
.card.fill-chart .chart{flex:1}
.card.fill-chart .chart>.bars{height:auto}
.chart .cy{position:absolute;left:0;top:22px;bottom:20px;width:32px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  font-size:var(--fs-11);line-height:1;color:var(--text-muted);font-variant-numeric:tabular-nums}
.chart .cy span{transform:translateY(-50%)}
.chart .cy span:first-child{transform:none}
.chart .cy span:last-child{transform:translateY(-100%)}
.bars.axis{position:relative}
/* 가로 눈금선 (위 · 중간) — 옅게 */
.bars.axis::before{content:"";position:absolute;left:0;right:0;top:22px;bottom:20px;
  background:linear-gradient(var(--border-default) 1px,transparent 1px) 0 0/100% 50%;
  pointer-events:none}
/* 세로축 + 가로축(바닥선) */
.bars.axis::after{content:"";position:absolute;left:0;right:0;top:22px;bottom:20px;
  border-left:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);
  pointer-events:none}
.bars.axis .col:first-child{margin-left:2px}
.legend{display:flex;gap:var(--sp-16);flex-wrap:wrap;font-size:var(--fs-12);color:var(--text-muted)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;font-style:normal}
.hbars{display:flex;flex-direction:column;gap:var(--sp-12)}
.hbar{display:grid;grid-template-columns:88px 1fr 52px;align-items:center;gap:var(--sp-12);font-size:var(--fs-12)}
.hbar .track{height:8px;border-radius:999px;background:var(--c-track);overflow:hidden}
.hbar .fill{height:100%;border-radius:999px;background:var(--c-neutral)}
.hbar .fill.low{background:var(--c-n700)}
.hbar .fill.warn{background:var(--status-warn)}
.hbar .fill.danger{background:var(--status-danger)}
.hbar .fill.role{background:var(--c-n700)}   /* 회원 유형 계열이 아니므로 중립 700 */
.hbar .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);color:var(--text-heading)}
/* 예약 가능 인원 — 잔여 인원을 크게 보여줍니다 (협력병원 찾기 · 병원 가동률) */
.hbar.cap{grid-template-columns:92px 1fr 104px;padding:var(--sp-12) 0;font-size:var(--fs-13)}
.hbar.cap+.hbar.cap{border-top:1px solid var(--tr-border)}
.hbar.cap .track{height:10px}
.hbar.cap .v{font-size:var(--fs-20);font-weight:var(--fw-black);line-height:1.1;
  display:flex;align-items:baseline;justify-content:flex-end;gap:2px}
.hbar.cap .v small{font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--text-muted)}
.hbar.cap .v.warn{color:var(--status-warn-fg)}
.hbar.cap .v.danger{color:var(--status-danger-fg)}

/* 협력병원 찾기 — 지도 패널이 좌측 목록 높이에 맞춰 세로로 늘어납니다 */
/* 그리드 한 칸을 카드 하나가 세로로 꽉 채우게 합니다 (옆 열이 더 길 때 빈 여백이 남지 않도록) */
.col-fill{height:100%;display:flex;flex-direction:column}
.col-fill>.card{flex:1;display:flex;flex-direction:column;min-height:0}
.col-fill>.card>.card-b{flex:1;overflow:auto}

.map-col{height:100%}
.map-col>.card{height:100%;display:flex;flex-direction:column}
.map-col>.card>.card-b{flex:1;display:flex;flex-direction:column}
.map-col .ph{flex:1}
.donut{display:flex;align-items:center;gap:var(--sp-20);flex-wrap:wrap}
.donut .ring{width:132px;height:132px;border-radius:999px;flex:none;position:relative;
  background:conic-gradient(var(--c-neutral) 0 65.6%,var(--c-n300) 65.6% 89.8%,var(--c-n200) 89.8% 100%)}
.donut .ring::after{content:"";position:absolute;inset:19px;border-radius:999px;background:var(--bg-surface)}
.donut .ring .mid{position:absolute;inset:0;display:grid;place-items:center;z-index:1;text-align:center}
.donut .ring .mid b{font-size:var(--fs-20);font-weight:var(--fw-black);color:var(--text-heading);
  display:block;line-height:1.1}
.donut .ring .mid small{font-size:var(--fs-11);color:var(--text-muted)}
.donut .dl{display:flex;flex-direction:column;gap:var(--sp-10);font-size:var(--fs-13);flex:1;min-width:150px}
.donut .dl div{display:flex;align-items:center;gap:8px}
.donut .dl i{width:9px;height:9px;border-radius:3px;font-style:normal}
.donut .dl b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text-heading);font-weight:var(--fw-bold)}
.spark{width:100%;height:var(--chart-h);display:block}
/* 추이 차트 — 지점별 정확한 수치 + x축 날짜 라벨 (SVG 는 가로로 늘어나므로 라벨은 HTML 로 얹습니다) */
.spark-wrap{position:relative}
/* 세로축이 붙는 추이 차트 — 왼쪽 눈금 칸을 비우고 축선을 그립니다 */
.spark-wrap.axis{padding-left:46px}
.spark-wrap.axis .sp-y{position:absolute;left:0;top:0;height:var(--chart-h);width:40px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  font-size:var(--fs-11);line-height:1;color:var(--text-muted);font-variant-numeric:tabular-nums}
.spark-wrap.axis .sp-y span{transform:translateY(-50%)}
.spark-wrap.axis .sp-y span:first-child{transform:none}
.spark-wrap.axis .sp-y span:last-child{transform:translateY(-100%)}
/* 세로축 · 가로축(바닥선) */
.spark-wrap.axis .spark-plot{border-left:1px solid var(--border-strong);
  border-bottom:1px solid var(--border-strong)}
.spark-wrap.axis .sp-x{margin-left:0}
.spark-plot{position:relative}
.sp-marks{position:absolute;inset:0;pointer-events:none}
.sp-p{position:absolute;width:9px;height:9px;border-radius:var(--r-full);font-style:normal;
  background:var(--c-n700);border:2px solid var(--bg-surface);transform:translate(-50%,50%)}
.sp-p.warn{background:var(--status-warn)}
.sp-p.bad{background:var(--status-danger)}
.sp-v{position:absolute;padding:0 6px;line-height:1.6;white-space:nowrap;
  font-size:var(--fs-11);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;
  color:var(--text-heading);background:var(--bg-surface);
  border:1px solid var(--tr-border);border-radius:var(--r-sm)}
.sp-v.warn{color:var(--status-warn-fg);border-color:var(--status-warn)}
.sp-v.bad{color:var(--status-danger-fg);border-color:var(--status-danger)}
.sp-x{position:relative;height:16px;margin-top:var(--sp-8)}
.sp-x span{position:absolute;top:0;white-space:nowrap;font-size:var(--fs-11);
  color:var(--text-muted);font-variant-numeric:tabular-nums}
.gauge{height:10px;border-radius:999px;background:var(--c-track);overflow:hidden}
.gauge i{display:block;height:100%;background:var(--c-neutral);border-radius:999px}
/* 미달·임박도 상태색이 아니라 오렌지 700 단계로 표시합니다 (가이드 03 차트 규칙) */
.gauge i.near,.gauge i.over{background:var(--orange-700)}

/* ---------------- Timeline ---------------- */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--tr-border)}
.tl-i{position:relative;padding-bottom:var(--sp-16)}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{content:"";position:absolute;left:-21px;top:5px;width:10px;height:10px;border-radius:999px;
  background:var(--bg-surface);border:2px solid var(--c-neutral)}
.tl-i.b2b::before{border-color:var(--role-b2b)}
.tl-i.b2c::before{border-color:var(--role-b2c)}
.tl-i.now::before{background:var(--role);border-color:var(--role)}
.tl-d{font-size:var(--fs-11);color:var(--text-muted);font-variant-numeric:tabular-nums}
.tl-t{font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--text-heading);
  margin-top:1px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tl-s{font-size:var(--fs-12);color:var(--text-muted);margin-top:2px}

/* ---------------- Calendar ---------------- */
.cal{border:1px solid var(--card-border);border-radius:var(--r-card);overflow:hidden}
.cal-h{display:grid;grid-template-columns:repeat(7,1fr);background:var(--th-bg)}
.cal-h div{padding:8px;text-align:center;font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--text-muted)}
.cal-b{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-b .d{min-height:var(--cal-h);border-top:1px solid var(--tr-border);border-right:1px solid var(--tr-border);
  padding:6px;font-size:var(--fs-12)}
.cal-b .d:nth-child(7n){border-right:0}
.cal-b .d .dn{font-weight:var(--fw-bold);color:var(--text-heading);font-variant-numeric:tabular-nums}
.cal-b .d.off{background:var(--bg-subtle);color:var(--text-disabled)}
.cal-b .d.off .dn{color:var(--text-disabled)}
.cal-b .d.today{background:var(--soft)}
.cal-b .d.today .dn{color:var(--role-text)}
.ev{margin-top:4px;padding:2px 6px;border-radius:var(--r-sm);font-size:var(--fs-11);
  font-weight:var(--fw-bold);background:var(--bg-subtle);color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.b2b{background:var(--role-b2b-soft);color:var(--role-b2b-text)}
.ev.b2c{background:var(--role-b2c-soft);color:var(--role-b2c-text)}
.ev.corp{background:var(--role-corp-soft);color:var(--role-corp-text)}
.ev.hosp{background:var(--role-hospital-soft);color:var(--role-hospital-text)}
.ev.hol{background:var(--status-danger-bg);color:var(--status-danger)}

/* ---------------- Empty / modal / misc ---------------- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-8);
  padding:var(--sp-40) var(--sp-20);text-align:center}
.empty .e-ic{width:44px;height:44px;border-radius:var(--r-lg);background:var(--bg-subtle);
  display:grid;place-items:center;font-size:19px;margin-bottom:var(--sp-4)}
.empty .e-t{font-size:var(--fs-14);font-weight:var(--fw-extra);color:var(--text-heading)}
.empty .e-d{font-size:var(--fs-13);color:var(--text-muted);max-width:380px}
.modal-demo{background:var(--modal-scrim);border-radius:var(--r-card);padding:var(--sp-24);
  display:grid;place-items:center}
.modal{width:100%;max-width:420px;background:var(--bg-surface);border-radius:var(--r-card);
  box-shadow:var(--sh-lg);overflow:hidden}
.modal .m-h{padding:var(--sp-16) var(--sp-20) 0}
.modal .m-t{font-size:var(--fs-16);font-weight:var(--fw-extra);color:var(--text-heading)}
.modal .m-b{padding:var(--sp-8) var(--sp-20) var(--sp-16);font-size:var(--fs-13);color:var(--text-body)}
.modal .m-f{padding:var(--sp-12) var(--sp-20);background:var(--card-foot-bg);display:flex;
  justify-content:flex-end;gap:var(--sp-8);border-top:1px solid var(--card-border)}
.upl{display:flex;flex-direction:column;gap:var(--sp-8)}
.upl-drop{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  padding:var(--sp-20) var(--sp-16);border:1px dashed var(--border-strong);
  border-radius:var(--r-card);background:var(--bg-subtle);cursor:pointer}
.upl-drop:hover{border-color:var(--role);background:var(--bg-surface)}
.upl-drop input{display:none}
.upl-drop .u-ic{font-size:17px;line-height:1;color:var(--text-muted)}
.upl-drop .u-t{font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--text-heading)}
.upl-drop .u-d{font-size:var(--fs-12);color:var(--text-muted)}
.upl-list{display:flex;flex-direction:column;gap:6px}
.upl-list li{display:flex;align-items:center;gap:var(--sp-8);min-height:34px;
  padding:5px var(--sp-12);border:1px solid var(--card-border);border-radius:var(--r-btn);
  background:var(--bg-surface);font-size:var(--fs-13)}
.upl-list li.miss{background:var(--bg-subtle);border-style:dashed}
.upl-list .f-d{flex:none;width:136px;font-weight:var(--fw-bold);color:var(--text-heading)}
.upl-list .f-n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--text-body)}
.upl-list .f-n.muted{color:var(--text-muted)}
.upl-list .f-s{flex:none;font-size:var(--fs-12);color:var(--text-muted)}
.upl-list .f-x{flex:none;border:0;background:none;color:var(--text-muted);cursor:pointer;
  padding:0 2px;font-size:var(--fs-13);line-height:1}
.upl-list .f-x:hover{color:var(--status-danger)}
.ovl{position:fixed;inset:0;z-index:200;display:none;padding:var(--sp-24);
  background:var(--modal-scrim);overflow-y:auto}
.ovl.on{display:flex}
.ovl .modal{margin:auto;max-width:560px;max-height:calc(100vh - var(--sp-24) - var(--sp-24));
  display:flex;flex-direction:column}
.ovl .modal.wide{max-width:760px}
.ovl .modal.xwide{max-width:1240px}
.ovl .m-h{display:flex;align-items:flex-start;gap:var(--sp-12);flex:none;
  padding:var(--sp-20) var(--sp-20) var(--sp-12);border-bottom:1px solid var(--card-border)}
.ovl .m-h .m-ttl{min-width:0}
.ovl .m-h .m-s{font-size:var(--fs-12);color:var(--text-muted);margin-top:3px;line-height:1.5}
.ovl .m-x{margin-left:auto;flex:none;width:28px;height:28px;border-radius:var(--r-btn);
  border:1px solid var(--card-border);background:var(--bg-surface);color:var(--text-muted);
  font-size:var(--fs-13);line-height:1;cursor:pointer;padding:0}
.ovl .m-x:hover{background:var(--bg-subtle);color:var(--text-heading)}
.ovl .m-b{flex:1 1 auto;overflow-y:auto;padding:var(--sp-20);font-size:var(--fs-13)}
.ovl .m-b .tabs{margin-bottom:var(--sp-20)}
.ovl .m-f{flex:none}
.ovl .m-f .l{margin-right:auto;font-size:var(--fs-12);color:var(--text-muted)}
tr.sel-row>td{background:var(--bg-subtle)}
.toast{display:inline-flex;align-items:center;gap:var(--sp-12);padding:10px var(--sp-16);
  border-radius:var(--r-btn);background:var(--toast-bg);color:var(--toast-fg);font-size:var(--fs-13);
  box-shadow:var(--sh-lg)}
.toast b{font-weight:var(--fw-bold)}
.toast a{color:var(--toast-link);font-weight:var(--fw-bold)}
.note{font-size:var(--fs-12);color:var(--text-muted);line-height:1.6;padding:var(--sp-12) var(--card-pad);
  background:var(--bg-subtle);border-radius:var(--r-card)}
.tabs{display:flex;gap:var(--tab-gap);border-bottom:1px solid var(--card-border);margin-bottom:var(--sp-20)}
.tabs a{padding:var(--tab-pad);font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--text-muted);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--tab-on-fg);border-bottom-color:var(--tab-on-bd)}
.tabs a:hover{color:var(--text-heading)}
.hr{height:1px;background:var(--card-border);margin:var(--sp-20) 0;border:0}
.muted{color:var(--text-muted)}
.mini{font-size:var(--fs-12)}
.right{text-align:right}
.flex{display:flex;align-items:center;gap:var(--sp-8)}
.flex.wrap{flex-wrap:wrap}
.flex.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.dl-inline{display:flex;gap:var(--sp-24);flex-wrap:wrap}
.dl-inline div{font-size:var(--fs-13)}
.dl-inline dt{font-size:var(--fs-11);color:var(--text-muted);font-weight:var(--fw-bold)}
.dl-inline dd{margin:2px 0 0;font-weight:var(--fw-bold);color:var(--text-heading);
  font-variant-numeric:tabular-nums}
.ph{background:var(--bg-subtle);border:1px dashed var(--border-strong);border-radius:var(--r-card);
  display:grid;place-items:center;color:var(--text-muted);font-size:var(--fs-12);min-height:120px;text-align:center}
.hcard{display:flex;gap:var(--sp-12);padding:var(--sp-12);border:1px solid var(--card-border);
  border-radius:var(--r-card);background:var(--bg-surface);align-items:flex-start}
.hcard .hi{width:44px;height:44px;border-radius:var(--r-md);background:var(--bg-subtle);flex:none;
  display:grid;place-items:center;font-size:17px}
.hcard .hb{flex:1;min-width:0}
.hcard .hn{font-size:var(--fs-13);font-weight:var(--fw-extra);color:var(--text-heading)}
.hcard .hd{font-size:var(--fs-12);color:var(--text-muted);margin-top:2px}
.hcard .ht{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.hcard.sel{border-color:var(--role);box-shadow:0 0 0 2px var(--soft)}
/* 카드 우측 버튼 묶음 — .lst 에만 있던 간격을 hcard 에도 동일하게 */
.hcard .l-x{flex:none;display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}

/* 공용 아바타 — 프로필 사진 / 기업 로고. 사진이 없으면 이름 첫 글자를 씁니다. */
.ava{width:40px;height:40px;border-radius:var(--r-md);flex:none;overflow:hidden;
  display:grid;place-items:center;background:var(--bg-subtle);color:var(--text-muted);
  font-size:var(--fs-14);font-weight:var(--fw-bold);line-height:1;position:relative}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava.logo img{object-fit:contain;padding:3px;background:#fff}   /* 기업 로고는 잘리지 않게 */
.ava.sm{width:28px;height:28px;font-size:var(--fs-12);border-radius:var(--r-sm)}
.ava.lg{width:96px;height:96px;font-size:var(--fs-30);border-radius:var(--r-card)}
.hcard .hi.ava{width:44px;height:44px}

/* 사진 등록 위젯 (내 정보 · 기업 계약 정보) */
.ava-edit{display:flex;align-items:center;gap:var(--sp-16);flex-wrap:wrap}
.ava-edit .ava-act{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.ava-edit .ava-btns{display:flex;gap:var(--sp-8);flex-wrap:wrap}
.ava-edit input[type=file]{display:none}
/* 협력병원 찾기 — 목록 옆 지도 자리의 핀 목록 */
.mp-list{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-12)}
.mp-i{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-12)}
.mp-i b{color:var(--text-heading);font-weight:var(--fw-bold)}
.mp-i span:last-child{color:var(--text-muted);margin-left:auto}
.mp-n{width:18px;height:18px;border-radius:var(--r-full);background:var(--role);color:#fff;
  font-size:10px;font-weight:var(--fw-black);display:grid;place-items:center;flex:none}
.steps{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:var(--fs-12);color:var(--text-muted)}
.step .sn{width:22px;height:22px;border-radius:999px;background:var(--bg-subtle);color:var(--text-muted);
  display:grid;place-items:center;font-size:var(--fs-11);font-weight:var(--fw-bold)}
.step.done .sn{background:var(--status-success);color:#fff}
.step.on .sn{background:var(--role);color:var(--btn-p-fg)}
.step.on{color:var(--text-heading);font-weight:var(--fw-bold)}
.step-arrow{color:var(--border-strong)}
.matrix td.y{color:var(--status-success-fg);text-align:center;font-weight:var(--fw-bold)}
.matrix td.n{color:var(--text-disabled);text-align:center}

/* ---------------- Login ---------------- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-art{background:var(--login-art);color:#fff;padding:var(--sp-56);display:flex;
  flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-art .la-t{font-size:34px;font-weight:var(--fw-black);letter-spacing:-1.2px;line-height:1.25}
.login-art .la-d{margin-top:var(--sp-16);font-size:var(--fs-14);opacity:.86;line-height:1.7;max-width:420px}
.login-art .la-list{display:flex;flex-direction:column;gap:var(--sp-12);margin-top:var(--sp-32)}
.login-art .la-list div{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-13);opacity:.9}
.login-art .la-list i{width:18px;height:18px;border-radius:999px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-size:10px;font-style:normal;flex:none;margin-top:2px}
.login-art .la-f{font-size:var(--fs-12);opacity:.6}
.login-box{display:grid;place-items:center;padding:var(--sp-40) var(--sp-20);background:var(--bg-page)}
.login-card{width:100%;max-width:390px}
.login-card .lc-t{font-size:var(--fs-24);font-weight:var(--fw-black);color:var(--text-heading);
  letter-spacing:-.8px}
.login-card .lc-d{font-size:var(--fs-13);color:var(--text-muted);margin-top:6px}
.ltabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:var(--sp-24) 0 var(--sp-16);
  padding:4px;background:var(--bg-subtle);border-radius:var(--r-card)}
.ltabs a{height:36px;border-radius:calc(var(--r-card) - 4px);display:grid;place-items:center;
  font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--text-muted)}
.ltabs a.on{background:var(--bg-surface);color:var(--text-heading);box-shadow:var(--sh-sm)}
.ltabs2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:var(--sp-16)}
.ltabs2 a{padding:10px 12px;border-radius:var(--r-input);border:1px solid var(--border-default);
  font-size:var(--fs-12);color:var(--text-muted);line-height:1.35}
.ltabs2 a b{display:block;font-size:var(--fs-13);font-weight:var(--fw-extra);color:var(--text-heading)}
.ltabs2 a.on{border-color:var(--role);background:var(--soft)}
.ltabs2 a.on b{color:var(--role-text)}
.login-links{display:flex;justify-content:center;gap:var(--sp-16);margin-top:var(--sp-16);
  font-size:var(--fs-12);color:var(--text-muted)}
.login-links a:hover{color:var(--text-heading)}
.admin-link{margin-top:var(--sp-24);padding-top:var(--sp-16);border-top:1px solid var(--card-border);
  font-size:var(--fs-12);color:var(--text-muted);text-align:center}

/* ---------------- Index (시안 안내) ---------------- */
.idx-hero{background:var(--login-art);color:#fff;padding:var(--sp-40) var(--sp-20)}
.idx-in{max-width:1180px;margin:0 auto}
.idx-hero h1{margin:0;font-size:30px;font-weight:var(--fw-black);letter-spacing:-1px}
.idx-hero p{margin:10px 0 0;opacity:.85;font-size:var(--fs-14);max-width:620px;line-height:1.7}
.idx-body{max-width:1180px;margin:0 auto;padding:var(--sp-32) var(--sp-20) var(--sp-56)}
.idx-grp{margin-bottom:var(--sp-32)}
.idx-grp h2{font-size:var(--fs-16);font-weight:var(--fw-extra);color:var(--text-heading);
  margin:0 0 var(--sp-12);display:flex;align-items:center;gap:8px}
.idx-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:var(--sp-12)}
.idx-item{display:block;padding:var(--sp-16);border-radius:var(--r-card);background:var(--bg-surface);
  border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.idx-item:hover{border-color:var(--role);transform:translateY(-1px)}
.idx-item .n{font-size:var(--fs-11);font-weight:var(--fw-bold);color:var(--text-muted);
  font-variant-numeric:tabular-nums}
.idx-item .t{font-size:var(--fs-14);font-weight:var(--fw-extra);color:var(--text-heading);margin-top:3px}
.idx-item .d{font-size:var(--fs-12);color:var(--text-muted);margin-top:5px;line-height:1.5}


/* ---------------- 모바일 내비게이션 (햄버거 · 드로어 · 하단 탭바) ----------------
   가이드 06 레이아웃 규격: 브레이크포인트 1280 / 1024 / 768 ·
   개인회원 화면만 768 이하 대응 · 모바일 클릭 영역 44×44px
   1024 이하에서 사이드바를 드로어로 전환하고, 햄버거로 엽니다.
   768 이하 개인회원(B2B/B2C) 화면에는 하단 탭바로 주요 5개 메뉴를 고정 노출합니다.
   ------------------------------------------------------------------------- */
.nav-tog{display:none;width:36px;height:36px;border:0;background:transparent;
  color:var(--gnb-fg);border-radius:var(--r-md);cursor:pointer;
  place-items:center;flex:none;padding:0}
.nav-tog:hover{background:var(--gnb-hover)}
.nav-tog span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
  position:relative}
.nav-tog span::before,.nav-tog span::after{content:"";position:absolute;left:0;
  width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .18s ease}
.nav-tog span::before{top:-6px}
.nav-tog span::after{top:6px}
.nav-ovl{display:none;position:fixed;inset:0;z-index:var(--z-overlay);
  background:rgba(17,24,39,.42);opacity:0;transition:opacity .2s ease}
.nav-ovl.on{opacity:1}
.tabbar{display:none}

@media (max-width:1280px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== 1024 이하 — 사이드바를 드로어로 ===== */
@media (max-width:1024px){
  .nav-tog{display:grid}
  .shell{display:block}
  .side{
    position:fixed;top:var(--h-gnb);left:0;bottom:0;height:auto;
    width:min(var(--w-sidebar),86vw);z-index:calc(var(--z-overlay) + 1);
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:none;border-right:1px solid var(--side-border);
  }
  .side.open{transform:none;box-shadow:var(--sh-lg)}
  .nav-ovl.show{display:block}
  .main{max-width:none}
  .g-2-1,.g-1-2,.g-3-2,.g-7-4,.g3,.g2{grid-template-columns:minmax(0,1fr)}
  .span2{grid-column:auto}
  .login-wrap{grid-template-columns:1fr}
  .login-art{display:none}
  /* 드로어가 열렸을 때 본문 스크롤 잠금 */
  body.nav-lock{overflow:hidden}
}

/* ===== 768 이하 — 모바일 ===== */
@media (max-width:768px){
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main{padding:var(--sp-16)}
  .gnb{padding:0 var(--sp-12);gap:var(--sp-8)}
  .gnb-nav{display:none}
  .gnb-sep{display:none}
  .brand small{display:none}
  .brand{font-size:var(--fs-14)}
  /* GNB 배지는 역할 1개만 남겨 상단바가 밀리지 않게 합니다 */
  .gnb-l .badge:nth-of-type(n+2){display:none}
  .form.c2,.form.c3{grid-template-columns:minmax(0,1fr)}
  .stat .s-v{font-size:var(--fs-24)}
  .user .u-txt{display:none}
  /* 좁은 화면에서는 날짜 라벨이 겹치므로 간격을 띄워 표시합니다 */
  .sp-x span{font-size:10px}
  .sp-x span:nth-child(even){display:none}

  /* 가이드 06 — 모바일 클릭 영역 44×44px */
  .nav-tog,.ic-btn{width:44px;height:44px}
  .side a{height:44px;font-size:var(--fs-14)}
  .btn{min-height:44px}
  .btn.btn-sm{min-height:36px}
  .tbl .act .btn{min-height:36px}

  /* 표는 가로 스크롤 — 손가락 스크롤 가속 + 잘림 힌트 */
  .tbl-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .crumb{font-size:var(--fs-11);flex-wrap:wrap}
  .ovl .ovl-box,.modal-box{width:94vw;max-height:88vh}
}

/* ===== 768 이하 · 개인회원 전용 — 하단 탭바 + 표 카드화 ===== */
@media (max-width:768px){
  .role-b2b .tabbar,.role-b2c .tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
    height:58px;padding-bottom:env(safe-area-inset-bottom,0);
    background:var(--side-bg);border-top:1px solid var(--side-border);
    box-shadow:0 -2px 10px rgba(17,24,39,.06);
  }
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-height:44px;font-size:var(--fs-11);font-weight:var(--fw-bold);
    color:var(--side-muted);text-decoration:none}
  .tabbar a .ti{font-size:17px;line-height:1}
  .tabbar a.on{color:var(--text-brand)}
  .tabbar a .cnt{position:absolute;transform:translate(14px,-10px);
    background:var(--status-danger);color:#fff;border-radius:999px;
    font-size:10px;font-weight:700;padding:1px 5px;line-height:1.4}
  /* 탭바에 본문이 가리지 않도록 */
  .role-b2b .main,.role-b2c .main{padding-bottom:calc(58px + var(--sp-24))}

  /* 개인회원 화면의 표는 행 단위 카드로 접어 가로 스크롤을 없앱니다.
     data-label 은 app.js 의 bindTable 이 thead 헤더에서 자동으로 넣습니다. */
  .role-b2b .tbl.m-card,.role-b2c .tbl.m-card{font-size:var(--fs-13)}
  .role-b2b .tbl.m-card thead,.role-b2c .tbl.m-card thead{display:none}
  .role-b2b .tbl.m-card tr,.role-b2c .tbl.m-card tr{
    display:block;padding:var(--sp-10) 0;border-bottom:1px solid var(--tr-border)}
  .role-b2b .tbl.m-card td,.role-b2c .tbl.m-card td{
    display:flex;align-items:flex-start;gap:var(--sp-12);
    height:auto;min-height:30px;padding:3px var(--sp-12);border:0;text-align:left!important}
  .role-b2b .tbl.m-card td::before,.role-b2c .tbl.m-card td::before{
    content:attr(data-label);flex:none;width:33%;max-width:110px;
    color:var(--text-muted);font-size:var(--fs-12);font-weight:var(--fw-bold)}
  .role-b2b .tbl.m-card td:empty,.role-b2c .tbl.m-card td:empty{display:none}
  .role-b2b .tbl.m-card td.w-chk,.role-b2c .tbl.m-card td.w-chk{display:none}
  .role-b2b .tbl.m-card .act,.role-b2c .tbl.m-card .act{justify-content:flex-end}
  .role-b2b .tbl.m-card .num,.role-b2c .tbl.m-card .num{text-align:left}
}

/* ===== 480 이하 — 소형 폰 ===== */
@media (max-width:480px){
  .g4,.g5{grid-template-columns:minmax(0,1fr)}
  .main{padding:var(--sp-12)}
  .stat .s-v{font-size:var(--fs-20)}
}