* { box-sizing: border-box; } body { margin: 0; color: #172d40; background: #f1f5f8; font-family: "Malgun Gothic",sans-serif; line-height: 1.7; word-break: keep-all; }
main { max-width: 680px; margin: 6vh auto; padding: 32px; } h1 { font-size: clamp(28px,5vw,42px); line-height: 1.4; } .operator { color: #314c60; font-weight: 700; }
section { background: #fff; padding: 24px; border: 1px solid #c0cbd4; border-radius: 12px; margin: 32px 0; } label { display: block; font-weight: 700; }
input,button,.central { min-height: 48px; border-radius: 6px; font-size: 18px; padding: 10px 16px; } input { width: 100%; border: 1px solid #617b8e; margin: 10px 0 16px; }
button { width: 100%; border: 0; background: #183b56; color: #fff; cursor: pointer; } .central { display: block; color: #183b56; text-align: center; margin-top: 16px; border: 1px solid #617b8e; }
.hint { font-size: 16px; } :focus { outline: 3px solid #b84b00; outline-offset: 3px; } @media(max-width:480px){ main { padding: 20px; margin: 3vh auto; } section { padding: 18px; } }