:root{
  --bg:#f3f4f6;
  --panel:#ffffff;
  --accent:#0f62fe;
  --btn:#f1f5f9;
  --op:#ffd166;
  --text:#0b1220;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans KR',sans-serif;background:var(--bg);color:var(--text)}
.calculator{width:320px;max-width:95%;margin:6vh auto;background:var(--panel);border-radius:12px;box-shadow:0 8px 24px rgba(11,18,32,0.12);padding:16px}
.display{height:64px;background:#0b1220;color:#fff;border-radius:8px;padding:12px;font-size:28px;display:flex;align-items:center;justify-content:flex-end;overflow:hidden}
.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.btn{padding:18px;border-radius:8px;border:0;background:var(--btn);font-size:18px;cursor:pointer}
.btn.operator{background:var(--op)}
.btn.function{background:#e6e9ef}
.btn.equals{grid-column:4;background:var(--accent);color:#fff}
.btn.zero{grid-column:1 / span 2}
.btn:active{transform:translateY(1px)}
@media (max-width:360px){.display{font-size:22px;height:56px}}