.priority-dial{width:288px;background:var(--surface-0);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:16px;display:flex;flex-direction:column;gap:12px}.priority-dial-header{display:flex;align-items:center;justify-content:space-between;height:32px}.priority-dial-title{margin:0;font-size:14px;font-weight:600;color:var(--ink-900);letter-spacing:-.01em}.reset-button{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--ink-500);transition:color .15s ease,background .15s ease}.reset-button:hover{color:var(--ink-700);background:var(--surface-50)}.reset-button:focus-visible{outline:2px solid var(--terracotta-500);outline-offset:2px}.preset-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.preset-card{height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 6px;background:var(--surface-0);border:1.5px solid var(--surface-200);border-radius:var(--radius-md);color:var(--ink-700);transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}.preset-card:hover{background:var(--surface-50);border-color:var(--ink-300);color:var(--ink-900);box-shadow:var(--shadow-1)}.preset-card.active{background:var(--terracotta-50);border-color:var(--terracotta-500);color:var(--terracotta-700);box-shadow:var(--shadow-1)}.preset-card:focus-visible{outline:2px solid var(--terracotta-500);outline-offset:2px}.preset-icon{font-size:18px;line-height:1}.preset-label{font-size:11px;font-weight:600;line-height:14px;text-align:center}.slider-group{width:100%}.slider-group-inner{border-top:1px solid var(--surface-200);padding-top:12px;display:flex;flex-direction:column;gap:4px}.slider-row{display:flex;flex-direction:column;gap:8px;padding:8px 0}.slider-header{display:flex;align-items:center;justify-content:space-between}.slider-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink-700)}.slider-icon{font-size:14px;line-height:1}.value-badge{min-width:38px;height:22px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;background:var(--terracotta-50);color:var(--terracotta-700);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:-.01em}.slider-root{position:relative;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none;width:100%;height:20px}.slider-track{background-color:var(--surface-200);position:relative;flex-grow:1;border-radius:var(--radius-pill);height:4px}.slider-range{position:absolute;background-color:var(--terracotta-500);border-radius:var(--radius-pill);height:100%;transition:all .3s cubic-bezier(.4,0,.2,1)}.slider-thumb{display:block;width:20px;height:20px;background-color:var(--surface-0);box-shadow:var(--shadow-1);border:2px solid var(--terracotta-500);border-radius:50%;cursor:grab;transition:transform .15s ease,box-shadow .15s ease}.slider-thumb:hover{transform:scale(1.1);box-shadow:var(--shadow-2)}.slider-thumb[data-state=active]{transform:scale(1.15);cursor:grabbing;box-shadow:var(--shadow-2)}.slider-thumb:focus-visible{outline:none;box-shadow:var(--shadow-1),0 0 0 4px var(--terracotta-200)}.sum-indicator{align-self:flex-end;font-size:11px;color:var(--ink-500);font-family:var(--font-mono);font-weight:500;padding:4px 0 0;transition:color .2s ease}.sum-indicator.warning{color:var(--ochre-500);font-weight:600}.metric-strip{height:64px;background:var(--surface-50);border-radius:var(--radius-md);padding:10px 8px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center}.metric-cell{display:flex;flex-direction:column;align-items:center;gap:2px;border-right:1px solid var(--surface-200)}.metric-cell:last-child{border-right:none}.metric-icon{font-size:14px;line-height:1}.metric-value{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--ink-900);letter-spacing:-.02em}.metric-label{font-size:10px;font-weight:500;color:var(--ink-500);letter-spacing:.02em}:root{--terracotta-50: #fceeec;--terracotta-200: #f4c7c2;--terracotta-500: #e63946;--terracotta-700: #b82a38;--surface-0: #ffffff;--surface-50: #faf7f2;--surface-100: #f2ede5;--surface-200: #e5dcd0;--ink-300: #c1c1c9;--ink-500: #767680;--ink-700: #46464e;--ink-900: #1b1b1f;--ochre-500: #e9c46a;--teal-500: #2a9d8f;--font-body: "Inter", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Menlo", "Consolas", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-pill: 999px;--shadow-1: 0 1px 2px rgba(27, 27, 31, .06);--shadow-2: 0 4px 12px rgba(27, 27, 31, .08);--shadow-3: 0 12px 32px rgba(27, 27, 31, .12)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;font-family:var(--font-body);color:var(--ink-900);background:var(--surface-50);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;cursor:pointer;border:none;background:none;padding:0;color:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.15ms!important}}.demo-app{min-height:100vh;padding:32px;max-width:1080px;margin:0 auto}.demo-header{margin-bottom:32px}.demo-header h1{font-size:24px;margin:0 0 4px;color:var(--ink-900)}.demo-header p{color:var(--ink-500);margin:0;font-size:14px}.demo-main{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start}.dial-area{display:flex;flex-direction:column;gap:16px}.toggle-row{display:flex;gap:8px}.toggle-btn{font-size:12px;padding:6px 10px;border-radius:var(--radius-sm);background:var(--surface-0);border:1px solid var(--surface-200);color:var(--ink-700);font-weight:500;transition:background .15s ease,border-color .15s ease}.toggle-btn:hover{background:var(--surface-50);border-color:var(--ink-300)}.toggle-btn.active{background:var(--terracotta-50);border-color:var(--terracotta-500);color:var(--terracotta-700)}.state-debug{background:var(--surface-0);border:1px solid var(--surface-200);border-radius:var(--radius-md);padding:16px;align-self:start}.state-debug h2{margin:0 0 8px;font-size:11px;color:var(--ink-500);text-transform:uppercase;letter-spacing:.08em;font-weight:600}.state-debug pre{margin:0;font-family:var(--font-mono);font-size:12px;color:var(--ink-700);white-space:pre-wrap;word-break:break-all;line-height:1.6}.state-debug .key{color:var(--terracotta-700)}