/* 틔움 테마 — 색·서체·로고 규칙은 docs/2026-10-10-틔움-브랜드디자인시스템.md가 기준이다.
   색은 전부 :root 토큰으로만 쓴다(흰색 #fff만 예외). scripts/contrast.cjs가 이 두 규칙을 검사한다. */
@font-face {
  font-family: 'Pretendard'; src: url('fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter'; src: url('fonts/Inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --ink: #1A1A1A; --muted: #646464; --faint-text: #8B9099;
  --line: #E7ECEC; --rule: #C9CDD4; --field-line: #868D95; --bg: #fff; --card: #fff;
  /* 옅은 회색 면 — 조밀 표의 고정 머리글, 안쪽 패널. 본문 바탕(--bg)이 흰색이 되면서 필요해졌다. */
  --subtle: #F5F8F8;
  --accent: #0B4A52; --accent-soft: #E6F1F2; --accent-line: #7FACB2;
  --office: #4A5A6A; --office-soft: #ECEFF2;
  /* 짙은 면(사이드바)과 그 위의 글자. 히어로 면은 --accent를 그대로 쓴다(토큰을 둘로 두면 어긋난다). */
  --side: #06363C; --side-office: #1E2B33;
  --mint: #7FE3B4; --on-dark: #C1CDCE; --on-dark-dim: #8FA5A7;
  --side-hover: #0C434A; --side-line: #16484F;
  --side-office-hover: #27353E; --side-office-line: #2E3D47;
  --ok: #1F7A4D; --ok-soft: #E8F3ED;
  --warn: #a65400; --warn-soft: #fff5e6;
  --danger: #b3261e; --danger-soft: #fdecea;
  --internal: #7a5b00; --internal-soft: #fff3c4;
  --neutral-soft: #E4E7EB;
  /* 차트 계열 두 색(기획 2026-10-31 A) — 완료 초록·경고 주황과 겹치지 않는 청록·보라. dataviz 검증: 색각이상 ΔE 9.4, 흰 바탕 3:1 이상. */
  --chart-1: #008a9e; --chart-2: #7a5cc7;
  /* QR 모듈은 순수 검정이어야 인식률이 가장 좋다(--ink는 #1A1A1A다 — 설계 12.2.3의 '검정 모듈 / 흰 배경'). */
  --qr-ink: #000;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 4px; --r: 8px; --r-lg: 12px; --r-pill: 999px;
}
* { box-sizing: border-box; }
/* 브라우저의 [hidden]은 display를 주는 규칙에 번번이 진다(.toolbar는 flex, 카드 모드의 tr은 block이다).
   화면 코드 28곳이 hidden 하나로 숨기므로 여기서 한 번에 이기게 둔다. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 'Pretendard', 'Inter', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; word-break: keep-all; }
a { color: var(--accent); }
h2 { font-size: 30px; font-weight: 800; margin: 0 0 var(--sp-5); letter-spacing: -0.045em; color: var(--ink); }
/* 섹션 제목은 '제목'이 아니라 라벨처럼 쓴다(설계 5절). 제목이 필요한 자리는 h4다. */
h3 { font-size: 13px; font-weight: 800; margin: 0 0 var(--sp-4); letter-spacing: .09em; color: var(--muted); }
h4 { font-size: 15px; font-weight: 700; margin: var(--sp-4) 0 var(--sp-2); color: var(--ink); }
input, select, textarea, button { font: inherit; }
/* 입력·버튼 경계는 비텍스트 대비 3:1을 지키는 --field-line을 쓴다(--line은 1.24:1로 보이지 않는다). */
input, select, textarea { width: 100%; min-height: 38px; padding: 8px 11px; border: 1px solid var(--field-line); border-radius: var(--r); background: #fff; color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
input[type=checkbox], input[type=file] { min-height: 0; }
/* 체크박스·라디오는 위의 width: 100%를 받으면 줄 전체로 늘어나 글자가 반대쪽 끝으로 밀린다(거래처 관리 피드백 2026-10-13). */
input[type=checkbox], input[type=radio] { width: auto; flex: none; margin: 0; }
/* 공동인증서 금고(2026-10-20) — 이 제품에서 인증서를 받는 유일한 자리다. */
.cert-panel .cert-box { padding: var(--sp-2) 0; }
.cert-form .field { margin-bottom: var(--sp-2); }
.cert-form input[type=file] { padding: 6px; }
.cert-uses td, .cert-uses th { white-space: nowrap; }
.cert-msg { margin: 0; }

/* 4대보험 신고 꾸러미(2026-10-18) — 공단 화면에 옮겨 적을 값을 눌러 복사한다. */
.copy-cell { width: auto; min-height: 0; padding: 2px 6px; font-size: 13px; font-variant-numeric: tabular-nums;
  border-style: dashed; background: var(--subtle); }
.copy-cell:hover { border-style: solid; background: #fff; }
.pack-table td, .pack-table th { vertical-align: middle; }
.filing-form .row { gap: var(--sp-1); flex-wrap: wrap; }
.filing-form select, .filing-form input { width: auto; min-width: 7rem; }
.agency-box .field { margin: 0; }
.rrn-box { font-variant-numeric: tabular-nums; }

/* 날짜 칸 — 글자 칸 + 달력 버튼(2026-10-15). 기본 날짜 편집기는 연도 4자리에서 넘어가지 않아 직접 만든다. */
.date-wrap { position: relative; display: flex; align-items: center; gap: var(--sp-1); width: 100%; }
/* 전역 input { width: 100% }가 묶음 전체를 먹어 버튼 자리가 없어진다 — 여기서 되돌린다. */
.date-wrap > input.date-in { flex: 1 1 auto; width: auto; min-width: 0; }
.date-pick { flex: 0 0 auto; padding: 8px 9px; line-height: 0; color: var(--muted); }
.date-pick:hover { color: var(--ink); }
/* 달력을 띄우는 숨은 칸 — 보이지는 않지만 그려져 있어야 showPicker가 그 자리에 달력을 띄운다. */
.date-pick-src { position: absolute; right: 36px; bottom: 0; width: 1px; height: 1px; min-height: 0;
  padding: 0; border: 0; opacity: 0; pointer-events: none; }
textarea { resize: vertical; }
button, .button { display: inline-block; min-height: 38px; padding: 8px 16px; border: 1px solid var(--field-line); border-radius: var(--r); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; font-weight: 500; }
button:hover, .button:hover { border-color: var(--accent-line); }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
button.danger, .button.danger { background: #fff; border-color: var(--danger); color: var(--danger); }
button.link { border: 0; min-height: 0; background: none; color: var(--accent); padding: 0; font-weight: 500; text-decoration: underline; }
button:focus-visible, .button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button[disabled] { color: var(--faint-text); cursor: default; }
.loading { padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; }
/* 사이드바 하나가 전역 요소를 전부 갖는다(설계 3.1) — 로고·영역 칩·메뉴·알림·거래처 전환·사용자.
   영역 구분은 바탕색이 맡는다: 고객 --side, 사무소 --side-office. 호버·구분선 색은 --hov·--ln으로 받는다. */
/* 본문이 길어도 사이드바는 제자리에 있는다 — 내리면 알림 종·사용자가 화면 밖으로 내려갔다(2026-10-13 피드백).
   높이를 화면에 맞추고 메뉴만 안에서 스크롤하므로 아래 블록(거래처 전환·알림·사용자)은 항상 바닥에 붙어 있다. */
.side { position: sticky; top: 0; align-self: start; height: 100vh;
  background: var(--side); color: #fff; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4) 12px var(--sp-3); --hov: var(--side-hover); --ln: var(--side-line); }
.side.office { background: var(--side-office); --hov: var(--side-office-hover); --ln: var(--side-office-line); }
.side-head { display: flex; align-items: center; gap: var(--sp-2); padding: 0 8px var(--sp-2); flex-wrap: wrap; }
/* 로고 락업 — 마크 + 틔움 + 아래 줄 TIUM. 브랜드 정체성이 T.I.U.M.에 있어 영문을 함께 적는다. */
.lockup { display: flex; align-items: center; gap: 9px; }
.lockup .lk-mark { height: 30px; width: auto; display: block; }
.lockup .lk-text { display: flex; flex-direction: column; line-height: 1; }
.lockup b { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.lockup i { font-style: normal; font-family: 'Inter', 'Pretendard', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: .18em; color: var(--on-dark-dim); margin-top: 3px; }
.side .area-tag { font-size: 11px; font-weight: 700; color: var(--on-dark); border: 1px solid var(--on-dark-dim);
  padding: 2px 9px; border-radius: var(--r-pill); }
.side-menu { display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.side a { display: flex; align-items: center; gap: var(--sp-2); padding: 9px 11px; border-radius: var(--r);
  color: var(--on-dark); text-decoration: none; font-size: 14px; }
.side a:hover { background: var(--hov); color: #fff; }
/* 활성 칩: 시안 원본의 리프 그린 + 흰 글자는 3.38:1로 미달이라 민트 바탕 + 짙은 글자(8.46:1)를 쓴다. */
.side a.active { background: var(--mint); color: var(--side); font-weight: 700; }
.side.office a.active { color: var(--side-office); }
.side .no { font-size: 11px; font-family: 'Inter', 'Pretendard', sans-serif; letter-spacing: .06em; color: var(--on-dark-dim); width: 18px; }
.side a.active .no { color: inherit; }
.side .soon-tag { margin-left: auto; font-size: 10px; color: var(--on-dark-dim); }
.side-foot { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--ln); display: flex; flex-direction: column; gap: var(--sp-2); }
.side-foot select { min-height: 34px; }
.side-co { font-size: 13px; color: var(--on-dark); padding: 0 8px; }
.side-user { display: flex; align-items: center; gap: var(--sp-2); padding: 0 8px; }
.side-user .who { font-size: 13px; color: var(--on-dark); margin-right: auto;
  /* 이름이 길면 두 줄로 접혀 아래 버튼을 밀어낸다 — 한 줄로 두고 넘치면 줄인다. */
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user button.link { color: var(--on-dark); font-size: 12.5px; }
.side-user button.link:hover { color: #fff; }
.content { padding: var(--sp-5) var(--sp-6) 60px; min-width: 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); }
/* 본문은 상자를 겹겹이 쌓지 않는다(설계 3.3) — 섹션은 제목 아래 굵은 선으로 나눈다.
   접었다 펴는 패널(details.card)과 폼 블록은 상자가 뜻이 있으므로 그대로 둔다. */
section.card { border: 0; border-radius: 0; padding: 0; margin-bottom: var(--sp-6); }
section.card > h3 { border-bottom: 2px solid var(--ink); padding-bottom: 9px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
/* 화면 머리 — .content의 여백을 음수 바깥여백으로 상쇄해 가장자리까지 채운다(설계 3.2). */
.hero { background: var(--accent); color: #fff; padding: var(--sp-7) var(--sp-6) var(--sp-6);
  margin: calc(var(--sp-5) * -1) calc(var(--sp-6) * -1) var(--sp-5); }
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.hero-text { min-width: 0; }
.hero h1 { margin: 0; font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -0.05em; color: #fff; }
.hero p { margin: 10px 0 0; font-size: 15px; color: var(--on-dark); max-width: 62ch; }
.hero-actions { display: flex; gap: var(--sp-2); flex: none; }
.hero button, .hero .button { background: #fff; color: var(--accent); border-color: #fff; font-weight: 700; }
.hero .kpis { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); margin-top: var(--sp-5); }
.hero .kpi { min-width: 0; }
.hero .kpi span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; color: var(--on-dark-dim); margin-bottom: 6px; }
.hero .kpi b { font-size: 27px; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.hero .kpi.up b { color: var(--mint); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.toolbar input[type=search], .toolbar select { max-width: 260px; }
.tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.tabs button, .tabs span { border-radius: var(--r-pill); min-height: 32px; padding: 4px 14px; font-size: 13px; }
.tabs .on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.tabs .disabled { color: var(--faint-text); border: 1px dashed var(--line); }
.notice { background: var(--warn-soft); border: 0; padding: var(--sp-4); border-radius: var(--r-lg); color: var(--warn); line-height: 1.55; }
.empty { padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--muted); }
.error-box, .form-error { background: var(--danger-soft); color: var(--danger); padding: 10px 14px; border-radius: var(--r); margin: var(--sp-2) 0; }

/* 섹션형 폼 — 8~10차 새 화면(참고자료 관리·근로계약서 작성)에서 쓴다. */
.form-section { padding-top: var(--sp-5); margin-top: var(--sp-5); border-top: 1px solid var(--line); }
.form-section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.form-section .fs-head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.form-section .fs-no { font-family: 'Inter', 'Pretendard', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
.form-section .fs-title { font-size: 16px; font-weight: 700; color: var(--accent); }
.form-section .fs-done { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ok); }
.form-section .fs-desc { margin: 0 0 var(--sp-4); font-size: 13px; color: var(--muted); }
.form-section .field { margin-bottom: var(--sp-4); }

/* 필터 접기 — 필터가 3개를 넘는 화면에서 쓴다. 접힌 채로도 몇 개가 걸려 있는지 보인다. */
.filter-box { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); margin-bottom: var(--sp-3); }
.filter-box > summary { cursor: pointer; padding: 9px var(--sp-3); font-weight: 700; font-size: 14px; }
.filter-box > summary .f-count { margin-left: var(--sp-2); font-weight: 400; font-size: 13px; color: var(--muted); }
.filter-box .toolbar { margin: 0; padding: 0 var(--sp-3) var(--sp-3); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 700; font-size: 12px; letter-spacing: .02em; border-bottom: 1px solid var(--rule); padding: 8px; }
td { border-bottom: 1px solid var(--line); padding: 8px; vertical-align: top; }
td.overdue { color: var(--danger); font-weight: 700; }
/* 목록 표는 조밀하게 — 사무소가 하루에 수백 건을 훑는 화면이다(설계 5절). */
.table-wrap table { font-size: 13px; }
.table-wrap th { font-size: 11px; padding: 7px 12px; background: var(--subtle); }
.table-wrap td { padding: 6px 12px; }
.table-wrap tbody tr:hover { background: var(--subtle); }
/* 인쇄에 쓰는 표는 종이에서 13px이 읽기 어려워 지금 크기를 지킨다. */
.payslip table, .attend-basis table, .wd-table, .contract-print-page table { font-size: 14px; }
.payslip td, .attend-basis td, .wd-table td { padding: 10px 8px; }
.unread { margin-left: 6px; font-size: 11px; background: var(--danger); color: #fff; border-radius: var(--r-pill); padding: 1px 7px; }

.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; background: var(--neutral-soft); color: var(--muted); }
.s-client_action, .s-client_confirm { background: var(--warn-soft); color: var(--warn); }
.s-submitted, .s-in_review { background: var(--office-soft); color: var(--office); }
.s-done { background: var(--ok-soft); color: var(--ok); }
.s-cancelled { background: var(--neutral-soft); color: var(--muted); }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: var(--r-sm); background: var(--neutral-soft); color: var(--muted); margin-left: 6px; }
.tag.req { background: var(--danger-soft); color: var(--danger); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.internal { background: var(--internal-soft); color: var(--internal); }

.field { display: block; margin-bottom: var(--sp-3); }
.field > span { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: var(--sp-1); }
.field small { color: var(--muted); }
.row { display: flex; gap: var(--sp-2); align-items: center; }
.copy-box { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); }
.auth { width: 100%; max-width: 380px; padding: var(--sp-6) var(--sp-5); }
/* 로그인 화면 락업 — 흰 바탕이라 글자는 --accent, 영문 줄은 --muted(브랜드 시스템 6절). */
.auth .auth-logo { margin-bottom: var(--sp-5); color: var(--accent); }
.auth .auth-logo .lk-mark { height: 42px; }
.auth .auth-logo b { font-size: 26px; }
.auth .auth-logo i { font-size: 12px; color: var(--muted); }
.auth h1 { font-size: 22px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.02em; color: var(--accent); }
.auth button.primary { width: 100%; margin-top: 6px; }

.detail .back { display: inline-block; margin-bottom: 10px; text-decoration: none; }
.meta-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) 22px; margin: 6px 0 var(--sp-4); }
.meta-row .meta span { display: block; font-size: 12px; color: var(--muted); }
/* 값이 숫자인 요약 줄 — 레이블보다 숫자가 먼저 읽히게 값만 키운다. */
.meta-row.nums .meta strong { font-size: 18px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.body-text { white-space: pre-wrap; }
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0 var(--sp-4); }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist > li { border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-3); margin-bottom: 10px; }
.files { margin: var(--sp-2) 0; padding-left: 18px; font-size: 13px; }
.upload { margin-top: var(--sp-2); }
.upload input { width: auto; border: 0; padding: 0; }
.comments .comment { border-left: 3px solid var(--line); padding: 6px var(--sp-3); margin-bottom: 10px; }
.comment.office { border-color: var(--office); }
.comment.client { border-color: var(--accent); }
.comment.internal { background: var(--internal-soft); }
.comment .meta { font-size: 12px; color: var(--muted); }
.comment .body { white-space: pre-wrap; }
.comment-form { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.comment-form .row select { max-width: 220px; }
.events { padding-left: 20px; font-size: 13px; }
.events .reason { color: var(--danger); }

.bell-wrap { position: relative; }
.bell { position: relative; }
.bell-count { position: absolute; top: -6px; right: -6px; background: var(--danger); color: #fff; font-size: 11px; border-radius: var(--r-pill); padding: 0 6px; }
.bell-panel { position: absolute; right: 0; top: 36px; width: 320px; max-width: calc(100vw - 24px); max-height: 420px; overflow: auto; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(26, 26, 26, .14); z-index: 10; }
.bell-head { display: flex; justify-content: space-between; padding: 10px var(--sp-3); border-bottom: 1px solid var(--line); font-weight: 700; }
.bell-item { display: block; padding: 10px var(--sp-3); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; }
.bell-item.unread { background: var(--accent-soft); }
.bell-item small { color: var(--muted); }
/* 벨은 사이드바 맨 아래에 있다 — 아래로 펼치면 화면 밖으로 나간다. 위로, 그리고 본문 쪽으로 펼친다. */
.side .bell-panel { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
/* 짙은 사이드바 위의 종 — 기본 버튼(흰 바탕)을 그대로 두면 흰 상자가 뜬다. */
.side .bell { background: transparent; border-color: var(--on-dark-dim); color: #fff; min-height: 32px; padding: 4px 9px; }
.side .bell:hover { background: var(--hov); border-color: #fff; }
.side .bell-head, .side .bell-item { color: var(--ink); }

.item-rows .row { margin-bottom: 6px; }
.item-rows .row label { white-space: nowrap; font-size: 13px; }
.item-rows .row input[type=checkbox] { width: auto; }

@media (max-width: 800px) {
  /* 1열 3행(상단바·메뉴·본문)이 된다 — 1fr을 본문 행에 줘야 메뉴 띠가 남은 높이를 먹지 않는다. */
  .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* 좁은 화면에서는 가로 띠다 — 높이를 풀고(100vh가 아니다) 위에 붙은 채로 둔다. */
  .side { flex-direction: row; align-items: center; overflow-x: auto; gap: var(--sp-1); padding: var(--sp-2); height: auto; z-index: 4; }
  .side-head { padding: 0 var(--sp-2) 0 0; flex-wrap: nowrap; }
  .side-menu { flex-direction: row; overflow: visible; }
  .side a { white-space: nowrap; flex: none; }
  .side-foot { margin-top: 0; padding-top: 0; border-top: 0; flex-direction: row; align-items: center; flex: none; }
  .side-foot select { min-height: 30px; width: auto; max-width: 150px; }
  .side-user { flex: none; }
  .side-user .who { display: none; }
  /* 좁은 화면에서는 영문 줄을 빼고 한 줄 락업으로 줄인다(설계 7절). */
  .lockup i { display: none; }
  /* 좁은 화면에서는 메뉴 띠가 가로로 스크롤되는 상자라 그 안에 있으면 패널이 잘린다 — 화면에 고정해 띄운다. */
  .side .bell-panel { position: fixed; inset: auto var(--sp-4) var(--sp-4) var(--sp-4); width: auto; max-width: none; max-height: 60vh; }
  .lockup .lk-mark { height: 24px; }
  .lockup b { font-size: 16px; }
  .side .soon-tag { display: none; }
  .content { padding: var(--sp-4); }
  .grid2 { grid-template-columns: 1fr; }
  .page-head { flex-wrap: wrap; }
  /* 히어로: 제목을 줄이고 수치는 두 칸 격자로. min-width: 0이 없으면 큰 숫자가 격자를 밀어 가로 넘침이 난다. */
  .hero { padding: var(--sp-5) var(--sp-4); margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4); }
  .hero h1 { font-size: 28px; letter-spacing: -0.04em; }
  .hero-top { flex-wrap: wrap; }
  .hero .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); }
  .hero .kpi b { font-size: 21px; }
  /* 표는 행을 카드로 바꾼다 — 가로 스크롤 안에 금액이 숨는 것을 막는다.
     열 이름은 ui.js의 labelCells()가 thead에서 읽어 각 칸의 data-l에 찍고 표에 .rowcards를 붙인다. */
  table.rowcards, table.rowcards tbody, table.rowcards tr, table.rowcards td { display: block; }
  table.rowcards thead { display: none; }
  table.rowcards tr { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
  table.rowcards td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); border: 0; padding: 2px 0; font-size: 13px; }
  table.rowcards td[data-l]::before { content: attr(data-l); flex: none; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
  table.rowcards small, table.rowcards .small { font-size: 12px; }
  table.rowcards td:empty { display: none; }
  table.rowcards input[type=checkbox] { width: auto; }
}

/* 2차: 세금신고·영수증 */
.r-submitted { background: var(--office-soft); color: var(--office); }
.r-approved { background: var(--ok-soft); color: var(--ok); }
.r-rejected { background: var(--danger-soft); color: var(--danger); }
.r-withdrawn { background: var(--neutral-soft); color: var(--muted); }
.tag.f-filed, .tag.p-confirmed { background: var(--ok-soft); color: var(--ok); }
.tag.p-unpaid { background: var(--danger-soft); color: var(--danger); }
.tag.p-client_reported { background: var(--warn-soft); color: var(--warn); }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.receipt-img { max-width: 100%; max-height: 480px; border: 1px solid var(--line); border-radius: var(--r); }
.files li.replaced { color: var(--muted); }
.tax-controls { margin-top: var(--sp-3); display: grid; gap: 10px; }
.tax-controls h4 { margin: var(--sp-2) 0 var(--sp-1); }
.summary-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.chip { background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px var(--sp-3); font-size: 13px; }
.chip strong { margin-left: 6px; font-variant-numeric: tabular-nums; }
.company-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-1) var(--sp-3); }
.company-checks input, .tax-controls input[type=file] { width: auto; }
.toolbar input[type=month] { max-width: 180px; }

/* 3차: 급여 — 작성 주체는 채움(고객)과 틴트(사무소)로 구분한다 */
.pr-draft { background: var(--office-soft); color: var(--office); }
.pr-client_review { background: var(--warn-soft); color: var(--warn); }
.pr-confirmed { background: var(--ok-soft); color: var(--ok); }
.pr-superseded { background: var(--neutral-soft); color: var(--muted); }
.pr-draft.pr-client-draft { background: var(--accent); color: #fff; }
details.payline { border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
details.payline summary { cursor: pointer; }
.payslip table { margin-top: var(--sp-2); }
/* 지급/공제 표의 줄 수가 달라도 행 높이가 벌어지지 않게 위로 붙인다(stretch 금지). */
.payslip .grid2 { align-items: start; }
.payslip .net { font-size: 18px; font-weight: 700; text-align: right; margin-top: var(--sp-3); font-variant-numeric: tabular-nums; }
/* 명세서의 근로시간 블록(근로기준법 시행령 제27조 제1항) — 인쇄에 들어가므로 14px를 지킨다. */
.payslip-hours { margin-top: var(--sp-4); border-top: 2px solid var(--ink); padding-top: var(--sp-3); }
.payslip-hours h4 { margin: 0 0 var(--sp-2); }
.ph-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
.ph-cell { font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.ph-cell span { color: var(--muted); font-size: 12px; }
.ph-cell strong { font-variant-numeric: tabular-nums; }
/* 항목 아래의 산출식 — 금액이 어디서 나왔는지 한 줄로 적는다. */
.pay-formula { display: block; margin-top: 2px; line-height: 1.4; }
/* 접히는 블록(직원 등록·CSV 일괄 등록·4대보험 신고 요청) — 열기 전에는 제목 한 줄만 차지한다. */
details.fold > summary, details.ir-panel > summary { cursor: pointer; font-weight: 700; font-size: 15px; }
details.fold[open] > summary, details.ir-panel[open] > summary { margin-bottom: var(--sp-3); }
/* 월 단위 현황 줄(기획 B-2) — 수치 아래에 전월 대비를 작게 적는다. 색은 "늘었다/줄었다"가 아니라
   읽기 보조이므로 중립색을 쓴다(금액의 증감은 좋고 나쁨이 아니다). */
.month-sum .meta { min-width: 150px; }
.month-sum .delta { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 고른 직원 항목별 합계(기획 B-3) */
.item-total-table td, .item-total-table th { font-size: 13px; }
.payline > summary input.pick-line { width: auto; margin-right: var(--sp-2); }
.item-totals { margin-top: var(--sp-2); }
/* 묶음 소계(기획 B-4) — 줄 편집기 머리 아래 두 줄. */
.group-line { display: flex; flex-wrap: wrap; gap: 2px var(--sp-4); margin-bottom: var(--sp-3); }
.group-line small { line-height: 1.45; }
/* CSV 오류 표(기획 C-2) */
.csv-error-table td, .csv-error-table th { font-size: 13px; }
.csv-error-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 공휴일 날짜 + 요일(2026-10-14). 토·일은 눈에 띄게 둔다 — 주말에 걸친 공휴일을 확정할 때 보게 된다.
   색은 토큰만 쓴다(일요일은 danger, 토요일은 accent — 달력 관례에 맞추되 새 색을 만들지 않는다). */
.hd-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-wd { margin-left: 4px; color: var(--muted); }
.hd-wd.sun { color: var(--danger); font-weight: 700; }
.hd-wd.sat { color: var(--accent); font-weight: 700; }
.holiday-table thead input[type=checkbox], .holiday-table td input[type=checkbox] { width: auto; }
.pick-count { align-self: center; }
.warn-line { color: var(--warn); }
@media (max-width: 800px) { .ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
label.perm { white-space: nowrap; font-size: 13px; }
label.perm input { width: auto; }
.csv-errors { color: var(--danger); font-size: 13px; }
.line-editor .item-rows input { max-width: 180px; }
.line-editor .item-rows select { max-width: 180px; }
.line-editor .item-rows .row { flex-wrap: wrap; }
tr.muted td { color: var(--muted); }
/* 인쇄 스타일은 파일 끝 "7차: 인쇄" 절에 모았다(뒤에 오는 상태 색 규칙을 이기도록). */

/* 4차: 법무지원(등기) */
.lg-preparing { background: var(--neutral-soft); color: var(--muted); }
.lg-quote { background: var(--warn-soft); color: var(--warn); }
.lg-ready, .lg-filed { background: var(--office-soft); color: var(--office); }
.lg-completed { background: var(--ok-soft); color: var(--ok); }
.lg-cancelled { background: var(--neutral-soft); color: var(--muted); }
.tag.q-proposed { background: var(--warn-soft); color: var(--warn); }
.tag.q-agreed, .tag.lp-confirmed { background: var(--ok-soft); color: var(--ok); }
.tag.lp-unpaid { background: var(--danger-soft); color: var(--danger); }
.legal-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 10px 0; }
.legal-steps li { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--neutral-soft); color: var(--muted); font-size: 13px; }
.legal-steps li.done { background: var(--ok-soft); color: var(--ok); }
.legal-steps li.current { background: var(--accent); color: #fff; font-weight: 700; }
.quote tr.total th { border-top: 2px solid var(--rule); }
.legal-controls { margin-top: var(--sp-3); display: grid; gap: 10px; }
.legal-controls input[type=file], .legal-items input[type=checkbox] { width: auto; }
.quote-editor .item-rows input { max-width: 220px; }
.legal-items ul { padding-left: 18px; }
.legal-controls .row, .legal-items .row, .card > .row { flex-wrap: wrap; }

/* 5차: 거래내역 */
.txn-filters .date-wrap { max-width: 190px; }
.txn-filters select, .bulk-bar select { max-width: 200px; }
.bulk-bar input[name=fixNote] { max-width: 280px; }
.txn-table td { vertical-align: middle; }
.txn-table td:nth-child(2) { white-space: nowrap; }
.txn-table input[type=checkbox] { width: auto; }
tr.txn-detail > td { background: var(--bg); }
.txn-panel h4 { margin: var(--sp-2) 0; }
table.orig th { width: 110px; }
.tag.fx-need { background: var(--danger-soft); color: var(--danger); }
.tag.fx-done { background: var(--ok-soft); color: var(--ok); }
.pager { justify-content: center; margin-top: 10px; }
.chip-box .chip button { margin-left: var(--sp-1); min-height: 0; padding: 0 4px; }
.txn-add summary { cursor: pointer; font-weight: 700; }
.txn-add-form { margin-top: var(--sp-3); }
label.check { display: flex; gap: 6px; align-items: center; margin-bottom: var(--sp-3); font-size: 14px; }
label.check input, .txn-upload input[type=file] { width: auto; }
/* 체크 항목 여러 개를 한 줄에 흘려 놓는다(좁으면 다음 줄로). 항목 사이 간격은 목록이 맡는다. */
.check-list { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2); }
/* 급여대장 항목 한 줄 — 입력 줄 아래에 적용 요율·기준일(또는 자동 계산을 못 하는 이유)을 적는다. */
.item-row { margin-bottom: var(--sp-3); }
.item-row > .row { margin-bottom: 0; }
.item-why { display: block; margin-top: 3px; line-height: 1.45; }
/* 과세 여부 칸은 이름 밖의 항목(직접 입력)에서만 보인다. 좁게 둬서 금액 칸을 밀지 않는다. */
.line-editor .item-rows select.item-tax { max-width: 110px; }
/* 보수월액 한 줄 — 과세 합계·비과세 제외·미정 경고를 한 줄로 적는다. */
.tax-line { display: block; margin-bottom: var(--sp-3); line-height: 1.45; }
/* 명세서의 지급 구분 태그. 비과세는 중립, 미지정은 경고색(사람이 정해야 한다는 신호). */
.tag.nontax { background: var(--accent-soft); color: var(--accent); margin-left: 0; }
.tag.t-true { background: var(--neutral-soft); color: var(--muted); margin-left: 0; }
.tag.t-null { background: var(--warn-soft); color: var(--warn); margin-left: 0; }
.tax-sum { margin-top: var(--sp-2); }
/* 4대보험 적용 여부 네 칸 — 미적용으로 두면 공제 자동 계산이 그 항목을 계산하지 않는다. */
.ins-grid { margin-top: var(--sp-2); }
/* 주민(외국인)등록번호 — 목록·폼에는 마스크만 나온다. 숫자를 세로로 읽기 쉽게 tabular-nums를 쓴다. */
.rrn-mask { font-variant-numeric: tabular-nums; }
.rrn-msg { margin-left: var(--sp-2); font-variant-numeric: tabular-nums; }
.employee-form input[name=rrn] { max-width: 180px; }
/* `.field` 안의 체크박스 라벨은 제 줄을 쓴다 — inline이면 뒤 설명(small)이 같은 줄에 흘러
   한 문장처럼 읽힌다("저장된 번호 지우기4대보험·…", "…줄에 넣습니다월급제 직원만…"). */
.field > label.perm { display: block; margin-top: var(--sp-2); }
/* 4대보험 신고 요청 — 상태 태그 세 가지와 대상 직원 줄. */
.tag.ir-requested { background: var(--warn-soft); color: var(--warn); }
.tag.ir-filed { background: var(--ok-soft); color: var(--ok); }
.tag.ir-canceled { background: var(--neutral-soft); color: var(--muted); }
.ir-target { display: block; margin-bottom: 4px; }
.ir-target.off { color: var(--muted); }
.ir-targets { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-2); }
small.block { display: block; margin-bottom: var(--sp-3); line-height: 1.45; }
/* 거래처 목록 — 한 줄이 한 거래처이고 "관리"를 누르면 그 아래 줄이 펼쳐진다(거래내역 상세 줄과 같은 결). */
.company-table td { vertical-align: middle; }
.company-row td:last-child { text-align: right; white-space: nowrap; }
.company-detail > td { background: var(--subtle); padding: var(--sp-4) var(--sp-5); }
.manage-panel > details { margin-top: var(--sp-3); }
.check-list label.check { margin-bottom: 0; }
/* 선택 상자 + 버튼 한 줄: 버튼 글자가 두 줄로 접히지 않게 버튼 폭을 지킨다. */
.row.keep-btn > button { flex: none; white-space: nowrap; }
.account-form .row, .txn-upload { flex-wrap: wrap; }
.account-form .row input[name=last4] { max-width: 110px; }
.account-form .row select, .txn-upload select { max-width: 260px; }
.import-result { margin-top: 10px; }
.dup-box { margin: var(--sp-2) 0; display: grid; gap: var(--sp-2); justify-items: start; }

/* 5차: 리포트·자동 집계 */
.badge.unconfirmed, .badge.rb-estimate { background: var(--warn-soft); color: var(--warn); }
.badge.rb-final { background: var(--ok-soft); color: var(--ok); }
.txn-summary > .row { flex-wrap: wrap; margin-bottom: var(--sp-1); }
.txn-summary h3 { margin: 0; }
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); }
.summary-cards .card { margin-bottom: 0; min-width: 0; }
.fig-table th { font-size: 13px; color: var(--ink); font-weight: 400; }
.summary-card.cash .fig-table th { white-space: nowrap; }
.fig-table td.num .bar { margin-top: var(--sp-1); }
.fig-table tr.total th, .fig-table tr.total td { font-weight: 700; border-top: 2px solid var(--rule); }
.bar { background: var(--neutral-soft); border-radius: var(--r-sm); height: 8px; min-width: 50px; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-sm); }
a.fig { font-weight: 700; text-decoration: none; border-bottom: 1px dashed var(--accent); font-variant-numeric: tabular-nums; }
ul.asof { padding-left: 18px; margin: 6px 0 0; }
.report-summary th { width: 50%; color: var(--ink); font-size: 14px; }

/* 5차: 사무소 리포트 편집 */
.badge.rs-draft { background: var(--office-soft); color: var(--office); }
.badge.rs-published { background: var(--ok-soft); color: var(--ok); }
.badge.rs-unpublished { background: var(--neutral-soft); color: var(--muted); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.summary-editor .row input { max-width: 240px; }
.summary-editor .row, .report-publish .row, .report-upload { flex-wrap: wrap; }
.report-publish { display: grid; gap: 10px; margin-top: 10px; }
.report-upload input[type=file] { width: auto; }
@media (max-width: 800px) { .grid3 { grid-template-columns: 1fr; } }

.page-head > select { width: auto; max-width: 260px; }

/* 6차: 회사·사용자 설정, 금융·인증 연결 관리 */
.info-table th { width: 34%; color: var(--muted); font-size: 13px; font-weight: 700; }
.change-request { margin-top: var(--sp-3); }
.cr-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-1) var(--sp-3); }
.cr-fields input, .members-table input[type=checkbox], .profile-form input[type=checkbox] { width: auto; }
.member-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.member-actions button { min-height: 30px; padding: 3px 10px; font-size: 13px; }
.tag.last-owner { background: var(--warn-soft); color: var(--warn); }
.tag.locked { background: var(--danger-soft); color: var(--danger); }
.tag.locked .small { color: inherit; }
.new-pw { margin-top: 10px; }
.staff-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.staff-actions button { min-height: 30px; padding: 3px 10px; font-size: 13px; }
.invite-list .cancel-invite { margin-left: var(--sp-2); font-size: 13px; }
.history-row { border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; }
.history-row ul { margin: var(--sp-1) 0 0; padding-left: 18px; }
#history-more { margin-top: 10px; }
.conn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-3); }
.conn-cards .card { margin-bottom: 0; min-width: 0; }
.conn-card h3 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.conn-note { white-space: pre-wrap; margin: 6px 0; }
.badge.cm-upload, .badge.cm-office { background: var(--ok-soft); color: var(--ok); }
.badge.cm-planned { background: var(--office-soft); color: var(--office); }
.badge.cm-none, .badge.cm-unset { background: var(--neutral-soft); color: var(--muted); }
.badge.stale { background: var(--danger-soft); color: var(--danger); }
.conn-card th, .conn-card td { padding: 6px; font-size: 13px; }

/* 6차: 사무소 거래처 정보 */
.profile-form .grid2 { gap: 0 var(--sp-4); }
.profile-form .perm { display: block; margin-bottom: var(--sp-2); }
.tag.private { background: var(--internal-soft); color: var(--internal); margin-left: 0; }
.conn-editor { flex-wrap: wrap; margin-top: 10px; }
.conn-editor select { max-width: 200px; }
.conn-editor input { max-width: 320px; }
.detail-link { margin-left: 10px; font-weight: 400; }

/* 8차: 참고자료(요율·최저임금·노동법 안내) */
.ref-sets { display: grid; gap: var(--sp-4); }
.ref-set .ref-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: var(--sp-2); }
.ref-table th, .ref-table td { font-size: 13px; }
.ref-table td.num { text-align: right; white-space: nowrap; font-family: 'Inter', 'Pretendard', sans-serif; }
.ref-disclaimer { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); color: var(--accent); font-size: 13px; margin-top: var(--sp-5); }
.ref-disclaimer p { margin: var(--sp-1) 0 0; }
.ref-note { border-bottom: 1px solid var(--line); padding: var(--sp-3) 0; }
.ref-note:last-child { border-bottom: 0; padding-bottom: 0; }
.ref-note .rn-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ref-note .rn-body { margin: 6px 0 0; }
.ref-note .rn-check { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.badge.u5-yes { background: var(--ok-soft); color: var(--ok); }
.badge.u5-no { background: var(--danger-soft); color: var(--danger); }
.badge.u5-partial { background: var(--warn-soft); color: var(--warn); }
.badge.u5-unknown { background: var(--neutral-soft); color: var(--muted); }
.badge.rf-draft { background: var(--office-soft); color: var(--office); }
.badge.rf-published { background: var(--ok-soft); color: var(--ok); }
.tag.law-check { background: var(--warn-soft); color: var(--warn); }
.ref-editor .grid2 { gap: 0 var(--sp-4); }
.ref-editor textarea { max-width: 640px; }
.ref-editor .perm { display: block; font-size: 13px; }
.ref-item-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 100px 130px minmax(0, 1.2fr); gap: var(--sp-2); align-items: end; margin-bottom: 6px; }
.ref-item-row label.small { display: block; color: var(--muted); }
.ref-item-row label.small input { margin-top: 2px; }
/* 단위는 코드 상수 고정이라 읽기 전용 글자다 — 값 입력칸(min-height 38px, padding 8px)의 글자 줄에 맞춘다. */
.ref-item-row .item-unit { padding-bottom: 9px; }
@media (max-width: 800px) { .ref-item-row .item-unit { padding-bottom: 0; } }
@media (max-width: 800px) { .ref-item-row { grid-template-columns: 1fr; align-items: stretch; } }

/* 7차: 인쇄 — 급여명세서·업무 상세를 흑백으로 뽑는다 */
.print-head { display: none; }
@page { margin: 14mm; }
@media print {
  /* 히어로는 짙은 면이라 종이에서 통째로 검게 나온다 — 숨긴다. 인쇄물의 제목은 .print-head가 들고 있다. */
  .hero, .side, .no-print, .back, .bell-wrap, .actions, .comment-form, .toolbar, .tabs,
  .upload, .tax-controls, .legal-controls, .change-request, button, .button { display: none !important; }
  .layout { display: block; }
  .content { padding: 0; }
  body { background: #fff; color: var(--ink); font-size: 11pt; }
  .card { border: 0; padding: 0; margin-bottom: var(--sp-4); }
  .print-head { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-2); margin-bottom: var(--sp-4); border-bottom: 2px solid var(--ink); }
  .print-head img { height: 21px; width: auto; }
  .print-head .ph-brand { display: flex; align-items: center; gap: 5px; font-size: 12pt; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
  .print-head .pi { font-size: 10pt; color: var(--ink); }
  .print-head .pi.at { margin-left: auto; color: var(--muted); }
  details.payline .print-head { display: none; }
  /* 2-클래스 상태 규칙(.pr-draft.pr-client-draft·.badge.rb-estimate 등 29종)과 .legal-steps li는 특이도가 더 높아
     !important 없이는 이 초기화를 이긴다. 인쇄에서 색 배경이 남지 않게 한다 — design-check가 computed style로 실측한다. */
  .badge, .tag, .legal-steps li { border: 1px solid var(--rule) !important; background: #fff !important; color: var(--ink) !important; font-weight: 700; }
  .comment.internal { background: #fff !important; }
  /* 섹션 구분선과 안내문도 종이에서는 얇은 검정으로 — 짙은 면·색 바탕을 남기지 않는다. */
  section.card > h3 { border-bottom: 1px solid var(--ink) !important; color: var(--ink) !important; }
  .notice { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; }
  th { color: var(--ink); border-bottom: 1px solid var(--ink); }
  thead { display: table-header-group; }
  tr, .checklist > li, details.payline, .card { break-inside: avoid; }
  a { color: var(--ink); text-decoration: none; }
  /* 인쇄 폭(약 688px)은 모바일 분기에 들어가 .grid2가 1열이 된다. 명세서는 지급·공제를 종이에 나란히 둔다. */
  .payslip .grid2 { grid-template-columns: 1fr 1fr !important; align-items: start; }
  .ph-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  /* 인쇄 폭(약 688px)은 모바일 분기에 들어가 표가 카드로 바뀐다. **명세서는 종이에서 표를 지킨다** —
     카드로 나오면 한 항목이 세 줄을 쓰고 금액 열이 따로 서지 않아 읽기 어렵다(2026-10-13 인쇄 실측). */
  .payslip table.rowcards, .payslip table.rowcards tbody { display: table !important; }
  .payslip table.rowcards tbody { display: table-row-group !important; }
  .payslip table.rowcards thead { display: table-header-group !important; }
  .payslip table.rowcards tr { display: table-row !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; }
  .payslip table.rowcards td { display: table-cell !important; font-size: 14px !important; padding: 10px 8px !important; }
  .payslip table.rowcards td[data-l]::before { content: none !important; }
  .payslip table.rowcards td:empty { display: table-cell !important; }
}

/* 9차: 업종·프리셋과 표준근로계약서 */
.badge.advisory { background: var(--office-soft); color: var(--office); }
.badge.lc-draft { background: var(--neutral-soft); color: var(--muted); }
.badge.lc-requested { background: var(--warn-soft); color: var(--warn); }
.badge.lc-signed { background: var(--ok-soft); color: var(--ok); }
.badge.lc-void { background: var(--danger-soft); color: var(--danger); }
.badge.lc-superseded { background: var(--neutral-soft); color: var(--muted); }
.badge.lc-office { background: var(--office-soft); color: var(--office); }
.duty-notice { background: var(--warn-soft); border-left: 3px solid var(--warn); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); color: var(--warn); font-size: 13px; margin-bottom: var(--sp-4); }
.duty-notice p { margin: var(--sp-1) 0 0; }
.preset-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); }
.preset-cards .card { margin-bottom: 0; min-width: 0; }
.preset-card h3, .preset-edit h3 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.preset-notes { white-space: pre-wrap; margin: var(--sp-2) 0 0; font-size: 13px; }
.legal-table th:last-child, .legal-table td:last-child { white-space: nowrap; }
.industry-form { margin-top: var(--sp-3); }
.detail-row { display: grid; grid-template-columns: 120px 110px minmax(0, 1fr) 90px 70px auto; gap: var(--sp-2); align-items: end; border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; }
.detail-row:last-child { border-bottom: 0; }
.detail-actions { display: flex; gap: 6px; }
.detail-actions button, .preset-actions button { min-height: 30px; padding: 3px 10px; font-size: 13px; }
.preset-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-2); }
@media (max-width: 800px) { .detail-row { grid-template-columns: 1fr; align-items: stretch; } }
.contract-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--sp-3); }
.contract-list td, .contract-list th { font-size: 13px; }
.contract-form .card { margin-bottom: var(--sp-4); }
.form-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.week-hours { display: grid; gap: 4px; }
.wh-row { display: flex; align-items: center; gap: 6px; }
.wh-row .wh-day { width: 20px; font-size: 13px; color: var(--muted); }
.wh-row input { max-width: 120px; }
.file-list { margin: 0; padding-left: 18px; }
.file-list li { padding: 3px 0; }
.event-list { margin: 0; padding-left: 18px; font-size: 13px; }
.consent-text { background: var(--accent-soft); border-radius: var(--r-sm); padding: var(--sp-3); font-size: 13px; color: var(--accent); }
.ok-text { color: var(--ok); }
.req-mark { color: var(--danger); margin-left: 2px; }
.contract-print th { width: 34%; color: var(--muted); font-size: 13px; font-weight: 700; vertical-align: top; }
.contract-print td { font-size: 13px; }
.contract-print td.blank { border-bottom: 1px solid var(--rule); height: 26px; }
/* 서식 본문의 고정 조항(교부 의무·성실 이행·공휴일) — 인쇄본에서도 번호가 보이게 ol을 쓴다. */
.clause-list { margin: 0; padding-left: 20px; font-size: 13px; }
.clause-list li { margin: var(--sp-2) 0; }
.sign-block h4 { margin-top: 0; }
.sign-block p { margin: var(--sp-2) 0; }
.print-foot { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px; }
.print-foot p { margin: var(--sp-1) 0; }
.contract-print-page .print-head { display: none; }
@media print {
  .contract-print-page .print-head { display: flex; }
  .contract-print-page .duty-notice, .contract-print-page .notice { background: #fff !important; color: var(--ink) !important; border-left: 2px solid var(--ink); }
  .contract-print-page .consent-text { background: #fff !important; color: var(--ink) !important; }
  /* 지문 불일치 경고는 종이에도 남아야 한다 — 색은 빼고 굵은 테두리로 눈에 띄게 한다. */
  .contract-print-page .error-box { background: #fff !important; color: var(--ink) !important; border: 2px solid var(--ink); font-weight: 700; }
  .contract-print-page .card { break-inside: avoid; }
}

/* 12차: 근태 관리 — 직원 화면은 큰 버튼 하나(모바일 우선), 사업주 화면은 주간 격자 */
.punch-card { text-align: center; }
/* 큰 버튼: 높이 64px 이상·폭 80%는 설계 9.2의 기준이다(스모크가 390px에서 실측한다). */
.punch-btn { min-height: 64px; width: 80%; max-width: 420px; margin: var(--sp-4) auto; display: block; font-size: 22px; font-weight: 700; border-radius: var(--r-lg); background: var(--accent); border-color: var(--accent); color: #fff; }
.punch-btn.out { background: var(--ok); border-color: var(--ok); }
.punch-btn[disabled] { background: var(--neutral-soft); border-color: var(--field-line); color: var(--muted); }
.punch-done { min-height: 22px; font-weight: 700; color: var(--ok); }
.geo-hint { margin: var(--sp-2) 0 0; }
.attend-alert { background: var(--danger-soft); border-left: 3px solid var(--danger); color: var(--danger); font-weight: 700; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); margin-bottom: var(--sp-3); }
.today-punches { margin-top: var(--sp-3); text-align: left; }
.punch-line { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.punch-line:last-child { border-bottom: 0; }
.today-total { margin-top: var(--sp-2); font-weight: 700; }
.my-week td, .my-week th { font-size: 13px; }
.attend-request-form { margin-top: var(--sp-2); }
/* 수정 요청의 구간 줄 — 'fix'는 그 날 구간 전부를 담으므로 줄이 여러 개가 된다(모바일에서 줄바꿈). */
.req-segs { margin: var(--sp-2) 0; text-align: left; }
.req-segs .seg-row label { display: inline-flex; align-items: center; gap: 4px; }

.attend-grid th, .attend-grid td { font-size: 13px; padding: 4px; vertical-align: top; }
.attend-grid th:first-child, .attend-grid td:first-child { white-space: nowrap; }
.attend-cell { min-width: 92px; }
.attend-cell.flagged { background: var(--warn-soft); }
.cell-btn { width: 100%; min-height: 44px; padding: 4px 6px; text-align: left; background: transparent; border: 1px dashed var(--line); border-radius: var(--r-sm); font-size: 12px; }
.cell-btn:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.cell-time { font-weight: 700; }
.tag.attend-flag { background: var(--warn-soft); color: var(--warn); }
.badge.aw-pending, .badge.ad-submitted { background: var(--warn-soft); color: var(--warn); }
.badge.aw-approved, .badge.ad-approved, .badge.ar-applied { background: var(--ok-soft); color: var(--ok); }
.badge.aw-rejected, .badge.ad-rejected, .badge.ar-declined { background: var(--danger-soft); color: var(--danger); }
.badge.ad-open, .badge.ar-pending { background: var(--office-soft); color: var(--office); }
.badge.ar-withdrawn, .badge.aw-none { background: var(--neutral-soft); color: var(--muted); }

.day-panel .seg-list { margin: var(--sp-2) 0; }
.seg-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.seg-row:last-child { border-bottom: 0; }
.seg-row input[type=time] { max-width: 130px; }
.seg-row input[type=number] { max-width: 90px; }
.seg-row input[type=checkbox] { width: auto; }
.seg-no { width: 22px; font-weight: 700; color: var(--muted); }
.seg-actions { display: flex; gap: 6px; margin-left: auto; }
.seg-actions button { min-height: 30px; padding: 3px 10px; font-size: 13px; }
.day-meta { margin-top: var(--sp-3); }
.day-edits { margin-top: var(--sp-3); font-size: 13px; }
.attend-requests td, .attend-requests th, .attend-summary td, .attend-summary th { font-size: 13px; }
@media (max-width: 800px) {
  .punch-btn { width: 100%; }
  .seg-actions { margin-left: 0; }
}

/* 12차 근태 2차: 공개 타각 화면 · QR 인쇄 · 토큰·PIN 표 */
.attend-public-page { min-height: 100vh; display: grid; place-items: start center; padding: var(--sp-4); }
.attend-public-card { width: 100%; max-width: 440px; padding: var(--sp-5) var(--sp-4); }
.attend-public h1 { font-size: 24px; font-weight: 700; margin: 0 0 2px; letter-spacing: -0.02em; color: var(--accent); }
.attend-public .punch-card { border: 0; padding: 0; margin: var(--sp-4) 0 0; }
.attend-public .pick-form { margin-top: var(--sp-4); }
.attend-public .pick-form button.primary { width: 100%; min-height: 52px; margin-top: var(--sp-3); font-size: 17px; }
.attend-public details { margin-top: var(--sp-3); }
.consent-panel { background: var(--accent-soft); border-color: var(--accent-line); margin-bottom: var(--sp-3); }
.consent-panel .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.consent-panel .row button { flex: 1 1 140px; min-height: 44px; }
.consent-withdraw { margin-top: var(--sp-2); }
.badge.at-live { background: var(--ok-soft); color: var(--ok); }
.badge.at-revoked { background: var(--danger-soft); color: var(--danger); }
.badge.at-none { background: var(--neutral-soft); color: var(--muted); }
.token-table td, .token-table th { font-size: 13px; vertical-align: middle; }
.token-table .row { display: flex; gap: 6px; flex-wrap: wrap; }
.token-table button { min-height: 30px; padding: 3px 10px; font-size: 13px; }
.token-table input { max-width: 120px; }
.fresh-link { background: var(--accent-soft); border-color: var(--accent-line); }
/* QR 한 장: A4 가운데에 변 100mm. 색은 토큰으로만 쓴다(흰 바탕 + 순수 검정 모듈). */
.qr-sheet { text-align: center; }
.qr-sheet .qr-head h1 { font-size: 26px; margin: var(--sp-2) 0; color: var(--ink); }
.qr-company { font-size: 18px; font-weight: 700; color: var(--accent); }
.qr-label { font-size: 15px; color: var(--muted); }
.qr-box { display: inline-block; padding: var(--sp-3); background: #fff; border: 1px dashed var(--rule); margin: var(--sp-3) 0; }
.qr-code { display: block; background: #fff; }
.qr-code rect { fill: var(--qr-ink); }
.qr-code rect.qr-bg { fill: #fff; }
.qr-url { font-size: 13px; color: var(--muted); margin: 0; }
.qr-url-text { font-family: 'Inter', monospace; font-size: 12px; word-break: break-all; margin: 4px 0 var(--sp-3); }
.qr-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); font-size: 11px; color: var(--muted); }
@media (max-width: 800px) {
  .qr-box { padding: var(--sp-2); }
  .qr-code { width: 100%; height: auto; max-width: 320px; }
}
/* 근태 2.5차: 근무일수 달력·합계표와 공휴일 배지. 색은 :root 토큰만 쓴다(scripts/contrast.cjs). */
.wd-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.wd-head { text-align: center; font-size: 12px; color: var(--muted); padding: var(--sp-1) 0; }
.wd-cell { min-height: 56px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-1); font-size: 12px; background: var(--card); }
.wd-cell.wd-blank { border: 0; background: transparent; min-height: 0; }
.wd-date { font-weight: 600; }
.wd-scheduled { background: var(--card); }
.wd-off { background: var(--bg); color: var(--muted); }
.wd-holiday { background: var(--accent-soft); }
.wd-outside { opacity: 0.55; }
.wd-undecided { border-style: dashed; border-color: var(--warn); }
.wd-hol { color: var(--accent); font-weight: 600; }
.wd-kind { background: var(--accent-soft); color: var(--accent); }
.wd-undecided-badge { background: var(--warn-soft); color: var(--warn); }
.wd-decision { margin: var(--sp-3) 0; }
.wd-table td, .wd-table th { font-size: 13px; }
.wd-table tr.wd-picked { background: var(--accent-soft); }
.wd-check { color: var(--muted); }
.holiday-table td, .holiday-table th { font-size: 13px; }
.hk-statutory { background: var(--accent-soft); color: var(--accent); }
.hk-substitute { background: var(--ok-soft); color: var(--ok); }
.hk-temporary { background: var(--warn-soft); color: var(--warn); }
.hk-custom { background: var(--neutral-soft); color: var(--ink); }
.hk-unknown { background: var(--bg); color: var(--muted); }
/* 근태 3차: 월 집계·기준 배지·산정 근거 */
.wd-basis { margin: var(--sp-2) 0; }
.wd-preset { background: var(--ok-soft); color: var(--ok); }
.wd-deviation { background: var(--warn-soft); color: var(--warn); }
.wd-closed { background: var(--accent-soft); color: var(--accent); }
.rule-item { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.rule-item:last-of-type { border-bottom: 0; }
.basis-table { width: 100%; }
.basis-table th { text-align: left; white-space: nowrap; color: var(--muted); font-weight: 500; }
.basis-table td, .basis-table th { font-size: 13px; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line); }
@media (max-width: 800px) {
  /* 390px에서 7열 달력은 한 칸이 48px 남짓이다 — 글자를 줄이고 공휴일 이름은 두 줄까지 접는다. */
  .wd-cell { min-height: 48px; font-size: 11px; }
  .wd-cal { gap: 2px; }
}
@media print {
  /* 인쇄 폭(약 688px)은 모바일 분기에 들어간다 — QR은 변 길이를 mm로 되돌려 규격대로 찍는다. */
  .qr-print-page .qr-code { width: 100mm; height: 100mm; max-width: none; }
  .qr-print-page .qr-box { border-color: var(--rule); }
  .qr-sheet { break-inside: avoid; }
  /* 근무일수 인쇄: 달력·표를 흑백으로, 버튼은 빼고 한 장에 맞춘다(급여명세서와 같은 규칙). */
  .wd-cal, .wd-table { break-inside: avoid; }
  /* 산정 근거 인쇄: 표를 한 장에 맞추고 배지는 흑백으로(공통 규칙이 이미 배지를 흰 바탕으로 바꾼다). */
  .attend-basis .basis-table { break-inside: avoid; }
  .attend-basis .table-wrap { overflow-x: visible; }
  .attend-basis .basis-table td, .attend-basis .basis-table th { font-size: 9pt; padding: 2px 4px; }
  /* 합계표는 12열이라 688px 인쇄 폭을 넘는다 — 가로 스크롤을 풀고(종이에는 스크롤이 없다) 글자를 줄여 다 찍히게 한다. */
  .attend-days .table-wrap { overflow-x: visible; }
  .wd-table { width: 100%; table-layout: fixed; }
  .wd-table td, .wd-table th { font-size: 8pt; padding: 2px 3px; word-break: keep-all; }
  /* 이름 칸의 보조 태그(회사 기본값·퇴사일)만 숨긴다 — "미승인 N일 제외"는 숫자를 읽는 데 필요해 남긴다. */
  .wd-table td:first-child .tag { display: none; }
  .wd-cell { background: #fff !important; color: var(--ink) !important; border-color: var(--ink) !important; }
  .wd-holiday { background: var(--neutral-soft) !important; }
  .wd-undecided { border-style: dashed !important; }
  .wd-kind, .wd-undecided-badge, .wd-preset, .wd-deviation, .wd-closed, .hk-statutory, .hk-substitute, .hk-temporary, .hk-custom, .hk-unknown {
    background: #fff !important; color: var(--ink) !important; border: 1px solid var(--ink) !important;
  }
}

/* ── 2026-10-31 자비스 비교 개선(기획 docs/2026-10-31-자비스비교-화면개선-기획.md) ── */
/* A. 대시보드 6개월 추이 */
.trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 800px) { .trend-grid { grid-template-columns: 1fr; } }
.trend-chart { margin: 0; min-width: 0; }
.trend-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.tc-legend { display: flex; gap: var(--sp-3); font-size: 13px; color: var(--muted); }
.tc-legend span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.tc-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.tc-svg { display: block; width: 100%; height: auto; }
.tc-line { stroke: var(--line); stroke-width: 1; }
.tc-base { stroke: var(--rule); stroke-width: 1; }
.tc-axis { fill: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.tc-none { fill: var(--muted); font-size: 12px; }
.tc-target { fill: transparent; }
.tc-s1 { fill: var(--chart-1); background: var(--chart-1); }
.tc-s2 { fill: var(--chart-2); background: var(--chart-2); }
.tc-hit:hover .tc-bar, .tc-hit:focus .tc-bar { opacity: .8; }
.tc-hit:focus { outline: none; }
.tc-hit:focus-visible .tc-target { stroke: var(--accent); stroke-width: 2; }
.tc-table { margin-top: var(--sp-2); font-size: 13px; }
.tc-table summary { cursor: pointer; color: var(--accent); }
.trend-empty { padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--muted); background: var(--subtle); border-radius: var(--r); }
.trend-empty .button { margin-top: var(--sp-2); }

/* B. 업무 차례 묶음 */
.turn-groups { display: grid; gap: var(--sp-5); }
.turn-group h4 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.turn-count { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: var(--r-pill); text-align: center; font-size: 12px;
  background: var(--neutral-soft); color: var(--ink); font-variant-numeric: tabular-nums; }
.turn-group.mine .turn-count { background: var(--accent-soft); color: var(--accent); }

/* C. 사무소 거래처 현황 */
.overview-table td.ov-zero { color: var(--muted); }
.overview-table td.ov-hot a { color: var(--danger); font-weight: 600; }
.overview-table td.num a { font-variant-numeric: tabular-nums; }

/* D. 급여대장 진행 단계 */
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-3) 0; }
.step { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 4px 12px 4px 4px; border-radius: var(--r-pill);
  background: var(--subtle); color: var(--muted); font-size: 13px; }
.step + .step::before { content: '→'; margin: 0 var(--sp-2) 0 -4px; color: var(--faint-text); }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--field-line); font-size: 12px; }
.step.done { color: var(--ok); background: var(--ok-soft); }
.step.done .step-no { border-color: var(--ok); }
.step.now { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.step.now .step-no { background: var(--accent); border-color: var(--accent); color: #fff; }
.step-note { font-size: 13px; color: var(--muted); }
@media print { .steps, .tc-table, .tc-hit .tc-target { display: none !important; } }


/* ── 2026-10-31 2차(기획 6.1) ── */
/* 2-4 세목별 안내문 — 글자 그대로, 줄바꿈만 살린다 */
.guide-text { white-space: pre-line; line-height: 1.6; }
.guide-box { background: var(--accent-soft); padding: var(--sp-4); border-radius: var(--r); }
.guide-box h3 { border-bottom-color: var(--accent-line); }
.guide-edit { margin-top: var(--sp-4); }
.guide-edit h4 { margin: 0 0 var(--sp-2); }
.guide-edit textarea { width: 100%; }
/* 2-1 원천세 월별 표 */
.wh-table tr.wh-empty td { color: var(--muted); }
.wh-table a.slip + a.slip { margin-left: var(--sp-2); }
/* 2-2 연말정산 진행표 — 직원 × 항목 격자(행 하나가 한 건이 아니라 카드로 바꾸지 않는다: .no-cards) */
.yearend-grid th, .yearend-grid td { vertical-align: top; min-width: 96px; }
.yearend-grid td:first-child, .yearend-grid th:first-child { min-width: 80px; }
.ye-cell .ye-state { display: inline-block; padding: 0 8px; border-radius: var(--r-pill); font-size: 12px; background: var(--neutral-soft); color: var(--muted); }
.ye-submitted .ye-state { background: var(--office-soft); color: var(--office); }
.ye-checked .ye-state { background: var(--ok-soft); color: var(--ok); }
.ye-fix .ye-state { background: var(--danger-soft); color: var(--danger); }
.ye-acts { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.ye-acts button { padding: 2px 8px; font-size: 12px; }
.ye-fix-count { color: var(--danger); }
.yearend-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
@media print { .ye-acts { display: none !important; } }