@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: #222; background: #17161b; }
.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; }
/* 1000px 기준 폼. 이미지 비율에 맞춰 환산한 좌표이며 resizeZoom()이 전체를 함께 축소합니다. */
.form_wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 845.833px;
    margin: 0;
}
.form_wrap input {
    display: block;
    min-width: 0;
    border: 0;
    border-radius: 10px;
    padding: 0 25px;
    color: #3c3128;
    background: transparent;
    font: inherit;
    font-size: 36.667px;
    font-weight: 500;
}
.form_wrap input::placeholder { color: #8a8176; opacity: 1; }
.form_wrap input:focus { outline: 2.5px solid #c28a2c; outline-offset: -2.5px; }
.name-input {
    position: absolute;
    top: 525px;
    left: 190px;
    width: 730px;
    height: 75.833px;
}
.phone {
    display: grid;
    /* 첫 칸 / 간격 / 가운데 칸 / 간격 / 마지막 칸 */
    grid-template-columns: 200.833px 40px 224.167px 40px 225px;
    position: absolute;
    top: 614.167px;
    left: 190px;
    width: 730px;
    height: 75.833px;
    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 #efca68; 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: 708.333px;
    left: 278.333px;
    width: 461.667px;
    height: 83.333px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    font-size: 0;
}
.btn_submit:hover { background: rgb(255 255 255 / 8%); }
.btn_submit:focus-visible { outline: 3px solid #fff0b5; outline-offset: -4px; }
#form-dialog {
    width: calc(100% - 32px);
    max-width: 380px;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 28px;
    border: 1px solid #d8b467;
    border-radius: 12px;
    color: #47301b;
    background: #fffaf0;
    box-shadow: 0 18px 70px rgb(30 19 6 / 38%);
    overflow-y: auto;
}
#form-dialog::backdrop { background: rgb(23 18 11 / 62%); }
#form-dialog h2 { margin: 0 0 12px; color: #47301b; font-size: 21px; line-height: 1.5; }
#dialog-message { margin: 0 0 24px; color: #6b5842; font-size: 15px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
#dialog-confirm {
    border: 1px solid #bd892e;
    color: #3f2a13;
    background: linear-gradient(180deg, #fff0b2, #e2b65d 55%, #c58b2f);
}
#dialog-confirm:hover { background: linear-gradient(180deg, #fff4c8, #ebc574 55%, #d49b3c); }
#form-dialog:focus, #form-dialog:focus-visible,
#form-dialog :focus, #form-dialog :focus-visible { outline: none; outline-offset: 0; }
#form-dialog[data-tone="pending"] #dialog-message { margin-bottom: 0; }
.dialog-progress { display: none; width: 26px; height: 26px; margin-bottom: 18px; border: 3px solid #ead8ac; border-top-color: #b27a21; 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; } }
/* PC 모달만 조금 확대하고 모바일의 기존 크기는 유지합니다. */
@media (min-width: 768px) {
    #form-dialog { max-width: 460px; padding: 34px; }
    #form-dialog h2 { font-size: 24px; }
    #dialog-message { font-size: 17px; }
    #dialog-confirm { height: 54px; font-size: 17px; }
}