:root {
  --green:#123d2f;
  --green-2:#1d5944;
  --green-soft:#edf5f0;
  --gold:#b88e4f;
  --ivory:#f7f4ee;
  --white:#fff;
  --line:#e2ded5;
  --line-soft:#efece5;
  --text:#18271f;
  --muted:#66736c;
  --warn:#a85e18;
  --warn-bg:#fff5e7;
  --danger:#a33131;
  --danger-bg:#fff0ef;
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 12px 32px rgba(28,48,38,.07);
  --font:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--ivory);color:var(--text);font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:inherit}
button,input,select{font:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid rgba(184,142,79,.45);outline-offset:2px}

.demo-bar{background:var(--warn-bg);border-bottom:1px solid #efd9ba;color:var(--warn);font-size:12.5px;padding:8px 16px;text-align:center;font-weight:650}
.shell{display:flex;min-height:100vh}
.side{width:232px;flex:0 0 232px;background:var(--green);color:#dce8e1;padding:22px 14px;display:flex;flex-direction:column;gap:4px}
.side .brand{font-size:22px;font-weight:800;color:#fff;padding:4px 10px 20px;letter-spacing:-.5px}
.side .brand span{color:#d6b16f}
.side a{display:flex;align-items:center;padding:11px 12px;border-radius:10px;text-decoration:none;font-size:14px;min-height:44px}
.side a[aria-current="page"]{background:rgba(255,255,255,.13);color:#fff;font-weight:700}
.side a:hover{background:rgba(255,255,255,.08)}
.side .spacer{flex:1}
.side .foot{font-size:12px;color:#a7bdb2;padding:10px 12px;line-height:1.6}
.side .foot a{display:inline;padding:0;min-height:0;text-decoration:underline}

.main{flex:1;min-width:0;max-width:1320px;padding:30px 36px 80px;margin:0 auto}
.page-head{margin-bottom:22px}
.page-head h1{font-size:27px;margin:0 0 4px;letter-spacing:-.7px}
.page-head p{margin:0;color:var(--muted);font-size:14px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:0 2px 8px rgba(28,48,38,.02)}
.card+.card{margin-top:16px}
.card h2{font-size:16px;margin:0 0 14px;letter-spacing:-.3px}
.card h2 .sub{font-weight:400;color:var(--muted);font-size:12.5px;margin-left:7px}
.grid{display:grid;gap:14px}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}

.metric{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;min-width:0}
.metric .label{font-size:13px;color:var(--muted)}
.metric .value{font-size:29px;font-weight:800;letter-spacing:-1px;margin:8px 0 3px;white-space:nowrap}
.metric .delta{font-size:12px;color:var(--muted)}
.metric.lead{background:var(--green);border-color:var(--green);color:#fff;box-shadow:var(--shadow)}
.metric.lead .label,.metric.lead .delta{color:#bfd1c8}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line-soft)}
th{font-size:12.5px;color:var(--muted);font-weight:650}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

.badge{display:inline-block;font-size:11.5px;padding:3px 9px;border-radius:999px;font-weight:700;white-space:nowrap}
.badge.adjust{background:var(--warn-bg);color:var(--warn)}
.badge.keep{background:var(--green-soft);color:var(--green-2)}
.badge.observe,.badge.pilot{background:#f0efec;color:#6c675f}

button,.btn{display:inline-flex;align-items:center;justify-content:center;font-size:14px;min-height:44px;padding:10px 17px;border-radius:10px;cursor:pointer;border:1px solid var(--line);background:var(--white);color:var(--text);text-decoration:none}
button:hover,.btn:hover{border-color:#c8bdad}
.btn-primary,button.primary{background:var(--green);color:#fff;border-color:var(--green);font-weight:700}
.btn-primary:hover,button.primary:hover{background:var(--green-2)}
button.selected,button[aria-pressed="true"]{background:var(--green);color:#fff;border-color:var(--green)}
button:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

input,select{font-size:15px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);width:100%}
input:focus,select:focus{outline:2px solid var(--green);outline-offset:1px}
input.qty{text-align:center;font-variant-numeric:tabular-nums;padding:8px 4px}
label.field{display:block;margin-bottom:12px}
label.field>span{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.note{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.65}
.alert{border-radius:var(--radius);padding:11px 14px;font-size:13.5px;margin-bottom:14px}
.alert.ok{background:var(--green-soft);color:var(--green-2);border:1px solid #d3e3da}
.alert.warn{background:var(--warn-bg);color:var(--warn);border:1px solid #efd9ba}
.alert.err{background:var(--danger-bg);color:var(--danger);border:1px solid #f0d4d1}
.placeholder{border:1px dashed #cfc5b7;border-radius:var(--radius);padding:22px;text-align:center;color:var(--muted);font-size:13.5px}

.flow-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.flow-line span{background:var(--green-soft);color:var(--green);padding:8px 11px;border-radius:9px;font-size:13px;font-weight:700}
.flow-line b{color:#b5aaa0}

/* 마감 기록 */
.record-date-card{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px;padding:14px 18px}
.record-date-card .field{margin:0;max-width:250px;flex:1}
.record-date-card .sub{font-size:12.5px;color:var(--muted);padding-bottom:10px}
.record-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.record-product{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:17px;transition:border-color .15s,background .15s}
.record-product.invalid{border-color:#d99590;background:var(--danger-bg)}
.record-product-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.record-product-head>div{display:flex;flex-direction:column}
.record-product-head strong{font-size:16px;letter-spacing:-.3px}
.record-product-head span{font-size:11.5px;color:var(--muted)}
.soldout-check{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.soldout-check input{width:19px;height:19px;min-height:19px;margin:0}
.record-input-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.record-input-grid label span{display:block;text-align:center;font-size:12px;color:var(--muted);margin-bottom:4px}
.record-input-grid input{text-align:center;font-size:18px;font-weight:750;font-variant-numeric:tabular-nums;padding:8px 4px}
.record-calculated{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line-soft);margin-top:13px;padding-top:11px;color:var(--muted);font-size:12.5px}
.record-calculated b{color:var(--green)}
.record-guide{margin-top:14px;padding:15px 18px}
.record-guide p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.record-summary-bar{position:sticky;bottom:18px;z-index:8;margin-top:16px;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:0 14px 40px rgba(18,61,47,.16);display:flex;align-items:center;justify-content:space-between;gap:16px}
.record-summary-bar>div:first-child{display:flex;flex-direction:column}
.record-summary-bar span{font-size:11.5px;color:var(--muted)}
.record-summary-bar strong{font-size:24px;letter-spacing:-.8px;color:var(--green)}
.record-summary-bar small{font-size:11.5px;color:var(--muted)}
.record-actions{display:flex;gap:8px}

/* 저장 완료 */
.saved-main{max-width:760px;text-align:center}
.save-check{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-size:40px;font-weight:800;margin:20px auto 14px}
.saved-head{text-align:center}
.saved-cost-card{padding:26px}
.saved-cost-card>span{font-size:13px;color:var(--muted)}
.saved-cost-card>strong{display:block;font-size:38px;color:var(--green);letter-spacing:-1.5px;margin:6px 0}
.saved-cost-card p{margin:0;color:var(--muted)}
.saved-metrics{margin:14px 0;text-align:left}
.saved-main .card .btn-row{justify-content:center;margin-top:14px}

/* 리포트 */
.report-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:16px}
.report-layout .card+.card{margin-top:0}
.cause-list{display:flex;flex-direction:column}
.cause-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.cause-row:last-child{border-bottom:0}
.cause-row>b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-size:12px}
.cause-row>div{display:flex;flex-direction:column;min-width:0}
.cause-row strong{font-size:13.5px}
.cause-row span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cause-row em{font-size:12.5px;font-style:normal;font-weight:700;color:var(--green);white-space:nowrap}
.bar-chart{height:180px;display:flex;gap:8px;align-items:flex-end;padding-top:20px}
.bar-item{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px}
.bar-item span{font-size:10.5px;color:var(--muted)}
.bar-item i{width:100%;max-width:34px;background:#cbded4;border-radius:7px 7px 2px 2px;min-height:5px}
.bar-item i.peak{background:var(--green)}
.bar-item b{font-size:12px;color:var(--muted)}
.suggestion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.suggestion-card{border:1px solid var(--line);border-radius:var(--radius);padding:15px;min-width:0}
.suggestion-rank{font-size:11px;color:var(--gold);font-weight:800;text-transform:uppercase}
.suggestion-card h3{font-size:15px;margin:4px 0 8px}
.suggestion-qty{display:flex;align-items:center;gap:9px;margin:6px 0}
.suggestion-qty span{color:var(--muted);font-size:18px;text-decoration:line-through}
.suggestion-qty b{color:#b8afa3}
.suggestion-qty strong{font-size:25px;color:var(--green)}
.suggestion-card p{font-size:12.5px;margin:7px 0;color:var(--text)}
.suggestion-card small{display:block;color:var(--muted);line-height:1.5}
.suggestion-actions{margin-top:12px}
.suggestion-actions button{flex:1;padding:8px;font-size:12.5px}
.response-state{font-size:12px;color:var(--green);font-weight:700;margin-top:9px}
.reason-box{background:var(--ivory);border-radius:10px;padding:10px;margin-top:9px}
.reason-box>span{font-size:11.5px;color:var(--muted)}
.reason-box button{font-size:11.5px;min-height:36px;padding:7px 9px;margin-top:5px}
.outcome-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.outcome-card{border:1px solid var(--line);border-radius:var(--radius);padding:15px}
.outcome-head{display:flex;justify-content:space-between;gap:8px;align-items:center}
.outcome-head h3{font-size:14.5px;margin:0}
.outcome-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:14px 0}
.outcome-compare>div{display:flex;flex-direction:column;background:var(--ivory);border-radius:10px;padding:10px}
.outcome-compare span{font-size:10.5px;color:var(--muted)}
.outcome-compare strong{font-size:17px;margin-top:2px}
.outcome-compare>b{color:#afa69b}
.outcome-card>p{margin:0;font-size:12px;color:var(--muted)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1000px){
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .record-products{grid-template-columns:1fr}
  .report-layout{grid-template-columns:1fr}
  .suggestion-grid{grid-template-columns:1fr}
}

@media(max-width:760px){
  body{background:#faf8f4}
  .demo-bar{padding:6px 10px;font-size:11px}
  .shell{display:block;min-height:100vh}
  .side{position:fixed;z-index:30;left:0;right:0;bottom:0;width:auto;height:66px;background:rgba(18,61,47,.98);backdrop-filter:blur(12px);display:grid;grid-template-columns:repeat(5,1fr);padding:6px 5px env(safe-area-inset-bottom);gap:2px;box-shadow:0 -8px 24px rgba(18,61,47,.14)}
  .side .brand,.side .spacer,.side .foot{display:none}
  .side a{min-width:0;min-height:52px;padding:5px 2px;justify-content:center;text-align:center;font-size:10.5px;line-height:1.2;border-radius:8px;color:#bed0c6}
  .side a[aria-current="page"]{background:rgba(255,255,255,.13);color:#fff}
  .main{padding:18px 15px 105px;max-width:none}
  .page-head{margin-bottom:16px}
  .page-head h1{font-size:23px}
  .page-head p{font-size:12.5px}
  .card{padding:16px;border-radius:16px}
  .grid.g4,.grid.g3,.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .metric{padding:14px;border-radius:15px}
  .metric .label{font-size:11.5px}
  .metric .value{font-size:23px}
  .metric .delta{font-size:10.5px}
  .flow-line{gap:5px}
  .flow-line span{font-size:11px;padding:6px 8px}
  .flow-line b{font-size:11px}
  .record-date-card{padding:12px 14px;align-items:center}
  .record-date-card .field{max-width:190px}
  .record-date-card .sub{font-size:10.5px;padding:0}
  .record-product{padding:15px;border-radius:16px}
  .record-product-head{margin-bottom:12px}
  .record-input-grid input{font-size:20px;min-height:49px}
  .record-summary-bar{bottom:72px;margin-left:-3px;margin-right:-3px;padding:12px;border-radius:16px}
  .record-summary-bar strong{font-size:21px}
  .record-summary-bar small{display:none}
  .record-actions button{padding:8px 10px;font-size:12px;min-height:42px}
  .report-layout{gap:12px}
  .trend-card{margin-top:0!important}
  .outcome-grid{grid-template-columns:1fr}
  .cause-row{grid-template-columns:27px minmax(0,1fr) auto}
  .cause-row span{white-space:normal}
  .outcome-compare strong{font-size:15px}
}

@media(max-width:390px){
  .main{padding-left:12px;padding-right:12px}
  .record-input-grid{gap:6px}
  .record-input-grid label span{font-size:11px}
  .record-actions{gap:5px}
  .record-actions button{padding:7px 8px}
}