@charset "utf-8";

/* ==========================================================================
   상품 상세 페이지(content.jsp) 전용 스타일시트
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 레이아웃 & 네비게이션
   -------------------------------------------------------------------------- */
/* [추가] 모바일 우측 여백(가로 스크롤) 원천 차단 */
body {
    max-width: 100vw;
    overflow-x: hidden;
}
.container-fluid {
    overflow-x: hidden;
}
/* 모바일/태블릿 해상도(991.98px 이하)에서만 상단 헤더를 화면 상단에 고정 */
@media (max-width: 991.98px) {
    #sticky-header {
        position: sticky;
        top: 0;
        z-index: 1030; /* Bootstrap 헤더 기본 z-index 기준 */
        background-color: white;
    }
}

/* 가격 영역(판매가/기준가/회원가) 행간 */
.content-price-compact {
    --bs-gutter-y: 0.2rem;
}
.content-price-compact > .w-100 > .row,
.content-price-compact > .row {
    margin-bottom: 0 !important;
}
.content-price-compact .row > [class*="col-"] {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   2. Bootstrap Offcanvas (모바일 사이드 메뉴) 오버라이드
   -------------------------------------------------------------------------- */
/* 배경 클릭 차단 및 잔상 방지를 위해 백드롭(어두운 배경)을 최상단으로 강제 띄움 */
.offcanvas-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #000 !important;
    z-index: 10400 !important; 
}
/* 백드롭 투명도 조절 (기본 0.5 -> 0.7로 어둡게) */
.offcanvas-backdrop.show {
    opacity: 0.7 !important; 
}
/* 오프캔버스 메뉴 자체는 백드롭(10400)보다 더 위에 위치하도록 설정 */
.offcanvas.offcanvas-start {
    z-index: 10405 !important; 
}

/* --------------------------------------------------------------------------
   3. Iframe & 콘텐츠 컨테이너
   -------------------------------------------------------------------------- */
/* 좌측 사이드 메뉴 iframe 기본 스타일 */
#sidemenu-iframe {
    width: 100%;
    border: none;
    min-height: 480px;
    opacity: 0;
    transition: opacity 0.12s ease;
}
#sidemenu-iframe.sidemenu-ready {
    opacity: 1;
}

/* PC 환경(992px 이상)에서 특정 상품 이미지의 최대 너비 제한 */
@media (min-width: 992px) { 
    .pc-img-90 { 
        max-width: 800px !important; 
        width: 100% !important; 
    } 
}

/* --------------------------------------------------------------------------
   4. 타이포그래피 (상세정보 텍스트)
   -------------------------------------------------------------------------- */
/* DB에서 불러온 상세정보 텍스트(엔터키 포함)를 화면에 올바르게 렌더링하기 위한 <pre> 태그 초기화 */
#p_use_container {
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}
/* CKEditor·레거시 <p>/<div> 줄 단위 제원 — Bootstrap 단락 margin 제거 */
#p_use_container p,
#p_use_container div {
    margin: 0;
    padding: 0;
    line-height: inherit;
}
#p_use_container p:empty {
    display: none;
}
#p_use_container pre {
    font-family: inherit;     /* 부모의 폰트 종류 상속 */
    white-space: pre-wrap;    /* 연속된 공백(들여쓰기) 보존, 엔터키(개행) 유지, 자동 줄바꿈 허용 */
    word-break: break-word;   /* 긴 단어나 URL이 컨테이너를 뚫고 나가는 현상 방지 */
    max-width: 100%;          
    font-size: inherit;
    line-height: inherit;
    margin: 0;                /* pre 태그 고유의 불필요한 상하 여백 제거 */
}
/* 모바일 환경 텍스트 최적화 */
@media (max-width: 767.98px) {
    #p_use_container {
        font-size: 13px !important;
        line-height: 1.5 !important;
        overflow-wrap: break-word !important;
        letter-spacing: -0.2px;
    }
    #p_use_container pre {
        white-space: pre-wrap !important;
        overflow-wrap: break-word !important;
    }
}

/* --------------------------------------------------------------------------
   5. UI 컴포넌트 (다운로드 버튼 등)
   -------------------------------------------------------------------------- */
.button-container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 8px; 
    margin: 10px 0; 
}

.button { 
    flex: 1 1 auto; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 10px 14px; 
    font-size: 13px; 
    cursor: pointer; 
    color: #495057; 
    background-color: #fff; 
    border: 1px solid #ced4da; 
    border-radius: 5px; 
    text-decoration: none; 
    transition: all 0.2s; 
    word-break: break-all; 
}
.button:hover { background-color: #f8f9fa; border-color: #adb5bd; color: #212529; } /* 기존 호버 스타일 유지 */
.button.clicked { 
    color: #495057; /* 클릭 시 글자색을 어둡게 유지하여 가독성 확보 */
    pointer-events: none; 
    background-color: #e9ecef; /* 클릭 시 배경색을 약간 더 어둡게 변경 */
}

/* 상세페이지 일괄 다운로드 전용 버튼 강조 스타일 */
.btn-download-all { 
    width: 100%; 
    flex: 1 1 100%; 
    padding: 12px; 
    background-color: #f1f3f5 !important; 
    color: #333333 !important; 
    border-color: #8a8a8a !important; 
    margin-bottom: 10px; 
}
.btn-download-all:hover { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; } /* 호버 시 검정색 배경에 흰색 글씨 */
.btn-download-all.clicked {
    color: #888888 !important; /* 클릭 시 글자 연하게 */
    background-color: #dee2e6 !important; /* 클릭 시 배경색 피드백 */
}

/* 모바일 환경 버튼 크기 조정 */
@media (max-width: 767.98px) { 
    .button { 
        width: calc(50% - 8px); 
        flex: 1 1 calc(50% - 8px); 
        padding: 8px 10px; 
        font-size: 12px; 
    } 
    .btn-download-all { width: 100%; flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   6. 반응형 예외 처리 (Workarounds)
   -------------------------------------------------------------------------- */

/* 상세 본문 — 이미지 가운데 정렬, 작성자 width/height 지정 시 그대로, 컨테이너 넘침만 방지 */
#p_contentDiv1 img {
    display: block !important;
    max-width: 100%;
    height: auto;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}
#p_contentDiv1 iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    border: 0;
}
/* iframe width·height 속성 — px 지정만 비율 축소 (applyDetailMediaSizing) */
#p_contentDiv1 iframe[width]:not(.detail-embed-fluid) {
    max-width: 100%;
    height: auto;
}
/* Sketchfab·width 100% embed */
#p_contentDiv1 .sketchfab-embed-wrapper,
#p_contentDiv1 .video_size {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#p_contentDiv1 .sketchfab-embed-wrapper iframe,
#p_contentDiv1 .video_size > iframe,
#p_contentDiv1 iframe.detail-embed-fluid {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    aspect-ratio: unset;
}
/* div 래퍼로 크기 지정한 embed — 래퍼 크기·가운데 정렬, iframe은 래퍼 100% 채움 */
#p_contentDiv1 .detail-embed-wrap,
#p_contentDiv1 div.text-center[style*="width"],
#p_contentDiv1 div[style*="width"][style*="height"]:has(iframe) {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#p_contentDiv1 .detail-embed-wrap > iframe,
#p_contentDiv1 div[style*="width"][style*="height"]:has(iframe) > iframe,
#p_contentDiv1 div[style*="width"][style*="height"]:has(iframe) .detail-video-wrap iframe,
#p_contentDiv1 div[style*="width"][style*="height"]:has(iframe) .ratio.ratio-16x9 iframe {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: unset;
    border: 0;
}
/* content.js가 넣은 ratio/detail-video-wrap — 고정 크기 부모 안에서는 padding-trick 비활성 */
#p_contentDiv1 div[style*="width"][style*="height"] .detail-video-wrap,
#p_contentDiv1 div[style*="width"][style*="height"] .ratio.ratio-16x9 {
    position: static;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    --bs-aspect-ratio: auto;
}
#p_contentDiv1 div[style*="width"][style*="height"] .detail-video-wrap::before,
#p_contentDiv1 div[style*="width"][style*="height"] .ratio.ratio-16x9::before {
    display: none !important;
    padding: 0 !important;
    content: none !important;
}
#p_contentDiv1 div[style*="width"][style*="height"] .detail-video-wrap iframe,
#p_contentDiv1 div[style*="width"][style*="height"] .ratio.ratio-16x9 iframe {
    position: static;
}
#p_contentDiv1 .detail-embed-wrap > iframe,
#p_contentDiv1 .detail-embed-wrap iframe:not([width]) {
    aspect-ratio: unset;
    height: 100%;
}
#p_contentDiv1 iframe.detail-embed-sized,
#p_contentDiv1 iframe[data-embed-width] {
    height: auto;
    aspect-ratio: var(--embed-aspect-ratio, auto);
}
#p_contentDiv1 iframe:not([width]):not(.detail-embed-sized):not([data-embed-width]) {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
#p_contentDiv1 table,
#p_contentDiv2 table {
    max-width: 100% !important;
    word-break: break-all;
}

/* 지연 로딩 플레이스홀더 — src 없이 min-height·margin으로 여백 확보 (blank_bg.gif 미사용) */
.lazy-editor-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 80px;
    margin: 0 auto 16px;
    object-fit: contain;
    background: transparent;
}

/* 상세 본문·제원보기 모달 — width 미지정 embed만 16:9 래퍼용 absolute 채움 */
#p_contentDiv1 .ratio.ratio-16x9 iframe:not([width]):not(.detail-embed-sized):not([data-embed-width]),
#specModalBody .ratio.ratio-16x9 iframe:not([width]):not(.detail-embed-sized):not([data-embed-width]),
.detail-video-wrap iframe:not([width]):not(.detail-embed-sized):not([data-embed-width]) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    border: 0;
}
/* width 지정 embed — ratio/detail-video-wrap 안에서도 HTML width·비율 유지 */
#p_contentDiv1 .ratio.ratio-16x9 iframe[width],
#specModalBody .ratio.ratio-16x9 iframe[width],
.detail-video-wrap iframe[width] {
    position: static;
    max-width: 100%;
    height: auto;
    border: 0;
}

#specModalBody .spec-content {
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
    overflow-x: hidden;
}
#specModalBody .spec-content img,
#specModalBody .spec-content .lazy-editor-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
#specModalBody .spec-content iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    border: 0;
}
#specModalBody .spec-content .detail-embed-wrap,
#specModalBody .spec-content div.text-center[style*="width"],
#specModalBody .spec-content div[style*="width"][style*="height"]:has(iframe) {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#specModalBody .spec-content .detail-embed-wrap > iframe,
#specModalBody .spec-content div[style*="width"][style*="height"]:has(iframe) > iframe,
#specModalBody .spec-content div[style*="width"][style*="height"]:has(iframe) .detail-video-wrap iframe,
#specModalBody .spec-content div[style*="width"][style*="height"]:has(iframe) .ratio.ratio-16x9 iframe {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: unset;
    border: 0;
}
#specModalBody .spec-content div[style*="width"][style*="height"] .detail-video-wrap,
#specModalBody .spec-content div[style*="width"][style*="height"] .ratio.ratio-16x9 {
    position: static;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    --bs-aspect-ratio: auto;
}
#specModalBody .spec-content div[style*="width"][style*="height"] .detail-video-wrap::before,
#specModalBody .spec-content div[style*="width"][style*="height"] .ratio.ratio-16x9::before {
    display: none !important;
    padding: 0 !important;
    content: none !important;
}
#specModalBody .spec-content div[style*="width"][style*="height"] .detail-video-wrap iframe,
#specModalBody .spec-content div[style*="width"][style*="height"] .ratio.ratio-16x9 iframe {
    position: static;
}
#specModalBody .spec-content iframe[width] {
    height: auto;
}
#specModalBody .spec-content iframe:not([width]):not(.detail-embed-sized):not([data-embed-width]) {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
#specModalBody .spec-content table {
    max-width: 100% !important;
    width: 100% !important;
    table-layout: fixed !important;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
#specModalBody .spec-content table td,
#specModalBody .spec-content table th {
    white-space: normal !important;
    word-break: break-word;
}
#specModalBody .spec-content pre {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    max-width: 100%;
    font-family: inherit;
    margin: 0;
    text-align: left;
}
@media (max-width: 767.98px) {
    #specModalBody .spec-content {
        font-size: 13px;
        letter-spacing: -0.3px;
        -webkit-font-smoothing: antialiased;
    }
}

/* 옵션/필수 상품 상세 모달 — 스크롤은 iframe 안에서만 (바깥 모달 이중 스크롤 방지) */
#specModal .spec-modal-dialog {
    width: min(1140px, 96vw);
    max-width: 96vw;
    height: calc(100vh - 2rem);
    max-height: calc(100vh - 2rem);
    margin: 1rem auto;
}
#specModal .spec-modal-dialog .modal-content {
    height: 100%;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#specModal .spec-modal-dialog .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}
#specModalBody iframe.spec-modal-product-frame {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
    display: block;
}
#specModalBody:not(:has(iframe.spec-modal-product-frame)) {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
}
@media (max-width: 767.98px) {
    #specModal .spec-modal-dialog {
        width: 100vw;
        max-width: 100vw;
        height: calc(100dvh - 1rem);
        max-height: calc(100dvh - 1rem);
        margin: 0.5rem auto;
    }
    #specModal .spec-modal-dialog .modal-content {
        max-height: calc(100dvh - 1rem);
    }
}

/* --------------------------------------------------------------------------
   7. PC 및 모바일 상단 이미지 스와이프 (Scroll Snap)
   -------------------------------------------------------------------------- */
/* 스와이프 래퍼 및 인디케이터 점 모양 */
.mobile-swipe-wrapper {
    position: relative;
    width: 100%;
}
.swipe-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.swipe-indicator-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d1d1d1;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 배경 이미지 색상과 겹쳐도 잘 보이도록 약간의 그림자 추가 */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.swipe-indicator-dot.active {
    width: 28px;
    border-radius: 10px;
    background-color: #555;
}

/* 공통 좌우 스와이프 슬라이더 활성화 */
.mobile-swipe-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0; /* 이미지 사이 간격 제거하여 스크롤 오프셋 일치 및 깜빡임 해결 */
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 지원 */
    scrollbar-width: none; /* Firefox 스크롤바 숨김 */
    align-items: center; /* 세로 가운데 정렬 */
    touch-action: pan-x pan-y;
}
@media (hover: hover) and (pointer: fine) {
    .mobile-swipe-container {
        cursor: grab;
    }
    .mobile-swipe-container.is-dragging {
        cursor: grabbing;
        scroll-behavior: auto;
    }
    .mobile-swipe-container.is-dragging img {
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
    }
}
.mobile-swipe-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge 스크롤바 숨김 */
}
.mobile-swipe-container img {
    scroll-snap-align: center;
    flex: 0 0 100%; /* 부모 100%를 차지하며 표시 */
    width: 100%;
    object-fit: scale-down; /* 원래 크기보다 억지로 커지지 않고 가운데 정렬 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* 모바일: 메인 이미지 모서리 — wrapper에서 통일 클리핑 (1번째 슬라이드 하단 직각 현상 방지) */
@media (max-width: 767.98px) {
    .mobile-swipe-wrapper {
        border-radius: var(--bs-border-radius, 0.375rem);
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    .mobile-swipe-container img {
        display: block;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none;
        -webkit-transform: none;
        will-change: auto;
    }
}

/* 대형 이미지 좌우 화살표 (공통: 네이버 스마트스토어 스타일) */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.8rem !important; /* 화살표 크기 소폭 축소 */
    z-index: 15;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.6));
    transition: transform 0.2s ease, opacity 0.25s ease, visibility 0.25s ease !important;
    opacity: 0 !important; /* 평소에는 숨김 */
    visibility: hidden !important;
    pointer-events: none !important;
}
/* 이미지 슬라이더 영역에 마우스 오버 시에만 화살표 노출 (터치 기기 오작동 방지) */
@media (hover: hover) {
    .mobile-swipe-wrapper:hover .slider-arrow {
        opacity: 0.7 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .mobile-swipe-wrapper:hover .slider-arrow:hover {
        opacity: 1 !important;
        transform: translateY(-50%) scale(1.1) !important;
    }
}
.prev-arrow {
    left: 10px;
}
.next-arrow {
    right: 10px;
}

/* --------------------------------------------------------------------------
   8. (사용 안함) PC 해상도 이미지 세로 나열
   -------------------------------------------------------------------------- */
/* PC와 모바일 모두 가로 슬라이드로 통합되어 세로 나열 설정은 제거되었습니다. */

/* --------------------------------------------------------------------------
   9. 모바일 하단 플로팅 구매 바
   -------------------------------------------------------------------------- */
#mobile-floating-buy-bar {
    position: fixed;
    bottom: var(--floating-bottom, 0px); /* 네비게이션 바 위치에 맞춰 JS에서 동적 할당 */
    left: 0;
    right: 0;
    z-index: 1040; /* 하단 네비게이션 바(z-index: 10450) 아래에서 올라오도록 레이어 순서 유지 */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-in-out;
    transform: translateY(calc(100% + 20px)); /* 그림자 노출 방지를 위해 여유 높이 20px 추가하여 완전히 하단 배치 */
    opacity: 0;
    pointer-events: none;
}
#mobile-floating-buy-bar.show {
    transform: translateY(0); /* 클래스 추가 시 위로 스르륵 등장 */
    opacity: 1;
    pointer-events: auto;
}
/* 모바일 플로팅 바 전용 상단 방향 그림자 (하단 네비게이션 바 침범 방지) */
#mobile-floating-buy-bar .floating-up-shadow {
    box-shadow: 0 -5px 12px rgba(0, 0, 0, 0.07) !important;
}

/* --------------------------------------------------------------------------
   10. 모바일 토스트(Toast) 팝업 알림
   -------------------------------------------------------------------------- */
.niio-toast-backdrop {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    inset: 0;
    z-index: 10599;
    background: transparent;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.niio-toast-backdrop.show {
    visibility: visible;
    opacity: 1;
}
 .niio-toast {
     visibility: hidden;
     width: max-content;
     min-width: 240px;
     max-width: 90vw;
     background-color: rgba(255, 255, 255, 0.98);
     color: #343a40;
     border: 1px solid #dee2e6;
     text-align: center;
     border-radius: 30px;
     padding: 12px 24px;
     position: fixed;
     z-index: 10600;
     left: 50%;
     top: 50%; /* 화면 중간에 위치 */
     transform: translate(-50%, -50%) scale(0.8);
     font-size: 1rem;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     opacity: 0;
     transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 .niio-toast.show {
     visibility: visible;
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
 }
.niio-toast-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    margin-top: 4px;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #343a40;
    background-color: #fff;
    border: 1.5px solid #495057;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.niio-toast-cart-btn:hover {
    background-color: #343a40;
    border-color: #343a40;
    color: #fff;
}
.niio-toast-cart-btn .bi {
    font-size: 0.75rem;
}
.niio-toast-cart-btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    margin-top: 4px;
    padding: 0.45rem 1.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #343a40;
    background-color: #fff;
    border: 1.5px solid #495057;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.niio-toast-cart-btn-pill:hover {
    background-color: #343a40;
    border-color: #343a40;
    color: #fff;
}
.niio-toast-cart-btn-pill[data-go-wish] {
    color: #e64980;
    border-color: #e64980;
}
.niio-toast-cart-btn-pill[data-go-wish]:hover {
    background-color: #e64980;
    border-color: #e64980;
    color: #fff;
}
.toast-icon-success {
    color: #343a40;
}
.niio-toast-cart-btn-pill .bi {
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   11. 에러 및 경고 애니메이션 (좌우 흔들림)
   -------------------------------------------------------------------------- */
@keyframes shake-horizontal {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake-animation {
    animation: shake-horizontal 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* 토스트 전용 흔들림 애니메이션 (중앙 정렬 transform 유지) */
@keyframes shake-toast {
    0%, 100% { transform: translate(-50%, 0) scale(1); }
    10%, 30%, 50%, 70%, 90% { transform: translate(calc(-50% - 6px), 0) scale(1); }
    20%, 40%, 60%, 80% { transform: translate(calc(-50% + 6px), 0) scale(1); }
}
.shake-toast-animation {
    animation: shake-toast 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes niio-toast-shake {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    15%, 45%, 75% { transform: translate(calc(-50% - 4px), -50%) scale(1); }
    30%, 60%, 90% { transform: translate(calc(-50% + 4px), -50%) scale(1); }
}
.niio-toast-shake-animation {
    animation: niio-toast-shake 0.45s cubic-bezier(.36,.07,.19,.97) both;
}
/* 스크롤을 내릴 때 기존 구매 바를 완전히 화면 밑으로 강제 숨김 */
#mobile-floating-buy-bar.scroll-down-hide {
    transform: translateY(150%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 미니 장바구니 플로팅 액션 버튼 (FAB) */
#mobile-mini-cart-fab {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    right: 20px;
    width: 48px; /* 다시 48px 고정 크기로 복원 */
    height: 48px;
    background-color: rgba(255, 255, 255, 0.85); /* 덜 거슬리도록 흰색 반투명 배경 적용 */
    backdrop-filter: blur(5px); /* 뒤쪽 글씨가 부드럽게 뭉개지도록 블러 효과 추가 */
    border-radius: 50%; /* 완전한 원형(동그라미)으로 복원 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1045; /* 네비게이션(1040)보다 살짝 위로 배치 */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5) translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 통통 튀어오르는 바운스 애니메이션 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 은은한 회색/검정 계열 그림자로 변경 */
}
#mobile-mini-cart-fab.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

/* 비활성 시 우측 화면 밖으로 스르륵 숨는 클래스 */
#mobile-mini-cart-fab.show.slide-out {
    transform: scale(1) translateX(calc(100% + 30px)); /* 우측 화면 밖으로 완전히 밀어냄 */
    box-shadow: none; /* 그림자 제거 */
}

/* --------------------------------------------------------------------------
   12. 모바일 터치 환경 버튼 잔상(Sticky Hover) 완벽 제거
   -------------------------------------------------------------------------- */
/* 스마트폰(터치 기기)에서는 터치 후 hover 상태가 굳어버리는 현상을 방지합니다 */
@media (hover: none) and (pointer: coarse) {
    .btn-outline-secondary:hover {
        color: #6c757d !important;
        background-color: transparent !important;
        border-color: #ced4da !important;
    }
    /* 터치하는(누르고 있는) 순간에만 원래 의도한 진한 색상 적용 */
    .btn-outline-secondary:active {
        color: #fff !important;
        background-color: #6c757d !important;
        border-color: #6c757d !important;
    }
}

/* --------------------------------------------------------------------------
   13. 커스텀 옵션 선택 드롭다운 (JS + AJAX 기반, Iframe 외부 렌더링)
   -------------------------------------------------------------------------- */
.option-dropdown-placeholder .custom-dropdown-btn {
    opacity: 0.85;
    pointer-events: none;
}
.set-components-frame-wrap {
    overflow: hidden;
    min-height: 48px;
}
.set-components-frame-wrap iframe {
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.custom-dropdown-container {
    position: relative;
    width: 100%;
    display: block;
    box-sizing: border-box;
    margin-bottom: 12px;
    font-family: "system-ui", -apple-system, sans-serif;
}
.custom-dropdown-btn {
    width: 100%;
    padding: 6px 12px;
    font-size: 13px;
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    user-select: none;
}
.custom-dropdown-btn:hover {
    border-color: #bbb;
    background-color: #f8f9fa;
}
@keyframes customDropdownFlash {
    0%, 50% {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
        background-color: #f0f7ff;
    }
    100% {
        border-color: #e0e0e0;
        box-shadow: none;
        background-color: #fcfcfc;
    }
}
.custom-dropdown-btn.recently-selected {
    animation: customDropdownFlash 3.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.custom-dropdown-btn::after {
    content: "";
    border: solid #6c757d;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.2s;
    margin-left: 8px;
}
.custom-dropdown-container.open .custom-dropdown-btn::after {
    transform: rotate(-135deg);
}
.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 380px;
    overflow-y: auto;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1050;
    display: none;
    margin-top: 4px;
    padding: 0;
    list-style: none;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.custom-dropdown-menu::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.custom-dropdown-container.open .custom-dropdown-menu {
    display: block;
    animation: customDropdownSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: top;
}
.custom-dropdown-container.open.dropdown-open-up .custom-dropdown-menu {
    display: block;
    animation: customDropdownSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: bottom;
}
@keyframes customDropdownSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes customDropdownSlideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.custom-dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f5;
    transition: background-color 0.2s;
    gap: 12px;
}
.custom-dropdown-item:last-child {
    border-bottom: none;
}
.custom-dropdown-item:hover {
    background-color: #f8f9fa;
}
.custom-dropdown-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #fcfcfc;
}
.custom-dropdown-item-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    background-color: #fff;
    flex-shrink: 0;
}
.custom-dropdown-item-info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.custom-dropdown-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #212529;
    word-break: break-all;
}
@media (min-width: 992px) {
    .custom-dropdown-item-name {
        font-size: 14px !important;
    }
}
.selected-opt-name {
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.35;
    min-width: 0;
}
@media (min-width: 992px) {
    .selected-opt-name {
        font-size: 14px !important;
    }
}
.selected-opt-rrp-hint,
#adds_opt .selected-opt-name span[style*="float"],
#adds_spt .selected-opt-name span[style*="float"] {
    float: none !important;
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #6c757d;
    white-space: nowrap;
    font-weight: 400;
    line-height: 1.3;
}
#adds_opt td:nth-child(3),
#adds_spt td:nth-child(3) {
    word-break: keep-all;
    overflow-wrap: break-word;
}
#srsOptionModal #adds_opt td:nth-child(3),
#srsOptionModal #adds_spt td:nth-child(3) {
    padding-right: 8px !important;
}
.custom-dropdown-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #6c757d;
}
.custom-dropdown-item-price {
    font-size: 14px;
    font-weight: bold;
    color: #dc3545;
}
.custom-dropdown-item-qty {
    background-color: #e9ecef;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: normal;
}

/* --------------------------------------------------------------------------
   14. 선택 옵션 리스트 및 수량 조절기 디자인 (미니멀 & 프리미엄)
   -------------------------------------------------------------------------- */
#adds_opt, #adds_spt {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    margin-top: 12px !important;
    width: 100% !important;
    transition: margin 0.3s ease;
}
#adds_opt tr, #adds_spt tr {
    background-color: #ffffff !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
    position: relative !important;
    transform-origin: center top;
    will-change: transform, opacity;
}
#adds_opt tr:hover, #adds_spt tr:hover {
    background-color: #fafafa !important;
}
#adds_opt td, #adds_spt td {
    padding: 12px 14px !important;
    border-top: 1px solid #eaeaea !important;
    border-bottom: 1px solid #eaeaea !important;
    vertical-align: middle !important;
}
#adds_opt tr:first-child, #adds_spt tr:first-child {
    display: none !important;
}
#adds_opt td:nth-child(1), #adds_spt td:nth-child(1) {
    display: none !important;
}
#adds_opt td:nth-child(2), #adds_spt td:nth-child(2) {
    border-left: 1px solid #eaeaea !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}
#adds_opt td:last-child, #adds_spt td:last-child {
    border-right: 1px solid #eaeaea !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    white-space: nowrap !important;
    padding-right: 32px !important;
}

/* 프리미엄 미니멀 수량 조절기 */
.opt-quantity-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: #fff;
    overflow: hidden;
    height: 28px;
    box-sizing: border-box;
}
.opt-quantity-btn {
    width: 26px;
    height: 100%;
    border: none;
    background-color: transparent;
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
    padding: 0;
    outline: none;
}
.opt-quantity-btn:hover {
    background-color: #f7fafc;
}
.opt-quantity-btn svg {
    color: #718096;
}
.opt-quantity-input {
    width: 28px;
    border: none;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #2d3748;
    height: 100%;
    background-color: #fff;
    outline: none;
    padding: 0;
}

/* 삭제 버튼 스타일 - 우측 상단 동그란 원형 붉은 버튼 배치 */
.btn-opt-delete {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    border: none !important;
    background-color: #fee2e2 !important; /* 소프트한 파스텔톤 연빨강 배경 */
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: #ef4444 !important; /* 선명한 빨강 X */
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    box-sizing: border-box !important;
}
.btn-opt-delete:hover {
    background-color: #ef4444 !important; /* 호버 시 붉은색 채워짐 */
    color: #ffffff !important; /* X는 흰색으로 변경 */
    transform: scale(1.1) rotate(90deg) !important; /* 회전하며 커지는 부드러운 모션 */
}

/* 카드 등장/퇴장 애니메이션 */
@keyframes optFadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes optFadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 96px;
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
        max-height: 0;
    }
}
@keyframes optPulse {
    0% { transform: scale(1); box-shadow: none; }
    40% { transform: scale(1.012); box-shadow: 0 4px 14px rgba(13, 110, 253, 0.12); }
    100% { transform: scale(1); box-shadow: none; }
}
@keyframes setItemFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-opt-row {
    animation: optFadeInUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
.animate-opt-row-exit {
    animation: optFadeOutUp 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    pointer-events: none !important;
    overflow: hidden !important;
}
.animate-opt-row-exit td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-color: transparent !important;
    transition: padding 0.28s ease, border-color 0.28s ease !important;
}
.animate-opt-pulse {
    animation: optPulse 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.set-item-row.animate-set-item {
    animation: setItemFadeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --------------------------------------------------------------------------
   15. PC 환경 전용 레이아웃 조정
   -------------------------------------------------------------------------- */
/* PC 환경(992px 이상)에서 장바구니/바로구매 버튼 아래 여백 확대 */
@media (min-width: 992px) {
    #nowbuy, #nowbuys, #soldout, .buy-buttons-wrapper {
        margin-bottom: 50px !important;
    }
    
    /* PC 환경에서 구매 버튼 그룹의 높이감과 디자인을 시원하게 조절 */
    .buy-buttons-wrapper .btn {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        border-radius: 8px !important; /* 모서리를 둥글게 깎아 현대적이고 친근한 룩 선사 */
        letter-spacing: -0.3px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* 상세 구매 버튼 영역의 찜하기만 텍스트형으로 확장 (연관 상품 카드에는 적용 안 함) */
    .buy-buttons-wrapper .btn-wishlist-inline {
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        border: 1px solid #ced4da !important;
        background-color: #ffffff !important;
        color: #495057 !important;
    }
    .buy-buttons-wrapper .btn-wishlist-inline:hover {
        background-color: #f8f9fa !important;
        border-color: #adb5bd !important;
        color: #212529 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }

    /* 장바구니 버튼 호버시 세련된 그림자 추가 */
    .buy-buttons-wrapper .btn-outline-secondary {
        border-color: #ced4da !important;
        background-color: #ffffff !important;
        color: #495057 !important;
    }
    .buy-buttons-wrapper .btn-outline-secondary:hover {
        background-color: #f8f9fa !important;
        border-color: #adb5bd !important;
        color: #212529 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }

    /* 바로구매 버튼 (기본 레드의 채도를 부드럽게 조정하고 트렌디한 그림자 효과 부여) */
    .buy-buttons-wrapper .btn-danger {
        background-color: #e63946 !important;
        border-color: #e63946 !important;
    }
    .buy-buttons-wrapper .btn-danger:hover {
        background-color: #d62828 !important;
        border-color: #d62828 !important;
        box-shadow: 0 4px 15px rgba(230, 57, 70, 0.25) !important;
    }

    /* 예약주문 버튼 (초록 계열의 호버 입체감 부여) */
    .buy-buttons-wrapper .btn-success {
        background-color: #198754 !important;
        border-color: #198754 !important;
    }
    .buy-buttons-wrapper .btn-success:hover {
        background-color: #157347 !important;
        border-color: #146c43 !important;
        box-shadow: 0 4px 15px rgba(25, 135, 84, 0.25) !important;
    }

    /* PC 환경에서 화살표 크기 및 위치 조정 */
    .slider-arrow {
        font-size: 2.2rem !important; /* PC용 화살표 크기 축소 */
    }
    .prev-arrow {
        left: 15px;
    }
    .next-arrow {
        right: 15px;
    }

    /* 썸네일 리스트 이동 화살표 */
    .thumb-arrow {
        background: transparent !important;
        border: none !important;
        color: #6c757d !important;
        font-size: 1.5rem !important;
        cursor: pointer;
        padding: 4px 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease, transform 0.2s ease;
    }
    .thumb-arrow:hover {
        color: #212529 !important;
        transform: scale(1.15);
    }
}

/* 관리자용 정보 표 라운드 모서리 처리 */
.rounded-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.125) !important;
}
.rounded-table th, .rounded-table td {
    border-top: none !important;
    border-left: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.125) !important;
}
.rounded-table tr:last-child th, .rounded-table tr:last-child td {
    border-bottom: none !important;
}
.rounded-table th:last-child, .rounded-table td:last-child {
    border-right: none !important;
}

/* 관리자용 정보 아코디언/콜랩스 화살표 회전 */
[data-bs-toggle="collapse"] .bi-chevron-down {
    transition: transform 0.2s ease-in-out;
}
[data-bs-toggle="collapse"]:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

/* PC 광고 히스토리 표 세로 테두리만 스타일 */
.vertical-borders-only-table {
    border-collapse: collapse !important;
}
.vertical-borders-only-table td {
    border-top: none !important;
    border-bottom: none !important;
    border-left: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-right: none !important;
}
.vertical-borders-only-table td:first-child {
    border-left: none !important;
}

/* 관리자 설정 아이콘 회전 애니메이션 */
.admin-settings-btn {
    transition: transform 0.4s ease, background-color 0.2s ease !important;
}
.admin-settings-btn:hover {
    transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   21. 연관 상품 섹션 (Swiper 슬라이더 + 미니 카드 + 스켈레톤)
   -------------------------------------------------------------------------- */

/* Swiper 네비게이션 버튼 커스터마이징 */
.relatedProductSwiper {
    padding-bottom: 8px !important; /* 그림자 잘림 방지 */
    height: auto !important; /* 높이가 팽창하는 문제 차단 */
}
.relatedProductSwiper .swiper-wrapper {
    align-items: flex-start !important; /* 각 슬라이드의 카드 크기만큼 높이 차지하도록 자동 높이 맞춤 방지 */
    height: auto !important;
}
.relatedProductSwiper .swiper-slide {
    height: auto !important;
}
#related-products-container {
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
}
.related-products-section {
    position: relative; /* 화살표 포지셔닝용 기준점 */
}
.related-products-section .swiper-button-prev,
.related-products-section .swiper-button-next {
    width: 34px !important;
    height: 34px !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    top: 55% !important; /* 이미지 중심과 가격 중심의 수직 중간선에 맞춤 */
    transform: translateY(-50%) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    z-index: 10 !important;
}
.related-products-section .swiper-button-prev {
    left: -17px !important; /* 카드 목록 왼쪽 끝 경계선에 걸치게 조정 */
}
.related-products-section .swiper-button-next {
    right: -17px !important; /* 카드 목록 오른쪽 끝 경계선에 걸치게 조정 */
}
.related-products-section .swiper-button-prev:hover,
.related-products-section .swiper-button-next:hover {
    background-color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-50%) scale(1.1) !important;
}
.related-products-section .swiper-button-prev::after,
.related-products-section .swiper-button-next::after {
    font-size: 11px !important;
    font-weight: 900 !important;
    color: #333 !important;
}
/* 모바일에서는 네비게이션 버튼 숨김 */
@media (max-width: 767.98px) {
    .related-products-section .swiper-button-prev,
    .related-products-section .swiper-button-next {
        display: none !important;
    }
}

/* 연관 상품 카드 (네이버 스마트스토어형 미니멀 스타일: 테두리, 그림자, 호버 이동 효과 전면 제거) */
.relatedProductSwiper .card {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transition: none !important;
    overflow: hidden;
    height: auto !important;
}
.relatedProductSwiper .card:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* 카드 이미지 컨테이너 (연한 회색 배경 + 8px 둥근 모서리) */
.relatedProductSwiper .img-container {
    background-color: #f4f4f4 !important; /* 스마트스토어 특유의 밝은 회색 이미지 배경 */
    border-radius: 8px !important;
    border: none !important;
    overflow: hidden;
}
.relatedProductSwiper .img-container img {
    transition: none !important;
}
.relatedProductSwiper .card:hover .img-container img {
    transform: none !important; /* 이미지 줌인 제거 */
}

/* 연관 상품 카드 정보(브랜드 / 상품명 / 가격) 세로 간격 */
.relatedProductSwiper .card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.relatedProductSwiper .card-body > div:last-child {
    margin-top: 0 !important;
}

/* 연관 상품명 — 글자 크기 축소 */
.relatedProductSwiper .related-product-name {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    line-height: 1.2;
    height: 2.2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    letter-spacing: -0.3px;
}

/* 담기 버튼 미니멀 스타일 튜닝 (얇은 테두리와 4px 라운드 처리) */
.relatedProductSwiper .btn-cart-action {
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    border-radius: 4px !important; /* 살짝 둥근 사각형으로 변경 */
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    height: 30px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
.relatedProductSwiper .btn-cart-action:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #000000 !important;
}
@media (hover: hover) {
    .relatedProductSwiper .card:hover .btn-cart-action:not(:disabled) {
        background-color: #212529 !important;
        border-color: #212529 !important;
        color: #ffffff !important;
    }
    .relatedProductSwiper .card:hover .btn-cart-action:not(:disabled) i {
        color: #ffffff !important;
    }
    .relatedProductSwiper .card:hover .btn-cart-action:not(:disabled):hover {
        background-color: #495057 !important;
        border-color: #495057 !important;
        color: #ffffff !important;
    }
    .relatedProductSwiper .card:hover .btn-cart-action:not(:disabled):hover i {
        color: #ffffff !important;
    }
}

/* 연관 상품 찜 버튼: 하트 아이콘만 노출 (배경·테두리 없음) */
.relatedProductSwiper .btn-related-wishlist {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 2px !important;
    border-radius: 0 !important;
    right: 6px !important;
    bottom: 6px !important;
    z-index: 5 !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
    transition: transform 0.2s ease !important;
}
.relatedProductSwiper .btn-related-wishlist:hover,
.relatedProductSwiper .btn-related-wishlist:focus,
.relatedProductSwiper .btn-related-wishlist:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: scale(1.15) !important;
}
.relatedProductSwiper .btn-related-wishlist i {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    display: block !important;
}
/* 빈 하트: 이미지 위에서도 보이도록 흰색 + 얇은 외곽선 */
.relatedProductSwiper .btn-related-wishlist i.bi-heart:not(.bi-heart-fill) {
    color: #ffffff !important;
    -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.55);
    paint-order: stroke fill;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.relatedProductSwiper .btn-related-wishlist i.bi-heart-fill {
    color: #dc3545 !important;
    -webkit-text-stroke: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.relatedProductSwiper .btn-related-wishlist:hover i.bi-heart-fill {
    color: #dc3545 !important;
}

/* --------------------------------------------------------------------------
   스켈레톤 shimmer 애니메이션
   -------------------------------------------------------------------------- */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 800px 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: 6px;
}
.related-skeleton-card {
    width: calc(50% - 8px);
}
@media (min-width: 480px)  { .related-skeleton-card { width: calc(33% - 8px); } }
@media (min-width: 768px)  { .related-skeleton-card { width: calc(25% - 8px); } }
@media (min-width: 992px)  { .related-skeleton-card { width: calc(20% - 8px); } }

.related-skeleton-img {
    width: 100%;
    aspect-ratio: 1 / 1;
}
.related-skeleton-line {
    height: 12px;
    width: 85%;
}
.related-skeleton-line-short {
    height: 14px;
    width: 60%;
}

/* 배지 텍스트 크기 10px 및 굵기 지정 */
.badge {
    font-size: 10px !important;
    font-weight: bold !important;
}

/* details 오픈 시 화살표 180도 회전 애니메이션 */
details[open] .chevron-icon {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* 찜하기 버튼 내부 하트 아이콘 및 텍스트 수직 정렬 최적화 */
.btn-wishlist-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn-wishlist-inline i.bi {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}
.btn-wishlist-inline .wishlist-text {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* 내용이 비어있을 때 공간을 차지하지 않도록 숨김 처리 */
#SptionWarehouse:empty,
#OptionWarehouse:empty {
    display: none !important;
}

/* 제품 메인 기본 정보(영문명, 제품코드 등) 박스 */
.product-meta-box {
    font-family: system_ui;
    font-size: 0.85rem;
    border-color: #f1f3f5 !important;
    border-width: 1.5px !important;
}

/* 소형 라벨/태그 — 스마트스토어 다운로드 버튼(btn-outline-secondary 11px)과 동일 선명도 */
.content-crisp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 4px 8px;
    white-space: nowrap;
    word-break: keep-all;
    vertical-align: middle;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    text-rendering: geometricPrecision;
}
.content-crisp-badge--store-label {
    flex-shrink: 0;
    align-self: center;
    background-color: #f8f9fa;
}
.product-store-name-row {
    font-size: 0.85rem;
}
.product-store-name-row .product-store-name-text {
    line-height: 1.4;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .content-crisp-badge,
    .p-hidden-keyword-label {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* 숨김검색어 — 다운로드 버튼과 동일한 소형 배지 선명도 */
.p-hidden-keyword-card {
    border-color: #dee2e6 !important;
}
.p-hidden-keyword-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.p-hidden-keyword-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.4;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    text-rendering: geometricPrecision;
}
.p-hidden-keyword-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: none;
    border-radius: 0.25rem;
    background: transparent;
    color: #64748b;
    text-decoration: none;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.p-hidden-keyword-edit-btn i {
    font-size: 0.85rem;
}
.p-hidden-keyword-card:hover .p-hidden-keyword-edit-btn,
.p-hidden-keyword-edit-btn:focus-visible {
    opacity: 1;
    visibility: visible;
}
.p-hidden-keyword-edit-btn:hover,
.p-hidden-keyword-edit-btn:focus-visible {
    color: #334155;
    background-color: #f1f5f9;
}
@media (hover: none) and (pointer: coarse) {
    .p-hidden-keyword-edit-btn {
        opacity: 0.75;
        visibility: visible;
    }
}
.p-hidden-keyword-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
/* 숨김검색어 태그 — btn-outline-secondary 다운로드 버튼과 동일 색·크기 */
.content-crisp-badge.p-hidden-keyword-tag {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    color: #6c757d;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 4px 8px;
    white-space: normal;
    text-align: center;
}

/* 상품명 상단 브랜드/분류 및 상품명 헤더 영역 디자인 개선 */
.product-header {
    border-bottom: 1px solid #343a40 !important;
}
.product-brand-category {
    font-size: 16px !important;
    font-weight: 600;
    color: #6c757d !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 2px !important;
    padding-right: 40px !important;
}
.product-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #212529 !important;
    margin-top: 0 !important;
    padding: 0 !important;
}