/* =================================================================
   contact.css — 문의하기 페이지(contact.php) 전용
   - 불러오는 곳: contact.php ($page_styles)
   - 예전 페이지 안 <style> 블록(그대로) + 인라인 style="" 속성을 옮겨온 것
   - 상단 배너 모양은 style.css "6. 서브 페이지 상단 배너" 구역
   ================================================================= */

/* ── 섹션 틀 ── */
.contact-section {
    padding: 120px 20px 100px;
    background: #fff;
}

.contact-inner {
    max-width: 720px;
    margin: 0 auto;
}

/* ── 전송 결과 알림 (성공 = 초록, 실패 = 빨강) ── */
.contact-alert {
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 32px;
    font-size: 0.95rem;
}

.contact-alert--success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.contact-alert--error {
    background: #fdecea;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

/* ── 문의 폼 (2칸 줄 · 입력칸) ── */
.contact-form {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-field label:not(.checkbox-label) {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.04em;
}

.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field textarea {
    padding: 12px 16px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #222;
    background: #fafafa;
    transition: border-color 0.2s;
    outline: none;
    resize: none;
}

.contact-field input:focus,
.contact-field textarea:focus {
    border-color: #1a6fd4;
    background: #fff;
}

/* ── 개인정보 수집 동의 체크박스 · 방침 링크 ── */
.contact-consent {
    margin-top: 8px;
    margin-bottom: 8px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #555;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1a6fd4;
}

.privacy-link {
    color: #1a6fd4;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.2s;
}

.privacy-link:hover {
    color: #1c5aa5;
}

/* ── 보내기 버튼 ── */
.contact-submit {
    align-self: flex-start;
    padding: 14px 40px;
    background: #1a6fd4;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: background 0.2s;
}

.contact-submit:hover {
    background: #1c5aa5;
}

/* 버튼도 줄 순서 등장 애니메이션(.fade-up)에 참여.
   위 .contact-submit 의 transition(background)이 공통 등장 효과를 덮어쓰지 않도록 함께 지정 */
.contact-submit.fade-up {
    transition: opacity 0.8s ease, transform 0.8s ease, background 0.2s;
}

/* ── 반응형 (모바일 600px 이하: 입력칸 1줄, 버튼 가득) ── */
@media (max-width: 600px) {
    .contact-row {
        grid-template-columns: 1fr;
    }

    .contact-submit {
        width: 100%;
        text-align: center;
    }
}

/* ── 예전 인라인 style="" 속성을 옮긴 규칙 ── */

/* 실패 알림 안의 상세 오류 문구(<small>) */
.contact-alert--error small {
    opacity: 0.8;
    word-break: break-all;
}

/* .contact-inner 바로 뒤의 빈 여백용 div */
.contact-section > .contact-inner + div {
    margin-bottom: 90px;
}

/* 모바일(768px 이하): 배너 → 폼 사이 빈 공간 줄임 (배너 아래 여백 약 56px로 통일)
   알림 문구가 없을 때(폼이 첫 요소) 폼 위 여백도 없앰 */
@media (max-width: 768px) {
    .contact-section {
        padding-top: 56px;
    }

    .contact-inner > .contact-form:first-child {
        margin-top: 0;
    }
}