:root {
  --eou-navy: #002856; --eou-gold: #B68400; --eou-red: #9C182F;
  --border: #e5e7eb; --bg: #f7f7f7; --text: #111827
}
* { box-sizing: border-box }
html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow-x: hidden; -webkit-text-size-adjust: 100% }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg) }
@supports (-webkit-touch-callout: none) { body { min-height: 100svh } }

.wrap { width: 100%; max-width: 100%; padding: clamp(12px, 4vw, 24px); display: flex; flex-direction: column; align-items: center; }
.brand { width: 100%; max-width: 640px; display: flex; align-items: center; gap: 0; margin-bottom: 12px }
.brand-badge { width: 36px; height: 36px; border-radius: 10px; background: var(--eou-navy); display: grid; place-items: center; color: #fff; font-weight: 800 }
h1 { margin: 0; color: var(--eou-navy); font-weight: 800; letter-spacing: 0.2px; font-size: clamp(1.1rem, 2.2vw + 0.9rem, 1.45rem); }

.card { width: 100%; max-width: 640px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: clamp(14px, 3.5vw, 20px); box-shadow: 0 1px 2px rgba(0,0,0,.04) }

label { display: block; font-weight: 600; margin: 10px 0 6px }
input[type=number] { width: 100%; padding: 12px; font-size: 16px; line-height: 1.25; border: 1px solid var(--border); border-radius: 10px; background: #fff; appearance: textfield }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { appearance: none; margin: 0 }

.row { display: grid; grid-template-columns: 1fr; gap: 14px }
@media (min-width: 700px) { .row { grid-template-columns: 1fr 1fr } }

button { margin-top: 14px; width: auto; font-size: 16px; padding: 12px 16px; font-weight: 700; color: #fff; background: var(--eou-gold); border: 0; border-radius: 12px; cursor: pointer }
@media (max-width: 560px) { button { width: 100% } }
button:hover { filter: brightness(.97) }
button:focus-visible { outline: 3px solid var(--eou-navy); outline-offset: 2px }

.helper { font-size: .95rem; color: #6b7280; margin-top: 8px }
.result { margin-top: 16px; font-weight: 800; font-size: 1.1rem; color: var(--eou-navy) }
.error { margin-top: 16px; font-weight: 700; color: var(--eou-red) }
.footer { margin-top: 16px; font-size: .9rem; color: #6b7280 }
.tag { display: inline-block; background: var(--eou-navy); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700 }