/* ============================================================================
 * sky-luxury-patch.css  (v32)
 * SKY HIGH-END SHOP — 모든 이슈 일괄 패치
 * ----------------------------------------------------------------------------
 * 적용 위치: /theme/sample103/css/sky-luxury-patch.css
 * 로딩 순서: sky-luxury-final.css 다음(가장 마지막)
 *
 * v32 변경:
 *   - 사이드바 흰 배경 더 강력히 (data-* 속성 + 모든 자식 강제)
 *   - 사이드바 overscroll-behavior: contain (스크롤 격리)
 *   - 옵션창 핸들 위치/스타일 더 안전한 transform 기반으로
 *   - PC 헤더 좌측 메뉴의 세로 흰줄 ::before 완전 제거 (고급스럽게 padding으로만)
 *
 * v31 유지:
 *   - 백드롭 클릭으로 닫기 (pointer-events: auto)
 *   - 닫기 버튼(X) 항상 클릭 가능
 *   - 이전상품 placeholder, 에디터 픽 더보기 링크 등
 * ========================================================================= */


/* ─────────────────────────────────────────────────────────────────────────
 * 모바일 상품 상세 — 이전/다음 상품 영역
 * ───────────────────────────────────────────────────────────────────────── */
#sit_siblings {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

#sit_siblings #siblings_prev,
#sit_siblings #siblings_next {
    flex: 0 0 auto;
    padding: 0;
    line-height: 45px;
    font-size: 0.92em;
    color: #777;
    text-decoration: none;
    white-space: nowrap;
}

#sit_siblings a#siblings_prev:hover,
#sit_siblings a#siblings_next:hover {
    color: #222;
}

#sit_siblings .is-disabled {
    color: #c8c8c8;
    cursor: default;
    pointer-events: none;
}

#sit_siblings #siblings_prev span {
    position: absolute;
    font-size: 0;
    text-indent: -9999em;
    line-height: 0;
    overflow: hidden;
}


/* ─────────────────────────────────────────────────────────────────────────
 * 메인 페이지 — 에디터의 픽 섹션 헤드 더보기 링크
 * ───────────────────────────────────────────────────────────────────────── */
.sky-section__head {
    position: relative;
}

.sky-section__head-link {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: #888;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.sky-section__head-link:hover {
    color: #222;
}

.sky-section__head-link i {
    font-size: 0.75em;
    transition: transform 0.2s;
}

.sky-section__head-link:hover i {
    transform: translateX(3px);
}

@media (max-width: 639px) {
    .sky-section__head-link {
        font-size: 0.78rem;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
 * (v32) 모바일 사이드바 — 스크롤 시에도 투명해지지 않도록 강력 보강
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* 사이드바 본체 — 흰 배경 강제 (이중 보강) */
    html body #category.menu,
    html body #hd_wr #category.menu {
        background: #ffffff !important;
        background-color: #ffffff !important;
        opacity: 1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* v32: 사이드바 안 스크롤이 본문으로 전파되지 않도록 격리 */
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        /* 모바일 Safari에서 momentum 스크롤 시 투명해지는 현상 방지 */
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        will-change: auto !important;
    }

    /* 사이드바 안 자식 요소들은 명시적으로 투명 (이중 흰배경 방지) */
    /* 단, 카테고리 항목 자체는 hover 등 자체 배경이 있을 수 있어 너무 강하면 X */
    html body #category.menu > .menu_wr {
        background: transparent !important;
    }

    /* 사이드바가 표시될 때(인라인 style="display: block"), 흰 배경 한 번 더 강제 */
    html body #category.menu[style*="block"],
    html body #category.menu[style*="display: block"] {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    /* 백드롭 — 클릭으로 사이드바 닫히게 (sky-luxury-final.css 4142줄, 3162줄 무력화) */
    body.is-menu-open::after,
    body:has(#category.menu[style*="block"])::after {
        pointer-events: auto !important;
    }

    /* 닫기 버튼(X) — 항상 클릭 가능 */
    html body #category.menu .menu_close {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        border: 0 !important;
        background: transparent !important;
        font-size: 22px !important;
        color: #333 !important;
        z-index: 10 !important;
        cursor: pointer !important;
        display: block !important;
    }
    html body #category.menu .menu_close i {
        pointer-events: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
 * (v31~v32) 모바일 옵션창 드래그 핸들 — 이미 검증된 스타일
 *
 * ⚠️ 적용 안 보일 경우 원인: item.form.skin.php 가 서버에 업로드 안 됨
 *    HTML에 .sit_buy_drag 요소 자체가 없으면 이 CSS는 아무 역할 못함
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {

    #sit_buy .sit_buy_drag {
        display: block !important;
        width: 100% !important;
        height: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        border-radius: 14px 14px 0 0 !important;
        border-top: 1px solid #e5e5e5 !important;
        border-left: 1px solid #e5e5e5 !important;
        border-right: 1px solid #e5e5e5 !important;
        border-bottom: 0 !important;
        position: relative !important;
        cursor: grab !important;
        z-index: 2 !important;
        touch-action: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    #sit_buy .sit_buy_drag:active {
        cursor: grabbing !important;
    }

    #sit_buy .sit_buy_drag__bar {
        display: block !important;
        width: 36px !important;
        height: 4px !important;
        border-radius: 2px !important;
        background: #c0c0c0 !important;
        margin: 10px auto 0 !important;
    }

    #sit_buy .btn_close {
        display: none !important;
    }

    #sit_buy.is-collapsed .buy_wr {
        max-height: 0 !important;
        overflow: hidden !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-top-width: 0 !important;
        transition: max-height 0.25s, padding 0.25s, border-width 0.25s;
    }
    #sit_buy:not(.is-collapsed) .buy_wr {
        max-height: 600px;
        transition: max-height 0.25s, padding 0.25s, border-width 0.25s;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
 * (v32) PC 헤더 좌측 메뉴 — 세로 흰줄 완전 제거 (고급스럽게 간격으로만)
 *
 * 사용자 피드백:
 *   "세로 줄을 제어 할 수 없다면 없애거나 고급스럽게 바꿔줘"
 *
 * 처방: 모든 a의 ::before / ::after (세로줄)를 완전 제거하고
 *        간격은 padding 으로만 표현 — 럭셔리 워치 매장 헤더 스타일
 * ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {

    /* a 항목 사이 세로 흰줄 완전 제거 (영카트 기본 mobile_shop.css 무력화) */
    html body #cate_head .btn_login .btn_left a::before,
    html body #cate_head .btn_login .btn_left a::after {
        content: none !important;
        display: none !important;
        background: none !important;
        border: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* a 항목 padding — 세로줄 없으니 간격만 (대신 좀 더 넉넉하게) */
    html body #cate_head .btn_login .btn_left a {
        padding: 0 22px !important;
        gap: 8px !important;
        position: relative !important;
        font-size: 12px !important;
        letter-spacing: 0.04em !important;     /* 럭셔리 톤: 자간 약간 */
    }

    /* 첫 항목(마이페이지)은 좌측 padding 0 */
    html body #cate_head .btn_login .btn_left a:first-child {
        padding-left: 0 !important;
        padding-right: 22px !important;
    }

    /* 마지막 항목(쿠폰존)은 우측 padding 0 */
    html body #cate_head .btn_login .btn_left a:last-child {
        padding-right: 0 !important;
    }

    /* 아이콘 톤 통일 */
    html body #cate_head .btn_login .btn_left a .fa {
        font-size: 13px !important;
        margin-right: 0 !important;
        opacity: 0.7;
        transition: opacity 0.2s;
    }
    html body #cate_head .btn_login .btn_left a:hover .fa {
        opacity: 1;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
 * PC 메인 상품 카드 — btn_wish 위치 보정
 * ───────────────────────────────────────────────────────────────────────── */
.sct_10 .sct_img,
.sct_20 .sct_img,
.smt_20 .sct_img,
.smt_30 .sct_img {
    position: relative;
}

.sct_10 .btn_wish,
.sct_20 .btn_wish,
.smt_20 .btn_wish,
.smt_30 .btn_wish {
    z-index: 5;
    cursor: pointer;
}

.btn_wish.is-active i.fa-heart,
.btn_wish i.fa-heart {
    color: #e0245e;
}


/* ─────────────────────────────────────────────────────────────────────────
 * 토스트 (sky-luxury.js의 showToast)
 * ───────────────────────────────────────────────────────────────────────── */
.sky-toast {
    position: fixed;
    left: 50%;
    bottom: 80px;
    transform: translate(-50%, 20px);
    padding: 12px 20px;
    background: rgba(34,34,34,0.92);
    color: #fff;
    font-size: 14px;
    border-radius: 24px;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
    white-space: nowrap;
}
.sky-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}