/* contact.css */

/* ============================================================
   1. 페이지 공통
============================================================ */
.contact-page {background-color: var(--color-bg-white);}

/* ============================================================
   2. Section / Form Wrap
============================================================ */
.contact-section {padding: var(--spacing-80) 0 var(--section-padding-y-tablet);}

.contact-form-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--form-content-max);
    margin: 0 auto;
}

/* ============================================================
   3. Step Head
============================================================ */
.contact-step-head {margin-bottom: var(--spacing-32);}
.contact-step-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-12);
    margin-bottom: var(--spacing-12);
}
.contact-step-count {
    flex: 0 0 auto;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
    font-variant-numeric: tabular-nums;
}
.contact-step-progress {
    height: 4px;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-20);
    overflow: hidden;
}
.contact-step-progress-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
}
[data-step-panel="1"] .contact-step-progress-fill {width: 50%;}
[data-step-panel="2"] .contact-step-progress-fill {width: 100%;}

/* ============================================================
   3-1. Fieldset(개인정보 동의 전용) / Step Panel / Step Heading
============================================================ */
.contact-fieldset {
    min-width: 0;
    margin: 0 0 var(--spacing-48);
    padding: 0;
    border: 0;
}
.contact-fieldset:last-of-type {margin-bottom: 0;}

.contact-step-panel[hidden] {display: none;}

.contact-step-heading {
    display: block;
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}
.contact-step-heading:focus {outline: none;}

/* ============================================================
   4. Field / Label / Control
============================================================ */
.contact-field {margin-bottom: var(--spacing-24);}
.contact-field:last-child {margin-bottom: 0;}
.contact-field-text {margin-bottom: var(--spacing-16);}

.contact-field-label {
    display: block;
    margin-bottom: var(--spacing-4);
    color: var(--color-text-primary);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
}

.contact-required {color: #DC2626;}

.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="tel"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: var(--form-control-height);
    padding: 0 var(--spacing-12);
    border: 1px solid var(--form-border-default);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-white);
    color: var(--color-text-primary);
    font-size: var(--font-size-ui);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-field textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 160px;
    padding: var(--spacing-12);
    border: 1px solid var(--form-border-default);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-white);
    color: var(--color-text-primary);
    font-size: var(--font-size-ui);
    line-height: var(--line-height-base);
    resize: vertical;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: var(--color-text-secondary);
}
.contact-field input:disabled,
.contact-field textarea:disabled {
    border-color: #888888;
}
.contact-field input:focus,
.contact-field textarea:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: none;
}
.contact-field input[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"] {
    border-color: var(--color-error);
}
.contact-field input:-webkit-autofill,
.contact-field input:-webkit-autofill:hover,
.contact-field input:-webkit-autofill:focus {
    border-color: #8596AE;
    -webkit-text-fill-color: var(--color-text-primary);
    box-shadow: 0 0 0 1000px var(--color-bg-white) inset;
    transition: background-color 9999s ease-in-out 0s;
}
.contact-field input:-webkit-autofill:focus {border-color: var(--color-primary);}
.contact-field input[aria-invalid="true"]:-webkit-autofill,
.contact-field input[aria-invalid="true"]:-webkit-autofill:hover,
.contact-field input[aria-invalid="true"]:-webkit-autofill:focus {
    border-color: var(--color-error);
}
.contact-field input[type="text"][aria-invalid="true"]:focus,
.contact-field input[type="email"][aria-invalid="true"]:focus,
.contact-field input[type="tel"][aria-invalid="true"]:focus,
.contact-field textarea[aria-invalid="true"]:focus {
    border-color: var(--color-primary);
}

.contact-helper {
    margin: var(--spacing-8) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-helper);
    line-height: 1.5;
}

.contact-error {
    margin: var(--spacing-4) 0 0;
    color: var(--color-text-error);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}

/* ============================================================
   5. 답변 받으실 방법
============================================================ */
.contact-radio-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-32);
    min-height: var(--form-control-height);
}
.contact-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    padding: var(--spacing-8) 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-regular);
    cursor: pointer;
}
.contact-radio input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.contact-radio-mark {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-gray-50);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-white);
    transition: border-color var(--transition-fast);
}
.contact-radio-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.contact-radio input[type="radio"]:checked + .contact-radio-mark {border-color: var(--color-primary);}
.contact-radio input[type="radio"]:checked + .contact-radio-mark::after {opacity: 1; transform: translate(-50%, -50%) scale(1);}
.contact-radio input[type="radio"]:focus-visible + .contact-radio-mark {outline: 2px solid var(--color-primary); outline-offset: 2px;}

/* ============================================================
   6. 회사소개서
============================================================ */
.contact-file {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
}

.contact-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.contact-file-name {
    display: block;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--form-control-height);
    padding: 0 var(--spacing-12);
    border: 1px solid var(--form-border-default);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-white);
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--font-size-ui);
    line-height: calc(var(--form-control-height) - 2px);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contact-file-name.is-filled {color: var(--color-text-primary);}

.contact-file-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: var(--form-control-height);
    padding: 0 var(--spacing-20);
    border: 1px solid #8596AE;
    border-radius: var(--radius-lg);
    background-color: #F1F5F9;
    color: var(--color-gray-80);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.contact-file-button:hover {background-color: var(--color-gray-20);}
.contact-file-input:focus-visible ~ .contact-file-button {outline: 2px solid var(--color-primary); outline-offset: 2px;}

/* ============================================================
   7. 개인정보 수집·이용 동의
============================================================ */
.contact-consent-fieldset {padding-top: var(--spacing-32); border-top: 1px solid var(--color-border-light);}

.contact-consent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
    min-height: var(--touch-target-min);
}

.contact-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    min-width: 0;
    min-height: var(--touch-target-min);
    color: var(--color-text-primary);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-base);
    white-space: nowrap;
    cursor: pointer;
}
.contact-checkbox input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.contact-checkbox-mark {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-gray-50);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-white);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.contact-checkbox-mark::after {
    content: "";
    width: 5px;
    height: 9px;
    border-right: 2px solid var(--color-text-white);
    border-bottom: 2px solid var(--color-text-white);
    opacity: 0;
    transform: translateY(-1px) rotate(45deg);
}
.contact-checkbox input[type="checkbox"]:checked + .contact-checkbox-mark {border-color: var(--color-primary); background-color: var(--color-primary);}
.contact-checkbox input[type="checkbox"]:checked + .contact-checkbox-mark::after {opacity: 1;}
.contact-checkbox input[type="checkbox"][aria-invalid="true"] + .contact-checkbox-mark {border-color: var(--color-error);}
.contact-checkbox input[type="checkbox"]:focus-visible + .contact-checkbox-mark {outline: 2px solid var(--color-primary); outline-offset: 2px;}
.contact-checkbox input[type="checkbox"][aria-invalid="true"]:focus-visible + .contact-checkbox-mark {border-color: var(--color-primary);}

.contact-disclosure-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--spacing-4);
    min-height: var(--touch-target-min);
    padding: var(--spacing-8) var(--spacing-4);
    border: 0;
    background-color: transparent;
    color: var(--color-gray-50);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: color var(--transition-fast);
}
.contact-disclosure-btn:hover {color: var(--color-gray-60);}
.contact-disclosure-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.contact-disclosure-icon {
    flex: 0 0 auto;
    color: inherit;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    transition: transform var(--transition-base);
}
.contact-disclosure-btn[aria-expanded="true"] .contact-disclosure-icon {transform: rotate(180deg);}

.contact-consent-detail {
    margin-top: var(--spacing-16);
    padding: var(--spacing-16);
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-10);
}
.contact-consent-detail[hidden] {display: none;}

.contact-consent-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    margin: 0;
}
.contact-consent-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}
.contact-consent-row dt {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
}
.contact-consent-row dd {
    margin: 0;
    color: var(--color-text-body);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-base);
}

/* ============================================================
   8. Step Actions
============================================================ */
/* 모달을 제외한 단계 이동·접수와 본문 완료 CTA는 64px 높이로 통일한다. */
.contact-step-actions .button,
.contact-page [data-success-cta] {height: var(--spacing-64); min-height: var(--spacing-64);}
.contact-step-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-12);
    margin-top: var(--spacing-48);
}
[data-step-next],
[data-step-submit] {
    width: var(--form-action-width);
}
[data-step-prev] {width: 140px;}

/* ============================================================
   9. Submission Result State (Success)
============================================================ */
.contact-success {padding: var(--spacing-48) 0; text-align: center;}

.contact-success-icon {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--spacing-32);
    border-radius: var(--radius-full);
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}
.contact-success-icon span {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 14px;
    border-bottom: 3px solid currentColor;
    border-left: 3px solid currentColor;
    transform: rotate(-45deg);
}

.contact-success-title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}
.contact-success-title:focus {outline: 0;}

.contact-success-description {
    margin: var(--spacing-16) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
}

[data-success-cta] {margin-top: var(--spacing-64); width: var(--form-action-width);}

/* ============================================================
   10. 반응형 (Tablet / Mobile)
============================================================ */
@media (max-width: 1024px) {
    .contact-page .customer-page-header {text-align: center;}
}

@media (max-width: 768px) {
    [data-step-next],
    [data-success-cta] {
        width: 100%;
    }
    [data-step-prev],
    [data-step-submit] {
        flex: 1 1 0;
        width: auto;
    }
    [data-success-cta] {margin-top: var(--spacing-80);}
}

@media (max-width: 575px) {
    .contact-disclosure-btn {
        position: relative;
        justify-content: center;
        min-width: var(--touch-target-min);
    }
    .contact-disclosure-btn [data-disclosure-label] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (max-width: 480px) {
    .contact-checkbox {font-size: var(--font-size-body-sm);}
    .contact-disclosure-icon {width: var(--icon-size-sm); height: var(--icon-size-sm);}
}

@media (prefers-reduced-motion: reduce) {
    .contact-page .contact-field input,
    .contact-form textarea,
    .contact-radio-mark,
    .contact-radio-mark::after,
    .contact-checkbox-mark,
    .contact-file-button,
    .contact-disclosure-btn,
    .contact-disclosure-icon,
    .contact-page .button {
        transition: none;
    }
}