/* ASBU 디자인 시스템 (Figma: 제목 없음 › Colors / Typography / button / input field / Dialog / Toggle) */
:root{
  /* ASBU primary (공통) */
  --primary:#111213; --primary-variant:#EDEDEE;  /* KEY 블랙 · SUB 그레이 */ --on-primary:#FFFFFF;
  --red:#FE2B54; --yellow:#FDD31B; --yellow-variant:#FFF7D6;
  /* ASBU light */
  --bg-1:#FFFFFF; --bg-2:#F0F0F0;
  --on-bg-1:#111213; --on-bg-2:#525A5F; --on-bg-3:#8A8B8E; --on-bg-4:#A6AAB2;
  --valid:#00BF40; --valid-variant:#E8F8EE; --on-valid-variant:#009632;
  --error:#EB4745; --error-variant:#FDECEC; --on-error:#F6F6F6;
  --line:#E6E7E9;
  /* 기존 템플릿 호환 별칭 */
  --bg:var(--bg-2); --card:var(--bg-1); --ink:var(--on-bg-1); --muted:var(--on-bg-3);
  --pri:var(--primary); --ok:var(--on-valid-variant); --warn:#A07700; --bad:var(--error); --soft:var(--bg-2);
  --r-card:16px; --r-input:8px; --r-btn:999px;
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-2);color:var(--on-bg-1);font-size:15px;line-height:22px;letter-spacing:.0096em;-webkit-font-smoothing:antialiased}
a{color:var(--on-bg-1);text-underline-offset:3px}

/* Typography: Title XL/L/M/S · Label 16/14/12 · Body 16/15/12 */
h2{margin:4px 0 16px;font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.012em}
h3{margin:0 0 12px;font-size:17px;line-height:24px;font-weight:600}
.muted{color:var(--on-bg-3)}
small,.note{font-size:12px;line-height:16px}

/* 상단 내비 (Nav bar: 선택 on-bg-1, 미선택 on-bg-3, Label 16 SemiBold) */
header{background:var(--bg-1);border-bottom:1px solid var(--line);padding:0 24px;display:flex;align-items:center;gap:28px;height:60px;position:sticky;top:0;z-index:5}
header b{font-size:18px;line-height:26px;font-weight:700;letter-spacing:-.002em}
header nav{display:flex;gap:4px;overflow-x:auto}
header nav a{color:var(--on-bg-3);text-decoration:none;font-weight:600;font-size:15px;padding:8px 12px;border-radius:var(--r-btn);white-space:nowrap}
header nav a:hover{color:var(--on-bg-1);background:var(--bg-2)}
header nav a.on{color:var(--on-bg-1);background:var(--bg-2)}
header .prov{margin-left:auto;font-size:12px;color:var(--on-bg-4);white-space:nowrap}
main{max-width:1400px;margin:0 auto;padding:24px}

/* 카드 · 통계 */
.card{background:var(--bg-1);border-radius:var(--r-card);padding:20px;margin-bottom:16px;border:0;overflow-x:auto}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.stat .n{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{color:var(--on-bg-3);font-size:13px;font-weight:600;margin-bottom:2px}

/* 표 */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
th{font-size:12px;line-height:16px;font-weight:600;color:var(--on-bg-3);letter-spacing:.025em;background:transparent;border-bottom:1px solid var(--line)}
tr:hover td{background:#FAFAFA}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
tr.calc td{background:var(--bg-2);font-weight:700}
tr.section td{font-weight:700}
.scroll{overflow-x:auto}

/* 입력 (input field: 44px, radius 8, focus=on-bg-1 테두리, error=error 테두리, disabled·readonly=bg-2) */
input,select,textarea{font:inherit;font-size:15px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-input);background:var(--bg-1);color:var(--on-bg-1);caret-color:var(--red);outline:none;transition:border-color .12s}
textarea{height:auto;padding:10px 14px}
input::placeholder{color:var(--on-bg-4)}
input:hover,select:hover{border-color:#D3D5D8}
input:focus,select:focus,textarea:focus{border-color:var(--on-bg-1)}
input:disabled,select:disabled,input[readonly]{background:var(--bg-2);border-color:var(--bg-2);color:var(--on-bg-4)}
input:user-invalid,.is-error{border-color:var(--error)}
input[type=checkbox],input[type=radio]{height:18px;width:18px;padding:0;accent-color:var(--primary);vertical-align:middle}
input[type=file]{height:auto;padding:8px;border-style:dashed}
td select,td input{height:34px;padding:0 10px;font-size:13px;max-width:150px}
label{color:var(--on-bg-2);font-size:14px}

/* 버튼 (primary / secondary / tertiary=disabled / text only) */
button,.btn{font:inherit;font-size:15px;font-weight:600;height:40px;padding:0 18px;border-radius:var(--r-btn);border:0;cursor:pointer;
  background:var(--primary);color:var(--on-primary);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:filter .12s}
button:hover,.btn:hover{filter:brightness(1.15)}
button.sec,.btn.sec{background:var(--bg-2);color:var(--on-bg-1)}
button.sec:hover,.btn.sec:hover{filter:brightness(.96)}
button:disabled,.btn.disabled{background:var(--bg-2);color:var(--on-bg-4);cursor:not-allowed;filter:none}
button.text,.btn.text{background:transparent;color:var(--on-bg-3)}
button.danger{background:var(--bg-1);color:var(--error);box-shadow:inset 0 0 0 1px #F6C6C5}
button.danger:hover{background:var(--error-variant);filter:none}
button.accent,.btn.accent{background:var(--valid);color:#fff}
.btn.lg,button.lg{height:48px;font-size:16px;padding:0 24px}
td button,td .btn{height:32px;padding:0 12px;font-size:13px}
form.inline{display:inline}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* 알림 · 태그 */
.msg{background:var(--on-bg-1);color:#fff;padding:12px 16px;border-radius:12px;margin-bottom:16px;white-space:pre-wrap;font-size:14px}
.tag{display:inline-block;padding:2px 10px;border-radius:var(--r-btn);font-size:12px;line-height:18px;font-weight:600;background:var(--bg-2);color:var(--on-bg-2)}
.tag.ok{background:var(--valid-variant);color:var(--on-valid-variant)}
.tag.warn{background:var(--yellow-variant);color:var(--warn)}
.tag.bad{background:var(--error-variant);color:var(--error)}
pre{background:var(--on-bg-1);color:#E6E7E9;padding:14px;border-radius:12px;white-space:pre-wrap;font-size:12px;line-height:18px}
details summary{cursor:pointer;color:var(--on-bg-2);font-weight:600}

/* 토글 (Toggle: 46x26, on=primary) — <input type=checkbox class="toggle"> */
input.toggle{appearance:none;width:46px;height:26px;border-radius:13px;background:var(--bg-2);border:0;position:relative;cursor:pointer;transition:background .15s;vertical-align:middle}
input.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
input.toggle:checked{background:var(--primary)}
input.toggle:checked::after{left:23px}

/* Dialog (390 · radius 20 · Title M · Body on-bg-2 · Secondary/Primary 48px) */
.dialog-backdrop[hidden]{display:none}
.dialog-backdrop{position:fixed;inset:0;background:rgba(17,18,19,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
#dlg{z-index:60}  /* 확인창은 미리 보기 창 위에 */
.dialog{background:var(--bg-1);border-radius:20px;width:390px;max-width:100%;padding:28px 24px 24px}
.dialog h4{margin:0 0 10px;font-size:18px;line-height:26px;font-weight:700}
.dialog p{margin:0 0 24px;color:var(--on-bg-2);font-size:15px;line-height:22px}
.dialog .acts{display:flex;gap:8px}
.dialog .acts button{flex:1;height:48px;border-radius:12px;font-size:16px}

/* 증빙 사진 */
.att{display:flex;gap:4px;align-items:center;flex-wrap:nowrap}
.attitem{position:relative;display:inline-block}
.thumb{width:36px;height:36px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.attdel{position:absolute;top:-6px;right:-6px;display:none}
.attitem:hover .attdel{display:block}
.attdel button{height:18px;padding:0 5px;font-size:10px;border-radius:99px}
.attbtn{cursor:pointer}
.dropzone{border:1px dashed var(--on-bg-4);border-radius:var(--r-input);height:44px;padding:0 14px;color:var(--on-bg-3);cursor:pointer;display:inline-flex;gap:6px;align-items:center;font-size:14px}
.dropzone.has{border-color:var(--on-bg-1);color:var(--on-bg-1);border-style:solid}

@media (max-width:720px){main{padding:16px}header{padding:0 16px;gap:12px}header .prov{display:none}.card{padding:16px}}

/* 로그인 · 사용자 */
.authform{display:flex;flex-direction:column;gap:14px}
.authform label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--on-bg-1)}
.authform label.chk{flex-direction:row;align-items:center;gap:8px;font-weight:400;color:var(--on-bg-2)}
.authform input:not([type=checkbox]){width:100%}
.authform button{width:100%;border-radius:12px;margin-top:4px}
header .admin-link{color:var(--on-bg-2)}
header .usermenu{margin-left:auto;display:flex;align-items:center;gap:4px}
header .usermenu .who{text-decoration:none;font-weight:600;font-size:14px;padding:6px 10px;border-radius:99px}
header .usermenu .who:hover{background:var(--bg-2)}
header .usermenu .who span{color:var(--on-bg-3);font-weight:400;margin-left:2px}
header .prov{display:none}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.perm{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--bg-2);cursor:pointer;color:var(--on-bg-1)}
.perm input{margin-top:2px}
.perm b{display:block;font-size:14px}.perm small{color:var(--on-bg-3);font-size:12px;line-height:16px}
.perm:has(input:checked){background:var(--primary-variant)}
.perm.danger-perm:has(input:checked){background:var(--error-variant)}

/* ── 왼쪽 세로 메뉴 ── */
.layout{display:flex;min-height:100vh}
.layout>main{flex:1;min-width:0;max-width:none;margin:0}
.sidebar{width:236px;flex:none;background:var(--bg-1);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:22px 14px 16px}
.sb-logo{font-size:20px;line-height:28px;font-weight:800;letter-spacing:.14em;text-decoration:none;padding:0 10px 18px}
.sidebar nav{flex:1}
.sb-group{margin-bottom:18px}
.sb-title{font-size:12px;line-height:16px;font-weight:600;color:var(--on-bg-4);letter-spacing:.025em;padding:0 10px 6px}
.sb-item{display:block;padding:9px 10px;border-radius:10px;color:var(--on-bg-2);text-decoration:none;font-size:15px;font-weight:500;line-height:20px}
.sb-item:hover{background:var(--bg-2);color:var(--on-bg-1)}
.sb-item.on{background:var(--primary);color:#fff;font-weight:600}
.sb-user{border-top:1px solid var(--line);padding-top:12px;display:flex;align-items:center;gap:4px}
.sb-who{flex:1;text-decoration:none;padding:6px 10px;border-radius:10px;display:flex;flex-direction:column;min-width:0}
.sb-who b{font-size:14px}.sb-who span{font-size:12px;color:var(--on-bg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-who:hover,.sb-who.on{background:var(--bg-2)}
.sb-logout{height:32px;padding:0 10px;font-size:13px}
@media (max-width:900px){
  .layout{flex-direction:column}
  .sidebar{width:auto;height:auto;position:static;border-right:0;border-bottom:1px solid var(--line);padding:14px}
  .sidebar nav{display:flex;gap:14px;overflow-x:auto}
  .sb-group{margin:0;flex:none}.sb-group>a{display:inline-block}
  .sb-logo{padding-bottom:10px}.sb-user{border:0;padding-top:8px}
}

/* 프로모션 */
.ptabs{margin:-4px 0 16px;gap:6px}
.flowline{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.fl{background:var(--bg-2);border-radius:12px;padding:14px;text-decoration:none;display:flex;flex-direction:column;gap:2px;position:relative}
.fl:hover{background:#E6E7E9}
.fl b{font-size:15px}.fl span{font-size:12px;color:var(--on-bg-3)}.fl em{font-style:normal;font-size:13px;font-weight:600;margin-top:6px}
.pay-pill{display:inline-flex;gap:4px;align-items:center;font-size:12px;font-weight:600;border-radius:99px;padding:2px 9px;background:var(--bg-2);color:var(--on-bg-3)}
.pay-pill.done{background:var(--valid-variant);color:var(--on-valid-variant)}.pay-pill.due{background:var(--error-variant);color:var(--error)}
.matrix td input{width:64px;text-align:right}

/* 메뉴 분류 드롭다운 */
.sb-group{margin-bottom:4px}
.sb-title{display:flex;align-items:center;justify-content:space-between;width:100%;height:auto;background:transparent;border-radius:10px;
  padding:10px 10px;font-size:14px;font-weight:600;color:var(--on-bg-1);letter-spacing:0;cursor:pointer}
.sb-title:hover{background:var(--bg-2);filter:none}
.chev{width:8px;height:8px;border-right:2px solid var(--on-bg-3);border-bottom:2px solid var(--on-bg-3);transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.sb-group.open .chev{transform:rotate(-135deg) translateY(-1px)}
.sb-items{max-height:0;overflow:hidden;transition:max-height .22s ease}
.sb-group.open .sb-items{max-height:600px}
.sb-items .sb-item{padding-left:18px;margin:1px 0}
@media (max-width:900px){.sidebar nav{flex-direction:column;gap:0}.sb-group{flex:auto}}

/* 업로드 대기열 */
.upq{display:flex;flex-direction:column;gap:10px}
.upq-drop{width:100%;height:72px;justify-content:center;font-size:15px}
.upq-drop.over{border-color:var(--on-bg-1);background:var(--bg-2);border-style:solid}
.upq-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.upq-list:empty{display:none}
.upq-list li{display:flex;align-items:center;gap:10px;background:var(--bg-2);border-radius:10px;padding:8px 8px 8px 14px;font-size:14px}
.upq-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.upq-size{color:var(--on-bg-3);font-size:12px}
.upq-x{height:28px;width:28px;padding:0;border-radius:50%;background:var(--bg-1);color:var(--on-bg-3);font-size:13px}
.upq-x:hover{color:var(--error);background:var(--error-variant);filter:none}
.upq-foot{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.upq-sum{margin-right:auto;font-size:13px}.upq-warn{color:var(--error)}

/* PDF 미리보기 팝업 */
.pdfviewer{background:var(--bg-1);border-radius:20px;width:min(1100px,96vw);height:min(92vh,1100px);display:flex;flex-direction:column;overflow:hidden}
.pv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pv-head b{font-size:16px}
.pv-x{width:40px;padding:0}
.pv-body{flex:1;background:#525659;overflow:auto}
.pv-body iframe{width:100%;height:100%;border:0;display:block}
.pv-body img{padding:16px;box-sizing:border-box}
/* 결재란 (작업 지시서) */
.apprbox{width:auto;border-collapse:collapse;margin-left:auto}
.apprbox th,.apprbox td{border:1px solid var(--line);text-align:center;padding:0}
.apprbox th{background:var(--bg-2);font-size:13px;font-weight:600;height:30px;width:112px;color:var(--on-bg-1)}
.apprbox th.ap-head{width:44px;line-height:20px}
.apprbox td.ap-cell{height:96px;width:112px;vertical-align:middle;position:relative;padding:4px 4px 6px}
.ap-cell img{display:block;max-width:100px;max-height:56px;margin:0 auto 2px}
.ap-cell.mine{background:var(--bg-2)}
.ap-meta{font-size:11px;line-height:15px;color:var(--on-bg-2);white-space:nowrap}
.ap-wait{font-size:14px;font-weight:600;color:var(--on-bg-1)}
.ap-sign{height:32px;padding:0 12px;font-size:13px;margin-bottom:6px}
.ap-x{position:absolute;top:2px;right:2px;height:20px;padding:0 6px;font-size:11px;background:transparent;color:var(--on-bg-2);border:1px solid var(--line)}
.dialog.sigdlg{width:560px}
#sigpad{display:block;width:100%;aspect-ratio:68/26;border:1px dashed var(--line);border-radius:12px;background:#fff;touch-action:none;cursor:crosshair}
@media (max-width:640px){.apprbox th,.apprbox td.ap-cell{width:72px}.ap-cell img{max-width:66px}}
/* 사용자 관리: 공통 / 브랜드 권한 (전체·상세) */
.perm-h{margin:18px 0 8px;font-size:15px}.perm-h small{font-weight:400;color:var(--on-bg-3);font-size:13px;margin-left:6px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;margin-bottom:12px;background:var(--bg-2)}
.seg label{cursor:pointer}.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:6px 16px;border-radius:999px;font-size:14px;color:var(--on-bg-2)}
.seg input:checked+span{background:var(--primary);color:var(--on-primary);font-weight:600}
.seg input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.bp-table th.c,.bp-table td.c{text-align:center;width:1%;white-space:nowrap;padding-left:14px;padding-right:14px}
.bp-table th.danger-col{color:var(--error)}
.bp-table input{width:18px;height:18px;accent-color:var(--primary)}
.bp-sum{display:grid;gap:4px;font-size:13px}.bp-sum .tag{margin:0 2px 2px 0}
/* 브랜드 현황 막대 */
.bbar{height:6px;background:var(--bg-2);border-radius:3px;overflow:hidden;margin:2px 0}.bbar i{display:block;height:100%;background:var(--primary)}
.bbar.cost i{background:var(--on-bg-4)}
tr.sel td{background:var(--bg-2)}
.bform label{font-size:13px;color:var(--on-bg-2)}.bform .row{margin-bottom:8px}
.bp-list tr.draft td{background:var(--yellow-variant)}
.bp-list select{max-width:150px}
/* 매입 수정 요청 · 승인 */
.bp-editrow td{background:var(--bg-2)}.bp-editrow label{font-size:12px;color:var(--on-bg-2)}
.bp-list tr.locked-pending td{opacity:.75}
.cr-item{border-top:1px solid var(--line);padding:10px 0}.cr-item:first-of-type{border-top:0}
.cr-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cr-diff{margin:6px 0 4px;padding-left:18px;font-size:14px}.cr-diff s{color:var(--on-bg-3)}
/* ── 간격 정리 (전체 공통) ───────────────────────────── */
/* 카드 묶음: 묶음 사이 간격 = 카드 사이 간격 = 16px */
.grid{margin-bottom:16px}
.grid>.card,.grid>a.card{margin-bottom:0}
.grid.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.grid.grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.grid.grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 제목(라벨) 위·입력칸 아래 형태의 필드: 라벨과 칸 간격 6px, 한 줄 안에서 아래선 맞춤 */
.row>label:has(>br){display:inline-flex;flex-direction:column;gap:6px}
.row>label:has(>br)>br{display:none}
.row:has(>label>br){align-items:flex-end}
/* 폼 격자: 칸 너비를 열에 맞춰 반듯하게 */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px 16px;align-items:end;margin:0}
.fgrid>*{min-width:0}
.fgrid>label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--on-bg-2)}
.fgrid>label>br{display:none}
.fgrid input:not([type=checkbox]):not([type=radio]):not(.toggle),.fgrid select{width:100%}
.fgrid .span2{grid-column:span 2}.fgrid .full{grid-column:1/-1}
.fgrid .checks{display:flex;gap:20px;flex-wrap:wrap;align-items:center;min-height:44px}
.fgrid .checks label{display:inline-flex;gap:8px;align-items:center}
.fgrid .actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.fgrid .dropzone{margin:0;height:44px;display:flex;align-items:center}
@media (max-width:640px){.fgrid .span2{grid-column:1/-1}.fgrid .actions{justify-content:flex-start}}
.flowline{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:1200px){.flowline{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.flowline{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fgrid .pair{display:flex;gap:6px}.fgrid .pair select{flex:1.3}.fgrid .pair input{flex:1}
.vgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.vrow{border-bottom:1px solid var(--line);padding:16px 0}.vrow:first-child{padding-top:0}.vrow:last-child{border-bottom:0;padding-bottom:0}
.vrow>b{display:inline-block;margin-bottom:10px}
.fgrid [hidden]{display:none!important}
.fgrid .actions.full .dropzone{margin-right:auto;flex:0 1 auto}
.fgrid .dropzone{white-space:nowrap;justify-content:flex-start;padding:0 16px;gap:6px}
.fgrid>label>span{display:flex;gap:6px;align-items:baseline}
/* ── 사각 디자인: 모든 모서리 직각 (로그인 화면과 통일). 라디오 버튼만 원형 유지 ── */
:root{--r-card:0;--r-input:0;--r-btn:0}
*,*::before,*::after{border-radius:0!important}
input[type=radio]{border-radius:50%!important}
.ch-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
@media (max-width:1000px){.ch-grid{grid-template-columns:1fr}}
.ch-up{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ch-up .dropzone{margin:0;flex:1;min-width:180px}
table.todo td:first-child{white-space:normal}
.ch-up .dropzone{flex:1 1 100%;white-space:nowrap;font-size:13px}
/* 차트 (채널 3색: 검증된 categorical 1~3번) */
:root{--ch-1:#2a78d6;--ch-2:#eb6834;--ch-3:#1baf7a;--seq:#2a78d6}
svg.chart{display:block}svg.chart .grid{stroke:var(--line);stroke-width:1}svg.chart .axis{stroke:#C9CBCF;stroke-width:1}
svg.chart .tick{font-size:11px;fill:var(--on-bg-3);font-variant-numeric:tabular-nums}
svg.chart .hit{fill:transparent}svg.chart .hit:hover{fill:rgba(17,18,19,.04)}
svg.chart rect:not(.hit):hover{opacity:.85}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--on-bg-2);margin-bottom:8px}
.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.hbar{height:8px;background:var(--bg-2);min-width:80px}.hbar i{display:block;height:100%;background:var(--seq)}
.hbar.back i{background:var(--on-bg-3)}
.heat td.v{font-variant-numeric:tabular-nums;text-align:right}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filters label{display:inline-flex;flex-direction:column;gap:6px;font-size:13px;color:var(--on-bg-2)}
/* 작업 지시서 목록: 매입·매출 단가 (최고 관리자 입력) */
.wo-price{display:grid;grid-template-columns:auto auto;gap:4px 6px;align-items:center;justify-content:end}
.wo-price label{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin:0}
.wo-price input{width:72px;height:28px;padding:0 6px;font-size:13px;text-align:right}
.wo-price button{grid-row:1/4;grid-column:2;height:94px;padding:0 10px;font-size:12px}
.wo-pv{font-size:13px}
/* 작업 지시서 목록: 발주서 PDF · 견적서 발송 */
.wo-docs{white-space:nowrap}
.wo-docs .btn{height:28px;padding:0 10px;font-size:12px;display:flex;width:84px;justify-content:center}
.wo-docs .muted{font-size:11px;margin:2px 0 6px}
.pv-send{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--bg-2,#f6f6f7);flex-wrap:wrap;font-size:14px}
.pv-send button{height:34px;padding:0 14px;font-size:13px}
/* 작업 지시서 화면 4단계 안내 */
/* 프로모션 관리: 아이템별 지급·발행·입금 상태 버튼 */
.st-cell{white-space:normal}
.st-cell form{display:inline-block;margin:0 4px 4px 0}
.st-btn{height:26px;padding:0 9px;font-size:12px;font-weight:600}
.st-btn.on{background:var(--primary-variant);color:var(--on-bg-1, #111213)}
.st-btn.off{background:#fff;color:var(--bad);border:1px solid var(--bad)}
.wo-price.locked input[readonly],.wo-price input[readonly]{background:var(--primary-variant)!important;border-color:var(--primary-variant)!important;cursor:not-allowed}
.wo-price .wo-pw{grid-column:1/3;width:100%;height:28px;font-size:12px;text-align:left}
.vgrid.vk-sale .buy-only{display:none}
/* 운영 현황 › 매출 통합관리 (예전 /admin/sales) */
.kpis{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--bg-1);border-radius:16px;padding:20px 22px}
.kpi .l{font-size:14px;font-weight:600;color:var(--on-bg-2)}
.kpi .p{font-size:12px;color:var(--on-bg-3);margin-top:2px}
.kpi .n{font-size:30px;line-height:40px;font-weight:700;letter-spacing:-.024em;margin:10px 0 6px;font-variant-numeric:tabular-nums}
.kpi.dark{background:var(--primary);color:#fff}.kpi.dark .l,.kpi.dark .p{color:#C9CACD}
.delta{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.delta.up{color:var(--on-valid-variant)}.delta.down{color:var(--error)}.delta.flat{color:var(--on-bg-3)}
.kpi.dark .delta.up{color:#5BE38C}.kpi.dark .delta.down{color:#FF8A8A}.kpi.dark .delta.flat{color:#C9CACD}
.brand{background:var(--bg-1);border-radius:16px;padding:20px 22px;margin-top:16px}
.brand-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.brand-h h3{margin:0;font-size:18px;line-height:26px;font-weight:700}
.brand-g{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px}
.cell{background:var(--bg-2);border-radius:12px;padding:16px}
.cell .l{font-size:13px;font-weight:600;color:var(--on-bg-2)}
.cell .p{font-size:12px;color:var(--on-bg-3)}
.cell .n{font-size:22px;line-height:30px;font-weight:700;letter-spacing:-.02em;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.years{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.yr{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;font-size:13px;font-variant-numeric:tabular-nums}
.yr .bar{height:8px;background:#E2E3E5;border-radius:4px;overflow:hidden}.yr .bar i{display:block;height:100%;background:var(--primary);border-radius:4px}
.yr.cur{font-weight:700}.yr .amt{min-width:110px;text-align:right}
.share{height:6px;background:#E2E3E5;border-radius:3px;margin-top:10px;overflow:hidden}.share i{display:block;height:100%;background:var(--red)}
.yt{width:100%;margin-top:16px}
@media (max-width:900px){.kpis,.brand-g{grid-template-columns:1fr}}
#sales .brand{padding:16px 0 0;margin-top:16px;border-top:1px solid var(--line)}
/* 자금 위험 (운영 현황 · 자금 달력) */
.cash-alert.short{border-left:4px solid var(--bad)}.cash-alert.warn{border-left:4px solid #E3A008}.cash-alert.unknown{border-left:4px solid var(--muted)}
.cash-w{padding:6px 0;font-size:14px}.cash-w.short{color:var(--bad);font-weight:700}.cash-w.warn{color:#9A6700;font-weight:600}.cash-w.unknown{color:var(--on-bg-2)}
/* 자금 달력 */
.cal-head{gap:8px;margin-bottom:10px}.cal-head .btn{height:32px;padding:0 12px}
.cal-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--on-bg-2);margin-bottom:10px}
.cal-legend span{display:flex;align-items:center;gap:6px}.cal-legend .lv{width:12px;height:12px;display:inline-block;border:1px solid var(--line)}
.lv.short{background:#FDE7E7;border-color:var(--bad)!important}.lv.warn{background:#FFF4D6;border-color:#E3A008!important}.lv.unknown{background:var(--primary-variant)}.lv.today{border:2px solid var(--on-bg-1)!important}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-dow{font-size:12px;font-weight:600;color:var(--on-bg-2);text-align:center;padding:4px 0}
.cal-d{min-height:92px;border:1px solid var(--line);padding:6px 8px;display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none;background:var(--bg-1);font-variant-numeric:tabular-nums;min-width:0}
a.cal-d:hover{border-color:var(--on-bg-1)}
.cal-d.out{opacity:.4}.cal-d.past{background:var(--bg-2)}
.cal-d.today{outline:2px solid var(--on-bg-1);outline-offset:-2px}
.cal-d.short{background:#FDE7E7;border-color:var(--bad)}.cal-d.warn{background:#FFF4D6;border-color:#E3A008}.cal-d.unknown{background:var(--primary-variant)}
.cal-n{font-size:13px;font-weight:700}
.cal-amt{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-d.short .cal-amt,.cal-d.short .cal-c{color:var(--bad)}
.cal-c,.cal-paid,.cal-bal{font-size:11px;color:var(--on-bg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-paid{color:var(--on-bg-3)}
@media (max-width:700px){.cal-d{min-height:64px;padding:4px}.cal-bal,.cal-c{display:none}.cal-amt{font-size:11px}}
tr.muted td{color:var(--on-bg-3)}
.cal-d.out.today{outline:none}
/* 거래처 관리: 목록 + 수정 칸 */
.vlist td{vertical-align:middle}
.v-edit>td{background:var(--bg-2);padding:16px}
.v-pw input{border-color:var(--on-bg-1)}
.v-edit .sec{background:#fff}
/* 운영 현황 맨 위: 브랜드별 매출 (직원 공용) */
.bs-top .kpis{margin-bottom:14px}.bs-top .kpi{background:var(--bg-2)}.bs-top .kpi.dark{background:var(--primary)}
.bs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.bs-tile{border:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:4px;font-variant-numeric:tabular-nums}
.bs-name{font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:8px}.bs-name .muted{font-weight:400;font-size:12px}
.bs-amt{font-size:22px;font-weight:700;letter-spacing:-.02em}
.bs-sub{display:flex;justify-content:space-between;font-size:12px;color:var(--on-bg-2);margin-top:4px;gap:8px}
/* 올해 목표 달성률 (운영 현황 · 운영 현황(매출) 맨 위) */
.tgt-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px}.tgt-head h3{margin:0}
.tgt-pct{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tgt-gap{font-size:13px;font-weight:600}.ahead{color:var(--on-valid-variant,#16833a)}.behind{color:var(--bad)}
.tgt-pct.ahead,.tgt-pct.behind{color:var(--on-bg-1)}
.tgt-bar{position:relative;height:14px;background:var(--primary-variant)}.tgt-bar i{display:block;height:100%;background:var(--primary)}
.tgt-bar b{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--bad)}
.tgt-bar.sm{height:8px;margin:6px 0 4px}.tgt-bar.sm b{top:-3px;bottom:-3px}
.tgt-legend{font-size:12px;margin-top:6px}
.tgt-brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px}
.tgt-b{border:1px solid var(--line);padding:10px 12px;font-variant-numeric:tabular-nums}
.tgt-b-h{display:flex;justify-content:space-between;font-size:13px;font-weight:600}
/* 매입 전표 관리: 지출결의서(세로형) */
.voucher{max-width:760px;margin:0 auto}  /* 가운데 정렬 */
.vc-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:0}
.vc-title h3{margin:0;font-size:20px;letter-spacing:.3em}
.vc{width:100%;border-collapse:collapse}
.vc th,.vc td{border-bottom:1px solid var(--line);padding:8px 12px;vertical-align:middle}
.vc th{width:170px;background:var(--bg-2);text-align:left;font-size:13px;font-weight:600;color:var(--on-bg-2)}
.vc td input:not([type=checkbox]):not([type=file]),.vc td select{width:100%;max-width:420px}
.vc-pair{display:flex;gap:8px;flex-wrap:wrap}.vc-pair select,.vc-pair input{flex:1;min-width:160px}
.vc-amt input{max-width:220px!important;text-align:right}
.vc-sum th,.vc-sum td{background:var(--primary-variant);font-weight:700}.vc-sum b{font-size:18px;font-variant-numeric:tabular-nums}
.vc-check{display:flex;align-items:center;gap:8px;margin:0;font-size:14px}
.vc-actions{display:flex;justify-content:flex-end;margin-top:14px}
@media (max-width:600px){.vc th{width:96px}}
.vc-date input{max-width:220px!important}
#vc-done .acts>*{height:44px;flex:1;display:inline-flex;align-items:center;justify-content:center}

/* 생산 오더 관리 — 업로드할 때 결재자 고르기 */
.wo-appr{margin:4px 0 12px;display:flex;flex-direction:column;gap:8px}
.wo-appr-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wo-appr-row label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.wo-appr-row select{width:100%}
@media (max-width:760px){.wo-appr-row{grid-template-columns:1fr 1fr}}