@charset "utf-8";

/*
 * File    : sub-contact-us.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * GLOBAL
 * VISUAL
 * FORM
 * POPUP
 * RESULT
 * HOVER
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
body.page-template-contact-us .main-container { padding-top: 0; padding-bottom: 0; }

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



/* **************************************** *
 * VISUAL
 * **************************************** */
.contact-us__visual { min-height: 600rem; position: relative; }

.contact-us__visual-content { display: flex; flex-direction: column; align-items: center; gap: 60rem; width: 952rem; padding-top: 222rem; margin-left: auto; margin-right: auto; text-align: center; }

.contact-us__visual-text { display: flex; flex-direction: column; gap: 16rem; }
.contact-us__visual-desc { color: var(--color-gray-700); }
.contact-us__visual-desc .jt-fill__line { --jt-fill-color: var(--color-gray-700); }



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

.contact-us__form { display: flex; flex-direction: column; gap: 36rem; width: 708rem; margin: 0 auto; }

/* FIELD */
.contact-us__field { display: flex; flex-direction: column; align-items: flex-start; gap: 12rem; }

.contact-us__row { display: flex; gap: 24rem; }
.contact-us__row .contact-us__field { flex: 1; min-width: 1rem; }

/* LABEL */
.contact-us__label { display: inline-flex; align-items: flex-start; gap: 8rem; }

.contact-us__must { flex-shrink: 0; display: block; width: 12rem; height: 12rem; font-style: normal; }
.contact-us__must svg { display: block; width: 100%; height: auto; }
.contact-us__must svg circle { fill: var(--color-graph-high); }

/* INPUT */
.contact-us__input { display: block; width: 100%; height: 60rem; padding: 0 24rem; font-family: var(--font-primary); color: var(--color-black); background: var(--color-white); border: 1px solid var(--color-gray-400); border-radius: 5rem; outline: none; transition: border-color .3s; }  /* 타이포는 마크업의 jt-typo 클래스가 공급 */

/* 국가 셀렉트: 네이티브 화살표를 감추고 셰브론 아이콘으로 통일 (국문·글로벌판 전용) */
.contact-us__select { appearance: none; -webkit-appearance: none; padding-right: 56rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4 6 8 10 4' fill='none' stroke='%23A5A5A5' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 24rem) center; background-size: 12rem 12rem; cursor: pointer; }
.contact-us__select:invalid { color: var(--color-gray-500); } /* 플레이스홀더(빈 값) 상태는 다른 필드의 ::placeholder 톤과 맞춤 */
.contact-us__select option { color: var(--color-black); }

/* 국가 커스텀 드롭다운: 토글이 인풋 룩(.contact-us__input·__select)을 그대로 입고, 셀렉트는 폼 소스로만 숨겨 유지 */
.jt-select { position: relative; width: 100%; }
.jt-select__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jt-select__toggle { text-align: left; cursor: pointer; }
.jt-select__toggle--empty { color: var(--color-gray-500); } /* 미선택 상태는 플레이스홀더 톤 */
.jt-select--open .jt-select__toggle { border-color: var(--color-brown-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 8 6 4 10 8' fill='none' stroke='%23A5A5A5' stroke-width='1.5'/%3E%3C/svg%3E"); }
.jt-select__list { position: absolute; top: calc(100% + 8rem); left: 0; right: 0; z-index: 30; max-height: 312rem; padding: 8rem; overflow-y: auto; overscroll-behavior: contain; background: var(--color-white); border: 1px solid var(--color-gray-400); border-radius: 5rem; box-shadow: 0 12rem 28rem rgba(42, 24, 13, .1); opacity: 0; visibility: hidden; translate: 0 -6rem; transition: opacity .25s, visibility .25s, translate .25s; }
.jt-select--open .jt-select__list { opacity: 1; visibility: visible; translate: 0 0; }
.jt-select__option { display: flex; align-items: center; min-height: 44rem; padding: 2rem 16rem; border-radius: 4rem; cursor: pointer; transition: background-color .15s; }
.jt-select__option--placeholder { color: var(--color-gray-500); }
.jt-select__option--active { background: var(--color-brown-500); }
.jt-select__option[aria-selected="true"] { font-weight: var(--font-weight-bold); }
.contact-us__input::placeholder { color: var(--color-gray-500); opacity: 1; }
.contact-us__input:focus { border-color: var(--color-brown-100); }
.contact-us__input:read-only:not(select):not(.jt-select__toggle) { background: var(--color-gray-100); cursor: default; } /* select·토글 버튼은 항상 :read-only 매칭이라 제외: 회색 잠금처럼 보이는 것 방지 */
.contact-us__input:read-only:focus:not(.jt-select__toggle) { border-color: var(--color-gray-400); }
.contact-us__input[readonly]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* 읽기 전용은 포커스에도 테두리를 바꾸지 않아 윤곽선으로 위치를 보인다. 텍스트 입력이라 마우스로 눌러도 보인다 */
.contact-us__input:read-only:focus::placeholder { color: var(--color-gray-500); }  /* reset 의 포커스 시 플레이스홀더 숨김을 되돌린다: readonly 는 캐럿이 없어 빈 박스로 보임 */

.contact-us__textarea { height: 320rem; padding: 28rem 24rem; overflow: auto; resize: none; }

/* ERROR */
.contact-us__error { display: none; color: var(--color-graph-high); }
.contact-us__field--error .contact-us__error { display: block; }

/* RADIO */
.contact-us__radios { display: flex; gap: 60rem; }

.contact-us__radio { display: flex; align-items: center; gap: 16rem; position: relative; cursor: pointer; }
.contact-us__radio input { position: absolute; width: 1rem; height: 1rem; opacity: 0; }

.contact-us__radio-box { flex-shrink: 0; display: block; width: 24rem; height: 24rem; position: relative; border: 1px solid var(--color-gray-400); border-radius: 50%; transition: border-color .3s; }
.contact-us__radio-box:after { content: ''; width: 12rem; height: 12rem; margin: -6rem 0 0 -6rem; position: absolute; top: 50%; left: 50%; background: var(--color-black); border-radius: 50%; opacity: 0; transition: opacity .3s; }
.contact-us__radio input:checked ~ .contact-us__radio-box { border-color: var(--color-black); }
.contact-us__radio input:checked ~ .contact-us__radio-box:after { opacity: 1; }
.contact-us__radio input:focus-visible ~ .contact-us__radio-box { outline: 2px solid var(--color-primary); outline-offset: 2px; }

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

.contact-us__consent-row { display: flex; align-items: flex-end; gap: 10rem; }

.contact-us__consent-list { display: flex; flex-direction: column; gap: 12rem; }

.contact-us__check { display: flex; align-items: center; gap: 16rem; position: relative; cursor: pointer; }
.contact-us__check input { position: absolute; width: 1rem; height: 1rem; opacity: 0; }
.contact-us__check span { color: var(--color-gray-700); transition: color .3s; }
.contact-us__check input:checked ~ span { color: var(--color-black); }

.contact-us__check-box { flex-shrink: 0; display: block; width: 24rem; height: 24rem; position: relative; border: 1px solid var(--color-gray-400); transition: background-color .3s, border-color .3s; }
.contact-us__check-box:after { content: ''; width: 10rem; height: 6rem; margin: -6rem 0 0 -6rem; position: absolute; top: 50%; left: 50%; border-left: 2rem solid var(--color-white); border-bottom: 2rem solid var(--color-white); transform: rotate(-45deg); opacity: 0; transition: opacity .3s; }
.contact-us__check input:checked ~ .contact-us__check-box { background: var(--color-black); border-color: var(--color-black); }
.contact-us__check input:checked ~ .contact-us__check-box:after { opacity: 1; }
.contact-us__check input:focus-visible ~ .contact-us__check-box { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.contact-us__view-more { padding: 2rem 0; color: var(--color-black); background: none; border: none; cursor: pointer; transition: color .3s; }

/* CTA */
.contact-us__actions { display: flex; justify-content: center; padding: 30rem 0; }



/* **************************************** *
 * POPUP
 * **************************************** */
.contact-us__popup { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900; }

.contact-us__popup-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--color-overlay-dialog); }

.contact-us__popup-layer { display: flex; flex-direction: column; width: 800rem; max-height: calc(100vh - 80rem); padding: 30rem; position: absolute; top: 50%; left: 50%; background: var(--color-white); border-radius: 24rem; outline: none; overflow-y: auto; overscroll-behavior: contain; transform: translate(-50%, -50%); }

.contact-us__popup-content { display: flex; flex-direction: column; gap: 30rem; padding: 30rem; }

.contact-us__popup-title { display: block; }

.contact-us__popup-body { display: flex; flex-direction: column; gap: 20rem; }

/* TABLE */
.contact-us__popup-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.contact-us__popup-table :is( th, td ) { padding: 16rem; border: 1px solid var(--color-brown-100); text-align: left; vertical-align: middle; }
.contact-us__popup-table :is( th, td ):first-child { border-left: none; }
.contact-us__popup-table :is( th, td ):last-child { border-right: none; }
.contact-us__popup-table th { background: var(--color-brown-500); }

/* NOTES */
.contact-us__popup-notes { display: flex; flex-direction: column; gap: 20rem; margin-top: 4rem; color: var(--color-gray-700); }

.contact-us__popup-actions { display: flex; justify-content: center; padding-bottom: 30rem; }



/* **************************************** *
 * RESULT (전송 결과 모달)
 * **************************************** */
.contact-us__result { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; z-index: 1000; }
.contact-us__result-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--color-overlay-dialog); }

.contact-us__result-layer { display: flex; flex-direction: column; align-items: center; width: 600rem; max-height: calc(100vh - 80rem); padding: 50rem 40rem; position: absolute; top: 50%; left: 50%; text-align: center; background: var(--color-white); border-radius: 24rem; outline: none; overflow-y: auto; overscroll-behavior: contain; transform: translate(-50%, -50%); }
.contact-us__result-layer > * { flex-shrink: 0; } /* 높이가 모자라면 자식이 줄어들지 않고 레이어 안에서 스크롤된다 */

.contact-us__result-icon { flex-shrink: 0; display: block; width: 60rem; height: 60rem; position: relative; background: var(--color-brown-500); border-radius: 99rem; }
.contact-us__result-icon:before,
.contact-us__result-icon:after { content: ''; display: none; position: absolute; }

.contact-us__result--success .contact-us__result-icon:before { display: block; width: 22rem; height: 11rem; top: 21rem; left: 18rem; border-left: 2rem solid var(--color-black); border-bottom: 2rem solid var(--color-black); transform: rotate(-45deg); }

.contact-us__result--fail .contact-us__result-icon:before,
.contact-us__result--fail .contact-us__result-icon:after { display: block; width: 24rem; height: 2rem; top: 29rem; left: 18rem; background: var(--color-black); }
.contact-us__result--fail .contact-us__result-icon:before { transform: rotate(45deg); }
.contact-us__result--fail .contact-us__result-icon:after { transform: rotate(-45deg); }

.contact-us__result-title { margin-top: 26rem; }
.contact-us__result-desc { margin-top: 16rem; }
.contact-us__result-close { margin-top: 30rem; }

.contact-us__result-text { display: none; }
.contact-us__result--success .contact-us__result-text--success { display: inline; }
.contact-us__result--fail .contact-us__result-text--fail { display: inline; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* INPUT */
    .contact-us__input:not(:read-only):hover { border-color: var(--color-gray-600); }
    .jt-select__option:hover { background: var(--color-brown-500); }
    .jt-select:not(.jt-select--open) .jt-select__toggle:hover { border-color: var(--color-gray-600); }
    .contact-us__input:not(:read-only):focus:hover { border-color: var(--color-brown-100); }

    /* RADIO */
    .contact-us__radio:hover .contact-us__radio-box { border-color: var(--color-gray-600); }
    .contact-us__radio:hover input:checked ~ .contact-us__radio-box { border-color: var(--color-black); }

    /* CHECK */
    .contact-us__check:hover .contact-us__check-box { border-color: var(--color-gray-600); }
    .contact-us__check:hover input:checked ~ .contact-us__check-box { border-color: var(--color-black); }

    /* VIEW MORE */
    .contact-us__view-more:hover { text-decoration: underline; }

}