@font-face {
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-Regular.woff?v=20261106193416') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-Medium.woff?v=20261106193416') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-SemiBold.woff?v=20261106193416') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-Bold.woff?v=20261106193416') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
* { box-sizing: border-box; font-family: 'Pretendard', sans-serif; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Pretendard', sans-serif; color: #f8e7b6; background: #100b08; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.body_wrap { width: 100%; max-width: 1000px; margin: 0 auto; }
.landing-image { display: block; width: 100%; height: auto; }
.form_box { position: relative; }
/* 1200px 기준 폼. 이미지 비율에 맞춰 환산한 좌표이며 resizeZoom()이 전체를 함께 축소합니다. */
.form_wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    height: 1036px;
    margin: 0;
}
.form_wrap input {
    display: block;
    min-width: 0;
    border: 0;
    border-radius: 10px;
    padding: 0 25px;
    color: #3c2b12;
    background: transparent;
    font: inherit;
    font-size: 38px;
    font-weight: 500;
}
.form_wrap input::placeholder { color: #a08b65; opacity: 1; }
.form_wrap input:focus { outline: 3px solid #c49330; outline-offset: -2px; }
.name-input {
    position: absolute;
    top: 677px;
    left: 265px;
    width: 815px;
    height: 82px;
}
.phone {
    display: grid;
    /* 첫 칸 / 간격 / 가운데 칸 / 간격 / 마지막 칸 */
    grid-template-columns: 222px 48px 250px 46px 249px;
    position: absolute;
    top: 785px;
    left: 265px;
    width: 815px;
    height: 82px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.phone input { width: 100%; height: 100%; padding: 0 3.333px; text-align: center; }
#phone1 { grid-column: 1; }
#phone2 { grid-column: 3; }
#phone3 { grid-column: 5; }
.img_box { display: block; }
.img_box:focus-visible { outline: 3px solid #d7ad4c; outline-offset: -3px; }
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; }
.btn_submit {
    position: absolute;
    top: 912px;
    left: 365px;
    width: 488px;
    height: 95px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: transparent;
    font-size: 0;
}
.btn_submit:hover { background: rgb(255 239 182 / 14%); box-shadow: 0 0 24px rgb(231 179 66 / 25%); }
.btn_submit:active { background: rgb(100 63 7 / 12%); }
.btn_submit:focus-visible { outline: 3px solid #ffdf89; outline-offset: -4px; }
#form-dialog {
    width: calc(100% - 32px);
    max-width: 380px;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 32px 26px 26px;
    border: 2px solid #d7ad4c;
    border-radius: 18px;
    color: #fff2cd;
    background: radial-gradient(ellipse at top, #382617, #18100c 70%);
    box-shadow: 0 0 0 4px rgb(225 183 86 / 14%), 0 22px 70px rgb(0 0 0 / 60%), inset 0 0 24px rgb(218 167 60 / 7%);
    overflow-y: auto;
    text-align: center;
}
#form-dialog::before { content: ''; display: block; width: 64px; height: 3px; margin: 0 auto 22px; border-radius: 2px; background: linear-gradient(90deg, #9c6924, #fff0ba, #b27b2c); box-shadow: 0 0 14px rgb(241 193 86 / 35%); }
#form-dialog::backdrop { background: rgb(8 5 3 / 72%); backdrop-filter: blur(4px); }
#form-dialog h2 { margin: 0 0 12px; color: #ffe3a0; font-size: 22px; line-height: 1.5; }
#dialog-message { margin: 0 0 26px; color: #e1d1b8; font-size: 15px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; word-break: keep-all; }
#dialog-confirm {
    height: 50px;
    border: 1px solid #f8d67e;
    border-radius: 10px;
    color: #241707;
    background: linear-gradient(180deg, #fff1ba, #e4b64e 55%, #c99532);
    box-shadow: inset 0 0 0 2px rgb(255 244 198 / 35%), 0 4px 18px rgb(223 171 56 / 15%);
    font-size: 16px;
    font-weight: 700;
}
#dialog-confirm:hover { background: linear-gradient(180deg, #fff7d9, #f2ca69 55%, #dfaf46); }
#dialog-confirm:focus-visible { outline: 3px solid #ffe2a0; outline-offset: 4px; }
#form-dialog:focus { outline: none; }
#form-dialog[data-tone="pending"] #dialog-message { margin-bottom: 0; }
.dialog-progress { display: none; width: 32px; height: 32px; margin: 0 auto 18px; border: 3px solid #58401e; border-top-color: #f1cb72; 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 (min-width: 768px) {
    #form-dialog { max-width: 460px; padding: 36px 32px 30px; }
    #form-dialog h2 { font-size: 26px; }
    #dialog-message { font-size: 17px; }
    #dialog-confirm { height: 54px; font-size: 17px; }
}