@font-face {
    font-family: Pretendard;
    src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Pretendard;
    src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: Pretendard;
    src: url('../fonts/Pretendard-Bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: light;
    font-family: Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    color: #635a54;
    background: #f7f4f2;
    font-synthesis: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, p, ul, fieldset { margin: 0; }
body { -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, select, label { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.landing-page { width: 100%; max-width: 440px; margin-inline: auto; }
.inquiry {
    padding: 76px 22px 80px;
    background:
        linear-gradient(180deg, transparent 65%, #ece4e1 100%),
        linear-gradient(100deg, #e3c6b4 0%, #e6d4c9 55%, #e7d9d0 100%);
}
.inquiry-header { text-align: center; }
.inquiry-header h1 {
    margin: 0 0 38px;
    color: #52453d;
    font-size: clamp(1.625rem, 7.15vw, 2rem);
    font-weight: 700;
    line-height: 1.375;
    letter-spacing: -0.045em;
    word-break: keep-all;
}
.form-field { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.form-field > label, .form-field legend {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.035em;
}
.form-field input[type='text'], .form-field input[type='tel'], .form-field select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 16px 18px;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #635a54;
    font-size: 1.125rem;
    line-height: 1.25;
    letter-spacing: -0.035em;
}
.form-field input::placeholder { color: #beb3ab; opacity: 1; }
.form-field select {
    appearance: none;
    padding-right: 48px;
    background-image: url('../images/selct_arrow.svg');
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 16px;
    cursor: pointer;
}
input:focus-visible, select:focus-visible, button:focus-visible {
    outline: 2px solid #635a54;
    outline-offset: 3px;
}
.concern-options { display: flex; flex-wrap: wrap; gap: 8px; }
.concern-option { position: relative; max-width: 100%; cursor: pointer; }
.concern-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.concern-label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 48px;
    padding: 11px 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: -0.045em;
    word-break: keep-all;
    overflow-wrap: anywhere;
    transition: background-color 150ms, color 150ms;
}
.check-icon {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: #a9a39f;
    background: #f2ebe8;
}
.check-icon::before {
    content: '';
    width: 13px;
    height: 7px;
    margin-top: -4px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
}
.concern-option input:checked + .concern-label { background: #635a54; color: #fff; }
.concern-option input:checked + .concern-label .check-icon { background: #372e28; color: #fff; }
.concern-option input:focus-visible + .concern-label { outline: 2px solid #635a54; outline-offset: 3px; }
.consent-card {
    margin-bottom: 20px;
    padding: 18px 16px;
    border: 1px solid #bbaa9e;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.65);
}
.consent-field { margin-bottom: 0; }
.consent-field legend { margin-bottom: 4px; color: #52453d; font-weight: 700; }
.consent-options { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 10px; }
.consent-options label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.consent-options input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: #635a54; }
.consent-details { padding-left: 18px; font-size: 0.875rem; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
.consent-details li + li { margin-top: 6px; }
.submit-button {
    display: block;
    width: 100%;
    min-height: 64px;
    padding: 18px;
    border: 0;
    border-radius: 6px;
    background: #635a54;
    color: #fff;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
}
.submit-button:hover { background: #52453d; }
.submit-button:disabled { opacity: 0.7; cursor: wait; }
.form-error { margin-top: 8px; color: #8a3426; font-size: 0.875rem; line-height: 1.5; }
.form-error:empty { display: none; }
.form-field [aria-invalid='true'] { border-color: #8a3426; }
.form-notice { margin-bottom: 28px; padding: 18px; border: 1px solid #8d796b; border-radius: 6px; background: #fff9f4; line-height: 1.5; }
.form-notice p { margin-top: 6px; }
.form-notice-error { color: #8a3426; border-color: #8a3426; }
.treatment-notes { margin-top: 28px; padding: 0; list-style: none; }
.treatment-notes li { position: relative; padding-left: 10px; font-size: 1rem; line-height: 1.3; letter-spacing: -0.045em; word-break: keep-all; overflow-wrap: anywhere; }
.treatment-notes li + li { margin-top: 6px; }
.treatment-notes li::before { content: '*'; position: absolute; left: 0; }

@media (max-width: 400px) {
    .inquiry { padding-inline: 20px; }
    .concern-label { gap: 6px; padding-inline: 12px; font-size: 1rem; }
    .note-break { display: none; }
}
@media (max-width: 350px) {
    .inquiry { padding: 56px 16px 60px; }
    .inquiry-header h1 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .concern-label { transition: none; }
}