
/* 2026-10-23 매출 패널 리모델링 (pf-v2): 추이 선그래프 + 채널 구성 도넛 */
.pf-v2 .pf-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pf-v2 .pf-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:4px 0 14px}
.pf-v2 .pf-controls .sales-unit-toggle{margin:0}
.pf-v2 .pf-controls .monthly-range-note{margin:0;font-size:11px;color:#94a3b8;flex-basis:100%;text-align:right}
.pf-v2 .pf-kpis{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:12px;margin:0 0 16px}
.pf-v2 .pf-kpi{display:flex;flex-direction:column;gap:3px;min-width:0;padding:14px 16px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
.pf-v2 .pf-kpi-combined{background:linear-gradient(135deg,#fff7ed,#fff);border-color:#fed7aa}
.pf-v2 .pf-kpi>span{font-size:12px;color:#64748b;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-v2 .pf-kpi>strong{font-size:clamp(19px,2vw,26px);line-height:1.25;color:#1e293b;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.pf-v2 .pf-kpi>small{font-size:12px;font-weight:700;white-space:nowrap}
.pf-v2 .pf-kpi .change-up{color:#15803d}.pf-v2 .pf-kpi .change-down{color:#c2413b}
.pf-v2 .pf-kpi .change-flat,.pf-v2 .pf-kpi .change-zero-base,.pf-v2 .pf-kpi .change-incomplete{color:#64748b}
.pf-v2 .pf-kpi>em{font-style:normal;font-size:11px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-v2 .pf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,300px);gap:16px;align-items:stretch}
.pf-v2 .pf-trend{min-width:0;padding:14px 16px 12px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
.pf-v2 .pf-trend-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pf-v2 h3{margin:0;font-size:13px;font-weight:700;color:#1e293b}
.pf-v2 .flow-series-toggle{margin:0}
.pf-v2 .flow-series-toggle button.selected.series-baemin{background:#fff7ed;border-color:#fdba74;color:#c2410c}
.pf-v2 .flow-series-toggle button.selected.series-coupang{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
.pf-v2 .flow-series-toggle button.selected.series-combined{background:#f1f5f9;border-color:#cbd5e1;color:#334155}
.pf-v2 .pf-line-chart{margin-top:10px}
.pf-v2 .pf-axis{height:240px}
.pf-v2 .pf-svg{width:100%;height:240px;display:block;overflow:visible}
.pf-v2 .pf-line{stroke-width:2.5px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.pf-v2 .pf-line-combined{stroke-width:3px}
.pf-v2 .pf-line-baemin,.pf-v2 .pf-line-coupang{stroke-width:2px}
.pf-v2 .pf-dot{stroke-width:0;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pf-v2 .sales-column.is-active .pf-dot{stroke-width:9px}
.pf-v2 .sales-column:hover .pf-dot{stroke-width:7px}
.pf-v2 .sales-cursor-v3{stroke:#94a3b8;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.pf-v2 .pf-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.pf-v2 .pf-donut-card{padding:14px 16px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
.pf-v2 .pf-donut-body{display:flex;align-items:center;gap:14px;margin-top:10px}
.pf-v2 .pf-donut{width:118px;height:118px;flex:0 0 118px}
.pf-v2 .pf-donut-seg{transition:stroke-width .15s}
.pf-v2 .pf-donut-seg:hover{stroke-width:19px}
.pf-v2 .pf-donut-label{font-size:9px;fill:#94a3b8;font-weight:600}
.pf-v2 .pf-donut-value{font-size:13px;fill:#1e293b;font-weight:800}
.pf-v2 .pf-donut-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0;flex:1}
.pf-v2 .pf-donut-legend li{display:grid;grid-template-columns:12px 1fr auto;align-items:center;column-gap:6px;row-gap:1px}
.pf-v2 .pf-donut-legend span{font-size:13px;color:#334155;font-weight:600}
.pf-v2 .pf-donut-legend b{font-size:17px;font-weight:800;color:#1e293b;font-variant-numeric:tabular-nums}
.pf-v2 .pf-donut-legend small{grid-column:2 / 4;font-size:11.5px;color:#64748b;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-v2 .pf-donut-legend li[data-share-platform=baemin] b{color:#c2410c}
.pf-v2 .pf-donut-legend li[data-share-platform=coupang] b{color:#1d4ed8}
.pf-v2 .pf-donut-note{margin:10px 0 0;font-size:11px;color:#94a3b8;line-height:1.5}
.pf-v2 .pf-values{margin-top:0;flex:1;display:flex;flex-direction:column;min-height:0;border-color:#e2e8f0;background:#fff;border-radius:14px}
.pf-v2 .pf-values h3{color:#334155;border-bottom-color:#f1f5f9}
.pf-v2 .pf-values .sales-values-scroll{height:auto;max-height:200px;flex:1}
.pf-v2 .pf-values .sales-values-scroll li{border-bottom-color:#f1f5f9}
.pf-v2 .platform-swatch.platform-combined{display:inline-block;flex:0 0 10px;width:10px;height:10px;min-width:0;max-width:10px;padding:0;margin:0 4px 0 0;border:0;border-radius:2px;background:#334155;vertical-align:middle}
.pf-v2 .pf-donut-legend .platform-swatch{margin:0}
/* 패널 폭 기준 반응형 (홈에서는 좁은 오른쪽 칸에 들어감) */
.pf-v2{container-type:inline-size}
@container (max-width:780px){.pf-v2 .pf-grid{grid-template-columns:minmax(0,1fr)}.pf-v2 .pf-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}.pf-v2 .pf-values .sales-values-scroll{max-height:230px}}
@container (max-width:640px){.pf-v2 .pf-kpis{grid-template-columns:1fr 1fr}.pf-v2 .pf-kpi-combined{grid-column:1 / -1}}
@container (max-width:520px){.pf-v2 .pf-side{grid-template-columns:minmax(0,1fr)}.pf-v2 .pf-svg,.pf-v2 .pf-axis{height:200px}}
@container (max-width:400px){.pf-v2 .pf-kpis{grid-template-columns:1fr}}
.pf-v2 .pf-kpi>small{text-align:left;margin:0;padding:0}
.pf-v2 .pf-values .sales-values-scroll li{display:flex;flex-direction:column;align-items:stretch;gap:2px;text-align:left}
.pf-v2 .pf-values .sales-values-scroll span{text-align:left}
.pf-v2 .pf-values .sales-values-scroll strong{display:flex;justify-content:space-between;width:100%}
