/* ─────────────────────────────────────────────────────────────────────────
   bz-design.css — BizLog Design System 토큰 레이어 (claude.ai/design 산출물 기반)
   원본: design/Design System.dc.html. "화려함보다 명료함" — 색·타이포·간격·라운드·
   엘리베이션 토큰과 재사용 컴포넌트를 한 곳에 정의해 모든 메뉴가 공유한다.

   설계 원칙(기존 시스템과의 공존):
   - 다크/라이트는 style.css 와 동일하게 html[data-theme="dark"] 가 단일 진실원본.
     별도 data-bz/data-theme 컨테이너를 쓰지 않고 전역 토큰으로 흡수한다.
   - --c-primary 계열은 기존 accent 시스템(--mw-brand*)에 바인딩 → 테마 피커가 그대로 동작.
   - --c-* 는 신규 네임스페이스라 기존 --mw-* 와 충돌하지 않는다(추가만).
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --c-canvas:#F3F4F8; --c-surface:#FFFFFF; --c-surface-2:#FAFBFD; --c-elevated:#FFFFFF;
  --c-line:#E7E9F0; --c-line-soft:#EFF1F6;
  --c-text:#171A21; --c-text-2:#586073; --c-text-3:#6B7384; /* P1-17: canonical(DESIGN.md) 4.76:1 */
  /* primary 는 accent 토큰에 바인딩(테마 피커 호환). 미정의 시 디자인 기본값으로 폴백. */
  --c-primary:var(--mw-brand);
  --c-primary-strong:var(--mw-brand-strong);
  --c-primary-tint:var(--mw-brand-soft);
  --c-primary-tint-2:#DFE3FD;
  --c-ai-a:#6D5BFF; --c-ai-b:#4C5BE6;
  --c-success:#15A66B; --c-success-tint:#E2F6EE; --c-success-strong:#0E7A4E;
  --c-warning:#E0900A; --c-warning-tint:#FBF0DA; --c-warning-strong:#8A5A00;
  --c-danger:#E5484D; --c-danger-tint:#FCE9EA; --c-danger-strong:#B02A30;
  /* solid-fill 전용 — 흰 글자와 짝. --c-danger 는 틴트 위 '텍스트' 색이라
     흰 글자를 얹으면 AA 미달(라이트 3.91·다크 2.99). BZQA-16 */
  --c-danger-solid:#C62328;
  --c-info:#2E90FA; --c-info-tint:#E4F1FE; --c-info-strong:#1665C0;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05),0 1px 1px rgba(16,24,40,.04);
  --shadow-md:0 6px 18px -4px rgba(16,24,40,.10),0 2px 6px -2px rgba(16,24,40,.06);
  --shadow-lg:0 24px 48px -16px rgba(16,24,40,.22);
  --r-sm:8px; --r-md:11px; --r-lg:16px; --r-pill:99px;
  /* P1-20(DS6, docs/69 §6-1) 모션 토큰 — 마이크로 100~200ms·전환 300~500ms(Material 3 규범).
     신규 transition/animation 은 이 토큰만 사용(임의 .15s 산재 수렴 목표값). reduced-motion
     폴백은 base 전역 가드 관례 유지. */
  --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms;
  --ease-out:cubic-bezier(.2,.7,.3,1); --ease-inout:cubic-bezier(.45,0,.25,1);
  /* Claude Design 잔여 토큰 이식(2026-07-07, design/Design System.dc.html): 스프링 이징(팝오버·토스트
     등장), 포커스 링(키보드 내비 일관 링 — var 참조라 다크·액센트 자동 추종), 최소 터치 타깃. */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --focus-ring:0 0 0 3px var(--c-primary-tint),0 0 0 1.5px var(--c-primary);
  --touch-min:44px;
}
html[data-theme="dark"]{
  --c-canvas:#0B0D12; --c-surface:#14171E; --c-surface-2:#191D25; --c-elevated:#1D222B;
  --c-line:#262B35; --c-line-soft:#1E232C;
  --c-text:#EAECF2; --c-text-2:#9AA2B3; --c-text-3:#8A93A6; /* P1-17: 다크 5.81:1 */
  --c-primary:var(--mw-brand);
  --c-primary-strong:var(--mw-brand-strong);
  --c-primary-tint:var(--mw-brand-soft);
  --c-primary-tint-2:#262C46;
  --c-ai-a:#9285FF; --c-ai-b:#6D7BFF;
  --c-success:#34C98A; --c-success-tint:#11241D; --c-success-strong:#34C98A;
  --c-warning:#E9A93A; --c-warning-tint:#2A2113; --c-warning-strong:#E9A93A;
  --c-danger:#F2696D; --c-danger-tint:#2A1618; --c-danger-strong:#F2696D;
  /* 다크도 같은 값 — 흰 글자 4.5:1 을 만족하려면 밝게 갈 수 없다(BZQA-16) */
  --c-danger-solid:#C62328;
  --c-info:#56A8FB; --c-info-tint:#0F1F2E; --c-info-strong:#56A8FB;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 22px -6px rgba(0,0,0,.5);
  --shadow-lg:0 30px 60px -18px rgba(0,0,0,.65);
}

/* ── 키프레임 ───────────────────────────────────────────────────────────── */
@keyframes bzShimmer{0%{background-position:-460px 0}100%{background-position:460px 0}}
@keyframes bzToastIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes bzFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bzPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes bzSpin{to{transform:rotate(360deg)}}

/* ── 재사용 컴포넌트 ─────────────────────────────────────────────────────── */
/* 카드(surface) */
.bz-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm)}
.bz-card-pad{padding:20px 22px}

/* KPI 위젯 */
.bz-kpi{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow-sm);transition:transform var(--motion-fast),box-shadow var(--motion-fast)}
.bz-kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.bz-kpi-ic{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;
  justify-content:center;font-size:19px}
.bz-kpi-val{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bz-kpi-lbl{font-size:13.5px;color:var(--c-text-2);margin-top:3px}
.bz-kpi-delta{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill)}

/* P1-20(DS9): 표 숫자 열 유틸 — tabular-nums+우측 정렬(DESIGN.md 숫자 규칙의 클래스화).
   급여대장·인사이트·근태 표의 금액/카운트 열에 적용(자리 흔들림 없는 스캔). */
.bz-num{font-variant-numeric:tabular-nums;text-align:right}

/* 배지 · 상태 칩 */
.bz-badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
  padding:5px 11px;border-radius:var(--r-pill);line-height:1}
.bz-badge-success{background:var(--c-success-tint);color:var(--c-success-strong,var(--c-success))}
.bz-badge-warning{background:var(--c-warning-tint);color:var(--c-warning-strong,var(--c-warning))}
.bz-badge-danger{background:var(--c-danger-tint);color:var(--c-danger-strong,var(--c-danger))}
.bz-badge-info{background:var(--c-info-tint);color:var(--c-info-strong,var(--c-info))}
.bz-badge-primary{background:var(--c-primary-tint);color:var(--c-primary)}
.bz-badge-muted{background:var(--c-line-soft);color:var(--c-text-2)}

/* 버튼 — 계층(primary·secondary·ghost·danger·ai) */
.bz-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;
  padding:0 20px;border-radius:var(--r-md);border:1px solid transparent;font-weight:700;
  font-size:14px;cursor:pointer;font-family:inherit;transition:transform var(--motion-fast),filter var(--motion-fast),
  border-color var(--motion-fast),color var(--motion-fast),background var(--motion-fast);text-decoration:none;white-space:nowrap}
.bz-btn:active{transform:translateY(1px)}
.bz-btn-primary{background:var(--mw-brand-fill,var(--c-primary));color:#fff;box-shadow:var(--shadow-sm)}
.bz-btn-primary:hover{filter:brightness(1.07)}
.bz-btn-secondary{background:var(--c-surface);color:var(--c-text);border-color:var(--c-line)}
.bz-btn-secondary:hover{border-color:var(--c-primary);color:var(--c-primary)}
.bz-btn-ghost{background:transparent;color:var(--c-text-2)}
.bz-btn-ghost:hover{background:var(--c-primary-tint);color:var(--c-primary)}
.bz-btn-danger{background:var(--c-danger-solid);color:#fff}
.bz-btn-danger:hover{filter:brightness(1.07)}
.bz-btn-ai{color:#fff;background:linear-gradient(120deg,var(--c-ai-a),var(--c-ai-b));box-shadow:var(--shadow-md)}
.bz-btn-ai:hover{filter:brightness(1.06)}
.bz-btn-sm{height:34px;padding:0 14px;font-size:13px;border-radius:var(--r-sm)}
.bz-btn-lg{height:48px;padding:0 24px;font-size:15px;border-radius:12px}
.bz-btn:disabled,.bz-btn[disabled]{background:var(--c-line);color:var(--c-text-3);cursor:not-allowed;
  filter:none;box-shadow:none;border-color:transparent}

/* 세그먼트 토글(일/주/월 등) */
.bz-seg{display:inline-flex;padding:4px;border-radius:12px;background:var(--c-surface-2);
  border:1px solid var(--c-line);gap:2px}
.bz-seg button{height:34px;padding:0 16px;border:none;border-radius:8px;font-size:13px;
  font-weight:700;cursor:pointer;font-family:inherit;background:transparent;color:var(--c-text-2);
  transition:var(--motion-fast)}
.bz-seg button.on{background:var(--c-surface);color:var(--c-primary);box-shadow:var(--shadow-sm)}

/* 아바타 */
.bz-avatar{width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:700;flex-shrink:0}

/* 진행 막대 */
.bz-bar{height:9px;border-radius:var(--r-pill);background:var(--c-line-soft);overflow:hidden}
.bz-bar>span{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--c-ai-a),var(--c-ai-b));transition:width var(--motion-slow)}

/* 스켈레톤 */
.bz-skel{background:linear-gradient(90deg,var(--c-line-soft) 25%,var(--c-line) 37%,var(--c-line-soft) 63%);
  background-size:920px 100%;animation:bzShimmer 1.4s infinite linear;border-radius:8px}

/* 섹션 헤더(소제목 + 캡션) */
.bz-sec-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-primary)}
.bz-sec-h{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0}

/* 데이터 테이블 */
.bz-table{width:100%;border-collapse:collapse;font-size:13.5px}
.bz-table thead tr{background:var(--c-surface-2)}
.bz-table th{text-align:left;padding:12px 16px;font-weight:700;color:var(--c-text-3);font-size:12px;
  letter-spacing:.02em;border-bottom:1px solid var(--c-line)}
.bz-table td{padding:13px 16px;border-bottom:1px solid var(--c-line-soft)}
.bz-table tbody tr{transition:background var(--motion-fast)}
.bz-table tbody tr:hover{background:var(--c-surface-2)}

/* ── 홈 대시보드 / 공통 레이아웃 (design/Home Feed.dc.html 정밀 재현, 전 화면 재사용) ── */
@keyframes bzDot{0%,100%{opacity:1}50%{opacity:.3}}

/* 히어로: 그라데이션 인사 카드 + 우측 사이드 카드(클록 등) */
/* 홈 인사 헤더 — 컴팩트·자연스럽게(소유자 지시: 자리 차지·AI 느낌 개선·좌측 파란 라인 제거).
   깔끔한 surface 카드 + (선택)랜덤 은은한 배경 + 인라인 요약 + 작은 CTA. */
.bz-hero{display:flex;gap:16px;margin-bottom:18px;align-items:stretch}
.bz-hero-card{flex:1;min-width:0;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:16px;padding:15px 20px;color:var(--c-text);position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;justify-content:center;background-size:cover;background-position:center}
/* 히어로 본문은 배경 위에 또렷이 — 텍스트 가독 보장(배경 이미지 시 반투명 패널) */
.bz-hero-card.has-bg{color:#fff}
.bz-hero-card.has-bg .bz-hero-h{color:#fff}
.bz-hero-card.has-bg .bz-hero-date{color:rgba(255,255,255,.85)}
.bz-hero-card.has-bg .bz-hero-sub{color:rgba(255,255,255,.92)}
.bz-hero-card.has-bg .bz-hero-sub b{color:#fff}
.bz-hero-card.has-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,42,.62),rgba(15,23,42,.30));z-index:0}
.bz-hero-card.has-bg .bz-hero-inner{position:relative;z-index:1}
/* 히어로 배경 변경 버튼 + 선택 팝업(레이어) */
.bz-hero-bgbtn{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.16);color:#fff;cursor:pointer;font-size:14px;line-height:1;backdrop-filter:blur(4px);opacity:.55;transition:opacity var(--motion-fast),background var(--motion-fast)}
.bz-hero-card:not(.has-bg) .bz-hero-bgbtn{border-color:var(--c-line);background:var(--c-surface-2);color:var(--c-text-2)}
.bz-hero-bgbtn:hover{opacity:1;background:rgba(255,255,255,.28)}
.hbg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.hbg-sw{display:flex;flex-direction:column;gap:6px;border:1px solid var(--mw-border);border-radius:12px;padding:7px;background:var(--mw-surface);cursor:pointer;transition:border-color var(--motion-fast),box-shadow var(--motion-fast),transform .05s}
.hbg-sw:hover{border-color:var(--mw-brand);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.hbg-prev{display:block;height:54px;border-radius:8px;background-position:center;background-size:cover}
.hbg-nm{font-size:11.5px;font-weight:700;color:var(--mw-text-2,var(--mw-text-muted));text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bz-hero-inner{position:relative}
.bz-hero-date{font-size:12px;font-weight:600;color:var(--c-text-3);margin-bottom:2px}
.bz-hero-h{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 3px;color:var(--c-text)}
.bz-hero-sub{font-size:13px;color:var(--c-text-2);margin:0 0 12px;line-height:1.45}
.bz-hero-sub b{color:var(--c-text);font-weight:700}
.bz-hero-cta{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:var(--mw-brand-fill,var(--c-primary));
  border:0;border-radius:10px;padding:7px 13px;cursor:pointer;color:#fff;font-size:12.5px;font-weight:700;text-decoration:none;transition:filter var(--motion-fast),transform .05s}
.bz-hero-cta:hover{filter:brightness(.95)}
.bz-hero-cta:active{transform:translateY(1px)}
.bz-hero-cta svg path{stroke:#fff}

/* 사이드 클록 카드 */
.bz-clock{width:300px;flex-shrink:0;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:20px;padding:22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.bz-clock-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bz-clock-ttl{font-size:13.5px;font-weight:800}
.bz-clock-status{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700}
.bz-clock-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:bzDot 1.6s infinite}
.bz-clock-big{font-size:34px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:center}
.bz-clock-sub{font-size:12.5px;color:var(--c-text-3);margin-top:2px;text-align:center}
.bz-clock-stats{display:flex;gap:8px;margin-top:10px}
.bz-clock-stat{flex:1;text-align:center;padding:8px;border-radius:10px;background:var(--c-surface-2)}
.bz-clock-stat .l{font-size:11px;color:var(--c-text-3);font-weight:600}
.bz-clock-stat .v{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}

/* 섹션 제목 행(좌: 제목+캡션 / 우: 액션) */
.bz-rowhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.bz-rowhead h3{font-size:15px;font-weight:700;line-height:1.4;letter-spacing:-.01em;margin:0}
.bz-rowhead .cap{font-size:12.5px;color:var(--c-text-3)}

/* KPI/위젯 카드 그리드 (대시보드 위젯) */
.bz-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:14px}
.bz-kc{display:block;text-decoration:none;color:inherit;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:16px;padding:17px 18px;box-shadow:var(--shadow-sm);transition:transform var(--motion-fast),box-shadow var(--motion-fast);position:relative}
a.bz-kc:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.bz-kc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.bz-ichip{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0}
.bz-ichip svg{width:19px;height:19px}
.bz-kc-flag{font-size:11px;font-weight:800;padding:3px 8px;border-radius:99px}
.bz-kc-val{display:flex;align-items:baseline;gap:4px}
.bz-kc-val b{font-size:25px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bz-kc-val small{font-size:13px;font-weight:700;color:var(--c-text-3)}
.bz-kc-lbl{font-size:12.5px;color:var(--c-text-2);margin-top:2px;font-weight:500}
.bz-kc-detail{font-size:11px;color:var(--c-text-3);margin-top:3px}
.bz-kc-avs{display:flex;margin-top:9px}
/* 겹침 스택 미리보기 — 기본 원형은 .bz-avatar(위 112행) 재사용, 크기·색·겹침만 오버라이드. */
.bz-kc-av.bz-avatar{width:22px;height:22px;background:var(--c-info-tint);color:var(--c-info);
  font-size:10px;border:2px solid var(--c-surface);margin-left:-6px}
.bz-kc-av.bz-avatar:first-child{margin-left:0}
.bz-kc-av-more{background:var(--c-surface-2);color:var(--c-text-3)}

/* 2열 대시(메인 + 360px 사이드) */
.bz-dash{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.bz-dash-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.bz-dash-side{display:flex;flex-direction:column;gap:22px;min-width:0}

/* 섹션 카드(헤더 구분선 + 본문) */
.bz-sec{background:var(--c-surface);border:1px solid var(--c-line);border-radius:16px;
  box-shadow:var(--shadow-sm);overflow:hidden}
.bz-sec-head{padding:18px 22px;border-bottom:1px solid var(--c-line-soft);display:flex;
  align-items:center;justify-content:space-between;gap:10px}
.bz-sec-head .t{display:flex;align-items:center;gap:9px}
.bz-sec-head h3{font-size:15px;font-weight:700;line-height:1.4;margin:0}
.bz-sec-body{padding:18px 22px}
.bz-sec-link{font-size:12.5px;font-weight:700;color:var(--c-text-3);text-decoration:none;white-space:nowrap}
.bz-sec-link:hover{color:var(--c-primary)}

/* 상단바 전역 검색(bz-topsearch, R114) — 구글식 인풋+자동완성. 구 bz-searchbtn(팔레트 버튼) 대체.
   포커스 테두리: 결합 패널 열림(.open) 시 인풋·드롭다운 테두리를 같은 색(line)으로 통일 —
   인풋만 브랜드색으로 변해 한 덩어리 패널의 테두리가 중간에 갈라져 보이던 이슈 수정. */
.bz-topsearch{position:relative;flex:1;max-width:560px;min-width:0;margin:0 16px}
.bz-topsearch .sc-in{display:flex;align-items:center;gap:9px;height:40px;padding:0 7px 0 16px;border-radius:20px;
  border:1px solid var(--c-line);background:var(--c-surface);box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:box-shadow var(--motion-fast),border-color var(--motion-fast)}
.bz-topsearch .sc-in:focus-within{box-shadow:0 2px 12px rgba(15,23,42,.14)}
.bz-topsearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--mw-text);
  font-size:13.5px;font-family:inherit}
.bz-topsearch .ts-lens{display:inline-flex;color:var(--c-text-3);flex:none}
.bz-topsearch .voice-mic{width:28px;height:28px;margin-left:0}
.bz-topsearch .bz-sg{position:absolute;left:0;right:0;top:100%;margin-top:-1px;background:var(--c-surface);
  border:1px solid var(--c-line);border-top:0;border-radius:0 0 20px 20px;box-shadow:var(--shadow-md);
  overflow:hidden;z-index:200;padding-bottom:6px}
.bz-topsearch.open .sc-in{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;
  box-shadow:0 2px 12px rgba(15,23,42,.14)}
.bz-topsearch .bz-sg-it{display:flex;align-items:center;gap:10px;padding:8px 15px;cursor:pointer;font-size:13.5px;color:var(--mw-text)}
.bz-topsearch .bz-sg-it.hi,.bz-topsearch .bz-sg-it:hover{background:var(--mw-surface-muted)}
.bz-topsearch .bz-sg-ic{width:18px;flex:none;display:inline-flex;justify-content:center;color:var(--c-text-3)}
.bz-topsearch .bz-sg-ic svg{display:block}
.bz-topsearch .bz-sg-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bz-topsearch .bz-sg-k{font-size:11px;color:var(--c-text-3)}
@media (max-width:760px){ .bz-topsearch{max-width:none;margin:0 8px} }

/* 반응형: 히어로/대시 스택 */
@media (max-width:900px){
  .bz-hero{flex-wrap:wrap}
  .bz-clock{width:100%}
  .bz-dash{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .bz-skel,.bz-kpi{animation:none;transition:none}
  .bz-clock-status .dot{animation:none}
}

/* ── Claude Design: 커스텀 라운드 체크박스(전역) ─────────────────────────────
   네이티브 accent-color 를 대체 — rounded.sm 계열 5px 라운드 + 브랜드 채움 + 체크 글리프.
   .mw-switch 내부 체크박스는 기존 고특이도 규칙이 숨김(시각 영향 0). 라디오는 기존 accent 유지. */
input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:6px;
  border:1.5px solid var(--mw-border-strong);background:var(--mw-surface);
  display:inline-grid;place-content:center;vertical-align:-3px;margin:0 4px 0 2px;cursor:pointer;flex:none;
  transition:background var(--motion-fast),border-color var(--motion-fast)}
input[type="checkbox"]::before{content:"";width:11px;height:9px;transform:scale(0);transition:transform var(--motion-fast);
  background:#fff;clip-path:polygon(14% 44%,0 62%,38% 100%,100% 18%,84% 2%,38% 66%)}
input[type="checkbox"]:checked,input[type="checkbox"]:indeterminate{background:var(--mw-brand);border-color:var(--mw-brand)}
input[type="checkbox"]:checked::before{transform:scale(1)}
input[type="checkbox"]:indeterminate::before{transform:scale(1);clip-path:none;width:9px;height:2px;border-radius:4px}
input[type="checkbox"]:hover:not(:disabled):not(:checked){border-color:var(--mw-brand)}
input[type="checkbox"]:focus-visible{outline:2px solid var(--mw-brand);outline-offset:2px}
input[type="checkbox"]:disabled{opacity:.55;cursor:not-allowed}
/* 다크: --mw-brand 가 밝아져 흰 글리프 대비가 무너짐 → 글리프를 다크 잉크로(밝은 채움 위 검체크) */
html[data-theme="dark"] input[type="checkbox"]::before{background:#0f172a}

/* 라디오 — 체크박스와 한 세트(rounded.full 원형 + 브랜드 링). 글리프는 border 두께로 그려
   다크에서도 도트(표면색)가 항상 대비됨. */
input[type="radio"]{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:999px;
  border:1.5px solid var(--mw-border-strong);background:var(--mw-surface);
  vertical-align:-3px;margin:0 4px 0 2px;cursor:pointer;flex:none;transition:border-color var(--motion-fast)}
input[type="radio"]:checked{border:5px solid var(--mw-brand)}
input[type="radio"]:hover:not(:disabled):not(:checked){border-color:var(--mw-brand)}
input[type="radio"]:focus-visible{outline:2px solid var(--mw-brand);outline-offset:2px}
input[type="radio"]:disabled{opacity:.55;cursor:not-allowed}

/* ── WCAG 2.5.8 최소 타깃 24px — 터치(pointer:coarse) 한정 (BZQA-260816-84) ──────────
   실측(2026-08-17, 390x844 터치, 69화면): 탭 가능 5,308개 중 592개(11.2%)가 24px 미만 —
   체크박스 259 · 링크 271(105는 문장 속 인라인) · role=button 28 · button 21 · 라디오 11.
   ::before 히트확장이 아니라 크기 확대인 이유: ::before 는 **요소 자신의 경계상자를 못 넓혀**
   실측·감사 어느 쪽도 24px 로 보지 못하고, 확장분이 옆 타깃과 겹쳐 오조작을 만든다.
   coarse 한정인 이유: 위 17px 은 데스크톱 조밀 표(구성원·파일·근태)의 행 높이 기준이라 전역
   24px 이면 행마다 +7px 가 붙는다. 손가락 정확도가 문제인 터치에서만 키운다. **정직성**:
   2.5.8 은 포인터 종류를 안 가리므로 이건 실측 결함(390px 터치)을 닫는 범위 한정이지 AA 완주가 아니다.
   인라인 링크를 뺀 게 아니라 **인라인 박스가 min-height 를 무시**한다 — 2.5.8 인라인 예외와
   정확히 겹쳐 본문 줄간격은 그대로 두고 블록·플렉스 타깃만 커진다. */
@media (pointer:coarse){
  input[type="checkbox"],input[type="radio"]{width:24px;height:24px}
  input[type="checkbox"]::before{width:15px;height:12px}
  input[type="checkbox"]:indeterminate::before{width:12px}
  input[type="radio"]:checked{border-width:7px}   /* 도트 10px — 17px/5px 의 비율 유지 */
  a[href],button,[role="button"],summary{min-height:24px}
  button,[role="button"]{min-width:24px}
}

/* 선택(마우스 클릭) 시 불필요한 외곽선 제거 — 링은 키보드 포커스(:focus-visible)에서만 */
a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),
select:focus:not(:focus-visible),textarea:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){outline:none}
/* 키보드 포커스 링 전역 통일(2026-07-07) — mw-btn 계열(style_1)·체크박스/라디오(위)와 동일 언어의
   브랜드 아웃라인을 나머지 인터랙티브 요소(링크·인풋·셀렉트·바닥 button 등)까지 확장. UA 기본
   링 제각각 → 브랜드색 2px 로 일관(a11y). :where() 로 특이도 0 유지 — 컴포넌트별 정밀 링이 항상 이김. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}

/* ── 파일 레이어 팝업 뷰어(file_pop.js 공용 — 검색·파일관리자) ── */
.bz-fv{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:22px}
.bz-fv[hidden]{display:none}
.bz-fv .bg{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.bz-fv .panel{position:relative;width:min(1080px,96vw);height:min(86vh,900px);background:var(--mw-surface);
  border-radius:16px;box-shadow:var(--shadow-lg,0 18px 50px rgba(0,0,0,.35));overflow:hidden;display:flex;flex-direction:column}
.bz-fv .hd{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--mw-border)}
.bz-fv .hd .ic{display:inline-flex;color:var(--mw-text-muted);flex:none}
.bz-fv .hd .nm{flex:1;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bz-fv .hd a{font-size:12.5px;color:var(--mw-brand-strong);text-decoration:none;font-weight:700}
.bz-fv .hd a:hover{text-decoration:underline}
.bz-fv .hd .x{border:0;background:transparent;cursor:pointer;color:var(--mw-text-muted);padding:4px;
  display:inline-flex;align-items:center;border-radius:999px}
.bz-fv .hd .x:hover{background:var(--mw-surface-muted);color:var(--mw-text)}
.bz-fv iframe{flex:1;width:100%;border:0;background:var(--mw-bg)}
@media(max-width:680px){ .bz-fv{padding:8px} }

/* ── R150 기본 스케일 120%(소유자 지시 2026-07-07) ──────────────────────────
   "브라우저 120% 줌에서 보던 크기를 기본값으로." 적용은 base.html head 프리페인트 JS 단일 소스
   (localStorage bizlog_fontscale — 데스크톱 >1100px 기본 120%, 태블릿/모바일 100%, 80~130% 조정).
   CSS @media 로 기본값을 병기하면 사용자가 100% 선택 시 인라인 zoom 이 비워져 CSS 1.2 가
   되살아나는 이중 소스 버그 — CSS 는 인쇄 원척 강제만 담당.
   태블릿(761~1100) 기본 확대 제외 이유: 미디어쿼리(실픽셀)와 실효폭(÷1.2)이 어긋나 데스크톱
   레이아웃이 640px 급 공간에 강제돼 전면 가로스크롤 발생(실측 768). */
@media print{ html{zoom:1!important} }

/* 인라인 아이콘 유틸 — JS 가 조립하는 SVG 의 반복 style 속성을 대체한다(R153 인라인 캡).
   같은 선언을 문자열로 3~4번 되풀이하면 템플릿 인라인 예산만 먹고 캐시되지도 않는다. */
.bz-ic-s,.bz-ic-m{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.bz-ic-s{width:12px;height:12px;stroke-width:2;vertical-align:-1px;margin-right:2px}
.bz-ic-m{width:1.05em;height:1.05em;stroke-width:1.9;vertical-align:-2px;margin-right:4px}
.bz-ic-l{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-right:3px}