/* 사이드바 영업 기준 통일 (2026-09-20) */
/* Wave.N 부서 페이지 공용 껍데기 — 사이드바 · 상단바 · 기본 컴포넌트
   페이지 고유 스타일은 각 html 의 <style> 에 둡니다. */
:root{ color-scheme:light;
  --bg:#eef2f4; --card:#fff; --line:#e3e9ed; --txt:#20313c; --sub:#5d6d77;
  --blue:#337b35; --blue-l:#edf6e8; --lime:#c5ed85; --navy:#122331; --navy2:#1a3342; --radius:12px; }
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard Variable',Pretendard,'맑은 고딕',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;background:var(--bg);color:var(--txt);font-size:14px;line-height:1.6}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid #77a952;outline-offset:2px}

.btn{display:inline-flex;gap:8px;justify-content:center;align-items:center;min-height:39px;border:1px solid #dce4e8;border-radius:7px;padding:8px 14px;background:#fff;color:#455d6a;white-space:nowrap;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit}
.btn:hover{background:#f3f6f8}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy2)}

.app-shell{display:flex;min-height:100vh}
.app-sidebar{width:226px;flex-shrink:0;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;background:var(--navy);color:#afbec7;z-index:30}
.brand{display:flex;align-items:center;gap:11px;padding:20px 16px 18px;color:#fff;overflow:hidden}
.brand-logo{height:26px;width:auto;flex:0 0 auto;display:block}
.brand-div{width:1px;height:23px;align-self:center;background:#2f4759;flex:0 0 1px;position:relative;top:5px}
.brand-werp{color:#fff;font-size:13.5px;font-weight:500;letter-spacing:1.5px;line-height:1;flex:0 0 auto;position:relative;top:5px}
.side-content{padding:0 13px;overflow:auto;flex:1}
.nav-heading{font-size:11px;letter-spacing:1px;color:#748f9c;padding:12px 14px 9px}
.nav-group{display:flex;align-items:center;gap:11px;width:100%;margin:2px 0;padding:11px 13px;border:0;border-radius:8px;background:transparent;color:#cfdae2;font-size:13.5px;font-family:inherit;cursor:pointer;text-align:left}
.nav-group:hover{background:#1d3346}
.nav-group.has-active{background:#1b2f41;color:#fff}
.nav-group .ng-icon{width:19px;flex:0 0 19px;display:grid;place-items:center}
.nav-group .ng-icon .cico{width:17px;height:17px}
.nav-group .ng-label{flex:1;min-width:0}
.nav-group .ng-caret{font-size:10px;color:#7b95a5;flex:0 0 auto}
.nav-kids{position:relative;padding:2px 0 6px}
.nav-kids::before{content:"";position:absolute;left:15px;top:2px;bottom:8px;width:1px;background:#2a4155}
.nav-kids .nav-link{display:flex;align-items:center;gap:0;width:100%;margin:1px 0;font-weight:400;padding:9px 12px 9px 30px;border:0;border-radius:7px;background:transparent;color:#93a7b5;font-size:13px;font-family:inherit;cursor:pointer;text-align:left;position:relative}
.nav-kids .nav-link:hover{background:#1b2f41;color:#cfdae2}
.nav-kids .nav-link.active{background:#1d5c39;color:#fff;font-weight:500}
.nav-kids .nav-link.active::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:3px;border-radius:2px;background:#6ee787;box-shadow:0 0 8px rgba(110,231,135,.65)}
.nav-link{display:flex;align-items:center;gap:11px;font-size:14px;padding:10px 13px;border-radius:7px;margin-bottom:3px;transition:background .15s;border:none;background:none;color:inherit;font-family:inherit;width:100%;text-align:left;cursor:pointer}
.nav-link:hover{background:#213a48;color:#fff}
.nav-link.active{background:var(--lime);color:#21382b;font-weight:600}
.nav-link[disabled]{opacity:.45;cursor:default}
.nav-link[disabled]:hover{background:none;color:inherit}
.nav-link .cnt{margin-left:auto;font-size:11px;background:#2b414f;color:#c2d2dd;padding:1px 7px;border-radius:10px}
.nav-link.active .cnt{background:#a9d95d;color:#21382b}
.nav-icon{width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-icon svg{width:19px;height:19px}
.side-bottom{padding:21px 18px 15px}
.profile{border:0;border-top:1px solid #2b414f;background:transparent;color:#e2ebee;display:flex;gap:10px;width:100%;text-align:left;align-items:center;padding:17px 0 0;margin-top:18px;font-family:inherit}
.profile .avatar{width:33px;height:33px;display:grid;place-items:center;background:#2b4946;border-radius:50%;color:#cff19d;font-size:13px;flex-shrink:0}
.profile-name{font-size:13px;line-height:1.3}.profile-name small{display:block;font-size:11px;color:#66757f}

.app-main{flex:1;min-width:0;margin-left:226px;display:flex;flex-direction:column}
.topbar{height:74px;background:#ffffffea;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:18px;position:sticky;top:0;z-index:20;backdrop-filter:blur(6px)}
.breadcrumb{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--sub);min-width:0}
.breadcrumb strong{color:var(--txt);font-weight:600;white-space:nowrap}
.breadcrumb .slash{color:#c4ced4}
.icon-button{border:1px solid var(--line);background:#fff;border-radius:8px;width:36px;height:36px;display:none;align-items:center;justify-content:center;cursor:pointer;font-size:18px}
.top-actions{display:flex;align-items:center;gap:14px}
.today{font-size:12px;color:#536773;font-variant-numeric:tabular-nums}.today span{color:#66757f;margin-left:3px}
.app-row{display:flex;gap:4px;align-items:center;margin-right:14px;padding-right:14px;border-right:1px solid var(--line)}
.app-row a{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;text-decoration:none;color:#1f2937;font-size:12.5px}
.app-row a:hover{background:#f3f6f8}.app-row a.current{background:#eef7ea;font-weight:600}.app-row a.soon{opacity:.4;pointer-events:none}
.app-row a .ic{font-size:16px}
.app-row .sep{width:1px;height:20px;background:var(--line);margin:0 4px}

.content{padding:28px 32px;max-width:none}
.content.wide{max-width:none}
.page{display:none}.page.active{display:block}
.pagetitle{font-size:20px;font-weight:700;margin-bottom:4px}
.pagesub{font-size:13px;color:var(--sub);margin-bottom:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card.flush{padding:0;overflow:auto}
.soon{display:flex;flex-direction:column;align-items:center;gap:8px;padding:60px 20px;color:var(--sub);text-align:center}
.soon .big{font-size:40px}.soon b{color:var(--txt);font-size:16px}
.side-backdrop{display:none;position:fixed;inset:0;background:rgba(10,20,28,.45);z-index:25}.side-backdrop.show{display:block}

@media (max-width:1024px){
  .app-sidebar{transform:translateX(-100%);transition:transform .2s}.app-sidebar.open{transform:none}
  .app-main{margin-left:0}.icon-button{display:inline-flex}.topbar{padding:0 16px}.content{padding:20px 16px}
}
@media (max-width:900px){ .app-row a span:not(.ic){display:none} .app-row a{padding:6px 8px} }
@media not all{ .app-sidebar{transition:none} }

/* ===== 공용 UI 컴포넌트 (2026-09 개정) ===== */
:root{
  --g-50:#f2f8ec; --g-100:#eaf3de; --g-300:#9ecb6e; --g-500:#58BA48; --g-700:#2f6b24;
  --amber-50:#fff4e0; --amber-600:#a86a06;
  --red-50:#fdeaea; --red-600:#c0322f;
  --blue-50:#e8f1fa; --blue-600:#1c5789;
  --gray-50:#eef1f3; --gray-600:#4a5a64;
  --shadow-1:0 1px 2px rgba(16,36,50,.04);
  --shadow-2:0 12px 32px rgba(15,30,45,.14);
}
.sec-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.sec-head .si{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 34px;background:var(--g-100);color:var(--g-700)}
.sec-head .si svg{width:18px;height:18px}
.sec-head b{font-size:15px;font-weight:700}
.sec-head .hint{font-size:12.5px;color:#66757f;margin-left:2px}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:18px}
.stat-card{display:flex;align-items:center;gap:14px;padding:17px 19px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-1)}
.stat-card .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 44px;background:var(--gray-50);color:var(--gray-600)}
.stat-card .ico svg{width:21px;height:21px}
.stat-card .val{display:block;font-size:23px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.stat-card .lbl{display:block;font-size:12.5px;color:var(--sub);margin-bottom:2px}
.stat-card .delta{font-size:11.5px;color:var(--sub);margin-left:6px;font-weight:500}
.stat-card .delta.up{color:var(--g-500)}
.stat-card .delta.down{color:var(--red-600)}
.ico-g{background:var(--g-100);color:var(--g-700)}
.ico-b{background:var(--blue-50);color:var(--blue-600)}
.ico-a{background:var(--amber-50);color:var(--amber-600)}
.ico-r{background:var(--red-50);color:var(--red-600)}

.badge{display:inline-block;padding:3px 9px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap}
.badge-g{background:var(--g-100);color:var(--g-700)}
.badge-b{background:var(--blue-50);color:var(--blue-600)}
.badge-a{background:var(--amber-50);color:var(--amber-600)}
.badge-r{background:var(--red-50);color:var(--red-600)}
.badge-n{background:var(--gray-50);color:var(--gray-600)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 22px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld.span2{grid-column:span 2}
.fld > label{font-size:12.5px;color:#5d6e79;font-weight:500}
.fld .req{color:#d24b4b;margin-left:2px}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid #dfe6ea;border-radius:8px;padding:9px 12px;font-size:13.5px;color:var(--txt);background:#fff;font-family:inherit}
.fld input::placeholder,.fld textarea::placeholder{color:#b3bfc7}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--g-300);outline:0;box-shadow:0 0 0 3px rgba(158,203,110,.22)}
.fld textarea{resize:vertical;min-height:74px}
.fld .help{font-size:11.5px;color:#66757f}
.btn-g{background:var(--g-500);border:0;color:#fff;border-radius:9px;padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px}
.btn-g:hover{background:var(--g-700)}

.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.pager .info{font-size:13px;color:var(--sub)}
.pager .pages{display:flex;gap:4px;align-items:center}
.pager button{min-width:34px;height:34px;padding:0 9px;border:1px solid var(--line);background:var(--card);border-radius:8px;font-size:13px;color:var(--txt);cursor:pointer;font-family:inherit;font-variant-numeric:tabular-nums}
.pager button:hover:not(:disabled){background:#f3f6f8}
.pager button.on{background:var(--g-500);border-color:var(--g-500);color:#fff;font-weight:600}
.pager button:disabled{opacity:.4;cursor:default}
.pager .gap{color:#66757f;padding:0 2px}


/* topbar-nowrap 2026-09-19 */
.topbar{ gap:12px; }
.breadcrumb{ min-width:0; flex:0 1 auto; overflow:hidden; }
.breadcrumb strong{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-actions{ flex:0 0 auto; min-width:0; }
.app-row{ flex-wrap:nowrap; flex:0 0 auto; }
.app-row a{ white-space:nowrap; flex:0 0 auto; }
.today{ white-space:nowrap; }
.topbar .btn{ white-space:nowrap; }
@media (max-width:1180px){
  .app-row a span:not(.ic){ display:none; }
  .app-row a{ padding:6px 8px; }
}
@media (max-width:820px){
  #crumbGroup, .breadcrumb .slash{ display:none; }
}
@media (max-width:640px){
  .today{ display:none; }
}



/* kpi-fit 2026-09-19 */
.kpis{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
#p-hist .kpis,#p-sales .kpis,.an-kpis{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.kpi{position:relative;overflow:hidden}
.kpis .kpi>div{min-width:0;width:0;position:relative;z-index:1;flex:1 1 0}
.kspark{z-index:0}
.kpi .k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v{white-space:nowrap}
#ledger-root .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
#ledger-root .stat-card{min-width:0}
#ledger-root .stat-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ledger-root .stat-value{white-space:nowrap}



/* group-A responsive 2026-09-19 */
/* 채권/분석 섹션 제목 + 부제 */
#ledger-root .section-title h2,#ledger-root .rc-head h2,.rc-ct{flex-wrap:wrap;align-items:baseline;min-width:0}
.rc-sub{white-space:normal;min-width:0}
@media (max-width:900px){ .rc-sub{flex:1 1 100%;margin-top:3px} }
/* 도넛 범례 */
.rc-legend li{flex-wrap:wrap;row-gap:2px}
.rc-legend li>span:not(.dot):not(.sw){min-width:0;overflow:hidden;text-overflow:ellipsis}
.rc-donut,.an-donut{flex-wrap:wrap}
.rc-chart,.an-chart{min-width:0}
/* 첨부파일 메타 */
#ledger-root .sched-files,.bulk-panel .sched-files{flex-wrap:wrap}
#ledger-root .sf-meta,.bulk-panel .sf-meta{flex:0 1 auto;white-space:normal;min-width:0}
/* 폼 필드 / 액션 버튼줄 */
#ledger-root .lg-field{min-width:0}
#ledger-root .lo-actions,.bulk-panel .lo-actions{flex-wrap:wrap}
#ledger-root .po-gr>div{min-width:0}
/* 좁은 폭 KPI 패딩 */
@media (max-width:700px){
  .kpi{padding:13px 14px}
  #p-hist .kpi,#p-sales .kpi,#shipKpis .kpi{padding:13px 14px;gap:10px}
}
/* 상단바: 줌 환산 폭까지 포함 */
@media (max-width:760px){ .today{display:none} }
@media (max-width:700px){ #crumbGroup,.breadcrumb .slash{display:none} }



/* group-BCD responsive 2026-09-19 */
/* C군 — 입력요소 폭 강제 */
select,input[type=text],input[type=search],input[type=number],input[type=date],textarea{max-width:100%}
#hist-export-schedule,#export-schedule{max-width:100%;min-width:0}
#q,#newCustName{max-width:100%;min-width:0}
/* C군 — 캔버스 */
canvas{max-width:100%}
#chRcStatus,#chAnMix{max-width:100%;height:auto}
.rc-chart,.an-chart,.an-chart.sm,.mix-canvas{min-width:0;max-width:100%}
#an-rangebox{min-width:0;flex-wrap:wrap}
.card,.page,main,#costSection{min-width:0}
/* D군 — 고객사 막대 라벨 */
.cust-bar-row,.cust-bar-row.drill{min-width:0;max-width:100%;box-sizing:border-box}
.cust-bar-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cust-bar-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* B군 — 표 가로 스크롤 */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* B군 — 문서 전체 가로스크롤 차단 */
html,body{max-width:100%;overflow-x:hidden}
.app-main,.app-shell,.content{min-width:0;max-width:100%}



/* table-scroll 2026-09-19 */
/* 래퍼 없는 표 — 표 자체를 스크롤 컨테이너로 */
#purchase-root table.items2,#purchase-root table.recv,table.items2,table.recv,.detail-box table{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
}
table.items2>thead,table.recv>thead,
table.items2>tbody,table.recv>tbody,
.detail-box table>thead,.detail-box table>tbody{ display:table;width:100%;min-width:max-content }
/* 기존 래퍼 보강 */
.twrap,.card.flush.scroll{max-width:100%;min-width:0}



/* group-E container-query 2026-09-19 */
/* 고정폭 해제 — 우선순위 확보 */
#ledger-root .section-title h2{flex:0 1 auto !important;min-width:0}
#ledger-root .section-title h2 .rc-sub{white-space:normal}
#ledger-root .cust-bar-value{flex-shrink:1 !important;min-width:0;width:auto;max-width:130px}
#ledger-root .cust-bar-row{min-width:0;overflow:hidden}
.ch-legend{flex-wrap:wrap;min-width:0;row-gap:4px}
.rc-ct,.section-label{flex-wrap:wrap;min-width:0}
.filter-item,.rng-item{min-width:0}
#an-rangebox,.rangebox{min-width:0;max-width:100%}
.rc-legend li>span{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* 컨테이너 쿼리 — 줌과 무관하게 실제 폭 기준 */
.topbar{container-type:inline-size;container-name:topbar}
@container topbar (max-width:700px){ .today{display:none} }
@container topbar (max-width:560px){ #crumbGroup,.breadcrumb .slash{display:none} }
.kpis{container-type:inline-size;container-name:kpis}
@container kpis (max-width:340px){
  .kpi{padding:12px 13px;gap:9px}
  .kpi .kico{width:32px;height:32px;flex:0 0 32px;font-size:16px}
}