:root { --ink: #16302b; --green: #1d5c48; --paper: #f4f7f5; --line: #c9d6d0; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--paper); color: var(--ink); font: 16px/1.5 system-ui, "Segoe UI", sans-serif; }
.card { width: 100%; max-width: 24rem; background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--green); border-radius: 4px; padding: 2rem 1.5rem; }
h1 { margin: 0 0 .5rem; font-size: 1.8rem; letter-spacing: -.02em; }
label { display: block; margin-top: 1rem; font-weight: 600; }
input { width: 100%; margin-top: .25rem; padding: .7rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.btn, button { display: inline-block; margin-top: 1.25rem; padding: .7rem 1.2rem; background: var(--green); color: #fff; border: 0; border-radius: 4px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
:focus-visible { outline: 3px solid #e0a100; outline-offset: 2px; }
#msg { min-height: 1.5rem; margin: 1rem 0 0; color: #9b2c1d; }
select { width: 100%; margin-top: .25rem; padding: .7rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; background: #fff; }
input[type=checkbox] { width: auto; margin: .25rem 0 0; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.hint { font-weight: 400; font-size: .85rem; color: #4d6660; }
.notice { font-size: .9rem; margin: 1.25rem 0 0; }