@charset "utf-8";

/*
 * File    : rwd-contact-us.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 1200px
 *  - VISUAL / FORM
 * 860px
 *  - VISUAL / FORM / POPUP / RESULT
 * 540px
 *  - VISUAL / FORM / POPUP / RESULT
 */



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    /* VISUAL */
    .contact-us__visual { min-height: 520rem; }
    .contact-us__visual-content { gap: 48rem; padding-top: 190rem; }

    /* FORM */
    .contact-us__container { padding-bottom: 150rem; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    /* VISUAL */
    .contact-us__visual { min-height: 0; padding: 150rem 24rem 64rem; }
    .contact-us__visual-content { gap: 32rem; width: auto; padding-top: 0; margin-left: 0; }
    .contact-us__visual-text { gap: 12rem; }
    .contact-us__visual-desc br { display: none; }

    /* FORM */
    .contact-us__container { padding-bottom: 120rem; }

    .contact-us__form { width: min(708rem, calc(100% - 48rem)); }

    /* INPUT */
    .contact-us__input { height: 56rem; }

    .contact-us__textarea { height: 280rem; padding: 20rem 24rem; }

    /* RADIO */
    .contact-us__radios { gap: 48rem; }

    /* POPUP */
    .contact-us__popup-layer { width: min(800rem, calc(100% - 48rem)); padding: 24rem; }

    .contact-us__popup-content { gap: 24rem; padding: 24rem; }

    .contact-us__popup-table :is( th, td ) { padding: 12rem; }

    /* RESULT */
    .contact-us__result-layer { width: min(600rem, calc(100% - 48rem)); }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    /* VISUAL */
    .contact-us__visual { padding: 130rem 16rem 48rem; }
    /* __visual 거터 16 안쪽에 콘텐츠 패딩 20 → 콘텐츠 폭 318 */
    .contact-us__visual-content { gap: 30rem; padding: 0 20rem; }
    .contact-us__visual-text { gap: 10rem; }

    /* FORM */
    .contact-us__container { padding-bottom: 96rem; }

    .contact-us__form { width: calc(100% - 48rem); gap: 28rem; }

    /* FIELD */
    .contact-us__field { gap: 10rem; }

    .contact-us__row { flex-direction: column; gap: 28rem; }

    /* INPUT */
    .contact-us__input { height: 52rem; padding: 0 16rem; }

    .contact-us__textarea { height: 240rem; padding: 16rem; }

    /* RADIO */
    .contact-us__radios { gap: 40rem; }

    .contact-us__radio { gap: 12rem; }

    /* CONSENT */
    .contact-us__field--consent { padding-top: 16rem; }

    .contact-us__consent-row { flex-direction: column; align-items: flex-start; gap: 6rem; }

    .contact-us__consent-list { gap: 14rem; }

    .contact-us__check { align-items: flex-start; gap: 12rem; }
    .contact-us__check-box { margin-top: -1rem; }

    .contact-us__view-more { margin-left: 36rem; padding: 12rem 0; }

    /* CTA */
    .contact-us__actions { padding: 24rem 0 0; }

    /* POPUP */
    .contact-us__popup-layer { width: calc(100% - 32rem); max-height: calc(100vh - 48rem); padding: 20rem 16rem; border-radius: 16rem; }

    .contact-us__popup-content { gap: 20rem; padding: 12rem 4rem; }

    .contact-us__popup-body { gap: 16rem; }

    /* TABLE (가로 스크롤 재구성) */
    .contact-us__popup-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .contact-us__popup-table thead,
    .contact-us__popup-table tbody { display: table; width: 600rem; table-layout: fixed; border-collapse: collapse; }
    .contact-us__popup-table thead { border-bottom: 1px solid var(--color-brown-100); }
    .contact-us__popup-table thead th { border-bottom: none; }
    .contact-us__popup-table tbody tr:first-child :is( th, td ) { border-top: none; }

    .contact-us__popup-notes { gap: 14rem; }

    .contact-us__popup-actions { padding-bottom: 12rem; }

    /* RESULT */
    .contact-us__result-layer { width: calc(100% - 32rem); max-height: calc(100vh - 48rem); padding: 40rem 20rem; border-radius: 16rem; }

}