/* ============================
   Compare Page Wrapper
   - 비교 패널 자체 스타일은 detail/style.css의
     .cmp_panel_inner / .cmp_table / .cmp_label_cell / .cmp_value_cell /
     .cmp_card_head 등을 그대로 사용함
   ============================ */
.compare_page {
    background: #f7f8fa;
    padding-bottom: 80px;
    min-height: 100vh;
}

/* 디테일 페이지와 동일하게 헤더 sticky 해제 */
body:has(.compare_page) header {
    position: static;
}

/* 채널톡 위젯 숨김 (디테일과 동일 정책) */
body:has(.compare_page) #ch-plugin,
body:has(.compare_page) [id^="ch-plugin"],
body:has(.compare_page) [class*="ch-desk"] {
    display: none !important;
}

/* 브레드크럼 */
.compare_page .breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 20px 0 16px;
    font-size: 13px;
    color: #999;
}

.compare_page .breadcrumb a {
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
}

.compare_page .breadcrumb a:hover {
    color: var(--main-color);
}

.compare_page .breadcrumb i {
    font-size: 14px;
    color: #ccc;
}

.compare_page .breadcrumb span {
    color: var(--main-color);
    font-weight: 600;
}

.compare_inner {
    margin-top: 8px;
}

/* 모바일 - 풀너비 사용 (디테일과 동일 패턴) */
@media screen and (max-width: 767px) {
    .compare_page {
        padding-bottom: 40px;
    }

    .compare_page > .inner {
        padding-left: 0;
        padding-right: 0;
    }

    .compare_page .breadcrumb {
        padding-left: 14px;
        padding-right: 14px;
    }

    .compare_inner {
        margin-top: 0;
    }
}