/* app.css — 운영 콘솔 전용 스타일 (design-system 토큰 위에). 절제·각진·브랜드 #216E84. */

.hidden { display: none !important; }
:root { --ctl-h: 36px; --ctl-h-sm: 30px; --ctl-h-touch: 44px; }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--bg); }
.login { width: 364px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: var(--sp-6); }
.login h1 { font-size: var(--fs-18); font-weight: var(--fw-bold); margin: var(--sp-4) 0 2px; }
.login p.sub { color: var(--muted); font-size: var(--fs-13); margin: 0 0 var(--sp-5); }
.login .field { margin-bottom: var(--sp-3); }
.login .err { color: var(--danger); font-size: var(--fs-13); min-height: 18px; margin-top: 6px; }

/* page head */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); min-height: 44px; }
.page-head > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.page-head > div:last-child { flex-shrink: 0; white-space: nowrap; }
.page-head .h2 { overflow-wrap: anywhere; }
.page-head .sub { color: var(--muted); font-size: var(--fs-13); }
.pill { font-size: var(--fs-11); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-tag); padding: 2px 8px; }
.empty { padding: var(--sp-8); text-align: center; color: var(--muted); }
.ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tt { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-tag); font-size: var(--fs-11); font-weight: var(--fw-semibold); background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.linklike { background: none; border: 0; color: var(--brand-700); font-weight: var(--fw-semibold); cursor: pointer; padding: 0; font-size: var(--fs-13); }
.linklike:hover { text-decoration: underline; }
/* §9 일정 생성 시 고객 검색·연결 타이프어헤드 */
.cust-results { border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 4px; max-height: 180px; overflow-y: auto; background: var(--surface); }
.cust-opt { display: block; width: 100%; text-align: left; padding: 7px 10px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: var(--fs-13); color: inherit; }
.cust-opt:last-child { border-bottom: 0; }
.cust-opt:hover { background: var(--surface-2); }
.cust-selected { margin-top: 6px; font-size: var(--fs-13); color: var(--ink-2); display: flex; align-items: center; gap: var(--sp-2); }
.danger-txt { color: var(--danger); }

/* Master Data 허브 탭 (사이드바 통합) */
.mtabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); }
.mtab { border: 0; background: none; padding: 9px 16px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mtab:hover { color: var(--ink); background: var(--surface-2); }
.mtab.on { color: var(--brand-800); border-bottom-color: var(--brand-700); }
.tab-count { display: inline-block; margin-left: 6px; padding: 0 6px; min-width: 18px; border-radius: var(--r-tag); background: var(--surface-2); color: var(--muted); font-size: var(--fs-11, 11px); font-weight: var(--fw-semibold); line-height: 17px; text-align: center; }
.mtab.on .tab-count { background: var(--brand-50, var(--surface-2)); color: var(--brand-800); }
/* D2 QC 라운드 thread */
.qc-thread { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.qc-round { font-size: var(--fs-11, 11px); font-weight: var(--fw-semibold); color: var(--muted); letter-spacing: .02em; margin-top: 4px; }
.qc-cmt { background: var(--surface-2); border-radius: var(--r-tag, 6px); padding: 7px 10px; font-size: var(--fs-13); }
.qc-cmt-h { font-size: var(--fs-12); margin-bottom: 2px; }
.qc-atts { display: grid; gap: 4px; }
.qc-att { font-size: var(--fs-13); }
.qc-att.superseded { color: var(--muted); text-decoration: line-through; }
.mtab-group { align-self: center; padding: 0 12px 0 4px; font-size: var(--fs-11, 11px); font-weight: var(--fw-semibold); color: var(--muted); letter-spacing: .02em; opacity: .75; }
.mtab-group:not(:first-child) { border-left: 1px solid var(--line); margin-left: 6px; }

/* 프로토콜 상세 — 방문 카드 */
.vcard { padding: 0; margin-bottom: var(--sp-3); overflow: hidden; }
.vhead { display: flex; align-items: center; justify-content: space-between; padding: 9px var(--sp-4); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.vcard .table { margin: 0; }
.h3 { font-size: var(--fs-16); font-weight: var(--fw-bold); margin: 0; }

/* lifecycle 상태 배지 (PENDING/ACTIVE/CLOSE) */
.status[data-status="PENDING"] { color: var(--st-PENDING); background: var(--st-PENDING-soft); }
.status[data-status="CLOSE"] { color: var(--st-CLOSE); background: var(--st-CLOSE-soft); border-color: var(--line); }

/* ── Calendar ─────────────────────────────────────────────────────────── */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cal-nav { display: flex; align-items: center; gap: var(--sp-2); }
.cal-nav .period { font-size: var(--fs-18); font-weight: var(--fw-bold); min-width: 168px; }
.iconbtn { width: var(--ctl-h); height: var(--ctl-h); display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.iconbtn:hover { background: var(--surface-2); border-color: var(--brand-300); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; }
.seg button { height: var(--ctl-h); padding: 0 14px; border: 0; background: var(--surface); color: var(--ink-2); font-size: var(--fs-13); font-weight: var(--fw-semibold); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--brand-800); color: var(--brand-ink); }
/* seg-sm: 보조 필터용 작은 세그먼트(QC-UX2e 대상종류) — on=연한 브랜드(1차 세그먼트보다 약하게) */
.seg-sm button { height: var(--ctl-h-sm); padding: 0 11px; font-size: var(--fs-12); }
.seg-sm button.on { background: var(--brand-50); color: var(--brand-800); }

.cal-month { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cal-dow div { padding: 8px 10px; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--muted); text-align: left; }
.cal-dow div:first-child { color: var(--danger); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(108px, 1fr); }
.cal-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; cursor: pointer; min-width: 0; position: relative; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell:hover { background: var(--brand-50); }
.cal-cell.other { background: var(--surface-2); color: var(--muted); }
.cal-cell.today .daynum { background: var(--brand-700); color: var(--brand-ink); }
.cal-cell .daynum { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: var(--r-tag); font-size: var(--fs-12); font-weight: var(--fw-semibold); padding: 0 5px; }
.cal-cell.sun .daynum { color: var(--danger); }
.ev { display: flex; align-items: center; gap: 5px; margin-top: 4px; padding: 2px 6px; border-radius: var(--r-tag); font-size: var(--fs-12); font-weight: var(--fw-medium);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ev::before { content: ""; width: 6px; height: 6px; border-radius: 2px; flex: none; background: var(--brand-600); }
.ev:hover { border-color: var(--brand-400); }
.ev[data-status="DONE"]::before { background: var(--success); }
.ev[data-status="CANCELLED"]::before, .ev[data-status="ARCHIVED"]::before { background: var(--muted); }
.ev[data-status="DRAFT"]::before { background: var(--line-strong); }
/* E2: 월 뷰도 좌보더 = 트랙(점=status 유지) */
.ev[data-track="EXTERNAL_SITE_VISIT"] { border-left: 3px solid var(--brand-600); }
.ev[data-track="REFERRAL_ASSESSMENT"] { border-left: 3px solid var(--track-referral); }
.ev .t { color: var(--muted); font-variant-numeric: tabular-nums; }

/* week / day = 시간축 그리드 (07:00–21:00) */
.tg { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.tg-scroll { max-height: 620px; overflow-y: auto; }
.tg-row { display: grid; grid-template-columns: 56px repeat(var(--tg-cols), 1fr); }
.tg-head { position: sticky; top: 0; z-index: 2; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.tg-corner { border-right: 1px solid var(--line); }
.tg-dh { padding: 8px 4px; text-align: center; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--ink-2); border-left: 1px solid var(--line); }
.tg-dh.today { color: var(--brand-800); background: var(--brand-50); }
.tg-dh .dow { color: var(--muted); font-weight: var(--fw-medium); }
.tg-gutter { border-right: 1px solid var(--line); }
.tg-hl { font-size: var(--fs-11); color: var(--muted); text-align: right; padding: 1px 6px 0 0; box-sizing: border-box; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tg-hl:first-child { border-top: 0; }
.tg-col { position: relative; border-left: 1px solid var(--line); cursor: pointer; }
.tg-col.today { background: var(--brand-50); }
.tg-hrow { border-top: 1px solid var(--line); box-sizing: border-box; }
.tg-hrow:first-child { border-top: 0; }
.tg-ev { position: absolute; left: 3px; right: 3px; box-sizing: border-box; border-radius: 3px; border: 1px solid var(--line); border-left: 3px solid var(--brand-600);
  background: var(--surface); color: var(--ink-2); padding: 1px 6px; font-size: var(--fs-11); line-height: 1.35; overflow: hidden; cursor: pointer; }
.tg-ev:hover { border-color: var(--brand-400); z-index: 1; }
.tg-ev .t { font-weight: var(--fw-semibold); color: var(--brand-800); }
/* E2: 좌보더 = 트랙(파견/의뢰). status 는 배경/취소선으로 분리(색 충돌 회피). */
.tg-ev[data-track="EXTERNAL_SITE_VISIT"] { border-left-color: var(--brand-600); }
.tg-ev[data-track="REFERRAL_ASSESSMENT"] { border-left-color: var(--track-referral); } /* 의뢰: 절제된 브론즈(원색 아님) */
.tg-ev[data-status="DONE"] { background: var(--success-bg, #eef6f0); }
.tg-ev[data-status="CANCELLED"], .tg-ev[data-status="ARCHIVED"] { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
.tg-ev[data-status="DRAFT"] { opacity: .68; }
/* 캘린더 트랙 범례 */
.cal-legend { display: flex; gap: 16px; align-items: center; font-size: var(--fs-12); color: var(--muted); margin-bottom: 8px; }
.cal-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend .sw { width: 12px; height: 0; border-top: 3px solid var(--brand-600); display: inline-block; }
.cal-legend .sw.ref { border-top-color: var(--track-referral); }
/* S3: 일정 상태 범례(track 범례에 추가) + 상태 카운트 스트립 */
.cal-legend .cdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cal-leg-sep { width: 1px; height: 13px; background: var(--line); display: inline-block; }
.cal-statstrip { margin-bottom: var(--sp-3); }

/* §2 캘린더 세그먼트·필터 바 */
.cal-filterbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.cal-filterbar .cal-fsel { height: var(--ctl-h); flex: 0 1 184px; min-width: 116px; }
@media (max-width: 720px) { .cal-filterbar { flex-wrap: wrap; } .cal-filterbar .cal-fsel { flex: 1 1 140px; } }

/* §2 목록(어젠다) 뷰 — 날짜 그룹 + 행 클릭=상세. 좌측 보더=트랙(파견/의뢰, 범례 정합) */
.cal-list { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.cal-list-day { padding: 7px 14px; font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--ink-2); background: var(--surface-2); border-top: 1px solid var(--line); }
.cal-list-day:first-child { border-top: 0; }
.cal-list-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); border-left: 3px solid var(--brand-600); cursor: pointer; }
.cal-list-row[data-track="REFERRAL_ASSESSMENT"] { border-left-color: var(--track-referral); }
.cal-list-row:hover { background: var(--surface-2); }
.cal-list-row .cl-time { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--brand-700); }
.cal-list-row .cl-main { font-size: var(--fs-13); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-list-row .cl-main .muted { color: var(--muted); }
.cal-list-row .cl-badges { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }

/* ── Data grid (편집형) ───────────────────────────────────────────────── */
.grid-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.grid-toolbar .input { height: var(--ctl-h); width: 100%; max-width: 260px; }
.rowact { display: flex; align-items: center; min-height: var(--ctl-h); gap: var(--sp-2); justify-content: flex-end; }

/* ── Modal ────────────────────────────────────────────────────────────── */
.modal-back { position: fixed; inset: 0; background: rgba(19, 58, 71, 0.32); display: grid; place-items: center; z-index: 80; }
.modal { width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-bold); }
.modal-body { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }
.modal-foot .err { color: var(--danger); font-size: var(--fs-13); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ── 우측 슬라이드 드로어(상세 조회) — modal 과 공존(additive). design-clindb-stats-reskin S1 ── */
.drawer-scrim { position: fixed; inset: 0; background: rgba(19, 58, 71, 0.32); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 60; }
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 460px; max-width: 92vw; background: var(--surface); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .24s cubic-bezier(.4, 0, .2, 1); }
.drawer-wide { width: 640px; max-width: 94vw; }
.drawer-scrim.open .drawer { transform: translateX(0); }
.drawer-head { position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--line); }
.drawer-head h3 { margin: 0; padding-right: 32px; font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--ink); }
.drawer-head .drawer-x { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.drawer-status { margin-top: var(--sp-2); }
.drawer-body { padding: var(--sp-5); overflow: auto; flex: 1; display: grid; gap: var(--sp-4); align-content: start; }
.drawer-foot { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }
.drawer-foot-left, .drawer-foot-right { display: flex; align-items: center; gap: var(--sp-2); }
.drawer-foot-right { margin-left: auto; justify-content: flex-end; flex: 1; }
.drawer-foot > .btn { flex: 1; }
.drawer-foot-left .btn, .drawer-foot-right .btn { flex: 0 1 auto; }
.drawer-foot .err { color: var(--danger); font-size: var(--fs-12); flex: none; }
/* 처리 이력 타임라인(결과/상세 드로어 상단) */
.timeline { border-left: 2px solid var(--line); padding-left: var(--sp-4); margin-left: 4px; }
.timeline .tl { position: relative; padding-bottom: var(--sp-4); }
.timeline .tl::before { content: ""; position: absolute; left: calc(-1 * var(--sp-4) - 5px); top: 4px; width: 8px; height: 8px; border-radius: 2px; background: var(--brand-600); }
.timeline .tl:last-child { padding-bottom: 0; }
.timeline .tl .t { font-size: var(--fs-13); color: var(--ink); font-weight: var(--fw-semibold); }
.timeline .tl .m { font-size: var(--fs-12); color: var(--muted); font-family: var(--font-mono); margin-top: 1px; }
.timeline .tl.active::before { background: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100); }
.timeline .tl.pending::before { background: var(--surface); border: 1.5px solid var(--line-strong); }
.timeline .tl.pending .t { color: var(--muted); }
.timeline .tl .t .now { margin-left: 6px; font-size: var(--fs-11); color: var(--brand-700); font-weight: var(--fw-bold); }

/* ── QC 페이지 (Q3c): 2탭 + 필터바 + 목록 | 우측 상세 패널 + 가로 스텝퍼 ── */
.two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-5); align-items: start; }
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.filterbar .select, .filterbar .input, .fb .select, .fb .input { height: var(--ctl-h); width: auto; min-width: 150px; max-width: 240px; } /* S7: 필터바 셀렉트는 컴팩트 인라인(기본 .select width:100% 상속 차단=풀폭 세로 스택 버그 수정) */
.filterbar .iconbtn, .fb .iconbtn, .cal-filterbar .iconbtn, .grid-toolbar .iconbtn, .cal-toolbar .iconbtn { width: var(--ctl-h); height: var(--ctl-h); }
/* P-A: 필터/검색 바 한 행 컨트롤 높이 36 통일 — seg-sm·btn-sm·적용/초기화가 select(36)와 단차 없게 */
.filterbar .seg-sm button, .fb .seg-sm button, .cal-filterbar .seg-sm button,
.filterbar .btn-sm, .fb .btn-sm, .cal-filterbar .btn-sm { height: var(--ctl-h); }
.qc-row { cursor: pointer; }
.qc-row:hover td { background: var(--surface-2); }
.qc-row.sel td { background: var(--brand-50); }
.qc-board { overflow-x: auto; }
.qc-board .table { min-width: 1080px; }
.qc-queue-row td { vertical-align: middle; }
.myqc-board { overflow-x: auto; }
.myqc-board .table { min-width: 920px; }
.myqc-row td { vertical-align: middle; }
.myqc-filter .fb-right .input { min-width: 220px; }
.myqc-detail { display: grid; gap: var(--sp-4); }
.myqc-detail .kv dd { min-width: 0; }
/* 진행 상태 스텝퍼(일정 상세 드로어 — HTML 목업 flowsteps) */
.flowsteps { display: flex; gap: 5px; margin-bottom: var(--sp-4); }
.flowsteps .fs { flex: 1; text-align: center; font-size: var(--fs-12); font-weight: var(--fw-semibold); padding: 8px 4px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); }
.flowsteps .fs.done { background: var(--brand-50); color: var(--brand-800); }
.flowsteps .fs.cur { background: var(--brand-800); color: var(--brand-ink); }
.kv { display: grid; grid-template-columns: 64px 1fr; gap: 7px var(--sp-3); font-size: var(--fs-13); margin: 0; }
.kv.kv-wide { grid-template-columns: 88px 1fr; } /* S6: 긴 한글 라벨(검사 배터리·진행 프로토콜)용 라벨열 확장 */
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } /* S6: 드로어 평가자 칩 줄 */
.qc-cancelled { color: var(--danger); font-size: var(--fs-13); font-weight: var(--fw-semibold); padding: var(--sp-2) 0; }
/* QC-UX2c(P4): 결정 존 우선 + 접이식 이력 */
.dz { border: 1px solid var(--brand-200); background: var(--brand-50); border-radius: var(--r-lg); padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.dz .now-line { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--brand-800); display: flex; align-items: center; gap: 8px; }
.dz .now-line .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--brand-700); flex: none; }
.dz .err { color: var(--danger); font-size: var(--fs-13); }
.dz .err:empty { display: none; }
.deliver { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px var(--sp-3); }
.deliver .meta { font-size: var(--fs-13); }
.deliver .meta .muted { font-size: var(--fs-12); }
details.hist { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
details.hist > summary { cursor: pointer; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: 8px; }
details.hist > summary::-webkit-details-marker { display: none; }
details.hist > summary .chev { transition: transform .15s var(--ease); }
details.hist[open] > summary .chev { transform: rotate(90deg); }
details.hist .hist-body { padding-top: var(--sp-3); display: grid; gap: var(--sp-3); }
/* 가로 스텝퍼 — 채움(done)/링(now)/중립(todo), 보완 루프 표시 */
.qc-steps { display: flex; align-items: flex-start; }
.qc-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; text-align: center; }
.qc-step::before { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.qc-step:first-child::before { display: none; }
.qc-step .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; font-size: 10px; font-weight: var(--fw-bold); color: var(--muted); position: relative; z-index: 1; }
.qc-step .lbl { font-size: var(--fs-11); color: var(--muted); line-height: 1.25; }
.qc-step.done .dot { border-color: var(--brand-600); background: var(--brand-600); color: var(--brand-ink); }
.qc-step.done::before { background: var(--brand-600); }
.qc-step.now .dot { border-color: var(--brand-700); color: var(--brand-800); box-shadow: 0 0 0 3px var(--brand-50); }
.qc-step.now .lbl { color: var(--brand-800); font-weight: var(--fw-semibold); }
.qc-step.loop .dot { border-color: var(--warning); color: var(--warning); }
.qc-step.loop .lbl { color: var(--warning); }
@media (max-width: 1120px) { .two { grid-template-columns: 1fr; } }

/* ── EV-2 수행 보고 체크리스트 (브랜드 톤, 이모지/원색 없음) ── */
.rpt-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 9px 0; border-bottom: 1px solid var(--line); }
.rpt-chk { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); font-weight: var(--fw-semibold); cursor: pointer; }
.rpt-chk input { width: 16px; height: 16px; accent-color: var(--brand-700); }
.rpt-state { font-size: var(--fs-12); color: var(--muted); }
.rpt-reason { margin: 6px 0 4px; }
.rpt-reason[hidden] { display: none; }

/* ── EV-6 외부뷰어(기관담당자) 셸 — 로그인 셸과 분리된 read-only 헤더 ── */
.vwr-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); background: var(--surface); }

/* ── EV-4 모바일 셸 (M1) — 데스크톱선 드로어 토글/백드롭 숨김 ── */
.drawer-toggle { display: none; }
.nav-backdrop { display: none; }

/* 협폭(721–1120px): 사이드바 유지, 2열 → 1열 */
@media (max-width: 1120px) {
  .two { grid-template-columns: 1fr; }
}

/* 모바일(≤720px): 사이드바 → off-canvas 드로어, 콘텐츠 풀폭, 터치타깃 44px */
@media (max-width: 720px) {
  .app { display: block; }
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; width: 264px; z-index: 60;
    transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(19, 58, 71, 0.4); }
  .nav-backdrop.hidden { display: none; }
  .drawer-toggle { display: grid; }
  .topbar { padding: 0 var(--sp-4); }
  .topbar #dbMode, .topbar #userRole { display: none; } /* 토픽바 축약 */
  .content { padding: var(--sp-4); }
  /* 44px 터치타깃 */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .nav-item { min-height: 44px; }
  .input, .select { height: 44px; }
  .iconbtn { width: var(--ctl-h-touch); height: var(--ctl-h-touch); }
  .mtab, details > summary, .today-up > summary { min-height: var(--ctl-h-touch); display: flex; align-items: center; }
  /* 캘린더 시간축: 모바일 화면 높이에 맞춰 스크롤 */
  .tg-scroll { max-height: 70vh; }
  .vwr-top { padding: var(--sp-3) var(--sp-4); }
  /* 모달/드로어 → 풀폭 바텀시트 */
  .modal-back { align-items: flex-end; }
  .modal { width: 100%; max-width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .drawer { top: auto; bottom: 0; right: 0; width: 100%; max-width: 100%; height: 85vh; transform: translateY(100%); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .drawer-scrim.open .drawer { transform: translateY(0); }
  .drawer-foot { flex-wrap: wrap; }
  .drawer-foot-left, .drawer-foot-right { width: 100%; }
  .drawer-foot-right { margin-left: 0; }
}

/* MFA 등록 QR — 스캔 신뢰성 위해 흰 배경 + 절제된 테두리(브랜드 톤) */
.mfa-qr { display: inline-block; background: var(--surface); padding: 8px; border: 1px solid var(--line); border-radius: var(--r-tag); }
.mfa-qr svg { display: block; width: 168px; height: 168px; }

/* 일정 보고 마커 — 평가자 완료보고 시 점(한눈에). title 에 수행/전체 */
.ev-rep { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success, #2e7d32); margin-left: 5px; vertical-align: middle; }

/* 보고 배지(목록) + 수행 검사 섹션(상세) — 절제된 톤 */
.rep-badge { display: inline-block; font-size: var(--fs-12); padding: 1px 7px; border-radius: var(--r-tag); border: 1px solid var(--line); }
.rep-badge.done { color: var(--success, #2e7d32); border-color: color-mix(in srgb, var(--success, #2e7d32) 35%, var(--line)); }
.rep-badge.none { color: var(--muted); }
/* 노쇼(전체 미수행) 표식 — 절제 톤(warning 계열, 원색금지). 보고완료(green)와 구분. */
.ev-rep.noshow { background: var(--warning); }
.rep-badge.noshow { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, var(--line)); }
.pill.tag-noshow { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
/* 결과 업로드 게이트(I-18) 표식 — 대기=warning / 완료=success. 절제 톤·원색금지. */
.rep-badge.result-pending { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, var(--line)); }
.rep-badge.result-done { color: var(--success, #2e7d32); border-color: color-mix(in srgb, var(--success, #2e7d32) 35%, var(--line)); }
.pill.tag-result-pending { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.pill.tag-result-done { color: var(--success, #2e7d32); background: color-mix(in srgb, var(--success, #2e7d32) 12%, transparent); border-color: transparent; }
.rep-sec { margin-top: 4px; }
.rep-none { color: var(--muted); font-size: var(--fs-13); }
.rep-head { font-size: var(--fs-13); color: var(--muted); margin-bottom: 4px; }
.rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.rep-item { font-size: var(--fs-13); }
.rep-item .rep-ic { display: inline-block; min-width: 38px; font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.rep-item.done .rep-ic { color: var(--success, #2e7d32); }
.rep-item.miss .rep-ic { color: var(--danger, #b3261e); }

/* ============================================================================
   UX-1 기반 컴포넌트 (docs/design-ux-improvements.md §1) — 토큰만, 이모지 0
   ============================================================================ */
/* Toast — 비차단 피드백 스택 */
#toast-host { position: fixed; top: var(--sp-4); right: var(--sp-4); z-index: 80; display: grid; gap: var(--sp-2);
  width: 340px; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sp-2); padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--muted);
  border-radius: var(--r-md); box-shadow: var(--shadow-md); font-size: var(--fs-13); color: var(--ink);
  animation: toast-in .18s var(--ease); }
.toast.out { animation: toast-out .18s var(--ease) forwards; }
.toast-success { border-left-color: var(--success); } .toast-success .toast-ico { color: var(--success); }
.toast-error   { border-left-color: var(--danger); }  .toast-error .toast-ico   { color: var(--danger); }
.toast-info    { border-left-color: var(--brand-600); } .toast-info .toast-ico  { color: var(--brand-600); }
.toast-ico { flex: none; display: grid; place-items: center; margin-top: 1px; }
.toast-msg { flex: 1; min-width: 0; }
.toast-x { flex: none; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; display: grid; place-items: center; }
.toast-x:hover { color: var(--ink); }
@keyframes toast-in  { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(12px); } }

/* Skeleton — 무채색 shimmer(키프레임은 JS가 id 가드로 주입) */
.sk { overflow: hidden; }
.sk-bar, .sk-cell, .sk-th { background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2));
  background-size: 200% 100%; animation: ux-shimmer 1.2s infinite linear; border-radius: var(--r-sm); }
.sk-row { display: flex; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.sk-row:last-child { border-bottom: 0; }
.sk-th { height: 10px; width: 30%; margin: var(--sp-3) var(--sp-4); }
.sk-cell { height: 64px; border-radius: var(--r-md); }

/* EmptyState — 비었음 + 다음 할 일 */
.empty-state { padding: var(--sp-8) var(--sp-5); text-align: center; display: grid; justify-items: center; gap: 6px; }
.empty-ico { color: var(--brand-600); display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--r-lg); background: var(--brand-50); border: 1px solid var(--brand-100); }
.empty-state.filtered .empty-ico { color: var(--muted); background: var(--surface-2); border-color: var(--line); }
.empty-state.error .empty-ico { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, var(--line)); }
.empty-ico .ico { width: 24px; height: 24px; }
.empty-title { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--ink); }
.empty-desc { font-size: var(--fs-13); color: var(--muted); max-width: 360px; }
.empty-act { margin-top: var(--sp-2); }

/* UserMenu (topbar 드롭다운, IA-E) — 내 보안·로그아웃·신원 통합 */
.usermenu { position: relative; flex: none; } /* S7: 토픽바 우측 버튼군 비축소(긴 breadcrumb 시 아바타 보존, 핸드오프) */
.usermenu-btn { display: flex; align-items: center; gap: var(--sp-2); height: 42px; padding: 0 8px 0 6px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer; }
.usermenu-btn:hover { background: var(--surface-2); border-color: var(--line); }
.usermenu-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; gap: 1px; }
.usermenu-meta #userName { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink); }
.usermenu-meta .role-chip { height: 16px; padding: 0 5px; font-size: var(--fs-11); }
.usermenu-caret { width: 14px; height: 14px; color: var(--muted); }
.usermenu-pop { position: absolute; top: calc(100% + 6px); right: 0; min-width: 184px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 4px; z-index: 30; display: grid; gap: 1px; }
.usermenu-item { display: flex; align-items: center; width: 100%; height: 36px; padding: 0 10px;
  background: transparent; border: 0; border-radius: var(--r-sm); font-size: var(--fs-13);
  font-weight: var(--fw-medium); color: var(--ink-2); cursor: pointer; text-align: left; }
.usermenu-item:hover { background: var(--surface-2); color: var(--ink); }
.usermenu-item.danger-txt { color: var(--danger); }

/* confirmModal(#15) 본문 텍스트 */
.cm-body { font-size: var(--fs-14); color: var(--ink-2); line-height: var(--lh-base); }

/* 초대 수락 비번 규칙 체크리스트(#18) */
.pw-rules { list-style: none; margin: 6px 0 var(--sp-3); padding: 0; display: grid; gap: 4px; }
.pw-rule { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--muted); }
.pw-rule .ico { color: var(--muted); }
.pw-rule.ok { color: var(--success); }
.pw-rule.ok .ico { color: var(--success); }

/* 복사 필드(#20) — 입력 + 1클릭 복사 버튼 */
.copy-row { display: flex; gap: var(--sp-2); align-items: stretch; }
.copy-row .input { flex: 1; min-width: 0; }
.copy-row .btn { flex: none; white-space: nowrap; height: auto; align-self: stretch; }

/* IdentityBadge(#16) — 제출 폼 상단 로그인 신원 */
.id-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; margin-bottom: var(--sp-3);
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-md);
  font-size: var(--fs-12); color: var(--brand-800); }
.id-badge b { font-weight: var(--fw-semibold); }
.id-badge .ico { color: var(--brand-600); }

/* 래퍼 탭(평가자 DB·공통 DB) 내부 — H1 생략(래퍼 단일 소유), sub·액션 행 */
.embed-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); min-height: 34px; }
.embed-head > div:first-child { min-width: 0; }
.embed-head > div:last-child { flex-shrink: 0; white-space: nowrap; }
.embed-head .sub { color: var(--muted); font-size: var(--fs-13); }

/* Breadcrumb (topbar #pageTitle) — 섹션 › 하위, 제목 이중표시 해소(F9/#13) */
#pageTitle { display: inline-flex; align-items: center; gap: 3px; }
#pageTitle .bc { color: var(--muted); font-weight: var(--fw-medium); }
#pageTitle .bc.cur { color: var(--ink); font-weight: var(--fw-semibold); }
#pageTitle .bc-sep { display: inline-flex; align-items: center; color: var(--line-strong); }
#pageTitle .bc-sep .ico { width: 13px; height: 13px; }

/* IA-G 평가자 모바일 하단 탭바 + IA-H 디바이스 게이트 안내 */
.mobile-tabs { display: none; }
.pc-note { display: flex; align-items: center; gap: 6px; padding: 8px 12px; margin-bottom: var(--sp-3);
  background: var(--warning-soft); color: var(--warning); border-radius: var(--r-md);
  font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.pc-note .ico { flex: none; }
@media (max-width: 720px) {
  .mobile-tabs { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 40; height: 56px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-md); }
  .mobile-tabs.hidden { display: none; }
  .mtab-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: none; border: 0; color: var(--muted); font-size: var(--fs-11); font-weight: var(--fw-semibold); cursor: pointer; }
  .mtab-btn .ico { width: 20px; height: 20px; }
  .mtab-btn.on { color: var(--brand-700); }
  .content { padding-bottom: 72px; } /* 하단 탭바 공간 확보 */
}

/* 오늘의 큐(#10) + KPI/Stat 카드(#12) + dueBadge(#11) */
.today-sect-lbl { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: var(--sp-5) 0 var(--sp-2); }
.kpi-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.kpi-strip-compact { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
/* 컴팩트 KPI 스트립 바로 아래 필터바가 붙으면 간격이 없어 답답 — 필터바 margin-bottom 과 대칭으로 위 간격 부여(검사수행통계·방문자). 캘린더 statstrip/오늘 KPI(필터바 미후속)는 미적용. */
.kpi-strip-compact + .filterbar { margin-top: var(--sp-4); }
.kpi-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: var(--sp-4) var(--sp-5); display: block; }
.kpi-card-compact { display: inline-flex; align-items: baseline; gap: 7px; min-width: 132px; padding: 8px 12px; border-radius: var(--r-md); }
a.kpi-card { color: inherit; }
a.kpi-card:hover { border-color: var(--brand-300); text-decoration: none; }
.kpi-num { font-size: var(--fs-30); font-weight: var(--fw-bold); letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-card-compact .kpi-num { font-size: var(--fs-18); letter-spacing: 0; }
.kpi-lbl { font-size: var(--fs-13); color: var(--muted); font-weight: var(--fw-semibold); margin-top: 2px; }
.kpi-card-compact .kpi-lbl { font-size: var(--fs-12); margin-top: 0; white-space: nowrap; }
.kpi-card.alert .kpi-num { color: var(--danger); }
/* S5: 검사수행통계 분해 카드 그리드(반응형) */
.stat-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
.stat-card .table td { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-12); }
.stat-detail > summary { cursor: pointer; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink-2); margin: var(--sp-2) 0; }
/* S7: 위계 실적 트리(검사수행통계) — 프로토콜 › 기관 › 평가자, 다지표(총·완료·취소·노쇼). 막대 없음(사용자 지시). lv0 클릭=수행상세 아코디언. */
/* 위계 실적 트리(HTML 목업 정밀) — 접기 chevron(.tacc/.tsub) + 다지표(.tmetric) + 프로토콜 [상세 ›](.tdetail)→수행검사 로그 오버레이 */
.tree { }
.tacc, .tsub { border-bottom: 1px solid var(--line); }
.tacc:last-child, .tsub:last-child { border-bottom: 0; }
/* 모든 행(lv0 head/lv1 head/lv2 leaf) 동일 4열 그리드 — chevron | name(1fr) | metric | 후행 [상세] 슬롯(고정폭, 빈 행도 예약). lv0 의 [상세 ›] 버튼이 metric 열을 좌시프트하던 정렬 깨짐 차단(모든 행 metric 우측경계 동일). */
.trow { display: grid; grid-template-columns: 13px minmax(0, 1fr) auto var(--tdetail-w, 64px); align-items: center; gap: var(--sp-4); width: 100%; padding: 11px var(--sp-5); border: 0; background: none; font: inherit; text-align: left; }
.trow.head { cursor: pointer; }
.trow.head:hover { background: var(--surface-2); }
.tchev { width: 13px; flex: none; color: var(--muted); font-size: 11px; line-height: 1; transition: transform .15s ease; }
.tacc.open > .trow .tchev, .tsub.open > .trow .tchev { transform: rotate(90deg); }
.tname { flex: 1; min-width: 0; font-size: var(--fs-13); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow.lv0 { background: var(--surface-2); }
.trow.lv0 .tname { font-weight: var(--fw-bold); color: var(--ink); }
/* 레벨 들여쓰기는 .tname(col2)에만 — .trow padding-left 로 주면 metric(col3)까지 우측이동해 lv1/lv2 가 lv0 와 재-미정렬됨. */
.trow.lv1 .tname { font-weight: var(--fw-semibold); padding-left: 20px; }
.trow.lv2 .tname { padding-left: 48px; }
.tbody[hidden] { display: none; }
.tmetric { display: flex; gap: var(--sp-4); flex: none; }
.tmetric .m { font-size: var(--fs-12); color: var(--muted); min-width: 78px; text-align: right; }
.tmetric .m b { color: var(--ink); font-family: var(--font-mono); font-weight: var(--fw-semibold); }
.tmetric .m.done b { color: var(--success); }
.tmetric .m.cancel b { color: var(--danger); }
.tdetail { justify-self: end; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--brand-700); padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-tag); background: var(--surface); white-space: nowrap; cursor: pointer; }
.tdetail:hover { background: var(--brand-50); border-color: var(--brand-500); }
.examlog-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.examlog-head .el-back { border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-sm); padding: 7px 13px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink-2); cursor: pointer; flex: none; }
.examlog-head .el-back:hover { background: var(--surface-2); border-color: var(--brand-400); }
.tmetric .m.sched b { color: var(--brand-700); }
/* 수행검사 로그 상태 칩(완료/취소·노쇼) — nowrap 고정(줄바꿈 깨짐 방지) */
.pill-done, .pill-miss, .pill-sched, .pill-cancel { display: inline-block; white-space: nowrap; padding: 2px 9px; border-radius: var(--r-tag); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.pill-done { background: var(--success-soft, #e3f3ec); color: var(--success); }
.pill-miss { background: var(--warning-soft, #fef4e6); color: var(--warning, #b45309); }
.pill-sched { background: var(--brand-50); color: var(--brand-700); }
.pill-cancel { background: var(--danger-soft, #fae5e0); color: var(--danger); }
@media (max-width: 920px) { .tmetric .m.done, .tmetric .m.sched { display: none; } }
/* S4: QC 워크플로 카운트 카드(클릭=상태그룹 필터) */
button.qc-card { cursor: pointer; text-align: left; font: inherit; width: 100%; }
button.qc-card:hover { border-color: var(--brand-300); }
button.qc-card.on { border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600); }
.qc-card-note { font-size: var(--fs-11); color: var(--muted); font-weight: var(--fw-regular); }
.today-card.urgent { border-left: 4px solid var(--warning); }
.due-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px;
  border-radius: var(--r-tag); font-size: var(--fs-11); font-weight: var(--fw-semibold); border: 1px solid transparent; }
.due-pill .due-dot { width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.due-pill.over { color: var(--danger); background: var(--danger-soft); }
.due-pill.soon { color: var(--warning); background: var(--warning-soft); }
.due-pill.up { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
/* QC-UX2a(P2): QC 큐 마감 전용 컬럼 셀 */
.due-cell { white-space: nowrap; font-weight: var(--fw-semibold); font-size: var(--fs-12); }
.due-cell.over { color: var(--danger); }
.due-cell.soon { color: var(--warning); }
.due-cell .lbl { color: var(--muted); font-weight: var(--fw-medium); }
.due-policy { border-top: 1px solid var(--line); margin-top: var(--sp-2); padding-top: var(--sp-3); }
.due-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-13); color: var(--ink); }
.due-num { width: 64px; text-align: center; padding: 4px 6px; }
.due-wd { width: auto; min-width: 80px; padding: 4px 8px; }
.due-radio, .due-check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.due-check { color: var(--muted); margin-left: 8px; }
.due-readonly { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin-top: var(--sp-2); padding: 8px 12px; background: var(--surface-2); border-radius: 6px; font-size: var(--fs-13); color: var(--ink); }
.due-readonly .hint { color: var(--muted); }
/* 배정 그룹형 매핑 테이블 */
.map-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--sp-4); }
.map-filters .hint { color: var(--muted); font-size: var(--fs-13); }
.map-filters .select { min-width: 150px; max-width: 220px; }
.map-grid td { vertical-align: middle; }
.map-grid td.grp { vertical-align: top; background: var(--surface-2); border-left: 1px solid var(--line); color: var(--ink); font-size: var(--fs-13); padding-top: 12px; }
.map-grid td.grp-inst { white-space: nowrap; }
.map-grid .inst-name { font-weight: var(--fw-semibold); margin-bottom: 6px; }
.map-grid .map-gstatus { min-width: 96px; }
.map-grid .input-sm, .map-grid .select-sm { padding: 4px 8px; font-size: var(--fs-13); }
.map-grid .input-sm { width: 100%; min-width: 110px; }
.map-grid .select-sm { min-width: 96px; }
.map-grid .map-act { white-space: nowrap; text-align: right; }
.map-grid .map-act .linklike { margin-right: 10px; }
.map-grid tr.map-closed td:not(.grp) { opacity: .5; }
/* DRAFT 에픽 — 초안 안내 / 상태 정적표시 */
.draft-note { margin-top: var(--sp-3); padding: 8px 12px; border: 1px dashed var(--line); border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: var(--fs-13); }
.static-field { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.static-field .hint { color: var(--muted); font-size: var(--fs-12); }
/* 기관담당자 상세 모달 */
.vd-head { font-size: var(--fs-15); margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.vd-sec { margin-top: var(--sp-4); }
.vd-sec .label { font-weight: var(--fw-semibold); margin-bottom: 4px; }
/* QC 평가자 inbox — '내 차례' 칩(절제: 브랜드 연한 배경, 원색 금지) */
.chip-turn { display: inline-block; font-size: var(--fs-12); padding: 2px 8px; border-radius: var(--r-tag); background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--line); width: fit-content; }
/* T6 전송 대기 배너(절제: 연한 배경·원색 금지) */
.flush-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); background: var(--brand-50); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: var(--fs-13); }
/* C 사용자 배정 뷰어(읽기전용) */
#ue_assign .label { font-weight: var(--fw-semibold); margin: var(--sp-2) 0 4px; }
.ua-card { padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 6px; font-size: var(--fs-13); }
.ua-fold { margin-top: 4px; }
.ua-fold summary { cursor: pointer; color: var(--muted); font-size: var(--fs-12); padding: 2px 0; }
/* QC stepper 되돌림(보완·반려) 안내 캡션 */
.qc-step-legend { margin-top: 6px; color: var(--muted); font-size: var(--fs-12); line-height: 1.5; }
.today-up { margin-top: var(--sp-5); }
.today-up > summary { cursor: pointer; font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); list-style: none; padding: var(--sp-2) 0; }
.today-up > summary:hover, .ua-fold summary:hover, details > summary:hover { background: var(--surface-2); }
.today-up > summary::-webkit-details-marker { display: none; }
@media (max-width: 720px) {
  .kpi-strip { gap: 6px; }
  .kpi-card { padding: var(--sp-3); }
  .kpi-num { font-size: var(--fs-24); }
  .kpi-card-compact { width: 100%; justify-content: space-between; }
  .kpi-card-compact .kpi-num { font-size: var(--fs-20); }
}

/* QC-UX2d(P1): 상태색=누구 차례 범례 */
.turn-legend { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; font-size: var(--fs-12); color: var(--muted); margin: 0 0 var(--sp-4); }
.turn-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.turn-legend .d { width: 9px; height: 9px; border-radius: 2px; flex: none; }
/* QC 큐 disposition 통계 pill (#9) — 상태별 카운트 = 카운트된 필터 (UX2d 후 마감 임박 pill 재사용) */
.qc-dispo { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.dispo-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-tag);
  font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--ink-2); cursor: pointer; }
.dispo-pill:hover { border-color: var(--brand-300); background: var(--brand-50); }
.dispo-pill.on { border-color: var(--brand-700); background: var(--brand-50); color: var(--brand-800); font-weight: var(--fw-semibold); }
.dispo-pill b { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.dispo-pill .dp-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--muted); }
.ta-r { text-align: right; }

/* SearchFilterBar (.filterbar 확장) — 고정높이·Reset·tabular 카운트 */
.fb { justify-content: space-between; min-height: var(--ctl-h); flex-wrap: wrap; }
.fb-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); min-width: 0; flex: 1; } /* flex:1 → 필터가 늘거나 줄어도(예: 통계 clin 의 '전체 연구') fb-left 가 폭을 흡수하고 내부에서 래핑 → 초기화/카운트(fb-right)는 항상 우상단 고정(탭마다 위치 안 변함) */
.fb-right { display: flex; align-items: center; gap: var(--sp-3); flex: none; align-self: flex-start; } /* 필터가 2행으로 래핑돼도(예: 통계 clin) 초기화/카운트는 항상 첫 행 우측 상단 고정 — 탭마다 수직 위치까지 동일 */
.fb-count { font-size: var(--fs-13); color: var(--muted); font-variant-numeric: tabular-nums; }
.fb-sep { margin: 0 2px; opacity: .6; }
.fb-reset .ico { margin-right: -2px; }
@media (max-width: 720px) { .fb { flex-wrap: wrap; } }
/* 평가자 typeahead(이름 검색→선택) — 체크박스 풀 대체. 선택 id 별도 보존(이름충돌 대비). */
.ta-wrap { position: relative; display: inline-block; }
.ta-wrap .ta-input { width: 180px; }
.ta-dd { position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px; max-height: 180px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 60; padding: 3px; }
.ta-opt { padding: 5px 9px; font-size: var(--fs-13); color: var(--ink-2); border-radius: var(--r-sm, 4px); cursor: pointer; }
.ta-opt:hover { background: var(--surface-2); color: var(--ink); }

/* 일정 모달 시간충돌 미리보기(동일 평가자 겹침; 서버가 저장 시 권위적 재검증) */
.conflict-box { display: flex; gap: 8px; align-items: flex-start; margin: var(--sp-3) 0 2px; padding: 8px 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--warning); border-radius: var(--r-md); background: var(--warning-soft); font-size: var(--fs-13); }
.conflict-box .ico { flex: none; margin-top: 2px; color: var(--warning); }
.conflict-box strong { color: var(--warning); }
.conflict-box ul { margin: 3px 0 0; padding: 0; list-style: none; }
.conflict-box li { line-height: 1.5; }

/* 검사결과 DB(results-db) — 원본 엑셀형 전체 컬럼 그리드(P2.1 U2): 가로 스크롤·조밀 셀·첫 컬럼 sticky. */
.rd-grid-wrap { overflow-x: auto; }
.rd-grid { width: max-content; min-width: 100%; }
.rd-grid thead th, .rd-grid tbody td { padding: 6px 10px; font-size: var(--fs-12); white-space: nowrap; }
.rd-grid tbody tr { cursor: pointer; }
.rd-grid td.rd-gf, .rd-grid th.rd-gf { text-align: right; font-variant-numeric: tabular-nums; }
/* 첫 컬럼(No) 고정 — 가로 스크롤 시 행 정렬 기준 유지 */
.rd-grid thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface-2); }
.rd-grid tbody td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.rd-grid tbody tr:hover td:first-child { background: var(--surface-2); }
/* S2 그리드 페이저 */
.rd-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.rd-pager .muted { font-size: var(--fs-13); }

/* 외부뷰어/내부 코멘트 스레드(연계 P4) — 작성자 유형별 좌보더(내부=brand·외부=중립, 원색 금지) */
.ext-thread { display: grid; gap: var(--sp-2); }
.ext-cmt { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--r-sm); background: var(--surface); display: grid; gap: 4px; }
.ext-cmt.in { border-left-color: var(--brand-600); }
.ext-cmt.ex { border-left-color: var(--muted); }

/* §3 평가자 배정 표형 모달 (HTML 디자인 매칭) — wide 모달·내부/외부 배지·표·모달 내 추가행. 원색 금지 */
.modal-wide { width: 720px; }
.kind-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--r-tag); font-size: var(--fs-11); font-weight: var(--fw-semibold); border: 1px solid var(--line); }
.kind-badge.kind-in { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-200); }
.kind-badge.kind-ex { color: var(--ink-2); background: var(--surface-2); }
.m-assignhead { margin-bottom: var(--sp-3); }
.m-assign { width: 100%; }
.m-assign td.grp { background: var(--surface-2); border-right: 1px solid var(--line); vertical-align: top; white-space: nowrap; font-weight: var(--fw-semibold); color: var(--ink); }
.m-assign .grpdel { display: block; margin-top: 2px; font-size: var(--fs-11); color: var(--muted); cursor: pointer; }
.m-assign .grpdel:hover { color: var(--danger); text-decoration: underline; }
.m-assign td.ac { text-align: center; }
.m-assign .center { text-align: center; }
.m-assign .xbtn { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }
.m-assign .xbtn:hover { color: var(--danger); }
.m-addrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: var(--sp-3); }
.m-addrow .m-addlbl { font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--ink-2); }
.m-addrow .select-sm { width: auto; min-width: 110px; }
details.hist { margin-top: var(--sp-4); }
details.hist > summary { cursor: pointer; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink-2); }
.hist-row { font-size: var(--fs-12); color: var(--muted); margin-top: 2px; }

/* §4·§5 편집 모달 (프로토콜·의뢰기관) — veri_patch HTML 목업 매칭. modal()+wide 위에서 동작. */
.modal-body .dblock + .dblock { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.modal-body .dsec { font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--ink-2); margin: 0 0 var(--sp-3); display: flex; align-items: baseline; gap: var(--sp-2); }
.opt-note { font-weight: var(--fw-regular); color: var(--muted); font-size: var(--fs-12); }
/* 방문 검사목록 (inline) */
.vx-bar { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.vx-bar .vx-sub { font-size: var(--fs-12); color: var(--muted); }
.vx-visit { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--sp-3); overflow: hidden; }
.vx-vhead { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.vx-vhead .vc { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--brand-800); font-size: var(--fs-14); }
.vx-vhead .vl { font-size: var(--fs-13); color: var(--ink-2); }
.vx-vhead .input, .vx-vhead .select { height: 32px; }
.vx-vhead .vacts { margin-left: auto; display: flex; gap: var(--sp-3); }
.vx-vhead .vacts a, .vx-row .ra a { font-size: var(--fs-12); color: var(--brand-700); cursor: pointer; font-weight: var(--fw-semibold); }
.vx-vhead .vacts a:hover, .vx-row .ra a:hover { text-decoration: underline; }
.vx-row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-4); border-bottom: 1px solid var(--line); }
.vx-row:last-child { border-bottom: 0; }
.vx-row .no { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--muted); width: 18px; flex: none; }
.vx-row .xn { font-weight: var(--fw-semibold); color: var(--ink); font-size: var(--fs-13); }
.vx-row .badge { font-size: var(--fs-11); font-weight: var(--fw-bold); padding: 2px 7px; border-radius: var(--r-tag); }
.vx-row .badge.req { background: var(--brand-50); color: var(--brand-800); }
.vx-row .badge.opt { background: var(--surface-2); color: var(--muted); }
.vx-row .ra { margin-left: auto; display: flex; gap: var(--sp-3); align-items: center; }
.vx-row .ra a.del { color: var(--danger); }
.vx-row .ra a.on { color: var(--brand-900); text-decoration: underline; }
.vx-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); }
.vx-add .select { width: auto; min-width: 160px; }
.vx-empty { padding: 9px var(--sp-4); color: var(--muted); font-size: var(--fs-13); }
/* 검사 체크리스트 (§5 의뢰기관) */
.ck-table { width: 100%; border-collapse: collapse; }
.ck-table th { text-align: left; font-size: var(--fs-12); color: var(--muted); font-weight: var(--fw-semibold); padding: 8px var(--sp-3); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ck-table td { padding: 9px var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-13); }
.ck-table td.ck-name { font-weight: var(--fw-semibold); color: var(--ink); }
.ck-table td.ck-c { text-align: center; width: 96px; }
.ck-table td.ck-act { text-align: right; width: 56px; }
.ck-table td.ck-act a { color: var(--brand-700); font-size: var(--fs-12); cursor: pointer; }
.ck-table td.ck-act a:hover { text-decoration: underline; }
.ck-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: var(--sp-3) 0 0; }
.ck-add .select { width: auto; min-width: 160px; }
.ck-add label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--ink-2); }