/* 모든 a 태그의 기본 텍스트 언더라인 제거 */
a { text-decoration: none !important; }

/* 장바구니 리스트 테이블 행(Row) 하단 경계선 */
.cartplistTr { border-bottom: 1px solid #e6e6e6; }

/* PC 및 대형 화면용 검색창 최소 너비 지정 */
@media screen and (min-width: 600px) { 
    .search_input { min-width: 300px !important; } 
}

/* 모바일 및 소형 화면용 검색창 최대 너비 제한 */
@media screen and (max-width: 600px) { 
    .search_input { max-width: 600px !important; } 
}

/* 상단 검색창 좌우 모서리 — 모바일: 기존 작은 라운드 / PC(768px+): 알약형 */
#indexbar #search1 .input-group {
    --search-bar-radius: 0.25rem;
}
@media screen and (min-width: 768px) {
    #indexbar #search1 .input-group {
        --search-bar-radius: 1.5rem;
    }
}
#indexbar #search1 .input-group > .input-group-text:first-child {
    border-top-left-radius: var(--search-bar-radius) !important;
    border-bottom-left-radius: var(--search-bar-radius) !important;
}
#indexbar #search1 .input-group > .search_input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* PC: 입력이 첫 요소(홈 버튼 없음)이거나 숨김 prefix 뒤 — 좌측 알약 라운드 */
@media screen and (min-width: 768px) {
    #indexbar #search1 .input-group > .search_input:first-child,
    #indexbar #search1 .input-group > .input-group-text.d-md-none + .search_input,
    #indexbar #search1 .input-group > .input-group-text.d-none + .search_input {
        border-top-left-radius: var(--search-bar-radius) !important;
        border-bottom-left-radius: var(--search-bar-radius) !important;
    }
}
#indexbar #search1 .input-group > button:last-of-type {
    border-top-right-radius: var(--search-bar-radius) !important;
    border-bottom-right-radius: var(--search-bar-radius) !important;
}

/* 반응형 상단 메뉴 항목들 마우스 호버 시 텍스트 컬러 변경 */
.menu-hover:hover { color: #6c757d !important; }

/* ==========================================================================
   애니메이션 키프레임 정의
   ========================================================================== */

/* 이벤트 뱃지 흔들림 효과 (시선 집중용 마이크로 무브먼트) */
@keyframes badge-shake {
    0%, 2%, 18% { transform: translate3d(0, -1px, 0); }
    4%, 16% { transform: translate3d(0, 2px, 0); }
    6%, 8%, 10%, 12%, 14% { transform: translate3d(0, -2px, 0); }
    7%, 9%, 11%, 13%, 15% { transform: translate3d(0, 2px, 0); }
    20%, 100% { transform: translate3d(0, 0, 0); }
}

/* 이벤트 뱃지 밝기 깜빡임 효과 */
@keyframes badge-sparkle {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
    100% { filter: brightness(1); }
}

/* 이벤트 뱃지 사방으로 퍼지는 폭죽 파티클 애니메이션 */
@keyframes badge-firework {
    0% {
        box-shadow: 0 0 0 0px #ffeb3b, 0 0 0 0px var(--badge-firework-color), 0 0 0 0px #00e5ff, 0 0 0 0px #ffeb3b, 0 0 0 0px var(--badge-firework-color), 0 0 0 0px #00e5ff;
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.1);
    }
    100% {
        box-shadow: -15px -15px 0 0px #ffeb3b, 15px -15px 0 0px var(--badge-firework-color), -25px -5px 0 0px #00e5ff, 25px -5px 0 0px #ffeb3b, -10px -20px 0 0px var(--badge-firework-color), 10px -20px 0 0px #00e5ff;
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* ==========================================================================
   움직이는 이벤트 뱃지 스타일
   ========================================================================== */
.badge-animated {
    position: relative;
    z-index: 1000;
    /* 흔들림과 반짝임 애니메이션 동시 적용 */
    animation: badge-shake 5s cubic-bezier(.36,.07,.19,.97) both infinite, badge-sparkle 2s infinite ease-in-out;
}

/* 폭죽 효과를 위한 가상 요소 정의 (before: 첫 번째 파티클 그룹) */
.badge-animated::before, .badge-animated::after {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    width: 4px; 
    height: 4px; 
    border-radius: 50%; 
    pointer-events: none; 
    opacity: 0; 
    z-index: 1001;
}
/* 첫 번째 폭죽 파티클 작동 타이밍 */
.badge-animated::before { 
    animation: badge-firework 2s infinite ease-out; 
    animation-delay: 0s; 
    margin-left: -10px; 
}
/* 두 번째 폭죽 파티클 작동 타이밍 (교차 실시간 연출을 위해 1초 딜레이) */
.badge-animated::after { 
    animation: badge-firework 2s infinite ease-out; 
    animation-delay: 1s; 
    margin-left: 10px; 
    margin-top: -5px; 
}

/* ==========================================================================
   상단 가로 메뉴바 & 스크롤 영역
   ========================================================================== */

/* 상단 카테고리 탭 영역 묶음 (넘칠 경우 줄바꿈 허용) */
.menu-scroll-container { overflow: visible; flex-wrap: wrap; }

/* PC(대형 해상도)에서는 줄바꿈 방지 및 필요 시 스크롤 허용 */
@media (min-width: 992px) { 
    .menu-scroll-container { overflow: visible !important; flex-wrap: nowrap; } 
}

/* 상단 메뉴 탭 사이에 들어가는 1px 회색 구분선 */
.menu-sep { 
    width: 1px; 
    height: 12px; 
    background-color: #e0e0e0; 
    margin: 0 2px; 
    flex-shrink: 0; 
    display: inline-block; 
    vertical-align: middle; 
}

/* ==========================================================================
   공용 토스트 팝업 (알림 메시지 레이어)
   ========================================================================== */
.global-toast {
    visibility: hidden; 
    width: max-content; 
    min-width: 260px; 
    max-width: 90vw; 
    background-color: rgba(33, 37, 41, 0.95); 
    color: #fff; 
    text-align: center; 
    border-radius: 30px; 
    padding: 12px 24px; 
    position: fixed; 
    z-index: 10600; 
    left: 50%; 
    top: 15vh; 
    transform: translate(-50%, -20px) scale(0.8); 
    font-size: 0.95rem; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    opacity: 0; 
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    pointer-events: none;
}
/* 토스트 활성화 상태 */
.global-toast.show { 
    visibility: visible; 
    opacity: 1; 
    transform: translate(-50%, 0) scale(1); 
    pointer-events: auto;
}

/* 화면 정중앙 토스트 (제주운임 등) */
.global-toast.global-toast-center {
    top: 50%;
    transform: translate(-50%, -50%) scale(0.92);
}
.global-toast.global-toast-center.show {
    transform: translate(-50%, -50%) scale(1);
}

/* 흔들림 연출 키프레임 (토스트 발생 경고 알림용) */
@keyframes global-toast-shake {
    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); }
}
/* 흔들림 애니메이션 클래스 */
.global-toast-shake-anim { 
    animation: global-toast-shake 0.4s cubic-bezier(.36,.07,.19,.97) both; 
}

/* ==========================================================================
   사이드 카테고리 드로어 (Off-canvas) 스타일 및 레이어 레벨 정의
   ========================================================================== */

/* 슬라이딩 메뉴 뒷 배경 딤처리 레이어 */
.offcanvas-backdrop { 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100vw !important; 
    height: 100vh !important; 
    background-color: #000 !important; 
    z-index: 10455 !important; 
}
.offcanvas-backdrop.show { opacity: 0.7 !important; }

/* 슬라이딩 오프캔버스 바 본체 레이어 레벨 설정 */
.offcanvas.offcanvas-start { z-index: 10460 !important; }

/* 모바일 전체 카테고리 & 전역 모바일 카테고리 본체 너비 고정 */
#offcanvasCategory, #offcanvasCategoryGlobal { width: 250px !important; }

/* 최근 상품 패널 — 본문을 밀지 않고 viewport 위에만 오버레이 */
#offcanvasRecent.offcanvas-end {
    position: fixed !important;
    top: 0;
    right: 0;
    left: auto;
    z-index: 10600 !important;
    transform: translateX(100%);
}
#offcanvasRecent.offcanvas-end.show,
#offcanvasRecent.offcanvas-end.showing {
    transform: none;
}

/* ==========================================================================
   상단 유틸리티 링크 바 (로그인, 회원가입, 로그아웃 등)
   ========================================================================== */
.top-util-link { 
    color: #495057; 
    text-decoration: none !important; 
    font-size: 0.75rem; 
    transition: color 0.2s; 
    display: inline-flex; 
    align-items: center; 
}
.top-util-link:hover { color: #212529; font-weight: 500; }

/* 유틸바 중간 구분 세로막대선 */
.top-util-divider { 
    width: 1px; 
    height: 10px; 
    background-color: #dee2e6; 
    margin: 0 0.5rem; 
    display: inline-block; 
}

/* ==========================================================================
   모바일 하단 고정 탭 메뉴바 (Mobile Bottom Tab Navigation)
   ========================================================================== */
.mobile-bottom-nav { 
    display: none; 
    position: fixed; 
    bottom: -1px; 
    left: 0; 
    width: 100%; 
    background-color: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08); 
    z-index: 10450 !important; 
    border-top: 1px solid rgba(233, 236, 239, 0.8); 
}
/* 미디어쿼리: 태블릿 및 모바일 기기(1200px 미만)에서만 고정 내비 노출 */
@media (max-width: 1199.98px) { 
    .mobile-bottom-nav { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        height: calc(50px + env(safe-area-inset-bottom)); 
        padding: 0; 
        padding-bottom: env(safe-area-inset-bottom); /* 아이폰 하단 영역 대응 */
    } 
}
/* 모바일 내비바 내부 아이템 링크 스타일 */
.mobile-bottom-nav .nav-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    color: #212529; 
    text-decoration: none !important; 
    font-size: 0.65rem; 
    font-family: system-ui, -apple-system, sans-serif; 
    background: none; 
    border: none; 
    padding: 0; 
    flex: 1 1 0; 
    width: 20%; 
    height: 100%; 
}
.mobile-bottom-nav .nav-item.m-active { color: #212529 !important; font-weight: normal !important; }
.mobile-bottom-nav .nav-item i { font-size: 1.2rem; margin-bottom: 1px; }
.mobile-bottom-nav .nav-item svg { width: 1.3rem; height: 1.3rem; margin-bottom: 1px; }
.mobile-bottom-nav .nav-item:hover { color: #212529; }

/* 모바일 하단바 마이페이지 플로팅 팝오버 메뉴 */
.mypage-popover {
    position: fixed;
    bottom: calc(var(--mypage-popover-offset, 60px) + env(safe-area-inset-bottom));
    left: 70%; /* 마이페이지 버튼 가로 70% 위치에 팝오버 중심점 배치 */
    transform: translateX(-70%) translateY(20px); /* 팝오버의 70% 가로축 지점이 버튼 정중앙에 위치하도록 역이동 */
    width: 90%;
    max-width: 340px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(222, 226, 230, 0.8);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 10465; /* 플로팅 구매바(1040)·하단 네비(10450) 위에 겹쳐 표시 */
    padding: 12px;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.mypage-popover.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-70%) translateY(0);
}
/* 말꼬리 화살표 */
.mypage-popover::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 70%; /* 팝오버 박스 내부의 70% 위치에 화살표를 위치시켜 버튼 축과 수직 정렬 */
    transform: translateX(-50%);
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.95) transparent transparent;
    display: block;
    width: 0;
    z-index: 1;
}
.mypage-popover::before {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 70%;
    transform: translateX(-50%);
    border-width: 9px 9px 0;
    border-style: solid;
    border-color: rgba(222, 226, 230, 0.8) transparent transparent;
    display: block;
    width: 0;
    z-index: 0;
}
.mypage-popover-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.mypage-popover-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #495057 !important;
    text-decoration: none !important;
    padding: 8px 4px;
    border-radius: 12px;
    transition: all 0.2s ease;
    font-size: 0.62rem;
    font-weight: 500;
}
.mypage-popover-item:active {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(0.95);
}
.mypage-popover-item i {
    font-size: 1.3rem;
    margin-bottom: 4px;
    color: #212529;
}
.mypage-popover-item .icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mypage-popover-item .popover-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    font-size: 0.55rem;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
}


/* ==========================================================================
   상품 목록 및 상세 페이지 찜하기 버튼 (Floating / Inline)
   ========================================================================== */

/* 이미지 영역 우하단 등에 올라가는 둥근 플로팅 찜하기 버튼 */
.btn-wishlist { 
    z-index: 10; 
    width: 38px; 
    height: 38px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.1rem; 
    background-color: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(3px); 
    -webkit-backdrop-filter: blur(3px); 
    transition: all 0.2s ease; 
}
.btn-wishlist:hover { transform: scale(1.1); background-color: #fff; }
.btn-wishlist .spinner-border { width: 1rem; height: 1rem; }

/* 텍스트 우측 등에 들어가는 보더리스 인라인 찜버튼 */
.btn-wishlist-inline { 
    background: none; 
    border: none; 
    padding: 0; 
    color: #6c757d; 
    cursor: pointer; 
    transition: all 0.2s ease; 
}
.btn-wishlist-inline:hover { color: #dc3545; transform: scale(1.15); }
.btn-wishlist-inline .spinner-border { width: 1em; height: 1em; }

/* 찜 완료 안내 흰색 토스트 알림 레이어 */
.wishlist-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); 
}
.wishlist-toast.show { 
    visibility: visible; 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
}
.wishlist-toast .bi-heart-fill::before { content: "\F417" !important; }

/* PC 전용 탑버튼 표시 여부 제어 (모바일은 숨김 처리) */
@media (max-width: 991.98px) { 
    .scrollup { display: none !important; } 
}

/* ==========================================================================
   공용 원형 액션 완료 레이어 모달 (장바구니 팝업 등)
   ========================================================================== */

/* 모달 외부 화면 잠금 투명 백드롭 */
.action-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    pointer-events: none;
    z-index: 10700;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.action-modal-backdrop.show {
    visibility: visible;
    opacity: 1;
}
/* 모달 본체 (둥근 원형 디자인 및 글래스모피즘 효과) */
.action-modal-content-box {
    width: 230px;
    height: 230px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #343a40;
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
    border-radius: 50%;
    padding: 20px;
    font-size: 1rem;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.action-modal-backdrop.show .action-modal-content-box {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* 완료 팝업 내부 중앙에 노출되는 대형 아이콘 크기 정의 */
.toast-icon-success { font-size: 3.5rem; color:#212529; line-height: 1; }
.toast-icon-warning { font-size: 3.2rem; color:#212529; line-height: 1; }
.toast-icon-wish-added { font-size: 2.8rem; color:#212529; line-height: 1; } 
.toast-icon-wish-removed { font-size: 2.8rem; color:#6c757d; line-height: 1; } 

/* 팝업 오작동 시 진동 쉐이크 경고 연출 */
@keyframes action-modal-shake {
    0%, 100% { transform: translateY(0) scale(1) translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateY(0) scale(1) translateX(-8px); }
    20%, 40%, 60%, 80% { transform: translateY(0) scale(1) translateX(8px); }
}
.action-modal-shake-anim {
    animation: action-modal-shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* ==========================================================================
   폼 인풋 요소 다크 테마 커스텀 스타일 (Dark 브랜드 시그니처 연동)
   ========================================================================== */

/* 체크박스, 라디오, 스위치 기본 인풋 체크 시 배경 및 테두리 Dark 컬러 적용 */
.form-check-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #212529 !important;
    border-color: #212529 !important;
    accent-color: #212529 !important; /* 브라우저 기본 체크 박스 색상 제어 */
}

/* 폼 체크 인풋 포커스 아웃라인 그림자 톤다운 설정 */
.form-check-input:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    border-color: #212529 !important;
    box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.25) !important;
}

/* ==========================================================================
   PC/모바일 스크롤 반응형 상단 헤더 간소화 (Smart Sticky Header) 스타일
   ========================================================================== */
#sticky-header {
    position: sticky !important;
    top: 0;
    z-index: 1030 !important;
    background-color: #ffffff;
    transition: box-shadow 0.25s ease-in-out;
}

/* 스크롤 시 생기는 얇은 그림자 경계 효과 */
#sticky-header.header-scroll {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* 스크롤이 내려간 상황에서 PC 가로형 대형 메뉴 영역(#responsiveMenuBar)을 숨겨서 공간 확보 */
@media (min-width: 992px) {
    #sticky-header.header-scroll #responsiveMenuBar {
        display: none !important;
    }
}

/* 헤더 상단 로고바 영역 여백 미세 축소 비활성화 (위아래 여백 고정) */
/*
#sticky-header.header-scroll #indexbar {
    margin-bottom: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    box-shadow: none !important;
}
*/

/* 헤더 축소 시 브랜드 로고 텍스트 크기 반응형 축소 비활성화 */
/*
#sticky-header.header-scroll #indexbar .navbar-brand {
    font-size: 1.5rem !important;
    transition: font-size 0.25s ease;
}
*/

/* 헤더 축소 시 중앙 검색창의 세로 폭 및 크기 조절 비활성화 */
/*
#sticky-header.header-scroll #indexbar .search_input {
    font-size: 0.85rem !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
*/

/* ==========================================================================
   반응형 푸터 & 우측 플로팅 퀵 메뉴 스타일 (idx_footer.jsp에서 이관됨)
   ========================================================================== */

/* 하단 푸터 텍스트 링크 마우스 호버 트랜지션 */
.footer-menu-link {
    transition: color 0.2s ease-in-out;
}
.footer-menu-link:hover {
    color: #0d6efd !important;
    font-weight: bold !important;
}

/* PC 환경에서는 inner가 flexbox로 동작하며 상위 justify-content-lg-end를 따라감 */
.top-util-menu-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* 모바일 전용 해상도에서의 푸터 내부 폰트 크기 및 여백 축소 */
@media (max-width: 767.98px) {
    .hosting-info { font-size: 0.65rem !important; letter-spacing: -0.3px; }
    .footer-menu-link { font-size: 0.75rem !important; padding-left: 0.3rem !important; padding-right: 0.3rem !important; letter-spacing: -0.5px; }
    .footer-logo { max-width: 120px !important; }
}
/* 모바일 하단 탭 내비바 영역이 푸터 내용을 가리지 않도록 추가 여백 처리 */
@media (max-width: 991.98px) {
    .footer-container { padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important; }
}

/* 모바일에서 상단 로고바 영역(#indexbar) 및 메뉴바(#responsiveMenuBar) 여백 고정 축소 */
@media (max-width: 991.98px) {
    #indexbar {
        margin-bottom: 4px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    #indexbar .search_input {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    #responsiveMenuBar {
        padding-bottom: 0px !important; /* 기존 pb-3(16px) 여백 최소화 */
    }
    
    /* 상단 유틸리티 메뉴 모바일 정렬 및 가로 스와이프(스크롤) 지원 */
    .top-util-menu-mobile-scroll {
        display: flex !important;
        justify-content: center !important; /* 화면보다 좁을 때는 가운데 정렬 */
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        scrollbar-width: none; /* Firefox 스크롤바 숨김 */
        -ms-overflow-style: none; /* IE/Edge 스크롤바 숨김 */
    }
    .top-util-menu-mobile-scroll::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera 스크롤바 숨김 */
    }
    .top-util-menu-inner {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        margin: 0 auto !important; /* 화면 크기에 맞게 자동 정렬 (화면 넓으면 가운데, 넘치면 왼쪽 정렬로 전환) */
        padding: 0 10px;
    }
    .top-util-menu-mobile-scroll .top-util-link,
    .top-util-menu-mobile-scroll .top-util-divider,
    .top-util-menu-mobile-scroll .top-util-divider-dot {
        flex-shrink: 0 !important; /* 텍스트 찌그러짐 및 자동 줄바꿈 방지 */
    }
}

/* 우측 퀵바 로딩 시 오른쪽에서 왼쪽으로 튀어 나오는 슬라이딩 애니메이션 */
@keyframes quickMenuSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* 우측 플로팅 퀵 메뉴 세로 본체 영역 */
.quick-menu-bar {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(222, 226, 230, 0.6);
    border-radius: 35px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    z-index: 1050;
    transition: all 0.3s ease;
    animation: quickMenuSlideIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 퀵 메뉴 내의 각 버튼 항목 스타일 */
.quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    color: #888e99; /* 모던 프리미엄 슬레이트 그레이 컬러 기본값 */
    margin-bottom: 22px;
    position: relative;
    transition: all 0.2s ease-in-out;
}
.quick-item:hover { color: #212529; } /* 호버 시 텍스트 흑색 활성화 */
.quick-item:last-child { margin-bottom: 0; }

/* 퀵바 각 버튼 아이콘 박스 래퍼 */
.quick-item .icon-box { 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 6px;
    transition: transform 0.2s ease;
}
.quick-item i { font-size: 1.15rem; margin-bottom: 0; }

/* 버튼 밑 서브라벨 텍스트 스타일 */
.quick-text { 
    font-size: 0.65rem; 
    font-weight: 500; 
    letter-spacing: -0.3px; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

/* 마우스 호버 시 젤리 푸딩처럼 찌그러졌다가 펴지면서 1.15배 확대되는 애니메이션 */
@keyframes jellyElastic {
    0% { transform: scale(1, 1); }
    35% { transform: scale(1.24, 0.94); } /* 좌우로 살짝 퍼지며 눌림 */
    60% { transform: scale(1.04, 1.22); } /* 위아래 탄력 복원 */
    80% { transform: scale(1.17, 1.13); }
    100% { transform: scale(1.15, 1.15); } /* 최종 1.15배 커진 상태 고정 */
}
.quick-item:hover .icon-box {
    animation: jellyElastic 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* ==========================================================================
   우측 퀵메뉴 각 아이콘별 마우스 호버 컬러 개별 연동 정의
   ========================================================================== */

/* 네이버 블로그 N 아이콘 기본 크기 및 굵은 테두리 */
.quick-item .quick-blog-box {
    width: 20px;
    height: 20px;
    border: 2.0px solid #888e99;
    border-radius: 4px;
    font-family: 'Malgun Gothic', sans-serif;
    font-size: 0.7rem;
    line-height: 1;
    padding-bottom: 1.2px;
    font-weight: 900;
    color: #888e99;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.quick-item:hover .quick-blog-box {
    border-color: #2db400 !important;
    color: #2db400 !important;
}

/* 인스타그램 */
.quick-item .quick-insta-icon {
    color: #888e99;
    transition: color 0.2s ease;
}
.quick-item:hover .quick-insta-icon {
    color: #bc1888 !important;
}

/* 장바구니 */
.quick-item .quick-cart-icon {
    color: #888e99;
    transition: color 0.2s ease;
}
.quick-item:hover .quick-cart-icon {
    color: #0d6efd !important;
}

/* 찜하기 하트 */
.quick-item .quick-wish-icon {
    color: #888e99;
    transition: color 0.2s ease;
}
.quick-item:hover .quick-wish-icon {
    color: #e63946 !important;
}

/* 최근 본 상품 시계 */
.quick-item .quick-recent-icon {
    color: #888e99;
    transition: color 0.2s ease;
}
.quick-item:hover .quick-recent-icon {
    color: #495057 !important;
}

/* 공유하기 */
.quick-item .quick-share-icon {
    color: #888e99;
    transition: color 0.2s ease;
}
.quick-item:hover .quick-share-icon {
    color: #6f42c1 !important;
}

/* ==========================================================================
   스크롤 상단 이동 (TOP) 플로팅 원형 단추 스타일
   ========================================================================== */
.scroll-top-btn {
    position: fixed;
    right: 29px; /* 플로팅바 중심과 완벽한 정렬을 맞춘 오프셋 */
    bottom: 20px;
    width: 46px;
    height: 46px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(222, 226, 230, 0.6);
    color: #888e99;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1040;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
}
.scroll-top-btn:hover { 
    background-color: #ffffff; 
    color: #212529; 
    transform: translateY(-3px) scale(1.05); 
    box-shadow: 0 6px 16px rgba(0,0,0,0.08); 
}
.scroll-top-btn.show { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
}
.scroll-top-btn i { font-size: 1.2rem; font-weight: bold; }

/* 모바일 전용 퀵바 숨김 및 스크롤 탑 버튼 하단 여백 보정 (1200px 미만 기기 대응) */
@media (max-width: 1199.98px) {
    .quick-menu-bar { display: none !important; }
    .scroll-top-btn { right: 15px; bottom: calc(65px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   상단 SNS 메뉴용 기본 브랜드 컬러 상시 활성화 스타일
   ========================================================================== */

/* 인스타그램 */
.menu-sns-insta {
    color: #bc1888; /* 인스타 브랜드 컬러 */
    opacity: 0.95;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-hover:hover .menu-sns-insta {
    opacity: 1;
}

/* 네이버 블로그 */
.menu-sns-naver {
    width: 15px; /* 네이버 아이콘 박스 가로 크기 */
    height: 15px; /* 네이버 아이콘 박스 세로 크기 */
    border: 1.95px solid #2db400; /* 네이버 브랜드 테두리 컬러 */
    border-radius: 3px;
    font-family: 'Malgun Gothic', sans-serif;
    font-size: 0.58rem;
    line-height: 1;
    padding-bottom: 0.6px; /* N 글자 미세 수직 정렬 정밀 조정 */
    font-weight: 900;
    color: #2db400; /* 네이버 브랜드 텍스트 컬러 */
    opacity: 0.95;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ==========================================================================
   데스크톱 사이드바 접기/열기 전역 레이아웃 및 알약 버튼 스타일
   ========================================================================== */
@media (min-width: 1200px) {
    /* 레이아웃 전환을 위한 트랜지션 정의 */
    body.sidebar-collapsible-active .container-fluid > .row > .col-xl-2.d-none.d-xl-block {
        transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, max-width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.25s ease;
        opacity: 1;
        overflow: visible; /* absolute 핀 버튼 및 폴더 탭 튀어나옴 보장 */
        position: relative;
    }
    body.sidebar-collapsible-active .container-fluid > .row > .col-xl-9.col-12,
    body.sidebar-collapsible-active .container-fluid > .row > .col-xl-10.col-12,
    body.sidebar-collapsible-active .container-fluid > .row > .col-xl-8.col-12 {
        transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), max-width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), flex 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    /* 닫힘 상태 (1:10:1 그리드 - 사이드바 1칸(col-xl-1) + 본문 10칸(col-xl-10)) */
    body.sidebar-collapsible-active.sidebar-closed .container-fluid > .row > .col-xl-2.d-none.d-xl-block {
        flex: 0 0 auto !important;
        width: 8.33333333% !important; /* col-xl-1 */
        max-width: 8.33333333% !important;
        padding: 0 !important;
        background-color: transparent !important; /* 투명하게 변경 */
        border-right: none !important;
        cursor: pointer;
    }
    body.sidebar-collapsible-active.sidebar-closed .container-fluid > .row > .col-xl-2.d-none.d-xl-block #sidemenu-iframe {
        display: none !important;
    }
    body.sidebar-collapsible-active.sidebar-closed .container-fluid > .row > .col-xl-9.col-12,
    body.sidebar-collapsible-active.sidebar-closed .container-fluid > .row > .col-xl-10.col-12,
    body.sidebar-collapsible-active.sidebar-closed .container-fluid > .row > .col-xl-8.col-12 {
        flex: 0 0 auto !important;
        width: 83.33333333% !important; /* col-xl-10 */
        max-width: 83.33333333% !important;
        margin-left: 0 !important;
    }
    
    /* 열림 상태 (2:9:1 그리드 - 사이드바 2칸(col-xl-2) + 본문 9칸(col-xl-9)) */
    body.sidebar-collapsible-active.sidebar-opened .container-fluid > .row > .col-xl-2.d-none.d-xl-block {
        flex: 0 0 auto !important;
        width: 16.66666667% !important; /* col-xl-2 */
        max-width: 16.66666667% !important;
        background-color: transparent !important;
        border-right: none !important;
        cursor: default !important;
    }
    body.sidebar-collapsible-active.sidebar-opened .container-fluid > .row > .col-xl-9.col-12,
    body.sidebar-collapsible-active.sidebar-opened .container-fluid > .row > .col-xl-10.col-12 {
        flex: 0 0 auto !important;
        width: 75% !important; /* col-xl-9 */
        max-width: 75% !important;
        margin-left: 0 !important;
    }
    body.sidebar-collapsible-active.sidebar-opened .container-fluid > .row > .col-xl-8.col-12 {
        flex: 0 0 auto !important;
        width: 66.66666667% !important; /* col-xl-8 */
        max-width: 66.66666667% !important;
        margin-left: 0 !important;
    }
}

/* 좌측 벽면에 붙는 검정색 탭 버튼 (닫힘 상태 전용, 알약 반쪽 모양) */
.sidebar-toggle-btn {
    position: absolute; /* fixed에서 absolute로 변경하여 메뉴바에 고정 */
    left: 0;
    top: 36px;
    transform: translateY(-50%); /* 하단 라인 세로 중앙 정렬 */
    z-index: 1005; /* layoutRow 위로 띄움 */
    background-color: #212529;
    color: #ffffff;
    border: 1px solid #212529;
    border-left: none;
    border-radius: 0 25px 25px 0; /* 알약 반쪽 모양 */
    padding: 8px 16px 8px 12px; /* 메뉴바 높이(36px)에 맞춰 콤팩트하게 보정 */
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    display: none; /* 1200px 미만 빈틈없이 숨김 */
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    transition: background-color 0.2s ease, padding-right 0.2s ease;
}
@media (min-width: 1200px) {
    /* 닫혀있을 때만 노출 */
    body.sidebar-collapsible-active.sidebar-closed .sidebar-toggle-btn {
        display: flex;
    }
    /* 열려있을 때는 완전히 숨김 */
    body.sidebar-collapsible-active.sidebar-opened .sidebar-toggle-btn {
        display: none !important;
    }
}
.sidebar-toggle-btn:hover {
    background-color: #343a40;
    border-color: #343a40;
    padding-right: 28px; /* 오른쪽으로 늘어나는 연장 효과 */
}

/* 좌측 벽면에 붙는 닫기 버튼 (열림 상태 전용, 알약 반쪽 모양, 우측 퀵바 스타일 연동) */
.sidebar-close-btn {
    position: absolute; /* fixed에서 absolute로 변경하여 메뉴바에 고정 */
    left: 0;
    top: 36px;
    transform: translateY(-50%); /* 하단 라인 세로 중앙 정렬 */
    z-index: 1005;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #888e99;
    border: 1px solid rgba(222, 226, 230, 0.8);
    border-left: none;
    border-radius: 0 25px 25px 0; /* 알약 반쪽 모양 */
    padding: 8px 16px 8px 12px; /* 메뉴바 높이(36px)에 맞춰 콤팩트하게 보정 */
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: none; /* 1200px 미만 빈틈없이 숨김 */
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    transition: all 0.2s ease, padding-right 0.2s ease;
}
@media (min-width: 1200px) {
    /* 열려있을 때만 노출 */
    body.sidebar-collapsible-active.sidebar-opened .sidebar-close-btn {
        display: flex;
    }
    /* 닫혀있을 때는 완전히 숨김 */
    body.sidebar-collapsible-active.sidebar-closed .sidebar-close-btn {
        display: none !important;
    }
}
.sidebar-close-btn:hover {
    background-color: #ffffff;
    color: #212529;
    border-color: rgba(200, 200, 200, 0.9);
    padding-right: 28px; /* 오른쪽으로 늘어나는 연장 효과 */
}
.menu-hover:hover .menu-sns-naver {
    opacity: 1;
}

/* ==========================================================================
   글로벌 공용 알림/확인 모달 추가 커스텀 스타일
   ========================================================================== */
#globalConfirmModal .modal-content {
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
}
#globalConfirmModal .modal-header {
    background-color: #f8f9fa !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
#globalConfirmModal .modal-body {
    color: #495057 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}
#globalConfirmModal .btn-close {
    padding: 1rem !important;
}
#globalConfirmModal .btn {
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 0.4rem 1.2rem !important;
}