/* ============================================================================
 * rental-detail-skmagic.css
 *
 * SK매직 (SKMagic) 상품 상세 — 운영 화면용 CSS 스코프.
 * skmagic.com /goods/indexGoodsDetail 의 .productDetail 영역을 sanitize 후
 * .rental-detail-skmagic wrapper 로 감싸 사용.
 *
 * 사용:
 *   <link rel="stylesheet" href="/rental/assets/css/rental-detail-skmagic.css">
 *   <div class="rental-detail-skmagic"> ... 정리된 detail HTML ... </div>
 * ============================================================================ */

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

/* ── 본문 이미지 ────────────────────────────────────────── */
.rental-detail-skmagic img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ── 본문 wrapper ──────────────────────────────────────── */
.rental-detail-skmagic .productDetail,
.rental-detail-skmagic .prdDetails {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 16px;
}

/* ── 사양표 영역 (.prdSpec) ───────────────────────────────
 * 4종 표: 기본사양 / 주요스펙 / 고지정보 / 안전인증 정보
 * 구조: .prdSpec > .title(h3) + table.tblCont.type2
 *       table > tbody > tr > th + td + th + td (4-column)
 *       th width 20%, td width 30% (colgroup 지정)
 * --------------------------------------------------------- */
.rental-detail-skmagic .prdSpec {
    margin: 32px auto;
    max-width: 960px;
}
.rental-detail-skmagic .prdSpec .title {
    margin: 28px 0 10px;
    padding: 0 0 8px;
    border-bottom: 2px solid #1a1a1a;
}
.rental-detail-skmagic .prdSpec .title h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

/* ── 표 공통 ──────────────────────────────────────────── */
.rental-detail-skmagic table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 16px;
    font-size: 14px;
    background: #fff;
    border-bottom: 1px solid #ddd;
}
.rental-detail-skmagic table caption {
    /* caption은 안전인증 표에만 있고 시각상 의미 없음 */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.rental-detail-skmagic table th,
.rental-detail-skmagic table td {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: middle;
    line-height: 1.5;
    word-break: keep-all;
}
.rental-detail-skmagic table tr:last-child th,
.rental-detail-skmagic table tr:last-child td {
    border-bottom: 0;
}
.rental-detail-skmagic table th {
    background: #f7f7f8;
    font-weight: 600;
    color: #4a4a4a;
    font-size: 13px;
    width: 20%;
}
.rental-detail-skmagic table td {
    color: #1a1a1a;
    background: #fff;
}
/* 같은 행에 두 번째 th 가 오면 분리선 (4-column 구조) */
.rental-detail-skmagic table th + td + th {
    border-left: 1px solid #eee;
}

/* ── 안전인증 영역 (.icoMark) — KC 마크 + 인증번호 ────── */
.rental-detail-skmagic .icoMark {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.rental-detail-skmagic .icoMark p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.rental-detail-skmagic .icoMark .ico_kc {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1.5px solid #333;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 33px;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}
.rental-detail-skmagic .icoMark .ico_kc::before {
    content: "KC";
}
.rental-detail-skmagic .icoMark strong {
    font-weight: 600;
    color: #1a1a1a;
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* ── 모바일 — 4-column → 2-column ───────────────────────── */
@media (max-width: 768px) {
    .rental-detail-skmagic table {
        font-size: 13px;
    }
    .rental-detail-skmagic table th,
    .rental-detail-skmagic table td {
        padding: 10px 12px;
    }
    .rental-detail-skmagic table th {
        width: 35%;
        font-size: 12px;
    }
    /* 4-column 표를 2-column 으로 변환 (모바일) */
    .rental-detail-skmagic table colgroup { display: none; }
    .rental-detail-skmagic table tr {
        display: grid;
        grid-template-columns: 35% 1fr;
        border-bottom: 1px solid #eee;
    }
    .rental-detail-skmagic table tr:last-child { border-bottom: 0; }
    .rental-detail-skmagic table tr th,
    .rental-detail-skmagic table tr td {
        border-bottom: 0;
        border-left: 0 !important;
    }
    /* 4셀(th-td-th-td) 행은 2줄로 wrap */
    .rental-detail-skmagic table tr:has(> th:nth-of-type(2)) {
        grid-template-columns: 35% 1fr;
        grid-auto-rows: auto;
    }
    .rental-detail-skmagic table tr:has(> th:nth-of-type(2)) > * {
        border-bottom: 1px solid #f5f5f5;
    }
}

/* ── 본문 텍스트 ──────────────────────────────────────── */
.rental-detail-skmagic p {
    margin: 0 0 8px;
}
.rental-detail-skmagic br {
    line-height: 1.2;
}

/* ── 본문 탭 콘텐츠 강제 노출 (JS 미동작 환경) ───────────── */
.rental-detail-skmagic .tabContent {
    display: block !important;
    margin: 24px 0;
}
.rental-detail-skmagic .tabContentWrap > .tabContent + .tabContent {
    border-top: 1px solid #eee;
    padding-top: 16px;
}

/* ── prdSpec (사양표 그룹) 헤딩 ──────────────────────────── */
.rental-detail-skmagic .prdSpec .title {
    margin: 24px 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #1a1a1a;
}
.rental-detail-skmagic .prdSpec .title h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

/* ── 안전망 (sanitize 누락 시) ──────────────────────────── */
.rental-detail-skmagic .blind,
.rental-detail-skmagic .hidden,
.rental-detail-skmagic .sr-only,
.rental-detail-skmagic .swiper-pagination,
.rental-detail-skmagic .swiper-button-next,
.rental-detail-skmagic .swiper-button-prev,
.rental-detail-skmagic .swiper-scrollbar,
.rental-detail-skmagic .productDetail > .top,
.rental-detail-skmagic .secItemOption,
.rental-detail-skmagic .optionScrollRight,
.rental-detail-skmagic .giftInfoWrap,
.rental-detail-skmagic .partner-point-banner,
.rental-detail-skmagic .productInfo,
.rental-detail-skmagic .productGiftInfo,
.rental-detail-skmagic .product-state,
.rental-detail-skmagic .btn_detail,
.rental-detail-skmagic .gnb-category-product,
.rental-detail-skmagic .prdReview,
.rental-detail-skmagic .prdQna,
.rental-detail-skmagic .tab-menu,
.rental-detail-skmagic .tab-list,
.rental-detail-skmagic .viewTabGroup .tabInner,
.rental-detail-skmagic .viewTabGroup .tab,
.rental-detail-skmagic .rentalCon4,
.rental-detail-skmagic .buyCon4,
.rental-detail-skmagic .rentalBenefit,
.rental-detail-skmagic .rentalRule,
.rental-detail-skmagic .rentalRecommend,
.rental-detail-skmagic .labelList { display: none !important; }