/* ============================================================
   동쪽구름 ERP — 공통 컴포넌트 (pluuug 100% 매칭)
   ============================================================ */

/* 공통 카드/버튼 */
.card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.btn { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:var(--r-sm);
  font-weight:600; font-size:13px; color:var(--c-text); background:var(--c-surface); border:1px solid var(--c-border); }
.btn:hover { background:var(--c-surface-2); }
.btn-primary { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.btn-primary:hover { background:var(--c-primary-ink); }
.btn-dark { background:var(--c-text); color:#fff; border-color:var(--c-text); }
.btn-sm { height:30px; padding:0 10px; font-size:12px; }
.muted{color:var(--c-text-dim);} .mute2{color:var(--c-text-mute);} .num{font-variant-numeric:tabular-nums;}
.right{text-align:right;} .nowrap{white-space:nowrap;}
.skel{background:linear-gradient(90deg,#eef0f4 25%,#e4e7ee 37%,#eef0f4 63%);background-size:400% 100%;animation:sk 1.3s infinite;border-radius:6px;}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}

/* 페이지 헤더 */
.page-title { font-size:20px; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }

/* ===== 대시보드 ===== */
.dash-top { display:grid; grid-template-columns:1fr 290px; gap:16px; margin-bottom:16px; }
@media(max-width:980px){ .dash-top{grid-template-columns:1fr;} }
.hello { font-size:18px; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.quick { display:flex; gap:8px; flex-wrap:wrap; }
.qbtn { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; border-radius:var(--r-sm);
  background:var(--c-surface); border:1px solid var(--c-border); font-weight:700; font-size:13px; color:var(--c-text); box-shadow:var(--sh-1); }
.qbtn:hover { background:var(--c-surface-2); }
.qbtn.accent { color:var(--c-primary); }
.mission .ttl { font-weight:800; display:flex; align-items:center; gap:6px; font-size:13px; color:var(--c-text-dim); }
.mission .big { font-size:16px; font-weight:800; margin:8px 0 12px; }
.bar { height:7px; border-radius:var(--r-pill); background:#eef0f4; overflow:hidden; }
.bar > i { display:block; height:100%; background:linear-gradient(90deg,#3a5cf6,#6f7bff); border-radius:var(--r-pill); }

.goal-head { font-size:22px; font-weight:800; letter-spacing:-.02em; margin:6px 0 16px; }
.goal-head .red { color:var(--c-coral); }
.goal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:880px){ .goal-grid{grid-template-columns:1fr;} }
.goal { border:1px solid var(--c-border); border-radius:var(--r-lg); padding:18px; background:var(--c-surface); }
.goal .gh { font-weight:800; font-size:14px; } .goal .gh small{color:var(--c-text-mute);font-weight:600;margin-left:4px;}
.goal .pct { font-size:26px; font-weight:800; color:var(--c-primary); margin:8px 0; } .goal .pct small{font-size:13px;color:var(--c-text-dim);font-weight:700;}
.goal .row { display:flex; gap:6px; font-size:12px; margin-top:8px; }
.goal .tag { background:var(--c-primary-weak); color:var(--c-primary); padding:1px 6px; border-radius:5px; font-weight:700; }
.goal .tag.g { background:var(--c-success-weak); color:var(--c-success); }

.kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
.kpi { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:15px 16px; box-shadow:var(--sh-1); }
.kpi .label { font-size:12px; color:var(--c-text-dim); font-weight:700; display:flex; align-items:center; gap:6px; }
.kpi .value { font-size:24px; font-weight:800; margin-top:6px; font-variant-numeric:tabular-nums; }
.kpi .sub { font-size:11px; color:var(--c-text-mute); margin-top:2px; }

.sec-title { display:flex; align-items:center; gap:8px; margin:24px 0 12px; }
.sec-title h2 { margin:0; font-size:15px; font-weight:800; } .sec-title .line{flex:1;height:1px;background:var(--c-border);}

/* ===== 탭 (의뢰/고객/견적서) ===== */
.tabs { display:flex; gap:18px; border-bottom:1px solid var(--c-border); margin:2px 0 14px; }
.tabs button { padding:12px 2px; font-weight:800; font-size:15px; color:var(--c-text-mute); border-bottom:2px solid transparent; margin-bottom:-1px; display:flex; align-items:center; gap:6px; }
.tabs button.on { color:var(--c-text); border-bottom-color:var(--c-text); }

/* ===== 툴바 (보드/표 토글 + 검색 + 필터) ===== */
.toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.toggle { display:flex; gap:2px; background:#eef0f4; border-radius:var(--r-sm); padding:3px; }
.toggle button { padding:5px 12px; border-radius:6px; font-size:12.5px; font-weight:700; color:var(--c-text-dim); }
.toggle button.on { background:var(--c-text); color:#fff; }
.tb-grow { flex:1; }
.tb-chip { display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 11px; border-radius:var(--r-sm);
  border:1px solid var(--c-border); background:var(--c-surface); font-size:12.5px; font-weight:600; color:var(--c-text-dim); }
.tb-search { display:flex; align-items:center; gap:6px; height:34px; padding:0 12px; border:1px solid var(--c-border); border-radius:var(--r-sm); min-width:230px; background:var(--c-surface); }
.tb-search input { border:none; outline:none; flex:1; background:transparent; }

/* ===== 칸반 ===== */
.board-wrap { display:flex; gap:14px; }
.mini-counters { display:flex; flex-direction:column; gap:14px; padding-top:8px; min-width:42px; }
.mini-counters .mc { font-size:12px; color:var(--c-text-dim); font-weight:700; }
.mini-counters .mc b { display:block; font-size:15px; color:var(--c-text); }
.mini-counters .mc.delay b { color:var(--c-coral); }
.kanban { display:flex; gap:14px; overflow-x:auto; padding-bottom:12px; flex:1; }
.kan-col { flex:0 0 256px; }
.kan-col .kh { padding:4px 6px 12px; }
.kan-col .kh .t { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:800; }
.kan-col .kh .t .cnt { margin-left:auto; color:var(--c-text-mute); font-size:15px; }
.kan-col .kh .sub { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:12px; color:var(--c-text-dim); font-weight:600; }
.kan-col .kh .sub .ic { margin-left:auto; display:flex; gap:8px; color:var(--c-text-mute); }
.kan-col.s-gray .t{color:var(--c-text);} .kan-col.s-coral .t,.kan-col.s-coral .cnt{color:var(--c-coral);}
.kan-col.s-blue .t{color:var(--c-primary);} .kan-col.s-green .t{color:var(--c-success);}
.kan-col.s-violet .t{color:var(--stage-violet);} .kan-col.s-amber .t{color:var(--c-warn);} .kan-col.s-red .t{color:var(--c-danger);}
.kan-body { background:transparent; border-radius:var(--r); min-height:60px; }
.kan-col.s-coral .kan-body { background:var(--c-coral-tint); border-radius:var(--r); padding:6px; }
.kan-empty { text-align:center; color:var(--c-text-mute); font-size:13px; padding:18px; background:var(--c-primary-weak2); border-radius:var(--r); }
.kan-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r); padding:13px 14px; margin-bottom:10px; box-shadow:var(--sh-1); cursor:pointer; }
.kan-card:hover { box-shadow:var(--sh-2); }
.kan-card .ct { display:flex; align-items:flex-start; gap:8px; }
.kan-card .ct .t { font-weight:800; font-size:14px; flex:1; line-height:1.35; }
.kan-card .meta { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--c-text-dim); margin-top:9px; }
.kan-card .meta .i { width:15px; text-align:center; opacity:.7; }
.kan-card .meta.amt { color:var(--c-text); font-weight:800; }
.kan-card .stayed { display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-size:11px; color:var(--c-text-mute); background:var(--c-surface-2); padding:3px 9px; border-radius:var(--r-pill); }
.kan-card .stayed .d{width:6px;height:6px;border-radius:50%;background:var(--c-text-mute);}
.kan-card .todo { display:flex; align-items:center; gap:7px; margin-top:11px; padding:8px 10px; background:var(--c-coral-weak); border-radius:var(--r-sm); font-size:12px; color:var(--c-coral); font-weight:600; }
.kan-card .todo .av{width:18px;height:18px;border-radius:50%;background:#ffd9d4;color:var(--c-coral);display:grid;place-items:center;font-size:10px;font-weight:800;}
.kan-card .todo .dd{margin-left:auto;font-weight:800;}

/* ===== 뱃지 / 태그 ===== */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:6px; font-size:11px; font-weight:700; background:#f0f2f5; color:var(--c-text-dim); white-space:nowrap; }
.badge.s-gray{background:#f0f2f5;color:#6b7280;} .badge.s-coral{background:var(--c-coral-weak);color:var(--c-coral);}
.badge.s-blue{background:var(--c-primary-weak);color:var(--c-primary);} .badge.s-green{background:var(--c-success-weak);color:var(--c-success);}
.badge.s-violet{background:#efe9ff;color:var(--stage-violet);} .badge.s-amber{background:var(--c-warn-weak);color:var(--c-warn);} .badge.s-red{background:var(--c-danger-weak);color:var(--c-danger);}
.tag { display:inline-flex; padding:3px 9px; border-radius:6px; font-size:11.5px; font-weight:700; }
.tag.coral{background:var(--c-coral-weak);color:var(--c-coral);} .tag.green{background:var(--c-success-weak);color:var(--c-success);} .tag.gray{background:#f0f2f5;color:#6b7280;}
.biz-pill { font-size:10px; font-weight:800; padding:2px 7px; border-radius:var(--r-pill); }
.biz-pill.DWM{background:var(--c-primary-weak);color:var(--biz-dwm);} .biz-pill.KNJ{background:var(--c-success-weak);color:var(--biz-knj);}

/* ===== 표 (표 뷰) ===== */
.tbl-wrap{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;}
table.tbl th{text-align:left;padding:11px 14px;background:var(--c-surface-2);color:var(--c-text-dim);font-weight:700;font-size:12px;border-bottom:1px solid var(--c-border);white-space:nowrap;}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--c-border-2);}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl tbody tr{cursor:pointer;}
table.tbl tbody tr:hover{background:var(--c-primary-weak2);}

/* ===== 드로어 (2단: 본문 + 우측 고객/히스토리) ===== */
.drawer-back{position:fixed;inset:0;background:rgba(20,28,50,.34);opacity:0;pointer-events:none;transition:.18s;z-index:40;}
.drawer-back.on{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;height:100vh;width:var(--drawer-w);max-width:96vw;background:var(--c-surface);box-shadow:var(--sh-3);transform:translateX(100%);transition:.24s cubic-bezier(.4,0,.2,1);z-index:41;display:grid;grid-template-columns:1fr 320px;}
.drawer.on{transform:translateX(0);}
.dr-main{overflow-y:auto;padding:18px 28px 40px;}
.dr-main .dr-tools{display:flex;align-items:center;gap:14px;color:var(--c-text-dim);margin-bottom:18px;}
.dr-type{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-text-dim);margin-bottom:8px;}
.dr-type .tp{display:inline-flex;align-items:center;gap:5px;color:var(--c-primary);font-weight:700;}
.dr-title{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:2px 0 14px;}
.dr-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.dr-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--c-text-dim);background:var(--c-surface-2);border:1px solid var(--c-border);padding:4px 9px;border-radius:var(--r-sm);}
.dr-field{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--c-border-2);}
.dr-field .l{width:120px;font-size:13px;color:var(--c-text-dim);font-weight:600;}
.dr-field .v{flex:1;text-align:right;font-size:14px;font-weight:600;display:flex;justify-content:flex-end;align-items:center;gap:6px;flex-wrap:wrap;}
.dr-aside{border-left:1px solid var(--c-border);background:#fafbfc;overflow-y:auto;padding:16px;}
.dr-aside .atabs{display:flex;gap:14px;margin-bottom:12px;}
.dr-aside .atabs span{font-size:13px;font-weight:800;display:flex;align-items:center;gap:4px;}
.cust-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r);padding:13px;margin-bottom:14px;}
.cust-card .cn{font-weight:800;font-size:14px;display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.cust-card .ci{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-text-dim);margin:6px 0;}
.htabs{display:flex;gap:14px;font-size:13px;font-weight:800;margin:6px 0 12px;}
.htabs .on{color:var(--c-text);} .htabs span:not(.on){color:var(--c-text-mute);}
.timeline{position:relative;}
.tl-item{display:flex;gap:10px;padding:6px 0;}
.tl-item .ck{width:22px;height:22px;border-radius:50%;background:var(--c-success-weak);color:var(--c-success);display:grid;place-items:center;font-size:12px;flex:0 0 auto;}
.tl-item .tx .s{font-size:12px;font-weight:700;}
.tl-item .tx .d{font-size:11px;color:var(--c-text-mute);}

/* 토스트/안내 */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{background:#1f2533;color:#fff;padding:10px 18px;border-radius:var(--r-pill);font-size:13px;font-weight:600;box-shadow:var(--sh-3);}
.toast.err{background:var(--c-danger);} .toast.ok{background:var(--c-success);}
.note{background:var(--c-primary-weak2);border:1px solid #dbe2ff;color:var(--c-primary-ink);border-radius:var(--r);padding:13px 15px;font-size:13px;line-height:1.6;}
.note.warn{background:var(--c-warn-weak);border-color:#f3e2bf;color:#8a5a00;}
.empty{text-align:center;color:var(--c-text-mute);padding:44px 20px;} .empty .ico{font-size:32px;opacity:.5;margin-bottom:8px;}
.banner{background:linear-gradient(90deg,#3a5cf6,#5b78ff);color:#fff;border-radius:var(--r-lg);padding:13px 18px;font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:10px;margin-bottom:16px;}

/* ===== 견적 에디터 (pages/quote_editor.js) ===== */
.ed-wrap{display:flex;flex-direction:column;gap:14px;max-width:1100px;}
.ed-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ed-h{font-size:14px;font-weight:800;display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.ed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 14px;}
.ed-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.ed-field>label{font-size:12px;font-weight:700;color:var(--c-text-dim);}
.ed-input,.ed-select,.ed-textarea{width:100%;height:36px;padding:0 11px;border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-text);font-size:13.5px;font-family:var(--font);outline:none;}
.ed-select{cursor:pointer;}
.ed-input:focus,.ed-select:focus,.ed-textarea:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-weak);}
.ed-textarea{height:auto;min-height:86px;padding:10px 11px;line-height:1.6;resize:vertical;}
.ed-num{text-align:right;font-variant-numeric:tabular-nums;}
input.ed-num::-webkit-outer-spin-button,input.ed-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input.ed-num[type=number]{-moz-appearance:textfield;appearance:textfield;}
.ed-bizrow{display:flex;align-items:center;gap:10px;min-width:0;}
.ed-bizrow .ed-select{flex:0 1 200px;}
.ed-bizpill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.ed-results{margin-top:8px;border:1px solid var(--c-border);border-radius:var(--r-sm);overflow:hidden;background:var(--c-surface);box-shadow:var(--sh-1);}
.ed-result{display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--c-border-2);}
.ed-result:last-child{border-bottom:none;}
.ed-result:hover{background:var(--c-primary-weak2);}
.ed-result .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%;}
.ed-result .cd{color:var(--c-text-mute);font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ed-result .pr{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ed-pick{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--c-border);border-radius:var(--r);background:var(--c-surface-2);}
.ed-cell{width:100%;height:32px;padding:0 9px;border:1px solid transparent;border-radius:6px;background:transparent;font-size:13px;font-family:var(--font);color:var(--c-text);outline:none;}
.ed-cell:hover{border-color:var(--c-border);}
.ed-cell:focus{border-color:var(--c-primary);background:var(--c-surface);box-shadow:0 0 0 2px var(--c-primary-weak);}
.ed-x{width:26px;height:26px;border-radius:6px;color:var(--c-text-mute);font-size:12px;}
.ed-x:hover{background:var(--c-danger-weak);color:var(--c-danger);}
.ed-lines{margin-top:14px;}
.ed-lines .tbl-wrap{overflow-x:auto;}
.ed-lines table.tbl{min-width:680px;}
.ed-lines table.tbl tbody tr{cursor:default;}
.ed-lines table.tbl tbody tr:hover{background:transparent;}
.ed-lines table.tbl td{padding:6px 8px;}
.ed-sum{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.ed-sum-l{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;}
.ed-total{display:flex;flex-direction:column;gap:7px;align-items:flex-end;min-width:250px;margin-left:auto;}
.ed-trow{display:flex;gap:16px;align-items:baseline;font-size:13px;color:var(--c-text-dim);font-weight:600;}
.ed-trow b{min-width:150px;text-align:right;font-variant-numeric:tabular-nums;color:var(--c-text);font-size:14px;}
.ed-trow.ed-grandrow{margin-top:4px;padding-top:10px;border-top:1px solid var(--c-border);}
.ed-trow.ed-grandrow span{font-weight:800;color:var(--c-text);}
.ed-trow b.ed-grand{font-size:24px;font-weight:800;letter-spacing:-.02em;}

/* 단계 드롭다운 (표·보드 공용, 끌기 없이 변경) */
.stage-sel{ font-size:11.5px; font-weight:700; border:1px solid var(--c-border); border-radius:var(--r-pill);
  padding:4px 22px 4px 10px; background:var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238b93a3' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  -webkit-appearance:none; appearance:none; cursor:pointer; color:var(--c-text-dim); }
.stage-sel:hover{ border-color:#d6dbe8; }
.stage-sel.s-blue{ color:var(--c-primary); border-color:#cdd6fb; background-color:var(--c-primary-weak); }
.stage-sel.s-violet{ color:var(--stage-violet); border-color:#ddd3ff; background-color:#efe9ff; }
.stage-sel.s-green{ color:var(--c-success); border-color:#bce8d2; background-color:var(--c-success-weak); }
.stage-sel.s-red{ color:var(--c-danger); border-color:#f6cdcb; background-color:var(--c-danger-weak); }

/* 칸반 드래그앤드롭 */
.kan-card{ user-select:none; }
.kan-card.dragging{ opacity:.45; }
.kan-col.drop-on .kan-body{ outline:2px dashed var(--c-primary); outline-offset:2px; background:var(--c-primary-weak); border-radius:var(--r); min-height:60px; }

/* ===== 진행 현황 (프로세스 명확) ===== */
.pbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.pchip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:var(--r-pill);font-size:12px;font-weight:600;
  background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text-dim);cursor:pointer}
.pchip b{font-weight:800;color:var(--c-text)}
.pchip:hover{background:var(--c-surface-2)}
.pchip.on{background:var(--c-text);color:#fff;border-color:var(--c-text)} .pchip.on b{color:#fff}
.parr{color:var(--c-text-mute);font-size:12px}
.proc-lst{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
.proc-it{padding:13px 16px;border-bottom:1px solid var(--c-border-2);cursor:pointer}
.proc-it:last-child{border-bottom:none}
.proc-it:hover{background:var(--c-surface-2)}
.proc-top{display:flex;align-items:center;gap:10px}
.proc-co{font-weight:800;font-size:14px}
.proc-qn{font-size:12px;color:var(--c-text-mute)}
.proc-amt{margin-left:auto;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.nxchip{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap}
.nxchip.act{background:var(--c-primary-weak);color:var(--c-primary)}
.nxchip.wait{background:var(--c-surface-2);color:var(--c-text-dim)}
.nxchip.exit{background:var(--c-danger-weak);color:var(--c-danger)}
.proc-bar{display:flex;align-items:center;gap:12px;margin-top:11px}
.steps2{display:flex;gap:4px;flex:1;max-width:380px}
.seg2{height:6px;flex:1;border-radius:3px;background:var(--c-border)}
.seg2.fill{background:var(--c-primary)}
.seg2.exitseg{background:var(--c-danger-weak)}
.proc-cur{font-size:12px;color:var(--c-text-dim);white-space:nowrap}
.proc-cur b{color:var(--c-text);font-weight:700}
.proc-sel{margin-left:auto}

/* ===== 컴팩트 카드 (영업·출고) ===== */
.kan-card.compact{ padding:10px 12px; }
.kc-name{ font-weight:800; font-size:13px; line-height:1.3; }
.kc-row{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--c-text-dim); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kc-row .i{ width:13px; text-align:center; opacity:.7; flex:none; }
.kan-add{ text-align:center; padding:9px; border:1px dashed var(--c-border); border-radius:var(--r-sm);
  color:var(--c-text-mute); font-size:12px; font-weight:600; cursor:pointer; }
.kan-add:hover{ background:var(--c-surface); color:var(--c-primary); border-color:var(--c-primary); }

/* 드로어 편집 입력 */
.dr-inp{ width:100%; height:34px; padding:0 11px; border:1px solid var(--c-border); border-radius:var(--r-sm); font-size:13px; background:var(--c-surface); color:var(--c-text); }
.dr-inp:focus{ outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-weak); }

/* ===== 거래처 폼 (박스/자물쇠/모달) ===== */
.fbox{ border:1px solid var(--c-border); border-radius:var(--r-lg); padding:4px 14px 12px; margin-bottom:14px; background:var(--c-surface); }
.fbox-h{ display:flex; align-items:center; font-size:13px; font-weight:800; color:var(--c-text); padding:11px 0 7px; border-bottom:1px solid var(--c-border-2); margin-bottom:4px; }
.lock-btn{ font-size:12px; font-weight:600; padding:5px 11px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-surface); color:var(--c-text-dim); cursor:pointer; }
.lock-btn.on{ background:var(--c-warn-weak); color:#9a6a00; border-color:#f3e2bf; }
.fld-row.drag{ cursor:grab; }
.fld-row .fld-handle{ color:var(--c-text-mute); cursor:grab; padding-right:4px; font-size:14px; flex:none; }
.fld-row.dragging{ opacity:.45; }
.fld-row.over{ box-shadow:inset 0 2px 0 0 var(--c-primary); }
.code-row{ display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--c-border-2); margin-bottom:2px; }
.code-row .l{ width:96px; font-size:13px; color:var(--c-text-dim); font-weight:600; }
.code-row .code-val{ font-weight:800; font-size:14px; }
.code-row .lockicon{ font-size:12px; opacity:.7; }
.modal-back{ position:fixed; inset:0; background:rgba(20,28,50,.42); display:flex; align-items:center; justify-content:center; z-index:70; }
.modal-box{ background:var(--c-surface); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:22px; width:min(380px,90vw); }
.modal-title{ font-size:16px; font-weight:800; }
.modal-detail{ margin-top:10px; font-size:13.5px; color:var(--c-text); background:var(--c-surface-2); border-radius:var(--r-sm); padding:11px 13px; word-break:break-all; }
.modal-btns{ display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }

/* 주소검색 필드 + 코드배지 */
.addr-field{ display:flex; flex-direction:column; gap:6px; width:100%; }
.addr-top{ display:flex; gap:6px; align-items:center; }
.zip-inp{ width:108px; flex:none; background:var(--c-surface-2); }
.code-badge{ font-size:11px; font-weight:800; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.code-badge.biz{ background:var(--c-primary-weak); color:var(--c-primary); }
.code-badge.personal{ background:var(--c-surface-2); color:var(--c-text-dim); }
.modal-detail{ white-space:pre-line; }

/* 클릭수정(인라인) 표시 */
.disp{ font-size:14px; color:var(--c-text); cursor:text; padding:7px 10px; border:1px solid transparent; border-radius:var(--r-sm); min-height:34px; box-sizing:border-box; width:100%; }
.disp:hover{ border-color:var(--c-border); background:var(--c-surface-2); }
.disp.empty{ color:var(--c-text-mute); }

/* 거래처 v5 — 조밀 레이아웃·지도·거래현황 */
.dr-main.compact .dr-field{ padding:7px 2px; }
.dr-main.compact .fbox{ padding:2px 12px 8px; margin-bottom:10px; }
.dr-main.compact .fbox-h{ padding:9px 0 6px; }
.disp.ro{ cursor:default; } .disp.ro:hover{ border-color:transparent; background:transparent; }
.mapview{ height:170px; border:1px solid var(--c-border); border-radius:var(--r); overflow:hidden; margin-top:8px; }
.mapview.ph{ display:grid; place-items:center; text-align:center; color:var(--c-text-mute); font-size:12px; background:var(--c-surface-2); padding:10px; line-height:1.5; }
.deal-card{ border:1px solid var(--c-border); border-radius:var(--r-sm); padding:9px 11px; margin-bottom:8px; cursor:pointer; background:var(--c-surface); }
.deal-card:hover{ background:var(--c-surface-2); box-shadow:var(--sh-1); }
.dr-aside .atabs span{ cursor:pointer; }

/* 거래처 상세 — 조밀(plug 수준) */
.dr-main.compact .dr-field{ padding:3px 2px; }
.dr-main.compact .disp{ min-height:26px; padding:3px 8px; font-size:13.5px; }
.dr-main.compact .dr-field .l{ font-size:12.5px; color:var(--c-text-dim); }
.dr-main.compact .fbox{ padding:0 12px 5px; margin-bottom:8px; }
.dr-main.compact .fbox-h{ padding:8px 0 4px; }
.dr-main.compact .code-row{ padding:5px 0; }
.dr-main.compact .dr-title{ margin:2px 0 10px; }
.dr-main.compact .dr-inp{ height:30px; }
.dr-main.compact .dr-type{ margin-bottom:4px; }

/* 인라인 편집 — pluuug식 입력완료 박스 */
.edit-wrap{ display:flex; flex-direction:column; gap:6px; background:var(--c-surface); border:1px solid var(--c-primary); border-radius:var(--r-sm); padding:8px; box-shadow:0 0 0 3px var(--c-primary-weak); }
.edit-wrap .dr-inp{ border-color:var(--c-border); }
.edit-actions{ display:flex; justify-content:flex-end; }

/* v7 거래처 추가요소 */
.dr-created{ color:var(--c-text-weak,#9aa0a8); font-size:12px; font-weight:500; }
.add-field{ color:var(--c-primary,#2c74ff); font-size:12.5px; font-weight:600; cursor:pointer; padding:6px 2px; user-select:none; }
.add-field:hover{ text-decoration:underline; }
.cf-del{ color:#c0c4cc; cursor:pointer; font-size:12px; padding:2px 4px; border-radius:6px; }
.cf-del:hover{ color:#e5484d; background:#fdecec; }
.th-sort{ cursor:pointer; white-space:nowrap; }
.th-sort:hover{ color:var(--c-primary,#2c74ff); }
.th-sort.on{ color:var(--c-primary,#2c74ff); }
.import-list{ max-height:280px; overflow:auto; border:1px solid var(--c-border,#eceef1); border-radius:8px; }
.import-item{ padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--c-border,#f2f3f4); font-size:13px; }
.import-item:last-child{ border-bottom:0; }
.import-item:hover{ background:var(--c-primary-weak,#eef4ff); }

/* v8 박스+필드 순서변경 */
.box-handle{ cursor:grab; color:#b4b9c2; margin-right:6px; font-size:13px; user-select:none; }
.fbox.reord{ border-style:dashed; }
.fbox.over{ outline:2px solid var(--c-primary,#2c74ff); outline-offset:2px; background:var(--c-primary-weak,#eef4ff); }
.fld-row.over{ background:var(--c-primary-weak,#eef4ff); border-radius:6px; }
.fld-row.dragging,.fbox.dragging{ opacity:.45; }
.reorder-hint{ background:#fff7e6; border:1px solid #ffd591; color:#ad6800; font-size:12px; padding:7px 10px; border-radius:8px; margin-bottom:8px; }

/* v9 OCR + 커스텀필드 모달 + 코드검증 */
.ocr-bar{ display:flex; align-items:center; gap:10px; margin:2px 0 10px; }
.ocr-btn{ background:var(--c-primary,#2c74ff); color:#fff; font-weight:700; border-color:var(--c-primary,#2c74ff); }
.ocr-btn:hover{ filter:brightness(.95); }
.ocr-help{ font-size:12px; color:var(--c-primary,#2c74ff); cursor:pointer; white-space:nowrap; }
.ocr-info{ background:#f0f6ff; border:1px solid #cfe0ff; color:#2a3a4a; font-size:12px; line-height:1.5; padding:8px 10px; border-radius:8px; margin-bottom:10px; }
.ocr-lab{ font-size:12.5px; font-weight:600; color:#4a4d55; margin-top:4px; }
.ocr-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 2px; }
.ocr-chip{ border:1px solid var(--c-border,#e3e6ea); border-radius:999px; padding:5px 11px; font-size:12.5px; cursor:pointer; user-select:none; }
.ocr-chip.on{ background:var(--c-primary,#2c74ff); color:#fff; border-color:var(--c-primary,#2c74ff); }
.ocr-result{ margin-top:8px; display:flex; flex-direction:column; gap:5px; }
.ocr-sec{ font-size:12px; background:#f6f8fa; border-radius:6px; padding:7px 9px; }
.dr-inp.invalid{ border-color:#e5484d !important; background:#fff5f5; }
.modal-box.cfm{ width:380px; max-width:92vw; }
.cfm-head{ display:flex; align-items:center; justify-content:space-between; }
.cfm-cap{ color:#8b9098; font-size:13px; }
.cfm-x{ cursor:pointer; color:#b4b9c2; font-size:13px; }
.cfm-title{ font-size:18px; font-weight:800; margin:6px 0 14px; }
.cfm-lab{ display:block; font-size:13px; font-weight:600; color:#4a4d55; margin:12px 0 5px; }
.cfm-sel{ width:100%; }
.cfm-add{ width:100%; margin-top:18px; }

/* v10 OCR 드롭존 */
.ocr-drop{ border:2px dashed var(--c-border,#cfd4da); border-radius:10px; padding:20px 14px; text-align:center; cursor:pointer; color:#6b7280; background:#fafbfc; margin:8px 0 4px; transition:.15s; }
.ocr-drop:hover{ border-color:var(--c-primary,#2c74ff); background:#f5f8ff; }
.ocr-drop.over{ border-color:var(--c-primary,#2c74ff); background:#eaf1ff; color:var(--c-primary,#2c74ff); }
.ocr-drop-ic{ font-size:26px; margin-bottom:4px; }
.ocr-drop-sub{ font-size:11.5px; color:#9aa0a8; margin-top:3px; }

/* v11 품목 가격/토글/요약 */
.price-field{ display:flex; align-items:center; gap:12px; }
.vat-chk{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:#4a4d55; white-space:nowrap; cursor:pointer; }
.vat-chk input{ width:15px; height:15px; }
.item-sum{ padding:2px 2px; }
.sum-row{ display:flex; justify-content:space-between; gap:8px; padding:8px 4px; border-bottom:1px solid var(--c-border,#f2f3f4); font-size:13px; }
.sum-row .sl{ color:#6b7280; } .sum-row .sv{ font-weight:700; text-align:right; }

/* v12 품목 그룹필터 + 사진 */
.tb-sel{ height:32px; border:1px solid var(--c-border,#e3e6ea); border-radius:8px; padding:0 10px; font-size:13px; background:#fff; max-width:220px; }
.prod-img{ max-width:100%; max-height:200px; border-radius:10px; border:1px solid var(--c-border,#eceef1); display:block; margin-bottom:8px; object-fit:contain; }
.img-drop{ border:2px dashed var(--c-border,#cfd4da); border-radius:10px; padding:16px; text-align:center; cursor:pointer; color:#6b7280; font-size:13px; background:#fafbfc; }
.img-drop:hover,.img-drop.over{ border-color:var(--c-primary,#2c74ff); background:#f5f8ff; color:var(--c-primary,#2c74ff); }