:root{--bg-deep:#12151f;--bg-panel:#1a2030;--bg-panel-2:#212840;--line:#2c3450;--gold:#e0b34d;--gold-soft:#f0cd7a;--text:#e9e6da;--text-dim:#a9afc2;--green:#6fbf73;--red:#e37a70}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(ellipse 80% 50% at 50% -10%, #e0b34d1a, transparent), var(--bg-deep);min-width:320px;min-height:100vh;color:var(--text);font-family:Pretendard,-apple-system,BlinkMacSystemFont,Malgun Gothic,sans-serif;line-height:1.5}button,input,select{font:inherit}button,select{cursor:pointer}.site-shell{padding:32px 16px 64px}.calculator{max-width:680px;margin:0 auto}.hero{text-align:center;margin:0 auto 24px}.eyebrow{color:var(--gold-soft);letter-spacing:2px;text-transform:uppercase;margin:0 0 8px;font-size:12px}h1{margin:0 0 8px;font-size:clamp(24px,5vw,32px);line-height:1.25}.subtitle,.card-description,.site-footer{color:var(--text-dim)}.subtitle{margin:0;font-size:14px}.card{border:1px solid var(--line);background:var(--bg-panel);border-radius:14px;margin-bottom:16px;padding:20px}.card--result{background:linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));border-color:#e0b34d66;box-shadow:0 12px 30px -18px #e0b34d59}.card-title{color:var(--gold-soft);margin:0 0 4px;font-size:15px;font-weight:700}.card-description{margin:0 0 16px;font-size:13px}.field-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:10px 0;display:flex}.field-row:last-child{border-bottom:0}.field-label{gap:2px;display:grid}.field-name{font-size:14px;font-weight:600}.field-hint{color:var(--text-dim);font-size:12px}.input-wrap{border:1px solid var(--line);background:var(--bg-panel-2);border-radius:8px;flex:0 0 160px;align-items:center;gap:6px;padding:7px 10px;display:flex}.input-wrap:focus-within{border-color:var(--gold)}.input-wrap input{width:100%;min-width:0;color:var(--text);text-align:right;font-variant-numeric:tabular-nums;background:0 0;border:0;outline:0}.unit{color:var(--text-dim);font-size:12px}.select-wrap{position:relative}select{border:1px solid var(--line);background:var(--bg-panel-2);width:100%;color:var(--text);border-radius:10px;padding:12px 14px}select:focus,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.toggle-row{gap:8px;margin:12px 0 4px;display:flex}.toggle-button{border:1px solid var(--line);background:var(--bg-panel-2);color:var(--text-dim);border-radius:8px;flex:1;padding:9px 10px;font-size:13px;font-weight:600}.toggle-button[aria-pressed=true]{border-color:var(--gold);color:var(--gold-soft);background:#e0b34d24}.result-main{text-align:center;padding:4px 0 18px}.result-label{color:var(--text-dim);font-size:13px}.result-value{font-variant-numeric:tabular-nums;margin:2px 0;font-size:clamp(30px,8vw,42px);font-weight:800}.result-value.positive{color:var(--green)}.result-value.negative{color:var(--red)}.result-sub{color:var(--text-dim);font-size:13px}.breakdown{border-top:1px solid var(--line)}.breakdown-row{border-bottom:1px dashed var(--line);justify-content:space-between;gap:16px;padding:9px 0;font-size:14px;display:flex}.breakdown-row:last-child{border-bottom:0}.breakdown-label{color:var(--text-dim)}.breakdown-value{font-variant-numeric:tabular-nums;font-weight:600}.per-potion{border-top:1px solid var(--line);justify-content:space-between;gap:16px;padding-top:14px;display:flex}.site-footer{text-align:center;max-width:680px;margin:24px auto 0;font-size:12px}.site-footer p{margin:6px 0}.reset-button{border:1px solid var(--line);color:var(--text-dim);background:0 0;border-radius:8px;margin:16px auto 0;padding:8px 12px;font-size:12px;display:block}.reset-button:hover{border-color:var(--gold);color:var(--text)}.save-status{min-height:20px;color:var(--text-dim);text-align:center;margin:8px 0 0;font-size:12px}.save-status[data-error=true]{color:var(--red)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@media (width<=480px){.site-shell{padding:24px 12px 48px}.card{padding:16px}.field-row{flex-wrap:wrap;align-items:flex-start}.input-wrap{flex-basis:140px}}