/* ============================================================
   바른셈 — 급여 워크스페이스  ·  디자인 토큰 + 컴포넌트
   톤: 차분한 한국 핀테크/B2B · 뉴트럴 + 인디고 액센트 1색
   ============================================================ */

:root{
  /* 액센트는 JS(tweak)에서 --accent 만 바꾸면 나머지가 color-mix 로 파생 */
  --accent: #3f44a0;
  --accent-soft: color-mix(in oklab, var(--accent) 9%, white);
  --accent-soft2: color-mix(in oklab, var(--accent) 16%, white);
  --accent-line: color-mix(in oklab, var(--accent) 30%, white);
  --accent-ink: color-mix(in oklab, var(--accent) 82%, black);

  --bg: oklch(0.984 0.003 264);
  --bg-sunken: oklch(0.966 0.004 264);
  --surface: #ffffff;
  --surface-2: oklch(0.976 0.003 264);
  --line: oklch(0.916 0.005 264);
  --line-2: oklch(0.862 0.006 264);

  --ink: oklch(0.255 0.014 268);
  --ink-2: oklch(0.455 0.012 268);
  --ink-3: oklch(0.595 0.010 268);
  --ink-4: oklch(0.715 0.008 268);

  --ok: oklch(0.52 0.10 158);
  --ok-soft: oklch(0.955 0.032 158);
  --ok-line: oklch(0.86 0.06 158);
  --warn: oklch(0.62 0.115 64);
  --warn-soft: oklch(0.962 0.042 76);
  --warn-line: oklch(0.86 0.07 72);
  --danger: oklch(0.535 0.165 26);
  --danger-soft: oklch(0.962 0.030 26);
  --danger-line: oklch(0.87 0.06 26);
  --teal: oklch(0.55 0.085 205);
  --teal-soft: oklch(0.957 0.028 205);
  --teal-line: oklch(0.85 0.05 205);

  --r-xs: 6px;  --r-sm: 8px;  --r: 11px;  --r-lg: 15px;  --r-xl: 20px;
  --sh-1: 0 1px 2px rgba(24,24,40,.05), 0 1px 1px rgba(24,24,40,.04);
  --sh-2: 0 4px 16px -4px rgba(24,24,40,.10), 0 2px 6px -2px rgba(24,24,40,.06);
  --sh-3: 0 18px 48px -12px rgba(24,24,40,.20), 0 6px 16px -6px rgba(24,24,40,.10);

  --fs: 1;            /* tweak: 글자 배율 */
  --side-w: 248px;

  /* 폰트 스택 — 스타일 프리셋(data-preset)에서 통째로 교체 */
  --font-body: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: var(--font-body);          /* 제목 계열 */
  --font-num: var(--font-body);              /* 숫자 강조 */
  --num-weight: inherit;                     /* 숫자 가중치 보정 */
  --body-fs: 14px;                           /* 본문 기준 크기 */
  --body-tracking: -0.01em;                  /* 본문 자간 */
  --title-tracking: -0.025em;                /* 제목 자간 */
  --pad: 1;                                  /* 여백 배율(카드·표·페이지) */
}

*{ box-sizing: border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: calc(var(--body-fs) * var(--fs));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: var(--body-tracking);
}
.num{ font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; font-family: var(--font-num); }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family: inherit; }
::selection{ background: var(--accent-soft2); }

/* ── 스크롤바 ───────────────────────────────────────── */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius:99px; border:3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover{ background: var(--ink-4); border:3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track{ background: transparent; }

/* ── 앱 셸 ──────────────────────────────────────────── */
.app{ display:grid; grid-template-columns: var(--side-w) 1fr; height:100vh; overflow:hidden; }

.side{ background: var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.side-brand{ display:flex; align-items:center; gap:11px; padding:18px 18px 16px; }
.brand-mark{ width:30px; height:30px; border-radius:9px; background: var(--accent); color:#fff; display:grid; place-items:center; font-weight:800; font-size:15px; letter-spacing:-0.04em; flex:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.brand-name{ font-family: var(--font-display); font-weight:700; font-size:15px; letter-spacing:-0.02em; }
.brand-sub{ font-size:11px; color: var(--ink-3); margin-top:1px; }

.nav{ padding:6px 12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1; min-height:0; }
.nav-label{ font-size:10.5px; font-weight:700; letter-spacing:.07em; color: var(--ink-4); text-transform:uppercase; padding:14px 10px 6px; }
.nav-item{ display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius: var(--r-sm); color: var(--ink-2); font-size:13.5px; font-weight:500; cursor:pointer; border:none; background:none; width:100%; text-align:left; transition: background .12s, color .12s; position:relative; }
.nav-item:hover{ background: var(--bg-sunken); color: var(--ink); }
.nav-item.active{ background: var(--accent-soft); color: var(--accent-ink); font-weight:600; }
.nav-item.active .ms{ color: var(--accent); }
.nav-item .ms{ font-size:20px; color: var(--ink-3); flex:none; }
.nav-item .badge{ margin-left:auto; }

.side-foot{ padding:12px; border-top:1px solid var(--line); }
.copyright{ font-size:9.5px; color: var(--ink-4); text-align:center; padding:9px 4px 1px; line-height:1.55; letter-spacing:0; }
.user-chip{ display:flex; align-items:center; gap:10px; padding:8px; border-radius: var(--r-sm); }
.avatar{ width:32px; height:32px; border-radius:50%; background: var(--accent-soft2); color: var(--accent-ink); display:grid; place-items:center; font-weight:700; font-size:13px; flex:none; }

/* ── 메인 ───────────────────────────────────────────── */
.main{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.topbar{ height:60px; flex:none; border-bottom:1px solid var(--line); background: color-mix(in oklab, var(--surface) 80%, transparent); backdrop-filter: blur(8px); display:flex; align-items:center; gap:16px; padding:0 26px; z-index:5; }
.crumbs{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--ink-3); }
.crumbs b{ color: var(--ink); font-weight:600; }
.crumbs .sep{ color: var(--ink-4); }
.topbar-spacer{ flex:1; }
.period-pick{ display:flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--line-2); border-radius: var(--r-sm); font-size:13px; font-weight:600; color: var(--ink); background: var(--surface); cursor:pointer; }
.period-pick .ms{ font-size:18px; color: var(--ink-3); }

/* ── 귀속월 선택기 (shadcn 스타일 팝오버) ─────────────── */
.pp{ position:relative; }
.pp-trigger{
  display:flex; align-items:center; gap:7px; height:38px; padding:0 11px;
  border:1px solid var(--line-2); border-radius:9px;
  background: var(--surface); color: var(--ink);
  font-size:13.5px; font-weight:650; letter-spacing:-0.01em;
  cursor:pointer; transition: background .12s, border-color .12s, box-shadow .12s;
}
.pp-trigger:hover{ background: var(--surface-2); }
.pp-trigger.open{ border-color: var(--accent-line); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent); }
.pp-trigger .pp-cal{ font-size:17px; color: var(--ink-3); }
.pp-trigger .pp-suffix{ color: var(--ink-3); font-weight:500; margin-left:-3px; }
.pp-trigger .pp-chev{ font-size:17px; color: var(--ink-4); margin-left:1px; transition: transform .16s; }
.pp-trigger.open .pp-chev{ transform: rotate(180deg); }

.pp-pop{
  position:absolute; top:calc(100% + 7px); right:0; z-index:130;
  width:268px; padding:5px;
  background: var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow: 0 12px 34px -10px rgba(20,20,45,.24), 0 3px 10px -4px rgba(20,20,45,.12);
  transform-origin: top right; animation: pp-in .15s cubic-bezier(.16,1,.3,1);
}
@keyframes pp-in{ from{ opacity:0; transform:translateY(-5px) scale(.97);} to{ opacity:1; transform:none;} }

.pp-group{ font-size:11px; font-weight:700; color: var(--ink-4); letter-spacing:.03em;
  padding:8px 9px 4px; display:flex; align-items:center; gap:6px; }
.pp-sep{ height:1px; background: var(--line); margin:5px 5px; }
.pp-scroll{ max-height:184px; overflow-y:auto; margin:0 -1px; }
.pp-scroll::-webkit-scrollbar{ width:8px; }
.pp-scroll::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius:8px; border:2px solid var(--surface); }

.pp-item{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 9px; border:none; background:transparent; border-radius:7px;
  font-size:13.5px; font-weight:550; color: var(--ink-2); cursor:pointer; text-align:left;
  transition: background .1s, color .1s;
}
.pp-item:hover{ background: var(--surface-2); color: var(--ink); }
.pp-item.sel{ color: var(--ink); font-weight:700; }
.pp-check{ font-size:17px; color: var(--accent); opacity:0; flex:none; }
.pp-item.sel .pp-check{ opacity:1; }
.pp-label{ flex:1; font-variant-numeric: tabular-nums; }
.pp-tag{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; flex:none; }
.pp-tag.cur{ background: var(--accent-soft2); color: var(--accent-ink); }
.pp-tag.up{ background: transparent; color: var(--ink-3); border:1px solid var(--line-2); }
.pp-tag.past{ background: var(--surface-2); color: var(--ink-3); border:1px solid var(--line); }

.scroll{ overflow-y:auto; flex:1; min-height:0; }
.page{ max-width:1180px; margin:0 auto; padding: calc(30px * var(--pad)) 30px calc(80px * var(--pad)); }
.page-wide{ max-width:1340px; }
.page-head{ margin-bottom:22px; }
.page-title{ font-family: var(--font-display); font-size:24px; font-weight:700; letter-spacing: var(--title-tracking); }
.page-desc{ color: var(--ink-3); margin-top:5px; font-size:13.5px; }
.row-between{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }

/* ── 카드 ───────────────────────────────────────────── */
.card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.card-pad{ padding: calc(20px * var(--pad)) 22px; }
.card-hd{ display:flex; align-items:center; gap:12px; padding: calc(16px * var(--pad)) 22px; border-bottom:1px solid var(--line); }
.card-hd-main{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; }
.card-hd-right{ display:flex; align-items:center; gap:8px; flex:none; }
.card-hd h3{ font-family: var(--font-display); font-size:14.5px; font-weight:650; letter-spacing:-0.01em; }
.card-hd .ms{ color: var(--ink-3); font-size:19px; }
.card-hd-sub{ font-size:12px; color: var(--ink-3); font-weight:500; }

/* ── 버튼 ───────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 16px; border-radius: var(--r-sm); font-size:13.5px; font-weight:600; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition: background .12s, border-color .12s, box-shadow .12s, transform .04s; letter-spacing:-0.01em; }
.btn:active{ transform: translateY(.5px); }
.btn .ms{ font-size:18px; margin:0 -2px; }
.btn-primary{ background: var(--accent); color:#fff; box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover{ background: var(--accent-ink); }
.btn-default{ background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-default:hover{ background: var(--bg-sunken); border-color: var(--ink-4); }
.btn-ghost{ background: transparent; color: var(--ink-2); }
.btn-ghost:hover{ background: var(--bg-sunken); color: var(--ink); }
.btn-danger{ background: var(--surface); color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover{ background: var(--danger-soft); }
.btn-sm{ height:31px; padding:0 11px; font-size:12.5px; border-radius: var(--r-xs); }
.btn-lg{ height:44px; padding:0 22px; font-size:15px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.iconbtn{ width:34px; height:34px; border-radius: var(--r-sm); display:grid; place-items:center; border:1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor:pointer; }
.iconbtn:hover{ background: var(--bg-sunken); color: var(--ink); }
.iconbtn .ms{ font-size:19px; }

/* ── 상태 pill ─────────────────────────────────────── */
.pill{ display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 9px; border-radius:99px; font-size:11.5px; font-weight:650; letter-spacing:-0.005em; white-space:nowrap; border:1px solid transparent; }
.pill .dot{ width:6px; height:6px; border-radius:50%; background: currentColor; }
.pill .ms{ font-size:14px; margin-left:-2px; }
.pill-gray{ background: var(--bg-sunken); color: var(--ink-2); border-color: var(--line-2); }
.pill-info{ background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.pill-warn{ background: var(--warn-soft); color: color-mix(in oklab, var(--warn) 78%, black); border-color: var(--warn-line); }
.pill-indigo{ background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.pill-teal{ background: var(--teal-soft); color: color-mix(in oklab, var(--teal) 80%, black); border-color: var(--teal-line); }
.pill-ok{ background: var(--ok-soft); color: color-mix(in oklab, var(--ok) 82%, black); border-color: var(--ok-line); }
.pill-danger{ background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }

.tag{ display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border-radius: var(--r-xs); font-size:11px; font-weight:600; background: var(--bg-sunken); color: var(--ink-2); border:1px solid var(--line); }
.tag-accent{ background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.tag-ok{ background: var(--ok-soft); color: color-mix(in oklab, var(--ok) 82%, black); border-color: var(--ok-line); }
.tag-warn{ background: var(--warn-soft); color: color-mix(in oklab, var(--warn) 78%, black); border-color: var(--warn-line); }

/* ── 테이블 ─────────────────────────────────────────── */
.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{ text-align:left; font-weight:600; color: var(--ink-3); font-size:11.5px; letter-spacing:.01em; padding: calc(10px * var(--pad)) 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td{ padding: calc(12px * var(--pad)) 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tbody tr{ transition: background .1s; }
.tbl tbody tr.clickable{ cursor:pointer; }
.tbl tbody tr.clickable:hover{ background: var(--bg-sunken); }
.tbl .r{ text-align:right; }
.tbl .num{ font-variant-numeric: tabular-nums; font-family: var(--font-num); }
.tbl-foot td{ font-weight:700; background: var(--surface-2); border-top:2px solid var(--line-2); }

/* ── KPI ────────────────────────────────────────────── */
.kpi-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.kpi{ background: var(--surface); border:1px solid var(--line); border-radius: var(--r); padding: calc(16px * var(--pad)) 18px; box-shadow: var(--sh-1); }
.kpi-label{ font-size:12px; color: var(--ink-3); font-weight:550; display:flex; align-items:center; gap:6px; }
.kpi-label .ms{ font-size:16px; }
.kpi-val{ font-family: var(--font-num); font-size:27px; font-weight:750; letter-spacing:-0.03em; margin-top:7px; }
.kpi-val small{ font-size:14px; font-weight:600; color: var(--ink-3); margin-left:2px; }
.kpi-sub{ font-size:11.5px; color: var(--ink-3); margin-top:3px; }

/* ── 필드 ───────────────────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12.5px; font-weight:600; color: var(--ink-2); }
.field .hint{ font-size:11.5px; color: var(--ink-3); }
.input, .select{ height:38px; padding:0 12px; border:1px solid var(--line-2); border-radius: var(--r-sm); font-size:13.5px; font-family:inherit; color: var(--ink); background: var(--surface); outline:none; transition: border-color .12s, box-shadow .12s; width:100%; }
.input:focus, .select:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.num{ text-align:right; }
.input-affix{ position:relative; display:flex; align-items:center; }
.input-affix .input{ padding-right:30px; }
.input-affix .suffix{ position:absolute; right:12px; font-size:12.5px; color: var(--ink-3); pointer-events:none; }

/* ── 토글 스위치 ───────────────────────────────────── */
.switch{ position:relative; width:38px; height:22px; border-radius:99px; background: var(--line-2); border:none; cursor:pointer; transition: background .15s; flex:none; padding:0; }
.switch[data-on="1"]{ background: var(--accent); }
.switch i{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch[data-on="1"] i{ transform: translateX(16px); }

/* ── 스텝퍼 (가로) ─────────────────────────────────── */
.stepper{ display:flex; align-items:center; gap:0; }
.step{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; }
.step-node{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; flex:none; border:2px solid var(--line-2); background: var(--surface); color: var(--ink-4); transition: all .2s; }
.step-line{ flex:1; height:2px; background: var(--line-2); border-radius:2px; min-width:14px; transition: background .2s; }
.step-txt{ font-size:12px; font-weight:600; color: var(--ink-4); white-space:nowrap; }
.step.done .step-node{ background: var(--accent); border-color: var(--accent); color:#fff; }
.step.done .step-txt{ color: var(--ink-2); }
.step.done .step-line{ background: var(--accent); }
.step.current .step-node{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow:0 0 0 4px var(--accent-soft); }
.step.current .step-txt{ color: var(--accent-ink); font-weight:700; }

/* ── 타임라인 (세로) ───────────────────────────────── */
.timeline{ display:flex; flex-direction:column; }
.tl-item{ display:flex; gap:13px; }
.tl-rail{ display:flex; flex-direction:column; align-items:center; flex:none; }
.tl-node{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--line-2); background: var(--surface); color: var(--ink-4); font-size:12px; z-index:1; }
.tl-bar{ width:2px; flex:1; background: var(--line-2); min-height:18px; }
.tl-item.done .tl-node{ background: var(--accent); border-color: var(--accent); color:#fff; }
.tl-item.done .tl-bar{ background: var(--accent); }
.tl-item.current .tl-node{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow:0 0 0 4px var(--accent-soft); }
.tl-body{ padding-bottom:18px; }
.tl-title{ font-size:13.5px; font-weight:650; }
.tl-meta{ font-size:11.5px; color: var(--ink-3); margin-top:1px; }
.tl-item.future .tl-title{ color: var(--ink-4); font-weight:600; }

/* ── 칸반 보드 (검수 워크플로) ──────────────────────── */
.kb{ display:grid; grid-auto-flow:column; grid-auto-columns: minmax(130px, 1fr); gap:10px; overflow-x:auto; padding-bottom:6px; }
.kb-lane{ background: var(--bg-sunken); border:1px solid var(--line); border-radius: var(--r); display:flex; flex-direction:column; min-height:150px; }
.kb-lane-hd{ display:flex; align-items:center; gap:6px; padding:9px 11px; border-bottom:1px solid var(--line); }
.kb-step-no{ width:18px; height:18px; border-radius:50%; background: var(--surface); border:1px solid var(--line-2); color: var(--ink-3); font-size:10.5px; font-weight:700; display:grid; place-items:center; flex:none; }
.kb-lane-title{ font-size:12px; font-weight:650; color: var(--ink-2); white-space:nowrap; }
.kb-count{ margin-left:auto; font-size:11px; font-weight:700; color: var(--accent-ink); background: var(--accent-soft); border:1px solid var(--accent-line); border-radius:99px; padding:0 7px; }
.kb-lane-body{ padding:8px; display:flex; flex-direction:column; gap:8px; flex:1; }
.kb-empty{ flex:1; border:1px dashed var(--line-2); border-radius: var(--r-sm); min-height:60px; opacity:.5; }
.kb-card{ background: var(--surface); border:1px solid var(--line-2); border-radius: var(--r-sm); padding:10px; cursor:pointer; box-shadow: var(--sh-1); transition: border-color .15s, box-shadow .15s, transform .08s; }
.kb-card:hover{ border-color: var(--ink-4); }
.kb-card.active{ border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--sh-1); }
.kb-card-top{ display:flex; align-items:center; gap:9px; }
.kb-card-name{ font-size:13px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kb-card-sub{ font-size:11px; color: var(--ink-3); }
.kb-card-nav{ display:flex; align-items:center; justify-content:space-between; gap:4px; margin-top:9px; padding-top:8px; border-top:1px solid var(--line); }
.kb-card-stat{ font-size:10.5px; font-weight:650; color: var(--ink-3); }
.kb-nav-btn{ width:24px; height:24px; border-radius: var(--r-xs); border:1px solid var(--line-2); background: var(--surface); color: var(--ink-2); display:grid; place-items:center; cursor:pointer; flex:none; }
.kb-nav-btn:hover{ background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.kb-nav-btn[disabled]{ opacity:.3; cursor:not-allowed; }

/* ── 반려 배너 ──────────────────────────────────────── */
.reject-banner{ background: var(--danger-soft); border:1px solid var(--danger-line); border-radius: var(--r); padding:14px 18px; display:flex; gap:13px; align-items:flex-start; }
.reject-banner .ms{ color: var(--danger); font-size:22px; flex:none; }

/* ── 워터폴 (계산 분해) ────────────────────────────── */
.wf{ display:flex; flex-direction:column; gap:1px; }
.wf-row{ display:grid; grid-template-columns: 150px 1fr 130px; align-items:center; gap:14px; padding:3px 0; }
.wf-name{ font-size:13px; font-weight:550; color: var(--ink-2); display:flex; align-items:center; gap:7px; }
.wf-bar-track{ height:18px; position:relative; }
.wf-bar{ position:absolute; height:100%; border-radius:5px; top:0; transition: width .5s cubic-bezier(.3,.8,.4,1), left .5s cubic-bezier(.3,.8,.4,1); }
.wf-amt{ text-align:right; font-size:13.5px; font-weight:650; font-variant-numeric: tabular-nums; font-family: var(--font-num); }
.wf-add .wf-bar{ background: color-mix(in oklab, var(--accent) 55%, white); }
.wf-base .wf-bar{ background: var(--accent); }
.wf-ded .wf-bar{ background: color-mix(in oklab, var(--danger) 60%, white); }
.wf-amt.minus{ color: var(--danger); }
.wf-total{ border-top:2px solid var(--line-2); margin-top:4px; padding-top:9px; }

/* ── 작은 부품 ─────────────────────────────────────── */
.divider{ height:1px; background: var(--line); margin:0; border:none; }
.muted{ color: var(--ink-3); }
.mono{ font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size:.9em; }
.kbd{ font-family: ui-monospace, monospace; font-size:11px; background: var(--surface-2); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:5px; padding:1px 6px; color: var(--ink-2); }
.dl{ display:grid; grid-template-columns: auto 1fr; gap:8px 18px; font-size:13px; }
.dl dt{ color: var(--ink-3); font-weight:500; }
.dl dd{ margin:0; font-weight:600; text-align:right; }

.empty{ text-align:center; padding:60px 20px; color: var(--ink-3); }
.empty .ms{ font-size:40px; color: var(--ink-4); }

/* 변동분 diff 배지 */
.delta{ font-size:11.5px; font-weight:700; padding:1px 6px; border-radius:5px; font-variant-numeric: tabular-nums; }
.delta-up{ background: var(--warn-soft); color: color-mix(in oklab, var(--warn) 75%, black); }
.delta-down{ background: var(--teal-soft); color: color-mix(in oklab, var(--teal) 78%, black); }
.delta-new{ background: var(--accent-soft); color: var(--accent-ink); }

/* 토스트 */
.toast-wrap{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:2000; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{ display:flex; align-items:center; gap:10px; background: var(--ink); color:#fff; padding:11px 18px; border-radius:99px; font-size:13px; font-weight:550; box-shadow: var(--sh-3); animation: toastIn .3s cubic-bezier(.2,.8,.3,1); }
.toast .ms{ font-size:18px; }
.toast.ok .ms{ color: oklch(0.82 0.13 158); }
@keyframes toastIn{ from{ opacity:0; transform: translateY(10px) scale(.96);} to{ opacity:1; transform:none;} }

/* 모달 */
.modal-scrim{ position:fixed; inset:0; background: color-mix(in oklab, var(--ink) 45%, transparent); backdrop-filter: blur(3px); z-index:1500; display:grid; place-items:center; padding:24px; animation: fade .15s; }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
.modal{ background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3); width:100%; max-width:480px; animation: modalIn .2s cubic-bezier(.2,.8,.3,1); }
@keyframes modalIn{ from{opacity:0; transform: translateY(12px) scale(.98);} to{opacity:1; transform:none;} }
.modal-hd{ padding:20px 22px 0; }
.modal-bd{ padding:14px 22px 20px; color: var(--ink-2); font-size:13.5px; }
.modal-ft{ padding:14px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; }

/* 세그먼트 (탭) */
.seg{ display:inline-flex; background: var(--bg-sunken); border:1px solid var(--line); border-radius: var(--r-sm); padding:3px; gap:2px; }
.seg button{ border:none; background:none; padding:6px 14px; border-radius: var(--r-xs); font-size:13px; font-weight:600; color: var(--ink-3); cursor:pointer; transition: all .12s; }
.seg button.on{ background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

/* 진행 막대 */
.prog{ height:7px; border-radius:99px; background: var(--line); overflow:hidden; }
.prog i{ display:block; height:100%; background: var(--accent); border-radius:99px; transition: width .5s; }

/* placeholder (이미지/문서 자리) */
.ph{ background-image: repeating-linear-gradient(45deg, var(--bg-sunken), var(--bg-sunken) 9px, var(--surface-2) 9px, var(--surface-2) 18px); border:1px dashed var(--line-2); border-radius: var(--r-sm); display:grid; place-items:center; color: var(--ink-3); font-family: ui-monospace, monospace; font-size:11px; }

/* ============================================================
   모션 — 화면 전환 · 진입 · 스태거
   ※ OS reduce-motion 설정에서도 동작하도록, CSS @keyframes(opacity:0 고정에
     갇히는 문제)를 쓰지 않고 JS(Web Animations API)로 재생합니다.
     기본(정지) 상태는 항상 '보이는 상태'이므로, 모션이 차단/정지돼도
     콘텐츠가 사라지지 않습니다. 진입 재생은 app.jsx 의 playEnter() 가 담당.
   ============================================================ */
.rise{ }                 /* 기본 = 가시. (구 마크업 호환용 — JS가 진입 재생) */
.view-host{ }            /* 화면(뷰) 래퍼 — key 변경 시 remount → playEnter 재생 */
.channel-enter{ }        /* 전체화면 채널(고객사 폼·근로자 모바일) 래퍼 */
[data-stagger]{ }        /* 직계 자식 순차 진입 — JS 셀렉터 훅 */

/* ============================================================
   스타일 프리셋 — 전체 룩을 토큰 한 벌로 교체 (tweak: stylePreset)
   data-preset="fintech"  → 기본값(:root)
   data-preset="workbench" → 데이터 워크벤치
   data-preset="paper"     → 종이 문서 톤
   토큰/폰트/라운드/여백/테두리/그림자가 부드럽게 전환되도록 transition.
   ============================================================ */
.app, .card, .kpi, .btn, .input, .select, .pill, .tag,
.tbl th, .tbl td, .topbar, .side, .nav-item, .seg, .seg button{
  transition: background-color .35s ease, border-color .35s ease,
              box-shadow .35s ease, border-radius .35s ease, color .35s ease;
}

/* ── 2) 데이터 워크벤치 — 촘촘·각진·모노 숫자 ───────────── */
:root[data-preset="workbench"]{
  --font-num: ui-monospace, "SFMono-Regular", Menlo, "Roboto Mono", monospace;
  --body-fs: 13px;
  --body-tracking: -0.005em;
  --title-tracking: -0.01em;
  --pad: 0.6;

  --r-xs: 2px;  --r-sm: 3px;  --r: 4px;  --r-lg: 5px;  --r-xl: 7px;

  /* 그림자 거의 제거 — 평면 워크벤치 */
  --sh-1: 0 0 0 0 transparent;
  --sh-2: 0 2px 6px -3px rgba(20,22,40,.12);
  --sh-3: 0 10px 30px -10px rgba(20,22,40,.22);

  /* 더 또렷한 격자선 + 살짝 차가운 표면 */
  --bg: oklch(0.972 0.004 256);
  --bg-sunken: oklch(0.952 0.005 256);
  --surface: #ffffff;
  --surface-2: oklch(0.968 0.004 256);
  --line: oklch(0.892 0.006 256);
  --line-2: oklch(0.83 0.008 256);

  --side-w: 224px;
}
:root[data-preset="workbench"] body{ line-height: 1.42; }
:root[data-preset="workbench"] .num,
:root[data-preset="workbench"] .tbl .num,
:root[data-preset="workbench"] .kpi-val,
:root[data-preset="workbench"] .wf-amt{ letter-spacing: -0.02em; }
:root[data-preset="workbench"] .kpi-val{ font-weight: 650; }
/* 표를 주인공으로 — 행 구분선 또렷, 헤더 고정감 */
:root[data-preset="workbench"] .tbl th{
  background: var(--surface-2); text-transform: uppercase;
  letter-spacing: .04em; font-size: 11px;
}
:root[data-preset="workbench"] .tbl tbody tr:hover{ background: var(--accent-soft); }
:root[data-preset="workbench"] .card{ box-shadow: var(--sh-1); }

/* ── 3) 종이 문서 톤 — 세리프 제목·따뜻한 뉴트럴 ─────────── */
:root[data-preset="paper"]{
  --font-display: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
  --body-fs: 14.5px;
  --body-tracking: -0.003em;
  --title-tracking: -0.006em;
  --pad: 1.14;

  --r-xs: 4px;  --r-sm: 6px;  --r: 9px;  --r-lg: 12px;  --r-xl: 16px;

  /* 따뜻한 종이 그림자 */
  --sh-1: 0 1px 2px rgba(74,58,38,.06), 0 1px 1px rgba(74,58,38,.05);
  --sh-2: 0 6px 20px -6px rgba(74,58,38,.14), 0 2px 6px -2px rgba(74,58,38,.08);
  --sh-3: 0 22px 54px -14px rgba(74,58,38,.24), 0 8px 18px -8px rgba(74,58,38,.12);

  /* 크림빛 따뜻한 뉴트럴 */
  --bg: oklch(0.974 0.013 86);
  --bg-sunken: oklch(0.955 0.016 84);
  --surface: oklch(0.992 0.008 90);
  --surface-2: oklch(0.972 0.014 86);
  --line: oklch(0.90 0.018 80);
  --line-2: oklch(0.835 0.022 78);

  --ink: oklch(0.275 0.020 64);
  --ink-2: oklch(0.448 0.018 64);
  --ink-3: oklch(0.575 0.016 66);
  --ink-4: oklch(0.70 0.013 68);
}
:root[data-preset="paper"] body{ line-height: 1.58; }
:root[data-preset="paper"] .page-title{ font-weight: 700; }
:root[data-preset="paper"] .card-hd h3{ font-weight: 600; }
/* 명세서·대장이 주인공 — 표 헤더에 세리프, 행간 여유 */
:root[data-preset="paper"] .tbl th{ font-family: var(--font-display); font-size: 12px; font-weight: 600; }
:root[data-preset="paper"] .tbl-foot td{ font-family: var(--font-display); }
:root[data-preset="paper"] .kpi-label{ font-family: var(--font-display); }
:root[data-preset="paper"] ::selection{ background: oklch(0.9 0.06 86); }

/* ============================================================
   룰셋 거버넌스 (법규 레이어 · 2계층 · 버전이력)
   ============================================================ */
/* 표준 업데이트 알림 */
.rs-alert{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius: var(--r-lg);
  background: var(--warn-soft); border:1px solid var(--warn-line); }
.rs-alert > .ms{ color: color-mix(in oklab, var(--warn) 70%, black); font-size:24px; flex:none; }

/* 2계층 설명 (표준 + 법인 오버레이) */
.rs-layers{ display:flex; align-items:stretch; gap:12px; }
.rs-layer{ flex:1; display:flex; gap:13px; align-items:flex-start; padding: calc(16px * var(--pad)) 18px;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.rs-layer-firm{ background: var(--accent-soft); border-color: var(--accent-line); }
.rs-layer-ic{ width:38px; height:38px; border-radius: var(--r); background: var(--bg-sunken); display:grid; place-items:center; flex:none; }
.rs-layer-ic .ms{ color: var(--ink-3); font-size:21px; }
.rs-layer-firm .rs-layer-ic{ background: color-mix(in oklab, var(--accent) 16%, white); }
.rs-layer-firm .rs-layer-ic .ms{ color: var(--accent); }
.rs-layer-t{ font-weight:650; font-size:13.5px; }
.rs-layer-d{ font-size:12px; color: var(--ink-3); margin-top:3px; line-height:1.55; }
.rs-layer-op{ align-self:center; color: var(--ink-4); font-size:22px; flex:none; }

/* 출처 배지 */
.src-badge{ display:inline-flex; align-items:center; gap:4px; height:21px; padding:0 8px; border-radius:99px; font-size:11px; font-weight:650; border:1px solid transparent; }
.src-std{ background: var(--bg-sunken); color: var(--ink-3); border-color: var(--line-2); }
.src-firm{ background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.rs-row-firm{ background: color-mix(in oklab, var(--accent) 4%, transparent); }

/* 표준 버전 타임라인 (세로) */
.rs-vtl{ display:flex; flex-direction:column; }
.rs-vnode{ display:flex; gap:12px; }
.rs-vrail{ display:flex; flex-direction:column; align-items:center; flex:none; }
.rs-vdot{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--line-2); background: var(--surface); color:#fff; font-size:11px; z-index:1; }
.rs-vdot[data-status="active"]{ background: var(--ok); border-color: var(--ok); }
.rs-vdot[data-status="incoming"]{ background: var(--warn); border-color: var(--warn); }
.rs-vdot[data-status="scheduled"]{ background: var(--accent); border-color: var(--accent); }
.rs-vdot[data-status="superseded"]{ background: var(--surface); border-color: var(--line-2); }
.rs-vbar{ width:2px; flex:1; background: var(--line-2); min-height:14px; }
.rs-vbody{ padding-bottom:16px; min-width:0; }
.rs-vtitle{ font-size:13px; font-weight:650; margin-top:5px; letter-spacing:-0.01em; }
.rs-vmeta{ font-size:11.5px; color: var(--ink-3); margin-top:2px; }
.rs-applied{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:7px; font-size:11.5px; color: var(--ink-2);
  background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-sm); padding:6px 9px; }
.rs-applied .ms{ color: var(--ink-3); }
.rs-applied-btn{ width:100%; text-align:left; cursor:pointer; font-family:inherit; transition: background .12s, border-color .12s; }
.rs-applied-btn:hover{ background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.rs-applied-btn:hover .ms{ color: var(--accent); }
.rs-vnode.is-ref .rs-vtitle{ color: var(--accent-ink); }
.rs-vfoot{ display:flex; align-items:center; gap:6px; font-size:11px; color: var(--ink-4); margin-top:2px; }

/* diff 리스트 */
.rs-diff{ display:flex; flex-direction:column; gap:2px; }
.rs-diff-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); }
.rs-diff-row:last-child{ border-bottom:none; }
.rs-diff-name{ display:flex; align-items:center; gap:8px; font-size:13px; }
.rs-diff-vals{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:13.5px; flex:none; }
.rs-from{ color: var(--ink-4); text-decoration: line-through; }
.rs-to{ color: var(--accent-ink); }

/* 법인 룰셋 변경 이력 */
.rs-flog{ display:flex; flex-direction:column; gap:1px; }
.rs-flog-row{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.rs-flog-dot{ width:9px; height:9px; border-radius:50%; background: var(--line-2); flex:none; }
.rs-flog-dot[data-on="1"]{ background: var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* ============================================================
   B+ 네비게이션 — 사이드바 고객사 로스터 + 워크스페이스 헤더 + 탭
   ============================================================ */
/* 사이드바 섹션 라벨에 카운트 */
.nav-label.with-count{ display:flex; align-items:center; }
.nav-label .lbl-count{ margin-left:auto; color: var(--ink-4); font-weight:800; letter-spacing:0; }

/* 고객사 검색 */
.cli-search{ display:flex; align-items:center; gap:7px; margin:2px 2px 7px; padding:7px 10px;
  border:1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); }
.cli-search .ms{ font-size:17px; color: var(--ink-4); }
.cli-search input{ border:none; background:none; outline:none; font:inherit; font-size:12.5px; color: var(--ink); width:100%; }
.cli-search input::placeholder{ color: var(--ink-4); }

/* 고객사 로스터 (상시 노출 — batch) */
.cli-roster{ display:flex; flex-direction:column; gap:1px; }
.cli-roster .empty-row{ font-size:11.5px; color: var(--ink-4); padding:10px; text-align:center; }
.cli-item{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius: var(--r-sm);
  border:none; background:none; width:100%; text-align:left; cursor:pointer; transition: background .12s; }
.cli-item:hover{ background: var(--bg-sunken); }
.cli-item.active{ background: var(--accent-soft); }
.cli-item.active .cli-item-name{ color: var(--accent-ink); font-weight:700; }
.cli-item-main{ min-width:0; flex:1; }
.cli-item-name{ font-size:12.5px; font-weight:600; color: var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.01em; }
.cli-item-sub{ display:flex; align-items:center; gap:5px; font-size:10.5px; color: var(--ink-3); margin-top:1px; }
.cli-item-sub .sdot{ width:6px; height:6px; border-radius:50%; flex:none; }
.cli-item-badge{ width:7px; height:7px; border-radius:50%; background: var(--warn); flex:none; box-shadow:0 0 0 3px var(--warn-soft); }

/* 워크스페이스 헤더 */
.ws{ flex:none; background: var(--surface); border-bottom:1px solid var(--line); padding:15px 26px 0; position:relative; z-index:4; }
.ws-top{ display:flex; align-items:center; gap:16px; }
.ws-id{ display:flex; align-items:center; gap:13px; min-width:0; position:relative; }
.ws-name-row{ display:flex; align-items:center; gap:10px; }
.ws-switch{ display:inline-flex; align-items:center; gap:5px; border:none; background:none; cursor:pointer;
  padding:3px 7px 3px 4px; border-radius: var(--r-sm); font-family:inherit; transition: background .12s; }
.ws-switch:hover{ background: var(--bg-sunken); }
.ws-name{ font-family: var(--font-display); font-size:21px; font-weight:750; letter-spacing:-0.025em; color: var(--ink); }
.ws-switch > .ms{ font-size:20px; color: var(--ink-4); }
.ws-meta{ font-size:12.5px; color: var(--ink-3); margin-top:4px; padding-left:4px; }
.ws-spacer{ flex:1; }
.ws-queue{ display:flex; align-items:center; gap:3px; }
.ws-qbtn{ width:32px; height:32px; border-radius: var(--r-sm); border:1px solid var(--line-2); background: var(--surface);
  color: var(--ink-2); display:grid; place-items:center; cursor:pointer; transition: background .12s, border-color .12s; }
.ws-qbtn:hover{ background: var(--bg-sunken); border-color: var(--ink-4); }
.ws-qbtn .ms{ font-size:19px; }
.ws-qcount{ font-size:12px; font-weight:650; color: var(--ink-3); padding:0 8px; font-variant-numeric: tabular-nums;
  min-width:50px; text-align:center; }

/* 탭 */
.ws-tabs{ display:flex; gap:2px; margin-top:15px; }
.ws-tab{ display:flex; align-items:center; gap:7px; padding:10px 15px; border:none; background:none; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; color: var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; transition: color .12s; }
.ws-tab .ms{ font-size:18px; color: var(--ink-4); }
.ws-tab:hover{ color: var(--ink); }
.ws-tab.on{ color: var(--accent-ink); border-bottom-color: var(--accent); font-weight:700; }
.ws-tab.on .ms{ color: var(--accent); }
.ws-tab .pill{ margin-left:1px; height:18px; font-size:10.5px; padding:0 6px; }

/* 워크스페이스 스위처 드롭다운 */
.ws-pop{ position:absolute; z-index:50; top:calc(100% + 6px); left:0; width:296px; max-height:340px; overflow-y:auto;
  background: var(--surface); border:1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--sh-3); padding:7px; }
.ws-pop-hd{ font-size:10.5px; font-weight:700; letter-spacing:.06em; color: var(--ink-4); text-transform:uppercase; padding:6px 8px 7px; }
.ws-scrim{ position:fixed; inset:0; z-index:45; }

/* 계약 탭 — 좌측 근로자 레일 (마스터-디테일) */
.emp-rail{ position:sticky; top:16px; background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); display:flex; flex-direction:column; max-height:calc(100vh - 210px); overflow:hidden; }
.emp-rail-hd{ display:flex; align-items:center; gap:8px; padding:13px 15px 11px; border-bottom:1px solid var(--line); font-size:13px; font-weight:650; }
.emp-rail-hd .cnt{ margin-left:auto; font-size:11px; font-weight:700; color: var(--ink-4); }
.emp-search{ display:flex; align-items:center; gap:7px; margin:10px 11px 5px; padding:7px 10px;
  border:1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); }
.emp-search .ms{ font-size:16px; color: var(--ink-4); }
.emp-search input{ border:none; background:none; outline:none; font:inherit; font-size:12.5px; width:100%; color: var(--ink); }
.emp-search input::placeholder{ color: var(--ink-4); }
.emp-list{ overflow-y:auto; padding:3px 8px 8px; display:flex; flex-direction:column; gap:1px; }
.emp-item{ display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius: var(--r-sm); border:none; background:none;
  width:100%; text-align:left; cursor:pointer; transition: background .12s; }
.emp-item:hover{ background: var(--bg-sunken); }
.emp-item.active{ background: var(--accent-soft); }
.emp-item.active .emp-name{ color: var(--accent-ink); font-weight:700; }
.emp-ini{ width:28px; height:28px; border-radius:50%; background: var(--bg-sunken); border:1px solid var(--line-2);
  display:grid; place-items:center; font-size:12px; font-weight:700; color: var(--ink-3); flex:none; }
.emp-item.active .emp-ini{ background: color-mix(in oklab, var(--accent) 16%, white); border-color: var(--accent-line); color: var(--accent-ink); }
.emp-main{ min-width:0; flex:1; }
.emp-name{ font-size:12.5px; font-weight:600; color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.01em; }
.emp-title{ font-size:10.5px; color: var(--ink-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emp-empty{ font-size:11.5px; color: var(--ink-4); text-align:center; padding:16px 10px; }

/* 변동분 검수 — 자동 통과(변동 없음) 행 펼치기 토글 */
.autopass-toggle{ display:flex; align-items:center; gap:8px; width:100%; padding:11px 15px; border:none;
  background: var(--surface-2); cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; color: var(--ink-2); transition: background .12s; }
.autopass-toggle:hover{ background: var(--bg-sunken); }
.autopass-toggle .ms{ flex:none; }
.emp-ov{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; flex:none; }
.emp-ov-scheme{ font-size:9.5px; font-weight:650; color: var(--ink-3); white-space:nowrap; }
.emp-ov-base{ font-size:10.5px; font-weight:700; color: var(--ink-2); font-variant-numeric:tabular-nums; }
.emp-item.active .emp-ov-base{ color: var(--accent-ink); }
.emp-item.active .emp-ov-scheme{ color: var(--accent-ink); opacity:.75; }

/* ============================================================
   반응형 — 모바일 → 태블릿 → 데스크탑
   · ≤1024px : 사이드바 → 오프캔버스 드로어(햄버거)
   · ≤768px  : 모든 멀티컬럼 콘텐츠 → 단일 컬럼 + 조밀 패딩
   · ≤420px  : KPI 1열
   레이아웃 유틸 클래스(l-split·l-master·grid-2·form-3 …)는 JSX의
   인라인 grid를 대체합니다. 폭은 --rail / --master CSS 변수로 주입.
   ============================================================ */

/* 레이아웃 유틸 (데스크탑 기본값) */
.l-split{ display:grid; grid-template-columns: minmax(0,1fr) var(--rail,320px); gap:18px; align-items:start; }
.l-master{ display:grid; grid-template-columns: var(--master,248px) minmax(0,1fr); gap:18px; align-items:start; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kpi-grid.kpi-3{ grid-template-columns: repeat(3,1fr); }

/* 고객사 진행 행 (대시보드) — 기본 flex 행 */
.dash-row{ display:flex; align-items:center; gap:16px; }
.dash-prog-hd{ flex-wrap:wrap; gap:4px 10px; align-items:center; }
.dash-prog .num{ white-space:nowrap; }
.dash-act{ flex:none; white-space:nowrap; }
/* 액션 버튼 고정폭 슬롯 — 행마다 진행 막대 길이를 동일하게 (버튼은 우측 정렬) */
.dash-actwrap{ flex:0 0 156px; display:flex; justify-content:flex-end; }
/* 대시보드 보조 레일: 중간 데스크탑(≤1240)에선 본문 아래로 — 진행 행 눌림 방지 */
@media (max-width:1240px){
  .dash-split{ grid-template-columns: minmax(0,1fr); }
  .dash-split > .sticky-rail{ position:static; }
}

/* 표 가로 스크롤 래퍼 */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-wrap > .tbl{ min-width: max-content; }

/* 햄버거 토글 — 데스크탑 숨김 */
.nav-toggle{ display:none; }
.nav-scrim{ display:none; }

/* ── ≤1024 : 사이드바 오프캔버스 드로어 ─────────────── */
@media (max-width:1024px){
  .app{ grid-template-columns: 1fr; }
  /* 태블릿에서 4카드 KPI는 2열로 (4-across는 너무 좁음) */
  .kpi-grid{ grid-template-columns: repeat(2,1fr); }
  /* 태블릿: 보조 레일(l-split)은 본문 아래로 — 본문이 좁아지는 것 방지 */
  .l-split{ grid-template-columns: minmax(0,1fr); }
  .l-split > .sticky-rail{ position:static; }
  .side{
    position:fixed; top:0; left:0; bottom:0; width:286px; max-width:86vw;
    z-index:200; transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--sh-3);
  }
  .app.nav-open .side{ transform:none; }
  .nav-scrim{
    display:block; position:fixed; inset:0; z-index:150;
    background:color-mix(in oklab, var(--ink) 38%, transparent);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .26s;
  }
  .app.nav-open .nav-scrim{ opacity:1; pointer-events:auto; }
  .nav-toggle{ display:grid; flex:none; }
}

/* ── ≤768 : 단일 컬럼 + 조밀 패딩 ─────────────────── */
@media (max-width:768px){
  .l-split, .l-master, .grid-2, .form-2{ grid-template-columns: minmax(0,1fr); }
  .form-3{ grid-template-columns: 1fr 1fr; }
  .kpi-grid, .kpi-grid.kpi-3{ grid-template-columns: repeat(2,1fr); }

  .page{ padding: 18px 14px 72px; }
  .topbar{ padding:0 12px; gap:8px; height:56px; }
  .crumbs{ min-width:0; }
  .ws{ padding:12px 14px 0; }
  .card-pad{ padding: calc(16px * var(--pad)) 15px; }
  .card-hd{ padding: calc(13px * var(--pad)) 15px; }
  .page-title{ font-size:21px; }

  /* 페이지 헤더 / 액션바 줄바꿈 */
  .row-between{ flex-wrap:wrap; }
  .action-bar{ flex-wrap:wrap; }
  .action-bar > .btn{ flex:1 1 auto; }

  /* 마스터 리스트(근로자·명세서·근로자선택)는 모바일에서 높이 제한·고정해제 */
  .pick-list{ max-height:264px !important; }
  .emp-rail{ position:static !important; max-height:340px; }
  .l-split > .sticky-rail{ position:static !important; }

  /* 스텝퍼: 라벨 숨기고 노드만 */
  .step-txt{ display:none; }
  .step-line{ min-width:8px; }

  /* 워크스페이스 헤더 — 줄바꿈 + 탭 가로 스크롤 */
  .ws-top{ flex-wrap:wrap; gap:8px 12px; }
  .ws-name{ font-size:18px; }
  .ws-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-top:12px; }
  .ws-tabs::-webkit-scrollbar{ display:none; }
  .ws-tab{ white-space:nowrap; flex:none; padding:10px 12px; }

  /* 대시보드 고객사 행 — 줄바꿈 */
  .dash-row{ flex-wrap:wrap; gap:10px 12px; }
  .dash-row .dash-id{ flex:1 1 auto !important; }
  .dash-row .dash-prog{ flex:1 1 100% !important; order:3; min-width:0; }
  .dash-row .dash-act{ order:2; margin-left:auto; }
  .dash-row .dash-actwrap{ order:2; margin-left:auto; flex:none; width:auto; }

  /* 계산 워터폴 — 좁은 트랙 */
  .wf-row{ grid-template-columns: 92px 1fr 84px; gap:8px; }

  /* 룰셋 2계층 설명 세로 적층 */
  .rs-layers{ flex-direction:column; }
  .rs-layer-op{ align-self:center; transform:rotate(90deg); }

  /* 모달: 화면 거의 꽉 + 본문 가로 스크롤 */
  .modal-scrim{ padding:12px; }
  .modal-bd{ overflow-x:auto; }

  /* 넓은 표는 가로 스크롤 (thead/tbody는 익명 테이블로 묶여 정렬 유지) */
  .tbl{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }

  /* 카드 헤더(CardHead) — 모바일에서 우측 컨트롤을 아래로 줄바꿈 */
  .card-hd{ flex-wrap:wrap; gap:8px 10px; }
  .card-hd-right{ flex-basis:100%; flex-wrap:wrap; }

  /* ── 표 → 리스트 리플로우 : 가로 스크롤 대신 행을 펼침 ─────
     dense 한 데이터 표(.tbl-cards)는 모바일에서 바깥 카드 안의
     '구분선으로 나뉜 리스트 항목'이 됩니다 (이중 카드 방지).
     각 칸은 라벨(왼쪽)·값(오른쪽) 한 줄로 펼쳐집니다. */
  .tbl-cards{ display:block; overflow:visible; white-space:normal; min-width:0 !important; }
  .tbl-cards thead{ display:none; }
  .tbl-cards tbody, .tbl-cards tfoot{ display:block; }
  .tbl-cards tfoot tr.tbl-foot{ background:var(--surface-2); border-top:2px solid var(--line-2); border-bottom:none; border-radius:0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); }
  .tbl-cards tfoot td{ background:transparent; }
  .tbl-cards tr{ display:block; padding:13px 16px; border-bottom:1px solid var(--line); }
  .tbl-cards tr:last-child{ border-bottom:none; }
  .tbl-cards td{ display:block; padding:0; border:none; white-space:normal; }
  .tbl-cards td[data-label]{ display:flex; align-items:center; gap:12px; min-height:30px; padding:5px 0; }
  .tbl-cards td[data-label]::before{ content:attr(data-label); flex:none; color:var(--ink-3);
    font-size:12.5px; font-weight:550; margin-right:auto; }
  .tbl-cards td.r{ text-align:left; }
  .tbl-cards td.tc-name{ padding:0 0 7px; margin-bottom:3px; border-bottom:1px solid var(--line); }
  .tbl-cards td.tc-name > div:first-child{ font-size:15px; }
  .tbl-cards td.tc-name .input{ width:100%; }   /* 편집형 표: 이름 입력 풀폭 */
  .tbl-cards td.tc-action{ display:flex; align-items:center; gap:12px; padding-top:9px;
    margin-top:5px; border-top:1px dashed var(--line); }
  .tbl-cards td.tc-action > div{ justify-content:flex-end !important; }
  .tbl-cards td.tc-action .iconbtn{ width:40px; height:40px; }   /* 모바일 터치 타깃 */
  /* colSpan 토글 행(자동통과)은 구분선·패딩 없이 버튼만 */
  .tbl-cards tr.tc-plain{ padding:0; border-bottom:none; }

  /* 고객사 입력화면 / 근로자 채널 패딩 축소 */
  .cf-wrap{ padding:20px 14px 72px !important; }
  .cf-head{ padding:14px 14px !important; }
  .worker-pick{ width:100% !important; }
  .payslip-pad{ padding:16px !important; }
  .payslip-doc{ padding:22px 18px !important; }
}

/* ── ≤520 : 3열 폼은 1열, 워크벤치 사이드 폭 보정 ── */
@media (max-width:520px){
  .form-3{ grid-template-columns: 1fr; }
  .ws-queue{ margin-left:auto; }
  .worker-phone{ transform:scale(.8) !important; transform-origin:top center; }

  /* 상단바 — 좁은 폰에서 빵부스러기 숨기고 컨트롤 축소 */
  .topbar .crumbs{ display:none; }
  .topbar{ gap:6px; }
  .period-pick{ padding:6px 8px; font-size:12px; }
  .period-pick .ms{ font-size:16px; }
  .seg button{ padding:6px 9px; }
  /* 귀속월 선택기 — 좁은 폰에서 '귀속' 접미사 숨기고 축소 */
  .pp-trigger{ height:34px; padding:0 8px; gap:5px; font-size:12.5px; }
  .pp-trigger .pp-suffix{ display:none; }
  .pp-pop{ width:248px; }
}

/* ── ≤420 : KPI 1열 ─────────────────────────────── */
@media (max-width:420px){
  .kpi-grid, .kpi-grid.kpi-3{ grid-template-columns: 1fr; }
}

/* ============================================================
   계약 설정 — 반응형(컨테이너 쿼리) + shadcn 폼
   중첩 그리드(l-master ⊃ l-split ⊃ form)에서 가운데 폼이
   '뷰포트는 넓어도' 짓눌리던 문제를, 디테일 영역 폭 기준으로 해소.
   ============================================================ */
.contract-detail{ container-type: inline-size; container-name: cdetail; min-width:0; }

/* 라이브 통상임금 패널: 기본은 스티키 사이드, 디테일이 좁으면 본문 아래로 */
.contract-split > .sticky-rail{ position: sticky; top: 16px; align-self: start; }

/* 기본 계약 폼 — 디테일 폭 기준 3→2→1열 */
.contract-form-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; }

@container cdetail (max-width: 1040px){
  .contract-split{ grid-template-columns: minmax(0,1fr); }
  .contract-split > .sticky-rail{ position: static; }
}
@container cdetail (max-width: 560px){ .contract-form-3{ grid-template-columns: 1fr 1fr; } }
@container cdetail (max-width: 380px){ .contract-form-3{ grid-template-columns: 1fr; } }

/* 수당 표 — 디테일이 좁으면(뷰포트 무관) 카드형으로 리플로우 → 입력 짓눌림 차단 */
@container cdetail (max-width: 600px){
  .contract-detail .tbl-cards{ display:block; overflow:visible; white-space:normal; min-width:0; }
  .contract-detail .tbl-cards thead{ display:none; }
  .contract-detail .tbl-cards tbody{ display:block; }
  .contract-detail .tbl-cards tr{ display:block; padding:13px 2px; border-bottom:1px solid var(--line); }
  .contract-detail .tbl-cards tr:last-child{ border-bottom:none; }
  .contract-detail .tbl-cards td{ display:block; padding:0; border:none; white-space:normal; }
  .contract-detail .tbl-cards td[data-label]{ display:flex; align-items:center; gap:12px; min-height:30px; padding:5px 0; }
  .contract-detail .tbl-cards td[data-label]::before{ content:attr(data-label); flex:none; color:var(--ink-3); font-size:12.5px; font-weight:550; margin-right:auto; }
  .contract-detail .tbl-cards td.r{ text-align:left; }
  .contract-detail .tbl-cards td.tc-name{ padding:0 0 8px; margin-bottom:4px; border-bottom:1px solid var(--line); }
  .contract-detail .tbl-cards td.tc-name .input{ width:100%; }
  .contract-detail .tbl-cards td.tc-action{ display:flex; justify-content:flex-end; padding-top:9px; margin-top:5px; border-top:1px dashed var(--line); }
  .contract-detail .tbl-cards tr.tc-plain{ padding:0; border-bottom:none; }
}

/* ── shadcn 폼 (계약 설정 폼 컨트롤) ──────────────────── */
.sc-form .field label{ font-size:13px; font-weight:500; color: var(--ink); letter-spacing:-0.004em; }
.sc-form .input, .sc-form .select{
  height:36px; border:1px solid var(--line-2); border-radius:8px;
  background: var(--surface); color: var(--ink); font-size:13.5px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.sc-form .input:hover, .sc-form .select:hover{ border-color: var(--ink-4); }
.sc-form .input:focus, .sc-form .select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.sc-form .input::placeholder{ color: var(--ink-4); }
.sc-form .input-affix .input{ height:36px; }
/* shadcn select — 네이티브 화살표 제거 + 커스텀 chevron */
.sc-select{ position:relative; display:flex; }
.sc-select > .select{ width:100%; -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:34px; }
.sc-select > .ms{ position:absolute; right:9px; top:50%; transform:translateY(-50%); font-size:18px; color: var(--ink-3); pointer-events:none; }
/* 수당 표의 인라인 입력도 shadcn 톤 + 짓눌림 방지 최소폭 */
.sc-form.tbl .input{ min-width:0; }
.sc-form.tbl .tc-name .input{ min-width:130px; }