@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* 별터 ERP 기본 모양 — 디자인은 견적 모듈이 완성된 뒤 따로 다듬는다 (대표 결정)
   2026-09-14 글꼴: Pretendard · 기본 13px (대표: 참고 화면처럼 작고 깔끔하게) */
:root { --line:#e3e6ea; --dim:#6b7280; --blue:#1f4e79; --bg:#f6f7f9; --red:#b42318; --green:#0b6b3d; --amber:#9a6700; }
* { box-sizing: border-box; }
b, strong { font-weight:600; }
[hidden] { display:none !important; }   /* 숨김 표시가 다른 모양(display:flex 등)에 덮이지 않게 */
body { margin:0; font-family: "Pretendard Variable",Pretendard,"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif; font-size:13px; line-height:1.5; letter-spacing:-0.1px; color:#1f2328; background:var(--bg); -webkit-font-smoothing:antialiased; }
header { display:flex; align-items:center; gap:12px; padding:12px 20px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
header h1 { font-size:17px; margin:0; } header .sp { flex:1; } header .who { color:var(--dim); font-size:13px; }
main { padding:16px 20px; max-width:1400px; margin:0 auto; }
button { font:inherit; padding:6px 12px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; }
button.pri { background:var(--blue); color:#fff; border-color:var(--blue); }
input, select, textarea { font:inherit; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.note { background:#eef4fb; border:1px solid #cfe0f3; color:#1c3d6e; padding:9px 13px; border-radius:10px; margin-bottom:12px; font-size:12.5px; }
.tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.tools input[type=search] { flex:1; min-width:220px; }
.cnt { color:var(--dim); font-size:12px; margin-left:auto; }
.box { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:auto; }
.center { max-width:420px; margin:80px auto; padding:28px; }
table { width:100%; border-collapse:collapse; }
th, td { padding:10px 12px; border-bottom:1px solid #f0f1f3; text-align:left; vertical-align:middle; }
th { background:#fff; font-size:12px; font-weight:500; color:#8b93a1; white-space:nowrap; position:sticky; top:0; }
td.num, th.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
tr.row { cursor:pointer; } tr.row:hover { background:#f1f6fc; } tr.on { background:#e6f0fa; }
.pill { display:inline-block; padding:1px 8px; border-radius:99px; font-size:11px; font-weight:500; background:#eef0f2; color:var(--dim); white-space:nowrap; }
.pill.g { background:#e6f4ec; color:var(--green); } .pill.r { background:#fdecea; color:var(--red); } .pill.a { background:#fff4d6; color:var(--amber); } .pill.b { background:#e6f0fa; color:var(--blue); }
.sub { color:var(--dim); font-size:11.5px; }
.layout { display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap:14px; align-items:start; }
.detail { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; position:sticky; top:70px; max-height:calc(100vh - 90px); overflow:auto; }
.detail h2 { margin:0 0 4px; font-size:16px; } .detail h3 { font-size:12px; font-weight:600; color:var(--dim); margin:18px 0 6px; }
.kv { display:grid; grid-template-columns:110px 1fr; gap:6px 12px; margin:0; } .kv dt { color:var(--dim); } .kv dd { margin:0; }
.empty { padding:30px; text-align:center; color:var(--dim); }
/* 입력 — 새 견적 창 · 기본 정보 고치기 */
button.mini { padding:3px 9px; font-size:12px; margin-left:4px; }
button:disabled { opacity:.5; cursor:default; }
dialog { border:1px solid var(--line); border-radius:14px; padding:20px 22px; width:min(560px, calc(100vw - 32px)); box-shadow:0 12px 40px rgba(0,0,0,.18); }
dialog::backdrop { background:rgba(20,24,30,.35); }
dialog h2 { margin:0 0 4px; font-size:16px; }
.form { display:grid; grid-template-columns:100px minmax(0,1fr); gap:10px 12px; align-items:start; }
.form > label { color:var(--dim); padding-top:8px; }
.form input[type=text], .form input[type=date], .form select { width:100%; }
.form label.chk { color:inherit; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.req { color:var(--red); }
.btns { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.err { color:var(--red); font-size:13px; margin-top:10px; min-height:1em; }
.kv.edit { align-items:center; } .kv.edit dt { padding-top:2px; }
.kv.edit input[type=text], .kv.edit select { width:100%; max-width:340px; }
.kv.edit input:not(:disabled):hover, .kv.edit select:not(:disabled):hover { border-color:#b9c3cf; }
.kv.edit #fTermsText { margin-top:6px; }
.saved { font-weight:normal; color:var(--green); font-size:12px; margin-left:8px; }
.pp-in { width:100%; }
.pp-list { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.pp-item { text-align:left; border:1px solid var(--line); padding:6px 10px; border-radius:8px; }
.pp-item:hover { background:#f1f6fc; }
.pp-state { margin-top:4px; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:#1f2328; color:#fff; padding:10px 18px; border-radius:10px; z-index:50; max-width:calc(100vw - 32px); }
.toast.bad { background:var(--red); }

/* 견적서 (묶음 2) */
dialog.wide { width:min(1200px, calc(100vw - 32px)); }
.rev-edit th, .rev-edit td { padding:5px 4px; }
.rev-edit input, .rev-edit select { padding:6px 7px; width:100%; }
.rev-edit input.num { text-align:right; }
.rev-totals { margin-top:14px; padding:10px 12px; background:#f6f8fb; border-radius:10px; text-align:right; font-variant-numeric:tabular-nums; }
.rev-totals .big { font-size:17px; color:var(--blue); }
.rev-card { border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px; }
.rev-card.on { border-color:#9fd3b5; background:#f6fbf8; }
.rev-name { font-weight:bold; margin-bottom:2px; }
.rev-old { margin-top:4px; }
.rev-old > summary { cursor:pointer; padding:8px 10px; border:1px dashed var(--line); border-radius:10px; color:var(--dim); list-style-position:inside; }
.rev-old[open] > summary { margin-bottom:8px; }
.rev-card.old { background:#fafbfc; }
.rev-card.old .rev-name { color:var(--dim); font-weight:normal; }
.rev-warn { margin-top:6px; padding:6px 10px; background:#fff8e1; border:1px solid #f3dd9a; border-radius:8px; color:#6b4e00; font-size:12.5px; }
.rev-acts { margin-top:8px; display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.rev-acts button.mini { margin-left:0; }

/* 사업자등록증 원본·AI 비교 (옛 13번 검토 화면) */
.review-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:14px; margin-top:10px; align-items:start; }
.review-src { position:sticky; top:0; }
.review-src img, .review-src iframe { width:100%; height:70vh; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:#f6f7f9; }
@media (max-width: 900px) { .review-grid { grid-template-columns:1fr; } .review-src { position:static; } .review-src img, .review-src iframe { height:50vh; } }

/* 묶음 5 — 대시보드 · 보드 · 다음 할 일 */
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px; margin-bottom:16px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.kpi b { font-size:19px; display:block; margin:2px 0; }
.board { display:flex; gap:10px; overflow-x:auto; padding-bottom:10px; align-items:flex-start; }
.board .col { min-width:210px; width:210px; background:#eef1f4; border-radius:12px; padding:8px; }
.col-h { font-weight:bold; margin:2px 4px 8px; }
.card-s { background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px; margin-bottom:6px; cursor:pointer; font-size:13px; }
.card-s.hot { border-color:#f1a9a0; box-shadow:inset 3px 0 0 var(--red); }
a.mini-link { font-size:12.5px; padding:3px 10px; border:1px solid var(--line); border-radius:8px; color:var(--blue); text-decoration:none; background:#fff; }
.next-bar { margin:6px 0; padding:7px 10px; border-radius:8px; background:#eef4fb; font-size:13px; }
.next-bar.hot { background:#fdecea; color:var(--red); }

/* 묶음 4 — 메뉴 링크 · 건 처리 · 관리 */
a.nav { color:var(--blue); text-decoration:none; padding:6px 10px; border-radius:8px; }
a.nav:hover { background:#eef4fb; }
.state-bar { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin:8px 0 4px; }
.state-bar button.mini { margin-left:0; }
.state-now { font-weight:bold; margin-right:6px; }
.state-form { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:6px; }
.state-form select, .state-form input { padding:5px 8px; }
tr.off input[data-f="value"] { color:var(--dim); text-decoration:line-through; }
main h2 { font-size:14px; font-weight:600; margin:6px 0 8px; }

/* 샘플·생산 · 돈 · 메모 (묶음 3) */
.job-card { border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px; }
.job-card.done { background:#fafbfc; }
.steps { margin:8px 0; font-size:12px; color:var(--dim); display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.steps span { padding:2px 8px; border-radius:99px; background:#f1f3f5; }
.steps span.past { background:#e6f0fa; color:var(--blue); }
.steps span.now { background:var(--blue); color:#fff; font-weight:bold; }
.steps i { font-style:normal; color:#c0c6cc; }
.job-grid { display:grid; grid-template-columns:80px minmax(0,1fr); gap:6px 10px; align-items:center; margin-top:6px; max-width:460px; }
.job-grid label { color:var(--dim); font-size:12.5px; }
.job-grid input, .job-grid select { padding:5px 8px; width:100%; }
.finish-form { margin-top:8px; padding:8px 10px; border:1px dashed #9fb8d3; border-radius:8px; background:#f7fafd; }
.money-sub { margin:14px 0 4px; font-weight:bold; font-size:13px; }
.mini-table th, .mini-table td { padding:4px; }
.mini-table input, .mini-table select { padding:5px 6px; width:100%; min-width:80px; }
.mini-table input.num { text-align:right; }
.mini-table tr.add-row td { background:#f7fafd; }
.note-add { display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:6px; align-items:start; margin-bottom:8px; }
.note-add textarea { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:8px; resize:vertical; }
.note-row { margin-bottom:6px; }
@media (max-width: 520px) { .note-add { grid-template-columns:1fr; } }

@media (max-width: 980px) { .layout { grid-template-columns:1fr; } .detail { position:static; max-height:none; } }
@media (max-width: 520px) { .form { grid-template-columns:1fr; } .form > label { padding-top:0; } }

/* ───────── 공통 틀: 왼쪽 사이드바 · 위 막대 (layout.js) — 모듈은 사이드바에 한 줄씩 추가 ───────── */
.app { display:flex; min-height:100vh; }
.side { width:232px; flex:0 0 232px; background:#fff; border-right:1px solid var(--line); position:sticky; top:0; height:100vh; overflow-y:auto; padding:14px 10px; transition:width .15s, flex-basis .15s; }
.side-brand { display:flex; align-items:center; gap:10px; padding:6px 8px 16px; color:#0f1b3d; text-decoration:none; }
.brand-mark { width:36px; height:36px; flex:0 0 36px; border-radius:9px; object-fit:cover; background:#0f1b3d; }
.brand-txt { display:flex; flex-direction:column; line-height:1.1; }
.brand-txt b { font-size:17px; letter-spacing:.5px; } .brand-txt small { font-size:9.5px; letter-spacing:2px; color:#8a93a3; margin-top:2px; }
.side-g { font-size:11.5px; color:var(--dim); padding:14px 10px 4px; }
.side-i { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; color:#1f2328; text-decoration:none; font-size:13px; white-space:nowrap; }
.side-i svg { width:16px; height:16px; flex:0 0 16px; color:var(--dim); }
a.side-i:hover { background:#f1f4f8; }
.side-i.on { background:#e6f0fa; color:var(--blue); font-weight:600; } .side-i.on svg { color:var(--blue); }
.side-i.soon { color:#9aa3ad; cursor:default; } .side-i.soon em { margin-left:auto; font-style:normal; font-size:10.5px; background:#f1f3f5; color:#9aa3ad; padding:1px 6px; border-radius:99px; }
.app-main { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; gap:10px; padding:10px 20px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.topbar h1 { font-size:15px; font-weight:600; margin:0; } .topbar .sp { flex:1; } .topbar .who { color:var(--dim); font-size:13px; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; padding:6px; border:0; background:transparent; border-radius:8px; }
.icon-btn:hover { background:#f1f4f8; } .icon-btn svg { width:19px; height:19px; }
.btn-link { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border-radius:8px; text-decoration:none; font-size:13px; }
.btn-link.pri { background:var(--blue); color:#fff; } .btn-link svg { width:16px; height:16px; }
.app.collapsed .side { width:64px; flex-basis:64px; }
.app.collapsed .side-i span, .app.collapsed .side-i em, .app.collapsed .side-g, .app.collapsed .brand-txt { display:none; }
.side-dim { display:none; }
@media (max-width: 900px) {
  .side { position:fixed; left:0; top:0; z-index:30; transform:translateX(-100%); transition:transform .2s; box-shadow:0 0 24px rgba(0,0,0,.15); }
  .app.side-open .side { transform:none; }
  .app.side-open .side-dim { display:block; position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:20; }
  .topbar .who { display:none; }
}

/* ───────── 거래처 목록 (넓은 표 · 바로 고치기 · 창) ───────── */
.ptable { table-layout:fixed; }
.ptable td { overflow:hidden; text-overflow:ellipsis; }
.cell-edit { display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; padding:3px 6px; border:1px solid transparent; background:transparent; border-radius:8px; text-align:left; }
.cell-edit:hover { border-color:var(--line); background:#fff; }
.cell-edit svg { width:13px; height:13px; color:#9aa3ad; }
.cell-sel { padding:3px 8px; font-size:12px; border-radius:99px; border:1px solid transparent; cursor:pointer; }
.cell-sel.on { background:#e6f4ec; color:var(--green); } .cell-sel.off { background:#f1f3f5; color:var(--dim); }
.cell-sel:hover { border-color:#c9d1da; }
.pop { position:fixed; z-index:60; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
.pop label.chk { display:flex; gap:6px; align-items:center; }
.badge { display:inline-block; margin-left:4px; padding:0 7px; border-radius:99px; background:#e6b54a; color:#1f2328; font-size:11px; font-weight:600; }
button.pri svg { width:15px; height:15px; vertical-align:-3px; }
.dlg-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.dlg-h h2 { margin:0; }
dialog #detail h2 { margin:0 0 4px; font-size:17px; } dialog #detail h3 { font-size:12px; font-weight:600; color:var(--dim); margin:18px 0 6px; }
.ptable .icon-btn { padding:4px; } .ptable .icon-btn svg { width:15px; height:15px; color:#8b93a1; }

/* ───────── 🧪 시험 버전 (trial-*.html) — 확정되면 필요한 것만 남긴다 ───────── */
.trial-banner { background:#fff8e6; border:1px dashed #e6b54a; color:#6b4e00; padding:8px 12px; border-radius:10px; margin-bottom:12px; font-size:12.5px; }
.stat-cards { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.stat-card { flex:1 1 150px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px; cursor:pointer; text-align:left; }
.stat-card:hover { border-color:#b9c3cf; } .stat-card.on { border-color:var(--blue); box-shadow:0 0 0 2px #e6f0fa; }
.stat-card .k { font-size:12px; color:var(--dim); } .stat-card .v { font-size:20px; font-weight:700; margin-top:2px; }
.stat-card .v.r { color:var(--red); } .stat-card .v.g { color:var(--green); } .stat-card .v.b { color:var(--blue); } .stat-card .v.a { color:var(--amber); }
.stat-card .s { font-size:11.5px; color:var(--dim); }
.shortcuts { display:inline-flex; gap:6px; }
.shortcuts a { display:inline-flex; align-items:center; gap:4px; padding:5px 9px; border:1px solid var(--line); border-radius:8px; color:#1f2328; text-decoration:none; font-size:12px; background:#fff; }
.shortcuts a:hover { border-color:#b9c3cf; } .shortcuts svg { width:13px; height:13px; color:var(--dim); }
.link-cell { border:0; background:transparent; padding:2px 4px; border-radius:6px; text-align:left; cursor:pointer; }
.link-cell:hover { background:#f1f4f8; }
.cert-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; margin-top:10px; }
.cert-view { background:#f1f3f5; border-radius:10px; min-height:520px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cert-view iframe { width:100%; height:620px; border:0; } .cert-view img { max-width:100%; max-height:620px; }
.kv-table th { width:110px; background:transparent; color:var(--dim); font-weight:500; position:static; }
.tabs-line { display:flex; gap:2px; border-bottom:1px solid var(--line); margin:10px 0 12px; }
.tabs-line button { border:0; background:transparent; border-bottom:2px solid transparent; border-radius:0; padding:8px 12px; color:var(--dim); }
.tabs-line button.on { color:var(--blue); border-bottom-color:var(--blue); font-weight:600; }
.grid2 { display:grid; grid-template-columns:110px minmax(0,1fr) 110px minmax(0,1fr); gap:8px 12px; align-items:center; }
.grid2 label { color:var(--dim); } .grid2 input { width:100%; }
@media (max-width: 900px) { .cert-grid, .grid2 { grid-template-columns:1fr; } }
/* 시험 버전 2차 — 큰 카드 · 동작 카드 · Flow식 목록 도구 */
.act-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; margin-bottom:12px; }
.act-card { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; text-align:left; cursor:pointer; color:#1f2328; text-decoration:none; font-size:13px; }
.act-card:hover { border-color:#9fb3c8; box-shadow:0 2px 8px rgba(15,27,61,.06); }
.act-card .ic { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:#eef4fb; color:var(--blue); }
.act-card .ic svg { width:20px; height:20px; } .act-card b { display:block; font-size:14px; } .act-card .sub { display:block; }
.act-card.pri .ic { background:var(--blue); color:#fff; }
.stat-cards.big .stat-card { min-height:108px; padding:16px 18px; display:flex; flex-direction:column; justify-content:space-between; }
.stat-cards.big .stat-card .k { font-size:13px; font-weight:500; color:#4b5563; }
.stat-cards.big .stat-card .v { font-size:30px; line-height:1.1; margin:6px 0 2px; }
.list-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 8px; }
.list-head h2 { margin:0; font-size:17px; } .list-head h2 .sub { font-size:15px; font-weight:500; }
.pill-tabs { display:inline-flex; gap:4px; flex-wrap:wrap; }
.pill-tabs button { padding:4px 11px; border-radius:99px; font-size:12px; border:1px solid var(--line); background:#fff; }
.pill-tabs button.on { background:var(--blue); color:#fff; border-color:var(--blue); }
.chip-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:12.5px; }
.chip-btn.on { border-color:#8f7cf0; color:#5b45c8; background:#f5f3ff; } .chip-btn svg { width:14px; height:14px; }
.chip-on { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:6px; background:#f1f3f5; font-size:12px; }
.chip-on button { border:0; background:transparent; padding:0 2px; color:var(--dim); }
.grp-row td { background:#fafbfc; font-weight:600; cursor:pointer; padding:8px 12px; }
.grp-row td .sub { font-weight:500; }
.issue-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:10px; } .issue-grid h3 { font-size:12px; color:var(--dim); margin:0 0 6px; }
@media (max-width: 900px) { .issue-grid { grid-template-columns:1fr; } }
button.act-card.pri { background:#fff; color:#1f2328; border-color:#9fb3c8; } .pill-tabs button.on .sub { color:#dbe6f3; }
/* 시험 버전 3차 — 위 패널 3개 · 3번 이미지(Flow 목록)처럼 도구 한 줄 + 깔끔한 표 */
.reg-panels { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr); gap:12px; margin-bottom:14px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; min-height:330px; }
.panel h3 { display:flex; align-items:center; gap:8px; margin:0 0 4px; font-size:15px; font-weight:700; color:#1f2328; }
.panel h3 .ic { display:inline-flex; width:30px; height:30px; border-radius:9px; align-items:center; justify-content:center; background:#eef4fb; color:var(--blue); }
.panel h3 .ic svg { width:17px; height:17px; }
.panel .desc { font-size:12px; color:var(--dim); margin-bottom:12px; }
.drop-zone { border:1.5px dashed #b9c6d4; border-radius:12px; background:#f8fafc; padding:22px 12px; text-align:center; cursor:pointer; color:var(--dim); font-size:12.5px; }
.drop-zone:hover { border-color:var(--blue); background:#f1f6fc; } .drop-zone svg { width:26px; height:26px; color:var(--blue); display:block; margin:0 auto 6px; }
.drop-zone b { color:#1f2328; font-size:13.5px; }
.queue-list { margin-top:12px; border-top:1px solid #f0f1f3; } .queue-list .h { font-size:12px; color:var(--dim); margin:10px 0 4px; }
.queue-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid #f4f5f7; font-size:12.5px; }
.queue-row .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-form { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 10px; }
.mini-form .f { display:flex; flex-direction:column; gap:3px; } .mini-form .f.w2 { grid-column:span 2; }
.mini-form label { font-size:11.5px; color:var(--dim); } .mini-form input, .mini-form select { width:100%; padding:6px 9px; }
.panel .foot { margin-top:auto; padding-top:12px; display:flex; align-items:center; gap:8px; }
.check-list { display:flex; flex-direction:column; }
.check-item { display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid #f0f1f3; cursor:pointer; border-radius:8px; }
.check-item:hover { background:#f6f8fb; } .check-item.on { background:#eef4fb; }
.check-item .dot { width:8px; height:8px; border-radius:50%; background:#c9d1da; } .check-item .dot.r { background:var(--red); } .check-item .dot.a { background:#e6a23c; } .check-item .dot.b { background:var(--blue); }
.check-item .t { flex:1; font-size:13px; } .check-item .n { font-weight:700; font-size:15px; } .check-item .n.zero { color:#b0b7c0; font-weight:500; }
.check-item .s { font-size:11.5px; color:var(--dim); margin-left:4px; }
.list-panel { background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px 0 0; }
.flow-toolbar { display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.flow-toolbar .view-select { min-width:210px; font-weight:600; }
.flow-toolbar .sep { width:1px; height:22px; background:var(--line); margin:0 2px; }
.flow-toolbar .tb { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:12.5px; }
.flow-toolbar .tb.on { border-color:#8f9ff0; color:#3f52c8; background:#f4f6ff; } .flow-toolbar .tb svg { width:14px; height:14px; }
.flow-toolbar .icon-round { display:inline-flex; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; align-items:center; justify-content:center; background:#fff; }
.flow-toolbar .icon-round svg { width:15px; height:15px; }
.list-title { display:flex; align-items:baseline; gap:8px; padding:8px 16px 0; } .list-title h2 { margin:0; font-size:17px; } .list-title .sub { font-size:15px; }
.clean-table th { background:#fff; color:#6b7280; font-weight:500; text-align:center; border-bottom:1px solid var(--line); padding:11px 12px; }
.clean-table th:first-child, .clean-table td:first-child { text-align:left; padding-left:18px; }
.clean-table td { text-align:center; padding:11px 12px; border-bottom:1px solid #f2f3f5; }
.clean-table tr.row:hover { background:#f8f9ff; }
@media (max-width: 1100px) { .reg-panels { grid-template-columns:1fr; } .panel { min-height:0; } }
.clean-table .link-cell, .clean-table td { white-space:nowrap; } .clean-table td:first-child { white-space:normal; }

/* ───────── 🧪 시험 v5 전용 (body.t5 안에서만) — 색 변수 한 곳 · 대표 레퍼런스 받으면 여기 값만 바꿈 (E3-006) ─────────
   임시 기준: ui-ux-pro-max 팔레트 「B2B Service」(전문 남색 + 파란 강조) + 로고 금색은 사람 손이 필요한 곳 한 군데만 — frontend-design: 이름 붙인 4~6색 */
body.t5 {
  --ink: #0f172a;        /* 남색 먹 — 글자 (B2B Service Foreground) */
  --brand: #243a73;      /* 로고 남색 — 강조 */
  --brand-tint: #e9eef9; /* 남색 옅은 바탕 */
  --gold: #c9962e;       /* 로고 금색 — 한 곳만 (검토 대기 등 사람 손이 필요한 것) */
  --gold-tint: #fbf3e2;
  --canvas: #f8fafc;     /* 화면 바탕 (B2B Service Background) */
  --info: #0369a1;       /* 파란 강조 — 링크·보기 선택 (B2B Service Accent) */
  --surface: #ffffff;
  --rule: #e2e8f0;
  --muted: #475569;
  --alert: #c2412d; --alert-tint: #fcebe7;
  --ok: #1f7a4d; --ok-tint: #e4f3ea;
  background: var(--canvas); color: var(--ink);
}
body.t5 .side { background: var(--ink); border-right: 0; }
body.t5 .side .brand-txt b { color:#fff; } body.t5 .side .brand-txt small { color:#9aa6c2; }
body.t5 .side-g { color:#8290b3; } body.t5 .side-i { color:#d7ddec; } body.t5 .side-i svg { color:#8f9cbd; }
body.t5 a.side-i:hover { background: rgba(255,255,255,.07); }
body.t5 .side-i.on { background: rgba(201,150,46,.18); color:#fff; } body.t5 .side-i.on svg { color: var(--gold); }
body.t5 .side-i.soon { color:#5f6b8a; } body.t5 .side-i.soon em { background: rgba(255,255,255,.06); color:#7d88a6; }
body.t5 .topbar { background: var(--surface); border-bottom-color: var(--rule); }
body.t5 button.pri, body.t5 .btn-link.pri { background: var(--brand); border-color: var(--brand); }
.t5-head { display:flex; align-items:flex-end; gap:16px; margin:4px 0 16px; flex-wrap:wrap; }
.t5-head h2 { margin:0; font-size:22px; font-weight:700; letter-spacing:-0.3px; }
.t5-head p { margin:2px 0 0; color:var(--muted); font-size:13px; }
.t5-acts { display:flex; gap:10px; margin-left:auto; }
.t5-act { display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; border:1px solid var(--rule); background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; }
.t5-act svg { width:18px; height:18px; }
.t5-act.main { background:var(--brand); border-color:var(--brand); color:#fff; }
.t5-act .cnt { font-size:11.5px; font-weight:600; background:var(--gold); color:#fff; border-radius:99px; padding:1px 8px; }
.t5-strip { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); background:var(--surface); border:1px solid var(--rule); border-radius:14px; margin-bottom:16px; overflow:hidden; }
.t5-stat { padding:16px 18px; border:0; border-right:1px solid var(--rule); background:transparent; text-align:left; cursor:pointer; border-radius:0; }
.t5-stat:last-child { border-right:0; }
.t5-stat:hover { background:#f8f9fc; } .t5-stat.on { background:var(--brand-tint); box-shadow: inset 0 -3px 0 var(--brand); }
.t5-stat .k { font-size:12.5px; color:var(--muted); } .t5-stat .v { font-size:28px; font-weight:700; margin-top:4px; line-height:1.1; }
.t5-stat .v.alert { color:var(--alert); } .t5-stat .v.gold { color:var(--gold); } .t5-stat .v.zero { color:#b8bfcc; }
.t5-stat .s { font-size:11.5px; color:var(--muted); margin-top:2px; }
body.t5 .list-panel { border-color: var(--rule); border-radius:14px; }
body.t5 .flow-toolbar .tb.on { border-color:var(--brand); color:var(--brand); background:var(--brand-tint); }
body.t5 .clean-table th { color:var(--muted); }
body.t5 .clean-table tr.row:hover { background:#f7f8fc; }
body.t5 .pill.b { background:var(--brand-tint); color:var(--brand); } body.t5 .pill.g { background:var(--ok-tint); color:var(--ok); } body.t5 .pill.r { background:var(--alert-tint); color:var(--alert); }
body.t5 .pill.gold { background:var(--gold-tint); color:#8a6414; }
body.t5 button:focus-visible, body.t5 a:focus-visible, body.t5 select:focus-visible, body.t5 input:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
@media (max-width: 1000px) { .t5-strip { grid-template-columns:repeat(2, minmax(0,1fr)); } .t5-stat { border-bottom:1px solid var(--rule); } .t5-acts { margin-left:0; } }

/* ───────── 🧪 시험 v6 전용 (body.t6) — 밝은 사이드바 · 업무용 표준 색 · 가독성 글꼴 ─────────
   색 뜻은 전 세계 업무 도구 공통 관례: 파랑 = 누를 수 있는 것·선택됨 / 빨강 = 문제 / 주황 = 확인 필요 / 초록 = 정상 / 회색 = 보조
   글꼴: Pretendard(supanova·ui-ux-pro-max 한국어 기준) · 본문 14px · 줄간격 1.55 · 자간 0 · 한국어 단어 단위 줄바꿈 */
body.t6 {
  --ink: #111827; --text: #1f2937; --muted: #6b7280; --faint: #9ca3af;
  --brand: #2563eb; --brand-tint: #eff4ff; --brand-ink: #1d4ed8;
  --gold: #d97706; --gold-tint: #fff7e6;
  --canvas: #f6f7f9; --surface: #ffffff; --rule: #e5e7eb;
  --alert: #dc2626; --alert-tint: #fef2f2; --ok: #15803d; --ok-tint: #ecfdf3;
  font-size: 14px; line-height: 1.55; letter-spacing: 0; color: var(--text); word-break: keep-all;
}
body.t6 .side { background: var(--surface); border-right: 1px solid var(--rule); }
body.t6 .side .brand-txt b { color: var(--ink); } body.t6 .side .brand-txt small { color: var(--faint); }
body.t6 .side-g { color: var(--faint); font-weight: 600; font-size: 11.5px; }
body.t6 .side-i { color: #374151; font-size: 13.5px; } body.t6 .side-i svg { color: #9ca3af; }
body.t6 a.side-i:hover { background: #f3f4f6; }
body.t6 .side-i.on { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; } body.t6 .side-i.on svg { color: var(--brand); }
body.t6 .side-i.soon { color: #b0b6c0; } body.t6 .side-i.soon em { background: #f3f4f6; color: #9ca3af; }
body.t6 .topbar h1 { font-size: 15px; color: var(--ink); }
body.t6 .t5-head h2 { font-size: 22px; color: var(--ink); } body.t6 .t5-head p { font-size: 13.5px; }
body.t6 .t5-act { font-size: 14px; } body.t6 .t5-act.main { background: var(--brand); border-color: var(--brand); }
body.t6 .t5-act.main .cnt { background: #fff; color: var(--brand-ink); }
body.t6 .pill.b { background: var(--brand-tint); color: var(--brand-ink); }
body.t6 .t5-stat .k { font-size: 13px; color: #4b5563; font-weight: 500; }
body.t6 .t5-stat .v { font-size: 28px; font-variant-numeric: tabular-nums; }
body.t6 .t5-stat .v.gold { color: var(--gold); }
body.t6 .t5-stat.on { background: var(--brand-tint); box-shadow: inset 0 -3px 0 var(--brand); }
body.t6 .flow-toolbar .tb { font-size: 13px; } body.t6 .flow-toolbar .view-select { font-size: 13.5px; }
body.t6 .clean-table th { font-size: 12.5px; font-weight: 600; color: #6b7280; background: #fafbfc; }
body.t6 .clean-table td { font-size: 14px; color: var(--text); padding: 12px; }
body.t6 .clean-table td b { font-weight: 600; color: var(--ink); }
body.t6 .clean-table tr.row:hover { background: #f5f8ff; }
body.t6 .none { color: #d1d5db; }
body.t6 .pill { font-size: 12px; padding: 2px 9px; font-weight: 500; }
body.t6 .pill.gold { background: var(--gold-tint); color: #b45309; }
body.t6 .sub { font-size: 12.5px; }
body.t6 button:focus-visible, body.t6 a:focus-visible, body.t6 select:focus-visible, body.t6 input:focus-visible { outline: 2px solid var(--brand); }
/* v6 보강 (대표 요청 2026-09-15) — ui-ux-pro-max 검색 결과 반영
   · 추천 스타일 「Data-Dense Dashboard」 · 색: 주색 #1E40AF / 강조(확인 필요) #D97706 / 문제 #DC2626 / 바탕 #F8FAFC / 보조 글자 #475569
   · 글꼴 추천 Fira Sans는 한글이 없어 Pretendard 유지 (supanova 한국어 기준)
   · 규칙 visual-hierarchy · weight-hierarchy · font-scale 12/14/16
   사이드바: 큰 묶음(대시보드·영업·생산…)은 진한 굵은 제목 + 위 구분선 / 하위 메뉴는 보통 굵기·들여쓰기
   표: 칸 제목은 작고 회색 바탕(12px) / 거래처 이름은 크고 진하게(15px·600) */
body.t6 { --brand: #1e40af; --brand-ink: #1e40af; --brand-tint: #eef2fb; --canvas: #f8fafc; --muted: #475569; }
body.t6 .side-g { font-size: 13.5px; font-weight: 700; color: #0f172a; padding: 14px 10px 6px; margin-top: 8px; border-top: 1px solid var(--rule); }
body.t6 .side-g ~ .side-i { padding-left: 20px; font-weight: 400; color: #475569; }
body.t6 .side nav > a.side-i:first-child { font-size: 14px; font-weight: 700; color: #0f172a; }
body.t6 .side nav > a.side-i:first-child svg { color: #334155; }
body.t6 .side-g ~ .side-i.on { color: var(--brand-ink); font-weight: 600; }
body.t6 .side-g ~ .side-i.soon { color: #b0b6c0; }
body.t6 .clean-table th { font-size: 12px; font-weight: 500; color: #64748b; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; padding: 9px 12px; }
body.t6 .clean-table td:first-child { font-size: 14px; font-weight: 600; color: #0f172a; white-space: nowrap; }
body.t6 .ptable th:first-child { width: 220px; }
body.t6 .clean-table td:first-child .sub { font-weight: 400; }
body.t6 .clean-table tr.row { transition: background-color .15s; }
body.t6 .clean-table tr.row:hover { background: #eef2fb; }

/* ───────── 🧪 시험 v7 전용 (body.t7) — 위쪽 요약 크게 · 분류 탭 · 업체코드 ───────── */
.t7-acts { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.t7-act { display:flex; align-items:center; gap:16px; padding:22px 24px; border-radius:14px; border:1px solid var(--rule); background:var(--surface); color:var(--ink); text-align:left; cursor:pointer; transition:background-color .15s, border-color .15s; }
.t7-act:hover { border-color:#c7d2fe; background:#fafbff; }
.t7-act .ic { width:52px; height:52px; border-radius:12px; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; flex:none; }
.t7-act .ic svg { width:26px; height:26px; }
.t7-act .tx { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.t7-act .tx b { font-size:18px; font-weight:700; }
.t7-act .tx small { font-size:13.5px; color:var(--muted); }
.t7-act .n { font-size:13px; font-weight:600; background:#fff; color:var(--brand); border-radius:99px; padding:4px 12px; white-space:nowrap; }
.t7-act .go svg { color:#94a3b8; }
.t7-act.main { background:var(--brand); border-color:var(--brand); color:#fff; }
.t7-act.main:hover { background:#1e3a8a; }
.t7-act.main .ic { background:rgba(255,255,255,.16); color:#fff; }
.t7-act.main .tx small { color:#dbe4ff; }
.t7-stats { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.t7-stats .t5-stat { background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:20px 22px; min-height:138px; display:flex; flex-direction:column; }
.t7-stats .t5-stat:last-child { border-right:1px solid var(--rule); }
.t7-stats .t5-stat .k { font-size:14px; font-weight:600; color:#334155; }
.t7-stats .t5-stat .v { font-size:36px; margin-top:auto; padding-top:10px; }
.t7-stats .t5-stat .s { font-size:12.5px; }
.t7-stats .t5-stat.on { border-color:var(--brand); box-shadow: inset 0 -3px 0 var(--brand); }
.t7-tabbar { display:flex; align-items:center; gap:10px; padding:14px 16px 10px; flex-wrap:wrap; border-bottom:1px solid var(--rule); }
.t7-tabs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.t7-tab { border:1px solid var(--rule); background:#fff; border-radius:99px; padding:6px 14px; font-size:13.5px; color:#334155; cursor:pointer; }
.t7-tab span { color:#94a3b8; margin-left:2px; font-variant-numeric:tabular-nums; }
.t7-tab:hover { border-color:#c7d2fe; }
.t7-tab.on { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.t7-tab.on span { color:#dbe4ff; }
.t7-tabsep { margin-left:8px; padding-left:12px; border-left:1px solid var(--rule); font-size:12.5px; color:#64748b; }
.t7-code { font-size:12.5px; font-weight:600; color:#475569; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:6px; padding:2px 8px; vertical-align:middle; font-variant-numeric:tabular-nums; }
@media (max-width: 1100px) { .t7-stats { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px) { .t7-acts, .t7-stats { grid-template-columns:1fr; } }

/* ───────── 🧪 시험 v8 — 거래처 등록 카드 하나 · 큰 등록 창(원본 | AI 칸) ───────── */
.t8-top { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:14px; margin-bottom:14px; }
.t8-reg { display:flex; align-items:center; gap:18px; padding:22px 24px; border-radius:14px; background:var(--brand); color:#fff; cursor:pointer; transition:background-color .15s; flex-wrap:wrap; }
.t8-reg:hover, .t8-reg.over { background:#1e3a8a; }
.t8-reg .ic { width:54px; height:54px; border-radius:12px; background:rgba(255,255,255,.16); display:grid; place-items:center; flex:none; }
.t8-reg .ic svg { width:28px; height:28px; }
.t8-reg .tx { display:flex; flex-direction:column; gap:4px; flex:1; min-width:220px; }
.t8-reg .tx b { font-size:19px; font-weight:700; } .t8-reg .tx small { font-size:13.5px; color:#dbe4ff; }
.t8-reg .btns { display:flex; gap:8px; flex-wrap:wrap; }
.t8-reg .btns button { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:10px; font-size:14px; font-weight:600; }
.t8-reg .btns button svg { width:17px; height:17px; }
.t8-reg .btns .w { background:#fff; color:var(--brand); border-color:#fff; }
.t8-reg .btns .o { background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.t8-reg .btns .o:hover { background:rgba(255,255,255,.1); }
.t8-queue { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:2px; padding:18px 20px; border-radius:14px; background:var(--surface); border:1px solid var(--rule); text-align:left; }
.t8-queue:hover { border-color:#c7d2fe; }
.t8-queue .k { font-size:14px; font-weight:600; color:#334155; }
.t8-queue .v { font-size:32px; font-weight:700; color:var(--gold); line-height:1.1; } .t8-queue .v.zero { color:#b8bfcc; }
.t8-queue .s { font-size:12.5px; color:var(--muted); }
.t8-top ~ .t7-stats { grid-template-columns:repeat(4, minmax(0,1fr)); }

dialog.reg8 { width:min(1320px, calc(100vw - 32px)); max-width:none; height:min(900px, calc(100vh - 32px)); max-height:none; padding:0; overflow:hidden; }
dialog.reg8[open] { display:flex; flex-direction:column; }
dialog.reg8[data-mode="choose"] { height:fit-content; width:min(900px, calc(100vw - 32px)); }
dialog.reg8[data-mode="hand"] { width:min(860px, calc(100vw - 32px)); }
.r8-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 24px 14px; border-bottom:1px solid var(--rule); }
.r8-head h2 { font-size:18px; margin:0; } .r8-head .sub { font-size:12.5px; margin-top:2px; }
.r8-body { flex:1; min-height:0; overflow:auto; }
.r8-foot { display:flex; align-items:center; gap:8px; padding:14px 24px; border-top:1px solid var(--rule); background:#fafbfc; flex-wrap:wrap; }
.r8-foot:empty { display:none; }
.r8-foot button { padding:9px 16px; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.r8-foot button svg { width:16px; height:16px; }
.r8-foot .pri { padding:9px 22px; font-weight:600; }
.r8-foot .r8-back { border-color:transparent; background:transparent; color:var(--muted); }
.r8-hint { flex:1; font-size:13px; }

.r8-choose { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:22px 24px 8px; }
.r8-tile { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:24px; border-radius:14px; border:1px solid var(--rule); background:#fff; color:var(--ink); text-align:left; cursor:pointer; min-height:220px; }
.r8-tile:hover { border-color:#c7d2fe; background:#fafbff; }
.r8-tile .ic { width:52px; height:52px; border-radius:12px; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; margin-bottom:6px; }
.r8-tile .ic svg { width:26px; height:26px; }
.r8-tile b { font-size:18px; } .r8-tile small { font-size:13.5px; color:var(--muted); }
.r8-tile .acts { display:flex; gap:8px; margin-top:auto; padding-top:12px; flex-wrap:wrap; }
.r8-tile .acts button { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; font-weight:600; }
.r8-tile .acts svg { width:16px; height:16px; }
.r8-tile.main { background:var(--brand); border-color:var(--brand); color:#fff; }
.r8-tile.main:hover, .r8-tile.main.over { background:#1e3a8a; }
.r8-tile.main .ic { background:rgba(255,255,255,.16); color:#fff; }
.r8-tile.main small, .r8-tile.main .drop { color:#dbe4ff; }
.r8-tile.main .acts .w { background:#fff; color:var(--brand); border-color:#fff; }
.r8-tile .drop { font-size:12px; }
.r8-tile .btn-like { font-weight:600; color:var(--brand); }
.only-touch { display:none !important; }
@media (pointer: coarse) { .only-touch { display:inline-flex !important; } }
.r8-queue { padding:8px 24px 22px; }
.r8-queue h3 { font-size:14px; margin:10px 0 6px; font-weight:600; }
.r8-queue .queue-row { gap:10px; }

.r8-split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); height:100%; }
.r8-orig { display:flex; flex-direction:column; border-right:1px solid var(--rule); background:#f1f5f9; min-height:0; }
.r8-orig-bar { display:flex; align-items:center; gap:4px; padding:8px 12px; border-bottom:1px solid var(--rule); background:#fff; }
.r8-orig-bar .mini { display:inline-flex; align-items:center; margin-left:0; }
.r8-orig-bar .mini svg { width:14px; height:14px; }
.r8-orig-view { flex:1; min-height:0; overflow:auto; padding:14px; text-align:center; }
.r8-orig-view img { max-width:none; box-shadow:0 2px 10px rgba(15,23,42,.12); background:#fff; }
.r8-orig-view iframe { width:100%; height:100%; min-height:560px; border:0; background:#fff; }
.r8-split .r8-form { overflow:auto; min-height:0; }
.r8-form { padding:18px 24px 24px; }
.r8-single .r8-form { max-width:860px; margin:0 auto; }
.r8-sum { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; background:var(--brand-tint); color:#1e3a8a; font-size:13.5px; margin-bottom:10px; flex-wrap:wrap; }
.r8-sum svg { width:17px; height:17px; flex:none; }
.r8-sum.warn { background:var(--gold-tint); color:#92400e; }
.r8-raw { margin:0 0 12px; font-size:13px; } .r8-raw th { width:110px; }
.r8-sec { padding:12px 0; border-bottom:1px solid #eef1f5; } .r8-sec:last-child { border-bottom:0; }
.r8-sec h3 { font-size:14.5px; font-weight:700; color:#0f172a; margin:0 0 10px; }
.r8-toggle { border:0; background:none; padding:0; font:inherit; font-weight:700; color:#0f172a; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.r8-toggle svg { width:17px; height:17px; color:#64748b; }
.r8-folded { padding:0 0 2px 23px; }
.r8-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 12px; }
.r8-form .f { display:flex; flex-direction:column; gap:4px; min-width:0; }
.r8-form .f.w2 { grid-column:span 2; } .r8-form .f.w3 { grid-column:1 / -1; }
.r8-form .f label { font-size:13px; color:#334155; font-weight:500; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.r8-form .f input, .r8-form .f textarea { width:100%; padding:9px 11px; font-size:14px; border-radius:8px; }
.r8-form .f input:focus, .r8-form .f textarea:focus { outline:2px solid var(--brand); outline-offset:-1px; border-color:var(--brand); }
.r8-form .f.warn input { border-color:#f59e0b; background:#fffbeb; }
.r8-note { font-size:12.5px; } .r8-note:empty { display:none; }
.r8-note .bad { color:var(--alert); } .r8-note .ok { color:var(--ok); }
.r8-b { font-size:11px; font-weight:600; border-radius:5px; padding:0 6px; line-height:18px; }
.r8-b.ai { background:var(--brand-tint); color:var(--brand); }
.r8-b.edit { background:#ecfdf3; color:#15803d; }
.r8-b.need { background:#fff7e6; color:#b45309; }
.r8-chips { display:flex; gap:6px; flex-wrap:wrap; }
.r8-chip { display:inline-flex; align-items:center; gap:4px; padding:7px 14px; border-radius:99px; font-size:13.5px; border:1px solid var(--rule); background:#fff; color:#334155; min-height:36px; }
.r8-chip svg { width:14px; height:14px; }
.r8-chip:hover { border-color:#a5b4fc; }
.r8-chip.on { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.r8-extra { margin:12px 0; padding:14px 16px; border-radius:12px; background:#f8fafc; border:1px solid #e2e8f0; display:flex; flex-direction:column; gap:10px; }
.r8-extra h4 { margin:0; font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:6px; color:#1e3a8a; }
.r8-extra h4 svg { width:16px; height:16px; }
.r8-extra + .r8-grid { margin-top:12px; }

@media (max-width: 1100px) { .t8-top { grid-template-columns:1fr; } .r8-split { grid-template-columns:1fr; height:auto; } .r8-orig { border-right:0; border-bottom:1px solid var(--rule); } .r8-orig-view { max-height:42vh; } .r8-orig-view iframe { min-height:40vh; } .r8-split .r8-form { overflow:visible; } }
@media (max-width: 760px) {
  dialog.reg8, dialog.reg8[data-mode] { width:100vw; height:100dvh; max-height:none; border-radius:0; margin:0; border:0; }
  .r8-choose { grid-template-columns:1fr; padding:16px; } .r8-tile { min-height:0; }
  .r8-queue { padding:8px 16px 16px; } .r8-form { padding:14px 16px 20px; } .r8-head, .r8-foot { padding-left:16px; padding-right:16px; }
  .r8-grid { grid-template-columns:1fr; } .r8-form .f.w2 { grid-column:auto; }
  .r8-hint { flex-basis:100%; order:-1; } .r8-foot .pri { flex:1; justify-content:center; }
  .t8-top ~ .t7-stats { grid-template-columns:1fr 1fr; }
}

/* ───────── 🧪 시험 v9 — 크게 보기 · 검토 필요 · 관리자 설정(분류·세부 항목·등록 칸) ───────── */
.t8-reg { position:relative; }
.t8-set { position:absolute; top:10px; right:14px; display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#dbe4ff; text-decoration:none; padding:3px 8px; border-radius:6px; }
.t8-set:hover { background:rgba(255,255,255,.12); color:#fff; } .t8-set svg { width:14px; height:14px; }
.clean-table tr.row.review { background:#fffbeb; } .clean-table tr.row.review:hover { background:#fef3c7; }
.r8-orig-view { cursor:zoom-in; }
.r8-orig-view img + img { margin-top:12px; }
.r8-big { font-weight:600; }
.r8-foot .r8-temp { border-color:#f59e0b; color:#b45309; background:#fffbeb; }
.r8-foot .r8-temp:hover { background:#fef3c7; }
.r8-lack { display:flex; align-items:flex-start; gap:8px; padding:10px 14px; border-radius:10px; background:#fff7e6; color:#92400e; font-size:13.5px; margin-bottom:10px; }
.r8-lack svg { width:17px; height:17px; flex:none; margin-top:2px; }
.r8-lack.ok { background:#ecfdf3; color:#166534; }
.r8-chip.etc { border-style:dashed; }
.r8-chip.etc.on { border-style:solid; }

dialog.viewer { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:#0f172a; color:#e2e8f0; }
dialog.viewer[open] { display:flex; flex-direction:column; }
dialog.viewer::backdrop { background:rgba(15,23,42,.9); }
.vw-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; background:#111827; border-bottom:1px solid #1f2937; flex-wrap:wrap; }
.vw-bar b { font-size:14px; color:#f8fafc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40vw; }
.vw-bar button, .vw-bar a { display:inline-flex; align-items:center; gap:5px; background:#1f2937; color:#e5e7eb; border:1px solid #374151; border-radius:8px; padding:7px 11px; font-size:13px; text-decoration:none; min-height:36px; }
.vw-bar button:hover, .vw-bar a:hover { background:#374151; }
.vw-bar svg { width:16px; height:16px; }
.vw-pct { min-width:64px; text-align:center; font-size:13px; font-variant-numeric:tabular-nums; }
.vw-bar .vw-x { background:#e5e7eb; color:#111827; border-color:#e5e7eb; margin-left:6px; }
.vw-stage { flex:1; min-height:0; overflow:auto; cursor:grab; touch-action:none; padding:20px; }
.vw-stage:active { cursor:grabbing; }
.vw-pages { margin:0 auto; transform-origin:center top; transition:transform .2s; }
.vw-pages.fit { width:min(100%, 1100px); }
.vw-pages img { display:block; width:100%; max-width:none; background:#fff; box-shadow:0 6px 30px rgba(0,0,0,.4); user-select:none; }
.vw-pages img + img { margin-top:16px; }

.ad-state { display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; background:var(--brand-tint); color:#1e3a8a; font-size:13px; margin-bottom:10px; }
.ad-state svg { width:16px; height:16px; }
.ad-tabs button { display:inline-flex; align-items:center; gap:6px; font-size:14px; }
.ad-tabs button svg { width:16px; height:16px; }
.ad-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:14px; align-items:start; }
.ad-card { background:#fff; border:1px solid var(--rule); border-radius:14px; padding:16px 18px; }
.ad-card h3 { font-size:15px; margin:0 0 10px; font-weight:700; }
.ad-list { display:flex; flex-direction:column; gap:4px; }
.ad-row { display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; cursor:pointer; flex-wrap:wrap; }
.ad-row:hover { border-color:#c7d2fe; }
.ad-row.on { border-color:var(--brand); background:var(--brand-tint); }
.ad-row.off { opacity:.55; }
.ad-row.drag { opacity:.4; } .ad-row.over { box-shadow:inset 0 2px 0 var(--brand); }
.ad-row .grip { color:#94a3b8; cursor:grab; display:inline-flex; } .ad-row .grip svg { width:16px; height:16px; }
.ad-row .mini { margin-left:0; display:inline-flex; align-items:center; } .ad-row .mini svg { width:14px; height:14px; }
.ad-inline { border:1px solid transparent; background:transparent; padding:5px 8px; font-size:14px; min-width:160px; border-radius:6px; }
.ad-inline:hover { border-color:#e5e7eb; background:#fff; } .ad-inline:focus { border-color:var(--brand); background:#fff; outline:none; }
.ad-row select { padding:4px 6px; font-size:13px; }
.ad-add { margin-top:10px; display:inline-flex; align-items:center; gap:6px; border-style:dashed; }
.ad-add svg { width:15px; height:15px; }
.ad-addrow { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.ad-addrow input { flex:1; min-width:200px; padding:8px 10px; }
.ad-addrow button { display:inline-flex; align-items:center; gap:5px; } .ad-addrow svg { width:15px; height:15px; }
.ad-form { display:grid; grid-template-columns:130px minmax(0,1fr); gap:10px 12px; align-items:center; }
.ad-form > label { color:#334155; font-size:13px; }
.ad-form input:not([type=checkbox]) { padding:8px 10px; width:100%; max-width:360px; }
@media (max-width: 900px) { .ad-two { grid-template-columns:1fr; } .ad-form { grid-template-columns:1fr; } .vw-bar b { max-width:100%; flex-basis:100%; } }



/* 🧪 v9 삭제 — 창 안 왼쪽 아래 · 저장 단추와 떨어뜨림 · 휴지통으로 */
.r8-foot .r8-del { border-color:transparent; background:transparent; color:var(--alert, #dc2626); }
.r8-foot .r8-del:hover { background:#fef2f2; }
dialog.del-ask { width:min(440px, calc(100vw - 32px)); padding:20px 22px; }
dialog.del-ask h3 { display:flex; align-items:center; gap:8px; font-size:16px; margin:0 0 8px; }
dialog.del-ask h3 svg { width:20px; height:20px; color:#dc2626; }
dialog.del-ask p { margin:0; font-size:14px; line-height:1.6; color:#334155; }
dialog.del-ask button { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; }
dialog.del-ask button svg { width:16px; height:16px; }
button.danger { background:#dc2626; border-color:#dc2626; color:#fff; font-weight:600; }
button.danger:hover { background:#b91c1c; }

/* 로그인 화면 — 구글 로그인 단추 (2026-09-16 E3-011) */
.google-btn { display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; font-size:15px; font-weight:600; background:#fff; color:#1f2328; border:1px solid #dadce0; border-radius:10px; }
.google-btn:hover { background:#f8f9fa; border-color:#c6cacd; }
.google-btn svg { width:20px; height:20px; }
.or-line { display:flex; align-items:center; gap:10px; margin:18px 0 12px; color:var(--dim); font-size:12px; }
.or-line::before, .or-line::after { content:""; flex:1; height:1px; background:var(--line); }


/* 거래처 등록 — 분류 4칸(설명 포함) · 세부 유형 아래 한 단계 더 */
.r8-cats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; align-items:stretch; }
.r8-cat { display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left; padding:12px 14px; border:1px solid var(--rule); border-radius:12px; background:#fff; color:#334155; cursor:pointer; }
.r8-cat b { font-size:14.5px; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.r8-cat b svg { width:15px; height:15px; }
.r8-cat small { font-size:12px; color:var(--muted); line-height:1.4; }
.r8-cat:hover { border-color:#a5b4fc; }
.r8-cat.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.r8-cat.on small { color:#dbe4ff; }
.r8-catadd { display:inline-flex; align-items:center; gap:4px; align-self:center; font-size:12.5px; color:var(--muted); text-decoration:none; border:1px dashed var(--rule); border-radius:10px; padding:10px 12px; }
.r8-catadd:hover { border-color:#a5b4fc; color:var(--brand); }
.r8-catadd svg { width:14px; height:14px; }
.r8-sub2 { display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-left:2px solid var(--rule); margin-left:4px; flex-wrap:wrap; }
.r8-sub2-t { font-size:12.5px; color:var(--muted); padding-top:7px; white-space:nowrap; }
.r8-chip.sm { padding:5px 11px; font-size:12.5px; min-height:30px; }
@media (max-width: 760px) { .r8-cats { grid-template-columns:1fr 1fr; } }
/* 임시 번호 칩 (확정되면 지움) */
.r8-no { display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; font-size:11px; font-weight:700; color:#64748b; background:#f1f5f9; border-radius:5px; margin-right:2px; }
.r8-extra h4 .r8-no, .r8-sub2-t .r8-no { background:#e2e8f0; }
.r8-form .f select { width:100%; padding:9px 11px; font-size:14px; border-radius:8px; }
/* 업체명 칸 크게 · 상호 「업체명과 같음」 · AI 분류 추천 */
.r8-form .f.big input { font-size:17px; padding:13px 14px; font-weight:600; }
.r8-same { display:inline-flex; align-items:center; gap:4px; margin-left:6px; font-size:12px; color:var(--muted); font-weight:400; }
.r8-form .f input[type="checkbox"] { width:auto; padding:0; margin:0; }
.r8-tip { display:flex; align-items:center; gap:6px; margin-top:8px; padding:8px 12px; border-radius:10px; border:1px solid #fcd9a0; background:#fff7e6; color:#92400e; font-size:13px; text-align:left; }
.r8-tip:hover { background:#fef3c7; } .r8-tip svg { width:16px; height:16px; }

/* 🔢 화면 영역 임시 번호 (개발 중에만 · js/dev-area-numbers.js와 함께 지움) */
.dev-area-no { position:absolute; top:-9px; left:-9px; z-index:30; min-width:22px; height:22px; line-height:22px; padding:0 6px; text-align:center;
  background:#1d4ed8; color:#fff; font-size:12px; font-weight:700; border-radius:7px; box-shadow:0 1px 4px rgba(0,0,0,.25); pointer-events:auto; cursor:help; }
.dev-area-btn { position:fixed; right:14px; bottom:14px; z-index:60; padding:8px 12px; font-size:12.5px; border-radius:99px;
  background:#1f2937; color:#fff; border:0; box-shadow:0 2px 10px rgba(0,0,0,.25); cursor:pointer; }
.dev-area-btn:hover { background:#374151; }
@media print { .dev-area-no, .dev-area-btn { display:none !important; } }
/* 칸 제목 줄 높이를 맞춰 아래 입력칸이 어긋나지 않게 */
.r8-form .f > label { min-height:20px; align-items:flex-end; }
.r8-form .f.big > label { min-height:auto; }
/* 접힌 상자 안 작은 제목 (대금 · 정산) */
.r8-subhead { margin:10px 0 6px; font-size:12.5px; font-weight:700; color:#475569; display:flex; align-items:center; gap:6px; }
.r8-subhead:first-child { margin-top:0; }
.r8-subhead .sub { font-weight:400; }
/* 연락 방법 — 드롭다운으로 고르면 칩으로 쌓인다 */
.r8-ch { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.r8-form .f .r8-ch select { flex:1; min-width:110px; }
.r8-form .f select { min-height:42px; }
.r8-chsel { display:inline-flex; align-items:center; gap:5px; padding:6px 8px 6px 10px; border-radius:99px;
  background:#eef2ff; border:1px solid #c7d2fe; color:#3730a3; font-size:13px; font-weight:600; }
.r8-chsel b { background:#4338ca; color:#fff; font-size:10px; padding:1px 5px; border-radius:99px; font-weight:700; }
.r8-chsel button { border:0; background:none; padding:0 2px; color:#6366f1; font-size:15px; line-height:1; cursor:pointer; }
.r8-chsel button:hover { color:var(--alert); }
.r8-chetc { flex:1; min-width:120px; }
/* 연락 줄 — 담당자 · 전화 · 이메일 · 연락 방법 네 칸 */
.r8-grid.c4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .r8-grid.c4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ───── 거래처 수정 창 — 구역 이동 단추 줄 (시험 v9 · 이동식/전환식 비교용 2026-09-16) */
.r8-navbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:sticky;top:0;z-index:3;
  background:var(--card,#fff);padding:8px 0 10px;border-bottom:1px solid var(--line,#e6e8ee);margin-bottom:14px}
.r8-navtabs{display:flex;gap:2px;flex-wrap:wrap;flex:1;min-width:0}
.r8-navtabs button{border:0;background:transparent;padding:7px 11px;border-radius:8px;font-size:13px;color:var(--muted,#6b7280);cursor:pointer;white-space:nowrap}
.r8-navtabs button:hover{background:var(--soft,#f3f4f8);color:var(--ink,#111)}
.r8-navtabs button.on{background:var(--pri,#2b48d6);color:#fff}
.r8-navmode{display:flex;gap:0;border:1px solid var(--line,#e6e8ee);border-radius:8px;overflow:hidden;flex:none}
.r8-navmode button{border:0;background:#fff;padding:6px 12px;font-size:12px;color:var(--muted,#6b7280);cursor:pointer}
.r8-navmode button.on{background:var(--pri,#2b48d6);color:#fff}
.r8-more{border:1px solid var(--line,#e6e8ee);border-radius:10px;padding:10px 12px;margin-top:8px}
.r8-more>summary{cursor:pointer;list-style:none}
.r8-more>summary::-webkit-details-marker{display:none}
.r8-more>summary::before{content:'▸ ';color:var(--muted,#6b7280)}
.r8-more[open]>summary::before{content:'▾ '}
.r8-more-body{padding-top:10px}
/* 거래처 서류 — 종류별 올리기 칸 (2026-09-16) */
.r8-docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:720px){.r8-docs{grid-template-columns:1fr}}
.r8-doc{border:1.5px dashed var(--line,#d9dce5);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--soft,#fafbfc)}
.r8-doc.has{border-style:solid;background:#fff}
.r8-doc-h{display:flex;align-items:center;gap:6px;font-size:14px}
.r8-doc-h svg{width:16px;height:16px}
.r8-doc-f{display:flex;gap:6px;align-items:center;font-size:12px;border-top:1px solid var(--line,#eee);padding-top:6px}
.r8-doc-f span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r8-doc-acts{display:flex;gap:6px;margin-top:2px}
.r8-doc-drop{font-size:11px;color:var(--muted,#8a8f9c);text-align:center;padding:6px;border-radius:6px;background:rgba(0,0,0,.025)}
.r8-addhint{color:var(--pri,#2b48d6);font-weight:600}
/* 구역 단추의 「비어 있음」 아이콘 — 무엇을 채우면 되는지 보이게 (2026-09-16) */
.r8-empty{display:inline-flex;vertical-align:-2px;margin-left:3px;color:#d97706}
.r8-empty svg{width:14px;height:14px}
.r8-navtabs button.on .r8-empty{color:#fde68a}
/* 거래 상태 스위치 — 수정 창 맨 위 (2026-09-16) */
.r8-head{display:flex;align-items:center;gap:12px}
.r8-head>div:first-child{flex:1;min-width:0}
.r8-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--line,#e6e8ee);flex:none}
.r8-switch input{position:absolute;opacity:0;pointer-events:none}
.r8-switch .track{width:38px;height:22px;border-radius:999px;background:#cbd0da;position:relative;transition:background .15s}
.r8-switch .knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.r8-switch.on .track{background:#16a34a}
.r8-switch.on .knob{left:19px}
.r8-switch b{font-size:13px}
.r8-switch.on b{color:#15803d}
.r8-switch.off b{color:#6b7280}
/* ERP 가운데 확인창 — 브라우저 기본 confirm 대신 (2026-09-16) · 색은 body.t5 변수 */
dialog.ask8{border:0;border-radius:14px;box-shadow:0 20px 50px rgba(15,23,42,.28);width:min(460px,calc(100vw - 32px))}
dialog.ask8::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
dialog.ask8 h3{color:var(--ink,#0f172a);line-height:1.4}
dialog.ask8[data-tone="pri"] h3 svg{color:var(--brand,#243a73)}
dialog.ask8[data-tone="danger"] h3 svg{color:var(--alert,#c2412d)}
.ask8-body{margin:4px 0 18px}
.ask8-list{list-style:none;margin:0;padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:var(--brand-tint,#e9eef9);border-radius:10px}
.ask8-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink,#0f172a)}
.ask8-list li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--brand,#243a73)}
.ask8-list small{color:var(--muted,#475569);font-size:12.5px}
dialog.ask8 .btns{display:flex;justify-content:flex-end;gap:8px}
dialog.ask8 .btns .pri{background:var(--brand,#243a73);border-color:var(--brand,#243a73);color:#fff}
/* 스위치 색도 ERP 톤으로 — 초록 대신 ERP 「정상」 색 */
.r8-switch.on .track{background:var(--ok,#1f7a4d)}
.r8-switch.on b{color:var(--ok,#1f7a4d)}
/* 거래처 목록 — 칸을 다 켜면 넓어지므로 가로로 밀어 보기 · 칸 숨김 모두 켜기/끄기 (2026-09-16) */
.ptable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptable-wrap .ptable{min-width:100%}
.ptable-wrap .ptable th,.ptable-wrap .ptable td{white-space:nowrap}
.ptable-wrap .ptable td:first-child,.ptable-wrap .ptable th:first-child{position:sticky;left:0;background:var(--surface,#fff);z-index:1}
.ptable-wrap .ptable tr.review td:first-child{background:#fffbeb}
.pop-acts{display:flex;gap:6px;padding:2px 0 8px;border-bottom:1px solid var(--rule,#e2e8f0);margin-bottom:6px}
/* 칸을 다 켜도 글자가 잘리지 않게 — 칸은 내용만큼, 넘치면 표 전체를 가로로 민다 (2026-09-16) */
.ptable-wrap .ptable{table-layout:auto;width:max-content;min-width:100%}
.ptable-wrap .ptable td{overflow:visible;text-overflow:clip}
/* 칸 설정 창 — 끌어서/▲▼로 순서 · 거래처 고정 (2026-09-16) */
.colset{display:flex;flex-direction:column;gap:2px;min-width:250px;max-height:60vh;overflow:auto}
.colrow{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:7px;background:#fff}
.colrow:hover{background:var(--brand-tint,#e9eef9)}
.colrow.off label{color:var(--muted,#94a3b8)}
.colrow.lock{background:var(--canvas,#f8fafc);cursor:default}
.colrow.drag{opacity:.45;outline:1.5px dashed var(--brand,#243a73)}
.colrow .grip{cursor:grab;color:var(--muted,#94a3b8);width:16px;text-align:center;user-select:none;font-size:12px}
.colrow label{flex:1;display:flex;align-items:center;gap:6px;margin:0;cursor:pointer}
.colrow .mini{padding:1px 6px;font-size:10px;line-height:1.4}
.colrow .mini:disabled{opacity:.3}
.chip-clear{border:0;background:transparent;color:var(--brand,#243a73);font-size:12px;text-decoration:underline;cursor:pointer;padding:2px 4px}

/* ───── 화면 디자인 기준 토큰 (2026-09-17 대표 승인 · docs/06_화면_디자인_기준.md 1절) — 새 화면은 --u-* 를 쓴다 ─────
   · 업무 영역 색은 점 · 띠 · 아이콘에만 (상태 색과 안 겹치게 고름) · 상태는 색 + 글자 + 아이콘 + 모양 함께
   · 옛 이름 --u-st-wait 는 「확인 필요」(--u-st-check)와 같은 값 · --u-cust 는 영업 색 · --u-tech 는 생산 색으로 합침 */
:root {
  --u-brand:#243a73; --u-brand-tint:#eef2fa; --u-brand-ink:#1b2d5c; --u-focus:#3b63c4; --u-gold:#c9962e;
  --u-ink:#0f172a; --u-text:#1e293b; --u-muted:#56606f; --u-faint:#626c7f;
  --u-canvas:#f4f6fa; --u-surface:#ffffff; --u-side:#fbfcfe; --u-hover:#eef1f5; --u-rule:#e3e8ef; --u-rule2:#cbd5e1; --u-field:#768195;
  --u-sales:#243a73; --u-sales-bg:#eef2fa; --u-make:#0f766e; --u-make-bg:#e8f6f3; --u-money:#7e22ce; --u-money-bg:#f6effd;
  --u-base:#475467; --u-base-bg:#f1f3f6; --u-time:#0e7490; --u-time-bg:#e7f4f8; --u-dev:#9d174d; --u-dev-bg:#fdf0f6;
  --u-cust:#243a73; --u-cust-bg:#eef2fa; --u-tech:#0f766e; --u-tech-bg:#e8f6f3;
  --u-st-new:#334155; --u-st-new-bg:#eef1f5; --u-st-doing:#1d4ed8; --u-st-doing-bg:#e8effd;
  --u-st-check:#8a5100; --u-st-check-bg:#fff1d6; --u-st-wait:#8a5100; --u-st-wait-bg:#fff1d6;
  --u-st-done:#14733a; --u-st-done-bg:#e6f5ec; --u-st-hold:#655c4d; --u-st-hold-bg:#f3f0ea; --u-st-stop:#b42318; --u-st-stop-bg:#fdecec;
}
/* 업무 상태 · 며칠째 — 어느 화면이든 같은 모양 : <span class="u-st check">아이콘 확인 필요</span> · <span class="u-days d3">4일째</span>
   새로(회색) · 진행 중(파랑 — 고객·공장·동료 답 기다림 포함) · 확인 필요(주황 + 테두리 = 사람이 정할 차례) · 완료(초록) · 보류(점선) · 막힘(꽉 찬 빨강 — 진짜 막힘만)
   늦음은 상태를 바꾸지 않고 며칠째로만 : 0~1일 회색 → 2일 주황 → 3일+ 빨강 */
.u-st { display:inline-flex; align-items:center; gap:4px; border-radius:99px; padding:1px 9px 1px 7px; font-size:12.5px; font-weight:800; line-height:1.5; white-space:nowrap; border:1.5px solid transparent; }
.u-st svg { width:14px; height:14px; flex:none; }
.u-st.new { background:var(--u-st-new-bg); color:var(--u-st-new); }
.u-st.doing { background:var(--u-st-doing-bg); color:var(--u-st-doing); }
.u-st.check { background:var(--u-st-check-bg); color:var(--u-st-check); border-color:var(--u-st-check); }
.u-st.done { background:var(--u-st-done-bg); color:var(--u-st-done); }
.u-st.hold { background:var(--u-st-hold-bg); color:var(--u-st-hold); border:1.5px dashed var(--u-st-hold); }
.u-st.stop { background:var(--u-st-stop); color:#fff; }
.u-days { font-size:12.5px; font-weight:800; line-height:1.5; border-radius:6px; padding:1px 7px; white-space:nowrap; background:var(--u-st-new-bg); color:#3c4656; }
.u-days.d2 { background:var(--u-st-check-bg); color:var(--u-st-check); }
.u-days.d3 { background:var(--u-st-stop-bg); color:var(--u-st-stop); }

/* ───── 공통 틀 v2 (2026-09-17 대표 승인 · docs/06 4절 · layout.js 가 .app 에 u2 를 붙임) ─────
   왼쪽 : 이름 · 찾기(Ctrl K) · 새로 만들기 / 내 업무 → ① 영업·견적 → ② 샘플·생산 → ③ 출고·정산 → 기준·자료 → 관리 / 피드백 · 시험 화면
   시험 테마(body.t5 · t6) 화면도 같은 틀로 보이게 .app.u2 로 우선 */
.app.u2 > .side { height:100vh; height:100dvh; display:flex; flex-direction:column; padding:0; overflow:hidden; background:var(--u-side); border-right:1px solid var(--u-rule); color:var(--u-text); font-size:14.5px; line-height:1.4; }
.u2 .side svg.lucide { width:18px; height:18px; flex:none; }
.u2 .nv-top { flex:none; display:flex; flex-direction:column; gap:8px; padding:12px 12px 10px; border-bottom:1px solid var(--u-rule); }
.u2 .nv-brand { display:flex; align-items:center; gap:10px; min-width:0; padding:2px 2px 4px; border-radius:10px; color:var(--u-ink); text-decoration:none; }
.u2 .nv-brand .brand-mark { width:34px; height:34px; flex:0 0 34px; border-radius:9px; object-fit:cover; background:#0f1b3d; }
.u2 .nv-brand b { display:block; font-size:16px; font-weight:800; letter-spacing:.3px; line-height:1.1; }
.u2 .nv-brand small { display:block; font-size:10.5px; letter-spacing:1.5px; color:var(--u-faint); }
.u2 .nv-search { display:flex; align-items:center; gap:8px; width:100%; min-height:40px; margin:0; padding:0 10px; border:1px solid var(--u-field); border-radius:10px; background:#fff; color:var(--u-muted); font-size:14px; text-align:left; cursor:pointer; }
.u2 .nv-search:hover { border-color:var(--u-brand); color:var(--u-ink); }
.u2 .nv-search kbd { margin-left:auto; font:inherit; font-size:11.5px; border:1px solid var(--u-rule2); border-radius:5px; padding:0 5px; color:var(--u-faint); background:#fff; }
.u2 .nv-new { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:42px; margin:0; padding:0 12px; border:0; border-radius:10px; background:var(--u-brand); color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
.u2 .nv-new:hover { background:var(--u-brand-ink); }
.u2 .nv-new svg.lucide { color:#fff; }
.u2 .nv-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:4px 10px 12px; overscroll-behavior:contain; }
.u2 .nv-g { margin-top:8px; }
.u2 .nv-g ul { list-style:none; margin:0; padding:0; }
.u2 .nv-h { display:flex; align-items:center; gap:8px; width:100%; min-height:34px; margin:0; padding:0 8px; border:0; border-radius:8px; background:transparent; font-size:12.5px; font-weight:800; color:#3c4656; letter-spacing:.2px; text-align:left; cursor:pointer; }
.u2 .nv-h:hover { background:var(--u-hover); }
.u2 .nv-h .nv-t { flex:1; white-space:nowrap; }
.u2 .nv-h small { font-size:11px; font-weight:700; color:var(--u-faint); margin-left:2px; }
.u2 .nv-step, .u-ov .nv-step { width:20px; height:20px; flex:none; border-radius:6px; display:grid; place-items:center; font-size:11.5px; font-weight:800; color:#fff; background:var(--gc); }
.u2 .nv-dot, .u-ov .nv-dot { width:8px; height:8px; flex:none; margin:0 6px; border-radius:2px; background:var(--gc); }
.u2 .nv-soonw { font-size:12px; font-weight:600; color:var(--u-faint); white-space:nowrap; }
.u2 .side svg.nv-chev { width:16px; height:16px; color:var(--u-faint); transition:transform .15s; }
.u2 .nv-g[data-open="false"] > .nv-h .nv-chev { transform:rotate(-90deg); }
.u2 .nv-g[data-open="false"] > .nv-b { display:none; }
.u2 .nv-i { position:relative; display:flex; align-items:center; gap:10px; width:100%; min-height:40px; margin:0; padding:0 10px; border:0; border-radius:9px; background:transparent; color:#27313f; font-size:14.5px; font-weight:500; text-decoration:none; white-space:nowrap; text-align:left; cursor:pointer; }
.u2 .nv-i svg.lucide { color:#66717f; }
.u2 a.nv-i:hover, .u2 button.nv-i:hover { background:var(--u-hover); }
.u2 .nv-i.on { background:var(--u-brand-tint); color:var(--u-brand); font-weight:700; }
.u2 .nv-i.on svg.lucide { color:var(--u-brand); }
.u2 .nv-scroll .nv-i.on::before { content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--u-brand); }
.u2 .nv-t { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.u2 .nv-i .nv-t { flex:1; }
.u2 .nv-r { margin-left:auto; display:flex; align-items:center; gap:6px; flex:none; }
.u2 .nv-code { font-size:11px; font-weight:600; color:var(--u-faint); }
.u2 .nv-i.on .nv-code { color:var(--u-brand); }
.nv-tag { font-style:normal; font-size:11px; font-weight:700; line-height:1.6; padding:0 6px; border-radius:99px; background:var(--u-st-check-bg); color:var(--u-st-check); }
.u2 .nv-i.soon { min-height:34px; font-size:13.5px; color:var(--u-faint); cursor:default; }
.u2 .nv-i.soon svg.lucide { color:#9aa3b0; }
.u2 .nv-more { display:flex; align-items:center; gap:8px; width:100%; min-height:34px; margin:0; padding:0 10px; border:0; border-radius:9px; background:transparent; font-size:13px; font-weight:600; color:var(--u-faint); text-align:left; cursor:pointer; }
.u2 .nv-more:hover { background:var(--u-hover); color:var(--u-muted); }
.u2 .nv-more svg.lucide { width:16px; height:16px; }
.u2 .nv-more .nv-chev { margin-left:auto; }
.u2 .nv-more[aria-expanded="true"] .nv-chev { transform:rotate(180deg); }
.u2 .nv-foot { flex:none; display:flex; flex-direction:column; gap:2px; padding:8px 10px 10px; border-top:1px solid var(--u-rule); background:var(--u-side); }
.u2 .nv-fb svg.nv-fb-ic-admin { display:none; }
.u2.u-is-admin .nv-fb svg.nv-fb-ic-admin { display:block; }
.u2.u-is-admin .nv-fb svg.nv-fb-ic-staff { display:none; }
.u2.u-is-admin .nv-fb { color:var(--u-dev); font-weight:700; }
.u2.u-is-admin .nv-fb svg.lucide { color:var(--u-dev); }
.u2.u-is-admin .nv-dev { color:var(--u-dev); font-weight:600; }
.u2.u-is-admin .nv-dev svg.lucide { color:var(--u-dev); }
.u2.collapsed .nv-dev .nv-code { display:none; }
.u2 .fb-cnt { font-style:normal; min-width:22px; height:20px; padding:0 6px; border-radius:99px; background:var(--u-dev); color:#fff; font-size:12px; font-weight:800; display:inline-grid; place-items:center; }
.u2 .nv-trial.on { background:var(--u-dev-bg); color:var(--u-dev); }
.u2 .nv-trial.on svg.lucide, .u2 .nv-trial.on .nv-code { color:var(--u-dev); }
.u2 .side a:focus-visible, .u2 .side button:focus-visible, .u2 .topbar button:focus-visible, .u2 .bnav-i:focus-visible, .side-resize:focus-visible,
.u-ov .u-sheet a:focus-visible, .u-ov .u-sheet button:focus-visible, .u-ov .u-sheet summary:focus-visible { outline:3px solid var(--u-focus); outline-offset:-3px; }

/* 위 막대 — 어디(묶음) › 화면 이름 · 시험 화면이면 「시험 · 저장 안 됨」 */
.app.u2 .topbar { min-height:56px; gap:10px; padding:8px 20px 8px 12px; background:rgba(255,255,255,.97); border-bottom:1px solid var(--u-rule); }
.app.u2 .topbar .icon-btn { width:40px; height:40px; flex:none; padding:0; border:0; border-radius:9px; color:var(--u-muted); background:transparent; }
.app.u2 .topbar .icon-btn:hover { background:var(--u-hover); color:var(--u-ink); }
.app.u2 .topbar .icon-btn svg { width:20px; height:20px; }
.app.u2 .u-crumb { display:flex; align-items:center; gap:6px; min-width:0; }
.app.u2 .u-crumb-g { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--u-muted); white-space:nowrap; }
.app.u2 .u-crumb-g svg { width:15px; height:15px; }
.app.u2 .topbar svg.u-crumb-s { width:15px; height:15px; color:var(--u-faint); flex:none; }
.app.u2 .topbar h1 { margin:0; min-width:0; font-size:17px; font-weight:700; color:var(--u-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app.u2 .u-trial-chip { display:inline-flex; align-items:center; gap:5px; flex:none; min-height:32px; margin:0; padding:0 10px; border:1.5px dashed var(--u-dev); border-radius:99px; background:var(--u-dev-bg); color:var(--u-dev); font-size:12.5px; font-weight:700; white-space:nowrap; cursor:pointer; }
.app.u2 .u-trial-chip svg { width:15px; height:15px; }
.app.u2 .topbar .who { color:var(--u-muted); font-size:13px; white-space:nowrap; }

/* 사이드바 아이콘만 (PC에서 접기) · 너비 조절 */
@media (min-width: 901px) {
  .app.u2:not(.collapsed) > .side { width:var(--side-w, 252px); flex-basis:var(--side-w, 252px); }
  .app.u2.collapsed > .side { width:68px; flex-basis:68px; }
  .u2.collapsed .nv-top { padding:12px 10px 10px; align-items:center; }
  .u2.collapsed .nv-t, .u2.collapsed .nv-r, .u2.collapsed .nv-soonw { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .u2.collapsed .nv-brand { justify-content:center; padding:2px 0 4px; }
  .u2.collapsed .nv-search, .u2.collapsed .nv-new { width:44px; justify-content:center; padding:0; }
  .u2.collapsed .nv-scroll { padding:4px 8px 12px; }
  .u2.collapsed .nv-h, .u2.collapsed .nv-more-li, .u2.collapsed .nv-soon-li, .u2.collapsed .nv-b > li:has(> .nv-i.soon), .u2.collapsed .nv-g:not(:has(a.nv-i)) { display:none; }
  .u2.collapsed .nv-g { margin-top:6px; padding-top:6px; border-top:1px solid var(--u-rule); }
  .u2.collapsed .nv-g[data-open="false"] > .nv-b { display:block; }
  .u2.collapsed .nv-i { justify-content:center; padding:0; }
  .u2.collapsed .nv-scroll .nv-i.on::before { left:-8px; }
  .u2.collapsed .nv-foot { padding:8px; }
  .u2.collapsed .nv-fb .nv-r { width:auto; height:auto; clip:auto; overflow:visible; top:0; right:2px; }
  .u2.collapsed .nv-fb .nv-code { display:none; }
  .u2.collapsed .nv-fb .fb-cnt { min-width:18px; height:18px; padding:0 4px; font-size:11px; }
  .side-resize { flex:0 0 10px; margin:0 -5px; position:sticky; top:0; height:100vh; z-index:6; cursor:col-resize; touch-action:none; }
  .side-resize::after { content:""; position:absolute; left:4px; top:0; bottom:0; width:2px; background:transparent; transition:background .15s; }
  .side-resize:hover::after, .side-resize:focus-visible::after, .app.resizing .side-resize::after { background:var(--u-brand); }
  .app.resizing, .app.resizing * { cursor:col-resize !important; user-select:none; }
  .app.resizing .side { transition:none; }
  .app.collapsed .side-resize { display:none; }
}

/* 휴대폰(900px 이하) — 아래 막대 5칸 : 홈 · 일정 · 새로 · 찾기 · 전체 (사이드바는 위 막대 ☰ 로 열기) */
.bnav { display:none; }
@media (max-width: 900px) {
  body.has-bnav { --u-bnav-h: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body.has-bnav .app-main { padding-bottom:var(--u-bnav-h); }
  .side-resize { display:none; }
  .app.u2 > .side { width:min(300px, 86vw); z-index:40; }
  .app.u2:not(.side-open) > .side { visibility:hidden; box-shadow:none; }   /* 닫혀 있을 때 그림자 안 보이게 · Tab 으로 들어가지 않게 */
  .app.u2 > .side { transition:transform .2s, visibility .2s; }
  .app.u2.side-open .side-dim { z-index:35; }
  .app.u2 .topbar { padding:6px 10px; }
  .app.u2 .topbar .icon-btn { width:44px; height:44px; }
  .app.u2 .u-crumb-g, .app.u2 .topbar svg.u-crumb-s { display:none; }
  .app.u2 .u-trial-chip { min-width:44px; min-height:40px; justify-content:center; padding:0 8px; }
  .app.u2 .u-trial-chip span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .app.u2 .nv-i, .app.u2 .nv-h, .app.u2 .nv-more, .app.u2 .nv-search, .app.u2 .nv-new { min-height:44px; }
  .bnav { display:grid; grid-template-columns:repeat(5, 1fr); position:fixed; left:0; right:0; bottom:0; z-index:25; height:var(--u-bnav-h); padding-bottom:env(safe-area-inset-bottom, 0px); background:#fff; border-top:1px solid var(--u-rule); box-shadow:0 -4px 16px rgba(15,23,42,.06); }
  .bnav-i { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:56px; margin:0; padding:4px 0; border:0; border-radius:0; background:transparent; color:var(--u-muted); font:inherit; font-size:12px; font-weight:700; text-decoration:none; cursor:pointer; }
  .bnav-i svg { width:23px; height:23px; }
  .bnav-i.on { color:var(--u-brand); }
  .bnav-i.on::before { content:""; position:absolute; top:0; left:28%; right:28%; height:3px; border-radius:0 0 3px 3px; background:var(--u-brand); }
  .bnav-plus { width:44px; height:44px; border-radius:14px; background:var(--u-brand); color:#fff; display:grid; place-items:center; margin-top:-16px; box-shadow:0 6px 14px rgba(36,58,115,.35); }
  .bnav-plus svg { width:22px; height:22px; }
  .toast { bottom:calc(22px + var(--u-bnav-h, 0px)); }
  .dev-area-btn { bottom:calc(14px + var(--u-bnav-h, 0px)); }
}

/* 덮개 — 찾기 · 새로 만들기 · 전체 메뉴 · 시험 화면 (layout.js · .app 밖 · 열리면 .app 은 inert) */
html.u-ov-open { overflow:hidden; }
.u-ov { position:fixed; inset:0; z-index:90; display:flex; align-items:flex-start; justify-content:center; padding:64px 16px 16px; background:rgba(15,23,42,.38); font-size:15px; line-height:1.45; color:var(--u-text); }
.u-sheet { width:min(var(--u-sheet-w, 560px), 100%); max-height:calc(100dvh - 84px); overflow:auto; background:#fff; border-radius:16px; box-shadow:0 20px 50px rgba(15,23,42,.24); overscroll-behavior:contain; }
.u-sheet-h { position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:8px; padding:10px 12px 10px 18px; background:#fff; border-bottom:1px solid var(--u-rule); }
.u-sheet-h h2 { margin:0; display:flex; align-items:center; gap:8px; font-size:17px; font-weight:800; color:var(--u-ink); }
.u-sheet-h h2 svg { width:19px; height:19px; color:var(--u-dev); }
.u-sheet-sub { font-size:13px; color:var(--u-muted); }
.u-sheet-h .sp { flex:1; }
.u-ib { display:grid; place-items:center; flex:none; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:9px; background:transparent; color:var(--u-muted); cursor:pointer; }
.u-ib:hover { background:var(--u-hover); color:var(--u-ink); }
.u-ib svg { width:20px; height:20px; }
.u-sheet-b { padding:12px 12px 16px; }
.u-search-h { padding-left:14px; }
.u-search-h > svg { width:20px; height:20px; color:var(--u-muted); flex:none; }
input.u-sinp { flex:1; min-width:0; min-height:44px; margin:0; padding:0 4px; border:0; border-bottom:2px solid var(--u-rule2); border-radius:0; background:transparent; font:inherit; font-size:16px; color:var(--u-ink); }
.u-ov .u-sheet input.u-sinp:focus, .u-ov .u-sheet input.u-sinp:focus-visible { outline:none; box-shadow:none; border-bottom-color:var(--u-focus); }
.u-note { display:flex; align-items:center; gap:6px; margin:2px 8px 6px; font-size:13px; color:var(--u-muted); }
.u-note svg { width:15px; height:15px; flex:none; }
.u-list-g { margin:12px 10px 4px; font-size:12.5px; font-weight:800; color:var(--u-faint); letter-spacing:.2px; }
.u-row { display:flex; align-items:center; gap:8px; border-radius:10px; }
.u-row-a { flex:1; min-width:0; display:flex; align-items:center; gap:10px; min-height:48px; padding:6px 10px; border-radius:10px; color:var(--u-text); text-decoration:none; }
.u-row-a:hover { background:var(--u-hover); }
.u-row svg.lucide { width:19px; height:19px; flex:none; color:#66717f; }
.u-row.soon { min-height:44px; padding:4px 10px; gap:10px; color:var(--u-faint); cursor:default; }
.u-row.soon svg.lucide { color:#9aa3b0; }
.u-row-t { flex:1; min-width:0; font-size:15px; font-weight:600; }
.u-row-t small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:1px; font-size:12.5px; font-weight:500; line-height:1.35; color:var(--u-muted); }
.u-row.soon .u-row-t small { color:var(--u-faint); }
.u-row-r { display:flex; align-items:center; gap:6px; flex:none; margin-left:auto; }
.u-code { font-size:12px; font-weight:600; color:var(--u-faint); white-space:nowrap; }
.u-row.on .u-row-a { background:var(--u-brand-tint); color:var(--u-brand); }
.u-row.on .u-row-a svg.lucide, .u-row.on .u-code { color:var(--u-brand); }
.u-mini { display:inline-flex; align-items:center; gap:4px; min-height:32px; padding:0 9px; border:1.5px dashed var(--u-dev); border-radius:99px; background:var(--u-dev-bg); color:var(--u-dev); font-size:12.5px; font-weight:700; text-decoration:none; white-space:nowrap; }
.u-row .u-mini svg.lucide { width:14px; height:14px; color:var(--u-dev); }
.u-empty { margin:18px 10px; color:var(--u-muted); }
.u-map { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.u-mapg { padding:8px; border:1px solid var(--u-rule); border-top:4px solid var(--gc); border-radius:12px; background:#fff; }
.u-mapg h3 { display:flex; align-items:center; gap:8px; margin:2px 4px 6px; font-size:14.5px; font-weight:800; color:var(--u-ink); }
.u-mapg .u-row-a { min-height:44px; }
.u-map-foot { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.u-btn { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin:0; padding:0 14px; border:1px solid var(--u-rule2); border-radius:10px; background:#fff; color:var(--u-text); font:inherit; font-size:14.5px; font-weight:700; text-decoration:none; cursor:pointer; }
.u-btn:hover { border-color:var(--u-brand); color:var(--u-brand); }
.u-btn svg { width:18px; height:18px; }
.u-trg { padding:4px 0 10px; border-bottom:1px solid var(--u-rule); }
.u-trg:last-child { border-bottom:0; }
.u-trg h3 { display:flex; align-items:center; gap:8px; margin:10px 10px 4px; font-size:13px; font-weight:800; color:var(--u-muted); }
.u-trg h3 svg { width:16px; height:16px; color:var(--u-faint); }
.u-ver { flex:none; min-width:38px; text-align:center; font-size:12.5px; font-weight:800; padding:2px 6px; border-radius:7px; background:var(--u-st-new-bg); color:var(--u-st-new); }
.u-latest .u-ver { background:var(--u-brand); color:#fff; }
.u-new { font-style:normal; font-size:11.5px; font-weight:800; padding:0 7px; border-radius:99px; background:var(--u-st-done-bg); color:var(--u-st-done); margin-left:4px; vertical-align:1px; }
.u-older summary { display:flex; align-items:center; gap:6px; min-height:44px; padding:0 10px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--u-muted); cursor:pointer; list-style:none; }
.u-older summary::-webkit-details-marker { display:none; }
.u-older summary:hover { background:var(--u-hover); }
.u-older svg.u-sum-chev { width:16px; height:16px; transition:transform .15s; }
.u-older[open] svg.u-sum-chev { transform:rotate(90deg); }
.u-older .u-row-a { min-height:44px; padding-left:22px; }
.u-sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width: 900px) {
  .u-ov { padding:0; align-items:flex-end; }
  .u-sheet { width:100%; max-height:calc(100dvh - 24px); border-radius:18px 18px 0 0; padding-bottom:env(safe-area-inset-bottom, 0px); }
  .u-map { grid-template-columns:1fr; }
  .u-mini { min-height:44px; padding:0 12px; }
}
@media (prefers-reduced-motion: reduce) { .u2 .side svg.nv-chev, .u-older svg.u-sum-chev, .side-resize::after { transition:none; } }

/* ───── 설명 접기 부품 (2026-09-17 대표 승인 · 새 견적 시험 v10 에서 처음 씀 · web/js/help.js 와 한 쌍) ─────
   왜 : 칸마다 설명이 늘 보이면 헷갈린다(대표) → 처음에는 접힘 · 영역 제목 옆 「?」 또는 제목 줄 「설명 보기」 스위치로 펼침 · 나중에 관리자가 설명을 하나씩 숨길 수 있음(settings 「도움말」 · 읽기만)
   보임 / 숨김은 CSS 로만 — 화면이 칸을 다시 그려도(innerHTML) 상태가 남도록 「바깥 틀」[data-help-scope] 에 .help-on 을 둔다.
   색은 --u-* 토큰만 · 펼침에 움직임 효과 없음 · 누르는 자리 40px(휴대폰 44px) · 켜짐은 색 + 손잡이 위치 + 글자(켜짐 / 꺼짐) 세 가지로
   button.u-… 로 쓴 까닭 : 맨 위 button 기본 모양(테두리 · 패딩)을 덮어야 해서 */
.u-help { display:none; margin:6px 0 0; max-width:42em; font-size:12.5px; line-height:1.6; font-weight:400; letter-spacing:0; text-align:left; color:var(--u-muted); }
.help-on .u-help { display:block; }
.u-help-key { margin-left:6px; font-family:ui-monospace,Consolas,monospace; font-size:12.5px; white-space:nowrap; color:var(--u-faint); }   /* 관리자에게만 — 지울 때 부를 이름 */
button.u-help-btn { position:relative; display:inline-grid; place-items:center; flex:none; width:40px; height:40px; margin:0; padding:0; border:0; border-radius:99px; background:none; color:var(--u-muted); cursor:pointer; }
button.u-help-btn::before { content:""; position:absolute; inset:6px; border-radius:99px; background:transparent; }   /* 보이는 동그라미 28px · 누르는 자리는 40px */
button.u-help-btn:hover::before { background:var(--u-hover); }
button.u-help-btn[aria-expanded="true"] { color:var(--u-brand); }
button.u-help-btn[aria-expanded="true"]::before { background:var(--u-brand-tint); }
button.u-help-btn svg, button.u-help-btn i { position:relative; width:18px; height:18px; }
button.u-help-btn:focus-visible, button.u-help-sw:focus-visible, button.u-help-x:focus-visible { outline:3px solid var(--u-focus); outline-offset:2px; }
button.u-help-sw { display:inline-flex; align-items:center; gap:8px; flex:none; min-height:40px; margin:0; padding:0 12px; border:1px solid var(--u-rule2); border-radius:10px; background:var(--u-surface); color:var(--u-text); font:inherit; font-size:13.5px; font-weight:600; line-height:1.35; white-space:nowrap; cursor:pointer; }
button.u-help-sw:hover { border-color:var(--u-brand); }
button.u-help-sw svg, button.u-help-sw i { width:16px; height:16px; color:var(--u-muted); }
.u-help-sw .sw { position:relative; flex:none; width:34px; height:20px; border-radius:99px; background:var(--u-field); }
.u-help-sw .knob { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:99px; background:var(--u-surface); transition:transform .12s; }
.u-help-sw[aria-checked="true"] .sw { background:var(--u-brand); }
.u-help-sw[aria-checked="true"] .knob { transform:translateX(14px); }
.u-help-sw .sw-t { min-width:2.4em; font-size:12.5px; font-weight:600; color:var(--u-muted); }
.u-help-sw[aria-checked="true"] .sw-t { color:var(--u-brand); }
.u-help-intro { display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:0 0 0 12px; border:1px solid var(--u-rule); border-radius:10px; background:var(--u-surface); color:var(--u-text); font-size:13.5px; font-weight:400; line-height:1.6; }
.u-help-intro > svg, .u-help-intro > i { flex:none; width:18px; height:18px; color:var(--u-brand); }
.u-help-intro > span { flex:1; min-width:0; padding:8px 0; }
button.u-help-x { display:inline-grid; place-items:center; flex:none; width:40px; height:40px; margin:0; padding:0; border:0; border-radius:10px; background:none; color:var(--u-muted); cursor:pointer; }
button.u-help-x:hover { background:var(--u-hover); color:var(--u-ink); }
button.u-help-x svg, button.u-help-x i { width:18px; height:18px; }
@media (max-width: 900px) {
  .u-help { font-size:13px; }
  button.u-help-btn, button.u-help-x { width:44px; height:44px; }
  button.u-help-btn::before { inset:8px; }
  button.u-help-sw { min-height:44px; }
}
@media (prefers-reduced-motion: reduce) { .u-help-sw .knob { transition:none; } }