:root{--font:"Outfit", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;--mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--bg:#eef1f5;--bg-elevated:#fff;--surface:#ffffffb8;--border:#d8dee8;--border-strong:#b8c2d1;--text:#0f172a;--muted:#64748b;--faint:#94a3b8;--chip:#e8edf4;--accent:#0f766e;--accent-soft:#14b8a6;--accent-ink:#0d9488;--danger:#dc2626;--warn:#b45309;--radius:14px;--radius-sm:10px;--ring:0 0 0 3px color-mix(in srgb, var(--accent-ink) 22%, transparent)}:root[data-theme=dark]{--bg:#070b10;--bg-elevated:#101820;--surface:#101820c7;--border:#1e2a38;--border-strong:#2d3d50;--text:#e8eef6;--muted:#8fa3bb;--faint:#6b8098;--chip:#15202c;--accent:#2dd4bf;--accent-soft:#5eead4;--accent-ink:#2dd4bf;--danger:#f87171;--warn:#fbbf24}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0;padding:0}body{color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-color:var(--bg);background-image:radial-gradient(900px 420px at 8% -8%, color-mix(in srgb, var(--accent-ink) 16%, transparent), transparent 58%), radial-gradient(720px 380px at 100% 0%, #38bdf81a, transparent 52%), linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 55%, transparent), transparent 220px), linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);background-position:0 0,0 0,0 0,-1px -1px,-1px -1px;background-size:auto,auto,auto,48px 48px,48px 48px}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}a{color:var(--accent-ink)}.wrap{max-width:880px;padding:max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 80px max(20px, env(safe-area-inset-left));margin:0 auto}.header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;display:flex}.brand{align-items:center;gap:14px;min-width:0;display:flex}.brandLogo{border:1px solid color-mix(in srgb, var(--accent-ink) 35%, var(--border));background:linear-gradient(145deg, color-mix(in srgb, var(--accent-ink) 18%, var(--bg-elevated)), var(--bg-elevated));width:44px;height:44px;color:var(--accent-ink);border-radius:12px;flex-shrink:0;place-items:center;display:grid}.title{letter-spacing:-.035em;margin:0;font-size:1.45rem;font-weight:650;line-height:1.15}.subtitle{color:var(--muted);letter-spacing:-.01em;margin:4px 0 0;font-size:.84rem}.headerRight{align-items:center;gap:8px;display:inline-flex}.iconBtn{background:var(--surface);width:40px;height:40px;color:var(--muted);border:1px solid var(--border);cursor:pointer;border-radius:12px;flex:none;place-items:center;transition:color .15s,border-color .15s,transform .12s,background .15s;display:grid}.iconBtn:hover:not(:disabled){color:var(--text);background:var(--bg-elevated)}.iconBtn:active:not(:disabled){transform:scale(.94)}.iconBtn:disabled{opacity:.55;cursor:default}.iconBtn .spin{transform-origin:50%;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.themeSeg{border:1px solid var(--border);background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;gap:2px;padding:3px;display:inline-flex}.themeSeg button{width:34px;height:30px;color:var(--muted);background:0 0;border:0;border-radius:9px;place-items:center;transition:background .15s,color .15s;display:grid}.themeSeg button[aria-pressed=true]{background:var(--bg-elevated);color:var(--text);box-shadow:0 1px 2px #0f172a0f}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.periodChips{border:1px solid var(--border);background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;gap:2px;padding:3px;display:inline-flex}.chip{color:var(--muted);background:0 0;border:0;border-radius:9px;padding:7px 14px;font-size:.84rem;font-weight:520;transition:background .15s,color .15s}.chip.active{background:var(--bg-elevated);color:var(--text);box-shadow:0 1px 2px #0f172a0f}.btnGhost{border:1px solid var(--border);background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--muted);border-radius:12px;padding:8px 14px;font-size:.84rem;font-weight:520;transition:border-color .15s,color .15s}.btnGhost:hover:not(:disabled){border-color:var(--border-strong);color:var(--text)}.btnGhost:disabled{opacity:.55;cursor:default}.banner{border:1px solid var(--border);background:var(--bg-elevated);border-radius:var(--radius);color:var(--muted);margin-bottom:14px;padding:12px 14px;font-size:.9rem}.banner.error{border-color:color-mix(in srgb, var(--danger) 35%, var(--border));background:color-mix(in srgb, var(--danger) 8%, var(--bg-elevated));color:var(--danger)}.metaRow{flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:18px;font-size:.78rem;display:flex}.badge{border:1px solid color-mix(in srgb, var(--accent-ink) 28%, var(--border));background:color-mix(in srgb, var(--accent-ink) 10%, var(--bg-elevated));color:var(--accent);font-family:var(--mono);letter-spacing:-.02em;border-radius:8px;align-items:center;padding:4px 9px;font-size:.7rem;display:inline-flex}.metaMuted{color:var(--faint)}.studioLink{margin-left:auto;font-size:.8rem;font-weight:600;text-decoration:none}.studioLink:hover{text-underline-offset:3px;text-decoration:underline}.statGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px;display:grid}@media (width>=720px){.statGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}.statCard{border:1px solid var(--border);background:var(--bg-elevated);border-radius:var(--radius);padding:16px 16px 14px;position:relative;overflow:hidden}.statCard:before{content:"";background:var(--border-strong);width:3px;position:absolute;inset:0 auto 0 0}.statCard[data-tone=brand]:before{background:linear-gradient(180deg, var(--accent-soft), var(--accent))}.statCard[data-tone=cost]:before{background:linear-gradient(#38bdf8,#0284c7)}.statLabel{color:var(--muted);letter-spacing:.02em;text-transform:uppercase;margin-bottom:8px;font-size:.74rem;font-weight:520}.statValue{font-family:var(--mono);letter-spacing:-.04em;font-size:1.55rem;font-weight:600;line-height:1.05}.statHint{color:var(--faint);margin-top:8px;font-size:.72rem}.panel{border:1px solid var(--border);background:var(--bg-elevated);border-radius:var(--radius);margin-bottom:14px;padding:16px 16px 14px}.panelHead{justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px;display:flex}.panelTitle{letter-spacing:-.02em;margin:0;font-size:.98rem;font-weight:650}.panelMeta{color:var(--faint);font-size:.74rem;font-family:var(--mono)}.empty{color:var(--muted);margin:0;font-size:.9rem}.vChart{margin:0 -2px;padding-bottom:4px;overflow-x:auto}.vChartPlot{grid-template-columns:repeat(var(--cols,12), minmax(0, 1fr));width:100%;min-height:220px;min-width:calc(var(--cols,12) * 34px);align-items:stretch;column-gap:8px;padding:4px 2px 0;display:grid}.vChartCol{flex-direction:column;align-items:center;gap:10px;min-width:0;display:flex}.vChartTrack{background:linear-gradient(to top, color-mix(in srgb, var(--chip) 90%, transparent), transparent 75%);border:1px solid color-mix(in srgb, var(--border) 70%, transparent);border-bottom:0;border-radius:10px 10px 4px 4px;flex:1;justify-content:center;align-items:flex-end;width:100%;max-width:42px;min-height:150px;display:flex}.vChartBar{background:linear-gradient(180deg, var(--accent-soft), var(--accent));border-radius:8px 8px 3px 3px;justify-content:center;align-items:flex-start;width:72%;min-width:12px;max-width:24px;min-height:24px;padding-top:6px;transition:height .22s;display:flex;position:relative}.vChartBar.isZero{background:color-mix(in srgb, var(--border-strong) 45%, var(--chip));min-height:16px;padding-top:2px;height:16px!important}.vChartBarValue{font-family:var(--mono);font-variant-numeric:tabular-nums;color:#062822;white-space:nowrap;pointer-events:none;font-size:.66rem;font-weight:600;line-height:1}:root[data-theme=dark] .vChartBarValue{color:#042f2e}.vChartBar.isZero .vChartBarValue{color:var(--faint);font-size:.6rem;font-weight:500}.vChartAxis{flex-direction:column;align-items:center;gap:2px;width:100%;min-height:2.2rem;display:flex}.vChartAxisMain{font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;font-size:.7rem;font-weight:600;line-height:1.15}.vChartAxisSub{color:var(--faint);font-size:.6rem;line-height:1.1}@media (width<=520px){.vChartPlot{min-width:calc(var(--cols,12) * 28px);column-gap:5px}.vChartBarValue{font-size:.56rem}.vChartAxisMain{font-size:.62rem}.vChartTrack{min-height:128px}}.tableWrap{overflow-x:auto}.dataTable{border-collapse:collapse;width:100%;font-size:.86rem}.dataTable th,.dataTable td{border-bottom:1px solid var(--border);text-align:left;vertical-align:top;padding:10px 8px}.dataTable th{color:var(--faint);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:600}.dataTable .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em}.dataTable .mono{font-family:var(--mono);font-size:.78rem}.dataTable .sku{max-width:380px;color:var(--text);font-size:.82rem;line-height:1.4}.dataTable tbody tr:hover td{background:color-mix(in srgb, var(--chip) 55%, transparent)}.dataTable .unit{color:var(--faint);font-size:.72rem}
