/* ============================================================================
 * rental-detail-coway.css
 *
 * coway 사이트의 pdphtml/vnfhtml/dlvhtml/claimhtml 합본을 운영 화면에서
 * coway 페이지와 거의 동일하게 표현하기 위한 CSS.
 *
 * 사용:
 *   <link rel="stylesheet" href="/rental/assets/css/rental-detail-coway.css">
 *   <div class="rental-detail-coway"> ... coway pdphtml ... </div>
 *
 * coway pdphtml 의 주요 class 패턴:
 *   - 구조: .pln-showcase, .pln-container, .pln-container-full,
 *           .pln-section, .pln-section-*, .pln-nav, .pln-product
 *   - 컨텐츠: .tit, .tit-sub, .title, .desc, .txt, .code, .num,
 *             .gray-box, .scroll_box, .tablebox, .box, .disclaimer
 *   - 반응형: .pln-pc (PC만 노출), .pln-m (모바일만 노출)
 *   - 캐러셀: .swiper-slide
 * ============================================================================ */

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

/* ── 반응형 노출 (PC/모바일 분리) ──────────────────────────── */
.rental-detail-coway .pln-pc { display: block; }
.rental-detail-coway .pln-m  { display: none; }
@media (max-width: 768px) {
    .rental-detail-coway .pln-pc { display: none; }
    .rental-detail-coway .pln-m  { display: block; }
}

/* ── 외곽 wrapper / showcase ──────────────────────────────── */
.rental-detail-coway .pln-showcase {
    margin-bottom: 32px;
}
.rental-detail-coway .pln-container,
.rental-detail-coway .pln-container-full {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}
.rental-detail-coway .pln-container-full {
    max-width: 100%;
    padding: 0;
}

/* ── 섹션 ─────────────────────────────────────────────────── */
.rental-detail-coway .pln-section,
.rental-detail-coway section {
    margin: 32px 0;
    padding: 24px 0;
}
.rental-detail-coway .pln-section-airfilter,
.rental-detail-coway .pln-section-ecoMode,
.rental-detail-coway .pln-section-slimDesign,
.rental-detail-coway .pln-section-easyFilterChange,
.rental-detail-coway .pln-section-choiceManagement {
    border-top: 1px solid #eee;
}

/* ── 헤더/타이틀 ──────────────────────────────────────────── */
.rental-detail-coway .head,
.rental-detail-coway .title {
    margin-bottom: 16px;
    text-align: center;
}
.rental-detail-coway .head .tit,
.rental-detail-coway .title .tit,
.rental-detail-coway h1.tit {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    margin: 8px 0 12px;
}
.rental-detail-coway h2.tit { font-size: 22px; font-weight: 600; margin: 16px 0 12px; }
.rental-detail-coway h3.tit { font-size: 18px; font-weight: 600; margin: 12px 0 8px; }

.rental-detail-coway .tit-sub {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
}
.rental-detail-coway .desc {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin: 8px 0 16px;
}

@media (max-width: 768px) {
    .rental-detail-coway .head .tit,
    .rental-detail-coway .title .tit,
    .rental-detail-coway h1.tit { font-size: 22px; }
}

/* ── 본문 텍스트 ──────────────────────────────────────────── */
.rental-detail-coway .txt {
    font-size: 15px;
    line-height: 1.7;
    margin: 8px 0;
}
.rental-detail-coway .num {
    font-weight: 700;
    color: #00aedb;
    margin-right: 4px;
}
.rental-detail-coway .code {
    font-size: 14px;
    color: #666;
    letter-spacing: 0.02em;
}
.rental-detail-coway .gray { color: #888; }

/* ── 이미지 / 비디오 ──────────────────────────────────────── */
.rental-detail-coway img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.rental-detail-coway p.img,
.rental-detail-coway .img {
    margin: 16px 0;
    text-align: center;
}
.rental-detail-coway p.img img,
.rental-detail-coway .img img {
    margin: 0 auto;
}
.rental-detail-coway video {
    max-width: 720px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
    background: #000;
}
@media (max-width: 768px) {
    .rental-detail-coway video { max-width: 100%; }
}

/* ── .video-wrapper (한 wrapper에 video 2개 나란히) ───────
 * coway 정수기 패턴: <div class="video-wrapper"><video/><video/></div>
 * PC 2-col, 모바일 1-col stack. 각 video 는 셀에 맞춰 100%.
 * --------------------------------------------------------- */
.rental-detail-coway .video-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 1080px;
    margin: 16px auto;
}
@media (max-width: 768px) {
    .rental-detail-coway .video-wrapper {
        grid-template-columns: 1fr;
    }
}
.rental-detail-coway .video-wrapper > video {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* ── .pln-imgTOtxt (이미지/영상 + 텍스트 좌우 배치) ────────
 * coway 패턴: .pln-imgTOtxt > .img + .txt (또는 .txt + .img).
 * - PC: 2-col grid, 모바일: stack
 * - .img 안의 video/img는 셀 너비 100%
 * - .txt는 본문/헤딩 정렬 (가운데 X, 본문은 좌측 정렬 자연스러움)
 * --------------------------------------------------------- */
.rental-detail-coway .pln-imgTOtxt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
    margin: 24px 0;
}
@media (max-width: 768px) {
    .rental-detail-coway .pln-imgTOtxt {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
.rental-detail-coway .pln-imgTOtxt > .img,
.rental-detail-coway .pln-imgTOtxt > .txt {
    margin: 0;
    min-width: 0;
}
.rental-detail-coway .pln-imgTOtxt > .img video,
.rental-detail-coway .pln-imgTOtxt > .img img {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 6px;
}
.rental-detail-coway .pln-imgTOtxt > .txt {
    text-align: left;
}
.rental-detail-coway .pln-imgTOtxt > .txt .tit,
.rental-detail-coway .pln-imgTOtxt > .txt h3.tit {
    text-align: left;
    margin: 0 0 12px;
}
.rental-detail-coway .pln-imgTOtxt > .txt .tit-sub,
.rental-detail-coway .pln-imgTOtxt > .txt p {
    text-align: left;
}

/* ── pln-nav (네비게이션) ─────────────────────────────────── */
.rental-detail-coway .pln-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    padding: 16px 0;
    margin: 0;
    justify-content: center;
}
.rental-detail-coway .pln-nav li {
    flex: 0 0 calc(20% - 16px);
    text-align: center;
}
@media (max-width: 768px) {
    .rental-detail-coway .pln-nav li {
        flex: 0 0 calc(50% - 16px);
    }
}

/* ── pln-product (메인 제품 영역) ─────────────────────────── */
.rental-detail-coway .pln-product {
    text-align: center;
    margin: 24px 0;
}

/* ── txt-area (좌우 split — 텍스트 영역) ─────────────────── */
.rental-detail-coway .txt-area {
    text-align: center;
    margin: 24px 0;
}

/* ── article / 일반 wrapper ───────────────────────────────── */
.rental-detail-coway .article {
    margin: 24px 0;
}
.rental-detail-coway .contents {
    padding: 16px 0;
}
.rental-detail-coway .head { padding-top: 16px; }
.rental-detail-coway .body { padding: 16px 0; }
.rental-detail-coway .bot,
.rental-detail-coway .top { padding: 8px 0; }

/* ── gray-box (강조 박스) ─────────────────────────────────── */
.rental-detail-coway .gray-box {
    background: #f5f5f5;
    padding: 24px 16px;
    border-radius: 8px;
    margin: 16px 0;
}

/* ── box, item, scroll_box, tablebox ──────────────────────── */
.rental-detail-coway .box {
    padding: 16px;
    border-radius: 6px;
    margin: 12px 0;
}
.rental-detail-coway .item {
    margin: 12px 0;
}
.rental-detail-coway .scroll_box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0;
}
.rental-detail-coway .tablebox {
    overflow-x: auto;
    margin: 16px 0;
}
.rental-detail-coway .tablebox table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.rental-detail-coway table th,
.rental-detail-coway table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: center;
}
.rental-detail-coway table th {
    background: #f0f0f0;
    font-weight: 600;
}

/* ── 캐러셀 (swiper / pln-swiper) → horizontal scroll ─────── */
.rental-detail-coway .swiper-container,
.rental-detail-coway .swiper-wrapper,
.rental-detail-coway .pln-swiper-container,
.rental-detail-coway .pln-swiper-wrapper {
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    padding: 0 0 12px;
    margin: 16px 0;
    transform: none !important;
    width: 100% !important;
}
.rental-detail-coway .swiper-slide,
.rental-detail-coway .pln-swiper-slide {
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: start;
    width: auto !important;
    margin: 0 !important;
}
@media (min-width: 769px) {
    .rental-detail-coway .swiper-slide,
    .rental-detail-coway .pln-swiper-slide {
        flex: 0 0 45%;
        max-width: 45%;
    }
}

/* ── pln-swiper 컨트롤러 (JS 미동작 → 숨김) ───────────────── */
.rental-detail-coway .pln-button-wrap,
.rental-detail-coway .pln-button-next,
.rental-detail-coway .pln-button-prev,
.rental-detail-coway .pln-pagination { display: none !important; }

/* ── info-waterHotCold (정수기: 온수/냉수 사용 케이스) ─────
 * coway 정수기 pdphtml 패턴:
 *   .info-waterHotCold > .water-wrap > .water.hot|.cold
 *     > .head(.tit, .txt) + .body > .item(img + p) × 4
 *   + 마지막에 .img(메인 이미지) 형제 요소.
 * - .water-wrap: 2-col grid (hot | cold), 모바일 1-col stack
 * - .body: 4 items 가로 정렬 (모바일도 4)
 * - .item img: SVG 아이콘 60px 제한 (원본 1000px+ 방지)
 * --------------------------------------------------------- */
.rental-detail-coway .info-waterHotCold .water-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 16px 0;
}
@media (max-width: 768px) {
    .rental-detail-coway .info-waterHotCold .water-wrap {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
.rental-detail-coway .info-waterHotCold .water {
    background: #fafafa;
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
}
.rental-detail-coway .info-waterHotCold .water.hot { background: #fff5f3; }
.rental-detail-coway .info-waterHotCold .water.cold { background: #f1f8fb; }
.rental-detail-coway .info-waterHotCold .water .head { margin-bottom: 16px; }
.rental-detail-coway .info-waterHotCold .water .head .tit {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #1a1a1a;
}
.rental-detail-coway .info-waterHotCold .water.hot .head .tit { color: #d9534f; }
.rental-detail-coway .info-waterHotCold .water.cold .head .tit { color: #2196c5; }
.rental-detail-coway .info-waterHotCold .water .head .txt {
    display: block;
    font-size: 13px;
    color: #555;
    margin: 0;
    line-height: 1.5;
}
.rental-detail-coway .info-waterHotCold .water .body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.rental-detail-coway .info-waterHotCold .water .body .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 4px 0;
}
.rental-detail-coway .info-waterHotCold .water .body .item img {
    width: 56px;
    height: 56px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 6px;
    border-radius: 0;
}
.rental-detail-coway .info-waterHotCold .water .body .item p {
    font-size: 12px;
    color: #333;
    margin: 0;
    line-height: 1.3;
}
.rental-detail-coway .info-waterHotCold > .pln-container > .img {
    margin: 24px auto 0;
    text-align: center;
    max-width: 480px;
}

/* ── .item > .text + img (텍스트 + 이미지 좌우 카드) ──────
 * coway 정수기 패턴 (예: .veryHotWater .item):
 *   <div class="item">
 *     <div class="text"><div class="tit">제목 <span class="hot">85~90℃</span></div><p>설명</p></div>
 *     <img class="pln-pc" ...><img class="pln-m" ...>
 *   </div>
 * - PC: flex row (text | img), 모바일: 세로 stack
 * - .tit는 타이틀 스타일, span.hot/.veryHot/.cold 는 컬러 뱃지
 * --------------------------------------------------------- */
.rental-detail-coway .item:has(> .text):has(> img) {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 16px 0;
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
}
@media (max-width: 768px) {
    .rental-detail-coway .item:has(> .text):has(> img) {
        flex-direction: column;
        align-items: stretch;
    }
}
.rental-detail-coway .item > .text {
    flex: 1 1 50%;
    min-width: 0;
    text-align: left;
}
.rental-detail-coway .item > img {
    flex: 0 0 auto;
    max-width: 50%;
    height: auto;
    border-radius: 6px;
}
@media (max-width: 768px) {
    .rental-detail-coway .item > img { max-width: 100%; }
}
.rental-detail-coway .item > .text > .tit {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #1a1a1a;
    line-height: 1.4;
    text-align: left;
}
.rental-detail-coway .item > .text > .tit > span {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    background: #fff;
    border: 1px solid currentColor;
    vertical-align: middle;
}
.rental-detail-coway .item > .text > .tit > span.hot,
.rental-detail-coway .item > .text > .tit .hot { color: #d9534f; }
.rental-detail-coway .item > .text > .tit > span.veryHot,
.rental-detail-coway .item > .text > .tit .veryHot { color: #c9302c; }
.rental-detail-coway .item > .text > .tit > span.cold,
.rental-detail-coway .item > .text > .tit .cold { color: #2196c5; }
.rental-detail-coway .item > .text > p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}
@media (max-width: 768px) {
    .rental-detail-coway .item > .text > .tit,
    .rental-detail-coway .item > .text > p { text-align: center; }
}

/* ── 일반 안전망: 작은 라벨 아이콘 패턴 폴백 ──────────────
 * coway에서 .body > .item > img + p 형태(아이콘 + 라벨)는
 * 정수기/공기청정기 곳곳에서 등장. 명시 layout이 없는 곳은
 * SVG 원본이 1000px+ 라 그대로 두면 거대해짐 → 80px 캡.
 * 직접 자손 img 만 적용하므로 .single-filterStep 같이
 * .img 래퍼 안에 들어간 패턴은 영향 없음.
 * --------------------------------------------------------- */
.rental-detail-coway .body > .item > img {
    max-width: 80px;
    max-height: 80px;
    height: auto;
    width: auto;
    object-fit: contain;
    margin: 0 auto 4px;
    display: block;
}

/* ── single-filterStep (Step 1~4 필터 단계) ───────────────
 * coway pdphtml: wrapper 안에 .item 4개가 평면 나열,
 *   .item > .top(.t1 = "Step N", .t2 = 필터명) + .bot(.img + .txt)
 * 4-column grid (모바일 2-column).
 * --------------------------------------------------------- */
.rental-detail-coway .single-filterStep {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 16px 0;
}
@media (max-width: 768px) {
    .rental-detail-coway .single-filterStep {
        grid-template-columns: repeat(2, 1fr);
    }
}
.rental-detail-coway .single-filterStep .item {
    background: #fafafa;
    border-radius: 8px;
    padding: 16px 12px;
    text-align: center;
    margin: 0;
}
.rental-detail-coway .single-filterStep .item .top { margin-bottom: 12px; }
.rental-detail-coway .single-filterStep .item .top .t1 {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #00aedb;
    margin: 0 0 4px;
    padding: 2px 8px;
    background: #e8f6fa;
    border-radius: 10px;
    letter-spacing: 0.04em;
}
.rental-detail-coway .single-filterStep .item .top .t2 {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 4px 0 0;
}
.rental-detail-coway .single-filterStep .item .bot .img {
    margin: 0 auto 8px;
    max-width: 120px;
}
.rental-detail-coway .single-filterStep .item .bot .img img {
    width: 100%;
    height: auto;
    border-radius: 0;
}
.rental-detail-coway .single-filterStep .item .bot .txt {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin: 0;
}
.rental-detail-coway .single-filterStep .item .bot .txt span {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

/* ── pln-imgTotxt-label (라벨 + 이미지/영상 + 텍스트 3단) ─
 * easyFilterChange 등 swiper-slide 내부 패턴.
 *   .pln-imgTotxt-label > .label(step 라벨 이미지) + .img(영상/이미지) + .txt
 * 카드 형태로 묶음.
 * --------------------------------------------------------- */
.rental-detail-coway .pln-imgTotxt-label {
    background: #fff;
    border-radius: 8px;
    padding: 16px 12px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.rental-detail-coway .pln-imgTotxt-label .label {
    margin: 0 auto 8px;
    max-width: 60px;
}
.rental-detail-coway .pln-imgTotxt-label .label img {
    width: 100%;
    height: auto;
    border-radius: 0;
}
.rental-detail-coway .pln-imgTotxt-label > .img {
    margin: 8px auto 12px;
    max-width: 100%;
}
.rental-detail-coway .pln-imgTotxt-label > .img video,
.rental-detail-coway .pln-imgTotxt-label > .img img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}
.rental-detail-coway .pln-imgTotxt-label .txt {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin-top: auto;
}
.rental-detail-coway .pln-imgTotxt-label .txt .g { display: block; }
.rental-detail-coway .pln-imgTotxt-label .txt .t1 {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin: 4px 0;
}

/* ── 컬러 미리보기 (pln-slimDesign-button-wrap 등) ─────────
 * coway pdphtml 패턴: wrapper 안에 .img + span.name 쌍이
 * 평면적으로 나열됨. wrapping 없이 grid 로 쌍을 묶어 정렬.
 * grid-auto-flow: dense 로 .img/.name 짝이 자연스럽게 짝지어
 * 한 컬럼에 위·아래로 배치되도록 함.
 * --------------------------------------------------------- */
.rental-detail-coway .pln-slimDesign-button-wrap,
.rental-detail-coway [class*="-button-wrap"]:not(.pln-button-wrap) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 12px;
    margin: 16px 0;
    padding: 12px 0;
    text-align: center;
    align-items: start;
    justify-items: center;
}
@media (max-width: 768px) {
    .rental-detail-coway .pln-slimDesign-button-wrap,
    .rental-detail-coway [class*="-button-wrap"]:not(.pln-button-wrap) {
        grid-template-columns: repeat(2, 1fr);
    }
}
.rental-detail-coway .pln-slimDesign-button-wrap .img,
.rental-detail-coway [class*="-button-wrap"]:not(.pln-button-wrap) .img {
    width: 80px;
    height: 80px;
    margin: 0 auto 6px;
    border-radius: 50%;
    overflow: hidden;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rental-detail-coway .pln-slimDesign-button-wrap .img img,
.rental-detail-coway [class*="-button-wrap"]:not(.pln-button-wrap) .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}
.rental-detail-coway .pln-slimDesign-button-wrap .name,
.rental-detail-coway [class*="-button-wrap"]:not(.pln-button-wrap) .name {
    display: block;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    margin-top: 4px;
}

/* ── 짧은 약어 class (.t1, .t2, .pr, .g 등) ───────────────── */
/* 줄단위 부가 텍스트 — 시각적 안전망 (의미적 layout 유지) */
.rental-detail-coway .t1,
.rental-detail-coway .t2 { display: block; margin: 4px 0; }
.rental-detail-coway .pr { display: inline-block; margin: 4px 8px; }

/* ── disclaimer (면책) ────────────────────────────────────── */
.rental-detail-coway .disclaimer {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
    padding: 12px 16px;
    background: #fafafa;
    border-radius: 4px;
    margin: 24px 0;
}
.rental-detail-coway .disclaimer * { font-size: inherit; }

/* ── cont_view ────────────────────────────────────────────── */
.rental-detail-coway .cont_view {
    margin: 16px 0;
}

/* ── 안전망 — JS UI 요소가 잔존해도 시각적으로 숨김 ──────── */
.rental-detail-coway .swiper-pagination,
.rental-detail-coway .swiper-button-next,
.rental-detail-coway .swiper-button-prev,
.rental-detail-coway .swiper-scrollbar,
.rental-detail-coway .blind,
.rental-detail-coway .sr-only,
.rental-detail-coway .hidden { display: none !important; }

/* ── 강조 / 일반 ──────────────────────────────────────────── */
.rental-detail-coway strong,
.rental-detail-coway b { font-weight: 600; }
.rental-detail-coway sup { font-size: 0.7em; vertical-align: super; }
.rental-detail-coway sub { font-size: 0.7em; vertical-align: sub; }
.rental-detail-coway br { line-height: 1.2; }

/* ===========================================================================
 * info-* 패턴 (제습공기청정기 APD-1023A 등 신형 페이지)
 *
 * 구조:
 *   .pln-info-full / .pln-info-bg / .pln-info-box  ← 섹션 컨테이너
 *     > h2.tit / h3.tit / .desc / .info-wrap
 *     > .info-list (ul) > li.list01..list05 (또는 .list-img/.list-txt)
 *     > .info-img, .info-video
 *     > .disclaimer-wrap > .disclaimer
 *   .pln-nav > li > .bg > .n-num + .n-tit (5단 카드 네비게이션)
 *   .icon-txt > .step1/.step2/.step3 (3단 풍량 카드)
 *   .step-box > .step + .step-img/.step-txt (필터 단계 박스)
 *   .txt-bg > .txt-left + .txt-right (좌우 분할 박스)
 * ========================================================================== */

/* ── 섹션 컨테이너 ────────────────────────────────────────── */
.rental-detail-coway .pln-info-full,
.rental-detail-coway .pln-info-box {
    margin: 24px 0;
    padding: 24px 16px;
}
.rental-detail-coway .pln-info-bg {
    background: #f7f9fb;
    border-radius: 8px;
}
.rental-detail-coway .pln-info-full > .tit,
.rental-detail-coway .pln-info-box > .tit,
.rental-detail-coway .pln-info-full > h2.tit,
.rental-detail-coway .pln-info-full > h3.tit {
    text-align: center;
    margin: 0 0 16px;
}
.rental-detail-coway .pln-info-full > .desc,
.rental-detail-coway .pln-info-box > .desc {
    text-align: center;
    margin: 8px auto 16px;
    max-width: 880px;
}

/* 섹션 인덱스 클래스(.info1, .info1-1, .info5-9 등)는 layout 차이 없음 — 시맨틱만 */

/* ── info-wrap (섹션 내부 wrapper) ────────────────────────── */
.rental-detail-coway .info-wrap {
    max-width: 1080px;
    margin: 16px auto;
    padding: 0 8px;
}

/* ── info-img / info-video (섹션 내 미디어) ──────────────── */
.rental-detail-coway .info-img,
.rental-detail-coway .info-video {
    margin: 16px auto;
    text-align: center;
    max-width: 100%;
}
.rental-detail-coway .info-img img,
.rental-detail-coway .info-video video {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* ── info-list (다목적 리스트) ────────────────────────────────
 * 두 가지 변형이 공존:
 *  (a) 평면 카드 그리드: li.list01..list05 → 2~5열
 *  (b) 좌우 split: li.list-img + li.list-txt → 2-col
 * ----------------------------------------------------------- */
.rental-detail-coway .info-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

/* (a) li.list01..list05 평면 그리드 — auto-fit으로 2~5열 자동 분배 */
.rental-detail-coway .info-list:not(:has(.list-img)):not(:has(.list-txt)) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}
@media (max-width: 768px) {
    .rental-detail-coway .info-list:not(:has(.list-img)):not(:has(.list-txt)) {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}
.rental-detail-coway .info-list > li[class^="list"],
.rental-detail-coway .info-list > li[class*=" list"] {
    background: #fff;
    border-radius: 8px;
    padding: 16px 12px;
    text-align: center;
    margin: 0;
    min-width: 0;
}

/* (b) list-img + list-txt 좌우 split (PC), 모바일 stack */
.rental-detail-coway .info-list:has(> li.list-img):has(> li.list-txt),
.rental-detail-coway .info-list:has(> .list-img):has(> .list-txt) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
}
@media (max-width: 768px) {
    .rental-detail-coway .info-list:has(> li.list-img):has(> li.list-txt),
    .rental-detail-coway .info-list:has(> .list-img):has(> .list-txt) {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
.rental-detail-coway .info-list > .list-img,
.rental-detail-coway .info-list > .list-txt {
    background: transparent;
    padding: 0;
    text-align: left;
    min-width: 0;
}
.rental-detail-coway .info-list > .list-img img,
.rental-detail-coway .info-list > .list-img video {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0;
}
.rental-detail-coway .info-list > .list-txt > .tit,
.rental-detail-coway .info-list > .list-txt > h3.tit {
    text-align: left;
    margin: 0 0 12px;
}
.rental-detail-coway .info-list > .list-txt > .desc {
    text-align: left;
    margin: 0 0 12px;
}

/* ── li-tit / li-desc (info-list > li 내부 제목/설명) ────── */
.rental-detail-coway .li-tit {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #1a1a1a;
}
.rental-detail-coway .li-desc {
    display: block;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

/* ── disclaimer-wrap (disclaimer 컨테이너) ────────────────── */
.rental-detail-coway .disclaimer-wrap {
    margin: 16px auto;
    max-width: 1080px;
}
.rental-detail-coway .disclaimer-wrap .disclaimer {
    margin: 0;
}

/* ── pln-nav 카드 (info1 5단 네비게이션) ──────────────────── */
.rental-detail-coway .pln-nav > li > .bg {
    background: #f0f4f7;
    border-radius: 8px;
    padding: 16px 8px;
    height: 100%;
    text-align: center;
}
.rental-detail-coway .pln-nav .n-num {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #00aedb;
    letter-spacing: 0.06em;
    margin: 0 0 8px;
}
.rental-detail-coway .pln-nav .n-tit {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    margin: 0;
}

/* ── icon-txt (3단 풍량 카드 등 가로 3분할) ──────────────── */
.rental-detail-coway .icon-txt {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
}
@media (max-width: 768px) {
    .rental-detail-coway .icon-txt { grid-template-columns: 1fr; }
}
.rental-detail-coway .icon-txt > div {
    background: #fff;
    border-radius: 8px;
    padding: 14px 10px;
    text-align: center;
    font-size: 13px;
    color: #333;
    line-height: 1.5;
}
.rental-detail-coway .icon-txt > div strong {
    display: block;
    font-size: 15px;
    color: #00aedb;
    margin-bottom: 4px;
}

/* ── step-box / step-img / step-txt (필터 단계) ──────────── */
.rental-detail-coway .step-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 8px;
}
.rental-detail-coway .step-box .step {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #00aedb;
    background: #e8f6fa;
    border-radius: 10px;
    padding: 2px 10px;
    margin: 0 0 6px;
    letter-spacing: 0.04em;
}
.rental-detail-coway .step-img {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    text-align: center;
    margin: 0;
}
.rental-detail-coway .step-txt {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    text-align: center;
    margin: 0;
}

/* ── txt-bg / txt-left / txt-right (좌우 분할 강조 박스) ── */
.rental-detail-coway .txt-bg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
    border: 1px solid #e6ecf0;
}
@media (max-width: 768px) {
    .rental-detail-coway .txt-bg { grid-template-columns: 1fr; gap: 6px; }
}
.rental-detail-coway .txt-bg .txt-left {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.5;
    align-self: center;
}
.rental-detail-coway .txt-bg .txt-right {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    align-self: center;
}

/* ── txt-box / tit-box (info2-2 등 텍스트 박스) ──────────── */
.rental-detail-coway .txt-box {
    margin: 8px 0;
}
.rental-detail-coway .tit-box {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
}

/* ── txt-img (텍스트 영역 내 보조 이미지) ────────────────── */
.rental-detail-coway .txt-img {
    margin: 12px auto;
    text-align: center;
    max-width: 100%;
}
.rental-detail-coway .txt-img img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ── bottom-txt (필터시스템 등 하단 캡션) ────────────────── */
.rental-detail-coway .bottom-txt {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #00aedb;
    margin: 12px 0 0;
}

/* ── info-list2 (info4-1 가로 5분할 강조) ────────────────── */
.rental-detail-coway .info-list2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 16px 0;
}
@media (max-width: 768px) {
    .rental-detail-coway .info-list2 { grid-template-columns: repeat(2, 1fr); }
}
.rental-detail-coway .info-list2 > li {
    background: #fff;
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    margin: 0;
}

/* ── pln-footer (Air Care HEART 등 본사 안내 푸터) ────────
 * "자세히 보기" 외부 anchor는 sanitize에서 decompose 되므로
 * 텍스트만 남고, 카드 형태로 깔끔하게 마감.
 * --------------------------------------------------------- */
.rental-detail-coway .pln-footer {
    margin: 32px 0 0;
    padding: 24px 16px;
    background: #f7f9fb;
    border-radius: 8px;
    text-align: center;
}
.rental-detail-coway .pln-footer .tit {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
}
.rental-detail-coway .pln-footer .desc {
    font-size: 14px;
    color: #555;
    margin: 0;
}

/* ── num (단계 번호 이미지) ───────────────────────────────── */
.rental-detail-coway .num {
    margin: 0 auto 8px;
    text-align: center;
}
.rental-detail-coway .num img {
    max-width: 60px;
    height: auto;
    margin: 0 auto;
}

/* ── cont_info (model code별 on/off 외곽 wrapper) ─────────
 * <div class="cont_info APD-1023A on"> 형태. on 클래스가 있어도
 * display 별도 지정 없이 흐름대로. layout 영향 없음 — 안전망만.
 * --------------------------------------------------------- */
.rental-detail-coway .cont_info { display: block; }