:root{
  --sales:#4d786d;--sales-2:#526f76;--target:#b58b48;--forecast:#746f7d;
  --growth:#829b55;--risk:#bc7064;--operations:#5f8972;--compare:#9aa49f;
  --sales-soft:#edf4f1;--target-soft:#f7f1e4;--forecast-soft:#f1eff3;
  --growth-soft:#f0f4e8;--risk-soft:#f8eeeb;--operations-soft:#edf4f0;
}
.kpis>.kpi,.semantic-kpis>.kpi{border:1px solid var(--line);border-top:3px solid var(--brand-2);box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpis>.kpi:before,.semantic-kpis>.kpi:before{content:none}
.semantic-legend{display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:9px}
.semantic-legend span{display:flex;align-items:center;gap:5px}.semantic-legend i{width:18px;height:3px;border-radius:3px;background:var(--swatch)}
.semantic-legend i.dashed{height:0;border-top:2px dashed var(--swatch);background:none}.semantic-legend i.band{height:9px;opacity:.22}
.viz-note{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:9px}.viz-note:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sales)}
.semantic-kpis .kpi:after{content:none;display:none}
.kpi-spark{position:absolute;right:12px;bottom:9px;width:72px;height:25px;opacity:.8}.kpi-spark polyline{fill:none;stroke:var(--sales);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sales-viz-grid{grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);margin-bottom:18px}.sales-area-panel{min-height:390px}.sales-area-chart{display:grid;grid-template-columns:35px 1fr;gap:9px;margin-top:20px}.sales-area-chart .axis-y{height:245px;display:flex;flex-direction:column;justify-content:space-between;text-align:right;color:#8b9992;font-size:8px}.sales-area-canvas{position:relative}.sales-area-canvas svg{width:100%;height:245px;display:block;overflow:visible}.sales-area-canvas .grid line{stroke:#e8eeea;stroke-width:1}.sales-area-canvas .area{fill:url(#salesAreaGradient);animation:fadeArea .5s ease both}.sales-area-canvas .actual-line{fill:none;stroke:var(--sales);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:800;stroke-dashoffset:800;animation:drawLine .75s ease forwards}.sales-area-canvas .peak{fill:var(--sales-2);stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 5px rgba(60,111,224,.35))}.sales-area-canvas .peak-guide{stroke:var(--target);stroke-width:1.5;stroke-dasharray:4 4}.sales-area-canvas .peak-label{fill:#244338;font-size:9px;font-weight:700}.sales-area-canvas .x-axis{display:grid;grid-template-columns:repeat(8,1fr);font-size:8px;color:#819088;margin-top:6px}.sales-area-canvas .x-axis span{text-align:center}
.rank-bars{display:grid;gap:11px;margin-top:17px}.rank-row{display:grid;grid-template-columns:18px 78px 1fr 60px;align-items:center;gap:8px}.rank-row>span{font-size:9px;color:var(--muted)}.rank-row strong{font-size:10px}.rank-track{height:14px;border-radius:9px;background:#eef3f5;overflow:hidden}.rank-track i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--sales),var(--sales-2));transform-origin:left;animation:growX .45s ease both}.rank-value{text-align:right}.rank-value b{display:block;font-size:10px}.rank-value small{font-size:8px;color:var(--operations)}.rank-value small.down{color:var(--risk)}
.store-pulse-grid{grid-template-columns:repeat(5,1fr);margin-bottom:18px}.store-pulse{padding:15px}.store-pulse header{display:flex;align-items:center;justify-content:space-between}.store-pulse header strong{font-size:11px}.store-pulse header span{font-size:8px;color:var(--operations);font-weight:700}.store-pulse header span.down{color:var(--risk)}.store-pulse>strong{display:block;margin-top:8px;font-size:18px}.store-pulse small{font-size:8px;color:var(--muted)}.store-pulse svg{display:block;width:100%;height:35px;margin-top:9px}.store-pulse polyline{fill:none;stroke:var(--sales);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.forecast-layout{grid-template-columns:minmax(0,1.55fr) minmax(280px,.55fr);margin-bottom:18px}.fan-panel{min-height:455px}.fan-chart{display:grid;grid-template-columns:42px 1fr;gap:9px;margin-top:18px}.fan-y{height:300px;display:flex;flex-direction:column;justify-content:space-between;text-align:right;color:#829087;font-size:8px}.fan-canvas svg{width:100%;height:300px;display:block;overflow:visible}.fan-canvas .grid line{stroke:#e6ece8;stroke-width:1}.fan-canvas .fan{fill:url(#fanGradient);animation:fadeArea .55s ease both}.fan-canvas .target-line{fill:none;stroke:var(--target);stroke-width:2.4;stroke-dasharray:7 5}.fan-canvas .actual-line{fill:none;stroke:var(--sales-2);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:drawLine .8s ease forwards}.fan-canvas .base-line{fill:none;stroke:var(--forecast);stroke-width:2.6;stroke-dasharray:6 4}.fan-canvas .today{stroke:#9aa6a0;stroke-width:1;stroke-dasharray:3 4}.fan-canvas text{font-size:9px;fill:#64756c}.fan-canvas .x-axis{display:grid;grid-template-columns:repeat(7,1fr);font-size:8px;color:#819088;margin-top:6px}.fan-canvas .x-axis span{text-align:center}
.scenario-stack-v2{display:grid;gap:10px;margin-top:16px}.scenario-v2{padding:14px;border:1px solid var(--line);border-radius:12px;background:#fafbfa}.scenario-v2.selected{background:var(--forecast-soft);border-color:#cfc3fa}.scenario-v2 header{display:flex;justify-content:space-between;align-items:center}.scenario-v2 span{font-size:9px;color:var(--muted)}.scenario-v2 strong{font-size:18px}.scenario-v2 small{display:block;margin-top:6px;color:var(--muted);font-size:8px}.scenario-v2 em{display:block;height:4px;margin-top:10px;border-radius:4px;background:var(--forecast);font-style:normal}
.bullet-grid{display:grid;gap:13px;margin-top:16px}.bullet-row{display:grid;grid-template-columns:82px 1fr 52px;gap:10px;align-items:center}.bullet-row>strong{font-size:10px}.bullet-track{position:relative;height:20px;background:linear-gradient(90deg,#f0f2f1 0 70%,#e5ede8 70% 90%,#dce8e1 90%);border-radius:5px}.bullet-track i{display:block;height:8px;position:absolute;top:6px;left:0;background:var(--sales-2);border-radius:4px;animation:growX .45s ease both;transform-origin:left}.bullet-track b{position:absolute;top:-3px;width:2px;height:26px;background:var(--target)}.bullet-track em{position:absolute;top:8px;height:4px;background:var(--forecast);border-radius:2px;opacity:.75}.bullet-row>span{text-align:right;font-size:10px;font-weight:700}.bullet-values{grid-column:2/4;display:flex;justify-content:space-between;margin-top:-7px;color:var(--muted);font-size:7px}
.inventory-viz-grid{grid-template-columns:minmax(0,1.4fr) minmax(330px,.6fr);margin-bottom:18px}.quadrant-panel{min-height:500px}.quadrant{display:grid;grid-template-columns:38px 1fr;gap:9px;margin-top:16px}.quadrant-y{height:355px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;color:var(--muted)}.quadrant-plot{height:355px;position:relative;border-left:1px solid #cfd9d3;border-bottom:1px solid #cfd9d3;background:linear-gradient(90deg,rgba(154,203,50,.10) 0 50%,rgba(53,163,111,.10) 50%),linear-gradient(0deg,rgba(233,104,91,.11) 0 50%,transparent 50%)}.quadrant-plot:before,.quadrant-plot:after{content:"";position:absolute;background:#cfd9d3}.quadrant-plot:before{left:50%;top:0;bottom:0;width:1px}.quadrant-plot:after{left:0;right:0;top:50%;height:1px}.quadrant-label{position:absolute;font-size:8px;font-weight:700;padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.88);color:#53655b}.quadrant-label.q1{left:10px;top:10px}.quadrant-label.q2{right:10px;top:10px}.quadrant-label.q3{left:10px;bottom:10px}.quadrant-label.q4{right:10px;bottom:10px;color:#a84237}.sku-bubble{position:absolute;left:var(--x);bottom:var(--y);width:var(--size);height:var(--size);transform:translate(-50%,50%);border:2px solid #fff;border-radius:50%;display:grid;place-items:center;background:var(--operations);color:#fff;font-size:8px;font-weight:700;box-shadow:0 5px 14px rgba(31,68,50,.18);animation:bubbleIn .45s cubic-bezier(.2,.8,.2,1) both;cursor:default}.sku-bubble.risk{background:var(--risk);animation:bubbleIn .45s cubic-bezier(.2,.8,.2,1) both,pulseRisk 2.4s ease-in-out infinite}.sku-bubble.over{background:var(--target);color:#593d00}.quadrant-x{text-align:center;color:var(--muted);font-size:9px;margin-top:9px}.risk-heatmap{display:grid;grid-template-columns:76px repeat(5,1fr);gap:5px;margin-top:17px}.risk-heatmap div{min-height:39px;border-radius:7px;display:grid;place-items:center;font-size:8px;background:#f1f4f2}.risk-heatmap .head,.risk-heatmap .row{background:transparent;color:var(--muted);font-weight:600}.risk-heatmap .row{justify-content:start}.risk-heatmap .safe{background:var(--operations-soft);color:#19704a}.risk-heatmap .watch{background:var(--target-soft);color:#8a6100}.risk-heatmap .danger{background:var(--risk-soft);color:#b3483d;font-weight:700}.inventory-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:17px}.inventory-summary div{padding:12px;border-radius:10px;background:#f6f8f7}.inventory-summary span{display:block;font-size:8px;color:var(--muted)}.inventory-summary strong{font-size:16px}
.profit-viz-grid{grid-template-columns:minmax(0,1.2fr) minmax(390px,.8fr);margin-bottom:18px}.waterfall-chart{display:grid;grid-template-columns:38px 1fr;gap:8px;margin-top:18px}.waterfall-y{height:310px;display:flex;flex-direction:column;justify-content:space-between;text-align:right;color:var(--muted);font-size:8px}.waterfall-canvas{height:310px;display:flex;align-items:flex-end;gap:9px;border-bottom:1px solid #d8e1dc;background:repeating-linear-gradient(to bottom,transparent 0,transparent 61px,#edf1ee 62px);padding:0 10px}.waterfall-col{height:100%;flex:1;position:relative}.waterfall-col i{position:absolute;left:8%;right:8%;bottom:var(--bottom);height:var(--height);background:var(--sales-2);border-radius:6px 6px 2px 2px;transform-origin:bottom;animation:growY .55s ease both}.waterfall-col.cost i{background:var(--risk)}.waterfall-col.end i{background:var(--operations)}.waterfall-col b{position:absolute;bottom:calc(var(--bottom) + var(--height) + 6px);left:0;right:0;text-align:center;font-size:9px}.waterfall-col span{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center;font-size:8px;color:var(--muted)}.waterfall-foot{margin:34px 0 0 46px;font-size:8px;color:var(--muted)}
.bubble-chart{height:350px;position:relative;margin:18px 12px 28px 36px;border-left:1px solid #cfd9d3;border-bottom:1px solid #cfd9d3;background:repeating-linear-gradient(to top,transparent 0,transparent 69px,#edf1ee 70px)}.bubble-chart:before{content:"전사 평균 47.6%";position:absolute;left:0;right:0;bottom:45%;border-top:1px dashed var(--target);color:#8a6100;font-size:8px;padding-top:5px}.profit-bubble{position:absolute;left:var(--x);bottom:var(--y);width:var(--size);height:var(--size);transform:translate(-50%,50%);border-radius:50%;display:grid;place-items:center;text-align:center;background:rgba(22,135,167,.82);border:2px solid #fff;color:#fff;box-shadow:0 5px 15px rgba(22,135,167,.2);animation:bubbleIn .45s ease both;cursor:default}.profit-bubble.low{background:rgba(233,104,91,.86)}.profit-bubble.high{background:rgba(53,163,111,.86)}.profit-bubble strong{font-size:8px;line-height:1.15}.profit-bubble small{font-size:7px}.bubble-axis-y{position:absolute;left:-32px;top:50%;transform:rotate(-90deg) translateX(-50%);transform-origin:left;color:var(--muted);font-size:8px;white-space:nowrap}.bubble-axis-x{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);color:var(--muted);font-size:8px;white-space:nowrap}
.discount-curve{display:grid;grid-template-columns:34px 1fr;gap:8px;margin-top:18px}.discount-curve .curve-y{height:190px;display:flex;flex-direction:column;justify-content:space-between;text-align:right;color:var(--muted);font-size:7px}.discount-curve svg{width:100%;height:190px;display:block}.discount-curve .grid line{stroke:#e7ece9}.discount-curve .margin{fill:none;stroke:var(--operations);stroke-width:3}.discount-curve .return{fill:none;stroke:var(--risk);stroke-width:3;stroke-dasharray:5 4}.discount-curve circle{stroke:#fff;stroke-width:2}.discount-x{display:grid;grid-template-columns:repeat(4,1fr);font-size:8px;color:var(--muted)}.discount-x span{text-align:center}
.card,.kpi,.panel{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.card:hover{border-color:#c8d7cf;box-shadow:0 16px 38px rgba(18,44,31,.09)}
.rank-bars:has(.rank-row:hover) .rank-row:not(:hover),.bullet-grid:has(.bullet-row:hover) .bullet-row:not(:hover){opacity:.36}.rank-row,.bullet-row{transition:opacity .18s ease}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes drawLine{to{stroke-dashoffset:0}}@keyframes fadeArea{from{opacity:0}to{opacity:1}}@keyframes bubbleIn{from{opacity:0;transform:translate(-50%,50%) scale(.45)}to{opacity:1;transform:translate(-50%,50%) scale(1)}}@keyframes pulseRisk{0%,100%{box-shadow:0 0 0 0 rgba(233,104,91,.25)}50%{box-shadow:0 0 0 8px rgba(233,104,91,0)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:1100px){.sales-viz-grid,.forecast-layout,.inventory-viz-grid,.profit-viz-grid{grid-template-columns:1fr}.store-pulse-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.store-pulse-grid{grid-template-columns:1fr 1fr}.rank-row{grid-template-columns:16px 66px 1fr 48px}.quadrant-plot{height:300px}.waterfall-canvas{gap:3px}.waterfall-col span{font-size:7px;white-space:normal}.profit-bubble{--size:44px!important}.semantic-legend{gap:8px}}
.sales-area-chart>.axis-y{position:static;inset:auto;transform:none;width:auto}
.sales-area-canvas stop{stop-color:var(--sales)}
.fan-canvas stop{stop-color:var(--forecast)}
.sales-area-canvas .peak{filter:drop-shadow(0 0 4px rgba(82,111,118,.24))}
.quadrant-plot{background:linear-gradient(90deg,rgba(130,155,85,.07) 0 50%,rgba(95,137,114,.07) 50%),linear-gradient(0deg,rgba(188,112,100,.08) 0 50%,transparent 50%)}
.profit-bubble{background:rgba(77,120,109,.86);box-shadow:0 5px 15px rgba(38,77,61,.14)}
.profit-bubble.low{background:rgba(188,112,100,.88)}
.profit-bubble.high{background:rgba(95,137,114,.90)}
@keyframes pulseRisk{0%,100%{box-shadow:0 0 0 0 rgba(188,112,100,.16)}50%{box-shadow:0 0 0 6px rgba(188,112,100,0)}}