/**
 * 가전구독(렌탈) 상품 목록 전용 스타일 - list와 완전히 다른 레이아웃
 */

/* 이 페이지는 topnavbar만 사용, mobile-header 미표시 */
body:has(.rental-list-page) .mobile-header {
  display: none !important;
}

.rental-list-page{padding-bottom: 100px;}

.rental-main-slide { width: 100%; height: 100%; position: relative; } 
.rental-main-slide .swiper-wrapper { position: relative; } 
.rental-main-slide .swiper { width: 100%; height: 100%; } 
.rental-main-slide .swiper-slide { width: 100%; height: 100%; }
.rental-main-slide .swiper-slide .slide { width: 100%; height: 100%; display: block; background-color: #ffffff; } 
.rental-main-slide .swiper-slide .image { width: 100%; min-width: 0; max-height: 400px; display: block; } 
.rental-main-slide .swiper-slide .image img{width: 100%;height: 100%;max-height: 400px; object-fit: contain;}
.rental-main-slide .wrapper{max-width: 1280px; width: 100%; height: 100%; position: absolute; margin: 0 auto; top: 0; left: 50%; transform: translate(-50%, 0); z-index: 1; pointer-events: none;}
.rental-main-slide .wrapper .wrpr { width: 100%; height: 100%; position: relative; } 
.rental-main-slide .wrapper .wrpr .slide-counter { width: 100%; height: 100%; display: flex; justify-content: flex-end; flex-direction: column; align-items: flex-end;padding-bottom: 20px; } 
.rental-main-slide .wrapper .wrpr .slide-counter .pagination { width:fit-content; display:flex; background-color:#00000099; border-radius:25px; flex-direction:row; align-items:center; gap:5px; padding:5px 10px; justify-content:center } 
.rental-main-slide .wrapper .wrpr .slide-counter .pagination span { color:#eee; font-size:14px; line-height:1; letter-spacing:-.5px; font-weight:700 } 
.rental-main-slide .wrapper .wrpr .slide-counter .pagination .current-num { color:#fff } 
.rental-main-slide .wrapper .wrpr .swiper-button-prev,.rental-main-slide .wrapper .wrpr .swiper-button-next{ width:55px; height:55px; border-radius:55px; background-color:#B5B5B630; transition:.3s; pointer-events:auto } 
.rental-main-slide .wrapper .wrpr .swiper-button-prev:hover,
.rental-main-slide .wrapper .wrpr .swiper-button-next:hover { background-color:#B5B5B680 } 
.rental-main-slide .wrapper .wrpr .rental-next:after,
.rental-main-slide .wrapper .wrpr .rental-prev:after { font-size:16px; color:#fff; font-weight:600 } 
/* 히어로 슬라이더 - 화살표 */



.content-wrapper { display: grid; grid-template-columns: 100%; gap: 20px; padding: 0 10px; } 
.rental-list-page  .contain{width: 100%; display: flex;flex-direction: column; gap: 60px;}


/* 카테고리 슬라이드 */
.rental-category-slide { width: 100%; max-width: 1050px; height: 70px; border-bottom: 1px solid #dadada; margin: 0 auto; position: relative; box-sizing: border-box; }
.rental-category-slide-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; padding: 0 45px;}
.rental-category-slide .swiper { flex: 1; height: 100%; overflow: hidden; min-width: 0; }
.rental-category-slide .rental-cat-prev,
.rental-category-slide .rental-cat-next { width: 45px; height: 45px;   color: #333; z-index: 2; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.rental-category-slide .rental-cat-prev::after,
.rental-category-slide .rental-cat-next::after { font-size: 14px; font-weight: 700; }
.rental-category-slide .rental-cat-prev { left: 0; }
.rental-category-slide .rental-cat-next { right: 0; }
.rental-category-slide .rental-cat-prev.swiper-button-disabled,
.rental-category-slide .rental-cat-next.swiper-button-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.rental-category-slide .swiper-wrapper { display: flex; align-items: center; }
.rental-category-slide .swiper-slide { width: auto !important; flex-shrink: 0; margin: 0 !important; height: 100%; display: flex; align-items: center;}
.rental-category-slide .cat-item { display: inline-block; width: fit-content; padding: 10px 16px; white-space: nowrap; text-decoration: none;transition: all 0.3s; border-radius: 30px;}
.rental-category-slide .cat-item .cat-name { color: #888; font-size: 1.125rem; letter-spacing: -0.75px; font-weight: 500;transition: all 0.3s; }

.rental-category-slide .cat-item:hover,
.rental-category-slide .cat-item.active{background-color: #E7E7E7;}
.rental-category-slide .cat-item:hover .cat-name,
.rental-category-slide .cat-item.active .cat-name{color: #333; font-weight: 600; }

/* 툴바 (총 N건, 정렬) */
.sort-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } 
.sort-wrap .sort-options { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; } 
.sort-wrap .sort-options .sort-btn { font-size: 15px; letter-spacing: -0.75px; font-weight: 500; line-height: 1; color: #333; transition: all 0.3s; } 
.sort-wrap .sort-options .sort-btn.active { color: #23B16C; font-weight: 600; } 
.product-grid-section { width: 100%; display: flex; flex-direction: column; gap: 10px; } 
.title-wrap { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } 
.title-wrap .titl p { font-size: 14px; font-weight: 400; letter-spacing: -0.75px; color: #333; line-height: 1; } 
.title-wrap .sort-section { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } 
.title-wrap .sort-section .sort-options { display: flex; flex-direction: row; align-items: center; gap: 10px; } 
.title-wrap .sort-section .sort-options .sort-btn { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; font-size: 14px; letter-spacing: -0.75px; line-height: 1; color: #B5B5B6; } 
.title-wrap .sort-section .sort-options .sort-btn { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; font-size: 14px; letter-spacing: -0.75px; line-height: 1; color: #B5B5B6; transition: all 0.3s; } 
.title-wrap .sort-section .sort-options .sort-btn.active { color: #000; font-weight: 600; } 
.title-wrap .sort-section .sort-options .sort-btn+.sort-btn::before { content: ''; width: 1px; height: 14px; background-color: #B5B5B6; display: block; } 

/* 상품 리스트) */
.rental-product-grid{display: grid;  grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%;}
.rental-product-grid .product-card{display: flex; flex-direction: column; gap: 10px; border: 1px solid #dadada;background-color: #ffffff;}
.rental-product-grid .product-card .rental-item-thumb{max-height: 328px; width: 100%;  border-bottom: 1px solid #EAEAEA; position: relative;}
.rental-product-grid .product-card .rental-item-thumb img{width: 100%; height: 100%; object-fit: cover;}
.rental-item-icons{display: flex;flex-direction: column; align-items: flex-start; position: absolute; top: 0;gap: 0; max-width: 50px; width: 100%;}
.rental-item-icons img{max-width: 50px;width: 100%;  object-fit: contain;}
.rental-item-body{padding: 20px;   display: flex; flex-direction: column; gap: 15px;}
.model-name{display: flex;flex-direction: column; gap: 10px;}
.model-name .rental-model{font-size: 0.938rem;letter-spacing: -0.25px; color: #888888;}
.model-name .rental-item-name{font-size: 1.25rem; letter-spacing: -0.75px;  color: #333333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;}
.rental-color{font-size: 1rem; color: #888888;letter-spacing: -0.75px;}
.rental-price-wrap{display: flex;flex-direction: column; padding: 15px 0; gap: 10px; border-top: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA;}
.rental-price-wrap .price-row{width: 100%;display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.rental-price-wrap .price-row .price-label{font-size: 1rem;letter-spacing: -0.75px;color: #333333;}
.rental-price-wrap .price-row .price-value{font-size: 1.5rem;letter-spacing: -0.75px;color: #333333; font-weight: 600;display: flex; align-items: baseline; flex-direction: row; gap: 3px;}
.rental-price-wrap .price-row.discount .price-value{font-size: 1.5rem;color: #23B16C;}
.rental-price-wrap .price-row small{font-size: 1rem;font-weight: 400;}
.rental-notice{font-size: 0.875rem; letter-spacing: -0.75px;line-height: 1.4; color: #BEBEBE; word-break: keep-all;}
/* 프로모션리스트 */
.rental-promotion-slide{width: 100%; max-width: 1050px;margin: 0 auto; display: flex; flex-direction: column; gap: 30px;position: relative;padding-bottom: 30px;}
.rental-promotion-slide .rental-promo-swiper{width: 100%;}
.rental-promotion-slide .rental-promo-swiper .promo-item-link{width: 100%;}
.rental-promotion-slide .rental-promo-swiper .promo-item-link .promo-item-img{width: 100%;}
.rental-promotion-slide .rental-promo-swiper .promo-item-link .promo-item-img img{max-height: 160px; object-fit: cover; width: 100%;}
.promo-header{width: 100%; display: flex; flex-direction: row;  align-items: center;  padding-bottom: 30px;  border-bottom: 1px solid #dadada; justify-content: space-between;}
.rental-promo-pagination .swiper-pagination-bullet-active{background-color: #333333;}
.promo-header .icon{width: 24px; height: 24px;display: block;}
.promo-header .icon img{width: 100%; height: 100%; object-fit: contain; filter:brightness(0.5);}

/* 렌탈정보 */
.retal-info-wrap{max-width: 1050px; width: 100%; margin: 0 auto; display: flex;flex-direction: column; align-items: flex-start; gap: 20px;}
.retal-info-wrap .benefit-grid{width: 100%;display: grid; grid-template-columns: repeat(3, 1fr);gap: 15px;}
.benefit-grid  .benefit-card{border-radius: 15px; padding: 30px;background-color: #F7FDF8;display: flex; flex-direction: row; justify-content: space-between;align-items: center; height: 160px;}
.benefit-grid .benefit-card .benefit-text{flex: 1; display: flex; flex-direction: column; gap: 10px;}
.benefit-title p{font-size: 1.5rem; font-weight: 600; color: #23B16C;letter-spacing: -0.5px;}
.benefit-desc p{font-size: 15px;letter-spacing: -0.75px;line-height: 1.4; color: #888; font-weight: 400;}

.cs-banner-wrap{width: 100%;  display: grid;grid-template-columns: repeat(2, 1fr);}
.cs-banner-wrap .cs-banner{width: 100%;height: 160px;padding: 20px 30px;}
.cs-banner-wrap .cs-banner .con{width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between;gap: 0;}
.cs-banner-wrap .cs-banner .row-wrap{width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;}
.cs-banner-wrap .cs-banner .col-wrap{display: flex;flex-direction: column;gap: 8px;}
.cs-banner-wrap .cs-banner .col-wrap .en{font-size: 0.875rem; color: #fff;font-weight: 300;}
.cs-banner-wrap .cs-banner .col-wrap .titl{font-size: 1.5rem; color: #fff;font-weight: 600;}
.cs-banner-wrap .cs-banner .col-wrap .phone{font-size: 1.7rem; color: #fff;font-weight: 600;}
.cs-banner-wrap .cs-banner .col-wrap .time{font-size: 0.875rem; color: #fff;font-weight: 300;}
.cs-left-notice{height: 100%;display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;}
.cs-left-notice li{display: flex;flex-direction: row; align-items: center; justify-content: flex-start; gap: 3px;font-size: 0.75rem; color: #fff;font-weight: 300; line-height: 1.4;}
.cs-left-notice li::before{content: '';display: block;width: 2px; height: 2px;background-color: #fff;border-radius: 50%;}
.cs-banner-wrap .cs-left{background-color: #23B16C;}
.cs-banner-wrap .cs-right{background-color: #333333;}
.go{display: flex;flex-direction: row; align-items: center; gap: 5px;font-size: 1rem; color: #fff;}

/* 온라인 무료상담 - 우측 고정 버튼 */
.cs-online-consult-btn {
    display: none;
}

/* 상품목록 + 사이드바 레이아웃 */
.main-content .wraper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}
.main-content .content-wrapper {
    flex: 1;
    min-width: 0;
}
.rental-list-sidebar {
    flex-shrink: 0;
    width: 160px;
    position: sticky;
    top: 80px;
}
.cs-online-consult-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #333333;
    border-radius: 12px;
    padding: 24px 12px;
    text-decoration: none;
    color: #fff;
    transition: background 0.25s ease, transform 0.2s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    gap: 0;
}
.cs-online-consult-box:hover {
    background-color: #23B16C;
    transform: translateY(-2px);
    color: #fff;
}
.cs-online-consult-box .con {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.cs-online-consult-box .en {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.7);
    font-weight: 300;
    letter-spacing: 0.5px;
}
.cs-online-consult-box .titl {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.5px;
    margin: 0;
}
.cs-online-consult-box .cs-icon img {
    width: 36px;
    height: 36px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.cs-online-consult-box .go {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
}
.cs-online-consult-box .arrow {
    font-size: 1rem;
    font-style: normal;
}

/* 모바일에서 사이드바 숨김 */
@media (max-width: 900px) {
    .rental-list-sidebar { display: none; }
    .main-content .wraper { flex-direction: column; }
}

/* 신청하기 */

    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    background-color: #333333;
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    padding: 20px 0;
    border-radius: 8px 0 0 8px;
    box-shadow: -3px 0 12px rgba(0,0,0,0.18);
    transition: width 0.3s ease, background 0.2s;
    overflow: hidden;
    cursor: pointer;
}
.cs-online-consult-btn:hover {
    background-color: #23B16C;
    width: 160px;
}
.cs-online-consult-btn .con {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 12px;
}
.cs-online-consult-btn .row-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.cs-online-consult-btn .col-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.cs-online-consult-btn .col-wrap .en {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    font-weight: 300;
    display: none;
}
.cs-online-consult-btn:hover .col-wrap .en {
    display: block;
}
.cs-online-consult-btn .col-wrap .titl {
    font-size: 0.8rem;
    color: #fff;
    font-weight: 600;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 2px;
}
.cs-online-consult-btn:hover .col-wrap .titl {
    writing-mode: horizontal-tb;
    letter-spacing: 0;
    font-size: 1rem;
}
.cs-online-consult-btn .cs-right-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}
.cs-online-consult-btn .go {
    font-size: 0.75rem;
    color: #fff;
    display: none;
}
.cs-online-consult-btn:hover .go {
    display: flex;
}


.rental-contact-page{background-color: #FCFCFC;}
.rental-contact-page .main-content{padding: 100px 0;}
.rental-contact-page .rental-contact-section { padding: 40px 30px; max-width: 650px; margin: 0 auto; background-color: #ffffff; border-radius: 15px; box-shadow:4px 4px 20px #0000000d;display:flex;flex-direction: column;align-items: flex-start;gap: 30px;}
.rental-contact-page .rental-contact-head { text-align: left; width: 100%;display: flex;padding-bottom: 20px;border-bottom: 1px solid #eee; }
.rental-contact-page .page-title { font-size: 30px;font-weight: 600;color: #333;letter-spacing: -0.75px;line-height: 1.4; }
.rental-contact-page .page-desc { font-size: 0.9375rem; color: #666; line-height: 1.6; }

.rental-contact-page .cs-info-box { padding: 1.25rem; background: #f8f9fa; border-radius: 8px; text-align: center; }
.rental-contact-info{width: 100%; display: flex;flex-direction: column; gap: 15px;}
.rental-contact-info .form-group{width: 100%;display: flex;flex-direction: row;align-items: center;}
.rental-contact-info .form-group  .form-label{min-width: 130px;display: flex;flex-direction: row; align-items: center; gap: 2px;}
.rental-contact-info .form-group .form-label.required::before{content: '*';color: #FF3B30;}
.rental-contact-info .form-group .form-input{width: 100%; flex: 1; padding: 10px; border-radius: 5px;}
.rental-contact-info .form-group .textarea-wrapper{width: 100%; flex: 1;}
.rental-contact-info .form-group .textarea-wrapper .form-textarea{width: 100%; height: 90px; resize: none; padding: 10px;}
.rental-contact-page .cs-info-box .phone { font-size: 1.25rem; font-weight: 700;  }
.rental-contact-page .cs-info-box .time { font-size: 0.875rem; color: #666;  }
.rental-contact-page .cs-info-box .cs-notice { list-style: none; padding: 0;  font-size: 0.8125rem; color: #666; }
.rental-contact-page .rental-contact-actions {width: 100%; }
.rental-contact-page .btn-consultation { width: 100%; height: 50px; display: flex; background: #23B16C; color: #fff; font-weight: 600;  text-decoration: none;  border-radius: 8px;  transition: background 0.2s;flex-direction: row; align-items: center; justify-content: center; }
.rental-contact-page .btn-consultation:hover { background: #1fa162; color: #fff; }
.rental-contact-page .login-notice { margin-top: 1rem; font-size: 0.8125rem; color: #888; }

.rental-policy-wrapper{width: 100%; height: 106px; overflow-y: auto; padding: 16px; border: 1px solid #eee; border-radius: 5px;}
.rental-policy-wrapper .rental-policy{display: flex; flex-direction: column;gap: 16px;}
.rental-policy-wrapper .rental-policy .content{display: flex; flex-direction: column;gap: 10px;}
.rental-policy-wrapper .rental-policy .content b{font-size: 16px; letter-spacing: -0.75px; color: #000; word-break: keep-all;font-weight: 600;}
.rental-policy-wrapper .rental-policy .content p,
.rental-policy-wrapper .rental-policy .list p,
.rental-policy-wrapper .rental-policy .con p{font-size: 14px; letter-spacing: -0.75px; color: #000; word-break: keep-all;font-weight: 400;}
.rental-policy-wrapper .rental-policy .list p a{text-decoration: underline;}
.rental-policy-wrapper .rental-policy .content .con{display: flex; flex-direction: column;gap: 6px;}
.rental-policy-wrapper .rental-policy .list{display: flex; flex-direction: column;gap: 3px;}
.rental-policy-wrapper .rental-policy .table{width: 100%;display: flex;flex-direction: column; padding: 20px 0;} 
.rental-policy-wrapper .rental-policy table{width: 100%;border-collapse: collapse;border: 1px solid #dadada;}
.rental-policy-wrapper .rental-policy thead tr{ height: 37px;}
.rental-policy-wrapper .rental-policy th{background-color: #f8f8f8; text-align: center;font-weight: 500;font-size: 14px; line-height: 1; letter-spacing: -0.75px;border-left: 1px solid #dadada;}
.rental-policy-wrapper .rental-policy table tr{border-bottom: 1px solid #dadada; }
.rental-policy-wrapper .rental-policy table td{text-align: center; font-size: 14px; line-height: 1.4; letter-spacing: -0.75px; color: #333; padding: 10px; word-break: keep-all; text-align: left; border-left: 1px solid #dadada;}
.rental-policy-wrapper .rental-policy table td:last-child,
.rental-policy-wrapper .rental-policy th:last-child{border-right: 1px solid #dadada;}

.rental-contact-section .agree-item .text p{font-size: 14px; letter-spacing: -.75px;font-weight: 500; color: #333;} 
.rental-contact-section .agree-item{width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center;}

@media (min-width:1920px) {
  .rental-main-slide .swiper-slide .image img{object-fit: contain;}
}

@media (max-width:1280px){
  .rental-main-slide .swiper-slide .image{height: fit-content;}
  .rental-main-slide .swiper-slide .image img{object-fit: contain;}
}

@media (max-width:1050px){
  .rental-promotion-slide{padding: 0 10px 40px;}
  .retal-info-wrap{padding: 0 10px;}
  .benefit-title p{font-size: 1.25rem;}
  .benefit-desc p{font-size: 14px; letter-spacing: -0.75px; word-break: keep-all;}
  .cs-banner-wrap .cs-banner .col-wrap .phone{font-size: 1.5rem;}
}

@media (max-width:1024px){
.rental-main-slide .wrapper .wrpr .slide-counter{display: none;}
.retal-info-wrap .benefit-grid{display: flex;flex-direction: column;}
.cs-banner-wrap{display: flex;flex-direction: column;}
}

@media (max-width:768px){
  .rental-product-grid { grid-template-columns: repeat(2, 1fr); width: 100%; }
    .rental-category-slide .cat-item .cat-name{font-size: 15px;}
}