/* v1.3.241 — 승인 실마진 시안 전용. 기존 업무코어/입력 기능과 분리한다. */
html.vn .margin-approved-page{display:grid;gap:14px;margin-bottom:14px}
html.vn .margin-approved-title{margin-bottom:0}
html.vn .margin-approved-title h1{display:flex;align-items:center;gap:10px}
html.vn .margin-info{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#dce8fb;color:#5b7eb2;font-size:13px;font-weight:800}
html.vn .margin-approved-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
html.vn .margin-kpi{position:relative;min-height:96px;padding:16px 18px;border:1px solid #dfe6ef;border-radius:10px;background:#fff;box-shadow:0 2px 10px rgba(17,38,71,.035);overflow:hidden}
html.vn .margin-kpi small{display:block;color:#667085;font-weight:700;font-size:13px;margin-bottom:7px}
html.vn .margin-kpi strong{display:block;color:#13203a;font-size:23px;letter-spacing:-.035em;line-height:1.15}
html.vn .margin-kpi em{display:block;margin-top:8px;font-style:normal;font-size:12px;font-weight:700}
html.vn .margin-kpi.sales em,html.vn .margin-kpi.cost em{color:#d64545}
html.vn .margin-kpi.profit em,html.vn .margin-kpi.perl em{color:#169b58}
html.vn .margin-kpi-icon{position:absolute;right:16px;top:14px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:900;background:#eef5ff;color:#2f80ed}
html.vn .margin-kpi.cost .margin-kpi-icon{background:#fff1f1;color:#ef6464}
html.vn .margin-kpi.profit .margin-kpi-icon{background:#ecfbf2;color:#13a05a}
html.vn .margin-kpi.perl .margin-kpi-icon{background:#f4efff;color:#8f68d9}
html.vn .margin-approved-filter{display:grid!important;grid-template-columns:150px minmax(250px,1.35fr) 170px 145px 170px 78px 78px;gap:8px;align-items:end;padding:12px!important;background:#fff;border:1px solid #dfe6ef;border-radius:10px}
html.vn .margin-approved-filter label{min-width:0;margin:0!important;font-size:12px;color:#475467;font-weight:700}
html.vn .margin-approved-filter select,html.vn .margin-approved-filter input{width:100%;min-width:0;height:38px}
html.vn .margin-approved-filter .cost-filter-range{display:grid;grid-template-columns:1fr 18px 1fr;gap:5px;align-items:center}
html.vn .margin-approved-filter .cost-filter-range>span:not(.sr-only){text-align:center;color:#98a2b3}
html.vn .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
html.vn .margin-approved-switchrow{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}
html.vn .margin-approved-tabs,html.vn .margin-approved-basis{display:flex;gap:6px;flex-wrap:wrap}
html.vn .margin-approved-tabs button,html.vn .margin-approved-basis button{height:36px;border:1px solid #d9e2ee;background:#fff;color:#42526a;border-radius:7px;padding:0 18px;font-weight:700}
html.vn .margin-approved-tabs button.active,html.vn .margin-approved-basis button.active{background:#1f76dc;border-color:#1f76dc;color:#fff}
html.vn .margin-approved-message{min-height:0;margin:0;padding:0;border:0;background:transparent;font-size:12px;color:#667085}
html.vn .margin-approved-grid{display:grid;gap:12px}
html.vn .margin-chart-grid{grid-template-columns:1.55fr 1fr}
html.vn .margin-table-grid{grid-template-columns:1.25fr 1fr}
html.vn .margin-detail-grid{grid-template-columns:1.7fr .85fr}
html.vn .margin-approved-card{min-width:0;border:1px solid #dfe6ef;border-radius:10px;background:#fff;box-shadow:0 2px 10px rgba(17,38,71,.035);padding:13px 14px}
html.vn .margin-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
html.vn .margin-card-head h2{margin:0;color:#17233c;font-size:17px;letter-spacing:-.025em}
html.vn .margin-card-head span{font-size:11px;color:#667085}
html.vn .margin-chart{height:205px;min-height:205px;overflow:hidden}
html.vn .margin-chart svg{display:block;width:100%;height:100%}
html.vn .margin-chart .chart-empty{display:grid;place-items:center;height:100%;color:#98a2b3;font-size:13px}
html.vn .margin-svg-grid{stroke:#e8edf4;stroke-width:1}
html.vn .margin-svg-sales{fill:none;stroke:#3b82f6;stroke-width:2.5}
html.vn .margin-svg-cost{fill:none;stroke:#ef6464;stroke-width:2.5}
html.vn .margin-svg-profit{fill:none;stroke:#18a665;stroke-width:2.8}
html.vn .margin-svg-label{fill:#7a879b;font-size:10px}
html.vn .margin-legend{display:flex;gap:13px;justify-content:flex-end;margin:0 3px 5px;font-size:11px;color:#667085}
html.vn .margin-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
html.vn .margin-legend .s i{background:#3b82f6}.margin-legend .c i{background:#ef6464}.margin-legend .p i{background:#18a665}
html.vn .margin-fuel-bars{height:100%;display:flex;align-items:flex-end;gap:16px;padding:12px 10px 22px;border-left:1px solid #e7ecf2;border-bottom:1px solid #e7ecf2}
html.vn .margin-fuel-group{flex:1;min-width:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;align-items:end;height:145px;position:relative}
html.vn .margin-fuel-group i{display:block;border-radius:3px 3px 0 0;min-height:1px}
html.vn .margin-fuel-group .s{background:#3b82f6}.margin-fuel-group .c{background:#ef6464}.margin-fuel-group .p{background:#18a665}
html.vn .margin-fuel-group b{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);font-size:10px;white-space:nowrap;color:#5b6677;font-weight:700}
html.vn .margin-table-scroll{overflow:auto;max-width:100%}
html.vn .margin-approved-table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}
html.vn .margin-approved-table th,html.vn .margin-approved-table td{border:1px solid #dce4ee;padding:7px 8px;text-align:right}
html.vn .margin-approved-table th{background:#f7f9fc;color:#4c5b72;font-weight:800;text-align:center;position:sticky;top:0;z-index:1}
html.vn .margin-approved-table td:first-child{text-align:left}
html.vn .margin-approved-table tr.total td{background:#f8fafc;font-weight:800}
html.vn .margin-approved-table .sales{color:#2877df;font-weight:700}
html.vn .margin-approved-table .cost{color:#e25555;font-weight:700}
html.vn .margin-approved-table .profit{color:#13985a;font-weight:800}
html.vn .margin-approved-table .bad{color:#d13a3a!important}
html.vn .margin-station-compare{display:grid;gap:11px;padding:4px 2px}
html.vn .margin-station-row{display:grid;grid-template-columns:105px 1fr;gap:9px;align-items:center}
html.vn .margin-station-row>strong{font-size:12px;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.vn .margin-station-bars{display:grid;gap:3px}
html.vn .margin-station-bar{height:13px;border-radius:3px;position:relative;min-width:1px}
html.vn .margin-station-bar.sales{background:#3b82f6}.margin-station-bar.cost{background:#ef6464}.margin-station-bar.profit{background:#18a665}
html.vn .margin-station-bar span{position:absolute;left:calc(100% + 5px);top:-2px;font-size:10px;color:#5e6a7b;white-space:nowrap}
html.vn .margin-previous-compare{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
html.vn .margin-previous-compare article{padding:12px;border:1px solid #e0e7f0;border-radius:8px;background:#fbfcfe}
html.vn .margin-previous-compare small{display:block;color:#667085}.margin-previous-compare strong{display:block;margin-top:5px;font-size:18px;color:#1d2939}.margin-previous-compare em{font-style:normal;font-size:12px;font-weight:700}
html.vn .margin-cost-editor{margin:16px 0 24px;border:1px solid #dfe6ef;border-radius:10px;background:#fff}
html.vn .margin-cost-editor>summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:800;color:#344054;display:flex;align-items:center;justify-content:space-between}
html.vn .margin-cost-editor>summary::-webkit-details-marker{display:none}
html.vn .margin-cost-editor>summary:after{content:'▼';font-size:11px;color:#667085}
html.vn .margin-cost-editor[open]>summary:after{content:'▲'}
html.vn .margin-cost-editor>summary small{margin-left:auto;margin-right:12px;font-weight:500;color:#98a2b3}
html.vn .margin-cost-editor-body{padding:0 12px 14px}
html.vn .margin-cost-editor-body>#profitDownloadCalculator{margin:0 0 10px}
html.vn .margin-approved-page:not([data-tab="ALL"]) [data-margin-block]{display:none}  /* v1.3.269 — 예전 선택자는 아래 표시 규칙보다 우선해서 하위 탭 5개가 전부 빈 화면이었다 */
html.vn .margin-approved-page[data-tab="FUEL"] [data-margin-block="FUEL"],
html.vn .margin-approved-page[data-tab="SUPPLIER"] [data-margin-block="SUPPLIER"],
html.vn .margin-approved-page[data-tab="DAILY"] [data-margin-block="DAILY"],
html.vn .margin-approved-page[data-tab="STATION"] [data-margin-block="STATION"],
html.vn .margin-approved-page[data-tab="COMPARE"] [data-margin-block="COMPARE"]{display:block}
html.vn .margin-approved-page[data-tab="FUEL"] .margin-chart-grid,html.vn .margin-approved-page[data-tab="FUEL"] .margin-table-grid,
html.vn .margin-approved-page[data-tab="DAILY"] .margin-chart-grid,html.vn .margin-approved-page[data-tab="DAILY"] .margin-detail-grid{display:block}
html.vn .margin-approved-page[data-tab="FUEL"] [data-margin-block="FUEL"]+ [data-margin-block]{margin-top:12px}
@media(max-width:1280px){
 html.vn .margin-approved-filter{grid-template-columns:repeat(4,minmax(140px,1fr))}
 html.vn .margin-approved-filter .cost-filter-range{grid-column:span 2}
 html.vn .margin-chart-grid,html.vn .margin-table-grid,html.vn .margin-detail-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
 html.vn .margin-approved-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 html.vn .margin-approved-filter{grid-template-columns:1fr 1fr}
 html.vn .margin-approved-filter .cost-filter-range{grid-column:1/-1}
 html.vn .margin-approved-switchrow{align-items:flex-start}.margin-approved-tabs,.margin-approved-basis{overflow-x:auto;flex-wrap:nowrap;max-width:100%;padding-bottom:3px}
 html.vn .margin-approved-tabs button,html.vn .margin-approved-basis button{white-space:nowrap;padding:0 12px}
 html.vn .margin-previous-compare{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
 html.vn .margin-approved-kpis{grid-template-columns:1fr 1fr;gap:8px}
 html.vn .margin-kpi{min-height:82px;padding:12px}.margin-kpi strong{font-size:18px!important}.margin-kpi-icon{display:none!important}
 html.vn .margin-approved-filter{grid-template-columns:1fr}.margin-approved-filter .cost-filter-range{grid-column:auto}
 html.vn .margin-approved-card{padding:10px}.margin-chart{height:180px!important;min-height:180px!important}
 html.vn .margin-previous-compare{grid-template-columns:1fr}
}
/* v1.3.269 — 폰: 유종별 막대(6묶음)가 카드 폭을 넘어 오른쪽이 잘렸다 */
@media(max-width:600px){
 html.vn .margin-fuel-bars{gap:5px;padding:12px 4px 22px}
 html.vn .margin-fuel-group{min-width:0;gap:2px}
 html.vn .margin-fuel-group b{font-size:9px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
/* v1.3.269 — 유종별 막대 아래 유종 이름이 칸 밖으로 밀려 잘려서 어느 막대가 무슨 유종인지 알 수 없었다 */
html.vn #marginFuelChart{display:flex;flex-direction:column;height:250px!important;min-height:250px!important}
html.vn #marginFuelChart .margin-fuel-bars{flex:1;height:auto;min-height:0;box-sizing:border-box}
html.vn #marginFuelChart .margin-fuel-group{height:100%;max-height:160px}
/* v1.3.269 — 하위 탭을 누르면 표가 칸을 밀어 페이지가 옆으로 646px 까지 넓어졌다(폰 390px 에서 오른쪽이 잘림). 한 칸 폭을 화면 폭에 묶는다 */
html.vn .margin-approved-page{grid-template-columns:minmax(0,1fr)}
html.vn .margin-approved-page>*{min-width:0}

/* v1.3.270 — 폰·태블릿 터치: 입력칸·선택칸·저장/정정 단추가 25~30px 라 손가락으로 누르기 어려웠다(높이만 키움, 가로폭은 그대로).
   public/final-vnext.css 의 '.fuel-margin-table input,select{height:27~30px!important}' 를 이기려면 !important 와 더 구체적인 선택자가 필요하다 */
@media (max-width:820px){
  html body .fuel-margin-table input:not([type="checkbox"]):not([type="radio"]),
  html body .fuel-margin-table select{height:40px!important;min-height:40px!important;box-sizing:border-box}
  html body .fuel-margin-table button.fuel-margin-fee-save,
  html body .fuel-margin-table button.fuel-margin-correct{height:40px!important;min-height:40px!important;min-width:48px}
  html body .fuel-margin-advanced>summary,
  html body .fuel-margin-table .fuel-margin-row-advanced>summary{min-height:38px!important;display:inline-flex;align-items:center}
}

/* v1.3.273 — 전월 대비 글자색: 좋아짐 초록 · 나빠짐 빨강 · 변화없음/기준없음 회색 */
html.vn article.margin-kpi em.good{color:#169b58}
html.vn article.margin-kpi em.bad{color:#d64545}
html.vn article.margin-kpi em.flat{color:#64748b}

/* v1.3.275 — 실마진 PC: 오른쪽 카드('주유소별 실마진 비교' 등)가 왼쪽 표 높이만큼 늘어나 1700px 짜리 빈 흰 칸이 됐다 → 카드는 자기 내용 높이만 */
html.vn .margin-approved-grid{align-items:start}