:root {
    --bg: #fff;
    --text: #111;
    --line: #e6e6ea;
    --accent: #4130e0;
    --btn-disabled: #d1d1d4;
    --btn-text-disabled: #9c9cab;
    --error: #e14b4b;
    --circle-bg: #f1f3f5;
    --circle-border: #d5d8de;
    --tick-off: #9aa0a6;
    --on-bg: #f5f4fc;
}

.div_flex {display:flex;}
.model_select_wrap {align-items:flex-start; gap:10px;}
.reqFormLayer { margin: 0; padding: 30px 5% 0; background: var(--bg); color: var(--text); }
.page { max-width: 600px; min-height: 100vh; margin: 0 auto; padding: 30px 18px 0 18px; display: flex; flex-direction: column; }
.marginb30 {margin-bottom:30px;}

/* 페이지 헤더 */
.pageHeader { position: relative; display: flex; justify-content: space-between; align-items: center; padding-bottom: 60px; }
.tstoreImg { max-width: 100px; min-width:70px; width:5vw; }
.apply { font-weight: 700; font-size: 20px; position: absolute; left: 50%; transform: translateX(-50%); text-align: center; }
.submit_inner .pop-layer-inner.reqFormLayer {background:#fff;}
.submit_inner .btn_close {position:static; cursor: pointer; flex: 0 0 auto;}
.submit_inner .btn_close > img {width:30px}

/* 휴대폰 이름 */
.phoneNameWrap { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 50px; }
.phoneName { font-weight: 700; font-size: 25px; }
.phoneChkWrap { display: inline-flex; gap: 5px; align-items: center; }
.phoneCheckbox { display: inline-flex; align-items: center; cursor: pointer; font-size: 15px; gap:5px; }
.phoneChk { position: absolute; width: 0; height: 0; opacity: 0; }
.phoneChk + .icon { width: 16px; height: 16px; background-color: var(--on-bg); 
    border: 1px solid var(--circle-border); display: inline-flex; justify-content: center; align-items: center; font-size: 11px; color: var(--on-bg); transition: all 0.2s ease-in-out; }
.phoneChk:checked + .icon { background-color: var(--accent); border-color: var(--accent); color: white; }

.menuText { font-size: 16px; width: 75px; }
.deliveryForm { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 0 20px; }

/* 공통css */
.radioWrap { display: inline-block; cursor: pointer; }
.radioWrap input[type="radio"] { display: none; }

.menuBtnWrap {display: flex; flex-wrap: wrap; gap:5px;}
.menuBtn { display: inline-block; border: 1px solid var(--line); background-color: white; border-radius: 10px; width: 120px; line-height:48px;
    font-weight: 500; text-align: center; transition: background-color 0.2s, color 0.2s; }
.input_datas[type='radio']:checked + .menuBtn { background-color: var(--accent); color: white; }
.selectedInput::placeholder {color:#333;}
.field { position: relative; min-height: 80px; }

/* 이름 */
.hs_use_other_label { position: absolute; right: 0; font-size: 13px; top: -8px; }
form.deliveryForm input.hs_use_other {width: auto; height: auto; margin-right: 3px;}

/* 가입유형, 추가 사은품, 인터넷+TV */
.checkedType { display: inline-flex; align-items: center; gap: 5px; min-height: 50px;}
.checkedType.extraGiftField {padding-bottom:3px;}
form.deliveryForm input.addressField[name] { font-size: 16px; padding: 20px 0 8px; color: var(--text); background: transparent; font-weight: 600;
    border: none; border-bottom: 1px solid var(--line); border-radius:0; }
.addressInfo { position: absolute; left: 0; top: 12px; font-size: 16px; pointer-events: none; transition: all 0.2s ease; }
.addressInfo.topPin { top: -8px; font-size: 13px; }

/* 포커스 & 오류 */
form.deliveryForm input.addressField:focus { border-bottom: 2px solid var(--accent); padding-bottom:7px; }
form.deliveryForm .field.is-error .addressField { border-bottom: 2px solid var(--error); }
.field .help { font-size: 13px; color: var(--error); }
.field.is-error .help { visibility: visible; }

/* 셀렉션 */
.customSelect { position: relative; width: 100%; font-size: 16px; color: var(--text); box-shadow: inset 0 -1.5px 0 var(--line); border: none; cursor: pointer; 
    display: flex; align-items: center; gap: 8px; }
.submit_inner form .field .selectedInput { padding: 20px 0 8px; background: transparent; border: none; font-size: inherit; color: var(--text); cursor: pointer; }
.customSelect.active { box-shadow: inset 0 -2px 0 var(--accent); }
.arrow { transition: transform 0.3s ease; font-size: inherit; }
.customSelect.active .arrow { transform: rotate(180deg); }
.options { position: absolute; top: 100%; left: 0; width: 100%; max-height: 182px; overflow-y: auto; background: #fff; z-index: 10; display: none; }
.customSelect.active .options { display: block; }

/* 스크롤바 커스터마이징 */
.customSelect .options::-webkit-scrollbar { width: 6px; }
.customSelect .options::-webkit-scrollbar-thumb { background-color: var(--line); border-radius: 3px; }
.customSelect .options li { padding: 20px; cursor: pointer; background-color: var(--on-bg); }
.customSelect .options li:hover { background-color: #e2e1ed; }
.options li { border-bottom: 1px solid var(--line); }
.options li:last-child { border: none; }

/* 사은품 텍스트 */
.giftTextWrap { background-color: var(--on-bg); color: var(--accent); padding:20px; font-size: 16px; border-radius: 5px; margin-bottom: 15px; line-height:1.2; }
.giftTitle { font-weight: bold; }
.giftText::before { content: "·"; margin-right: 5px; display: inline-block; }
.giftText + .giftText { margin-top: 10px; }

/* 약관동의 */
.agree { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; color: var(--text); font-size: 16px; }
.agree .chk { position: absolute; opacity: 0; width: 0px; height: 0px; clip-path: inset(50%); }
.agree .icon { width: 22px; height: 22px; border-radius: 50%; background: #f1f1f1; border: 1.5px solid var(--circle-border); 
    display: inline-flex; align-items: center; justify-content: center; color: var(--tick-off); transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.06s ease; }
.agree .icon .fa,
.agree .icon .fas { color: inherit; font-size: 15px; }
.agree .icon i { font-size: 15px; line-height: 1; color: var(--btn-text-disabled); transition: color 0.18s ease; }
.agree .chk:checked + .icon { background: var(--on-bg); border: 2px solid var(--accent); color: var(--accent); }
.agree:active .icon { transform: scale(0.96); }
label.agree .input_datas[type="checkbox"] {width:auto;}
.agreeTitle {display:flex; justify-content: space-between; align-items:center;}
.agreeTitleArrow {transition: transform 0.3s ease; font-size: inherit;}
.agree_content_wrap.active .agreeTitleArrow {transform:rotate(180deg);}
.agree_content_wrap .agreeContent {height:0; overflow:hidden; font-size: 0.825em; line-height: 1.4;}
.agree_content_wrap.active .agreeContent {height:auto; border: 2px solid #ececec; padding: 18px 15px; border-radius: 10px; margin-top: 15px; }
.agreeContent > p {display:flex; gap:5px;}
.agreeContent > p .agree_num {min-width: 8px;}
.agreeContent > p .agree_text {width:0; flex-grow:1;}


.gnotice { margin-top:3px; color:#999;}

/* 비활성 */
.agree .chk:disabled+.icon { opacity: 0.6; }
.agree .chk:disabled~.txt { color: #b8bcc5; cursor: not-allowed; }

/* footer */
.fixBtnWrap { position: sticky; bottom: 0; background: #fff; padding: 12px 0px 36px; display: flex; justify-content: center; z-index: 10; }

form.qa_table .registerBtn { max-width: 560px; border: 0; font-weight: 700; font-size: 20px; padding: 10px 0; 
    border: none; border-radius: 10px; font-weight: bold; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; background-color: #000; color: white; transition: transform 0.1s ease, box-shadow 0.1s ease; }
form.qa_table .registerBtn:active { transform: scale(0.97); }
.applyArrow { position: absolute; right: 30px; top: 50%; transform: translate(0, -50%); }
form.qa_table .registerBtn.btnDisabled { background: #f1f1f1; color: var(--text); cursor: not-allowed; }


@media (max-width:640px){
    .customSelect .options li {padding: 3vw;}
}
@media (max-width: 500px) {
    .menuBtn {width:24vw;}
    .customSelect .options li {padding: 15px;}
}
@media (max-width: 473px) {
    .model_select_wrap {display:block; margin-bottom:30px;}
    .customSelect + .customSelect {margin-top:10px;}

    .checkedType.marginb30 {margin-bottom:20px;}
    .checkedType.extraGiftField { padding-bottom: 20px; }
}
@media (max-width: 400px) {
    .menuBtn { font-size: 14px; }
    .giftTextWrap {padding:5vw;}
}
@media (max-width: 383px) {
    /* TstoreImg, apply, applyClose 주석처리 가능 */
    .storeImg{ width: 18vw; }

    .menuBtn {width:85px;}

    .phoneNameWrap { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 14px; }
    .phoneChkRow { width: 100%; display: flex; justify-content: flex-end; }
}