:root { color-scheme: light; }
* { box-sizing: border-box; box-shadow: none !important; text-shadow: none !important; }
html, body { min-height: 100%; margin: 0; }
body { background: #fff; color: #20242a; font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif; }
.calculator-page { display: grid; min-height: calc(100dvh - 56px); place-items: center; padding: 24px; }
.calculator { width: min(100%, 360px); }
.calculator-display { display: flex; min-height: 104px; align-items: end; justify-content: end; overflow: hidden; padding: 12px 4px 18px; font-size: clamp(42px, 12vw, 64px); font-weight: 500; line-height: 1; white-space: nowrap; }
.calculator-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.calculator-keys button { min-width: 0; aspect-ratio: 1; border: 0; border-radius: 50%; background: #eef0f3; color: #20242a; font: inherit; font-size: 24px; font-weight: 650; cursor: pointer; }
.calculator-keys button:active { background: #dfe3e8; }
.calculator-keys .is-operator, .calculator-keys .is-equals { background: #2673f0; color: #fff; }
.calculator-keys .calculator-delete { font-size: 16px; }
.calculator-keys .is-operator:active, .calculator-keys .is-equals:active { background: #155fd1; }
@media (max-height: 650px) { .calculator { width: min(100%, 300px); } .calculator-display { min-height: 72px; font-size: 44px; } .calculator-keys { gap: 7px; } }