/* ============================================================
   해썹 운영 데스크 — 식품기업 HACCP 운영 기록
   토큰 이름은 비자 케이스 데스크(ui.html)와 같게, 값만 위생 녹색으로 다르게 둔다(2026-10-19).
   나중에 에이전트원 통합 플랫폼이 되면 모듈별 테마(값)만 갈아 끼우면 된다.
   비자 데스크와 다른 점: 작업장 휴대폰·태블릿이 1순위라 글자·높이를 한 단계씩 크게 잡는다.
   규칙은 tests/test_ui_rules.py 가 검사한다 — 새 색·크기를 쓰려면 아래 :root 에 토큰부터 만든다.
   ============================================================ */
:root {
  color-scheme: light;
  --topbar-h: 56px;
  --sidebar-w: 250px;
  --conn-h: 0px;               /* 서버 연결 끊김 띠 높이 — 띠가 떠 있는 동안만 app2.js 가 잰 값(2026-11-02 개선 #4) */

  /* 밝은 화면(2026-10-21): 진한 녹색 덩어리(메뉴·위쪽 막대·판 머리글)를 걷어 내고, 녹색은 강조(지금 위치·주 단추)에만 쓴다 */
  --bg:          #F3F5F4;
  --surface:     #FFFFFF;
  --surface-2:   #F7F9F8;
  --surface-3:   #EEF3F0;
  --brand-deep:  #1B4332;      /* 해썹 위생 녹색(짙은) — 로그인·잠금 바탕, 지금 위치 글자 */

  --side-bg: #FFFFFF; --side-active: #E1EFE6; --side-hover: #F3F5F4; --side-ink: #44554B; --side-ink-strong: #1B4332; --side-muted: #5F6E66; --side-line: #E3E8E5;
  --head-bg: #FFFFFF; --head-ink: #14201A; --head-muted: #5F6E66; --head-btn: #FFFFFF; --head-btn-hover: #F3F5F4; --head-btn-line: #D3DBD6;
  --th-bg: #F3F6F4; --zebra: #FAFBFA;
  --tab-bg: #EEF3F0; --tab-ink: #2F4A3C; --tab-on-bg: #2D6A4F; --tab-on-ink: #FFFFFF;

  --ink:   #14201A;
  --ink-2: #44554B;
  --ink-3: #5F6E66;      /* 흐린 글자 — 흰 바탕 대비 약 5:1(비자 데스크 2026-10-12 기준 4.5:1 이상) */
  --line:   #E3E8E5;
  --line-2: #D3DBD6;

  --accent:       #2D6A4F;
  --accent-hover: #1B4332;
  --accent-ink:   #FFFFFF;
  --accent-soft:  #E1EFE6;
  --accent-ring:  rgba(45, 106, 79, .3);
  --accent-2:     #40916C;   /* 두 번째 큰 단추(생산 시작·출고 등록) */

  /* 색의 뜻 — 비자 데스크 2026-10-12 결정 그대로:
     빨강(지금) › 주황(곧 · 이미 늦은 챙길 일) › 노랑(챙겨 둘 것) · 파랑(참고 · 진행) · 초록(끝남 · 여유) · 회색(해당 없음) */
  --crit: #D03B3B;    --crit-ink: #9B1C1C;    --crit-bg: #FBE9E9;
  --serious: #EC835A; --serious-ink: #9A4418; --serious-bg: #FBEBE2;
  --warn: #FAB219;    --warn-ink: #8A5A00;    --warn-bg: #FBF1DC;
  --info: #2A78D6;    --info-ink: #1C5CAB;    --info-bg: #E6EEFA;
  --good: #0CA30C;    --good-ink: #046A04;    --good-bg: #E6F5E6;
  --neutral: #8A968F; --neutral-ink: #4C5A52; --neutral-bg: #EAEFEC;
  --read-ink: #8A6A00; --read-bg: #FFF3A6;   /* 판독으로 채웠지만 사람이 아직 확인하지 않은 칸 — 진짜 노랑 */

  --overlay: rgba(10, 20, 15, .48);
  --toast-bg: #14201A;

  --shadow-1: 0 1px 2px rgba(16, 32, 24, .05);
  --shadow-2: 0 6px 20px -6px rgba(16, 32, 24, .2), 0 2px 6px rgba(16, 32, 24, .06);
  --shadow-3: 0 24px 60px -12px rgba(16, 32, 24, .32);

  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* 글자 크기 여섯 단계 + 큰 숫자 두 단계. 비자 데스크(11·12·13·14·16)보다 한 단계씩 크다. xl(20)은 화면 제목 한 곳만(2026-10-30).
     입력칸은 16px 아래로 내리지 않는다 — 아이폰이 16px 미만 입력칸을 누르면 화면을 확대해 버린다 */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 20px;
  --fs-num: 24px; --fs-num-lg: 30px;

  /* 높이 — 현장 주 동작 56 · 단추·입력칸 44(장갑·젖은 손) · 작은 단추 36 · 배지 24.
     padding 만으로 높이를 잡으면 한 줄에 선 단추·입력칸의 아래 변이 어긋난다(비자 데스크 2026-09-26) */
  --h-xl: 56px; --h-lg: 44px; --h-md: 36px; --h-sm: 24px;
  --panel-head-h: 48px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;

  --sans: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Pretendard", system-ui, sans-serif;
  --mono: "D2Coding", "SFMono-Regular", Consolas, "Malgun Gothic", "Apple SD Gothic Neo", monospace;   /* 한글 글꼴을 뒤에 — 없으면 JSON 속 한글이 깨져 보였다 */
}

/* ---------- 바탕 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: var(--sans); font-size: var(--fs-base); line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-text-size-adjust: 100%; }
/* hidden 은 늘 숨긴다 — display 를 준 클래스에 hidden 을 걸면 브라우저 기본 규칙이 져서 숨지 않는다(비자 데스크에서 겪은 일) */
[hidden], .hidden { display: none !important; }
a { color: var(--accent); cursor: pointer; }
code { font-family: var(--mono); font-size: var(--fs-sm); background: var(--surface-3); padding: 1px 5px; border-radius: var(--r-sm); }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
/* 안내문 — 폼 안팎 어디서든 본문과 구분되게 한 치수 작고 흐리게 */
.hint { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.5; margin: var(--sp-1) 0 var(--sp-2); }
.err { color: var(--crit-ink); min-height: 1.2em; margin: var(--sp-1) 0; }
.txt-crit { color: var(--crit-ink); font-weight: 700; }
.mt { margin-top: var(--sp-3); }
.mt-sm { margin-top: var(--sp-2); }
.m0 { margin: 0 !important; }
.full { width: 100%; }
.shrink { flex: 0 0 auto !important; }
.dim { opacity: .6; }
.struck { opacity: .5; text-decoration: line-through; }
.screen { min-height: 100%; }
/* ---------- 제목 위계(2026-10-30 정리) — 네 단계만 쓴다. 화면 제목 20 › 창 제목 18 › 구역 제목 16(h3·판 제목) › 묶음 제목 14(h4·설정 머리).
   굵기는 400·700 둘뿐(아이패드 글꼴은 600·800이 다른 굵기로 그려져 글씨체가 달라 보였다), 제목 색은 --ink 로 같게 — 녹색은 고른 것·주 단추에만 ---------- */
h1, h2, h3, h4 { font-weight: 700; color: var(--ink); line-height: 1.3; letter-spacing: -.01em; }
h1 { font-size: var(--fs-num); margin: 0 0 var(--sp-3); }
h2 { font-size: var(--fs-xl); margin: var(--sp-2) 0 var(--sp-4); }
#main > h2:first-child { margin-top: 0; }
h3 { font-size: var(--fs-base); margin: var(--sp-4) 0 var(--sp-2); }
h4 { font-size: var(--fs-md); margin: var(--sp-3) 0 var(--sp-1); color: var(--ink-2); }

/* ---------- 로그인 ---------- */
#login { display: flex; align-items: center; justify-content: center; padding: var(--sp-4); background: linear-gradient(160deg, var(--brand-deep), var(--accent)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-1); margin-bottom: var(--sp-3); }
.card.ccp { border-left: 4px solid var(--accent); }
.login { width: 100%; max-width: 380px; }
.login h1 { margin: 0 0 var(--sp-1); font-size: var(--fs-num); color: var(--ink); }

/* ---------- 입력 ---------- */
label { display: block; margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-md); color: var(--ink-2); }
label.inline { display: inline-flex; align-items: center; gap: 6px; margin: var(--sp-1) var(--sp-3) var(--sp-1) 0; color: var(--ink); }
input, select, textarea { width: 100%; font: inherit; font-size: var(--fs-base); min-height: var(--h-lg); padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--ink-2); }
/* 체크박스·라디오는 22px — 작으면 장갑 낀 손으로 빗나간다 */
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-height: 0; margin: 0 6px; accent-color: var(--accent); }
input[type=file] { min-height: var(--h-lg); padding: 8px; }
/* 긴 글 칸은 내용만큼 늘어난다(2026-10-21) — 88px 칸 안에서 스크롤해야 배합비율·제조방법이 다 보였다.
   field-sizing 을 모르는 브라우저는 app.js growTextarea 가 높이를 맞춘다. 너무 길면 화면 70%에서 멈추고 그때만 스크롤 */
textarea { min-height: 72px; field-sizing: content; max-height: 70vh; resize: vertical; }
/* 한 줄 칸에 칸보다 긴 글이 들어 있으면 창을 열 때 줄바꿈되는 칸(.line)으로 바꾼다 — 엔터로 줄을 나누지는 않는다(app.js fitLongInputs) */
textarea.line { min-height: var(--h-lg); resize: none; overflow: hidden; }
.code-area { min-height: 220px; font-family: var(--mono); font-size: var(--fs-sm); }
.code-area.short { min-height: 110px; }
.w-num { width: 96px !important; flex: 0 0 96px !important; }
.w-unit { width: 64px !important; flex: 0 0 64px !important; }
.read-fill { background: var(--read-bg) !important; border-color: var(--warn) !important; }

/* ---------- 단추 ---------- */
.btn { font: inherit; font-size: var(--fs-base); font-weight: 700; min-height: var(--h-lg); padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { background: var(--crit); color: var(--accent-ink); border-color: var(--crit); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); }      /* 고른 기간 단추(통계) 표시(2026-10-31 점검) */
.btn.sm { min-height: var(--h-md); padding: 0 12px; font-size: var(--fs-md); border-radius: var(--r-sm); }
.btn.big { width: 100%; min-height: var(--h-xl); font-size: var(--fs-lg); margin-top: var(--sp-3); }
.btn.cam { width: 100%; min-height: var(--h-xl); font-size: var(--fs-lg); background: var(--accent); color: var(--accent-ink); border-color: var(--accent); border-radius: var(--r-lg); gap: 10px; }
.btn.cam:hover { background: var(--accent-hover); }
.btn.cam.alt { background: var(--surface); color: var(--accent); border-color: var(--line-2); }   /* 주 동작은 하나만 진하게 — 나란히 선 두 번째 큰 단추는 테두리만 */
.btn.cam.alt:hover { background: var(--accent-soft); border-color: var(--accent); }
/* 큰 단추의 긴 글은 줄을 바꾼다 — 375px 휴대폰에서 '입고 확정 → …'·'■ 작업 종료 → …' 끝이 잘리던 것(점검 2026-10-21 M2) */
.btn.big, .btn.cam { white-space: normal; text-align: center; line-height: 1.3; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.row > .btn.big { flex: 1 1 220px; }
.row > .btn.cam { flex: 1 1 220px; }   /* 다른 단추와 한 줄에 선 큰 단추(입고 확정)는 좁으면 혼자 한 줄 — 155px 폭에 세 줄로 접히던 것 */
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- 아이콘 — 한 가지 굵기의 선 아이콘(2026-10-21). 이모지는 기기마다 다르게 그려져 쓰지 않는다 ----------
   쓰는 법: <i class="ic ic-이름"></i> — 글자색(currentColor)을 따라 칠해진다. 새 아이콘은 이 목록에 더한다 */
.ic { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic-today { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4M12 16h4M8 11h.01M8 16h.01'/%3E%3C/svg%3E"); }
.ic-folder { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); }
.ic-doc { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"); }
.ic-inbound { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
.ic-factory { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M17 18h1M12 18h1M7 18h1'/%3E%3C/svg%3E"); }
.ic-truck { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }
.ic-package { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E"); }
.ic-chart { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9M13 17V5M8 17v-3'/%3E%3C/svg%3E"); }
.ic-thermo { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z'/%3E%3C/svg%3E"); }
.ic-users { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.ic-alert { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.ic-db { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14a9 3 0 0 0 18 0V5'/%3E%3Cpath d='M3 12a9 3 0 0 0 18 0'/%3E%3C/svg%3E"); }
.ic-building { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E"); }
.ic-sliders { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E"); }
.ic-user { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.ic-logout { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }
.ic-menu { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); }
.ic-bell { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.ic-more { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Ccircle cx='19' cy='12' r='1.2'/%3E%3C/svg%3E"); }
.ic-search { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.ic-camera { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); }
.ic-printer { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E"); }
.ic-calendar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.ic-clip { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E"); }
.ic-file { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E"); }
.ic-x { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.ic-check { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.ic-check-circle { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ic-lock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.ic-book { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E"); }
.ic-idea { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6M10 22h4'/%3E%3C/svg%3E"); }
.ic-message { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath d='M8 12h.01M12 12h.01M16 12h.01'/%3E%3C/svg%3E"); }
.ic-idcard { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Cpath d='M13 10h5M13 14h4M5 16.5c.6-1.2 1.7-1.8 3-1.8s2.4.6 3 1.8'/%3E%3C/svg%3E"); }
.ic-count { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }

/* ---------- 위쪽 막대 · 왼쪽 메뉴 · 아래 탭 ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--sp-2); min-height: var(--topbar-h); background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); padding: 6px var(--sp-3); padding-top: max(6px, env(safe-area-inset-top)); }
.topbar .brand { flex: 1; min-width: 0; line-height: 1.2; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .brand small { display: block; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.topbar select { width: auto; max-width: 45%; min-height: var(--h-md); padding: 4px 8px; font-size: var(--fs-md); }
.icon { position: relative; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--r-md); color: var(--ink-2); font-size: var(--fs-num); min-width: var(--h-lg); min-height: var(--h-lg); cursor: pointer; line-height: 1; }
.icon:hover { background: var(--surface-2); color: var(--ink); }
.badge { position: absolute; top: 2px; right: 0; background: var(--crit); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 700; border-radius: var(--r-pill); padding: 0 5px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; }
.sidenav { position: fixed; top: 0; left: calc(-1 * var(--sidebar-w) - 10px); width: var(--sidebar-w); height: 100%; background: var(--side-bg); border-right: 1px solid var(--side-line); z-index: 30; box-shadow: var(--shadow-2); transition: left .2s; padding: calc(var(--topbar-h) + 4px) 0 20px; display: flex; flex-direction: column; overflow: auto; contain: paint; }
.sidenav.open { left: 0; }
.sidenav a { display: flex; align-items: center; gap: 12px; min-height: var(--h-lg); margin: 1px 10px; padding: 0 12px; border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-base); color: var(--side-ink); text-decoration: none; }
.sidenav a .ic { width: 20px; height: 20px; color: var(--side-muted); }
.sidenav a:hover { background: var(--side-hover); color: var(--side-ink-strong); }
.sidenav a.active { background: var(--side-active); color: var(--side-ink-strong); font-weight: 700; }
.sidenav a.active .ic { color: var(--accent); }
main { padding: var(--sp-3); padding-bottom: 92px; max-width: 1100px; margin: 0 auto; }
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--surface); border-top: 1px solid var(--line); z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { flex: 1; min-height: var(--h-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--ink-3); text-decoration: none; line-height: 1.1; }
.tabbar a .ic { width: 24px; height: 24px; }
.tabbar a span { display: block; font-size: var(--fs-xs); }
.tabbar a.active { color: var(--accent); font-weight: 700; }

/* ---------- 최근 본 기록 탭(넓은 화면만) — 비자 데스크 2026-10-13 · 15 ----------
   종류 딱지 + 이름 한 줄(넘치면 줄임) + 닫기. 지금 열어 둔 것은 짙은 녹색으로 칠한다 */
.recent { display: none; }
@media (min-width: 900px) {
  .sidenav { left: 0; top: var(--topbar-h); height: calc(100% - var(--topbar-h)); padding-top: var(--sp-2); box-shadow: none; }   /* 위쪽 막대(기업명·사용자)를 가리지 않게 */
  main { margin-left: var(--sidebar-w); max-width: none; padding: 20px 28px 40px; }
  .tabbar, #menuBtn { display: none; }
  .recent:not(:empty) { display: flex; gap: 6px; align-items: center; position: sticky; top: var(--topbar-h); z-index: 15; margin-left: var(--sidebar-w); padding: 6px 28px; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; }
}
.rt { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 260px; min-height: var(--h-md); padding: 0 4px 0 6px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-md); font-weight: 700; cursor: pointer; box-shadow: var(--shadow-1); }
.rt:hover { border-color: var(--accent); }
.rt .k { flex: none; white-space: nowrap; font-size: var(--fs-xs); font-weight: 700; padding: 1px 6px; border-radius: var(--r-sm); background: var(--neutral-bg); color: var(--neutral-ink); }
.rt .k.accent { background: var(--accent-soft); color: var(--accent); }
.rt .k.info { background: var(--info-bg); color: var(--info-ink); }
.rt .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rt .tn { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); }
.rt .x { border: 0; background: none; color: var(--ink-3); font-size: var(--fs-md); padding: 0 5px; border-radius: var(--r-sm); cursor: pointer; line-height: 1.4; }
.rt .x:hover { background: var(--line); color: var(--ink); }
.rt.on { background: var(--tab-on-bg); border-color: var(--tab-on-bg); color: var(--tab-on-ink); }
.rt.on .k { background: var(--surface); color: var(--tab-on-bg); }
.rt.on .x, .rt.on .tn { color: var(--tab-on-ink); }

/* ---------- 판(panel) — 머리 48px 하나, 제목 한 줄, 누르면 접힘 ----------
   설명(.panel-note)은 제목이 차지하고 남은 자리만 쓴다(flex-basis 0) — 휴대폰에서 'flex-shrink 1000' 만으로는 제목도 같이 잘렸다(2026-10-19 확인) */
.panel { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-1); margin-bottom: var(--sp-3); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 10px; height: var(--panel-head-h); padding: 0 var(--sp-2) 0 6px; background: var(--head-bg); color: var(--head-ink); border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; }
.panel.folded > .panel-head { border-bottom-color: transparent; }
.panel-head .fold { flex: none; width: 32px; height: 32px; border: 0; background: none; color: var(--head-muted); font-size: var(--fs-lg); cursor: pointer; transform: rotate(90deg); transition: transform .15s; }
.panel.folded .panel-head .fold { transform: rotate(0deg); }
.panel-title { margin: 0; flex: 0 1 auto; min-width: 0; font-size: var(--fs-base); font-weight: 700; color: var(--head-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-title .cnt { font-weight: 400; color: var(--head-muted); margin-left: 4px; }
.panel-note { flex: 1 1 0; min-width: 0; font-size: var(--fs-sm); color: var(--head-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-tools { margin-left: auto; display: flex; gap: 6px; flex: none; }
.panel-tools .btn { min-height: var(--h-md); padding: 0 10px; font-size: var(--fs-md); background: var(--head-btn); border-color: var(--head-btn-line); color: var(--head-ink); }
.panel-tools .btn:hover { background: var(--head-btn-hover); }
/* 휴대폰(2026-10-31 점검): 단추가 넓으면 제목이 '계' 한 글자로 눌리던 것 — 제목은 줄이지 않고 단추를 다음 줄로 내린다 */
@media (max-width: 640px) {
  .panel-head { flex-wrap: wrap; height: auto; min-height: var(--panel-head-h); row-gap: var(--sp-1); padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
  .panel-title { flex: 0 0 auto; max-width: calc(100% - 40px); }
  .panel-tools { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
}
.panel-body { padding: var(--sp-4); }
.panel-body.flush { padding: 0; }
.panel.folded > .panel-body { display: none; }
.panel-body > .list li { box-shadow: none; border: 1px solid var(--line); }
.panel-body > .list li:last-child { margin-bottom: 0; }
.panel-body.flush > .tbwrap { border-radius: 0; }
.panel-body.flush > .tbwrap > table.tb { border-radius: 0; }

/* ---------- 지표 타일 — 숫자는 크게(비자 데스크 2026-10-15) ---------- */
.grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--sp-3); }
/* 지표 칸 배치: 휴대폰 2칸 · 태블릿 3칸 · 넓은 화면 6칸 — 자동 채우기는 5+1처럼 어긋나게 줄을 바꿨다 */
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stat { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; }
.stat b { display: block; font-size: var(--fs-num-lg); line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat small { display: block; margin-top: var(--sp-1); color: var(--ink-3); font-size: var(--fs-md); }
/* 숫자 칸 색은 챙길 일에만(2026-10-21) — 끝남·참고(good·info)는 무채색, 챙길 일은 숫자 색 + 이름 앞 점, 지금(crit)은 테두리까지.
   칸마다 색 띠를 두르면 무지개가 되어 정작 빨간 칸이 눈에 띄지 않았다 */
.stat.crit small::before, .stat.serious small::before, .stat.warn small::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: var(--r-pill); vertical-align: 1px; background: var(--warn); }
.stat.crit { border-color: var(--crit); } .stat.crit b { color: var(--crit-ink); } .stat.crit small::before { background: var(--crit); }
.stat.serious b { color: var(--serious-ink); } .stat.serious small::before { background: var(--serious); }
.stat.warn b { color: var(--warn-ink); }
.stat.info b { color: var(--ink); }
.stat.good b { color: var(--ink); }

/* ---------- 목록 · 배치 ---------- */
.row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.row > * { flex: 1; }
/* 입력칸 묶음(label)은 기본 폭 140px — 휴대폰에서 네 칸이 한 줄에 44px씩 찌그러지던 것을 두 줄로 바꾼다(점검 2026-10-21 U1) */
.row > label { flex: 1 1 140px; min-width: 0; }
.row.nowrap { flex-wrap: nowrap; }
.row.sp { justify-content: space-between; }
.right { text-align: right; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { background: var(--surface); border-radius: var(--r-md); min-height: var(--h-xl); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: var(--shadow-1); }
.list li:hover { border-color: var(--accent); }
.list li .t { flex: 1; min-width: 0; }
.list li .t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li .t small { color: var(--ink-3); font-size: var(--fs-sm); }
.list li.muted { cursor: default; }
.list li .t small.fb-reply { display: block; margin-top: var(--sp-1); color: var(--accent); }   /* 개선 요청에 달린 답 */
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.more-grid a { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 6px; text-align: center; font-size: var(--fs-md); cursor: pointer; color: var(--ink); text-decoration: none; }
.more-grid a .ic { display: block; width: 28px; height: 28px; margin: 0 auto var(--sp-2); color: var(--accent); }
.tabs { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 4px; padding: 0 4px; margin-bottom: 10px; border-bottom: 2px solid var(--tab-on-bg); overflow-x: auto; scrollbar-width: thin; }      /* 서류철 탭(2026-10-29) */
.tabs button { white-space: nowrap; flex: 0 0 auto; min-height: 44px; border: 1px solid var(--line-2); border-bottom: none; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--tab-bg); color: var(--tab-ink); font-weight: 700; }
.tabs button.on { min-height: 48px; background: var(--tab-on-bg); color: var(--tab-on-ink); border-color: var(--tab-on-bg); }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-md); }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }
.lotpick { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2); margin: 6px 0; background: var(--surface-2); }
details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 14px; margin-bottom: var(--sp-2); }
summary { cursor: pointer; font-weight: 700; min-height: var(--h-md); display: flex; align-items: center; }
.agent-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-1); cursor: pointer; }
.agent-card h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); }
.bar { height: 10px; background: var(--neutral-bg); border-radius: 5px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.bar i.crit { background: var(--crit); } .bar i.warn { background: var(--warn); } .bar i.good { background: var(--good); }

/* ---------- 상태 알약 · 알림 상자 — 색은 뜻(tone)으로만 고른다 ---------- */
.pill { display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.pill.crit { background: var(--crit-bg); color: var(--crit-ink); }
.pill.serious { background: var(--serious-bg); color: var(--serious-ink); }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill.info { background: var(--info-bg); color: var(--info-ink); }
.pill.good { background: var(--good-bg); color: var(--good-ink); }
.pill.neutral { background: var(--neutral-bg); color: var(--neutral-ink); }
.box { border-left: 4px solid var(--neutral); background: var(--neutral-bg); padding: var(--sp-3); border-radius: var(--r-md); margin: var(--sp-2) 0; font-size: var(--fs-md); }
.box.neutral { border-color: var(--neutral); background: var(--neutral-bg); }
.box.crit { border-color: var(--crit); background: var(--crit-bg); }
.box.serious { border-color: var(--serious); background: var(--serious-bg); }
.box.warn { border-color: var(--warn); background: var(--warn-bg); }
.box.info { border-color: var(--info); background: var(--info-bg); }
.box.good { border-color: var(--good); background: var(--good-bg); }
.box input { margin-top: 6px; }

/* ---------- 표 — 머리줄 색 띠 · 줄무늬 · 숫자는 한 치수 크고 굵게 ---------- */
.tbwrap { overflow: auto; border-radius: var(--r-md); border: 1px solid var(--line); }
table.tb { width: 100%; border-collapse: collapse; background: var(--surface); font-size: var(--fs-md); }
table.tb th, table.tb td { padding: 10px var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.tb th { background: var(--th-bg); font-weight: 700; color: var(--ink); white-space: nowrap; }
table.tb tr:nth-child(even) td { background: var(--zebra); }
table.tb tr.click { cursor: pointer; }
table.tb tr.row-warn td { background: var(--warn-bg); }
table.tb tr.struck td { text-decoration: line-through; }
table.tb input, table.tb select { min-height: var(--h-md); padding: 4px 8px; }
/* 표 안 입력칸 최소 폭 — 자동 폭 표 안에서 25px까지 줄어 글이 안 보이던 것. 넘치면 표만 옆으로 민다(점검 2026-10-21 U1).
   입고 품목(서류상 이름·내부 품목 연결)과 출고 로트 선택은 이름이 길어 더 넓게 */
table.tb td > input:not(.w-num):not(.w-unit):not([type=checkbox]):not([type=radio]), table.tb td > select { min-width: 120px; }
#lines td:first-child > input, #lines td:first-child > select, #olines td > select { min-width: 220px; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-base); }
/* 좁은 화면 — 덜 급한 열(.opt)을 접는다. 인쇄·엑셀은 서버가 따로 만드므로 값이 사라지지 않는다 */
@media (max-width: 640px) { table.tb .opt { display: none; } }
/* 터치 화면(휴대폰·태블릿) — 작은 단추·표 안 칸도 44px, 글자 링크는 누름 영역을 넓힌다. 마우스로 쓰는 PC는 촘촘한 그대로(점검 2026-10-21 U8).
   장갑 낀 손으로 36px 단추·19px 글자 링크를 빗나가던 것 */
@media (pointer: coarse) {
  .btn.sm, .panel-tools .btn, .field .sug { min-height: var(--h-lg); }
  table.tb input:not([type=checkbox]):not([type=radio]), table.tb select { min-height: var(--h-lg); }
  .box a, .hint a, .kv a, table.tb td a { display: inline-flex; align-items: center; min-height: var(--h-md); padding: 0 var(--sp-1); }
  #queueBadge, #ccpChip { height: auto; min-height: var(--h-lg); padding: 0 var(--sp-3); }      /* 미전송·전송 실패 단추(2026-10-31 점검) · 다음 CCP 칩(2026-11-02 개선 #4) */
}

/* ---------- 점검 항목 — 한 줄 한 항목 + 큰 적합/부적합 단추 ----------
   배치는 화면 폭이 아니라 이 칸(form)의 폭으로 바꾼다(container query) — 넓은 모니터의 좁은 창에서도 맞게 */
.cq { container-type: inline-size; }
.chk { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); }
.chk:last-child { border: none; }
.chk .q { flex: 1; font-size: var(--fs-base); }
.chk .opts { display: grid; grid-template-columns: repeat(3, minmax(96px, 1fr)); gap: 6px; }   /* 세 단추 같은 크기(2026-10-26) */
.chk .opts button { min-width: 96px; min-height: var(--h-lg); padding: 0 14px; font: inherit; font-size: var(--fs-base); font-weight: 700; border-radius: var(--r-md); border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; }
.chk .opts button.yes.on { background: var(--good-bg); border-color: var(--good); color: var(--good-ink); }
.chk .opts button.no.on { background: var(--crit-bg); border-color: var(--crit); color: var(--crit-ink); }
.chk .opts button.na.on { background: var(--neutral-bg); border-color: var(--neutral); color: var(--neutral-ink); }
/* 종이 일지 모양(2026-10-26): ×(불량)일 때만 비고 칸, 기준·방법 안내는 접어 둔다 */
.chk .chk-note { display: none; flex: 1 0 100%; margin-top: 6px; }
.chk.is-no .chk-note { display: block; }
.chk { flex-wrap: wrap; }
details.paper-info { margin: 0 0 var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: 0; overflow: hidden; }
details.paper-info > summary { cursor: pointer; padding: 8px 12px; font-weight: 700; }
details.paper-info table.tb th { width: 110px; white-space: nowrap; vertical-align: top; }
details.paper-info > table.tb { border-top: 1px solid var(--line); }      /* 여백을 걷어 낸 뒤 머리와 표 사이 한 줄(2026-10-31 점검) */
details.paper-info > table.tb tr:last-child > * { border-bottom: 0; }      /* 바깥 테두리와 겹줄이 되지 않게(2026-10-31 점검) */
.paper-notice { line-height: 1.6; }
/* 작업지시 화면(2026-10-26): 원료 투입 표, CCP 측정 ± 단추·판정 단추 */
table.tb.mat td, table.tb.mat th { vertical-align: middle; }
table.tb.mat td.num, table.tb.mat th.num { text-align: right; white-space: nowrap; }
table.tb.mat select { min-width: 160px; }
table.tb.mat td:first-child { white-space: nowrap; }
.ccp-in { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; }
.ccp-in > .ccp-f { flex: 1 1 300px; margin: 0; }
.ccp-in > .btn.big { flex: 0 0 auto; min-width: 140px; }
.ccp-lbl { font-size: var(--fs-base); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.ccp-std { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-hover); font-size: var(--fs-sm); font-weight: 700; }
.stepper { display: flex; gap: 6px; align-items: stretch; }
.st-grp { display: flex; gap: 3px; }
.st-grp .btn { min-width: 46px; min-height: var(--h-lg); padding: 0 6px; font-weight: 700; }
.st-grp.minus .btn { color: var(--info-ink, var(--ink)); }
.st-val { position: relative; flex: 0 0 120px; }
.st-val input { width: 100%; height: 100%; min-height: var(--h-lg); text-align: center; font-size: var(--fs-num); font-weight: 700; padding-right: 26px; border: 2px solid var(--accent); }
.st-unit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font-weight: 700; pointer-events: none; }
.ccp-f > .ccp-pick { gap: var(--sp-2); }      /* .rsel 보다 특이도를 높여 큰 판정 단추가 먹게(2026-10-31 점검) */
.hol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 8px; }
.chk.off-cad { opacity: .55; }
table.tb td.tot input { background: var(--surface-2); font-weight: 700; text-align: center; border-style: dashed; }
table.tb td.na { background: var(--surface-2); background-image: repeating-linear-gradient(45deg, transparent 0 6px, var(--line) 6px 7px); }
/* 생산 일자별·월력(2026-10-26) */
.day-nav { align-items: center; }
.day-nav input[type=date] { flex: 1 1 120px; min-width: 0; max-width: 180px; }
.wo-cal td.pd { height: 96px; }
.wo-cal .pd-day { cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.wo-cal .pd-h small { margin-left: auto; }
/* 금속검출 판정표(2026-10-26): 항목 | 정상 | 이탈 한 줄씩 */
.ccp-match { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ccp-match .cm-head, .ccp-match .cm-row { display: grid; grid-template-columns: minmax(150px, 1fr) 120px 120px 110px; gap: 8px; align-items: center; padding: 6px 12px; }
.ccp-match .cm-head { background: var(--surface-2); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.ccp-match .cm-head span:nth-child(2), .ccp-match .cm-head span:nth-child(3) { text-align: center; }
.ccp-match .cm-row { border-top: 1px solid var(--line); }
.ccp-match .cm-row button { min-height: var(--h-lg); min-width: 0; font-size: var(--fs-base); }
.ccp-match .cm-lbl b { display: block; font-size: var(--fs-base); }
.ccp-match .cm-lbl small { color: var(--ink-2); }
@media (max-width: 640px) { .ccp-match .cm-head, .ccp-match .cm-row { grid-template-columns: 1fr 80px 80px; } .ccp-match .cm-head .btn { grid-column: 1 / -1; } }
.peers { display: flex; flex-wrap: wrap; gap: 4px var(--sp-3); align-items: center; padding: 6px 10px; background: var(--surface-2); border-radius: var(--r-md); }
.ccp-f > .ccp-pick button { min-height: var(--h-xl); min-width: 130px; padding: 0 var(--sp-4); font-size: var(--fs-lg); }
/* 일괄 양호(2026-10-26): 구분 머리 오른쪽 단추, 행 표의 줄마다·모두 */
.sect { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.sect .bulk-ok { margin-left: auto; }
.row-ok, .all-rows-ok { white-space: nowrap; }
/* 부적합 조치 문구 고르기(2026-10-26) */
select.nc-pick { margin: 4px 0; background: var(--surface-2); }
/* 표 행 안의 있음/없음 단추(종사자 건강상태 등 — 2026-10-22 요청 9) */
.rsel { display: inline-flex; gap: 4px; }
.rsel button { min-height: var(--h-md); padding: 0 10px; font: inherit; font-size: var(--fs-sm); font-weight: 700; border-radius: var(--r-md); border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; }
.rsel button.yes.on { background: var(--good-bg); border-color: var(--good); color: var(--good-ink); }
.rsel button.no.on { background: var(--crit-bg); border-color: var(--crit); color: var(--crit-ink); }
.rsel button:disabled { opacity: .7; cursor: default; }
.chk.miss { background: var(--crit-bg); }   /* 서명 전 답하지 않은 점검 항목(점검 2026-10-21 U5) */
table.rows tr.miss td { background: var(--crit-bg); }   /* 이름만 있고 값이 빈 줄(점검 2026-10-21 M1 빈 줄) */
@container (max-width: 520px) {
  .chk { flex-wrap: wrap; }
  .chk .q { flex: 1 0 100%; }
  .chk .opts { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chk .opts button { min-width: 0; padding: 0 6px; }
  .chk .opts button { flex: 1; }
}
.sect { margin: var(--sp-4) 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-base); font-weight: 700; color: var(--accent-hover); background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: var(--r-sm); }
.field { margin: var(--sp-3) 0; }
.field .lbl { font-size: var(--fs-md); color: var(--ink-2); margin-bottom: var(--sp-1); }
/* 제안값 적용 — 13px 밑줄 글자였던 것을 누르기 쉬운 알약 단추 모양으로(점검 2026-10-21 U8). 그래도 사람이 눌러야 채워진다 */
.field .sug { display: inline-flex; align-items: center; min-height: var(--h-md); padding: 0 10px; margin-left: var(--sp-1); font-size: var(--fs-sm); font-weight: 700; color: var(--info-ink); background: var(--info-bg); border: 1px solid var(--info); border-radius: var(--r-pill); cursor: pointer; text-decoration: none; }
.field input.out { border-color: var(--crit); background: var(--crit-bg); }
/* 일지 행 기준(냉장 10℃·냉동 −18℃) 벗어남 — 판정 칸도 같이 표시해 사람이 '이탈'을 고르게(점검 2026-10-21 R7) */
.tb.rows input.out, .tb.rows select.out { border-color: var(--crit); background: var(--crit-bg); }
.range { font-size: var(--fs-sm); color: var(--ink-3); }
.photo-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.photo-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); cursor: zoom-in; }
.photo-thumbs .ph { position: relative; display: inline-block; }
.photo-thumbs .ph-del { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--crit); background: var(--crit-bg); color: var(--crit-ink); font-weight: 700; line-height: 1; cursor: pointer; }
.sig { display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 10px; background: var(--good-bg); color: var(--good-ink); border-radius: var(--r-sm); margin: 2px var(--sp-1) 2px 0; font-size: var(--fs-sm); font-weight: 700; }

/* ---------- 창(modal) · 확인 창(dlg) · 알림 ---------- */
.modal { position: fixed; inset: 0; background: var(--overlay); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal-body { background: var(--surface); width: 100%; max-width: 760px; max-height: 92vh; overflow: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 18px var(--sp-4) 28px; position: relative; box-shadow: var(--shadow-3); }
.modal-body > #modalContent > h3:first-child { margin-top: 0; padding-right: 44px; font-size: var(--fs-lg); color: var(--ink); }
.modal .close { position: absolute; top: 6px; right: 6px; font-size: var(--fs-lg); color: var(--ink-2); }
/* 확인 창은 업무 창 위에 한 겹 더 뜬다 — 창 안에서 '정정'·'작업 종료'를 눌러도 가려지지 않게 */
.dlg { position: fixed; inset: 0; background: var(--overlay); z-index: 70; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.dlg-box { background: var(--surface); width: 100%; max-width: 420px; border-radius: var(--r-xl); box-shadow: var(--shadow-3); overflow: hidden; }
.dlg-box h4 { margin: 0; padding: var(--sp-4); font-size: var(--fs-lg); color: var(--ink); border-bottom: 1px solid var(--line); }
.dlg-box.crit h4 { background: var(--crit-bg); color: var(--crit-ink); }
.dlg-box.serious h4 { background: var(--serious-bg); color: var(--serious-ink); }
.dlg-body { padding: var(--sp-4); font-size: var(--fs-base); max-height: 60vh; overflow: auto; }
.dlg-body p { margin: 0 0 var(--sp-2); }
.dlg-foot { display: flex; gap: var(--sp-2); justify-content: flex-end; padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border-top: 1px solid var(--line); }
.dlg-foot .btn { min-width: 96px; }
@media (min-width: 900px) { .modal { align-items: center; } .modal-body { border-radius: var(--r-xl); max-height: 94vh; } }
/* 입력할 것이 많은 창(입력칸 묶음·기록·표·긴 글)은 넓은 화면에서 넓게 — 760px에 묶여 칸이 좁고 글이 잘렸다(2026-10-21).
   확인 몇 개뿐인 작은 창은 그대로 760px */
@media (min-width: 1100px) { .modal-body:has(.grid2, #recForm, table.tb, textarea) { max-width: min(1160px, 94vw); padding: var(--sp-5) 28px 28px; } }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--toast-bg); color: var(--accent-ink); padding: 12px 18px; border-radius: var(--r-md); z-index: 80; max-width: 90%; font-size: var(--fs-base); box-shadow: var(--shadow-2); cursor: pointer; }   /* 누르면 닫힌다(app.js toast) */
.toast.bad { background: var(--crit); }
.toast.ok { background: var(--good-ink); }
.toast.warn { background: var(--warn-ink); }      /* 주의 안내 띠(2026-10-31 점검) */

/* 화면 잠금·사용자 바꾸기(v0.5) — 업무 창(50) 위, 확인 창(70) 아래 */
.lock { position: fixed; inset: 0; z-index: 60; background: linear-gradient(160deg, var(--brand-deep), var(--accent)); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.lock[hidden] { display: none; }
.lock .login h2 { margin: 0 0 var(--sp-1); }
.lock .login label { display: block; margin-top: var(--sp-2); }
.lock .login .btn.ghost { margin-top: var(--sp-2); }

/* 찾기 줄(v0.5) — 기간·찾을 말·찾기 */
.finder { align-items: flex-end; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.finder label { flex: 1 1 160px; margin: 0; }
.finder label.shrink { flex: 0 1 auto; }
.finder input[type=date] { min-width: 0; width: 10.5em; flex: 1 1 8.5em; }
.finder .row.nowrap > span { flex: 0 0 auto; }      /* 기간의 '~'가 날짜 칸만큼 자리를 차지해 휴대폰에서 날짜가 잘리던 것(2026-10-31) */
.finder-wrap { margin-bottom: var(--sp-3); }
.finder-wrap > summary { cursor: pointer; font-weight: 700; color: var(--accent-hover); padding: var(--sp-1) 0; list-style: none; }
.finder-wrap > summary::-webkit-details-marker { display: none; }
.finder-wrap > .finder { border: 0; padding: 0; margin-bottom: 0; background: none; }      /* 접기 상자 안에 상자가 또 생기지 않게(2026-10-31 점검) */
.finder-wrap[open] > summary { margin-bottom: var(--sp-2); }

/* 서류로 자동 입력(v0.5) */
.dropbox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); border: 2px dashed var(--line-2); border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-3); background: var(--surface); }
.dropbox .hint { flex: 1 1 260px; }
.dropbox #tdocMsg, .dropbox .small { flex-basis: 100%; }
.dropbox.over { border-color: var(--accent); background: var(--accent-soft, var(--surface)); }

/* 문서 주기별 현황판(v0.6) */
.period-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0; }
.period-sum .stat { cursor: pointer; }

/* 기업 현황(v0.6) */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--sp-3); }   /* auto-fit: 칸이 적으면 남은 폭을 나눠 쓴다 */
.grid2 label:has(> textarea:not(.line)) { grid-column: 1 / -1; }   /* 긴 글 칸은 한 줄을 다 쓴다 */
/* 넓은 창에서 비어 있는 긴 글 칸은 둘씩 나란히 — 빈 칸까지 한 줄씩 차지해 창이 길어졌다. 내용이 있는 칸(.wide, 열 때 정함)만 한 줄 전체 */
@media (min-width: 1100px) { .grid2 label:has(> textarea:not(.line)):not(.wide) { grid-column: span 2; } }
.grid2 label { margin: 0; }
.row.between { justify-content: space-between; align-items: center; }
.card.prod .kv { margin-top: var(--sp-2); grid-template-columns: 130px 1fr; }
label.inline.block { display: flex; align-items: flex-start; margin: var(--sp-2) 0; }
.flow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tb.plan td { vertical-align: top; font-size: var(--fs-sm, 13px); min-width: 90px; }

/* 통계 그림(v0.6) — 한 그림 한 값, 얇은 막대, 흐린 축 */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-3); }
.chart { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.chart figcaption { font-weight: 700; font-size: var(--fs-md); color: var(--ink-2, var(--ink)); margin-bottom: 4px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .cbar { fill: var(--accent); }
.chart .hit { fill: transparent; }
.chart .bar-g:hover .cbar { fill: var(--accent-hover); }
.chart .bar-g:hover .hit { fill: var(--line); opacity: .35; }
.chart text { font-size: var(--fs-xs); text-anchor: middle; fill: var(--ink-3); }
.chart text.val { fill: var(--ink); font-weight: 700; }

/* 작업 계획 달력(v0.7) */
.plan-cal { border-collapse: separate; border-spacing: 3px; width: 100%; table-layout: fixed; min-width: 520px; }
.plan-cal th { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 700; }
.plan-cal th.we { color: var(--crit); }
.plan-cal td.pd { border: 1px solid var(--line); border-radius: var(--r-sm, 6px); height: 64px; vertical-align: top; padding: 3px 4px; cursor: pointer; background: var(--surface); font-size: var(--fs-xs); }
.plan-cal td.pd.off { border: none; background: transparent; cursor: default; }
.plan-cal td.pd.on { background: var(--good-bg, var(--surface)); border-color: var(--good); }
.plan-cal td.pd.today { box-shadow: inset 0 0 0 2px var(--accent); }
.plan-cal .pd-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.plan-cal .pd-add { border: none; background: transparent; color: var(--accent); font-weight: 700; cursor: pointer; padding: 0 2px; }
.plan-cal .pd-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 일정 달력(2026-10-22): 칸 안 일정 표 — 종류별 색(생산 파랑·입고 초록·출고 노랑·실사 회색), 누르면 연결된 화면 */
.sched-cal td.pd { height: 84px; cursor: default; }
.sched-cal .ev { display: block; width: 100%; margin-top: 2px; border: 0; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: inherit; font-size: var(--fs-xs); }
.off-msg { margin: 40px; }
.chart text.end { text-anchor: end; }

/* PIN 칸: 비밀번호 칸이 아니라 가린 숫자 칸 — 브라우저 비밀번호 저장 창이 뜨지 않는다(2026-10-22 요청 1). 로그인 화면만 비밀번호 칸 */
input.pin{-webkit-text-security:disc;text-security:disc;letter-spacing:.2em;font-family:inherit}

/* 일정 편집 창의 요일 고르기 — 한 줄로(2026-10-22) */
#pQuick #qw { flex: 2 1 320px; display: flex; flex-wrap: wrap; gap: 2px var(--sp-2); }
#pQuick #qw > label.inline { flex: 0 0 auto; margin: 0; }
#pQuick > .row > label { flex: 0 1 170px; }
#pQuick > .row > button { flex: 0 0 auto; }

/* 단추 고르기·자주 쓰는 문구 칩(2026-10-26 — 태블릿·휴대폰에서 누르기 쉽게) */
.bsel { display: flex; flex-wrap: wrap; gap: 6px; }
.bsel button { min-height: var(--h-lg); min-width: 64px; padding: 0 16px; font: inherit; font-size: var(--fs-base); font-weight: 700; border-radius: var(--r-md); border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; }
.bsel button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bsel button.all { border-style: dashed; color: var(--ink-2); }
.bsel button:disabled { opacity: .7; cursor: default; }
.bsel.sm { flex-wrap: nowrap; gap: 4px; }
.bsel.sm button { min-height: var(--h-md); min-width: 0; padding: 0 10px; font-size: var(--fs-sm); white-space: nowrap; }
.phr { margin-top: 4px; }
.phr-tg.on { background: var(--accent-soft); border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding: 8px; border-radius: var(--r-md); background: var(--surface-2); }
.chips[hidden] { display: none; }
.chips button { min-height: var(--h-md); padding: 0 12px; font: inherit; font-size: var(--fs-sm); border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; }
.chips button:active { background: var(--accent-soft); border-color: var(--accent); }
td .chips { min-width: 220px; }
.doc-use { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.doc-use .du { display: flex; align-items: center; gap: 6px; min-height: var(--h-lg); padding: 0 6px 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.doc-use .du label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.doc-use .du input[type=checkbox] { flex: none; }
.doc-use .du select { flex: none; width: auto; min-height: var(--h-md); padding: 0 var(--sp-2); font-size: var(--fs-base); }      /* 입력칸 16px 아래 금지(아이폰 확대)(2026-10-31 점검) */
.doc-use .du.off { background: var(--surface-2); color: var(--ink-3); }

/* 넓은 줄 표 → 카드(2026-10-26 점검): fitTables 가 표가 화면보다 넓을 때 .cards 를 붙인다 */
table.tb.cards, table.tb.cards > tbody { display: block; }
table.tb.cards tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 10px; padding: 10px; border-bottom: 1px solid var(--line-2); }
table.tb.cards tr:nth-child(even) { background: var(--zebra); }
table.tb.cards tr:has(> th) { display: flex; justify-content: flex-end; padding: 6px 10px; background: var(--th-bg); }
table.tb.cards th { display: none; }
table.tb.cards th:has(.all-rows-ok) { display: block; }
table.tb.cards td { display: block; padding: 0; border: 0; min-width: 0; }
table.tb.cards td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
table.tb.cards td[data-label=""]::before { content: none; }
table.tb.cards td.na { display: none; }
table.tb.cards td:first-child { grid-column: 1 / -1; }
table.tb.cards td:has(> .del), table.tb.cards td:has(> .row-ok) { align-self: end; }
table.tb.cards td input, table.tb.cards td select, table.tb.cards td textarea { width: 100%; }
table.tb.cards td .rsel, table.tb.cards td .bsel.sm { flex-wrap: wrap; }
/* CCP 증감 단추: 휴대폰에서는 값을 위에, −·+ 단추를 두 묶음으로 */
@media (max-width: 520px) {
  .stepper { display: grid; grid-template-columns: 1fr 1fr; }
  .st-val { grid-column: 1 / -1; order: -1; flex: none; }
  .st-grp { justify-content: stretch; }
  .st-grp .btn { flex: 1; min-width: 0; }
}
table.tb.cards td.num, table.tb.cards td.num input { text-align: left; }
/* 휴대폰: 목록 줄의 오른쪽 표시(밀린 것·상태·작성일 단추)가 많으면 제목 아래 줄로 내려 제목이 찌그러지지 않게(2026-10-26 점검) */
@media (max-width: 640px) {
  .list li { flex-wrap: wrap; }
  .list li > .t { flex: 1 1 60%; }
  .list li > .row.nowrap { flex-wrap: wrap; flex: 1 1 100% !important; justify-content: flex-end; }
}
@media (max-width: 640px) {
  .finder label.shrink { flex: 1 1 100% !important; }
  .finder label.shrink .row.nowrap > input { flex: 1 1 0; min-width: 0; }
}

/* ---------- 기록 화면 — 휴대폰·태블릿(2026-10-26 점검) ---------- */
/* 메뉴: 위쪽 막대 아래에서 열어 ☰ 로 다시 닫고, 바깥(어두운 바탕)을 눌러도 닫힌다 */
.nav-back { display: none; }
@media (max-width: 899.98px) {
  .sidenav { top: var(--topbar-h); height: calc(100% - var(--topbar-h)); padding-top: var(--sp-2); }
  .sidenav.open ~ .nav-back { display: block; position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0; background: var(--overlay); z-index: 25; }
}
/* 장갑 낀 손: O/X·작은 고르기 단추·문구 칩도 44px, 사진 지우기 × 도 크게 */
@media (pointer: coarse) {
  .rsel button, .bsel.sm button, .chips button { min-height: var(--h-lg); min-width: var(--h-lg); }
  .photo-thumbs { gap: 14px; padding-top: 10px; }
  .photo-thumbs .ph-del { width: var(--h-md); height: var(--h-md); top: -10px; right: -10px; }
  .code-area { font-size: var(--fs-base); }
}
/* 직접 입력(명단에 없는 사람) */
.bsel button.own { border-style: dashed; }
.bsel .own-in { flex: 1 1 100%; }
/* 조치자 칸: 이름 단추가 좁은 칸 안에서 줄을 바꾼다 */
table.tb td .bsel.sm { flex-wrap: wrap; }
/* 기준을 벗어났는데 판정을 안 고친 줄 — 판정 단추 묶음을 빨간 테두리로 */
.rsel:has(> input.out) { outline: 2px solid var(--crit); outline-offset: 2px; border-radius: var(--r-md); }
/* 구분(냉장/냉동) 같은 칸: 좋고 나쁨이 없으니 고른 것만 진하게 */
.rsel button.pick.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* 질문 전문(건강 상태 확인 등 — 칸 머리는 짧은 이름) */
.q-full { margin: 0 0 var(--sp-2); padding-left: 1.4em; font-size: var(--fs-md); color: var(--ink-2); }
.q-full li { margin: 2px 0; }
/* 카드: 숫자 칸도 왼쪽 맞춤(.num 의 !important 를 이긴다). 입고·출고 품목 카드의 수량·단위·규격은 한 줄에 나눠 채운다 */
table.tb.cards td.num, table.tb.cards td.num input { text-align: left !important; }
table.tb.fit.cards td:has(> .w-num, > .w-unit) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
table.tb.fit.cards td:has(> .w-num, > .w-unit)::before { flex: 1 1 100%; margin-bottom: 0; }
table.tb.fit.cards td > .w-num, table.tb.fit.cards td > .w-unit { width: auto !important; flex: 1 1 0 !important; min-width: 0; }
table.tb.fit.cards td > .conv { flex: 1 1 100%; }
/* 창: 아이폰 주소창이 보여도 위가 잘리지 않게(dvh), 홈 막대만큼 아래 여백. 긴 일지의 저장·서명 단추는 창 아래에 붙인다 */
.modal-body { max-height: 92dvh; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .modal-body { max-height: 94dvh; } }
.modal-body:has(> #modalContent > .rec-acts) { padding-bottom: 0; }
#modalContent:has(> .rec-acts) { padding-bottom: var(--sp-4); }
#modalContent > .rec-acts { position: sticky; bottom: 0; z-index: 2; margin-bottom: 0; padding: var(--sp-2) 0 calc(var(--sp-2) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
/* 가로 태블릿(1024·1080·1180)도 넓은 창 */
@media (min-width: 1000px) { .modal-body:has(.grid2, #recForm, table.tb, textarea) { max-width: min(1160px, 94vw); } }
/* 설정 → 휴무일: 날짜 칸이 한 줄을 다 차지하지 않게 */
#hD { width: 11em !important; flex: 0 0 11em !important; }
/* 기업 고르기(행정사): 16px 아래면 아이폰이 화면을 확대한다 */
.topbar select { font-size: var(--fs-base); }
/* 일정 편집 달력: ＋(그날 제품·수량)를 칸 아래 넓은 띠로 — 17×19px 이라 빗누르면 작업일이 꺼지던 것(2026-10-26 점검) */
.plan-cal .pd-add { display: block; width: 100%; min-height: var(--h-md); margin-top: 4px; padding: 0; border: 1px dashed var(--line); border-radius: var(--r-sm, 6px); background: var(--surface); }
/* 생산 월력: 날짜 칸 전체가 그날 목록 단추 */
.wo-cal td.pd:not(.off) { cursor: pointer; }
@media (pointer: coarse) {
  .plan-cal .pd-add { min-height: var(--h-lg); }
  .sched-cal .ev { height: auto; min-height: var(--h-md); }
}
/* 휴대폰: 달력을 옆으로 밀지 않고 칸을 나눠 쓴다(최소 520px 이라 금·토가 화면 밖이던 것) */
@media (max-width: 560px) {
  .plan-cal { min-width: 0; border-spacing: 1px; }
  .plan-cal td.pd { padding: 2px; }
  .plan-cal th { font-size: var(--fs-xs); }
}
/* 창 제목줄·닫기(X)를 위에 고정 — 긴 일지를 내려도 제목과 X가 보이게(2026-10-27) */
.modal-body, .modal-body:has(.grid2, #recForm, table.tb, textarea) { padding-top: 0; }
.modal .close { position: sticky; top: 0; float: right; z-index: 6; margin: 8px -6px 0 0; background: var(--surface); }
#modalContent > h3:first-child, .modal-body > #modalContent > h3:first-child { position: sticky; top: 0; z-index: 5; margin: 0 0 6px; padding: 16px 44px 10px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
#modalContent > :first-child:not(h3) { margin-top: 18px; }
/* 방충·방서 카드는 설비 한 대 = 한 줄: 설비명·설치위치·마리 수(세 자리면 충분 — 좁게)·합계·지우기(2026-10-27) */
table.tb.pest.cards tr:not(:has(> th)) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; }
table.tb.pest.cards td:first-child { grid-column: auto; flex: 1 1 90px; min-width: 80px; }
table.tb.pest.cards td:nth-child(2) { flex: 1 1 90px; min-width: 80px; }
table.tb.pest.cards td[data-grp], table.tb.pest.cards td.tot { flex: 0 0 58px; }
table.tb.pest.cards td[data-grp] input, table.tb.pest.cards td.tot input { padding: 4px 6px; text-align: center; -moz-appearance: textfield; }
table.tb.pest.cards td[data-grp] input::-webkit-inner-spin-button, table.tb.pest.cards td[data-grp] input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
table.tb.pest.cards td::before { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.pest.cards td:has(> .del) { flex: 0 0 auto; }
/* 방충 카드 간격 다시(2026-10-27): 숫자 입력창이 칸보다 넓어 붙어 보이던 것 · 숫자 가운데 · 설비명·위치는 알맞은 너비 */
table.tb.pest.cards tr:not(:has(> th)) { gap: 6px 10px; }
table.tb.pest.cards td:first-child, table.tb.pest.cards td:nth-child(2) { flex: 0 1 220px; min-width: 90px; }
table.tb.pest.cards td[data-grp], table.tb.pest.cards td.tot { flex: 0 0 68px; min-width: 0; }
table.tb.pest.cards td[data-grp] input, table.tb.pest.cards td.tot input { width: 100%; min-width: 0 !important; max-width: 100%; box-sizing: border-box; text-align: center !important; }
table.tb.pest.cards td[data-grp]::before, table.tb.pest.cards td.tot::before { text-align: center; }
table.tb.pest.cards td:has(> .del) { margin-left: auto; }
table.tb.pest.cards td:first-child, table.tb.pest.cards td:nth-child(2) { flex: 1 1 90px; max-width: 240px; min-width: 80px; }
@media (max-width: 900px) { table.tb.pest.cards tr:not(:has(> th)) { gap: 6px 6px; } table.tb.pest.cards td[data-grp], table.tb.pest.cards td.tot { flex-basis: 60px; } table.tb.pest.cards td:first-child, table.tb.pest.cards td:nth-child(2) { min-width: 72px; } }

/* 탭 판(2026-10-27) — 오늘 할 일 · 문서·일지 · 설정 · 작업지시 창. 서류철 탭 모양(2026-10-29 요청): 위가 둥근 탭이 나란히 붙고,
   고른 탭은 진한 바탕·흰 글씨로 아래 판과 이어지며 판 머리에도 같은 진한 띠(data-label)가 찍힌다 */
.tabp { margin-top: var(--sp-3); }
.tabp-bar { display: flex; align-items: flex-end; gap: 4px; padding: 0 4px; margin-bottom: 0; border-bottom: 2px solid var(--tab-on-bg); overflow-x: auto; scrollbar-width: thin; }
.tabp-btn { flex: 0 0 auto; min-height: 46px; padding: 0 22px; border: 1px solid var(--line-2); border-bottom: none; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--tab-bg); color: var(--tab-ink); font: inherit; font-size: var(--fs-base); font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.tabp-btn .cnt { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-3); }
.tabp-btn .cnt:empty { display: none; }
.tabp-btn.t-warn .cnt { color: var(--warn-ink); }
.tabp-btn.t-crit .cnt { color: var(--crit-ink); }
.tabp-btn.on { min-height: 50px; background: var(--tab-on-bg); color: var(--tab-on-ink); border-color: var(--tab-on-bg); }
.tabp-btn.on .cnt, .tabp-btn.on.t-crit .cnt, .tabp-btn.on.t-warn .cnt { color: var(--tab-on-ink); }
.tabp-pane { border: 1px solid var(--line-2); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); padding: 0 var(--sp-4) var(--sp-4); background: var(--surface); }
.tabp-pane::before { content: attr(data-label); display: block; margin: 0 calc(-1 * var(--sp-4)) var(--sp-4); padding: var(--sp-2) var(--sp-4); background: var(--accent-soft); color: var(--accent-hover); border-left: 4px solid var(--accent); font-weight: 700; font-size: var(--fs-base); }
.tabp-pane:not([data-label])::before, .tabp-pane[data-label=""]::before { display: none; }
.tabp-pane[hidden] { display: none; }
.tabp-pane > .hint { margin-top: 0; }
@media (max-width: 600px) { .tabp-btn { padding: 0 12px; } .tabp-pane { padding: 0 var(--sp-2) var(--sp-2); } .tabp-pane::before { margin: 0 calc(-1 * var(--sp-2)) var(--sp-2); } }
.asg-row { gap: 6px 18px; }      /* 문서 담당 역할 체크박스(2026-10-29) */
.asg-row label.inline { min-height: var(--h-md); }

/* 완제품 상세(2026-10-29) */
.pd-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pd-head h3 { margin: 0; }
.pd-kv { margin-top: var(--sp-2); grid-template-columns: 120px 1fr; }
#prodDetail h4 { margin: var(--sp-4) 0 var(--sp-1); }
.pd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-chips .chip { padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--fs-md); }
.pd-steps { margin: 0; padding-left: 22px; line-height: 1.6; }
.pd-steps li { margin: 2px 0; }
.pd-docs { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-more { margin-top: var(--sp-3); }
.pd-more summary { cursor: pointer; font-weight: 700; min-height: var(--h-md); display: flex; align-items: center; }

/* 제품 정보 → 품목 → 완제품: 왼쪽 트리(식품유형 → 제품 → 배합 원료) · 오른쪽 제품 상세(2026-10-29 요청) */
.ptree-view { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-3); }
@media (min-width: 900px) { .ptree-view { grid-template-columns: minmax(220px, 320px) 1fr; align-items: start; } .ptree-view > aside { position: sticky; top: calc(var(--topbar-h) + 52px); } }      /* 최근 기록 띠 아래에 붙게(2026-10-31 점검) */
.ptree details { margin-bottom: var(--sp-2); }
.ptree summary { cursor: pointer; font-weight: 700; min-height: var(--h-md); display: flex; align-items: center; gap: 6px; }
.ptree .pt-node { display: block; width: 100%; text-align: left; min-height: var(--h-md); padding: 8px 12px; margin: 4px 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.ptree .pt-node.on { background: var(--side-active); border-color: var(--accent); color: var(--side-ink-strong); font-weight: 700; }
.ptree .pt-kids { margin: 0 0 6px 20px; padding: 0 0 0 10px; list-style: none; border-left: 2px solid var(--line-2); color: var(--ink-3); font-size: var(--fs-sm); }
.ptree .pt-kids li { padding: 2px 0; }

/* 종이 모양 창의 종이 미리보기(2026-10-29) */
.modal-body:has(> #modalContent > .po-wrap) { max-width: min(96vw, 1640px); }      /* 종이 모양 창은 넓게(2026-10-29 요청) */
.po-wrap { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 1100px) { .po-wrap { grid-template-columns: minmax(440px, 46%) 1fr; align-items: start; } .po-wrap > .po-left { position: sticky; top: 52px; } }
.po-prev { margin: var(--sp-2) 0; }
.po-prev > b { display: inline-block; margin-bottom: 6px; }
.po-prev iframe { display: block; width: 100%; height: calc(92vh - 150px); min-height: 420px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.wo-act { margin-top: var(--sp-2); }
.wo-act h4 { margin: 0 0 6px; }
.wo-act .act-text { white-space: pre-wrap; line-height: 1.6; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }

/* 인력 서류 · 건강상태 대상(2026-10-27) */
.ht-cell { text-align: center; width: 1%; }
.ht-cell input, .ht-grid input { width: 22px; height: 22px; }
.ht-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; margin-top: var(--sp-2); }
.ht-grid label { min-height: var(--h-lg); padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); display: flex; align-items: center; gap: 10px; }

/* 판을 탭으로 묶은 화면(tabify) — 제목은 탭에, 판 머리에는 안내·단추만(2026-10-27) */
.tabp-pane > section.panel.in-tab { margin-top: 0; border: none; box-shadow: none; background: transparent; padding: 0; }
.tabp-pane > section.panel.in-tab > .panel-head { cursor: default; }
.tabp-pane > section.panel.in-tab > .panel-head .fold, .tabp-pane > section.panel.in-tab > .panel-head .panel-title { display: none; }
.tabp-pane > section.panel.in-tab > .panel-head:not(:has(.panel-note, .panel-tools)) { display: none; }

.mk-tb th.ht-cell { white-space: nowrap; }
.mk-tb th.ht-cell .btn { margin-top: 4px; }

/* 짧은 칸 여러 개를 한 줄에(2026-10-27) */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 14px; align-items: end; }
.fgrid > .field { margin: 6px 0; min-width: 0; }
.fgrid > .field input, .fgrid > .field select { width: 100%; min-width: 0; }
.fgrid > .field .row.nowrap > input { flex: 1 1 auto; }
.fgrid > .field .lbl { line-height: 1.3; }
@media (max-width: 480px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 카드 안 ○ 하나짜리 칸(연간 계획의 1~12월 등)은 작은 칸으로 한 줄에(2026-10-27) */
table.tb.cards tr:has(> td.mini) { display: flex; flex-wrap: wrap; align-items: flex-end; }
table.tb.cards tr:has(> td.mini) > td { flex: 1 1 150px; }
table.tb.cards tr:has(> td.mini) > td:first-child { grid-column: auto; flex: 1 1 120px; }
table.tb.cards tr:has(> td.mini) > td.mini { flex: 0 0 46px; text-align: center; }
table.tb.cards td.mini::before { text-align: center; }
table.tb.cards td.mini .rsel { justify-content: center; }
table.tb.cards td.mini .rsel button { min-width: 40px; padding: 0 6px; }
table.tb.cards tr:has(> td.mini) > td:has(> .del), table.tb.cards tr:has(> td.mini) > td:has(> .row-ok) { flex: 0 0 auto; }

/* CCP 측정 알람 띠(2026-10-27 v2) — 화면 위쪽 가운데, 크고 굵게, 정각은 빨강으로 깜빡임 */
.ccp-alarm { position: fixed; left: 50%; top: calc(var(--topbar-h) + 8px); transform: translateX(-50%); z-index: 200; width: min(640px, 94vw);
  padding: var(--sp-4); border-radius: var(--r-xl); background: var(--warn-bg); color: var(--warn-ink); border: 4px solid var(--warn); box-shadow: var(--shadow-3); }
.ccp-alarm.now { background: var(--crit-bg); color: var(--crit-ink); border-color: var(--crit); animation: ccpBlink 1s step-end infinite; }
@keyframes ccpBlink { 50% { border-color: var(--surface); } }
.ccp-alarm[hidden] { display: none; }
.ccp-alarm .ca-t { font-size: var(--fs-lg); font-weight: 700; }
.ccp-alarm .ca-m { margin: 6px 0 12px; font-size: var(--fs-base); }
.ccp-alarm .ca-b { display: flex; gap: 10px; flex-wrap: wrap; }
.ccp-alarm .ca-b .btn { flex: 1 1 160px; min-height: var(--h-xl); font-size: var(--fs-base); }
.ccp-alarm .ca-h { margin: 8px 0 0; font-size: var(--fs-sm); }

/* 서버 연결 끊김 띠(2026-11-02 개선 #4, F-06) — 화면 맨 위(위쪽 막대 위), 끊김은 빨강, 다시 닿으면 초록으로 바뀌었다가 닫힌다 */
.conn-bar { position: sticky; top: 0; z-index: 21; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-md); line-height: 1.5;
  background: var(--crit-bg); color: var(--crit-ink); border-bottom: 4px solid var(--crit); }
.conn-bar.up { background: var(--good-bg); color: var(--good-ink); border-bottom-color: var(--good); }
.conn-bar .ic { vertical-align: -2px; }
.conn-bar[hidden] { display: none; }
/* 띠가 떠 있는 동안 위쪽 막대는 띠 높이(--conn-h, app2.js 가 잰다)만큼 내려 붙는다 — 둘 다 top:0 이면 겹쳐 메뉴 단추가 가려진다 */
.topbar { top: var(--conn-h); }
/* 위쪽 막대 '다음 CCP' 칩(B-03) — 지나면 빨강(.crit), 10분 안이면 주황(.serious). 긴 글은 줄이지 않고 그대로(측정 시각이 잘리면 안 된다) */
#ccpChip { cursor: pointer; border: 0; }

/* 버전 표시(2026-10-27) */
.ver-tag { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-3); text-align: center; }
.nav-ver { margin-top: auto; padding: 12px 16px; font-size: var(--fs-xs); color: var(--side-muted); }
.new-ver { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* CCP 모니터링 일시 중단(2026-10-27) */
.pause-box { margin-top: var(--sp-2); }

/* 표준기준서(2026-10-27) — 목차(넓은 화면 왼쪽, 휴대폰은 접는 칸) + 쪽 그림, 기준서 기준 맞대기, 기준서 조치 상자 */
.man-view { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 900px) { .man-view { grid-template-columns: minmax(220px, 300px) 1fr; align-items: start; } .man-side { position: sticky; top: calc(var(--topbar-h) + 52px); } }      /* 최근 기록 띠 아래에 붙게(2026-10-31 점검) */
.man-tocbox > summary { display: block; cursor: pointer; font-weight: 700; padding: var(--sp-2) var(--sp-3); }
.man-tocbox { padding: 0; overflow: hidden; }      /* 목차 상자를 한 겹으로(2026-10-31 점검) */
.man-tocbox > .man-toc { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.man-toc { max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.man-toc a { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 8px 10px; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--line); font-size: var(--fs-md); text-decoration: none; }
.man-toc a small { color: var(--ink-3); white-space: nowrap; }
.man-toc a.l0 { font-weight: 700; background: var(--surface-2); }
.man-toc a.l2 { padding-left: 26px; font-size: var(--fs-sm); color: var(--ink-2); }
.man-toc a.nop { cursor: default; color: var(--ink-3); }
.man-toc a.on { background: var(--accent-soft); color: var(--accent-hover); font-weight: 700; }
.man-toc a:last-child { border-bottom: 0; }      /* 바깥 테두리와 겹줄이 되지 않게(2026-10-31 점검) */
.man-toc > .hint { margin: var(--sp-2) var(--sp-3); }      /* 목차가 없을 때 글이 테두리에 붙지 않게(2026-10-31 점검) */
.man-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.man-bar > .btn { flex: 0 0 auto; }
.man-jump { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.man-jump input { width: 84px; }
.man-cap { margin: var(--sp-2) 0; font-size: var(--fs-md); }
.man-img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: zoom-in; }
.man-zoombar { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.man-zoomv { min-width: 44px; text-align: center; font-weight: 700; }
.man-scroll { overflow: auto; max-height: 80vh; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.man-scroll .man-img { border: none; border-radius: 0; max-width: none; }
.wo-lim { margin-top: var(--sp-3); }
.wo-lim .man-img { margin-top: 6px; cursor: default; }
.man-zoom { overflow: auto; max-height: 78vh; }
.man-zoom img { display: block; width: 100%; min-width: 900px; height: auto; }
.man-text { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-md); line-height: 1.6; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); }
.man-snip { display: block; white-space: normal !important; }
mark { background: var(--read-bg); color: var(--ink); padding: 0 2px; border-radius: 3px; }
.man-crit .man-cmp { display: grid; grid-template-columns: 1fr; gap: var(--sp-2) var(--sp-4); margin: var(--sp-2) 0; font-size: var(--fs-md); }
@media (min-width: 760px) { .man-crit .man-cmp { grid-template-columns: 1fr 1fr; } }
.man-crit .lbl { color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: var(--sp-1); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.man-ul { margin: 0; padding-left: 18px; }
.man-ol { margin: var(--sp-1) 0 var(--sp-2); padding-left: 22px; }
.man-ol li { margin: 2px 0; }
.man-when { margin: var(--sp-2) 0 0; }
.man-act { font-size: var(--fs-base); }
.man-act label.inline.block { font-size: var(--fs-base); }
.man-note { margin-bottom: var(--sp-3); }

/* 트리 판(2026-10-28): 설정 — 왼쪽 묶음별 항목, 오른쪽 판 하나. 좁은 화면은 위아래로 */
.tree { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-3); }
.tree-nav { display: flex; flex-direction: column; gap: var(--sp-3); }
.tree-grp { display: flex; flex-wrap: wrap; gap: 6px; }
.tree-g { flex: 1 1 100%; font-size: var(--fs-md); font-weight: 700; color: var(--ink-2); padding: 0 var(--sp-1); }
.tree-btn { min-height: var(--h-lg); padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-md); font-weight: 700; cursor: pointer; text-align: left; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.tree-btn:hover { border-color: var(--accent); }
.tree-btn.on { background: var(--tab-on-bg); color: var(--tab-on-ink); border-color: var(--tab-on-bg); }
.tree-btn.link { border-style: dashed; color: var(--ink-2); }
.tree-btn .go-to { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
.tree-body { min-width: 0; }
.tree-body > section.panel[hidden] { display: none; }
@media (min-width: 900px) {
  .tree { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .tree-nav { position: sticky; top: calc(var(--topbar-h) + 52px); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-2); box-shadow: var(--shadow-1); }
  .tree-grp { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .tree-grp + .tree-grp { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
  .tree-g { padding: 0 var(--sp-2) var(--sp-1); }
  .tree-btn { width: 100%; min-height: var(--h-md); border-color: transparent; background: transparent; }
  .tree-btn:hover { background: var(--surface-2); border-color: transparent; }
  .tree-btn.on { background: var(--accent-soft); color: var(--accent-hover); border-color: transparent; }
  .tree-btn.link { border: 0; }
}
/* 터치 화면 44px — 트리·접기 머리·기업 고르기. 위 규칙에 지지 않게 뒤에 둔다(2026-10-31 점검) */
@media (pointer: coarse) {
  .tree-btn, .ptree .pt-node, summary, .ptree summary, .pd-more summary, .topbar select { min-height: var(--h-lg); }
  .rt .x { min-width: var(--h-md); align-self: stretch; }
}

/* 설정 줄(2026-10-28): 이름은 왼쪽, 고르기는 오른쪽 한 줄 — CCP 알람 칸이 여기저기 흩어져 보이던 것 */
.set-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.set-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row > .lbl { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.set-row > .lbl small { display: block; font-weight: 400; color: var(--ink-2); font-size: var(--fs-sm); }
.set-head { font-size: var(--fs-md); font-weight: 700; color: var(--ink-2); margin-top: var(--sp-3); }
@media (min-width: 760px) { .set-row { grid-template-columns: 180px minmax(0, 1fr); align-items: center; } }
.tree-btn.link { flex-wrap: wrap; white-space: normal; padding-top: 6px; padding-bottom: 6px; }
.tree-btn.link .go-to { flex: 1 1 100%; }

/* 문서 현황표(2026-10-28): 오늘 할 일 — 주기별 문서마다 작성기한 · 미작성 · 결재 대기 */
table.tb.doc-sum td, table.tb.doc-sum th { vertical-align: middle; }
table.tb.doc-sum td.grp { font-weight: 700; text-align: center; background: var(--surface-2); color: var(--ink); width: 72px; }      /* 묶음 이름은 녹색 아님(2026-10-31 점검) */
table.tb.doc-sum th.num, table.tb.doc-sum td.num { text-align: center !important; width: 140px; }
@media (max-width: 640px) {
  table.tb.doc-sum th, table.tb.doc-sum td { padding: 8px 6px; font-size: var(--fs-sm); }
  table.tb.doc-sum td.grp { width: 40px; }
  table.tb.doc-sum th.num, table.tb.doc-sum td.num { width: 64px; }
  table.tb.doc-sum td.num .btn { padding: 0 8px; min-width: 0; }
}

/* 생산 안 함(2026-10-28): 달력에 회색 줄긋기 — 무엇을 왜 안 했는지 보이게 */
.pill.ev.skipped { text-decoration: line-through; opacity: .75; }
.skip-row .btn { flex: 1 1 auto; }

/* ID 관리(2026-10-28): 기업별 묶음 줄 · 임시 PIN 크게 */
table.tb.id-tb tr.grp-row td { background: var(--surface-3); padding-top: 10px; }
.pin-show { font-family: var(--mono); font-size: var(--fs-num-lg); font-weight: 700; letter-spacing: .2em; text-align: center; padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); }
.tabs-sep { flex: 0 0 auto; align-self: center; margin: 0 var(--sp-1) 0 var(--sp-2); padding: var(--sp-1) 0 var(--sp-1) var(--sp-2); border-left: 2px solid var(--line-2); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); white-space: nowrap; }      /* 기업 현황 탭 줄의 '제품 정보' 묶음 표시(2026-10-31) */
.tabs.co-tabs button { padding: 0 var(--sp-2); min-width: 56px; }      /* 탭 열 개가 1280 화면 한 줄에 들어가게 */

/* 개인 서명 미리보기(2026-10-28) */
.sign-up img.sign-prev { max-height: 48px; max-width: 160px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 2px; }