/* css/screens.css — quality_dashboard.html <style> 에서 분리(2026-10-03). 링크 순서 3/7 */
  /* ── 월간 일정 (sc-*) ── */
  .sc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
  .sc-title { font-size: 20px; font-weight: 700; letter-spacing: var(--ls-tight); margin: 0 0 4px; line-height: 1.2; }
  .dh-btn-brand { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
  .dh-btn-brand:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
  .sc-card { padding: 14px 18px 16px; }
  .sc-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .sc-status { font-size: 11.5px; color: var(--ink-3); }
  .sc-legend { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--ink-2); }
  .sc-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
  .sc-cal { margin-top: 12px; }
  .sc-tbl td { height: 104px; padding: 5px 6px; }
  .sc-tbl td.add { cursor: pointer; }
  .sc-tbl td.add:hover { box-shadow: inset 0 0 0 1px var(--brand); }
  .sc-tbl tr:hover td { background: var(--surface); }   /* 일정 달력은 행 hover 대신 칸 hover */
  .sc-tbl tr:hover td.today { background: var(--brand-50); } .sc-tbl tr:hover td.hol { background: var(--danger-bg); } .sc-tbl tr:hover td.pad { background: var(--surface-2); }
  .sc-ev { --c: var(--brand); display: block; margin: 2px 0; padding: 2px 6px 2px 8px; border-radius: 5px; font-size: 11px; line-height: 1.35; color: var(--ink); background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-left: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .sc-ev:hover { background: color-mix(in srgb, var(--c) 24%, var(--surface)); }
  .sc-ev b { font-weight: 700; margin-right: 4px; color: var(--ink); }
  .sc-ev.span { border-radius: 3px; }
  @supports not (background: color-mix(in srgb, red 10%, white)) { .sc-ev { background: var(--surface-2); } }
  .sc-list-head { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; font-size: 13px; color: var(--ink); }
  .sc-cnt { font-weight: 600; color: var(--ink-2); background: var(--gray-100); border-radius: 999px; padding: 0 8px; font-size: 11px; line-height: 18px; }
  .sc-item { display: grid; grid-template-columns: 96px 72px 64px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
  .sc-item.gaj { grid-template-columns: 72px 52px minmax(0, 1fr) 170px; }
  .sc-item:last-child { border-bottom: 0; }
  .sc-item.click { cursor: pointer; } .sc-item.click:hover { background: var(--surface-2); }
  .sc-date { color: var(--ink-3); font-size: 12px; } .sc-date small { color: var(--ink-3); margin-left: 2px; }
  .sc-cat { --c: var(--brand); display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
  .sc-cat i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
  .sc-who { font-weight: 600; color: var(--ink); font-size: 12px; }
  .sc-ttl { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sc-memo { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sc-memo.mono { font-family: var(--font-mono); font-size: 11px; }
  @media (max-width: 720px) { .sc-item, .sc-item.gaj { grid-template-columns: 72px 56px minmax(0, 1fr); } .sc-who, .sc-memo { display: none; } .sc-legend { margin-left: 0; } .sc-tbl td { height: 84px; padding: 3px 4px; } }
  /* 일정 모달 */
  .sc-modal { position: fixed; inset: 0; background: rgba(17, 24, 39, .42); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(2px); }
  .sc-modal-box { background: var(--surface); border-radius: 16px; width: 440px; max-width: 100%; box-shadow: var(--shadow-3); border: 1px solid var(--border); padding: 18px 20px 16px; }
  .sc-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .sc-modal-head h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: var(--ls-snug); }
  .sc-x { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 7px; font-size: 20px; line-height: 1; color: var(--ink-3); cursor: pointer; }
  .sc-x:hover { background: var(--surface-2); color: var(--ink); }
  .sc-form { display: flex; flex-direction: column; gap: 10px; }
  .sc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .sc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
  .sc-form label small { font-weight: 500; color: var(--ink-3); margin-left: 4px; }
  .sc-form input, .sc-form select, .sc-form textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 400; color: var(--ink); background: var(--surface); outline: 0; }
  .sc-form input:focus, .sc-form select:focus, .sc-form textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
  .sc-form textarea { resize: vertical; min-height: 56px; }
  .sc-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
  .sc-modal-foot .dh-actions { margin-left: auto; }
  .sc-del { color: var(--danger); border-color: rgba(180, 35, 24, .3); }
  .sc-del:hover { background: var(--danger-bg); color: var(--danger); }
  @media (max-width: 480px) { .sc-row2 { grid-template-columns: 1fr; } }

  /* ── 설비별 작업현황 (wip-*) ── */
  .wip-upd { color: var(--ink-3); }
  .wip-summary { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: -4px 0 14px; font-size: 12.5px; color: var(--ink-2); }
  .wip-kv { display: inline-flex; align-items: center; gap: 6px; } .wip-kv i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } .wip-kv b { color: var(--ink); font-weight: 700; }
  .wip-kv.muted { color: var(--ink-3); margin-left: auto; }
  .wip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }   /* 한 카드를 펼쳐도 옆 카드가 같이 늘어나지 않게 */
  #wip-filter-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .dh-seg button { white-space: nowrap; }
  .wip-card { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; overflow: visible; transition: box-shadow .15s; }
  .wip-card:hover { box-shadow: var(--shadow-2); }
  .wip-card.stale { border-style: dashed; }
  .wip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; }
  /* 설비 사진(EAM 카탈로그 컷) — 왼쪽 썸네일, 오른쪽에 이름 줄 + 건수 줄 */
  .wip-head.has-photo { justify-content: flex-start; gap: 12px; }
  .wip-photo { width: 96px; height: 64px; flex-shrink: 0; border-radius: var(--r-md); border: 1px solid var(--border); background: #fff; object-fit: contain; padding: 3px; box-sizing: border-box; display: block; }
  .wip-photo.ph { display: flex; align-items: center; justify-content: center; color: var(--ink-3); background: var(--surface-2); font-size: 22px; }
  .wip-headmain { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
  .wip-headmain .wip-cnt { flex-wrap: wrap; }
  .wip-headmain .dh-caret { margin-left: auto; }
  .wip-sub { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 제본 카드(작업실적 기반) */
  .wip-divider { grid-column: 1 / -1; font-size: 12px; color: var(--ink-2); padding: 6px 2px 0; border-top: 1px dashed var(--border-strong, #d0d5dd); margin-top: 4px; }
  .wip-divider b { color: var(--ink); }
  .wip-divider.muted { color: var(--ink-3); border-top: 0; }
  .wip-name small.wip-src { background: #EFE9F7; color: #5B3E86; }
  .wip-card.bind.prog .wip-state { background: var(--s3, #7B4EA0); box-shadow: 0 0 0 3px #EFE9F7; }
  .wip-cur.bind { background: #F7F4FB; border-color: #E4DAF1; }
  .wip-cur.bind .wip-dot { background: var(--s3, #7B4EA0); } .wip-cur.bind .wip-dot.off { background: var(--gray-300); }
  .wip-cur.bind .wip-cur-t b { color: #5B3E86; font-size: 11.5px; white-space: nowrap; flex-shrink: 0; }
  @media (max-width: 480px) { .wip-photo { width: 72px; height: 48px; } }
  .wip-name { font-size: 15px; font-weight: 700; letter-spacing: var(--ls-snug); display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
  .wip-name small { font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); border-radius: var(--r-pill); padding: 1px 7px; }
  .wip-state { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300); flex-shrink: 0; }
  .wip-card.prog .wip-state { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); animation: hp-blink 2s ease-in-out infinite; }
  .wip-card.idle .wip-state { background: var(--good); }
  .wip-cnt { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .wip-pill { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); background: var(--gray-100); color: var(--ink-2); white-space: nowrap; }
  .wip-pill.on { background: var(--brand-100); color: var(--brand-700); }
  .wip-pill.dim { color: var(--ink-3); }
  .wip-card.open .dh-caret { transform: rotate(90deg); }
  .wip-cur { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: var(--r-md); background: var(--brand-50); border: 1px solid var(--brand-100); }
  .wip-cur + .wip-cur { margin-top: -4px; }
  .wip-cur-t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
  .wip-cur-t b { margin-left: auto; color: var(--brand-700); font-size: 13px; }
  .wip-cur-p { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
  .wip-cur-s { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wip-bar { height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; border: 1px solid var(--brand-100); }
  .wip-bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
  .wip-next { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); min-width: 0; padding: 4px 0; flex-wrap: wrap; }
  .wip-next span:not(.dh-tag) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--ink); }
  .wip-next small { color: var(--ink-3); font-size: 11px; width: 100%; padding-left: 40px; }
  .wip-idle { padding: 4px 0; }
  .wip-detail { border-top: 1px solid var(--border); padding-top: 6px; }
  .wip-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--border); font-size: 12px; }
  .wip-row:last-child { border-bottom: 0; }
  .wip-more { width: 100%; height: 30px; font-size: 12px; color: var(--ink-2); background: var(--gray-50, #F7F8FA); border: 1px dashed var(--line); }   /* 인쇄중 N건 더 보기 (2026-10-14) */
  .wip-more:hover { background: var(--gray-100); }

  /* ── 설비별 불량현황 (eqq-*) ── */
  .eqq-chk { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12px; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
  .eqq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
  .eqq-card { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--r-lg, 12px); padding: 12px 14px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .15s, border-color .15s; min-width: 0; }
  .eqq-card:hover { box-shadow: var(--shadow-2); }
  .eqq-card.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-100); }
  .eqq-card.other { background: var(--surface-2); }
  .eqq-card.zero { opacity: .72; }
  .eqq-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .eqq-top .wip-photo { width: 72px; height: 48px; }
  .eqq-title { flex: 1; min-width: 0; }
  .eqq-name { font-size: 14.5px; font-weight: 700; letter-spacing: var(--ls-snug); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .eqq-name small { font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); border-radius: var(--r-pill); padding: 1px 7px; }
  .eqq-name small.old { color: #8A2320; background: #FFF3F2; }
  .eqq-sub { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
  .eqq-n { text-align: right; flex-shrink: 0; }
  .eqq-n b { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
  .eqq-n b small { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
  .eqq-delta { display: block; font-size: 11px; font-weight: 600; margin-top: 3px; color: var(--ink-3); }
  .eqq-delta.up { color: var(--danger, #D0342A); } .eqq-delta.down { color: var(--good, #0F9D63); }
  .eqq-spark { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 30px; align-items: end; }
  .eqq-spark i { display: block; background: var(--brand-100); border-radius: 2px 2px 0 0; min-height: 2px; position: relative; }
  .eqq-spark i.on { background: var(--brand); }
  .eqq-spark i.max { background: var(--brand-700, #0E7C8B); }
  .eqq-spark-lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: -4px; }
  .eqq-sechead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .eqq-seg { margin-left: auto; }
  .eqq-wl-note { font-size: 11.5px; color: var(--ink-3); margin: 0 0 10px; }
  .eqq-rate { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-2); padding: 5px 8px; border-radius: var(--r-md); background: var(--surface-2); flex-wrap: wrap; }
  .eqq-rate b { color: var(--ink); font-weight: 700; }
  .eqq-rate .mid b { color: #B45309; } .eqq-rate .hi b { color: var(--danger, #D0342A); }
  .eqq-rate small { color: var(--ink-3); font-size: 11px; }
  .eqq-types { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
  .eqq-type { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--gray-100); color: var(--ink-2); white-space: nowrap; }
  .eqq-type b { color: var(--ink); margin-left: 3px; }
  .eqq-foot { font-size: 11px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; overflow: hidden; }
  .eqq-heat { border-collapse: separate; border-spacing: 2px; font-size: 11.5px; min-width: 520px; width: 100%; }
  .eqq-heat th { font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 4px 6px; text-align: center; white-space: nowrap; }
  .eqq-heat th.r { text-align: left; }
  .eqq-heat td { text-align: center; padding: 6px 4px; border-radius: 4px; font-weight: 600; color: var(--ink); background: var(--surface-2); font-variant-numeric: tabular-nums; }
  .eqq-heat td.l1 { background: #D9F1F4; } .eqq-heat td.l2 { background: #A9DEE6; } .eqq-heat td.l3 { background: #5FC1D0; color: #fff; } .eqq-heat td.l4 { background: #17A2B8; color: #fff; }
  .eqq-heat td.tot { background: transparent; color: var(--ink-2); font-weight: 700; }
  .eqq-heat td.name { text-align: left; background: transparent; font-weight: 600; white-space: nowrap; }
  .eqq-det { width: 100%; font-size: 12.5px; }
  .eqq-det td.sym { max-width: 360px; white-space: normal; line-height: 1.4; color: var(--ink-2); }
  .eqq-det td.act { max-width: 260px; white-space: normal; line-height: 1.4; color: var(--ink-3); }
  @media (max-width: 720px) { .eqq-grid { grid-template-columns: 1fr; } .eqq-chk { margin-left: 0; width: 100%; } .eqq-det td.sym, .eqq-det td.act { max-width: 200px; } }
  .wip-row-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--gray-300); }
  .wip-row.prog .wip-row-dot { background: var(--brand); } .wip-row.done .wip-row-dot { background: var(--good); }
  .wip-row-main { min-width: 0; flex: 1; }
  .wip-row-p { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
  .wip-row-p .dh-tag { flex-shrink: 0; }
  .wip-row-s { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wip-row.done .wip-row-p, .wip-row.done .wip-row-s { color: var(--ink-3); text-decoration: line-through; font-weight: 500; }
  .wip-row-n { flex-shrink: 0; font-size: 11px; color: var(--ink-3); padding-top: 2px; }
  @media (max-width: 720px) { .wip-grid { grid-template-columns: 1fr; } .wip-kv.muted { margin-left: 0; } }

  /* ── 작업이력 추적 (wl-*) ── */
  .wl-search { display: flex; flex-direction: column; gap: 10px; }
  .wl-q { width: 100%; height: 40px; font-size: 13.5px; }
  .wl-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .wl-f { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
  .wl-f em { font-style: normal; color: var(--ink-3); }
  .wl-f .dh-select { height: 32px; font-weight: 500; }
  .wl-f input[type=date].dh-select { padding: 0 8px; }
  .wl-count { font-size: 12px; color: var(--ink-3); margin: 12px 0 6px; font-weight: 500; }
  .wl-tbl { table-layout: fixed; }
  .wl-tbl td { padding: 7px 10px; }
  .wl-tbl td:first-child { overflow: visible; white-space: nowrap; }                 /* 작업일·시간은 절대 줄이지 않음 (형 요청 09-18) */
  .wl-date { color: var(--ink); font-weight: 500; } .wl-time { color: var(--ink-2); font-size: 12px; margin-left: 8px; font-variant-numeric: tabular-nums; }
  .wl-order { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: 0; }
  .wl-eq { color: var(--ink-2); }
  .wl-shift { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--r-pill); white-space: nowrap; }
  .wl-shift.day { background: var(--warn-bg); color: var(--warn); } .wl-shift.night { background: color-mix(in srgb, var(--s7) 12%, var(--surface)); color: var(--s7); }
  .wl-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wl-p { font-weight: 600; color: var(--ink); }
  .wl-part { margin-left: 6px; }
  .wl-detail { color: var(--ink-3); font-size: 11px; margin-left: 6px; }
  .wl-detail::before { content: '· '; }
  .wl-who { font-weight: 600; color: var(--ink); }
  .wl-tbl mark { background: var(--warn-bg); color: inherit; border-radius: 3px; padding: 0 1px; }
  /* ── 가제본 현황 (gj-*) ── */
  .gj-meta { color: var(--ink-3); }
  .gj-status-line { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
  .gj-status-line:empty { display: none; }
  .gj-tabs { display: flex; gap: 2px; margin-bottom: 12px; border-bottom: 1px solid var(--border-strong); overflow-x: auto; scrollbar-width: thin; }
  .gj-tabs .gajebon-sheet-btn { flex-shrink: 0; }
  .gj-filter { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
  .gj-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .gj-search { flex: 1; min-width: 220px; height: 34px; }
  .gj-filter .dh-select { height: 34px; }
  .gj-dates { display: inline-flex; align-items: center; gap: 6px; } .gj-dates em { font-style: normal; color: var(--ink-3); }
  .gj-dates input[type=date].dh-select { padding: 0 8px; font-weight: 500; }
  .gj-quick-l { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-right: 2px; }
  .gj-filter .gj-toggle { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 999px; }
  .gj-legend { margin-left: auto; font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
  .gj-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--border); margin-left: 6px; }
  .gj-sw.done { background: #FFF3C4; }
  .gj-tablecard { padding: 0; overflow: hidden; }
  .gj-count { padding: 9px 16px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--border); background: var(--surface); }
  .gj-tbl th { padding: 9px 10px; }
  .gj-tbl td { padding: 8px 10px; white-space: normal; overflow: visible; font-size: 12.5px; }
  .gj-tbl tbody tr:hover td { background: var(--surface-2); }
  .gj-tbl tr.gj-done-row td { background: #FFF8DC; }
  .gj-tbl tr.gj-done-row:hover td { background: #FFF3C4; }
  .gj-date-c { white-space: nowrap; color: var(--ink-2); }
  .gj-order { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: 0; white-space: nowrap; }
  .gj-ell { overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap !important; }
  /* 거래처 칸: 이름은 줄임, 리스크 칩은 항상 보이게(긴 이름에 칩이 셀 밖으로 밀려 안 눌리던 문제) */
  .gj-cwrap { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
  .gj-ctext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gj-cwrap .cdb-risk { flex-shrink: 0; margin-left: 2px; }
  .gj-who { color: var(--ink-2); }
  .gj-prod { font-weight: 600; color: var(--ink); }
  .gj-dim { color: var(--ink-3); }
  .gj-stcell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
  .gj-st { width: 88px; height: 26px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; padding: 0 6px; cursor: pointer; }
  .gj-st[data-st="done"] { color: var(--good); background: var(--good-bg); border-color: transparent; }
  .gj-st[data-st="prog"] { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
  .gj-st[data-st="wait"] { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
  .gj-gdate { width: 112px; height: 26px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 11px; padding: 0 6px; color: var(--ink-2); cursor: pointer; }
  .gj-gdate.has { border-color: #E3B341; background: #FFF3C4; color: #6B4F00; font-weight: 600; }
  .gj-gdate:focus, .gj-st:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
  .gj-stamp { display: inline-block; font-size: 11px; font-weight: 700; color: #6B4F00; background: #FFE58A; border-radius: var(--r-pill); padding: 1px 8px; }
  .gj-stamp.soft { background: #FFF0C2; }
  @media (max-width: 720px) { .gj-legend { margin-left: 0; width: 100%; } .gj-search { min-width: 100%; } }

  /* ── 부적합사고 취합대장 (cl-*) ── */
  .cl-count { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .cl-trash { height: 28px; padding: 0 10px; font-size: 11.5px; }
  .cl-trash-panel { padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 12.5px; }
  .cl-tbl td { padding: 8px 10px; }
  .cl-tbl td.c { text-align: center; } .cl-tbl td.r { text-align: right; } .cl-tbl td.dim { color: var(--ink-3); }
  .cl-date { color: var(--ink-2); }
  .cl-client { font-weight: 500; }
  .cl-prod { font-weight: 600; color: var(--ink); }
  .cl-act { white-space: nowrap; }
  .cl-ic { border: 0; background: transparent; width: 26px; height: 26px; border-radius: 6px; color: var(--ink-3); cursor: pointer; font-size: 14px; line-height: 1; }
  .cl-ic:hover { background: var(--brand-100); color: var(--brand-700); }
  .cl-ic.del:hover { background: var(--danger-bg); color: var(--danger); }
  .cl-ic.off, .cl-ic.off:hover { opacity: .32; cursor: not-allowed; background: transparent; color: var(--ink-3); }   /* 남의 등록 건: 본인·관리자만 (2026-10-12) */
  /* 부적합 사고 사진 첨부 (2026-10-14) */
  .att-prev { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
  .att-thumb { width: 72px; height: 72px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-3); background: var(--gray-50); }
  .att-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .cl-ic.att { width: auto; padding: 0 5px; gap: 2px; display: inline-flex; align-items: center; }
  .cl-ic.att b { font-size: 10.5px; }
  .cl-ic.att.dim { opacity: .4; }
  .att-modal { position: fixed; inset: 0; background: rgba(16,24,40,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; }
  .att-box { background: var(--surface, #fff); border-radius: 14px; padding: 18px; width: min(760px, 94vw); max-height: 88vh; overflow: auto; }
  .att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
  .att-item img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
  .att-item small { display: block; font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
  #tab-claim .metrics { margin-bottom: 16px; }

  /* ── 등록 화면 공통 (부적합사고 등록 · KPI 등록) rg-* ── */
  .rg-wrap { max-width: 1040px; }
  .rg-paste .dh-head { margin-bottom: 10px; }
  .rg-paste-ta { width: 100%; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 10px 12px; font: 12px/1.5 var(--font-mono); resize: vertical; background: var(--surface); color: var(--ink); outline: 0; }
  .rg-paste-ta:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
  .rg-paste-act { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
  .rg-msg { font-size: 12.5px; color: var(--ink-2); }
  .rg-form { padding: 18px 20px 16px; }
  /* 등록 화면 · 비슷한 과거 사례 패널 */
  .rs-panel { border: 1px solid var(--brand-100); background: var(--brand-50); border-radius: var(--r-lg); padding: 12px 14px 10px; }
  .rs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
  .rs-title { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
  .rs-title i { color: var(--brand-700); }
  .rs-title span { font-weight: 500; color: var(--ink-3); font-size: 12px; }
  .rs-actions { display: flex; align-items: center; gap: 6px; }
  .rs-more.dh-btn { padding: 4px 9px; font-size: 11.5px; }
  .rs-x { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; }
  .rs-x:hover { background: #fff; color: var(--ink); }
  .rs-list { display: flex; flex-direction: column; gap: 6px; }
  .rs-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: start; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; }
  .rs-ring { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--ink); background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--gray-100) 0); position: relative; }
  .rs-ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; z-index: 0; }
  .rs-ring span { position: relative; z-index: 1; }
  .rs-body { min-width: 0; }
  .rs-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 11.5px; color: var(--ink-3); margin-bottom: 3px; }
  .rs-meta b { color: var(--ink-2); font-weight: 600; }
  .rs-meta .dh-tag { font-size: 11px; padding: 1px 7px; }
  .rs-sym { font-size: 12.5px; color: var(--ink); line-height: 1.45; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rs-sym mark, .rs-act mark { background: #FFF1B8; color: inherit; padding: 0 1px; border-radius: 2px; }
  .rs-act { margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--ink-2); padding: 5px 8px; border-left: 3px solid var(--good); background: var(--good-bg); border-radius: 0 var(--r-md) var(--r-md) 0; word-break: keep-all; }
  .rs-act.none { border-left-color: var(--gray-300); background: var(--surface-2); color: var(--ink-3); font-style: italic; }
  .rs-act.cause { border-left-color: var(--brand); background: var(--brand-50); }
  .rs-act b { color: var(--ink); font-weight: 600; margin-right: 4px; }
  .rs-take.dh-btn { padding: 4px 9px; font-size: 11.5px; white-space: nowrap; }
  .rs-take.dh-btn:disabled { opacity: .45; cursor: default; }
  .rs-hint { margin-top: 8px; font-size: 11px; color: var(--ink-3); }
  .rs-empty { font-size: 12.5px; color: var(--ink-3); padding: 6px 2px; }
  @media (max-width: 720px) { .rs-row { grid-template-columns: 34px minmax(0, 1fr); } .rs-take { grid-column: 2; justify-self: start; } .rs-more .ti + * { display: none; } .rs-head { align-items: flex-start; } }

  .rg-foot { margin-top: 18px; display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
  .rg-foot .rg-msg { margin-right: auto; }
  .rg-log { font-size: 12.5px; color: var(--ink-3); }
  /* 입력칸 · 라벨 · 섹션 카드 (2026-10-06: 마크업의 인라인 style 을 지우고 여기서만 모양 — !important 불필요) */
  #tab-register .rg-form label, #tab-kpi-reg .kpi-reg-section label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
  #tab-register label span, #tab-kpi-reg label span, #tab-register label small, #tab-kpi-reg label small { color: var(--ink-3); font-weight: 500; font-size: 11px; }
  #tab-register input:not([type=file]):not([type=checkbox]), #tab-register select, #tab-register textarea:not(.rg-paste-ta),
  #tab-kpi-reg input:not([type=file]):not([type=checkbox]), #tab-kpi-reg select, #tab-kpi-reg textarea {
    width: 100%; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 8px 10px;
    font-family: inherit; font-size: 13px; color: var(--ink); background: var(--surface); outline: 0; transition: border-color .12s, box-shadow .12s;
  }
  #tab-register textarea, #tab-kpi-reg textarea { resize: vertical; }
  #tab-register input:focus, #tab-register select:focus, #tab-register textarea:focus,
  #tab-kpi-reg input:focus, #tab-kpi-reg select:focus, #tab-kpi-reg textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
  #tab-register input::placeholder, #tab-kpi-reg input::placeholder { color: var(--ink-3); }
  #reg-deftype-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-3); }
  #tab-kpi-reg .kpi-reg-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px 16px; box-shadow: var(--shadow-1); }
  #tab-kpi-reg .kpi-reg-section > div:first-child { font-size: 13px; color: var(--ink-2); font-weight: 500; margin-bottom: 14px; }
  #tab-kpi-reg [id$="-msg"] { font-size: 12px; color: var(--good); }
  @media (max-width: 720px) { #tab-register [style*="grid-template-columns"], #tab-kpi-reg [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } }

  /* ── 변경 이력 · 접속 기록 (lg-*) ── */
  .lg-search { width: 260px; height: 34px; }
  .lg-scroll { max-height: 640px; overflow-y: auto; }
  .lg-tbl { table-layout: fixed; }
  .lg-tbl td { padding: 8px 12px; }
  .lg-t { color: var(--ink-2); }
  .lg-u { font-weight: 600; color: var(--ink); } .lg-u small { color: var(--ink-3); font-weight: 400; font-size: 11px; margin-left: 5px; }
  .lg-a { color: var(--ink-2); }
  .lg-mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: 0; }
  .lg-d { color: var(--ink-2); }
  @media (max-width: 720px) { .lg-search { width: 100%; } .dh-actions { width: 100%; } }

  /* ── 문서 관리 (dc-*) ── */
  #tab-docs .dh-seg .doc-filter { border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); padding: 5px 12px; font-size: 12px; font-weight: 500; }
  #tab-docs .dh-seg .doc-filter.on, #tab-docs .dh-seg .doc-filter.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); border: 0; }
  .dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
  .dc-card { padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .15s, transform .15s; margin-bottom: 0; }
  .dc-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
  .dc-top { display: flex; align-items: center; gap: 8px; }
  .dc-icon { width: 34px; height: 34px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 18px; }
  .dc-icon.xls { background: var(--good-bg); color: var(--good); } .dc-icon.doc { background: var(--brand-100); color: var(--brand-700); }
  .dh-tag.alt { background: var(--surface-2); color: var(--ink-2); }
  .dc-del { margin-left: auto; border: 0; background: transparent; width: 26px; height: 26px; border-radius: 6px; color: var(--ink-3); cursor: pointer; font-size: 14px; }
  .dc-del:hover { background: var(--danger-bg); color: var(--danger); }
  .dc-name { font-size: 13px; font-weight: 600; color: var(--ink); word-break: break-all; line-height: 1.4; }
  .dc-meta { font-size: 11px; color: var(--ink-3); }

  /* ── 공통 대화상자 (td-*) — alert/confirm/prompt 대체 ── */
  .td-back { position: fixed; inset: 0; z-index: 20000; background: rgba(17, 24, 39, .45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .14s; }
  .td-back.in { opacity: 1; } .td-back.out { opacity: 0; }
  .td-box { width: 440px; max-width: 100%; background: var(--surface); border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-3); padding: 20px 22px 16px; transform: translateY(8px) scale(.98); transition: transform .16s; font-family: var(--font-sans); color: var(--ink); }
  .td-back.in .td-box { transform: none; }
  .td-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .td-head h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: var(--ls-snug); }
  .td-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
  .td-ic.info, .td-ic.ask { background: var(--brand-100); color: var(--brand-700); }
  .td-ic.warn { background: var(--warn-bg); color: var(--warn); }
  .td-ic.danger { background: var(--danger-bg); color: var(--danger); }
  .td-body { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
  .td-lead { margin: 0; color: var(--ink); font-weight: 600; white-space: pre-line; font-size: 13.5px; word-break: keep-all; }
  .td-p { margin: 8px 0 0; white-space: pre-line; padding: 8px 12px; background: var(--surface-2); border-radius: var(--r-md); font-size: 12.5px; word-break: keep-all; }
  .td-input { width: 100%; margin-top: 12px; height: 38px; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 0 12px; font: inherit; font-size: 14px; color: var(--ink); outline: 0; box-sizing: border-box; }
  .td-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
  .td-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
  .td-ok { min-width: 88px; justify-content: center; }
  .td-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
  .td-danger:hover { filter: brightness(.92); }
  @media (max-width: 480px) { .td-box { padding: 16px 16px 14px; border-radius: 14px; } .td-foot .dh-btn { flex: 1; justify-content: center; } }

  /* ── 클레임 DB · 유사사례 검색 (cdb-*) ── */
  .cdb-search { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
  .cdb-q-wrap { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 10px 12px; background: var(--surface); }
  .cdb-q-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
  .cdb-q-wrap i { color: var(--ink-3); font-size: 18px; margin-top: 3px; }
  .cdb-q-wrap textarea { flex: 1; border: 0; outline: 0; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink); background: transparent; min-height: 48px; }
  .cdb-q-wrap textarea::placeholder { color: var(--ink-3); }
  .cdb-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .cdb-filters .dh-select { height: 32px; }
  #cdb-client { width: 160px; font-weight: 500; }
  .cdb-filters .gj-toggle { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 999px; }
  .cdb-hint { margin-left: auto; font-size: 11px; color: var(--ink-3); }
  .cdb-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
  .cdb-main { min-width: 0; }
  .cdb-count { border-radius: var(--r-lg) var(--r-lg) 0 0; border: 1px solid var(--border); border-bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .cdb-results { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
  .cdb-hit { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; }
  .cdb-hit:last-child { border-bottom: 0; }
  .cdb-hit:hover { background: var(--surface-2); }
  .cdb-hit.open { background: var(--brand-50); }
  .cdb-score { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 2px; }
  .cdb-ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink); background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--gray-100) 0); position: relative; }
  .cdb-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
  .cdb-ring span { position: relative; }
  .cdb-ring.hi { background: conic-gradient(var(--good) calc(var(--p) * 1%), var(--gray-100) 0); }
  .cdb-ring.lo { background: conic-gradient(var(--gray-300) calc(var(--p) * 1%), var(--gray-100) 0); }
  .cdb-score small { font-size: 11px; color: var(--ink-3); }
  .cdb-hit-body { min-width: 0; }
  .cdb-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); flex-wrap: wrap; }
  .cdb-meta b { color: var(--ink-2); font-weight: 600; }
  .cdb-sym { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 4px 0 6px; line-height: 1.45; word-break: keep-all; }
  .cdb-sym mark, .cdb-act mark { background: var(--warn-bg); color: inherit; border-radius: 3px; padding: 0 1px; }
  .cdb-act { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; padding: 8px 10px; border-left: 3px solid var(--good); background: var(--good-bg); border-radius: 0 var(--r-md) var(--r-md) 0; word-break: keep-all; }
  .cdb-act.generic { border-left-color: var(--gray-300); background: var(--surface-2); color: var(--ink-3); }
  .cdb-act.none { border-left-color: var(--gray-300); background: var(--surface-2); color: var(--ink-3); font-style: italic; }
  .cdb-act.cause { border-left-color: var(--brand); background: var(--brand-50); color: var(--ink-2); margin-bottom: 6px; }
  .cdb-act b { color: var(--ink); font-weight: 600; margin-right: 4px; }
  .cdb-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .cdb-detail { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-strong); font-size: 12px; color: var(--ink-2); display: none; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; }
  .cdb-hit.open .cdb-detail { display: grid; }
  .cdb-detail span { color: var(--ink-3); margin-right: 4px; }
  .cdb-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
  .cdb-side .card { margin: 0; padding: 14px 16px; }
  .cdb-side h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: flex; justify-content: space-between; }
  .cdb-side h4 small { color: var(--ink-3); font-weight: 500; }
  .cdb-bar { display: grid; grid-template-columns: 90px minmax(0, 1fr) 32px; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
  .cdb-bar > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
  .cdb-bar i { display: block; height: 8px; border-radius: 4px; background: var(--brand); }
  .cdb-bar i.muted { background: var(--gray-300); }
  .cdb-bar b { text-align: right; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .cdb-warn { font-size: 12px; padding: 8px 10px; border-radius: var(--r-md); background: var(--danger-bg); color: var(--danger); font-weight: 600; margin-top: 8px; }
  .cdb-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .cdb-kpi { background: var(--surface-2); border-radius: var(--r-md); padding: 8px 10px; }
  .cdb-kpi b { display: block; font-size: 18px; font-weight: 700; letter-spacing: var(--ls-tight); }
  .cdb-kpi span { font-size: 11px; color: var(--ink-3); }
  .cdb-empty { padding: 36px 20px; text-align: center; color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }
  .cdb-empty-good { display: inline-block; text-align: left; padding: 12px 16px; border-radius: var(--r-md); background: var(--good-bg); border: 1px solid #BFE5D0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
  .cdb-empty-good i { color: var(--good); vertical-align: -2px; margin-right: 2px; } .cdb-empty-good b { color: var(--ink); }
  .cdb-empty-sub { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
  .cdb-sugbar { padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .cdb-sugbar .cdb-empty-sub { margin-top: 0; }
  .cdb-sug { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 4px 10px; font: 500 12px var(--font-sans); cursor: pointer; margin: 2px; } .cdb-sug small { color: var(--ink-3); margin-left: 3px; } .cdb-sug:hover { border-color: var(--brand); color: var(--brand-700); }
  /* 인사이트 화면 · 리스크 칩 · 팝오버 */
  .cdb-search.ins-hidden { display: none; }
  .ins-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px 12px; margin-bottom: 12px; }
  .ins-h h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .ins-h h3 small { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
  .ins-tbl { width: 100%; font-size: 12.5px; }
  .ins-tbl th { font-size: 11.5px; } .ins-tbl th.r, .ins-tbl td.r { text-align: right; }
  .ins-tbl td small { color: var(--ink-3); font-size: 11px; }
  .ins-tbl tr.hot td { background: #FFF6F5; }
  .ins-tbl td.ins-act { max-width: 420px; white-space: normal; line-height: 1.45; color: var(--ink-2); }
  .ins-tbl .none { color: var(--ink-3); font-style: italic; }
  .ins-rate { font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--gray-100); color: var(--ink-2); }
  .ins-rate.good { background: var(--good-bg); color: var(--good); } .ins-rate.bad { background: #FCEBEA; color: #8A2320; }
  .ins-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .ins-2col h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink); } .ins-2col h4 small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
  .ins-eq { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
  .ins-eq-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; background: #fff; }
  .ins-eq-card.rep { border-color: #F3C6C2; background: #FFFAF9; }
  .ins-eq-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; } .ins-eq-h span { color: var(--ink-3); font-size: 11.5px; }
  .ins-eq-types { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
  .ins-check { margin-top: 8px; font-size: 12px; color: var(--ink-2); line-height: 1.45; padding: 6px 8px; background: var(--brand-50); border-left: 3px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0; }
  .ins-check b { color: var(--brand-700); margin-right: 4px; }
  .ins-note { margin-top: 8px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
  .ins-side p { font-size: 12px; color: var(--ink-2); line-height: 1.55; margin: 0 0 8px; } .ins-side b { color: var(--ink); }
  .cdb-risk { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 1px 6px 1px 4px; border-radius: var(--r-pill); border: 1px solid #F3C6C2; background: #FFF3F2; color: #8A2320; font: 700 11px/1.4 var(--font-sans); cursor: pointer; vertical-align: middle; }
  .cdb-risk i { font-size: 11px; } .cdb-risk.hot { background: #D0342A; border-color: #D0342A; color: #fff; }
  .cdb-risk:hover { filter: brightness(.96); }
  .cdb-pop { position: fixed; z-index: 15000; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-3); padding: 12px 14px; font-size: 12.5px; color: var(--ink-2); }
  .cdb-pop-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink); padding-right: 26px; position: relative; } .cdb-pop-h .hot { color: #D0342A; }
  .cdb-pop-x { position: absolute; right: -6px; top: -4px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 13px; width: 26px; height: 26px; border-radius: 999px; } .cdb-pop-x:hover { background: var(--surface-2); }
  .cdb-pop-tags { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0; }
  .cdb-pop-warn { margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; background: #FFF3F2; border: 1px solid #F3C6C2; color: #8A2320; font-size: 12px; line-height: 1.45; } .cdb-pop-warn b { margin-right: 4px; }
  .cdb-pop-row { display: grid; grid-template-columns: 78px 76px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 0; border-top: 1px solid var(--border); }
  .cdb-pop-row .s { color: var(--ink); line-height: 1.4; } .cdb-pop-row .a { margin-top: 3px; font-size: 12px; color: var(--ink-2); } .cdb-pop-row .a.none { color: var(--ink-3); font-style: italic; } .cdb-pop-row .a b { color: var(--good); margin-right: 3px; }
  .cdb-pop-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--ink-3); flex-wrap: wrap; }
  .cdb-warn-line { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 4px; padding: 3px 8px; border-radius: 8px; background: #FFF3F2; border: 1px solid #F3C6C2; color: #8A2320; font-size: 11.5px; font-weight: 500; line-height: 1.4; cursor: pointer; white-space: normal; max-width: 100%; }
  .cdb-warn-line i { font-size: 12px; } .cdb-warn-line b { font-weight: 700; } .cdb-warn-line .num { color: #B42318; } .cdb-warn-line .act { color: var(--ink-2); font-weight: 400; }
  .cdb-warn-line:hover { background: #FFE9E7; }
  .gj-tbl td.gj-prod .cdb-warn-line { font-weight: 500; }
  .dh-recur-btn { margin-top: 4px; border: 1px solid #F3C6C2; background: #FFF3F2; color: #8A2320; border-radius: 999px; padding: 3px 10px; font: 600 11.5px var(--font-sans); cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
  @media (max-width: 900px) { .ins-2col { grid-template-columns: 1fr; } .cdb-pop-row { grid-template-columns: 70px minmax(0, 1fr); } .cdb-pop-row .dh-tag { display: none; } .ins-tbl td.ins-act { max-width: none; } }
  @media (max-width: 1100px) { .cdb-body { grid-template-columns: 1fr; } .cdb-side { position: static; } .cdb-hint { margin-left: 0; width: 100%; } }
  @media (max-width: 720px) { .cdb-hit { grid-template-columns: 44px minmax(0, 1fr); padding: 10px 12px; } .cdb-ring { width: 40px; height: 40px; font-size: 11px; } #cdb-client { width: 100%; } }

  /* ── 업데이트 기록(#tab-updates) ── */
  .nav-new { display: inline-block; min-width: 8px; height: 8px; border-radius: 999px; background: var(--brand); margin-left: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(23, 162, 184, .2); }
  .nav-new[hidden] { display: none; }
  .nav-new[data-n] { min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; font-size: 11px; font-weight: 700; color: #fff; text-align: center; box-shadow: none; }
  .ul-list { display: flex; flex-direction: column; gap: 0; max-width: 980px; }
  .ul-month { font-size: 12.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; padding: 18px 0 10px 4px; display: flex; align-items: center; gap: 10px; }
  .ul-month::after { content: ''; flex: 1; height: 1px; background: var(--border); }
  .ul-item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 16px; position: relative; padding-bottom: 14px; }
  .ul-item::before { content: ''; position: absolute; left: 76px; top: 26px; bottom: -6px; width: 1px; background: var(--border); }
  .ul-item:last-child::before { display: none; }
  .ul-date { text-align: right; padding: 12px 18px 0 0; position: relative; }
  .ul-date b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .ul-date span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
  .ul-date::after { content: ''; position: absolute; right: -4.5px; top: 19px; width: 9px; height: 9px; border-radius: 999px; background: var(--brand); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); }
  .ul-item.pending .ul-date::after { background: var(--gray-400, #9aa3ae); }
  .ul-item.new .ul-date::after { box-shadow: 0 0 0 4px rgba(23, 162, 184, .18); }
  .ul-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 18px 12px; }
  .ul-item.pending .ul-card { background: var(--gray-50, #f8fafc); border-style: dashed; }
  .ul-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
  .ul-title { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.4; flex: 1; min-width: 200px; }
  .ul-tags { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
  .ul-tag { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand-700); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); line-height: 1.4; }
  .ul-tag.a-화면 { background: color-mix(in srgb, var(--s3) 12%, var(--surface)); color: var(--s3); border-color: color-mix(in srgb, var(--s3) 22%, transparent); }
  .ul-tag.a-데이터 { background: var(--good-bg); color: var(--good); border-color: color-mix(in srgb, var(--good) 22%, transparent); }
  .ul-tag.a-수집 { background: color-mix(in srgb, var(--s2) 12%, var(--surface)); color: var(--s2); border-color: color-mix(in srgb, var(--s2) 22%, transparent); }
  .ul-tag.a-보안 { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
  .ul-tag.st { background: var(--gray-100); color: var(--ink-3); border-color: var(--border); }
  .ul-tag.new { background: var(--brand); color: #fff; border-color: var(--brand); }
  .ul-tag.star { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--s6) 45%, transparent); font-weight: 700; }
  .ul-ver { font: 600 11px/1 var(--font-mono, ui-monospace, Menlo, Consolas, monospace); color: var(--ink-2); background: var(--surface-2, #f7f8fa); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; white-space: nowrap; }
  .ul-item.star .ul-card { border-color: color-mix(in srgb, var(--s6) 55%, var(--surface)); box-shadow: inset 4px 0 0 var(--s6); background: linear-gradient(90deg, var(--warn-bg) 0, var(--surface) 180px); }
  .ul-item.star .ul-date::after { background: var(--s6); }
  .ul-item.star .ul-title::before { content: '★'; color: var(--s6); margin-right: 6px; }
  .ul-items { margin: 10px 0 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--ink-2, #374151); }
  .ul-items li { margin: 3px 0; }
  .ul-items li::marker { color: var(--brand); }
  .ul-items mark, .ul-title mark { background: #FFF1B8; color: inherit; padding: 0 1px; border-radius: 2px; }
  .ul-by { font-size: 11px; color: var(--ink-3); margin-top: 8px; }
  @media (max-width: 720px) {
    .ul-item { grid-template-columns: 1fr; } .ul-item::before, .ul-date::after { display: none; }
    .ul-date { text-align: left; padding: 0 0 6px 2px; } .ul-date b { display: inline; font-size: 13px; } .ul-date span { display: inline; margin-left: 6px; }
    .dh-actions .dh-search { width: 100%; }
  }

        #wl-hero{background:#fff;border:1px solid #e7edee;border-radius:12px;padding:20px 22px 22px;color:#182a31;box-shadow:0 1px 2px rgba(24,42,49,.04);margin-bottom:18px}
        #wl-hero .wl-title{font-size:18px;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:9px;color:#182a31}
        #wl-hero .wl-title i{color:#17A2B8}
        #wl-hero .wl-sub{font-size:12.5px;color:#6b7b82;margin-top:6px;line-height:1.5}
        #wl-hero .wl-sub b{color:#182a31;font-weight:600}
        #wl-searchbar{position:relative;margin-top:16px}
        #wl-searchbar .wl-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:19px;color:#9aa7ad;pointer-events:none}
        #worklog-q{width:100%;box-sizing:border-box;padding:13px 16px 13px 46px;border:1px solid #dfe6e8;border-radius:10px;font-size:14px;background:#fff;color:#182a31;transition:border-color .15s,box-shadow .15s;outline:none}
        #worklog-q::placeholder{color:#aeb4b8}
        #worklog-q:focus{border-color:#17A2B8;box-shadow:0 0 0 3px rgba(23,162,184,.15)}
        #wl-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:#6b7b82}
        #wl-dates input[type=date],#wl-dates select{padding:8px 10px;border:1px solid #dfe6e8;background:#fff;color:#182a31;border-radius:9px;font-size:12.5px}
        #wl-dates input[type=date]:focus,#wl-dates select:focus{outline:none;border-color:#17A2B8;box-shadow:0 0 0 3px rgba(23,162,184,.15)}
        #wl-dates select option{color:#182a31}
        #worklog-count{font-size:12px;color:#8a999f;margin:2px 0 10px;font-weight:500}

/* ── 접속 분석 (관리자 그래프, 2026-10-13) ── */
.acs { margin-bottom: 12px; }
.acs-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
#acs-tiles { margin-bottom: 12px; }
.acs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.acs-grid > .dh-card { margin-bottom: 0; }
.acs-ch { position: relative; height: 220px; }
.acs-tbl td.acs-pages small { color: var(--ink-3); }
.acs-tbl td.acs-acts .badge { margin-right: 4px; }
@media (max-width: 1100px) { .acs-grid { grid-template-columns: 1fr; } }