:root{--bg:#f4f1fb;--ink:#2b2540;--muted:#7c748f;--card:#fff;--lav:#e9e3ff;--lav-ink:#6b4fd8;--mint:#dff7ec;--mint-ink:#1f8a5b;--peach:#ffe9d6;--peach-ink:#d9682a;--butter:#fff4c2;--butter-ink:#a5780a;--sky:#dcefff;--sky-ink:#2b6cb0;--shadow:0 10px 30px #503c7814, 0 1px 2px #503c780f;--inset:inset 0 2px 6px #503c7814;--radius:24px}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:Nunito,Noto Sans KR,ui-rounded,Apple SD Gothic Neo,system-ui,sans-serif}header{max-width:1240px;margin:0 auto;padding:40px 24px 8px}header h1{letter-spacing:-.02em;margin:0;font-size:30px;font-weight:800}header p{color:var(--muted);margin:6px 0 0;font-size:14px}.bento{grid-template-columns:1fr;grid-template-areas:"cpu""gpu""periph""custom""result";gap:20px;max-width:1240px;margin:0 auto;padding:24px;display:grid}@media (min-width:1100px){.bento{grid-template:"cpu gpu result"max-content"periph gpu result"max-content"custom gpu result"1fr/1fr 1fr 1.1fr;align-items:start}.card-result{position:sticky;top:24px}}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}.card-cpu{background:linear-gradient(180deg, var(--lav), #fff 55%);grid-area:cpu}.card-gpu{background:linear-gradient(180deg, var(--mint), #fff 40%);grid-area:gpu}.card-periph{background:linear-gradient(180deg, var(--peach), #fff 55%);grid-area:periph}.card-result{background:linear-gradient(180deg, var(--butter), #fff 45%);grid-area:result}.card-custom{background:linear-gradient(180deg, var(--sky), #fff 55%);grid-area:custom}.card-cpu{--tint:var(--lav);--accent:var(--lav-ink)}.card-gpu{--tint:var(--mint);--accent:var(--mint-ink)}.card-periph{--tint:var(--peach);--accent:var(--peach-ink)}.card-result{--tint:var(--butter);--accent:var(--butter-ink)}.card-custom{--tint:var(--sky);--accent:var(--sky-ink)}.card-head{align-items:center;gap:12px;margin-bottom:20px;display:flex}.num{letter-spacing:.12em;color:var(--accent);box-shadow:var(--shadow);background:#fff;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800}.icon{background:var(--accent);color:#fff;border-radius:50%;place-items:center;width:36px;height:36px;font-size:16px;display:grid}.card-head h2{margin:0;font-size:19px;font-weight:800}.card-head h2 small{color:var(--accent);margin-left:6px;font-weight:700}.field{margin-bottom:14px;display:block}.field>span,.group-label{color:var(--muted);margin-bottom:6px;font-size:13px;font-weight:700;display:block}.hint{color:var(--muted);margin-top:4px;font-size:12px;font-weight:500;display:block}select{appearance:none;width:100%;font:inherit;color:var(--ink);box-shadow:var(--inset), 0 0 0 1.5px #503c780f;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%237c748f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 18px center no-repeat;border:0;border-radius:999px;padding:12px 44px 12px 18px;font-weight:600}select:focus{box-shadow:var(--inset), 0 0 0 3px var(--tint);outline:none}select:disabled{color:var(--muted);cursor:not-allowed;opacity:.7}.toggle-row{box-shadow:var(--shadow);cursor:pointer;background:#fff;border-radius:18px;justify-content:space-between;align-items:center;gap:14px;margin-top:8px;padding:14px 16px;display:flex}.toggle-row strong{font-size:14px;display:block}.toggle{appearance:none;cursor:pointer;background:#e6e2f0;border-radius:999px;flex:none;width:58px;height:32px;margin:0;transition:background .2s;position:relative}.toggle:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .2s;position:absolute;top:4px;left:4px;box-shadow:0 2px 6px #503c7840}.toggle:checked{background:var(--accent)}.toggle:checked:after{transform:translate(26px)}.seg{box-shadow:var(--inset);background:#fff;border-radius:999px;gap:4px;padding:4px;display:flex}.seg button{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;flex:1;padding:10px 0;font-weight:700;transition:all .15s}.seg button.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px #1f8a5b40}.gpu-slot{box-shadow:var(--shadow);background:#fff;border-radius:18px;margin-top:12px;padding:16px}.gpu-slot[hidden]{display:none}.gpu-slot h3{color:var(--accent);letter-spacing:.04em;margin:0 0 10px;font-size:13px;font-weight:800}.gpu-slot .field:last-child{margin-bottom:0}.periph-row{border-bottom:1px dashed #503c781f;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;display:flex}.periph-row:last-child{border-bottom:0}.periph-row .label{font-size:14px;font-weight:700}.periph-row .label small{color:var(--muted);font-size:12px;font-weight:500;display:block}.stepper{align-items:center;gap:8px;display:flex}.stepper button{width:40px;height:40px;color:var(--accent);cursor:pointer;box-shadow:var(--shadow);background:#fff;border:0;border-radius:50%;font-family:inherit;font-size:20px;font-weight:800}.stepper button:hover{background:var(--tint)}.stepper button:disabled{color:#cfc9dc;cursor:not-allowed;background:#fff}.periph-count{text-align:center;min-width:32px;font-size:18px;font-weight:800}.total-label{color:var(--muted);font-size:13px;font-weight:700}.total-wrap{flex-wrap:wrap;align-items:baseline;gap:12px;display:flex}#total-watts{letter-spacing:-.04em;color:var(--ink);font-size:120px;font-weight:800;line-height:1}.chip{letter-spacing:.12em;background:var(--accent);color:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800}.breakdown{margin:22px 0 0;padding:0;list-style:none}.breakdown li{grid-template-columns:1fr auto;row-gap:6px;padding:10px 0;font-size:14px;font-weight:700;display:grid}.breakdown li .bd-val{font-weight:800}.breakdown .bar{background:#f0edf7;border-radius:999px;grid-column:1/-1;height:10px;overflow:hidden}.breakdown .bar i{border-radius:999px;width:0;height:100%;transition:width .3s;display:block}.bar-cpu i{background:var(--lav-ink)}.bar-gpu i{background:var(--mint-ink)}.bar-board i{background:#8fb8e8}.bar-ram i{background:#c9a5e8}.bar-periph i{background:var(--peach-ink)}.bar-custom i{background:var(--sky-ink)}.breakdown li.sum{border-top:2px solid #503c781f;margin-top:6px;padding-top:14px;font-size:16px}.note{color:var(--muted);box-shadow:var(--shadow);background:#fff;border-radius:18px;margin-top:18px;padding:14px 16px;font-size:13px;line-height:1.6}.rec{background:var(--accent);color:#fff;border-radius:22px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding:20px 24px;display:flex;box-shadow:0 12px 30px #a5780a40}.rec .rec-title{opacity:.85;font-size:13px;font-weight:700}.rec .rec-val{font-size:44px;font-weight:800;line-height:1.1}.rec .rec-val small{margin-left:4px;font-size:20px}.rec .load{text-align:right;opacity:.9;font-size:13px;font-weight:700}.rec .load b{font-size:24px;display:block}@media (max-width:600px){#total-watts{font-size:80px}.card{padding:20px}}body{font-family:var(--font-nunito), var(--font-noto), ui-rounded, "Apple SD Gothic Neo", system-ui, sans-serif}header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.locale{position:relative}.flag{border-radius:3px;flex:none;width:22px;height:16.5px;box-shadow:0 0 0 1px #503c781f}.locale-btn{font:inherit;color:var(--ink);cursor:pointer;box-shadow:var(--inset), 0 0 0 1.5px #503c780f;background:#fff;border:0;border-radius:999px;align-items:center;gap:10px;padding:10px 16px;font-size:14px;font-weight:700;display:flex}.locale-btn:focus-visible{box-shadow:var(--inset), 0 0 0 3px var(--lav);outline:none}.locale-btn .caret{width:12px;height:8px;stroke:var(--muted);stroke-width:2px;fill:none;stroke-linecap:round}.locale-menu{z-index:20;min-width:170px;box-shadow:var(--shadow), 0 0 0 1.5px #503c780f;background:#fff;border-radius:18px;margin:0;padding:6px;list-style:none;position:absolute;top:calc(100% + 8px);right:0}.locale-menu button{width:100%;font:inherit;color:var(--ink);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:12px;align-items:center;gap:10px;padding:9px 12px;font-size:14px;font-weight:700;display:flex}.locale-menu button:hover{background:var(--bg)}.locale-menu button.active{background:var(--lav);color:var(--lav-ink)}.select-wrap{position:relative}.select-wrap.with-icon select{padding-left:48px}.select-wrap .brand-icon{width:20px;height:20px;color:var(--accent);pointer-events:none;position:absolute;top:50%;left:18px;transform:translateY(-50%)}.seg button:focus-visible,.stepper button:focus-visible,.toggle:focus-visible{outline:3px solid var(--tint);outline-offset:2px}.watt-field{display:block;position:relative}input.watt{width:100%;font:inherit;color:var(--ink);box-shadow:var(--inset), 0 0 0 1.5px #503c780f;appearance:textfield;background:#fff;border:0;border-radius:999px;padding:12px 52px 12px 20px;font-size:18px;font-weight:700}input.watt::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input.watt::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.watt:focus{box-shadow:var(--inset), 0 0 0 3px var(--tint);outline:none}.watt-unit{color:var(--accent);font-weight:800;position:absolute;top:50%;right:20px;transform:translateY(-50%)}.ticker{left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom));z-index:30;--accent:var(--butter-ink);--tint:var(--butter);background:#fff;border-radius:20px;align-items:center;gap:12px;height:64px;padding:0 14px 0 10px;display:flex;position:fixed;box-shadow:0 14px 36px #503c7838}.ticker .zap{background:var(--tint);width:44px;height:44px;color:var(--accent);border-radius:14px;flex:none;place-items:center;font-size:18px;display:grid}.ticker .flow{flex-direction:column;flex:1;min-width:0;line-height:1.15;display:flex}.ticker .flow small{letter-spacing:.1em;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:10px;font-weight:800;overflow:hidden}.ticker .flow span{color:var(--ink);white-space:nowrap;font-size:13px;font-weight:700}.ticker .flow span em{color:var(--muted);font-style:normal;font-weight:600}.ticker .big{text-align:right;flex:none;line-height:1}.ticker .big b{color:var(--accent);letter-spacing:-.02em;font-size:30px;font-weight:800}.ticker .big b i{margin-left:2px;font-size:13px;font-style:normal}.ticker .big small{letter-spacing:.1em;color:var(--muted);margin-top:3px;font-size:10px;font-weight:800;display:block}.ticker .bar{background:#f0edf7;border-radius:999px;height:3px;position:absolute;bottom:0;left:14px;right:14px;overflow:hidden}.ticker .bar i{background:var(--accent);height:100%;transition:width .3s;display:block}@media (max-width:1099px){.bento{padding-bottom:100px}}@media (min-width:1100px){.ticker{display:none}}