/* [추가] 모바일/태블릿에서만 상단 헤더 고정 */
    @media (max-width: 991.98px) { /* Bootstrap lg breakpoint 미만 */
        #sticky-header {
            position: sticky;
            top: 0;
            z-index: 1030;
            background-color: white;
        }
    }


    /* [추가] 브랜드/카테고리 목록의 '전체보기' 링크 스타일 */
    a#sub1, a#sub2 {
        text-decoration: none;
    }
    a#sub1 {
        color: #656565;
    }
    a#sub1:hover {
        color: #ad1f23;
    }
    a#sub2 {
        color: #ad1f23;
        font-weight: bold;
    }

    .img-shadow {
        transition: box-shadow 0.3s ease; /* 부드러운 전환 효과 */
    }

    .img-shadow:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 섀도우 효과 */
    }

    /* 장바구니 버튼 호버 시 아이콘 색상 변경 */
    .btn-outline-secondary:hover .material-icons {
        color: white !important;
    }

    /* [추가] 장바구니 관련 알약 버튼 스타일 */
    .btn-cart-action {
        height: 32px !important;
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
        color: #495057 !important;
        border-radius: 50rem !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        transition: all 0.2s ease-in-out !important;
        display: inline-flex; /* display: none 인라인 속성이 적용될 수 있도록 !important 제거 */
        align-items: center !important;
        justify-content: center !important;
    }
    .btn-cart-action:active:not(:disabled) {
        transform: scale(0.95);
    }
    /* PC: 카드 hover 시 담기/옵션 버튼 dark (평소 outline — 그리드 부담 최소, 이미지 확대와 짝) */
    @media (hover: hover) {
        #productListContainer .card:hover .btn-cart-action:not(:disabled) {
            background-color: #212529 !important;
            border-color: #212529 !important;
            color: #ffffff !important;
        }
        #productListContainer .card:hover .btn-cart-action:not(:disabled) i {
            color: #ffffff !important;
        }
        #productListContainer .card:hover .btn-cart-action:not(:disabled):hover {
            background-color: #495057 !important;
            border-color: #495057 !important;
            color: #ffffff !important;
        }
        #productListContainer .card:hover .btn-cart-action:not(:disabled):hover i {
            color: #ffffff !important;
        }
        #productListContainer .btn-cart-action:not(:disabled):hover {
            background-color: #f8f9fa !important;
            border-color: #adb5bd !important;
            color: #343a40 !important;
        }
    }
    
    /* 찜하기, 수정, 관리정보 공통 원형 버튼 스타일 */
    .btn-wishlist-inline,
    .btn-edit-action,
    .btn-info-action {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
        color: #495057 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        transition: all 0.2s ease-in-out !important;
        cursor: pointer !important;
    }
    .btn-wishlist-inline:hover,
    .btn-edit-action:hover,
    .btn-info-action:hover {
        background-color: #212529 !important;
        border-color: #212529 !important;
        color: #ffffff !important;
    }
    .btn-wishlist-inline:hover i,
    .btn-edit-action:hover i,
    .btn-info-action:hover i {
        color: #ffffff !important;
    }
    .btn-wishlist-inline i.text-danger {
        color: #dc3545 !important;
    }
    .btn-wishlist-inline:hover i.text-danger {
        color: #ffffff !important;
    }
    .btn-wishlist-inline:active,
    .btn-edit-action:active,
    .btn-info-action:active {
        transform: scale(0.92);
    }

    /* 원형 버튼 내부 아이콘 완벽한 중앙 정렬을 위한 스타일 */
    .btn-wishlist-inline i,
    .btn-edit-action i,
    .btn-info-action i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 하트 아이콘 폰트 바운딩 박스 정밀 2px 하단 보정 */
    .btn-wishlist-inline i {
        transform: translateY(2px) !important;
    }

    /* 관리자 전용 액션 버튼 (수정, 관리정보) 호버 시 노출 효과 */
    .admin-action-btn {
        width: 0 !important;
        margin-left: -0.25rem !important; /* d-flex gap-1 취소 처리 */
        opacity: 0 !important;
        pointer-events: none !important;
        border-width: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.25s ease, 
                    margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    border-width 0.25s ease !important;
    }
    
    /* 카드가 호버되었을 때 관리자 버튼 서서히 노출 및 확장 */
    .card:hover .admin-action-btn {
        width: 32px !important;
        margin-left: 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        border-width: 1px !important;
    }

    /* 모바일/터치 기기에서는 호버가 없으므로 항상 보이도록 처리 */
    @media (hover: none) {
        .admin-action-btn {
            width: 32px !important;
            margin-left: 0 !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            border-width: 1px !important;
        }
    }

    /* Bootstrap 카드 기본 테두리 제거 */
    .card {
        border: none;
    }

    /* 관리자 정보 테이블 배경 및 테두리 조정 */
    .card-footer {
        background-color: white;
    }
    /* 관리자 정보 테이블에만 상단 테두리 추가 */
    .card-footer.admin-info {
        border-top: 1px solid #dee2e6;
    }

    /* 관리자 정보 테이블 항목명 너비 자동 조절 */
    .admin-info .table td.label {
        width: 1%; /* 너비를 내용에 맞게 최소화 */
        white-space: nowrap; /* 줄바꿈 방지 */
    }

    /* 관리자 정보 테이블 내용이 길어질 경우 자동 줄바꿈 */
    .admin-info .table td {
        word-break: break-all;
    }

    /* 관리자 정보 테이블 폰트 변경 */
    .admin-info .table {
        font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    }

    /* 세트 상품 구성품 목록 스타일 */
    .set-item-list {
        display: none; /* PC/모바일 공통 기본 숨김 */
        font-size: 0.72rem; /* 기존 0.85rem에서 글자 크기 축소 */
        line-height: 1.25;
        color: #888;
        margin-top: -6px; /* 타이틀과의 넓은 여백을 좁히기 위해 당겨 올림 */
        margin-bottom: 8px;
        letter-spacing: -0.3px;
    }
    .set-item-list.show {
        display: block !important;
    }
    .is-set-title {
        cursor: pointer;
    }
    .p-code-badge {
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.68rem;
        color: #555;
        background-color: #f1f3f5;
        padding: 1px 5px;
        border-radius: 3px;
        font-weight: 600;
        letter-spacing: 0.2px;
        display: inline-block;
    }
    .set-toggle-icon {
        display: inline-block;
        transition: transform 0.2s ease-in-out;
        font-size: 0.72rem;
        color: #888;
        vertical-align: middle;
    }
    .is-set-title.expanded .set-toggle-icon {
        transform: rotate(180deg);
        color: #000 !important; /* 니오 테마 블랙 */
        font-weight: bold;
    }
    .set-item-list:empty {
        display: none !important; /* 세트가 아닌 일반 상품일 때 여백 공간 제거 */
    }
    .set-item-list div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; /* 긴 구성품명 말줄임 처리 */
        padding-top: 1px;
    }
    .set-item-list a {
        color: #888 !important;
        text-decoration: none !important;
    }
    .set-item-list a:hover {
        text-decoration: underline !important;
    }

    /* 이미지 컨테이너 스타일 추가 */
    .img-container {
        width: 100%;
        aspect-ratio: 1 / 1; /* 고정 높이 대신 유동적인 1:1 정비율 적용 (상하 여백 축소) */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden; /* 이미지가 컨테이너를 벗어나지 않도록 */
        cursor: pointer;
    }

    /* 상세 메인 이미지(목록 슬라이더): content.jsp와 동일 UX, 썸네일 없음 */
    .list-img-swipe-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .list-img-swipe-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0;
        width: 100%;
        height: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        align-items: center;
    }
    .list-img-swipe-container::-webkit-scrollbar {
        display: none;
    }
    .list-img-swipe-container img {
        scroll-snap-align: center;
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: scale-down;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    .list-slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        font-size: 1.35rem !important;
        z-index: 15;
        cursor: pointer;
        padding: 6px;
        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) {
        .list-img-swipe-wrapper:hover .list-slider-arrow {
            opacity: 0.75 !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }
        .list-img-swipe-wrapper:hover .list-slider-arrow:hover {
            opacity: 1 !important;
            transform: translateY(-50%) scale(1.08) !important;
        }
    }
    .list-slider-arrow.prev-arrow {
        left: 4px;
    }
    .list-slider-arrow.next-arrow {
        right: 4px;
    }

    /* 슬라이더 하단 위치 표시 도트 — 마우스 hover 시에만 노출 */
    .list-swipe-indicators {
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        z-index: 12;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    .list-swipe-indicator-dot {
        width: 6px;
        height: 6px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.55);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        pointer-events: none;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .list-swipe-indicator-dot.active {
        width: 18px;
        border-radius: 6px;
        background-color: rgba(85, 85, 85, 0.85);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    }
    @media (hover: hover) {
        .list-img-swipe-wrapper:hover .list-swipe-indicators {
            opacity: 1;
            visibility: visible;
        }
        .list-img-swipe-wrapper:hover .list-swipe-indicator-dot {
            pointer-events: auto;
        }
    }
    
    /* 상품 리스트 호버 이미지: 두 장 겹쳐 크로스페이드 (src 교체 없음 → 흰색 번쩍임 방지) */
    .list-img-hover-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .list-img-hover-wrap .list-img-base,
    .list-img-hover-wrap .list-img-hover-layer img {
        object-fit: scale-down;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    .list-img-hover-wrap .list-img-base {
        position: relative;
        z-index: 1;
        opacity: 1;
        transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .list-img-hover-wrap .list-img-hover-layer {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .list-img-hover-wrap.is-hover-active .list-img-hover-layer {
        opacity: 1;
    }
    .list-img-hover-wrap.is-hover-active .list-img-base {
        opacity: 0;
    }
    .img-container > a > img:not(.list-img-base):not(.list-img-alt),
    .img-container img.rounded:not(.list-img-base):not(.list-img-alt) {
        transition: opacity 0.25s ease-in-out;
    }

    /* PC: 카드 본문/버튼 hover 시에만 이미지 확대 (이미지 영역 hover 시 교차만, 확대 없음) */
    @media (hover: hover) {
        #productListContainer .card .img-container {
            overflow: hidden;
        }
        #productListContainer .card .list-img-hover-wrap,
        #productListContainer .card .list-img-swipe-wrapper,
        #productListContainer .card .img-container > img.rounded:not(.list-img-base):not(.list-img-alt) {
            transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
            transform: scale(1);
            transform-origin: center center;
        }
        #productListContainer .card:hover .img-container:not(:hover) .list-img-hover-wrap,
        #productListContainer .card:hover .img-container:not(:hover) .list-img-swipe-wrapper,
        #productListContainer .card:hover .img-container:not(:hover) > img.rounded:not(.list-img-base):not(.list-img-alt) {
            transform: scale(1.04);
        }
    }

    /* PC 화면에서 상품 카드 좌우 여백 추가 */
    @media (min-width: 1200px) { /* 1200px 이상일 때만 넓은 여백 적용 */
        .custom-gutter-x > .col {
            padding-left: 1rem; /* 상품 카드 좌우 여백 줄이기 */
            padding-right: 1rem; /* 상품 카드 좌우 여백 줄이기 */
        }
    }

    /* [추가] 화면 해상도에 맞춰 순차적으로 한 줄당 개수 감소 (5열 -> 1500px 미만 4열 -> 900px 미만 3열 -> 768px 미만 2열) */
    @media (max-width: 1499.98px) and (min-width: 900px) {
        .custom-row-cols-1600 > *,
        .row-cols-xl-5 > *,
        .row-cols-xl-6 > * {
            flex: 0 0 auto !important;
            width: 25% !important; /* 1500px 이하 ~ 900px 이상: 4개씩 보기 */
        }
    }
    
    @media (max-width: 899.98px) and (min-width: 768px) {
        .custom-row-cols-1600 > *,
        .row-cols-xl-5 > *,
        .row-cols-xl-6 > *,
        .row-cols-lg-4 > *,
        .row-cols-md-3 > * {
            flex: 0 0 auto !important;
            width: 33.33333333% !important; /* 900px 미만(아이패드 등 태블릿): 3개씩 보기 */
        }
    }
    
    /* [추가] 모바일 리스트/그리드 전환 애니메이션 효과 (부드러운 변환) */
    .view-transition-ready > .col,
    .view-transition-ready .card,
    .view-transition-ready .img-container,
    .view-transition-ready .card-info-wrapper {
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* [추가] 모바일 가로형 리스트 뷰 스타일 */
    @media (max-width: 767.98px) {
        /* 가로형 뷰에서만 버튼 영역(footer)이 상품 정보(body)보다 아래에 오도록 순서 변경 */
        .mobile-list-view .card-info-wrapper {
            display: flex;
            flex-direction: column;
            height: auto !important;
            min-height: 0;
        }
        .mobile-list-view .card-info-wrapper .card-body {
            order: 1 !important;
        }
        .mobile-list-view .card-info-wrapper > .card-footer {
            order: 2 !important;
            padding-top: 5px !important;
            margin-top: auto !important;
        }
        .mobile-list-view > .col {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            overflow: visible !important;
        }
        /* 좌우 여백을 줄였으므로 카드에 하단 테두리를 주어 구분 */
        .mobile-list-view .card {
            flex-direction: row !important;
            flex-wrap: wrap !important;
            align-items: flex-start !important;
            height: auto !important;
            min-height: 0 !important;
            overflow: visible !important;
            border-bottom: 1px solid #e9ecef !important;
            border-radius: 0 !important;
            padding: 10px 0;
        }
        .mobile-list-view .img-container {
            width: 35% !important; /* 이미지 영역을 줄여 우측 정보 공간 확보 */
            flex-shrink: 0;
            align-self: flex-start;
            order: 1;
        }
        .mobile-list-view .card-info-wrapper {
            width: 65% !important;
            padding: 0 0 0 10px !important;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            order: 2;
            flex: 1 1 0;
            min-width: 0;
        }
        .mobile-list-view .card-body {
            padding-bottom: 0 !important;
        }
        /* 가로형에서 세트 리스트 공간 확보 */
        .mobile-list-view .set-item-list {
            margin-top: 2px;
            margin-bottom: 2px;
        }
        /* 관리자 정보 버튼 보이기 */
        .mobile-list-view .admin-info-btn,
        .mobile-list-view .btn-info-action {
            display: inline-flex !important;
        }
        /* 가로형: 관리자 정보 테이블 — 상품 행 하단 전체 너비로 표시 */
        .mobile-list-view .card > .admin-info {
            display: block !important;
            flex: 0 0 100% !important;
            width: 100% !important;
            max-width: 100% !important;
            order: 3 !important;
            margin-top: 8px !important;
            margin-bottom: 0 !important;
            padding: 0 0 4px !important;
            position: relative !important;
            z-index: 2 !important;
            overflow: visible !important;
        }
        .mobile-list-view .card > .admin-info .admin-info-container {
            margin-top: 0 !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        /* 가로형일 때 인라인 표가 보이면 관리정보 모달 버튼 숨김 (표 숨김 시 다시 표시) */
        .mobile-list-view:not(.list2-admin-info-off) .admin-info-btn {
            display: none !important;
        }
        .mobile-list-view.list2-admin-info-off .admin-info-btn {
            display: inline-flex !important;
        }
        /* 가로형일 때 버튼 그룹 스타일 조정 */
        .mobile-list-view .btn-cart-group {
            margin-top: 8px !important;
            width: 100%;
            flex-wrap: nowrap !important;
            gap: 5px !important;
            align-items: center !important;
        }
        /* 담기/옵션/품절 버튼만 가로로 균등 분할 */
        .mobile-list-view .btn-cart-group > .btn-cart-action {
            flex: 1 1 0% !important;
            min-width: 0 !important;
            height: 32px !important;
            min-height: 32px !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        /* 찜·수정·관리정보 원형 버튼은 고정 크기 유지 */
        .mobile-list-view .btn-cart-group > .btn-wishlist-inline,
        .mobile-list-view .btn-cart-group > .btn-edit-action,
        .mobile-list-view .btn-cart-group > .btn-info-action {
            flex: 0 0 32px !important;
            width: 32px !important;
            min-width: 32px !important;
            max-width: 32px !important;
            height: 32px !important;
            min-height: 32px !important;
            border-radius: 50% !important;
            padding: 0 !important;
            align-self: center !important;
        }
        .mobile-list-view .admin-action-btn {
            width: 32px !important;
            margin-left: 0 !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            border-width: 1px !important;
        }
    }
    
    /* 기본적으로 관리자 정보 버튼은 숨김 */
    .admin-info-btn,
    .btn-info-action {
        display: none !important;
    }

    /* 관리자 정보 표 숨김 시 — (i) 버튼으로 해당 상품만 인라인 펼치기 */
    #productListContainer.list2-admin-info-off .card > .admin-info {
        display: none !important;
    }
    #productListContainer.list2-admin-info-off .card > .admin-info.admin-info-inline-open {
        display: block !important;
    }
    #productListContainer.list2-admin-info-off .admin-info-btn {
        display: inline-flex !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        margin-left: 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        border-width: 1px !important;
        overflow: visible !important;
        border-radius: 50% !important;
        padding: 0 !important;
    }
    #productListContainer.list2-admin-info-off .admin-info-btn.admin-info-btn-active {
        border-color: #ad1f23 !important;
        color: #ad1f23 !important;
        background-color: #fff5f5 !important;
    }
    #productListContainer.list2-admin-info-off .admin-info-btn.admin-info-btn-active i {
        color: #ad1f23 !important;
    }
    #productListContainer.list2-admin-info-off .admin-info-btn.admin-info-btn-active:hover {
        background-color: #ad1f23 !important;
        border-color: #ad1f23 !important;
        color: #ffffff !important;
    }
    #productListContainer.list2-admin-info-off .admin-info-btn.admin-info-btn-active:hover i {
        color: #ffffff !important;
    }

    /* [수정] 관리자 정보 테이블 모던 UI 스타일 - 테두리 박스 및 자동 줄바꿈 적용 (상시 노출) */
    .admin-info-container {
        background-color: #ffffff !important; /* 카드 배경과 어우러지는 흰색 배경 */
        border: 1px solid #ced4da !important; /* 선명하고 정돈된 테두리 */
        border-radius: 8px !important; /* 둥근 모서리 */
        padding: 6px 6px !important; /* 상하 패딩 6px, 좌우 패딩 6px로 재조정 (8px과 4px의 중간값) */
        margin-top: 6px !important; /* 카드 본문(가격 영역)과의 밀착을 위해 6px로 미세 조율 */
        margin-bottom: 0 !important;
        position: relative !important; /* 설정 단추의 절대 배치를 위해 추가 */
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        box-shadow: none !important; /* 항상 노출되므로 플로팅 섀도우 제거 */
    }

    /* [수정] 표 레이아웃 강제 고정 (어중간한 크기에서 튀어나감 방지 핵심) */
    .admin-info-table {
        width: 100% !important;
        margin: 0 !important;
        font-size: 0.7rem !important; /* 기존 0.75rem에서 0.7rem으로 글자 크기 축소 */
        color: #333333 !important;
        border-collapse: collapse !important;
        table-layout: fixed !important; /* 셀 너비를 32% / 68%로 고정하여 내부 요소 범람 차단 */
    }
    .admin-info-table tr {
        border-bottom: 1px solid #eef0f2 !important; /* 깔끔한 구분선 */
    }
    .admin-info-table tr:last-child,
    .admin-info-table tr.border-0,
    .admin-info-table tr[id^="ware"] {
        border-bottom: none !important;
    }
    .admin-info-table td {
        padding: 4px 2px !important; /* 행간 여백을 3px에서 4px로 조율해 가독성 확보 */
        vertical-align: middle !important;
        border: none !important;
    }
    .admin-info-table td.admin-label {
        font-weight: 600 !important;
        color: #6c757d !important; /* 차분한 쥐색 라벨 */
        width: 52px !important; /* 고정 크기(52px)로 지정하여 우측 쏠림 및 여백 과다 현상 해결 */
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .admin-info-table td.admin-label.align-top {
        vertical-align: top !important;
        padding-top: 5px !important;
        line-height: 1.25 !important;
    }
    .admin-info-table td.admin-label.align-top > span {
        display: inline-block;
        line-height: 1.25;
    }
    /* 본사/기타 위치 — 항목명·배지 첫 줄 수직 시작점 맞춤 */
    .admin-info-table td.admin-value:has(> span[id$="_editok"]),
    .admin-info-table td.admin-value:has(> span[id$="A_editok"]) {
        vertical-align: top !important;
        padding-top: 5px !important;
        line-height: 1.25 !important;
    }
    .admin-info-table td.admin-value span[id$="_editok"],
    .admin-info-table td.admin-value span[id$="A_editok"] {
        vertical-align: top;
        line-height: 1.25;
    }
    .admin-info-table td.admin-label.clickable {
        cursor: pointer !important;
    }
    .admin-info-table td.admin-label.clickable:hover {
        color: #dc3545 !important;
        text-decoration: underline !important;
    }
    .admin-info-table td.admin-value {
        font-weight: 500 !important;
        text-align: left !important;
        padding-left: 6px !important;
        word-break: break-all !important; /* 긴 텍스트(영문/기호 포함) 자동 줄바꿈 강제 */
        overflow-wrap: anywhere !important; /* 브라우저 호환용 줄바꿈 */
    }
    .border-dashed {
        border-bottom: 1px dashed #ced4da !important;
    }

    /* [버그 수정] 진열상태 배지가 좁은 화면에서 가로로 튀어나가는 현상 해결 */
    .admin-info-table td.admin-value .badge {
        white-space: normal !important; /* 줄바꿈 허용 */
        word-break: break-all !important;
        text-align: left !important;
        display: inline-block !important;
        max-width: 100% !important;
        vertical-align: top !important;
    }

    /* [버그 수정] 박스단위 편집 인풋이 좁은 영역에서 튀어나가는 현상 해결 */
    .admin-info-table .input-group {
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    .admin-info-table .form-control {
        min-width: 0 !important; /* flex 안에서 인풋 크기 유연 축소 허용 */
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 0.7rem !important; /* 입력창 및 텍스트영역 글자 크기도 0.7rem으로 동기화 */
    }
    .admin-info-table .input-group-text {
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 0.7rem !important;
    }
    
    /* [수정] 관리자 설정 배지 버튼 스타일 (카드 우측 상단 배치 - 호버시 노출 및 팝업 애니메이션) */
    .admin-settings-badge {
        position: absolute !important;
        top: -8px !important;
        right: -8px !important;
        width: 28px !important; /* 크기를 살짝 줄여서(32px->28px) 불필요하게 튀는 느낌 방지 */
        height: 28px !important;
        border-radius: 50% !important;
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
        color: #6c757d !important; /* 아이콘 색상을 부드러운 회색으로 변경 */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
        z-index: 10 !important;
        cursor: pointer !important;
        
        /* 기본 상태: 투명하고 살짝 축소된 상태로 숨김 */
        opacity: 0 !important;
        transform: scale(0.8) !important;
        pointer-events: none !important;
        transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                    background-color 0.2s, 
                    color 0.2s !important;
    }
    
    /* 상품 카드에 마우스 호버 시 설정 배지가 자연스럽게 등장 */
    .card:hover .admin-settings-badge {
        opacity: 1 !important;
        transform: scale(1) !important;
        pointer-events: auto !important;
    }
    
    /* 설정 배지 자체 호버 시 색상 반전 및 회전 마이크로 애니메이션 */
    .admin-settings-badge:hover {
        background-color: #ad1f23 !important;
        border-color: #ad1f23 !important;
        color: #ffffff !important;
        transform: scale(1.08) rotate(45deg) !important; /* 약간 커지면서 톱니바퀴 회전 */
    }
    .admin-settings-badge i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.95rem !important; /* 크기 축소에 맞춰 아이콘 크기도 조율 */
    }
    
    /* 모바일/터치 기기 및 모바일 리스트뷰 환경 대응 */
    @media (hover: none) {
        .admin-settings-badge {
            opacity: 1 !important;
            transform: scale(1) !important;
            pointer-events: auto !important;
        }
    }
    
    .mobile-list-view .admin-settings-badge {
        opacity: 1 !important;
        transform: scale(1) !important;
        pointer-events: auto !important;
    }

    /* ========================================================================
       시리즈(옵션 선택) 모달 — 높이·스크롤 수동 조절 가이드 (#srsOptionModal)
       ------------------------------------------------------------------------
       · vh = 화면 높이 비율 (72vh = 화면 높이의 72%)
       · min(A, B) = A와 B 중 작은 값 적용 (큰 화면에서 px 상한 역할)
       · [중요] .srs-modal-scroll 에 큰 min-height(px)를 주면 flex 스크롤이 깨져
         옵션이 많을 때 하단 footer 뒤로 숨깁니다 → scroll 은 min-height: 0 유지
       · 첫 높이를 키우려면 .modal-content / .srs-modal-loading 의 min-height 만 조절
       · 옵션이 많으면 .srs-modal-scroll 내부에서 스크롤, footer 는 항상 하단 고정
       ======================================================================== */
    #srsOptionModal .modal-dialog {
        /* 모달 전체가 화면을 넘지 않도록 상·하 여백(각 1rem) 확보 */
        max-height: calc(100vh - 2rem);
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    #srsOptionModal .modal-content {
        /* [최대 높이] 옵션 많을 때 모달 전체 크기 — 더 크게: 92vh, 760px 등 */
        max-height: min(90vh, 720px);
        /* [최소 높이] 모달 첫 표시·로딩 시 기본 크기 — 더 크게: 80vh, 600px 등 */
        min-height: min(72vh, 520px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #srsOptionModal .modal-body {
        flex: 1 1 auto;
        /* flex 스크롤 허용 — px min-height 넣지 말 것 */
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    #srsOptionModal .srs-modal-loading {
        /* [로딩 중] "옵션을 불러오는 중..." — 첫 높이는 여기서 조절 */
        flex: 1 1 auto;
        min-height: min(58vh, 420px);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #srsOptionModal #srsModalForm {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
    #srsOptionModal .srs-modal-scroll {
        /* [옵션 스크롤 영역] min-height: 0 필수 — 옵션 많을 때 footer 가림 방지 */
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 1rem 1.25rem;
        scroll-padding-bottom: 1rem;
    }
    #srsOptionModal .srs-modal-scroll:has(.custom-dropdown-container.open) {
        overflow: visible !important;
    }
    #srsOptionModal .srs-modal-footer {
        flex-shrink: 0;
        position: relative;
        z-index: 12;
        padding: 0.75rem 1rem 1rem;
        background-color: #fff;
        border-top: 1px solid #dee2e6;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    }
    #srsOptionModal .custom-dropdown-container.open {
        position: relative;
        z-index: 20;
    }
    #srsOptionModal .custom-dropdown-menu {
        /* [드롭다운 목록] 펼침 최대 높이 — JS가 footer 위 공간에 맞춰 재조정 */
        z-index: 1065;
        max-height: min(380px, 45vh);
        overflow-y: auto;
    }
    #srsOptionModal .custom-dropdown-container.dropdown-open-up .custom-dropdown-menu {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: 4px;
    }
    #srsOptionModal #optionBoxContainer .custom-dropdown-btn {
        font-size: 13px;
    }

    /* 위치 배지 1줄 초과 시 펼치기/접기 토글 버튼 */
    span.location-collapsible {
        display: block !important;
        position: relative !important;
        line-height: 1.25;
    }
    .location-toggle-btn {
        position: absolute;
        right: 0;
        top: 2px;
        width: 16px;
        height: 16px;
        padding: 0;
        border: 1px solid #cbd5e1;
        background: #fff;
        border-radius: 4px;
        cursor: pointer;
        font-size: 9px;
        color: #64748b;
        z-index: 5;
        line-height: 1;
    }
    .location-toggle-btn:hover {
        background-color: #f8fafc;
        border-color: #94a3b8;
        color: #334155;
    }

    /* 상품위치 태그 입력창 스타일 */
    #tag_container_warehouse .tag-badge {
        font-size: 0.95rem;
        font-weight: 500;
        padding: 0.35rem 0.5rem;
        border-radius: 4px;
    }
    #tag_container_warehouse:focus-within {
        background-color: #f4f6f9 !important; /* 옅은 파스텔톤 회색 배경 */
        border-color: #86b7fe !important; /* 부트스트랩 포커스 테두리 */
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
        transition: all 0.2s ease-in-out;
    }

    /* 위치정보 변경 시 리스트 내 셀 하이라이트 애니메이션 */
    @keyframes highlight-pulse-glow {
        0% {
            background-color: rgba(243, 156, 18, 0.2) !important; /* 부드러운 호박색 투명 배경 */
            box-shadow: 0 0 8px rgba(243, 156, 18, 0.4) !important;
            border-radius: 4px;
        }
        100% {
            background-color: transparent !important;
            box-shadow: none !important;
        }
    }
    .highlight-fade {
        animation: highlight-pulse-glow 1.5s ease-out;
        display: inline-block;
        width: 100%;
    }

    /* 목록 보기 방식 설정 모달 — list-group 카드 글자만 소폭 확대 (하단 안내 p 제외) */
    #viewTypeModal .list-group-item strong {
        font-size: 1.05rem;
    }
    #viewTypeModal .list-group-item small.text-muted {
        font-size: 0.9375rem;
    }

    /* 모바일: 하단 네비(z-index 10450) 위에 모달 표시 + 내용 길 때 스크롤 */
    @media (max-width: 1199.98px) {
        #viewTypeModal .modal-dialog {
            max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem);
            margin: 0.5rem auto;
        }
        #viewTypeModal .modal-content {
            max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem);
            display: flex;
            flex-direction: column;
        }
        #viewTypeModal .modal-body {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            flex: 1 1 auto;
            min-height: 0;
        }
    }