/* =========================================================
   렌트앤카_하나 → 저신용 페이지 이식
   1) 개인정보 수집 및 이용 동의 레이어(약관보기 → #agreePop)
   2) 실시간 재고 조회(무보증 문의하기) → 상담신청 레이어 팝업(counselPop)
   * 하나페이지 초록(#008e71/#009178) → 저신용 블루(#2563ff) 로 색상만 변경
   ========================================================= */

/* ---------- layerPopup 기본 (common.css) ---------- */
.layerPopup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;overflow:hidden}
.layerPopup.open{display:block}
.layerPopup .bg_mask{position:absolute;top:0;left:0;width:100%;height:100%;background:#131316;opacity:0.6;filter: alpha(opacity=60);-moz-opacity:0.6;z-index:999}
.layerPopup .layerBody{position:absolute;left:50%;top:50%;z-index:9999}
.layerPopup .layerBody.fadeIn{-webkit-animation-duration:0.5s;animation-duration:0.5s}
.layerPopup .layerBody .close{width:80px;height:80px;line-height:80px;display:inline-block;position:absolute;right:0;top:0;text-align:center;z-index:100;background:url("../images/icon_close.png") no-repeat center center;-webkit-background-size:20px 20px;-moz-background-size:20px 20px;-o-background-size:20px 20px;background-size:20px 20px}
.layerPopup .layerBody .contPop{width:100%;min-height:400px;background:#fff;overflow:hidden;overflow-y:auto}
.blind{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- agreement-list-wrap (counselPop 내부) ---------- */
.agreement-list-wrap {
    display: flex;
    width: 320px;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
    position: relative;
}
.agreement-list-wrap label>input{
    position: absolute;
    left:0;
    top:0;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}
.agreement-list-wrap label {
    padding-right: 14px;
    display: flex;
    align-items: center;
}
.agreement-list-wrap label i {
    font-size: 14px;
    color: #2563ff;
    margin-right: 5px
}
.agreement-list-wrap label input[type=checkbox]+.xi-check-circle {
    display: none
}
.agreement-list-wrap label input[type=checkbox]:checked+.xi-check-circle {
    display: inline-block
}
.agreement-list-wrap label input[type=checkbox]:checked+.xi-check-circle+.xi-check-circle-o {
    display: none
}
.agreement-list-wrap .agreement-item {
    display: flex;
    justify-content: space-between
}
.agreement-list-wrap .agreement-item-le {
    display: flex
}
.agreement-list-wrap .agreement-item-le p {
    font-size: 13px
}
.agreement-list-wrap .agreement-item-le p span {
    color: #2563ff
}
.agreement-list-wrap .detail-btn {
    width: 40px;
    height: 16px;
    border-radius: 2px;
    background: #000;
    font-size: 10px;
    font-weight: 500;
    color: #fff
}

/* ---------- 개인정보 동의 레이어 sheet 공통 (priv_panel / agreePop) ---------- */
#priv_panel {
    position: absolute;
    inset: auto;
    left: 50%;
    top: 60%;
    margin-top: 8px;
    background: transparent;
    z-index: 100;
    width: 310px;
    display:none;
    transform: translate(-50%,0);
    text-align: left;
}
#priv_panel.open {
    display: block;
}
#priv_panel .mask {
    display: none;
}
#priv_panel .sheet,
#agreePop .sheet {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    overflow: hidden;
    color: #222;
}
#priv_panel .hd,
#agreePop .hd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 12px;
    position: relative;
}
#priv_panel .hd strong,
#agreePop .hd strong {
    font-size: 16px;
    font-weight: 500;
}
#priv_panel .x,
#agreePop .x {
    margin-left: auto;
    border: 0;
    background: none;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #222;
}
#priv_panel .hd::after,
#agreePop .hd::after {
    content: "";
    display: block;
    height: 1px;
    background: #ddd;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
}
#priv_panel .bd,
#agreePop .bd {
    padding: 12px 16px 0;
}
#priv_panel .allagree,
#agreePop .allagree {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 8px 4px;
}
#priv_panel .allagree em,
#agreePop .allagree em {
    font-style: normal;
    font-size: 12px;
    color: #666;
    margin-right: 8px;
}
#priv_panel .allagree input,
#agreePop .allagree input {
    margin-left: auto;
    width: 12px;
    height: 12px;
}
#priv_panel .items,
#agreePop .items {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
#priv_panel .item,
#agreePop .item {
    border-top: 1px solid #eee;
	margin-bottom:0 !important;
}
#priv_panel .item:last-child,
#agreePop .item:last-child {
    border-bottom: 1px solid #eee;
}
#priv_panel .head,
#agreePop .head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 12px 4px 0;
    height: 40px;
}
#priv_panel .head .ico-doc,
#agreePop .head .ico-doc {
    width: 14px;
    height: 18px;
    background: url('../images/agree_v.png') no-repeat center/contain;
    border: none;
    border-radius: 0;
}
#priv_panel .head .ico-doc::after,
#agreePop .head .ico-doc::after {
    content: none;
}
#priv_panel .toggle,
#agreePop .toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 12px;
    cursor: pointer;
    color: #222;
    padding: 0;
}
#priv_panel .toggle::after,
#agreePop .toggle::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    transform: rotate(45deg);
    margin-left: auto;
    transition: transform .2s ease;
    margin-top: -4px
}
#priv_panel .toggle[aria-expanded="true"]::after,
#agreePop .toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-top: 4px
}
#priv_panel .head em,
#agreePop .head em {
    font-style: normal;
    font-size: 12px;
    color: #666;
    margin-left: 4px;
}
#priv_panel .head .chk-one,
#agreePop .head .chk-one {
    width: 12px;
    height: 12px;
    justify-self: end;
    margin-left: 10px
}
#priv_panel .boxx,
#agreePop .boxx {
    padding: 0 4px 12px 28px;
}
#priv_panel .boxx p,
#agreePop .boxx p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
    font-weight: 300
}
#priv_panel .ft,
#agreePop .ft {
    padding: 14px 16px 18px;
}
#priv_panel .ok,
#agreePop .ok {
    display: block;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: #2563ff;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}
#priv_panel .ok:active,
#agreePop .ok:active {
    transform: translateY(1px);
}

/* ---------- 약관보기 팝업 (#agreePop) - 중앙 모달 ---------- */
#agreePop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    text-align: left;
}
#agreePop.open {
    display: block;
}
#agreePop .agree-pop__mask {
    position: absolute;
    inset: 0;
    background: rgba(4,6,13,.72);
}
#agreePop .sheet {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 340px;
    max-width: calc(100% - 32px);
    max-height: 82vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

/* ---------- hanaCounsel (counselPop 내부 폼) ---------- */
.hanaCounsel h3 {font-size:32px; font-weight:700; letter-spacing:-1px; color:#222;}
.hanaCounsel ul {padding:0; margin:0;}
.hanaCounsel li {margin-bottom: 20px; list-style:none;}
.hanaCounsel li:last-child {margin-bottom:0;}
.hanaCounsel li .formSubject {margin-bottom: 10px;display:block;font-size: 20px;color:#444;font-weight:500;letter-spacing:-1px;}
.hanaCounsel li input {width:100%; padding:0 0 8px 0; font-size:19px; border:none; border-bottom:1px solid #C4C4C4; letter-spacing:-0.5px; color:#222; background:transparent;}
.hanaCounsel li input:focus {border-bottom:1px solid #2563ff; outline:none;}
.hanaCounsel li input::placeholder {color:#939393;}
.hanaCounsel .fc-green {color:#2563ff;}
.hanaCounsel .btnList button {margin-bottom:10px; display:flex; align-items:center; justify-content:center; gap:15px; width:100%;  padding:27px 0; font-size:22px; font-weight:700; letter-spacing:-1px;}
.hanaCounsel .btnList button:last-child {margin:0;}
.hanaCounsel .btnList button.submitPopBtn {background:#2563ff; color:#fff; border-radius:15px; font-size:33px;}
.hanaCounsel .btnList button.submitPopBtn:hover {background:#1b4fd8;}
.hanaCounsel .agreement-list-wrap{
    width: 100%;
    margin:20px 0;
    position: static;
}
.hanaCounsel .agreement-list-wrap label p{
    margin:0;
}
.hanaCounsel #priv_panel{
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}

/* ---------- counselPop 레이어 팝업 ---------- */
.layerPopup#counselPop {z-index:998;}
.layerPopup#counselPop .layerBody {width: 500px;transform:translate(-50%,-50%);overflow:hidden;}
.layerPopup#counselPop .layerBody .contPop {padding:65px 45px 45px 45px; border-radius:30px;}
.layerPopup#counselPop .layerBody .ctit {text-align:center;}
.layerPopup#counselPop .layerBody .hanaCounsel h3 {padding-bottom:30px; font-size:28px;}
.layerPopup#counselPop .layerBody .hanaCounsel li .formSubject {margin-bottom:15px;font-size: 16px;}
.layerPopup#counselPop .layerBody .hanaCounsel li input {font-size: 15px;padding:0 0 12px 0;}
.layerPopup#counselPop .layerBody .hanaCounsel .btnList button.submitPopBtn {padding: 18px 0;font-size: 20px;border-radius: 10px;}
.layerPopup#counselPop .layerBody .close {
    filter:brightness(0.3);
    -webkit-background-size:14px 14px;-moz-background-size:14px 14px;-o-background-size:14px 14px;background-size:14px 14px
}

/* ---------- 모바일 (max-width:800px) ---------- */
@media (max-width:800px){
    .layerPopup#counselPop {z-index:998;}
    .layerPopup#counselPop .layerBody {width:90%;max-width:420px;max-height: 70vh;top:50%;left:50%;transform:translate(-50%,-50%);overflow: unset;}
    .layerPopup#counselPop .layerBody .contPop {padding:30px 20px; }
    .layerPopup#counselPop .layerBody .ctit {text-align:center;}
    .layerPopup#counselPop .layerBody .hanaCounsel .btnList button.submitPopBtn {padding:20px 0; font-size:17px;}
    .layerPopup#counselPop .layerBody .close {filter:brightness(0.3);}
    .layerPopup#counselPop .layerBody .hanaCounsel li .formSubject {margin-bottom:12px;}
    .layerPopup#counselPop .layerBody .hanaCounsel li {margin-bottom:22px;}
}