/* =========================================================
   문의 페이지 전체 폰트
========================================================= */

/* 문의 페이지 전체 */
#top .page-head,
#top .page-head h1,
#top .contact-main-section,
#top .contact-section,
#top .contact-descript,
#top .contact-intro__title,
#top .contact-intro__text,
#top .contact-form-area,
#top .contact-box {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}


/* Contact Form 7 폼 요소 */
#top .contact-box input,
#top .contact-box textarea,
#top .contact-box select,
#top .contact-box button,
#top .contact-box label,
#top .contact-box .txt,
#top .contact-box .wpcf7-acceptance,
#top .contact-box .submit-btn {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}

/* =========================================================
   1. 문의 페이지 최상단 배너
========================================================= */

/* 메뉴와 배너 사이 Enfold 기본 여백 제거 */
#top #main .container_wrap:has(.page-head) {
    margin-top: 0 !important;
}

#top #main .container_wrap:has(.page-head) .content {
    padding-top: 0 !important;
}

/* 최상단 배너 */
#top .page-head {
    position: relative;

    width: 100vw;
    min-height: 65vh;

    margin-left: calc(50% - 50vw);
    padding: 0;

    display: flex;
    align-items: center;

    background-color: #f0f4f2;

    box-sizing: border-box;
    overflow: hidden;
}

/* 배너 내부 콘텐츠 */
#top .page-head__inner {
    position: relative;
    z-index: 2;

    width: calc(100% - 80px);
    max-width: 1400px;

    margin: 0 auto;
}

/* 배너 제목 */
#top .page-head h1 {
    margin: 0;
    padding: 0;

    font-size: clamp(48px, 7vw, 90px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.04em;

    color: #333232;

    text-transform: none !important;
}


/* =========================================================
   2. 문의 메인 영역 : 설명문구 + 문의폼
========================================================= */
#top .contact-section {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding: 120px 0;

    display: grid;

    /* 설명보다 문의폼을 더 넓게 */
    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(0, 1.35fr);

    gap: clamp(60px, 7vw, 110px);

    align-items: start;

    box-sizing: border-box;
}

/* 문의 설명 영역 */
#top .contact-descript {
    min-width: 0;
}

/* 문의폼 영역 */
#top .contact-form-area {
    min-width: 0;
}


/* =========================================================
   3. 문의 설명 Scroll Reveal
========================================================= */

/* 등장 전 */
#top .contact-descript {
    opacity: 0;
    transform: translateY(40px);

    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* common.js에서 is-visible 추가 */
#top .contact-descript.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   4. 문의 설명 텍스트
========================================================= */
#top .contact-intro__title {
    margin: 0 0 24px;

    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;

    color: #111;

    text-transform: none !important;
}

#top .contact-intro__text {
    margin: 0;

    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 400;
    line-height: 1.8;

    color: #666;
}


/* =========================================================
   5. Contact Form 7
========================================================= */

/* 각 항목 */
#top .contact-box .row {
    width: 100%;

    /* 항목과 항목 사이 간격 */
    margin: 0 0 40px !important;
    padding: 0 !important;
}


/* label 전체 폭 */
#top .contact-box .row label {
    display: block;
    width: 100%;

    margin: 0 0 4px !important;
    padding: 0 !important;
}


/* 항목명 */
#top .contact-box .txt {
    display: block;

    /* 항목명과 입력창 사이 간격 */
    margin: 0 0 15px !important;
    padding: 0 !important;

    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;

    color: #111;
}


/* CF7 입력창 wrapper */
#top .contact-box .row .wpcf7-form-control-wrap {
    display: block;
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
}


/* 입력창 자체 여백 제거 */
#top .contact-box .row input,
#top .contact-box .row textarea {
    margin: 0 !important;
}


/* CF7 / WordPress 자동 p 여백 제거 */
#top .contact-box p {
    margin: 0 !important;
    padding: 0 !important;
}


/* 불필요한 br 간격 방지 */
#top .contact-box .row br {
    display: none;
}



/* =========================================================
   6. 일반 입력창, 문의 내용
========================================================= */

/* 입력창 스타일 통일 */
#top .contact-box input[type="text"],
#top .contact-box input[type="email"],
#top .contact-box input[type="tel"],
#top .contact-box textarea {
    width: 100%;

    padding: 0 15px;

    border: 1px solid #d5d5d5;
    border-radius: 10px;

    background-color: #fff !important;
    background-image: none !important;

    font-size: 16px;
    color: #222;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* 일반 입력창 높이 */
#top .contact-box input[type="text"],
#top .contact-box input[type="email"],
#top .contact-box input[type="tel"] {
    height: 46px;
}


/* 문의내용 */
#top .contact-box textarea {
    min-height: 180px;

    padding: 15px;

    line-height: 1.7;

    resize: vertical;
}


/* focus 공통 */
#top .contact-box input[type="text"]:focus,
#top .contact-box input[type="email"]:focus,
#top .contact-box input[type="tel"]:focus,
#top .contact-box textarea:focus {
    border-color: #06283d;

    outline: none;

    background-color: #fff !important;

    box-shadow:
        0 0 0 2px rgba(6, 40, 61, 0.08);
}



/* =========================================================
   7. 개인정보 처리방침
========================================================= */

#top .contact-box .agreebox {
    margin-top: 8px;
}

#top .contact-box .agreebox textarea {
    width: 100%;
    min-height: 220px;

    padding: 20px;

    border: 1px solid #ddd;

    background-color: #fafafa;

    font-size: 18px !important;
    font-weight: 400;
    line-height: 1.8;

    color: #000 !important;

    box-sizing: border-box;

    resize: none;
}



/* =========================================================
   8. 개인정보 동의 체크박스
========================================================= */

#top .contact-box .wpcf7-acceptance {
    display: flex;
    justify-content: flex-end;

    margin-top: 20px;
}


#top .contact-box .wpcf7-acceptance label {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    font-size: 14px;
    color: #444;

    cursor: pointer;
}


#top .contact-box .wpcf7-acceptance input[type="checkbox"] {
    width: 18px;
    height: 18px;

    margin: 0;

    cursor: pointer;

    accent-color: #222;
}


/* CF7 기본 list-item 여백 제거 */
#top .contact-box .wpcf7-list-item {
    margin: 0;
}



/* =========================================================
   9. 문의하기 버튼
========================================================= */

#top .contact-box .center {
    display: flex;
    justify-content: center;

    margin-top: 45px;
}


#top .contact-box .submit-btn {
    min-width: 180px;
    height: 52px;

    padding: 0 35px;

    border: 1px solid #222;
    border-radius: 3px;

    background-color: #000 !important;

    color: #fff;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* hover */
#top .contact-box .submit-btn:hover {
    background-color: #000 !important;
    color: #fff;
}


/* keyboard focus */
#top .contact-box .submit-btn:focus {
    outline: 2px solid #555;
    outline-offset: 3px;
}

/* =========================================================
   문의 메인 영역 - Color Section 화면 채우기
========================================================= */

/* Color Section 전체 높이 */
#top .contact-main-section {
    min-height: 90vh;

    display: flex;
    align-items: center;

    box-sizing: border-box;
}


/* Enfold 기본 container 폭 제한 해제 */
#top .contact-main-section > .container {
    width: 100%;
    max-width: none;

    margin: 0;
    padding-left: 0;
    padding-right: 0;
}


/* Enfold content 기본 상하 여백 제거 */
#top .contact-main-section .content {
    width: 100%;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* 설명문구 + 문의폼 */
#top .contact-main-section .contact-section {
    width: min(1400px, calc(100% - 80px));
    max-width: 1400px;

    margin: 0 auto;

    /* 기존 120px보다 조금 줄임 */
    padding: 80px 0;

    /* 왼쪽 설명과 오른쪽 폼의 시작점을 맞춤 */
    align-items: start;
}

/* =========================================================
   Contact Page 폰트
========================================================= */

/* 문의 페이지 전체 폰트 */
#top .page-head,
#top .contact-main-section,
#top .contact-section,
#top .contact-box,
#top .contact-box input,
#top .contact-box textarea,
#top .contact-box select,
#top .contact-box button,
#top .contact-box label {
    font-family: Arial, sans-serif !important;
}


/* 상단 배너 제목 */
#top .page-head h1 {
    font-family: Arial, sans-serif !important;

    font-weight: 500 !important;
    letter-spacing: -0.055em;
    line-height: 1;
}


/* 문의 설명 큰 제목 */
#top .contact-intro__title {
    font-family: Arial, sans-serif !important;

    font-size: clamp(38px, 4.4vw, 62px);
    font-weight: 500 !important;
    line-height: 1.12;
    letter-spacing: -0.055em;

    color: #111f2a;
}


/* 문의 설명 본문 */
#top .contact-intro__text {
    font-family: Arial, sans-serif !important;

    font-size: 16px;
    font-weight: 400 !important;
    line-height: 1.8;
    letter-spacing: 0;

    color: #617481;
}


/* Contact Form 항목명 */
#top .contact-box .txt {
    font-family: Arial, sans-serif !important;

    font-size: 18px;
    font-weight: 500 !important;
    line-height: 1.3;
    letter-spacing: -0.02em;

    color: #142a38;
}


/* 입력 내용 */
#top .contact-box input[type="text"],
#top .contact-box input[type="email"],
#top .contact-box input[type="tel"],
#top .contact-box textarea {
    font-family: Arial, sans-serif !important;

    font-size: 16px;
    font-weight: 400 !important;
    letter-spacing: 0;

    color: #222;
}


/* 개인정보 문구 */
#top .contact-box .agreebox textarea {
    font-family: Arial, sans-serif !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75;
}


/* 개인정보 동의 문구 */
#top .contact-box .wpcf7-acceptance label {
    font-family: Arial, sans-serif !important;

    font-size: 14px;
    font-weight: 400 !important;
}


/* 문의 버튼 */
#top .contact-box .submit-btn {
    font-family: Arial, sans-serif !important;

    font-size: 15px;
    font-weight: 600 !important;
    letter-spacing: 0;
}


/* =========================================================
   Contact - Form Focus Layout
========================================================= */

/* 작은 섹션 라벨 */
#top .contact-eyebrow,
#top .contact-form-label {
    margin: 0;

    font-family: Arial, sans-serif !important;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.14em;

    color: #008fc7;
}


/* 왼쪽 CONTACT 라벨 */
#top .contact-eyebrow {
    margin-bottom: 28px;
}


/* 왼쪽 설명은 짧고 좁게 유지 */
#top .contact-intro__text {
    max-width: 420px;
}


/* 오른쪽 문의폼 */
#top .contact-form-area {
    width: 100%;
    min-width: 0;
}


/* 문의폼 상단 라벨 */
#top .contact-form-label {
    margin-bottom: 38px;

    padding-bottom: 18px;

    border-bottom: 1px solid #cbd3d6;
}


/* =========================================================
   Contact Page - Mobile
   767px 이하에서만 적용
========================================================= */
@media only screen and (max-width: 767px) {

    /* ---------------------------------------------------------
       1. 상단 Hero
    --------------------------------------------------------- */
    #top .page-head {
        min-height: 48vh;
    }

    #top .page-head__inner {
        width: calc(100% - 30px);
        max-width: none;
    }

    #top .page-head h1 {
        font-size: 42px;
        line-height: 1.05;
    }


    /* ---------------------------------------------------------
       2. 문의 메인 영역
       PC의 90vh 강제 높이 해제
    --------------------------------------------------------- */
    #top .contact-main-section {
        min-height: auto;
        display: block;
    }


    /* ---------------------------------------------------------
       3. 설명문구 + 문의폼
       2열 → 1열
    --------------------------------------------------------- */
    #top .contact-main-section .contact-section,
    #top .contact-section {
        width: calc(100% - 30px);
        max-width: none;

        margin: 0 auto;
        padding: 64px 0;

        grid-template-columns: 1fr;
        gap: 55px;

        align-items: start;
    }


    /* ---------------------------------------------------------
       4. 문의 설명 제목
    --------------------------------------------------------- */
    #top .contact-intro__title {
        margin-bottom: 20px;

        font-size: 36px;
        line-height: 1.15;
    }

    #top .contact-intro__text {
        font-size: 15px;
        line-height: 1.75;
    }

    #top .contact-eyebrow {
        margin-bottom: 20px;
    }

    #top .contact-form-label {
        margin-bottom: 30px;
    }


    /* ---------------------------------------------------------
       5. Contact Form 항목 간격
    --------------------------------------------------------- */
    #top .contact-box .row {
        margin-bottom: 30px !important;
    }

    #top .contact-box .txt {
        margin-bottom: 12px !important;

        font-size: 17px;
    }


    /* ---------------------------------------------------------
       6. 일반 입력창
    --------------------------------------------------------- */
    #top .contact-box input[type="text"],
    #top .contact-box input[type="email"],
    #top .contact-box input[type="tel"] {
        height: 46px;
        font-size: 16px;
    }

    #top .contact-box textarea {
        min-height: 150px;

        font-size: 16px;
    }


    /* ---------------------------------------------------------
       7. 개인정보 처리방침
    --------------------------------------------------------- */
    #top .contact-box .agreebox textarea {
        min-height: 180px;

        padding: 16px;

        font-size: 14px !important;
        line-height: 1.65;
    }


    /* ---------------------------------------------------------
       8. 개인정보 동의
    --------------------------------------------------------- */
    #top .contact-box .wpcf7-acceptance {
        justify-content: flex-start;

        margin-top: 16px;
    }

    #top .contact-box .wpcf7-acceptance label {
        align-items: flex-start;

        font-size: 13px;
        line-height: 1.5;
    }


    /* ---------------------------------------------------------
       9. Contact Us 버튼
    --------------------------------------------------------- */
    #top .contact-box .center {
        margin-top: 36px;
    }

    #top .contact-box .submit-btn {
        width: 100%;
        min-width: 0;
        height: 52px;
    }
}