* { box-sizing: border-box; }
body { margin: 0; padding: 80px 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif; color: #222; background: #f7f8fa; }
.card { width: 100%; max-width: 460px; margin: 0 auto; padding: 36px 30px; background: white; border: 1px solid #e4e7eb; border-radius: 12px; }
h1 { margin: 0 0 12px; font-size: 26px; }
.intro { margin: 0 0 30px; color: #69717d; font-size: 14px; line-height: 1.7; }
label, legend { display: block; padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
input { width: 100%; min-width: 0; height: 46px; border: 1px solid #cfd4dc; border-radius: 6px; padding: 0 12px; font: inherit; background: white; color: #222; }
input:focus { outline: 2px solid #607796; outline-offset: 2px; }
fieldset { min-width: 0; padding: 0; margin: 24px 0 0; border: 0; }
.phone { display: flex; align-items: center; gap: 8px; }
.phone input { flex: 1; width: 0; text-align: center; padding: 0 4px; }
.phone span { color: #89909b; }
.notice { color: #737b86; font-size: 12px; line-height: 1.7; margin: 20px 0; }
button { width: 100%; height: 48px; border: 0; border-radius: 6px; background: #26364d; color: white; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #354b69; }
button:disabled { opacity: .6; cursor: wait; }
#form-dialog { width: calc(100% - 32px); max-width: 380px; max-height: calc(100dvh - 32px); margin: auto; padding: 28px; border: 0; border-radius: 12px; color: #222; background: white; box-shadow: 0 16px 64px #0003; overflow-y: auto; }
#form-dialog::backdrop { background: rgb(20 28 40 / 45%); }
#form-dialog h2 { margin: 0 0 12px; font-size: 21px; line-height: 1.5; }
#dialog-message { margin: 0 0 24px; color: #59616d; font-size: 15px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
#form-dialog[data-tone="pending"] #dialog-message { margin-bottom: 0; }
.dialog-progress { display: none; width: 26px; height: 26px; margin-bottom: 18px; border: 3px solid #e4e7eb; border-top-color: #26364d; border-radius: 50%; animation: dialog-spin .8s linear infinite; }
#form-dialog[data-tone="pending"] .dialog-progress { display: block; }
html:has(#form-dialog[open]) { overflow: hidden; }
@keyframes dialog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dialog-progress { animation: none; } }
@media (max-width: 480px) { body { padding: 40px 16px; } .card { padding: 28px 22px; } }