.radioListWarp {}
.radioList {display:flex; align-items:center; border-radius:6px; overflow:hidden;}
.radioList input {display:none; appearance:none;}
.radioList input + label {position:relative; padding:10px 0; font-size:15px; color:#848484; background:#fff; font-weight:500; text-align:center;}
.radioList span {width:33.33%;}
.radioList span:nth-child(2) {border-right:1px solid #E6EBF3; border-left:1px solid #E6EBF3;  }
.radioList input:checked + label {background:#8896AC; color:#fff;}

.formAgree ul {display:flex; flex-direction:column; gap:3px;}
.formAgree li {display:flex; align-items:center; justify-content:space-between;}
.formAgree input {display:none; appearance:none;}
.formAgree input + label {position:relative; font-size:13px; font-weight:500; color:#848484; padding:0 0 0 35px;}
.formAgree input + label:before {content:''; position:absolute; top:50%; left:11px; transform:translate(0, -50%);  width:17px; height:17px; border-radius:100%;
background:url('/dsn/_img/ico_check_w.webp') no-repeat center #E0E0E0; background-size:13px;}
.formAgree input:checked + label:before {background:url('/dsn/_img/ico_check_w.webp') no-repeat center #8896AC; background-size:13px;}
.formAgree a {margin-right:10px; font-size:13px; color:#848484;  font-weight:500;}
.formAgree .es {color:#454545;}
.formAgree .ch {color:#848484;}

.formAgree .all {margin-bottom:5px;}
.formAgree .all input + label  {padding:8px 8px 8px 38px; width:100%;background:#f0f0f0; border-radius:30px; font-size:15px; font-weight:600;}
.formAgree .all input + label:before {left:10px; width:20px; height:20px; background:url('/dsn/_img/ico_check_w.webp') no-repeat center #f0f0f0; background-size:17px;}
.formAgree .all input:checked + label:before {background:url('/dsn/_img/ico_check_w.webp') no-repeat center; background-size:17px;}
.formAgree .all input:checked + label  {background:#23232A; color:#fff;}


.popWrap .popContWrap {box-shadow:none !important; margin:0; width:100%; border-radius:0; overflow-x:hidden;}
.popWrap .popContWrap .popTool {top:9px; right:16px; cursor:pointer;}
.popWrap .popContWrap .popTool i {display:block; width:30px; height:30px; background:url('/dsn/_img/ico_close.webp') no-repeat center; background-size:24px;}
.popWrap .popContWrap .popTool i::before {display:none;}
/* 모바일 : 약관 팝업은 화면 높이에 맞추고 popBody 안(termCont)에서만 스크롤한다 */
/* PC 는 @media(min-width:1280px) 의 height:620px 이 높이를 잡아주지만 모바일엔 높이가 없어 팝업 전체가 늘어난다 */
.popWrap:has(.termWrap) {overflow:hidden;}
.popWrap .popContWrap:has(> .popBody > .termWrap) {height:100%; max-height:100%; min-height:0;}


#popup {position:relative; min-width:100%; min-height:100vh;}
#popup .formWrap {padding:0 20px;}

.counsel .info {padding:50px 20px 20px 20px; margin-bottom:20px;  background:#E6EBF3; box-shadow:3px 5px 5px rgba(0 0 0 / 10%); border-radius:0 0 30px 30px;}
.counsel .info h3.tit {font-size:20px;}
.counsel .info .con {display:flex; align-items:center; justify-content:space-between; padding:17px 20px 19px 22px; background:#1D2C65;  border-radius:20px; color:#fff;}
.counsel .info h3 {font-size:14px; font-weight:500;}
.counsel .info .tel a {position:relative; left:-2px; margin-top:2px; font-size:24px; font-weight:800;}
.counsel .info .kakao a {width:45px; height:45px; display:flex; align-items:center; justify-content:center; /*border-radius:100%;  background:#FFEA00;*/}
.counsel .info .kakao a img { /* width:20px; */}

.counsel .formList {display:flex; flex-direction:column; gap:7px; }
.counsel .formList li.inline {position:relative; border:1px solid #E6EBF3; border-radius:10px; overflow:hidden; }
.counsel .formList li.inline label {position:absolute; top:50%; left:15px; transform:translate(0, -50%); font-size:13px;  color:#848484; width:47px; overflow:hidden; white-space:nowrap;}
.counsel .formList li.inline label.spacing-2 {letter-spacing:18px;}
.counsel .formList li.inline label.spacing-3 {letter-spacing:2.8px;}
.counsel .formList li.inline label .fc-r {position:absolute; top:-1px; right:0; letter-spacing:0;}
.counsel .formList li.inline input {width:100%; padding:13px 15px 13px 75px; font-size:14px; background:#fff; }
.counsel .formList li.inline input:focus {border-bottom:1px solid #2D52DE;}
.counsel .formList li.inline .input {width:100%; padding:13px 15px 13px 75px; font-size:14px;  background:#E6EBF3; border:1px solid #E6EBF3;}


.counsel button.sendBtn {width:100%; padding:15px 0; font-size:19px; font-weight:700; color:#fff; background:#2D52DE; border-radius:30px; letter-spacing:-0.5px;}
.counsel button.kakaoBtn {margin-top:10px; width:100%; display:flex; align-items:center; justify-content:center; gap:7px; padding:15px 0; font-size:19px; font-weight:700; color:#000; background:#FFEA00; border-radius:30px; letter-spacing:-0.5px;}
.counsel button.kakaoBtn .ico {width:20px; height:20px;}

.counsel .formAgree {margin:20px auto;}


#popup .popupMid {padding:50px 20px 20px 20px; margin-bottom:20px;  background:#E6EBF3; box-shadow:3px 5px 5px rgba(0 0 0 / 10%); border-radius:0 0 30px 30px;}
#popup .popupMid .container {padding:0;}

/* 신원확인 팝업 (방문·전화 권유 판매원) */
#popup.finProtectMem .popupMid .tit {font-size:18px; font-weight:700; color:#2f3253;}
/* .popupCon 은 배경이 없어 팝업 박스 밖으로 떠 보인다 → csPopVip 의 .formWrap 규격을 따른다 */
#popup.finProtectMem .popupCon {padding:20px; background:#fff; border-radius:20px;}
#popup.finProtectMem .popupCon img {width:100%; border-radius:12px;}
#popup.finProtectMem .staffVerifyInfo {padding:10px 0 0 0; text-align:center; font-size:15px; line-height:1.6; color:#636363;}
#popup.finProtectMem .staffVerifyNone {padding:40px 20px; text-align:center; font-size:15px; line-height:1.6; color:#888;}

/* 로그인·회원가입 팝업 (.counsel 스코프의 formList·sendBtn 을 그대로 쓴다) */
#popup.csPopAuth .info {padding:50px 20px 24px 20px;}
#popup.csPopAuth .info .tit {font-size:22px; font-weight:700; color:#2f3253;}
#popup.csPopAuth .formList {display:flex; flex-direction:column; gap:8px;}
#popup.csPopAuth button.sendBtn {margin-top:16px; padding:14px 0; width:100%; border-radius:50px; background:#281FA1; color:#fff; font-size:16px; font-weight:700;}
#popup.csPopAuth .naverBtn {margin-top:10px; padding:14px 0; width:100%; border-radius:50px; background:#03C75A; color:#fff; font-size:16px; font-weight:700;
display:flex; align-items:center; justify-content:center; gap:8px;}
#popup.csPopAuth .naverBtn .ico {display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:4px; background:#fff; color:#03C75A; font-size:13px; font-weight:900;}
#popup.csPopAuth .authLink {padding:22px 0 30px 0; text-align:center; font-size:14px; color:#636363;}
#popup.csPopAuth .authLink a {margin-left:4px; font-weight:700; color:#281FA1; text-decoration:underline;}
#popup.csPopAuth .authAgree {padding:16px 0 0 0;}
#popup.csPopAuth .authGuide {padding:0 0 6px 0; font-size:13px; line-height:1.5; color:#888;}
/* 문자인증 행 : 입력칸 + 오른쪽 버튼 */
#popup.csPopAuth .joinCertRow {display:flex; align-items:stretch; gap:6px;}
#popup.csPopAuth .joinCertRow input {width:calc(100% - 86px);}
#popup.csPopAuth .certBtn {flex-shrink:0; width:80px; border-radius:8px; background:#3b4351; color:#fff; font-size:13px; font-weight:600;}
#popup.csPopAuth #joinCertMsg {padding:8px 0 0 0; min-height:20px; font-size:13px;}
/* [1] 약관동의 단계 */
#popup.csPopAuth .joinLead {padding:4px 0 18px 0; font-size:17px; line-height:1.5; color:#2f3253;}
#popup.csPopAuth .joinLead .bold {font-weight:700;}
#popup.csPopAuth .formAgree {padding:0;}
#popup.csPopAuth .formAgree li.all .allDesc {padding:4px 0 12px 26px; font-size:12px; line-height:1.4; color:#888;}
#popup.csPopAuth .formAgree li {display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 0; flex-wrap:wrap;}
#popup.csPopAuth .formAgree li.all {display:block; padding:0 0 4px 0; border-bottom:1px solid #ececec; margin-bottom:8px;}
#popup.csPopAuth .formAgree li a {flex-shrink:0; font-size:12px; color:#888; text-decoration:underline;}
#popup.csPopAuth .formAgree li .es {color:#281FA1; font-weight:700;}
#popup.csPopAuth #joinStep1Msg {padding:8px 0 0 0; min-height:20px; font-size:13px;}

#popup.search .mTit {padding:0;}
#popup.search .mTit.between {margin-bottom:12px; flex-direction:row; align-items:center; justify-content:space-between;}
#popup.search .mTit.between a.all {  font-size:14px; font-weight:600; color:#818aa7;}
#popup.search .searchForm {margin-top:10px; display:flex; aling-items:stretch; gap:10px;}
#popup.search .searchForm input {width:calc(100% - 70px); padding:12px 14px; border-radius:10px; font-size:13px; }
#popup.search .searchForm button {width:60px; background:#281FA1; color:#fff; font-size:14px; font-weight:600; border-radius:10px;}
.popEventList {display:flex; flex-wrap:wrap; gap:8px;}
.popEventList .list {width:calc(50% - 4px); height:105px;  border-radius:12px; overflow:hidden;}


#popup.csPopVip .popupMid .container {position:relative; color:#2f3253; }
#popup.csPopVip .popupMid h2 { font-size:22px; font-weight:700; white-space:nowrap;}
#popup.csPopVip .popupMid h3 {font-size:20px; font-weight:700;}
#popup.csPopVip .popupMid .name {display:inline-block; background:#b7c3d7; padding:0 5px;}
#popup.csPopVip .popupMid p {margin-top:12px; padding:12px 70px 12px 16px; background:#fff; border-radius:12px; font-size:14px; line-height:1.4; font-weight:400; color:#848484; text-align:left; word-break:keep-all;}
#popup.csPopVip .popupMid .thumb {position:absolute; bottom:-11px; right:18px; width:60px; height:60px; border-radius:100%; overflow:hidden; z-index:2;}


@media (min-width: 1280px) {
.formAgree li.all {padding:0;}
.formAgree li {padding:0;}
.formAgree .all input + label {padding:10px 23px 9px 38px;}
.radioList input + label {padding:8px; font-size:13px;}

/* .popWrap { overflow:hidden; } */
.popWrap .popContWrap {min-width:400px; max-width:50%; height:620px; background:transparent; box-shadow:3px 5px 5px rgba(0 0 0 / 50%); overflow:visible;}
/* 약관 팝업(모바일은 화면 높이를 채운다)도 PC 에서는 다른 팝업과 같은 620px 규격을 쓴다 */
.popWrap .popContWrap:has(> .popBody > .termWrap) {height:620px; max-height:620px;}
.popWrap .popContWrap .popTool {filter:brightness(10);}
.popWrap .popContWrap .popTool {top:0; right:-40px;}

.counsel .info {margin-bottom:12px; padding:0; background:transparent;}
.counsel .info .con {padding:21px 34px 25px 34px;}
.counsel .info h3 {font-size:16px;}
.counsel .info .tel a {font-size:30px;}


#popup { min-width:400px; /*width:400px;*/ min-height:620px; height:620px; }

#popup .formWrap {padding:24px 20px; background:#fff; border-radius:20px; box-shadow:3px 5px 5px rgba(0 0 0 / 50%);}

#popup.csPopVip .popupMid {background:#E6EBF3; border-radius:26px 26px 0 0; padding:0; margin:0;}
#popup.csPopVip .popupMid .container {padding:40px 24px 30px 24px; max-width:100%; }
#popup.csPopVip .popupMid .thumb {width:80px; height:80px; right:25px; bottom:21px;}
#popup.csPopVip .popupMid p {margin-top:20px; padding:12px 22px; width:calc(100% - 57px); }
#popup.csPopVip .formWrap {border-radius:0 0 26px 26px;}

#popup.finProtectMem .popupMid {padding:20px 0; background:#E6EBF3; border-radius:20px;}

/* ⚠️ PC 에서 .container 는 1280px 고정이다. 팝업(400px) 안에서는 반드시 풀어줘야 한다
     (csPopVip 는 max-width:100% 로 풀고 있고, finProtectMem 에는 그 규칙이 없어 내용이 박스 밖으로 나갔다) */
#popup.finProtectMem .container {width:100%; max-width:100%; padding:0 24px;}
#popup.finProtectMem .popupMid .tit {font-size:20px;}
#popup.finProtectMem .popupCon {padding:24px; background:#fff; border-radius:20px; box-shadow:3px 5px 5px rgba(0 0 0 / 50%);}

/* ⚠️ PC 에서 .container 는 1280px 고정 → 400px 팝업 안에서는 풀어줘야 한다 */
#popup.csPopAuth .container {width:100%; max-width:100%; padding:0;}
/* ⚠️ PC 에서 .counsel .info 가 background:transparent; padding:0 으로 덮인다 → 직접 다시 준다 */
#popup.csPopAuth .info {margin:0; padding:28px 24px 24px 24px; background:#E6EBF3; border-radius:26px 26px 0 0; box-shadow:none;}
#popup.csPopAuth .formWrap {padding:24px 24px 4px 24px; background:#fff; border-radius:0 0 26px 26px; box-shadow:3px 5px 5px rgba(0 0 0 / 50%);}

}