/* ============================================================================
 * rental-detail-lg.css
 *
 * LG 케어솔루션 PDP detail 전용 스타일 — vendor-policy-sync의 LgCrawler가
 * 추출한 #overview / #spec 원본 layout을 운영 화면에서 LG 페이지와 거의 동일하게
 * 표현하기 위한 CSS.
 *
 * 사용:
 *   <link rel="stylesheet" href="/rental/assets/css/rental-detail-lg.css">
 *   <div class="rental-detail-lg"> ... LG layout 그대로 ... </div>
 *
 * 특징:
 * - LG의 모든 class (component-wrap / iw_component / unit-list / visual-wrap …) 보존
 * - PC / 모바일 반응형 (.pc-only, .mo-only)
 * - carousel/slider → JS 없이 horizontal scroll + snap
 * - 비디오 → 외부 lge.co.kr CDN 그대로 src
 * - 스펙(#spec) → grid 형태로 깔끔
 * ============================================================================ */

.rental-detail-lg {
    max-width: 100%;
    margin: 0 auto;
    color: #1a1a1a;
    line-height: 1.6;
    font-size: 16px;
    word-break: keep-all;
}
.rental-detail-lg * { box-sizing: border-box; }

/* ── 반응형 노출 (PC/모바일 이미지 분리) ──────────────────── */
.rental-detail-lg .pc-only,
.rental-detail-lg .prod-img .pc { display: block; }
.rental-detail-lg .mo-only,
.rental-detail-lg .prod-img .mob { display: none; }
@media (max-width: 768px) {
    .rental-detail-lg .pc-only,
    .rental-detail-lg .prod-img .pc { display: none; }
    .rental-detail-lg .mo-only,
    .rental-detail-lg .prod-img .mob { display: block; }
}

/* ── 컴포넌트 단위 ─────────────────────────────────────────── */
.rental-detail-lg .component-wrap,
.rental-detail-lg .iw_component {
    margin-bottom: 32px;
}
.rental-detail-lg .component-wrap.zero-top { margin-top: 0; }
.rental-detail-lg .component-wrap.zero-btm { margin-bottom: 0; }
.rental-detail-lg .component-wrap.bg-white,
.rental-detail-lg .component.bg-white { background: #ffffff; }
.rental-detail-lg .component-wrap.bg-lightgray,
.rental-detail-lg .component.bg-lightgray {
    background: #f5f5f5;
    padding: 24px 16px;
    border-radius: 6px;
}

.rental-detail-lg .component { padding: 16px 0; }
.rental-detail-lg .component-inner,
.rental-detail-lg .component-box { padding: 0; }

/* ── unit-list / unit-box (텍스트 블록) ───────────────────── */
.rental-detail-lg .unit-list { margin-bottom: 16px; }
.rental-detail-lg .unit-box { padding: 16px 0; }
.rental-detail-lg .unit-list.box-align-center { text-align: center; }
.rental-detail-lg .unit-list.box-align-left { text-align: left; }
.rental-detail-lg .unit-list.align-center { text-align: center; }
.rental-detail-lg .unit-list.align-left { text-align: left; }

/* ── 헤더/타이틀 ──────────────────────────────────────────── */
.rental-detail-lg .eyebrow,
.rental-detail-lg .small-title {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
}
.rental-detail-lg .title h2,
.rental-detail-lg h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 8px 0 16px;
    line-height: 1.4;
    color: #1a1a1a;
}
.rental-detail-lg h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 16px 0 12px;
    color: #1a1a1a;
}
.rental-detail-lg h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 12px 0 8px;
    color: #1a1a1a;
}

/* ── 본문 텍스트 ──────────────────────────────────────────── */
.rental-detail-lg .text {
    font-size: 16px;
    margin-bottom: 16px;
    line-height: 1.6;
}
.rental-detail-lg .body-copy {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
}
.rental-detail-lg p { margin: 8px 0; }
.rental-detail-lg .fc-black { color: #1a1a1a; }
.rental-detail-lg .fc-dark-gray { color: #666; }

/* ── 이미지 기본 ──────────────────────────────────────────── */
.rental-detail-lg img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* ── 좌우 split layout (text-wrap + visual-wrap) ──────────── */
.rental-detail-lg .inner {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
}
.rental-detail-lg .text-wrap,
.rental-detail-lg .visual-wrap {
    flex: 1 1 300px;
    min-width: 0;
}
.rental-detail-lg .text-wrap.side-left-text { order: 1; }
.rental-detail-lg .text-wrap.side-right-text { order: 2; }
.rental-detail-lg .visual-wrap.image-align-left { order: 1; }
.rental-detail-lg .visual-wrap.image-align-right { order: 2; }

@media (max-width: 768px) {
    .rental-detail-lg .inner {
        flex-direction: column;
        gap: 16px;
    }
    .rental-detail-lg .text-wrap,
    .rental-detail-lg .visual-wrap { order: initial !important; }
}

/* ── Carousel → JS 없이 horizontal scroll + snap ──────────── */
.rental-detail-lg .ui_carousel_list,
.rental-detail-lg .slide-content,
.rental-detail-lg .slide-track,
.rental-detail-lg .ui_carousel_track {
    display: flex !important;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    list-style: none;
    padding: 0 0 12px;
    margin: 0;
}
.rental-detail-lg .ui_carousel_slide,
.rental-detail-lg .slide-conts,
.rental-detail-lg .carousel-box {
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: start;
    float: none !important;
    width: auto !important;
    list-style: none;
}
@media (min-width: 769px) {
    .rental-detail-lg .ui_carousel_slide,
    .rental-detail-lg .slide-conts,
    .rental-detail-lg .carousel-box {
        flex: 0 0 60%;
        max-width: 60%;
    }
    .rental-detail-lg .slide-solo .ui_carousel_slide,
    .rental-detail-lg .slide-solo .carousel-box {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* 슬라이드 안 visual-area / 이미지 / 비디오 */
.rental-detail-lg .visual-area {
    text-align: center;
}
.rental-detail-lg .visual-area img,
.rental-detail-lg .visual-area video {
    width: 100%;
    height: auto;
}

/* aria-hidden 슬라이드도 보이도록 (carousel 다른 슬라이드 표시) */
.rental-detail-lg [aria-hidden="true"] {
    display: revert !important;
}
.rental-detail-lg .ui_carousel_track > li,
.rental-detail-lg .ui_carousel_track > div {
    opacity: 1 !important;
}

/* ── USP 카드 (똑똑한 UP 가전 등) ─────────────────────────── */
.rental-detail-lg .usp-card-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
@media (min-width: 769px) {
    .rental-detail-lg .usp-card-wrap {
        grid-template-columns: 1fr 1fr;
    }
}
.rental-detail-lg .normal-type-wrap.usp-card { padding: 0; }
.rental-detail-lg .usp-card .item {
    padding: 24px 16px;
    border-radius: 8px;
    text-align: center;
}
.rental-detail-lg .usp-card .img img {
    max-width: 80px;
    margin: 0 auto 12px;
}
.rental-detail-lg .usp-card .txt {
    font-size: 14px;
    font-weight: 500;
    margin-top: 8px;
}

/* ── LG USP gallery fallback (gallery_list.css/Swiper JS 없이 표시) ─────── */
.rental-detail-lg .usp-gallery-list-wrap {
    margin: 32px 0;
}
.rental-detail-lg .usp-gallery-list-area,
.rental-detail-lg .usp-gallery-popup-area {
    position: static;
    width: 100%;
}
.rental-detail-lg .usp-gallery-header {
    margin-bottom: 24px;
    text-align: center;
}
.rental-detail-lg .usp-gallery-tit {
    font-size: 24px;
    line-height: 1.4;
    margin: 0;
}
.rental-detail-lg .usp-gallery-list {
    display: none;
}
.rental-detail-lg .usp-gallery-popup-area .gallery-dim,
.rental-detail-lg .usp-gallery-popup-area .swiper-controls {
    display: none !important;
}
.rental-detail-lg .usp-gallery-popup-area .gallery-inner,
.rental-detail-lg .usp-gallery-popup-area .gallery-cont,
.rental-detail-lg .usp-gallery-popup {
    width: 100%;
}
.rental-detail-lg .usp-gallery-popup .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100% !important;
    transform: none !important;
    transition: none !important;
    list-style: none;
    padding: 0;
    margin: 0;
}
.rental-detail-lg .usp-gallery-popup .swiper-slide {
    width: auto !important;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.rental-detail-lg .usp-gallery-popup .swiper-slide-duplicate,
.rental-detail-lg .usp-gallery-popup .swiper-slide-duplicate-prev,
.rental-detail-lg .usp-gallery-popup .swiper-slide-duplicate-active {
    display: none !important;
}
.rental-detail-lg .gallery-popup-header {
    min-height: 72px;
    padding: 16px 16px 8px;
}
.rental-detail-lg .gallery-popup-tit {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    color: #1a1a1a;
}
.rental-detail-lg .gallery-popup-cont {
    padding: 12px 16px 16px;
}
.rental-detail-lg .gallery-popup-txt {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.rental-detail-lg .gallery-popup-txt .hash {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f4f4f4;
    color: #555;
    font-size: 12px;
    line-height: 1.3;
}
@media (max-width: 1024px) {
    .rental-detail-lg .usp-gallery-popup .swiper-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .rental-detail-lg .usp-gallery-tit {
        font-size: 20px;
    }
    .rental-detail-lg .usp-gallery-popup .swiper-wrapper {
        grid-template-columns: 1fr;
    }
    .rental-detail-lg .gallery-popup-header {
        min-height: 0;
    }
}

/* ── LG USP gallery normalized markup ─────────────────────── */
.rental-detail-lg .rental-lg-gallery {
    margin: 32px 0;
}
.rental-detail-lg .rental-lg-gallery-heading {
    margin: 0 0 24px;
    text-align: center;
    font-size: 24px;
    line-height: 1.4;
}
.rental-detail-lg .rental-lg-gallery-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.rental-detail-lg .rental-lg-gallery-card {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.rental-detail-lg .rental-lg-gallery-card img {
    width: 100%;
    border-radius: 0;
}
.rental-detail-lg .rental-lg-gallery-title {
    display: block;
    padding: 16px 16px 8px;
    font-size: 16px;
    line-height: 1.4;
    color: #1a1a1a;
}
.rental-detail-lg .rental-lg-gallery-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 16px;
    margin: 0;
}
.rental-detail-lg .rental-lg-gallery-tags .hash {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f4f4f4;
    color: #555;
    font-size: 12px;
    line-height: 1.3;
}
@media (max-width: 1024px) {
    .rental-detail-lg .rental-lg-gallery-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .rental-detail-lg .rental-lg-gallery-heading {
        font-size: 20px;
    }
    .rental-detail-lg .rental-lg-gallery-list {
        grid-template-columns: 1fr;
    }
}

/* ── cover-area (히어로 영역) ─────────────────────────────── */
.rental-detail-lg .cover-area-wrap { margin-bottom: 24px; }
.rental-detail-lg .cover-area {
    position: relative;
    padding: 40px 24px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    min-height: 280px;
    overflow: hidden;
}
.rental-detail-lg .cover-area .bg-wrap {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    z-index: 0;
}
.rental-detail-lg .cover-area .info-wrap {
    position: relative;
    z-index: 1;
    text-align: center;
}
.rental-detail-lg .cover-area .title-info .sub {
    font-size: 16px;
    margin-bottom: 8px;
}
.rental-detail-lg .cover-area .title-info .tit {
    font-size: 32px;
    font-weight: bold;
    margin: 8px 0 16px;
    line-height: 1.3;
}
.rental-detail-lg .cover-area .detail-info dl {
    margin: 12px 0;
}
.rental-detail-lg .cover-area .detail-info dt {
    font-size: 14px;
    margin-bottom: 4px;
}
.rental-detail-lg .cover-area .detail-info dd {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
@media (max-width: 768px) {
    .rental-detail-lg .cover-area .title-info .tit { font-size: 24px; }
}

/* ── 비디오 ───────────────────────────────────────────────── */
.rental-detail-lg video {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    background: #000;
}

/* ── bullet-list (주의문구) ───────────────────────────────── */
.rental-detail-lg .bullet-list {
    margin: 16px 0;
    padding: 0;
    list-style: none;
}
.rental-detail-lg .bullet-list li.b-txt,
.rental-detail-lg .bullet-list li {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 4px;
}

/* ── 스펙 섹션 (#spec) ────────────────────────────────────── */
.rental-detail-lg .prod-spec-wrap { margin-top: 32px; }
.rental-detail-lg .prod-spec-wrap > .title h2,
.rental-detail-lg .prod-spec-wrap > h2 {
    margin-bottom: 24px;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 8px;
}
.rental-detail-lg .prod-spec-wrap .prod-img {
    text-align: center;
    margin-bottom: 24px;
}
.rental-detail-lg .prod-spec-wrap .prod-img img { margin: 0 auto; }

.rental-detail-lg .prod-spec-detail .box {
    border-top: 1px solid #ddd;
    padding: 16px 0;
}
.rental-detail-lg .prod-spec-detail .box .tit {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1a1a1a;
}

/* spec-info-list — dt(라벨) + dd(값) grid */
.rental-detail-lg .spec-info-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rental-detail-lg .spec-info-list li {
    padding: 6px 0;
    border-bottom: 1px dotted #eee;
}
.rental-detail-lg .spec-info-list dl {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    margin: 0;
    align-items: start;
}
.rental-detail-lg .spec-info-list dt {
    font-weight: 600;
    color: #333;
    margin: 0;
}
.rental-detail-lg .spec-info-list dd {
    margin: 0;
    color: #555;
}
.rental-detail-lg .spec-info-list.big dl {
    grid-template-columns: 240px 1fr;
}
@media (max-width: 768px) {
    .rental-detail-lg .spec-info-list dl,
    .rental-detail-lg .spec-info-list.big dl {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* KC 인증 이미지 */
.rental-detail-lg .spec_kcc img,
.rental-detail-lg .spec-info-list img {
    max-width: 36px;
    display: inline-block;
    margin: 0;
}

/* spec 안의 표 */
.rental-detail-lg table {
    border-collapse: collapse;
    margin: 0;
}

/* ── 제휴 브랜드 ──────────────────────────────────────────── */
.rental-detail-lg .md_brand_list {
    text-align: center;
    margin: 24px 0;
    font-size: 16px;
    font-weight: 600;
}
.rental-detail-lg .md_brand ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 16px 0;
    flex-wrap: wrap;
}
.rental-detail-lg .md_brand li img {
    max-width: 80px;
    max-height: 60px;
    object-fit: contain;
}

/* ── 안전망 — decompose가 빠진 경우에도 시각적으로 숨김 ───── */
.rental-detail-lg .dropContent,
.rental-detail-lg .popup-wrap,
.rental-detail-lg .desc-item-txt-pop,
.rental-detail-lg .md_popup,
.rental-detail-lg .indi-wrap,
.rental-detail-lg .slide-controls,
.rental-detail-lg .controller-wrap,
.rental-detail-lg .caption-wrap,
.rental-detail-lg .cap-section,
.rental-detail-lg .blind,
.rental-detail-lg .hidden { display: none !important; }

/* 인쇄 영역 */
.rental-detail-lg .prod-print { display: none !important; }

/* ── strong/sup/sub ───────────────────────────────────────── */
.rental-detail-lg strong { font-weight: 600; }
.rental-detail-lg sup { font-size: 0.7em; vertical-align: super; }
.rental-detail-lg sub { font-size: 0.7em; vertical-align: sub; }

/* ── carousel inline-style override ───────────────────────── */
.rental-detail-lg .ui_carousel_list[style],
.rental-detail-lg .ui_carousel_track[style],
.rental-detail-lg .slide-track[style],
.rental-detail-lg .slide-content[style] {
    height: auto !important;
}