/* ============================
   Detail Page Base
   ============================ */
:root {
    --edk-header-h: 100px; /* JS에서 실제 헤더 높이로 동기화 */
    --edk-section-nav-h: 60px;
}

/* 디테일 페이지에서는 전역 header sticky 해제 */
body:has(.detail_page) header {
    position: static;
}

/* 디테일 페이지에서는 채널톡 위젯 숨김 (모바일 하단 요약바와 충돌 방지) */
body:has(.detail_page) #ch-plugin,
body:has(.detail_page) [id^="ch-plugin"],
body:has(.detail_page) [class*="ch-desk"] {
    display: none !important;
}

.detail_page {
    background: #f7f8fa;
    padding-bottom: 80px;
    min-height: 100vh;
}

/* ============================
   Breadcrumb
   ============================ */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 20px 0 16px;
    font-size: 13px;
    color: #999;
}

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

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

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

.breadcrumb span.cat-homepage { color: #2a3ab8; font-weight: 600; }
.breadcrumb span.cat-shopping { color: #0a8c5e; font-weight: 600; }
.breadcrumb span.cat-platform { color: #6a3acc; font-weight: 600; }
.breadcrumb span.cat-app      { color: #007a8c; font-weight: 600; }
.breadcrumb span.cat-landing  { color: #c23a5e; font-weight: 600; }
.breadcrumb span.cat-system   { color: #b07d00; font-weight: 600; }

/* ============================
   Section Nav (Sticky, full-width)
   ============================ */
.section_nav_wrap {
    position: sticky;
    top: var(--edk-header-h);
    z-index: 30;
    background: #ffffff;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.section_nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 6px 0;
}

.section_nav::-webkit-scrollbar { display: none; }

.section_nav_item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 22px;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.2s;
}

.section_nav_item::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--main-color);
    opacity: 0;
    transform: scaleX(0.4);
    transition: all 0.25s ease;
}

.section_nav_item:hover {
    color: #1a1a1a;
}

.section_nav_item.active {
    color: var(--main-color);
}

.section_nav_item.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.section_nav_item i {
    font-size: 16px;
}

/* ============================
   2-Column Layout
   ============================ */
.detail_layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    min-width: 0;
    max-width: 100%;
}

.detail_content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.detail_sidebar {
    flex: 0 0 340px;
    min-width: 340px;
    align-self: flex-start;
    position: sticky;
    top: calc(var(--edk-header-h) + var(--edk-section-nav-h) + 16px);
    z-index: 5;
}

.sidebar_sticky {
    max-height: calc(100vh - var(--edk-header-h) - var(--edk-section-nav-h) - 32px);
    overflow-y: auto;
    overflow-x: visible;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 6px;
    margin: -6px;
}

.sidebar_sticky::-webkit-scrollbar {
    display: none;
}

/* 사이드바 카드가 갱신될 때 깜빡임 (JS가 .updated 클래스 토글) */
.sidebar_card.updated {
    animation: sb_card_flash 0.6s ease-out;
}

@keyframes sb_card_flash {
    0% {
        box-shadow:
            0 0 0 0 rgba(91, 108, 255, 0.4),
            0 12px 36px -12px rgba(12, 10, 83, 0.18);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(91, 108, 255, 0.18),
            0 16px 40px -10px rgba(12, 10, 83, 0.28);
    }
    100% {
        box-shadow:
            0 0 0 0 rgba(91, 108, 255, 0),
            0 12px 36px -12px rgba(12, 10, 83, 0.18);
    }
}

/* ============================
   Section Common
   ============================ */
.detail_section {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8e8e8;
    padding: 32px;
    margin-bottom: 20px;
    min-width: 0;
}

.sec_head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.sec_head > div:first-child {
    flex: 1;
    min-width: 0;
}

.sec_title {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.sec_sub {
    font-size: 14px;
    color: #999;
}

/* ============================
   Section 1: Package Info (자동 생성 포스터)
   ============================ */
.section_info {
    padding: 0;
    overflow: hidden;
}

/* --- Poster base (list와 동일한 룩) --- */
.edk_poster {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}

/* --- 카테고리별 베이스 컬러 --- */
.edk_poster.cat-homepage { background: #0c1340; }
.edk_poster.cat-shopping { background: #06321f; }
.edk_poster.cat-platform { background: #1f0a3a; }
.edk_poster.cat-app      { background: #052a3a; }
.edk_poster.cat-landing  { background: #3a0a1e; }
.edk_poster.cat-system   { background: #2a1f0a; }

/* --- Pattern 변형 (4가지) --- */
.edk_poster .ep_pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.edk_poster.pat-dots .ep_pattern {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
    background-size: 26px 26px;
}

.edk_poster.pat-grid .ep_pattern {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 36px 36px;
}

.edk_poster.pat-diag .ep_pattern {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 22px,
        rgba(255, 255, 255, 0.04) 22px,
        rgba(255, 255, 255, 0.04) 44px
    );
}

.edk_poster.pat-lines .ep_pattern {
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 16px,
        rgba(255, 255, 255, 0.04) 16px,
        rgba(255, 255, 255, 0.04) 17px
    );
}

/* --- 광원 효과 (큰 사이즈) --- */
.edk_poster::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    pointer-events: none;
}

.edk_poster.cat-homepage::before { background: radial-gradient(circle, rgba(91, 108, 255, 0.22) 0%, transparent 70%); }
.edk_poster.cat-shopping::before { background: radial-gradient(circle, rgba(16, 201, 138, 0.22) 0%, transparent 70%); }
.edk_poster.cat-platform::before { background: radial-gradient(circle, rgba(166, 117, 255, 0.22) 0%, transparent 70%); }
.edk_poster.cat-app::before      { background: radial-gradient(circle, rgba(0, 188, 212, 0.22) 0%, transparent 70%); }
.edk_poster.cat-landing::before  { background: radial-gradient(circle, rgba(255, 94, 126, 0.22) 0%, transparent 70%); }
.edk_poster.cat-system::before   { background: radial-gradient(circle, rgba(255, 174, 0, 0.22) 0%, transparent 70%); }

/* --- 큰 모노그램 워터마크 --- */
.edk_poster .ep_mark {
    position: absolute;
    right: -20px;
    bottom: -60px;
    font-size: 320px;
    line-height: 0.85;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.08);
    letter-spacing: -0.04em;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}

.edk_poster .ep_top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    flex-wrap: wrap;
}

.edk_poster .ep_label {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    backdrop-filter: blur(4px);
    flex-shrink: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edk_poster .ep_meta {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.3px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edk_poster .ep_bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.edk_poster .ep_line {
    width: 32px;
    height: 2px;
    border-radius: 100px;
}

.edk_poster.cat-homepage .ep_line { background: #5b6cff; }
.edk_poster.cat-shopping .ep_line { background: #10c98a; }
.edk_poster.cat-platform .ep_line { background: #a675ff; }
.edk_poster.cat-app      .ep_line { background: #00bcd4; }
.edk_poster.cat-landing  .ep_line { background: #ff5e7e; }
.edk_poster.cat-system   .ep_line { background: #ffae00; }

.edk_poster .ep_caption {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.55);
}

/* --- info_header 전용: 큰 hero 사이즈 --- */
.info_header {
    min-height: 280px;
    padding: 36px 40px;
    border-bottom: 1px solid #e8e8e8;
    min-width: 0;
    overflow: hidden;
}

.info_header .ih_inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 208px;
    min-width: 0;
    gap: 24px;
}

.info_header .ih_text {
    margin-top: auto;
    margin-bottom: 4px;
    min-width: 0;
}

.ih_title {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 8px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ih_desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
    max-width: 80%;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* --- 2) Body (긴 콘텐츠) --- */
.info_body {
    padding: 32px 36px 36px;
    background: #fff;
}

.info_body_label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f3f5fa;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 20px;
}

.info_body_label i {
    font-size: 16px;
}

/* ============================
   Long Content (Editor Area)
   ============================ */
.long_content_wrap {
    position: relative;
    max-height: 600px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.long_content_wrap.expanded {
    max-height: 20000px;
}

.long_content {
    padding: 8px 0;
}

/* Editor block styles */
.long_content .edt_block {
    margin-bottom: 36px;
}

.long_content .edt_block:last-child {
    margin-bottom: 0;
}

.long_content .edt_h2 {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f0f0f0;
}

.long_content .edt_h3 {
    font-size: 18px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 14px;
    padding-left: 14px;
    border-left: 4px solid var(--main-color);
}

.long_content .edt_p {
    font-size: 15px;
    line-height: 1.75;
    color: #555;
    margin-bottom: 14px;
}

.long_content .edt_p:last-child {
    margin-bottom: 0;
}

.long_content .edt_ul {
    list-style: none;
    padding: 0;
    margin: 14px 0;
}

.long_content .edt_ul li {
    position: relative;
    padding: 8px 0 8px 28px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    border-bottom: 1px dashed #f0f0f0;
}

.long_content .edt_ul li:last-child {
    border-bottom: none;
}

.long_content .edt_ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--main-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Editor image placeholder (실제 에디터에서는 img 태그가 들어옴) */
.long_content .edt_img_wrap {
    margin: 18px 0;
}

.long_content .edt_img_placeholder {
    width: 100%;
    min-height: 220px;
    background: linear-gradient(135deg, #f5f7fa, #eef0f6);
    border-radius: 12px;
    border: 1px dashed #d8dde5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #aaa;
}

.long_content .edt_img_placeholder i {
    font-size: 36px;
}

.long_content .edt_img_placeholder span {
    font-size: 12px;
    font-weight: 500;
}

.long_content .edt_img_wrap img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

/* Fade Overlay */
.long_content_fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, #fff 100%);
    pointer-events: none;
    transition: opacity 0.3s;
}

.long_content_wrap.expanded .long_content_fade {
    opacity: 0;
}

/* More Button */
.long_content_more {
    margin-top: 16px;
    text-align: center;
}

.long_content_wrap.expanded + .long_content_more {
    margin-top: 24px;
}

.btn_more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 36px;
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.btn_more:hover {
    border-color: var(--main-color);
    color: var(--main-color);
    box-shadow: 0 4px 16px rgba(12, 10, 83, 0.12);
    transform: translateY(-1px);
}

.btn_more i {
    font-size: 20px;
    transition: transform 0.3s;
}

/* ============================
   Section 2: Stack
   ============================ */
.stack_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stack_item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #fafbfc;
    border: 1px solid #ececec;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.stack_item i {
    font-size: 18px;
}

.stack_item.cat-homepage i { color: #5b6cff; }
.stack_item.cat-shopping i { color: #10c98a; }
.stack_item.cat-platform i { color: #a675ff; }
.stack_item.cat-app      i { color: #00bcd4; }
.stack_item.cat-landing  i { color: #ff5e7e; }
.stack_item.cat-system   i { color: #ffae00; }

/* ============================
   Section: Addons (추가 옵션)
   ============================ */
.addon_total_chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fafbfc;
    border: 1px solid #ececec;
    border-radius: 100px;
    font-size: 13px;
    color: #777;
    transition: all 0.3s;
    flex-shrink: 0;
}

.addon_total_chip i {
    font-size: 18px;
    color: #aaa;
    transition: color 0.3s;
}

.addon_total_chip .atc_label {
    font-weight: 600;
    color: #999;
}

.addon_total_chip .atc_count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #eee;
    color: #999;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
}

.addon_total_chip .atc_divider {
    width: 1px;
    height: 14px;
    background: #ddd;
}

.addon_total_chip .atc_price {
    font-weight: 800;
    color: #999;
    font-size: 14px;
}

.addon_total_chip.has_items {
    background: #f3f5ff;
    border-color: var(--main-color);
}

.addon_total_chip.has_items i,
.addon_total_chip.has_items .atc_label {
    color: var(--main-color);
}

.addon_total_chip.has_items .atc_count {
    background: var(--main-color);
    color: #fff;
}

.addon_total_chip.has_items .atc_price {
    color: var(--main-color);
}

/* Group */
.addon_groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.addon_group {
    border: 1px solid #ececec;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    transition: all 0.3s;
}

.addon_group.has_selected {
    border-color: var(--main-color);
    box-shadow: 0 4px 16px rgba(12, 10, 83, 0.06);
}

.ag_head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: #fafbfc;
    border-bottom: 1px solid #ececec;
    transition: background 0.3s;
}

.addon_group.has_selected .ag_head {
    background: #f3f5ff;
}

.ag_icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--main-color);
    background: #fff;
    border: 1px solid #ececec;
    transition: all 0.3s;
}

.addon_group.has_selected .ag_icon {
    background: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
}

.ag_text {
    flex: 1;
    min-width: 0;
}

.ag_name {
    font-size: 15px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.ag_desc {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}

.ag_count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #999;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.agc_num {
    font-size: 16px;
    color: #999;
    font-weight: 800;
    transition: color 0.2s;
}

.addon_group.has_selected .agc_num {
    color: var(--main-color);
}

/* Items grid */
.ag_items {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.addon_item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.addon_item:hover {
    border-color: #bbb;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.addon_item .ai_check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1.5px solid #ddd;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 0.2s ease;
}

.addon_item .ai_check i {
    font-size: 14px;
    transform: scale(0.6);
    transition: transform 0.2s ease;
}

.addon_item .ai_name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.addon_item .ai_price {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    flex-shrink: 0;
}

/* Selected state */
.addon_item.is_selected {
    background: #f8f9ff;
    border-color: var(--main-color);
    box-shadow: 0 2px 12px rgba(12, 10, 83, 0.08);
}

.addon_item.is_selected .ai_check {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}

.addon_item.is_selected .ai_check i {
    transform: scale(1);
}

.addon_item.is_selected .ai_name {
    color: var(--main-color);
}

.addon_item.is_selected .ai_price {
    color: var(--main-color);
}

/* Feature Request Notice */
.addon_request_notice {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: #fafbfc;
    border: 1px dashed #d8dde5;
    border-radius: 14px;
}

.arn_icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--main-color);
}

.arn_text {
    flex: 1;
    min-width: 0;
}

.arn_title {
    font-size: 15px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.arn_desc {
    font-size: 13px;
    color: #777;
    line-height: 1.55;
}

.arn_btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.arn_btn:hover {
    border-color: var(--main-color);
    color: var(--main-color);
    transform: translateY(-1px);
}

.arn_btn i {
    font-size: 16px;
}

/* Bottom Summary (옵션 선택 시 슬라이드 업) */
.addon_summary {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    background: linear-gradient(135deg, #0c0a53, #1a1888);
    border-radius: 14px;
    color: #fff;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.35s ease;
}

.addon_summary.is_visible {
    max-height: 200px;
    margin-top: 22px;
    padding: 18px 24px;
    opacity: 1;
    transform: translateY(0);
}

.addon_summary .as_left {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.addon_summary .as_label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.addon_summary .as_label strong {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin: 0 2px;
}

.addon_summary .as_total {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.addon_summary .as_right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn_addon_clear {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn_addon_clear:hover {
    background: rgba(255, 255, 255, 0.18);
}

.btn_addon_clear i {
    font-size: 16px;
}

.btn_addon_apply {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 22px;
    background: #fff;
    color: var(--main-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s;
}

.btn_addon_apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.btn_addon_apply i {
    font-size: 16px;
}

/* ============================
   Sidebar - Addon Summary
   ============================ */
.sb_addon_summary {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f0f0f0;
}

.sas_list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    max-height: 200px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: thin;
}

.sas_list::-webkit-scrollbar {
    width: 4px;
}

.sas_list::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 100px;
}

.sas_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed #f0f0f0;
}

.sas_item:last-child {
    border-bottom: none;
}

.sas_name {
    font-size: 12px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sas_price {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    flex-shrink: 0;
}

.sas_empty {
    padding: 10px 0;
    text-align: center;
    font-size: 12px;
    color: #bbb;
}

/* ============================
   Section 3: Plan Tabs
   ============================ */
.plan_tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 2px 4px;
    margin-bottom: 20px;
    min-width: 0;
    max-width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.plan_tabs::-webkit-scrollbar { display: none; }

.plan_tab {
    position: relative;
    flex: 1;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 16px;
    background: #fafbfc;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.plan_tab:hover {
    border-color: #ccc;
    background: #fff;
}

.plan_tab.active {
    background: #fff;
    border-color: var(--main-color);
    box-shadow: 0 4px 16px rgba(12, 10, 83, 0.08);
}

.pt_name {
    font-size: 14px;
    font-weight: 700;
    color: #666;
}

.plan_tab.active .pt_name {
    color: var(--main-color);
}

.pt_price {
    font-size: 13px;
    font-weight: 600;
    color: #999;
}

.plan_tab.active .pt_price {
    color: #1a1a1a;
}

.pt_badge {
    position: absolute;
    top: -8px;
    right: 8px;
    padding: 2px 8px;
    background: var(--point-color);
    color: #fff;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Plan Panels */
.plan_panel {
    display: none;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    overflow: hidden;
    animation: panelFade 0.3s ease;
}

.plan_panel.active {
    display: block;
}

@keyframes panelFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.pp_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
    background: linear-gradient(135deg, #f8f9ff, #fafbff);
    border-bottom: 1px solid #eef0f7;
}

.pp_left {
    flex: 1;
}

.pp_name {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.pp_summary {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
}

.pp_right {
    text-align: right;
    flex-shrink: 0;
}

.pp_price {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: var(--main-color);
    line-height: 1.2;
}

.pp_vat {
    font-size: 12px;
    color: #aaa;
}

/* Plan Features */
.pp_features {
    padding: 8px 28px;
}

.pp_feature_row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
}

.pp_feature_row:last-child {
    border-bottom: none;
}

.pp_feature_row.is_none {
    opacity: 0.5;
}

.pf_label {
    flex: 0 0 110px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
}

.pf_label i {
    font-size: 18px;
    color: var(--success-color);
}

.pp_feature_row.is_none .pf_label i {
    color: #ccc;
}

.pf_value_list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pf_chip {
    display: inline-block;
    padding: 4px 12px;
    background: #f3f5fa;
    border-radius: 6px;
    font-size: 13px;
    color: #444;
    font-weight: 500;
}

.pf_none {
    font-size: 13px;
    color: #aaa;
    font-style: italic;
}

/* Plan Actions */
.pp_actions {
    display: flex;
    gap: 10px;
    padding: 20px 28px 24px;
    border-top: 1px solid #f3f4f6;
    background: #fff;
}

.btn_pp_cart {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 22px;
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn_pp_cart:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}

.btn_pp_cart.in_cart {
    background: #f8f9ff;
    border-color: var(--main-color);
    color: var(--main-color);
}

.btn_pp_cart i {
    font-size: 18px;
}

.btn_pp_inquiry {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 22px;
    background: var(--main-color);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
}

.btn_pp_inquiry:hover {
    background: #1a1878;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(12, 10, 83, 0.25);
}

.btn_pp_inquiry i {
    font-size: 18px;
}

/* ============================
   Section 4: Process
   ============================ */
.process_list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.process_item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 24px;
    background: #fafbfc;
    border: 1px solid #ececec;
    border-radius: 12px;
    transition: all 0.2s;
}

.process_item:hover {
    border-color: var(--main-color);
    background: #fff;
}

.ps_num {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    font-family: 'GmarketSans', sans-serif;
}

.ps_body {
    flex: 1;
}

.ps_title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.ps_desc {
    font-size: 14px;
    color: #777;
    line-height: 1.6;
}

/* ============================
   Section 5: FAQ
   ============================ */
.faq_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq_item {
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.faq_item.open {
    border-color: var(--main-color);
    background: #fafbff;
}

.faq_q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    transition: color 0.2s;
}

.faq_q:hover {
    color: var(--main-color);
}

.faq_q i {
    font-size: 22px;
    color: #999;
    transition: transform 0.3s;
}

.faq_item.open .faq_q i {
    transform: rotate(45deg);
    color: var(--main-color);
}

.faq_a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq_item.open .faq_a {
    max-height: 500px;
}

.faq_a p {
    padding: 0 24px 20px;
    font-size: 14px;
    color: #666;
    line-height: 1.7;
}

/* ============================
   Sidebar (현재 선택 요약)
   ============================ */
.sidebar_card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e0e4ff;
    padding: 22px 22px 20px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 12px 36px -12px rgba(12, 10, 83, 0.18),
        0 4px 14px -8px rgba(12, 10, 83, 0.12);
    overflow: hidden;
}

/* 상단 컬러 액센트 바 */
.sidebar_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--main-color) 0%, #4a5fd8 50%, var(--point-color) 100%);
    background-size: 200% 100%;
    animation: sb_accent_shift 6s ease-in-out infinite;
}

@keyframes sb_accent_shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 라이브 뱃지 - "현재 견적" 느낌 강조 (점멸 점 + LIVE 텍스트) */
.sidebar_card::after {
    content: '';
    position: absolute;
    top: 18px;
    right: 18px;
    width: 56px;
    height: 20px;
    border-radius: 100px;
    background: #fff5f7 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 20'><circle cx='10' cy='10' r='3' fill='%23e63b5e'/><text x='20' y='14' font-family='-apple-system,sans-serif' font-size='9' font-weight='800' fill='%23e63b5e' letter-spacing='0.8'>LIVE</text></svg>") no-repeat center/contain;
    border: 1px solid #ffd6df;
    z-index: 3;
    animation: sb_live_pulse 1.8s ease-in-out infinite;
}

.sb_label_wrap {
    margin-bottom: 8px;
}

@keyframes sb_live_pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(230, 59, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(230, 59, 94, 0);
    }
}

.sb_label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.sb_label.cat-homepage { background: #eef1ff; color: #2a3ab8; }
.sb_label.cat-shopping { background: #e6f8f1; color: #0a8c5e; }
.sb_label.cat-platform { background: #f3eaff; color: #6a3acc; }
.sb_label.cat-app      { background: #e2f6fa; color: #007a8c; }
.sb_label.cat-landing  { background: #ffeaf0; color: #c23a5e; }
.sb_label.cat-system   { background: #fff5e0; color: #b07d00; }

.sb_title {
    font-size: 17px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.35;
}

/* 섹션 라벨 (선택한 플랜 / 추가 옵션 공용) */
.sb_sec_label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    color: #555;
    letter-spacing: 0.3px;
}

.sb_sec_label i {
    font-size: 16px;
    color: var(--main-color);
}

.sb_sec_label .sas_count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: var(--main-color);
    color: #fff;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
}

/* 선택된 플랜 박스 */
.sb_selected_plan {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f0f0f0;
}

.sb_plan_box {
    position: relative;
    padding: 16px 18px;
    background: linear-gradient(135deg, #f8f9ff 0%, #eef1ff 100%);
    border: 1px solid #d4daff;
    border-radius: 12px;
    box-shadow: 0 4px 14px -6px rgba(12, 10, 83, 0.12);
    overflow: hidden;
}

/* 좌측 컬러 액센트 바 */
.sb_plan_box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--main-color), #4a5fd8);
}

.sb_plan_top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.sb_plan_name {
    font-size: 16px;
    font-weight: 800;
    color: var(--main-color);
}

.sb_plan_badge {
    padding: 1px 8px;
    background: var(--point-color);
    color: #fff;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
}

.sb_plan_price {
    font-size: 18px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.sb_plan_summary {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
}

/* 합계 박스 */
.sb_total_box {
    position: relative;
    margin-top: 18px;
    padding: 18px 20px;
    background:
        radial-gradient(circle at top right, rgba(91, 108, 255, 0.08), transparent 70%),
        linear-gradient(135deg, #0c0a53 0%, #1a1878 100%);
    border: 1px solid #1a1878;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px -8px rgba(12, 10, 83, 0.35);
}

/* 합계 박스 배경 패턴 */
.sb_total_box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1.2px);
    background-size: 14px 14px;
    pointer-events: none;
}

.sb_total_breakdown {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
}

.sbtb_row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.sbtb_row span:last-child {
    font-weight: 700;
    color: #fff;
}

.sb_total_grand {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.sbtg_label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.3px;
}

.sbtg_price {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(91, 108, 255, 0.5);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 가격 갱신 시 살짝 튀는 효과 (JS에서 .pulse 클래스 토글) */
.sbtg_price.pulse {
    animation: sb_price_pulse 0.5s ease-out;
}

@keyframes sb_price_pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.08); color: var(--point-color); }
    100% { transform: scale(1); }
}

/* Sidebar Actions */
.sb_actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.btn_sb_primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: var(--main-color);
    color: #fff;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
}

.btn_sb_primary:hover {
    background: #1a1878;
    box-shadow: 0 6px 20px rgba(12, 10, 83, 0.3);
}

.btn_sb_primary i {
    font-size: 20px;
}

/* 비교 추가 + 비교함 보기 — 7:3 분할 */
.sb_compare_row {
    display: flex;
    gap: 8px;
}

.btn_sb_add {
    flex: 0 0 auto;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 10px;
    background: #fafbfc;
    border: 1px solid #ececec;
    color: #555;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn_sb_add:hover {
    background: #f0f0f0;
    color: #1a1a1a;
    border-color: #d4daff;
}

.btn_sb_add i {
    font-size: 16px;
}

/* 비교함 보기 — LIVE 스타일 강조 (글로우 + 펄스) */
.btn_sb_view {
    position: relative;
    flex: 1 1 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    background: linear-gradient(135deg, #fff5f7 0%, #fff 60%, #f8f9ff 100%);
    border: 1.5px solid #ffd6df;
    color: var(--main-color);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 14px -6px rgba(230, 59, 94, 0.25);
    overflow: hidden;
}

.btn_sb_view::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    border: 1.5px solid #ff8aa3;
    opacity: 0;
    animation: btn_view_pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes btn_view_pulse {
    0%, 100% {
        opacity: 0;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.04);
    }
}

.btn_sb_view::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: btn_view_shine 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes btn_view_shine {
    0%, 70% { left: -50%; }
    100% { left: 150%; }
}

.btn_sb_view:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -6px rgba(230, 59, 94, 0.4);
    border-color: #ff8aa3;
}

.btn_sb_view i {
    font-size: 16px;
    position: relative;
    z-index: 1;
}

.btn_sb_view span:not(.sb_cart_count) {
    position: relative;
    z-index: 1;
}

.sb_cart_count {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ddd;
    color: #888;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
}

.sb_cart_count.has_items {
    background: var(--point-color);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(230, 59, 94, 0.6);
    animation: sb_live_pulse 1.8s ease-in-out infinite;
}

/* ============================
   Section: 같은 카테고리 다른 패키지 추천
   ============================ */
.section_related .sec_head {
    margin-bottom: 18px;
}

.section_related .sr_cat_name {
    font-weight: 800;
}

.sr_cat_name.cat-homepage { color: #2a3ab8; }
.sr_cat_name.cat-shopping { color: #0a8c5e; }
.sr_cat_name.cat-platform { color: #6a3acc; }
.sr_cat_name.cat-app      { color: #007a8c; }
.sr_cat_name.cat-landing  { color: #c23a5e; }
.sr_cat_name.cat-system   { color: #b07d00; }

.sr_more_btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: #fafbfc;
    border: 1px solid #ececec;
    border-radius: 100px;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sr_more_btn:hover {
    background: #fff;
    border-color: var(--main-color);
    color: var(--main-color);
}

.sr_more_btn i {
    font-size: 16px;
}

/* 단순 3×2 그리드 - 가로 스크롤 없음, 최대 6개 카드 */
.related_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 14px;
}

/* 태블릿 (481~1023): 2 columns × 3 rows */
@media (max-width: 1023px) and (min-width: 481px) {
    .related_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 모바일 (≤480): 1 column 세로 */
@media (max-width: 480px) {
    .related_grid {
        grid-template-columns: 1fr;
    }
}

/* 카드 */
.related_card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s;
    min-width: 0;
}

.related_card:hover {
    border-color: var(--main-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -10px rgba(12, 10, 83, 0.18);
}

.rc_thumb {
    position: relative;
    height: 110px;
    padding: 14px 16px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.rc_thumb_top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rc_thumb .ep_label {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.rc_meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

.rc_thumb .ep_mark {
    position: absolute;
    right: -12px;
    bottom: -36px;
    font-size: 140px;
    line-height: 0.85;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.08);
    letter-spacing: -0.04em;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}

.rc_body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.rc_title {
    font-size: 15px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.35;
    word-break: keep-all;
}

.rc_desc {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rc_bottom {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px dashed #f0f0f0;
}

.rc_price {
    font-size: 14px;
    font-weight: 800;
    color: var(--main-color);
}

.rc_arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #888;
    transition: all 0.2s;
}

.related_card:hover .rc_arrow {
    background: var(--main-color);
    color: #fff;
}

.related_empty {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: #aaa;
    font-size: 13px;
}

.related_empty i {
    font-size: 22px;
}

/* ============================
   Mobile Bottom Summary Bar (모바일 하단 고정)
   ============================ */
.mobile_bottom_summary {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
    border-top: 2px solid var(--main-color);
    box-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.8) inset,
        0 -8px 32px rgba(12, 10, 83, 0.18);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    flex-direction: column;
}

/* 상단 컬러 액센트 그라디언트 */
.mobile_bottom_summary::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--main-color), #4a5fd8, var(--point-color), #4a5fd8, var(--main-color));
    background-size: 200% 100%;
    animation: sb_accent_shift 6s ease-in-out infinite;
}

/* 디테일 모드 컨테이너 */
.mbs_normal {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 가격 요약 박스 (위쪽 풀너비) */
.mbs_summary {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 30px;
    background: linear-gradient(135deg, #f8f9ff, #eef1ff);
    border: 1px solid #d4daff;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    min-width: 0;
    box-shadow: 0 2px 10px -4px rgba(12, 10, 83, 0.15);
}

/* LIVE 점멸 인디케이터 */
.mbs_summary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e63b5e;
    box-shadow: 0 0 0 0 rgba(230, 59, 94, 0.6);
    animation: sb_live_pulse 1.8s ease-in-out infinite;
}

.mbs_left {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.mbs_label {
    font-size: 11px;
    color: #777;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.2px;
    flex: 1;
    min-width: 0;
}

.mbs_total {
    font-size: 17px;
    font-weight: 900;
    color: var(--main-color);
    letter-spacing: -0.02em;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.mbs_total.pulse {
    animation: sb_price_pulse 0.5s ease-out;
}

.mbs_right {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #d4daff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--main-color);
    box-shadow: 0 2px 6px rgba(12, 10, 83, 0.1);
}

/* 3개 버튼 나란히 (비교추가 / 비교함 / 신청) */
.mbs_actions {
    display: flex;
    gap: 6px;
    width: 100%;
}

.mbs_btn {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 11px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
}

.mbs_btn i {
    font-size: 16px;
    flex-shrink: 0;
}

.mbs_btn_add {
    background: #fafbfc;
    border: 1px solid #ececec;
    color: #555;
}

.mbs_btn_add:hover {
    background: #f0f0f0;
}

/* 비교함 보기 — LIVE 강조 (PC 사이드바와 통일) */
.mbs_btn_view {
    position: relative;
    background: linear-gradient(135deg, #fff5f7 0%, #fff 60%, #f8f9ff 100%);
    border: 1.5px solid #ffd6df;
    color: var(--main-color);
    box-shadow: 0 2px 10px -4px rgba(230, 59, 94, 0.3);
    overflow: hidden;
}

.mbs_btn_view::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    border: 1.5px solid #ff8aa3;
    opacity: 0;
    animation: btn_view_pulse 2s ease-in-out infinite;
    pointer-events: none;
}

.mbs_btn_view i,
.mbs_btn_view span {
    position: relative;
    z-index: 1;
}

.mbs_btn_apply {
    background: var(--main-color);
    color: #fff;
}

.mbs_btn_apply:hover {
    background: #1a1878;
}

.mbs_cnt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ddd;
    color: #888;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.mbs_cnt.has_items {
    background: var(--point-color);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(230, 59, 94, 0.5);
    animation: sb_live_pulse 1.8s ease-in-out infinite;
}

/* 비교 모드 컨테이너 — 디테일 모드에서는 숨김 */
.mbs_compare {
    display: none;
}

.mbs_back {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: var(--main-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 14px -4px rgba(12, 10, 83, 0.35);
}

.mbs_back:hover {
    background: #1a1878;
}

.mbs_back i {
    font-size: 20px;
}

/* 비교 모드 진입 시 — 디테일 모드 콘텐츠 숨기고 돌아가기 버튼만 표시 */
body.compare-mode .mobile_bottom_summary .mbs_normal {
    display: none;
}

body.compare-mode .mobile_bottom_summary .mbs_compare {
    display: block;
}

/* ============================
   Mobile Summary Sheet (펼침 시트)
   ============================ */
.mobile_summary_sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 110;
    /* 컨테이너는 pointer-events 통과 (자식 dim/panel만 받음) */
    pointer-events: none;
}

.mobile_summary_sheet.is_open {
    display: block;
    /* is_open이어도 pointer-events: none 유지
       → mbs_summary(하단바)가 시트 뒤에 있어도 클릭 가능 */
}

/* dim과 panel만 클릭을 받음 */
.mobile_summary_sheet .mss_dim,
.mobile_summary_sheet .mss_panel {
    pointer-events: auto;
}

.mss_dim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--mbs-h, 72px);
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile_summary_sheet.is_open .mss_dim {
    opacity: 1;
}

.mss_panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--mbs-h, 72px);
    background: #fff;
    border-radius: 20px 20px 0 0;
    max-height: calc(85vh - var(--mbs-h, 72px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0.32, 1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
}

.mobile_summary_sheet.is_open .mss_panel {
    transform: translateY(0);
}

/* 헤더 영역 (handle + title + close) - 고정 */
.mss_handle {
    flex-shrink: 0;
    width: 38px;
    height: 4px;
    background: #ddd;
    border-radius: 100px;
    margin: 12px auto 8px;
}

.mss_header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}

.mss_title {
    font-size: 16px;
    font-weight: 800;
    color: #1a1a1a;
}

.mss_close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mss_close:hover {
    background: #ececec;
}

/* 본문 - 스크롤 가능 */
.mss_body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mss_section {
    display: flex;
    flex-direction: column;
}

.mss_label {
    font-size: 12px;
    font-weight: 800;
    color: #555;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.mss_plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(135deg, #f8f9ff, #f3f5ff);
    border: 1px solid #e0e4ff;
    border-radius: 10px;
    gap: 10px;
}

.mss_plan strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--main-color);
}

.mss_plan span {
    font-size: 14px;
    font-weight: 800;
    color: #1a1a1a;
}

.mss_summary {
    margin-top: 8px;
    font-size: 12px;
    color: #777;
    line-height: 1.5;
}

.mss_empty {
    padding: 14px;
    background: #fafbfc;
    border: 1px dashed #ececec;
    border-radius: 10px;
    text-align: center;
    font-size: 12px;
    color: #aaa;
}

.mss_addons {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ececec;
    border-radius: 10px;
    overflow: hidden;
}

.mss_addons li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px dashed #f0f0f0;
}

.mss_addons li:last-child {
    border-bottom: none;
}

.mss_addons li span:first-child {
    font-size: 12px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mss_addons li span:last-child {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    flex-shrink: 0;
}

.mss_total {
    padding: 14px 16px;
    background: #fafbfc;
    border: 1px solid #ececec;
    border-radius: 12px;
}

.mss_total_row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #777;
    margin-bottom: 6px;
}

.mss_total_row span:last-child {
    font-weight: 700;
    color: #444;
}

.mss_total_grand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 6px;
    border-top: 1px dashed #e8e8e8;
}

.mss_total_grand span {
    font-size: 12px;
    font-weight: 700;
    color: #555;
}

.mss_total_grand strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--main-color);
    letter-spacing: -0.01em;
}

/* 시트가 열렸을 때 body 스크롤 방지 */
body.mss-open {
    overflow: hidden;
}

/* ============================
   Apply Modal (제작 신청 모달)
   ============================ */
.apply_modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
}

.apply_modal.is_open {
    display: block;
}

.am_dim {
    position: absolute;
    inset: 0;
    background: rgba(12, 10, 50, 0.55);
    backdrop-filter: blur(4px);
    animation: am_fade_in 0.25s ease-out;
}

@keyframes am_fade_in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.am_panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 64px -16px rgba(12, 10, 83, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: am_pop_in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes am_pop_in {
    from {
        transform: translate(-50%, -45%) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* 헤더 */
.am_header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 18px;
    background: linear-gradient(135deg, #f8f9ff, #fafbff);
    border-bottom: 1px solid #eef0f7;
}

.am_header_left {
    flex: 1;
    min-width: 0;
}

.am_title {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.am_sub {
    font-size: 13px;
    color: #888;
}

.am_close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ececec;
    color: #666;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.am_close:hover {
    background: #f0f0f0;
    color: #333;
}

/* 본문 (스크롤 영역) */
.am_body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 24px 24px;
}

/* 견적 요약 박스 */
.am_quote {
    background: linear-gradient(135deg, #f8f9ff 0%, #f3f5ff 100%);
    border: 1px solid #d4daff;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 22px;
}

.amq_header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--main-color);
    letter-spacing: 0.3px;
    margin-bottom: 12px;
}

.amq_header i {
    font-size: 16px;
}

.amq_product {
    margin-bottom: 14px;
}

.amq_label {
    display: inline-block;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #d4daff;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 6px;
}

.amq_title {
    font-size: 16px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.4;
    word-break: keep-all;
}

.amq_plan_box {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    margin-bottom: 14px;
}

.amq_plan_top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.amq_plan_name {
    font-size: 14px;
    font-weight: 800;
    color: var(--main-color);
}

.amq_plan_price {
    font-size: 14px;
    font-weight: 800;
    color: #1a1a1a;
}

.amq_plan_summary {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
}

.amq_addons {
    margin-bottom: 14px;
}

.amq_addons_label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
}

.amq_addons_label i {
    font-size: 16px;
    color: var(--main-color);
}

.amq_addons_label strong {
    color: var(--main-color);
}

.amq_addons_list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    overflow: hidden;
    max-height: 140px;
    overflow-y: auto;
}

.amq_addons_list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px dashed #f0f0f0;
    font-size: 12px;
}

.amq_addons_list li:last-child {
    border-bottom: none;
}

.amq_addons_list li span:first-child {
    color: #555;
}

.amq_addons_list li span:last-child {
    font-weight: 700;
    color: #333;
    flex-shrink: 0;
}

.amq_addons_empty {
    text-align: center;
    color: #aaa;
    font-size: 12px;
}

/* 합계 */
.amq_total {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
}

.amq_total_row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #777;
    margin-bottom: 6px;
}

.amq_total_row span:last-child {
    font-weight: 700;
    color: #444;
}

.amq_total_grand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px dashed #e8e8e8;
}

.amq_total_label {
    font-size: 12px;
    font-weight: 700;
    color: #555;
}

.amq_total_price {
    font-size: 22px;
    font-weight: 900;
    color: var(--main-color);
    letter-spacing: -0.02em;
}

/* 폼 */
.am_form_section {
    margin-bottom: 20px;
}

.amf_title {
    font-size: 14px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.amf_field {
    margin-bottom: 14px;
}

.amf_row {
    display: flex;
    gap: 12px;
}

.amf_row .amf_field {
    flex: 1;
    min-width: 0;
}

.amf_label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    margin-bottom: 6px;
}

.amf_label em {
    color: #e63b5e;
    font-style: normal;
    margin-left: 2px;
}

.amf_input {
    width: 100%;
    padding: 11px 14px;
    background: #fafbfc;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    font-size: 14px;
    color: #1a1a1a;
    transition: all 0.2s;
    font-family: inherit;
}

.amf_input:focus {
    outline: none;
    background: #fff;
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px rgba(12, 10, 83, 0.08);
}

.amf_input::placeholder {
    color: #bbb;
}

.amf_textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

select.amf_input {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.amf_agree {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #fafbfc;
    border: 1px solid #ececec;
    border-radius: 10px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
}

.amf_agree input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--main-color);
    cursor: pointer;
}

.amf_agree a {
    color: var(--main-color);
    text-decoration: underline;
}

/* 액션 버튼 */
.am_form_actions {
    display: flex;
    gap: 10px;
}

.amf_btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.amf_btn i {
    font-size: 18px;
}

.amf_btn_cancel {
    flex: 0 0 30%;
    background: #fafbfc;
    border: 1px solid #ececec;
    color: #555;
}

.amf_btn_cancel:hover {
    background: #f0f0f0;
}

.amf_btn_submit {
    background: var(--main-color);
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(12, 10, 83, 0.35);
}

.amf_btn_submit:hover:not(:disabled) {
    background: #1a1878;
}

.amf_btn_submit:disabled,
.amf_btn_submit.is_loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.amf_btn_submit.is_loading::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: amf_spin 0.7s linear infinite;
}

@keyframes amf_spin {
    to { transform: rotate(360deg); }
}

body.apply-modal-open {
    overflow: hidden;
}

/* 모달 모바일 반응형 */
@media screen and (max-width: 767px) {
    .am_panel {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 16px;
    }

    .am_header {
        padding: 18px 18px 14px;
    }

    .am_title {
        font-size: 17px;
    }

    .am_sub {
        font-size: 12px;
    }

    .am_body {
        padding: 18px 18px 20px;
    }

    .am_quote {
        padding: 16px 16px;
        margin-bottom: 18px;
    }

    .amq_total_price {
        font-size: 20px;
    }

    .amf_row {
        flex-direction: column;
        gap: 0;
    }

    .am_form_actions {
        flex-direction: column-reverse;
    }

    .amf_btn_cancel {
        flex: 1;
    }
}

/* ============================
   Responsive
   ============================ */
@media screen and (max-width: 1024px) {
    .detail_layout {
        flex-direction: column;
    }

    .detail_sidebar {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .sidebar_sticky {
        position: static;
        max-height: none;
    }
}

@media screen and (max-width: 767px) {
    .detail_page {
        padding-bottom: 96px;
    }

    /* 모바일: 페이지 inner 영역을 풀너비로 사용 (좌우 패딩 제거) */
    .detail_page > .inner,
    .detail_page .section_nav_wrap > .inner {
        padding-left: 0;
        padding-right: 0;
    }

    /* 콘텐츠는 풀너비, 카드 안쪽 패딩만 유지 */
    .detail_page .breadcrumb {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* 섹션 카드는 좌우 마진 없이 풀너비, radius/border 제거해서 더 넓게 */
    .detail_section {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* 모바일에서는 사이드바 숨기고 하단 고정 요약바로 대체 */
    .detail_sidebar {
        display: none;
    }

    .mobile_bottom_summary {
        display: flex;
    }

    /* 섹션 네비 (모바일) */
    .section_nav_wrap {
        margin-bottom: 16px;
    }

    .section_nav {
        padding: 4px 0;
    }

    .section_nav_item {
        padding: 12px 16px;
        font-size: 13px;
    }

    .section_nav_item::after {
        left: 16px;
        right: 16px;
    }

    .section_nav_item i {
        font-size: 14px;
    }

    /* 섹션 패딩 - 모바일에서 좁게 (콘텐츠 영역 확보) */
    .detail_section {
        padding: 22px 14px;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    /* section_info는 자체 패딩 0 유지 (위 .detail_section override 방지) */
    .section_info {
        padding: 0;
        overflow: hidden;
    }

    .sec_title {
        font-size: 17px;
        word-break: keep-all;
    }

    .sec_sub {
        word-break: keep-all;
    }

    /* 패키지 정보 - 헤더 (모바일 포스터) */
    .info_header {
        min-height: 200px;
        padding: 22px 16px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .info_header .ih_inner {
        min-height: 150px;
        gap: 14px;
        max-width: 100%;
    }

    /* ep_top 모바일: 라벨 + meta가 한 줄에 안 들어가면 자연스럽게 wrap */
    .info_header .ep_top {
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .info_header .ep_label {
        font-size: 10px;
        padding: 4px 12px;
    }

    .info_header .ep_meta {
        font-size: 11px;
        flex: 1 1 auto;
        text-align: right;
    }

    .edk_poster .ep_mark {
        font-size: 180px;
        bottom: -28px;
        right: -14px;
    }

    .ih_title {
        font-size: 20px;
        word-break: keep-all;
        overflow-wrap: anywhere;
        line-height: 1.3;
        max-width: 100%;
    }

    .ih_desc {
        font-size: 12px;
        max-width: 100%;
        word-break: keep-all;
        overflow-wrap: anywhere;
        line-height: 1.5;
    }

    /* 패키지 정보 - 바디 */
    .info_body {
        padding: 22px 16px 26px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* long_content 안의 미디어 overflow 방지 */
    .long_content {
        word-break: keep-all;
    }

    .long_content img,
    .long_content .edt_img_wrap,
    .long_content .edt_img_placeholder {
        max-width: 100%;
        height: auto;
    }

    .info_body_label {
        font-size: 11px;
        padding: 7px 12px;
    }

    /* Long content (mobile) */
    .long_content_wrap {
        max-height: 480px;
    }

    .long_content .edt_h2 {
        font-size: 18px;
    }

    .long_content .edt_h3 {
        font-size: 16px;
    }

    .long_content .edt_p {
        font-size: 14px;
    }

    .long_content .edt_img_placeholder {
        min-height: 160px;
    }

    .btn_more {
        padding: 12px 28px;
        font-size: 13px;
    }

    .section_related .sec_head {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }

    .sr_more_btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    .rc_thumb {
        height: 96px;
        padding: 12px 14px;
    }

    .rc_thumb .ep_mark {
        font-size: 110px;
    }

    .rc_body {
        padding: 12px 14px 14px;
    }

    .rc_title {
        font-size: 14px;
    }

    .rc_desc {
        font-size: 11px;
    }

    /* 플랜 탭 - 옵션 4개 이상이어도 가로 스크롤로 안전하게 */
    .plan_tabs {
        min-width: 0;
        max-width: 100%;
        padding: 14px 0 4px;
        margin-left: 0;
        margin-right: 0;
        gap: 8px;
    }

    .plan_tab {
        flex: 0 0 auto;
        min-width: 0;
        width: 130px;
        padding: 12px 10px;
    }

    .pt_name {
        font-size: 13px;
    }

    .pt_price {
        font-size: 12px;
    }

    /* 플랜 패널 */
    .pp_header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .pp_right {
        text-align: left;
    }

    .pp_name {
        font-size: 18px;
    }

    .pp_price {
        font-size: 22px;
    }

    .pp_features {
        padding: 4px 20px;
    }

    .pp_feature_row {
        flex-direction: column;
        gap: 8px;
    }

    .pf_label {
        flex: none;
    }

    .pp_actions {
        flex-direction: column;
        padding: 16px 20px 20px;
    }

    .btn_pp_cart,
    .btn_pp_inquiry {
        width: 100%;
        padding: 14px;
    }

    /* sec_head 단일 컬럼 (모바일) */
    .sec_head {
        flex-direction: column;
        gap: 12px;
    }

    /* Addons (mobile) */
    .addon_total_chip {
        align-self: stretch;
        justify-content: center;
        padding: 10px 14px;
    }

    .ag_head {
        padding: 14px 16px;
        gap: 10px;
    }

    .ag_icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .ag_name {
        font-size: 14px;
    }

    .ag_desc {
        font-size: 11px;
    }

    .ag_items {
        padding: 12px;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .addon_item {
        padding: 12px;
    }

    .addon_request_notice {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 20px 18px;
    }

    .arn_btn {
        width: 100%;
        justify-content: center;
    }

    .addon_summary {
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
    }

    /* 모바일은 column flex라 max-height 200px이 부족 → 충분히 늘림 */
    .addon_summary.is_visible {
        max-height: 400px;
        padding: 18px 18px;
        gap: 14px;
    }

    .addon_summary .as_left {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .addon_summary .as_label {
        font-size: 13px;
    }

    .addon_summary .as_total {
        font-size: 20px;
    }

    .addon_summary .as_right {
        flex-direction: row;
        gap: 8px;
    }

    .btn_addon_clear,
    .btn_addon_apply {
        flex: 1;
        justify-content: center;
        padding: 12px;
        font-size: 13px;
    }

    /* Process */
    .process_item {
        padding: 16px 18px;
        gap: 14px;
    }

    .ps_num {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        font-size: 14px;
    }

    /* FAQ */
    .faq_q {
        padding: 16px 18px;
        font-size: 14px;
    }

    .faq_a p {
        padding: 0 18px 16px;
        font-size: 13px;
    }

}

/* SE 등 매우 좁은 화면 (≤375px): 버튼 폰트/패딩 더 줄임 */
@media screen and (max-width: 380px) {
    .mobile_bottom_summary {
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    }

    .mbs_normal {
        gap: 6px;
    }

    .mbs_summary {
        padding: 8px 12px 8px 28px;
    }

    .mbs_summary::before {
        left: 10px;
        width: 7px;
        height: 7px;
    }

    .mbs_label {
        font-size: 10px;
    }

    .mbs_total {
        font-size: 16px;
    }

    .mbs_actions {
        gap: 5px;
    }

    .mbs_btn {
        padding: 10px 4px;
        font-size: 11px;
        gap: 3px;
    }

    .mbs_btn i {
        font-size: 15px;
    }

    .mbs_cnt {
        min-width: 16px;
        height: 16px;
        font-size: 9px;
        padding: 0 4px;
    }
}

/* ============================================
   Slide Panels (Detail ↔ Compare)
   ============================================ */
.panels_viewport {
    position: relative;
    /* overflow-x: clip은 가로 클립만 하고 scroll container를 만들지 않음
       → 자손 sticky가 window 스크롤을 정상 추적함 */
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
    min-width: 0;
}

.panels_track {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

/* 한 슬라이드의 너비: 풀너비 (우측 미리보기 제거) */
.panels_track > .panel {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
}

.panel_compare {
    pointer-events: none;
}

/* 비교 패널 활성화 시 */
.panels_track.is_compare {
    transform: translateX(-100%);
}

.panels_viewport.is_compare .panel_compare {
    pointer-events: auto;
}

.panels_viewport.is_compare .panel_main {
    pointer-events: none;
}

.detail_content {
    position: relative;
}

/* ============================================
   Compare Panel Inner
   ============================================ */
.cmp_panel_inner {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    /* overflow: hidden 제거 - 자손 sticky 안전화
       자식 cmp_panel_body가 overflow-x: auto로 자체 클립함 */
    overflow: visible;
    /* position: relative는 자손 .cmp_label_cell sticky의 containing block을
       여기에 묶어둠 → 부모 .panels_track에 transform이 적용돼도
       sticky 위치가 transform된 좌표로 잘못 계산되지 않음
       (transform된 ancestor가 자동으로 containing block이 되는 것을 차단) */
    position: relative;
}

/* cmp_panel_body도 position: relative로 보강 (이중 안전망) */
.cmp_panel_body {
    position: relative;
}

/* 헤더 */
.cmp_panel_header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    background: linear-gradient(135deg, #f8f9ff, #fafbff);
    border-bottom: 1px solid #eef0f7;
}

.cmp_back_btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}

.cmp_back_btn:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}

.cmp_back_btn i {
    font-size: 18px;
}

.cmp_panel_title_wrap {
    flex: 1;
    min-width: 0;
}

.cmp_panel_title {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 2px;
    line-height: 1.3;
}

.cmp_panel_sub {
    font-size: 13px;
    color: #888;
}

.cmp_panel_sub span {
    color: var(--main-color);
    font-weight: 800;
}

/* 비교 본문 */
.cmp_panel_body {
    padding: 24px;
    overflow-x: auto;
    /* -webkit-overflow-scrolling: touch는 iOS에서 자손 position:sticky를 깨뜨림 → 사용 안 함 */
}

.cmp_panel_body::-webkit-scrollbar { height: 8px; }
.cmp_panel_body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 100px; }
.cmp_panel_body::-webkit-scrollbar-track { background: #fafafa; }

/* ============================================
   Compare Table (좌측 라벨 + 우측 카드 컬럼들)
   ============================================ */
.cmp_table {
    display: flex;
    flex-direction: column;
    min-width: 720px;
    background-color: #fff;
}

.cmp_row {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
}

.cmp_row.is_alt {
    background: #fafbfc;
}

.cmp_row_head {
    border-bottom: 2px solid #eef0f7;
    background: transparent !important;
}

.cmp_row_addons_head {
    border-top: 2px solid #eef0f7;
    border-bottom: 1px solid #eef0f7;
    background: #fafbff !important;
}

.cmp_row_total {
    border-top: 2px solid #eef0f7;
    border-bottom: none;
    background: linear-gradient(135deg, #f8f9ff, #f3f5ff) !important;
}

/* 좌측 라벨 cell - 가로 스크롤 시 좌측 고정 */
.cmp_label_cell {
    flex: 0 0 140px;
    min-width: 140px;
    max-width: 140px;
    width: 140px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    background-color: #fff;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 20;
    /* 우측에 그림자로 sticky 경계 표시 */
    box-shadow: 6px 0 12px -8px rgba(0, 0, 0, 0.15);
}

/* 각 row 별 라벨 cell 배경 — 명시적 background-color로 row와 동일하게 (transparent 방지) */
.cmp_row.is_alt .cmp_label_cell { background-color: #fafbfc; }
.cmp_row_head .cmp_label_cell { background-color: #fff; }
.cmp_row_addons_head .cmp_label_cell { background-color: #fafbff; color: var(--main-color); }
.cmp_row_addons .cmp_label_cell { background-color: #fff; }
.cmp_row_total .cmp_label_cell { background-color: #f3f5ff; color: var(--main-color); font-weight: 800; }

.cmp_label_cell i {
    font-size: 16px;
    color: var(--main-color);
}

.cmp_label_sub {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #aaa !important;
    align-items: flex-start !important;
    padding-top: 18px !important;
}

/* 우측 value cell */
.cmp_value_cell {
    flex: 1 1 0;
    min-width: 220px;
    padding: 16px 18px;
    border-left: 1px solid #f0f0f0;
    position: relative;
    z-index: 1;
}

/* ============================================
   Card Head (상단 포스터 row)
   ============================================ */
.cmp_card_head {
    position: relative;
    padding: 18px 18px 20px;
    border-radius: 14px;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cch_remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e63b5e;
    border: 2px solid #fff;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 5;
    transition: all 0.2s;
    box-shadow: 0 4px 14px -2px rgba(230, 59, 94, 0.5),
                0 0 0 0 rgba(230, 59, 94, 0.5);
    animation: cch_remove_pulse 2s ease-in-out infinite;
}

@keyframes cch_remove_pulse {
    0%, 100% {
        box-shadow: 0 4px 14px -2px rgba(230, 59, 94, 0.5),
                    0 0 0 0 rgba(230, 59, 94, 0.45);
    }
    50% {
        box-shadow: 0 4px 14px -2px rgba(230, 59, 94, 0.6),
                    0 0 0 6px rgba(230, 59, 94, 0);
    }
}

.cch_remove:hover {
    background: #d0204a;
    transform: scale(1.08);
}

.cch_body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.cch_title {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    margin-top: 6px;
}

.cch_plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(4px);
    margin-top: auto;
}

.cch_plan_name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.cch_plan_price {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

/* ============================================
   Cell content (chip / dash / addons)
   ============================================ */
.cv_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cv_chip {
    display: inline-block;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    font-size: 12px;
    color: #555;
    line-height: 1.5;
}

.cmp_row.is_alt .cv_chip {
    background: #fff;
}

.cv_dash {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: #ddd;
    line-height: 1;
}

.cv_meta {
    font-size: 12px;
    font-weight: 700;
    color: var(--main-color);
}

/* Addons grouped */
.cv_addon_groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cv_addon_group {
    background: #fafbfc;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 10px 12px;
}

.cag_label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #ececec;
}

.cag_label i {
    font-size: 14px;
    color: var(--main-color);
}

.cag_items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cag_items li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.cag_items .ai_name {
    font-size: 12px;
    color: #555;
}

.cag_items .ai_price {
    font-size: 12px;
    font-weight: 700;
    color: var(--main-color);
    flex-shrink: 0;
}

/* Total row */
.cv_total_box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e0e4ff;
    border-radius: 12px;
}

.cv_total_breakdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e8e8e8;
}

.cv_total_breakdown > div {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #777;
}

.cv_total_breakdown > div span:last-child {
    font-weight: 700;
    color: #444;
}

.cv_total_grand {
    font-size: 20px;
    font-weight: 800;
    color: var(--main-color);
    text-align: center;
    letter-spacing: -0.01em;
}

.cv_cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 11px 14px;
    background: var(--main-color);
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s;
}

.cv_cta:hover {
    background: #1a1878;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(12, 10, 83, 0.3);
}

.cv_cta i {
    font-size: 16px;
}

/* ============================================
   Empty State
   ============================================ */
.cmp_panel_empty {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 24px;
}

.cpe_icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fafbfc;
    border: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.cpe_icon i {
    font-size: 36px;
    color: #ccc;
}

.cpe_title {
    font-size: 18px;
    font-weight: 800;
    color: #333;
    margin-bottom: 8px;
}

.cpe_desc {
    font-size: 13px;
    color: #888;
    line-height: 1.7;
    margin-bottom: 24px;
}

.cpe_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    background: var(--main-color);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.cpe_btn:hover {
    background: #1a1878;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(12, 10, 83, 0.3);
}

.cpe_btn i {
    font-size: 16px;
}

/* ============================================
   Responsive (Compare Panel)
   ============================================ */
@media screen and (max-width: 767px) {
    /* 모바일 비교 패널 - 풀너비 사용 (radius/border 제거) */
    .cmp_panel_inner {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .cmp_panel_header {
        padding: 16px 14px;
        gap: 10px;
    }

    .cmp_panel_title {
        font-size: 18px;
    }

    .cmp_panel_sub {
        font-size: 12px;
    }

    .cmp_back_btn {
        padding: 8px 14px;
        font-size: 12px;
    }

    .cmp_panel_body {
        padding: 0;
    }

    .cmp_table {
        min-width: 100%;
    }

    .cmp_label_cell {
        flex: 0 0 100px;
        min-width: 100px;
        padding: 14px 12px;
        font-size: 12px;
    }

    .cmp_value_cell {
        min-width: 220px;
        padding: 14px;
    }

    /* 카드 헤더 (포스터) 모바일 컴팩트 */
    .cmp_card_head {
        min-height: auto;
        padding: 14px 14px 16px;
        gap: 8px;
    }

    /* 워터마크 모노그램 축소 */
    .cmp_card_head .ep_mark {
        font-size: 140px;
        bottom: -32px;
        right: -14px;
    }

    /* 광원 효과 축소 */
    .cmp_card_head::before {
        width: 280px;
        height: 280px;
    }

    .cch_remove {
        top: 8px;
        right: 8px;
        width: 26px;
        height: 26px;
        font-size: 14px;
    }

    .cch_body {
        gap: 8px;
    }

    .cmp_card_head .ep_label {
        font-size: 10px;
        padding: 3px 10px;
    }

    .cch_title {
        font-size: 14px;
        line-height: 1.3;
        margin-top: 4px;
        /* 2줄까지만 노출하고 잘림 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: keep-all;
    }

    .cch_plan {
        padding: 8px 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-top: 8px;
    }

    .cch_plan_name {
        font-size: 11px;
    }

    .cch_plan_price {
        font-size: 13px;
    }

    .cv_total_grand {
        font-size: 17px;
    }

    .cv_cta {
        padding: 10px;
        font-size: 12px;
    }
}