*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f172a;--panel: #1e293b;--panel-2: #334155;--text: #f1f5f9;--muted: #94a3b8;--accent: #38bdf8;--accent-hover: #0ea5e9;--op: #f59e0b;--op-hover: #d97706;--err: #ef4444}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Pretendard,sans-serif}.app{display:flex;gap:24px;padding:24px;min-height:100%;align-items:flex-start;justify-content:center}.calc{background:var(--panel);padding:20px;border-radius:16px;width:360px;box-shadow:0 10px 40px #0006}.calc h1{font-size:18px;margin-bottom:12px;color:var(--muted);font-weight:500}.display{background:#0b1120;padding:16px;border-radius:12px;margin-bottom:16px;text-align:right;min-height:96px}.display .expr{font-size:18px;color:var(--muted);word-break:break-all;min-height:22px}.display .result{font-size:36px;font-weight:600;margin-top:8px;word-break:break-all}.display .result.err{color:var(--err);font-size:18px;font-weight:400}.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.btn{height:56px;border:none;border-radius:10px;font-size:18px;font-weight:600;cursor:pointer;background:var(--panel-2);color:var(--text);transition:transform .05s,background .15s}.btn:hover:not(:disabled){background:#475569}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.op{background:var(--op);color:#1f2937}.btn.op:hover:not(:disabled){background:var(--op-hover)}.btn.eq{background:var(--accent);color:#0b1120}.btn.eq:hover:not(:disabled){background:var(--accent-hover)}.history{background:var(--panel);padding:20px;border-radius:16px;width:280px;max-height:600px;overflow-y:auto;box-shadow:0 10px 40px #0006}.history h2{font-size:16px;color:var(--muted);margin-bottom:12px;font-weight:500}.history .empty{color:var(--muted);font-size:14px;text-align:center;margin-top:24px}.history ul{list-style:none}.history li{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:4px}.history li:hover{background:var(--panel-2)}.h-expr{color:var(--muted);flex:1;word-break:break-all}.h-eq{color:var(--muted)}.h-res{color:var(--accent);font-weight:600}@media(max-width:720px){.app{flex-direction:column;align-items:center}.history{width:360px}}