.main-image-container { position: relative; }
.sold-out-overlay{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.55);
  display:flex;align-items:center;justify-content:center;
  z-index:5;
  border-radius: .5rem;
  text-align:center;
  pointer-events:none;
}
.sold-out-overlay span{
  color:#fff;font-weight:800;letter-spacing:.4rem;
  font-size:clamp(1.25rem, 6vw, 3rem);
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  line-height:1;
  display:block;
}
#buyNowBtn:disabled{
  opacity:.55; cursor:not-allowed;
}
/* New 텍스트 점멸 효과 (빠름) */
.blink-fast {
    animation: blinkfast 0.6s steps(1, end) infinite;
}
@keyframes blinkfast {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* 주문 상태 배지 간격 3px */
.badges-compact {
    gap: 3px !important;
}
/* 리뷰 수정 모달 - 이미지 삭제 버튼 스타일 */
#editReviewModal .image-preview {
    position: relative;
}
#editReviewModal .btn-remove-image {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #dc3545; /* red */
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}
#editReviewModal .btn-remove-image:hover {
    background-color: #c82333;
    transform: scale(1.1);
}
#editReviewModal .btn-remove-image:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* 제거: 리뷰 수정 버튼 커스텀 아웃라인 (기본 Primary 버튼 사용) */
/* 대륙의 맛 커스텀 스타일 */

/* 아이콘과 텍스트 간격 조정 */
.modal-header .modal-title i,
.modal-body .btn i,
.btn i.fas,
.btn i.fab,
.alert i,
.nav-link i,
.card-header i,
.badge i,
.list-unstyled i,
.dropdown-item i {
    margin-right: 0.5rem !important;
}

/* 관리자 페이지 스타일 */
.admin-container {
    min-height: 100vh;
    background: #f8f9fa;
}

/* 사이드바 상위 메뉴 활성화 스타일 */
.sidebar .nav-item.has-treeview > .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-radius: 5px;
}

.sidebar .nav-item.has-treeview > .nav-link.active:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* 사이드바 서브메뉴 활성화 스타일 */
.sidebar .nav-treeview .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-radius: 5px;
}

.sidebar .nav-treeview .nav-link.active:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* 갤러리 카드 호버 효과 */
.gallery-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* 게시판 스타일 */
.post-content {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

/* 댓글 스타일 */
.comment {
    background: #f8f9fa;
    padding: 1rem;
    margin: 0.5rem 0;
    border-radius: 5px;
    border-left: 3px solid #28a745;
}

/* 로그인/회원가입 폼 스타일 */
.auth-form {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* 네비게이션 활성 상태 */
.navbar-nav .nav-link.active {
    color: #007bff !important;
    font-weight: bold;
}

/* 백두산송이 상품 카드 */
.product-card {
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* 반응형 개선 */
@media (max-width: 768px) {
    .masthead h1 {
        font-size: 2.5rem;
    }
    
    .masthead h2 {
        font-size: 1.2rem;
    }
    
    .gallery-item {
        margin-bottom: 1rem;
    }
}

/* 로딩 애니메이션 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}



/* 배경 비디오 스타일 */
.video-background {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
    z-index: 1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 캐러셀 아이템 높이 설정 */
.carousel-item {
    height: 100vh;
    min-height: 500px;
}

/* 모바일에서도 비디오가 보이도록 */
@media (max-width: 768px) {
    .carousel-item {
        height: 60vh;
        min-height: 400px;
    }
    
    .background-video {
        min-width: 100%;
        min-height: 100%;
    }
}

/* 슬라이더 섹션 모바일에서 강제 숨김 */
.slider-section {
    display: none !important;
}

@media (min-width: 768px) {
    .slider-section {
        display: block !important;
    }
}

/* 모바일 전용 홍보영상 섹션 */
.mobile-video-section {
    position: relative;
    height: 310px; /* 네비게이션 메뉴 고려하여 높이 증가 */
    min-height: 310px;
    overflow: hidden;
    background-color: #ffffff; /* 흰색 배경 */
}

/* YouTube 배경 iframe 스타일 */
.youtube-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #ffffff; /* 강한 흰색 배경 */
}

.youtube-background iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 25px; /* 영상 위치 조정 */
    left: 0;
    pointer-events: none; /* 모바일에서 터치 이벤트 방지 */
    border: none;
    background: #ffffff; /* iframe 배경을 흰색으로 변경 */
}

/* 모바일에서 YouTube iframe이 제대로 작동하도록 */
@media (max-width: 767px) {
    .youtube-background iframe {
        width: 100%;
        height: 100%;
        max-width: 100vw;
        max-height: 100vh;
    }
}

.mobile-video-section .video-background {
    position: relative;
    width: 100%;
    height: 100%;
}

.mobile-video-section .background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
    z-index: 1;
}

.mobile-video-section .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.mobile-video-section .video-content {
    position: absolute;
    top: 135px; /* 텍스트 위치 조정 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 100%;
}

.mobile-video-section h1 {
    font-size: 2rem; /* 2.5rem에서 2rem으로 축소 */
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin-bottom: 0.5rem; /* 하단 여백 줄임 */
}

.mobile-video-section p {
    font-size: 1rem; /* 1.1rem에서 1rem으로 축소 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    margin-bottom: 0.5rem; /* 하단 여백 줄임 */
}

.mobile-video-section .btn {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* 커스텀 버튼 스타일 */
.custom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
    gap: 0.5rem;
}

.custom-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.custom-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.custom-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* 버튼 크기 변형 */
.custom-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

.custom-btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

/* 버튼 색상 변형 */
.custom-btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.custom-btn-primary:hover {
    color: #fff;
    background-color: #0056b3;
    border-color: #0056b3;
}

.custom-btn-secondary {
    color: #6c757d;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.custom-btn-secondary:hover {
    color: #495057;
    background-color: #e2e6ea;
    border-color: #cbd3da;
}

.custom-btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.custom-btn-success:hover {
    color: #fff;
    background-color: #1e7e34;
    border-color: #1e7e34;
}

.custom-btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.custom-btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #c82333;
}

.custom-btn-outline-primary {
    color: #007bff;
    background-color: transparent;
    border-color: #007bff;
}

.custom-btn-outline-primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.custom-btn-outline-danger {
    color: #dc3545;
    background-color: transparent;
    border-color: #dc3545;
}

.custom-btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.custom-btn-outline-warning {
    color: #ffc107;
    background-color: transparent;
    border-color: #ffc107;
}

.custom-btn-outline-warning:hover {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.custom-btn-outline-info {
    color: #17a2b8;
    background-color: transparent;
    border-color: #17a2b8;
}

.custom-btn-outline-info:hover {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.custom-btn-outline-secondary {
    color: #6c757d;
    background-color: transparent;
    border-color: #6c757d;
}

.custom-btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.custom-btn-outline-success {
    color: #28a745;
    background-color: transparent;
    border-color: #28a745;
}

.custom-btn-outline-success:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

/* 아이콘 스타일 */
.custom-btn i {
    font-size: 0.875rem;
}

/* 페이징 네비게이션 커스텀 스타일 */
.pagination .page-link {
    color: #007bff;
    border: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem;
    margin: 0 2px;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
}

.pagination .page-link:hover {
    color: #0056b3;
    background-color: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    font-weight: 500;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: transparent;
    border-color: #dee2e6;
    cursor: not-allowed;
}

.pagination .page-item.disabled .page-link:hover {
    transform: none;
    box-shadow: none;
}

/* 모바일 주소록 카드 스타일 */
.address-card {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}

.address-card:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
}

.address-card .card-body {
    padding: 1rem;
}

.address-card .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
}

.address-card .btn-group-vertical {
    gap: 0.25rem;
}

.address-card .btn-group-vertical .custom-btn {
    min-width: 60px;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.address-card .fw-medium {
    font-weight: 500;
    color: #495057;
}

.address-card small.text-muted {
    font-size: 0.75rem;
    color: #6c757d;
}

/* 모바일에서 페이징 버튼 크기 조정 */
@media (max-width: 767.98px) {
    .pagination .page-link {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
        margin: 0 1px;
    }
    
    .pagination .page-item.disabled .page-link {
        padding: 0.375rem 0.25rem;
    }
}

/* 로그아웃 메시지 모달 중앙 정렬 */
.logout-message-modal .modal-dialog {
    max-width: 400px;
}

.logout-message-modal .modal-content {
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: none;
}

.logout-message-modal .modal-body {
    text-align: center;
    padding: 2.5rem 2rem;
    font-size: 1.2rem;
    color: #28a745;
    font-weight: 500;
}

.logout-message-modal .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0.7;
}

.logout-message-modal .btn-close:hover {
    opacity: 1;
}

/* 모달 배경 투명도 조정 */
.logout-message-modal .modal-backdrop,
.login-message-modal .modal-backdrop,
.register-message-modal .modal-backdrop {
    opacity: 0.5;
}

/* 로그인 메시지 모달 스타일 */
.login-message-modal .modal-dialog {
    max-width: 400px;
}

.login-message-modal .modal-content {
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: none;
}

.login-message-modal .modal-body {
    text-align: center;
    padding: 2.5rem 2rem;
    font-size: 1.2rem;
    color: #28a745;
    font-weight: 500;
}

.login-message-modal .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0.7;
}

.login-message-modal .btn-close:hover {
    opacity: 1;
}

/* 회원가입 메시지 모달 스타일 */
.register-message-modal .modal-dialog {
    max-width: 400px;
}

.register-message-modal .modal-content {
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: none;
}

.register-message-modal .modal-body {
    text-align: center;
    padding: 2.5rem 2rem;
    font-size: 1.2rem;
    color: #28a745;
    font-weight: 500;
}

.register-message-modal .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0.7;
}

.register-message-modal .btn-close:hover {
    opacity: 1;
}

/* 로그인 필요 모달 스타일 */
.login-required-modal .modal-dialog {
    max-width: 450px;
}

.login-required-modal .modal-content {
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: none;
}

.login-required-modal .modal-body {
    padding: 2.5rem 2rem;
}

.login-required-modal .fas.fa-lock {
    color: #ffc107;
}

.login-required-modal .btn {
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
}

.login-required-modal .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.login-required-modal .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* 주문 성공 모달 스타일 */
.order-success-modal .modal-dialog {
    max-width: 500px;
}
.order-success-modal .modal-content {
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: none;
}
.order-success-modal .modal-body {
    padding: 2.5rem 2rem;
}
.order-success-modal .fas.fa-check-circle {
    color: #28a745;
}
.order-success-modal .btn {
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
}
.order-success-modal .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
.order-success-modal .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
.order-success-modal .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}
.order-success-modal .btn-secondary:hover {
    background-color: #545b62;
    border-color: #545b62;
}

/* 성공/오류 모달 스타일 */
.success-modal .modal-dialog,
.error-modal .modal-dialog {
    max-width: 450px;
}
.success-modal .modal-content,
.error-modal .modal-content {
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: none;
}
.success-modal .modal-body,
.error-modal .modal-body {
    padding: 2.5rem 2rem;
}
.success-modal .fas.fa-check-circle {
    color: #28a745;
}
.error-modal .fas.fa-exclamation-circle {
    color: #dc3545;
}
.success-modal .btn,
.error-modal .btn {
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
}
.success-modal .btn-success {
    background-color: #28a745;
    border-color: #28a745;
}
.success-modal .btn-success:hover {
    background-color: #1e7e34;
    border-color: #1e7e34;
}
.error-modal .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}
.error-modal .btn-danger:hover {
    background-color: #c82333;
    border-color: #c82333;
}

/* 상품 이미지 스타일 */
.product-image {
    transition: transform 0.3s ease;
    object-fit: cover;
}

.product-image:hover {
    transform: scale(1.05);
}

.main-product-image {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.thumbnail-navigation-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.thumbnail-item {
    width: 80px;
    height: 80px;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.thumbnail-item:hover {
    border-color: #007bff;
    transform: scale(1.1);
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.thumbnail-image.active {
    border-color: #007bff;
    opacity: 1;
}

.thumbnail-image:not(.active) {
    opacity: 0.7;
}

.image-zoom-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.main-image-container:hover .image-zoom-overlay {
    opacity: 1;
}

/* 상품 카드 이미지 */
.product-card .card-img-top {
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .card-img-top {
    transform: scale(1.05);
}

/* 리뷰 시스템 스타일 */
.review-reply {
    background-color: #f8f9fa;
    border-left: 4px solid #007bff;
    margin-left: 2rem;
}

.admin-reply-indicator {
    margin-bottom: 0.5rem;
}

.reply-content {
    color: #495057;
    font-style: italic;
}

.review-item {
    transition: all 0.3s ease;
}

.review-item:hover {
    background-color: #f8f9fa;
}

/* 리뷰 계층 구조 표시 */
.review-hierarchy {
    position: relative;
}

.review-hierarchy::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #007bff, #28a745);
}

/* 관리자 답글 스타일 */
.admin-reply {
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
    border: 1px solid #bbdefb;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.admin-reply .badge {
    font-size: 0.75rem;
}

/* 리뷰 통계 카드 */
.review-stats .col-md-3 {
    border-right: 1px solid #dee2e6;
}

.review-stats .col-md-3:last-child {
    border-right: none;
}

/* 별점 입력 스타일 */
.rating-input {
    display: flex;
    flex-direction: row-reverse;
    gap: 0.25rem;
}

.rating-input input[type="radio"] {
    display: none;
}

.rating-input label {
    font-size: 1.5rem;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s ease;
}

.rating-input label:hover,
.rating-input label:hover ~ label,
.rating-input input[type="radio"]:checked ~ label {
    color: #ffc107;
}

/* 리뷰 작성 모달 */
#reviewModal .modal-body {
    padding: 1.5rem;
}

#reviewModal .form-label {
    font-weight: 600;
    color: #495057;
}

/* 공유 모달 스타일 */
.share-options .btn {
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

.share-options .btn i {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

/* 상품 카드 링크 스타일 */
.product-link {
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.product-link:hover .card-title {
    color: #007bff !important;
}

.product-link:hover .price span {
    color: #28a745 !important;
}

/* 상품 카드 내부 텍스트 색상 유지 */
.product-link .card-title,
.product-link .price span {
    transition: color 0.3s ease;
}

/* 쇼핑몰 스타일 */
.product-card {
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.product-image {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.category-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}

.price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #dc3545;
}

.stock-info {
    font-size: 0.9rem;
    color: #6c757d;
}

.search-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 0;
    margin-top: 60px; /* 네비게이션 바 높이만큼 상단 여백 추가 */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 알림 메시지 스타일 */
.alert-custom {
    border-radius: 10px;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 300px;
    max-width: 500px;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 알림 메시지 닫기 버튼 스타일 */
.alert-custom .btn-close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10000;
}

/* 버튼 커스텀 스타일 */
.btn-custom {
    border-radius: 25px;
    padding: 10px 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* DataTables AdminLTE 스타일 통일 */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #fff;
  border: none;
  color: #333 !important;
  border-radius: 0.25rem;
  margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #007bff !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_filter input {
  border-radius: 0.25rem;
  border: 1px solid #ced4da;
  background: #f4f6f9;
}
.dataTables_wrapper .dataTables_length select {
  border-radius: 0.25rem;
  border: 1px solid #ced4da;
  background: #f4f6f9;
}
.table.dataTable {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.table.dataTable thead th {
  background: #f4f6f9;
  border-bottom: 1px solid #dee2e6;
}
.table.dataTable tbody td {
  border-bottom: 1px solid #f4f6f9;
}

.table-responsive {
  overflow-x: auto;
}

.reply-btn-right {
    float: right;
    margin-left: 8px;
}

.modal-dialog {
    display: block !important;
    min-width: 400px;
    min-height: 200px;
    max-width: 90vw;
    max-height: 90vh;
}

/* jQuery UI Resizable 핸들 커서 스타일 강제 적용 */
.ui-resizable-e { cursor: e-resize !important; }
.ui-resizable-s { cursor: s-resize !important; }
.ui-resizable-se { cursor: se-resize !important; }
.ui-resizable-w { cursor: w-resize !important; }
.ui-resizable-n { cursor: n-resize !important; }
.ui-resizable-ne { cursor: ne-resize !important; }
.ui-resizable-sw { cursor: sw-resize !important; }
.ui-resizable-nw { cursor: nw-resize !important; }

/* 모달 드래그 영역 커서 */
.ui-draggable-dragging {
    cursor: move !important;
}

/* 모달 헤더 드래그 가능 영역 */
.modal-header {
    cursor: move !important;
}

/* jQuery UI Dialog 스타일 (Bootstrap 모달 대신 사용) */
.ui-dialog {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    background: #fff;
}

.ui-dialog .ui-dialog-titlebar {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 15px 20px;
    font-weight: bold;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.ui-dialog .ui-dialog-content {
    padding: 20px;
    background: #fff;
}

.ui-dialog .ui-dialog-buttonpane {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 15px 20px;
    border-radius: 0 0 8px 8px;
}

.ui-dialog .ui-dialog-buttonset button {
    margin-left: 5px;
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}

.ui-dialog .ui-dialog-buttonset button.ui-button-primary {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.ui-dialog .ui-dialog-buttonset button.ui-button-secondary {
    background: #6c757d;
    color: white;
    border-color: #6c757d;
}

/* 정보 수정 버튼 크기 조정 */
#profileForm .btn-primary {
    height: 44px;
    font-size: 1.05rem;
    padding: 0 2rem;
    border-radius: 8px;
}

/* 주소 검색 버튼 높이 맞추기 */
#profileForm .row .col-md-3 .form-control,
#profileForm .row .col-md-9 button {
    height: 40px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1rem;
}
#profileForm .row .col-md-9 button {
    width: 100%;
    margin-left: 0;
    border-radius: 8px;
    box-shadow: none;
}

/* 입력창과 버튼이 한 줄에 자연스럽게 보이도록 */
#profileForm .row .col-md-3, #profileForm .row .col-md-9 {
    display: flex;
    align-items: center;
}

/* 앨범 관리 스타일 */
.album-item {
    position: relative;
    margin-bottom: 20px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.album-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.album-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.album-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.album-item:hover .album-actions {
    opacity: 1;
}

.album-actions .btn {
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 4px;
}

.album-description {
    padding: 15px;
    background: #fff;
    border-top: 1px solid #dee2e6;
    min-height: 60px;
    word-wrap: break-word;
    font-size: 14px;
    line-height: 1.4;
}

/* 업로드 영역 스타일 */
.upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background: #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-area:hover {
    border-color: #007bff;
    background: #e3f2fd;
}

.upload-area.dragover {
    border-color: #007bff;
    background: #e3f2fd;
    transform: scale(1.02);
}

/* 앨범 그리드 반응형 */
@media (max-width: 768px) {
    .album-item {
        margin-bottom: 15px;
    }
    
    .album-image {
        height: 150px;
    }
    
    .album-actions {
        opacity: 1;
        position: relative;
        top: auto;
        right: auto;
        justify-content: center;
        margin-top: 10px;
    }
}

/* DataTables 반응형 + 아이콘 강제 적용 */
td.control:before, th.control:before {
    content: '+' !important;
    display: inline-block !important;
    text-align: center !important;
    width: 1.5em !important;
    color: #007bff !important;
    font-size: 1.2em !important;
    background: #fff !important;
    border-radius: 50% !important;
    border: 1px solid #007bff !important;
    margin-right: 4px !important;
    font-weight: bold !important;
    font-family: inherit !important;
    box-shadow: none !important;
    background-image: none !important;
}
td.parent.control:before, th.parent.control:before {
    content: '-' !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    font-family: inherit !important;
}

/* card-body 좌우/아래 여백 보조 */
.card-body {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 24px !important;
} 

/* 패밀리 사이트 드롭다운(PC) 글씨 작고 얇게 */
.family-sites-dropdown .dropdown-item {
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: #333 !important;
    letter-spacing: 0 !important;
}

/* 패밀리 사이트 셀렉트(모바일) 글씨 작고 얇게 */
.family-sites-select-mobile {
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: #333 !important;
}

/* 검색 폼 요소들 통일 */
.search-section .form-control,
.search-section .form-select,
.search-section .search-btn {
    height: 47px !important;
    line-height: 1.5 !important;
    font-size: 1rem !important;
    padding: 0.375rem 0.75rem !important;
}

/* 검색 버튼 높이 맞춤 */
.search-btn {
    height: 47px !important;
    line-height: 1.5 !important;
    padding: 0.375rem 0.75rem !important;
}

/* 스크롤바 스타일 - 투명하게 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Firefox 스크롤바 스타일 */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* 상품 상세 페이지 스타일 */
.product-detail-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 뒤로가기 링크 스타일 */
.back-link {
    transition: all 0.3s ease;
    padding: 8px 16px;
    border-radius: 6px;
    background: rgba(108, 117, 125, 0.05);
    display: inline-block;
}

.back-link:hover {
    background: rgba(108, 117, 125, 0.1);
    transform: translateX(-3px);
}

.back-link span {
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.back-link:hover span {
    color: #495057 !important;
}

/* 텍스트 링크 스타일 */
.add-to-cart-link,
.buy-now-link,
.write-review-link {
    transition: all 0.3s ease;
    padding: 8px 16px;
    border-radius: 6px;
    background: rgba(0, 123, 255, 0.05);
}

.add-to-cart-link:hover,
.buy-now-link:hover,
.write-review-link:hover {
    background: rgba(0, 123, 255, 0.1);
    transform: translateY(-1px);
}

.add-to-cart-link span,
.buy-now-link span,
.write-review-link span {
    font-size: 1rem;
    transition: all 0.3s ease;
}

.add-to-cart-link:hover span,
.buy-now-link:hover span,
.write-review-link:hover span {
    transform: scale(1.05);
}

.product-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.price-large {
    font-size: 2rem;
    font-weight: bold;
}

.purchase-actions .btn {
    min-width: 140px;
    font-weight: 600;
}

.shipping-info {
    border-left: 4px solid #007bff;
}

/* 탭 스타일 */
.nav-tabs .nav-link {
    color: #6c757d;
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    padding: 12px 20px;
}

.nav-tabs .nav-link.active {
    color: #007bff;
    background: none;
    border-bottom: 2px solid #007bff;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: #007bff;
}

/* 후기 스타일 */
.review-stats {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.rating .text-warning {
    font-size: 1.2rem;
}

.review-item {
    transition: all 0.3s ease;
}

.review-item:hover {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin: -15px;
}

/* 관련 상품 스타일 */
.related-products .product-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.related-products .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 반응형 개선 */
@media (max-width: 768px) {
    .product-detail-image {
        max-height: 300px;
    }
    
    .price-large {
        font-size: 1.5rem;
    }
    
    .purchase-actions .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .nav-tabs .nav-link {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/* ===== 상품 상세 페이지 전용 CSS ===== */

/* 상품 갤러리 스타일 */
.product-gallery {
    position: relative;
}

.main-image-container {
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
}

.main-product-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-zoom-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 15px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.main-image-container:hover .image-zoom-overlay {
    opacity: 1;
}

.main-image-container:hover .main-product-image {
    transform: scale(1.05);
}

/* 썸네일 네비게이션 - 가로 배열 */
.thumbnail-navigation-vertical {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.thumbnail-item {
    width: 80px;
    height: 80px;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.thumbnail-item:hover {
    border-color: #007bff;
    transform: scale(1.05);
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.thumbnail-image.active {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

/* 상품 이미지 하단 정보 영역 */
.product-image-info {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-image-info .card {
    border: none;
    box-shadow: none;
}

.info-item {
    padding: 10px;
    transition: all 0.3s ease;
}

.info-item:hover {
    transform: translateY(-2px);
}

.info-icon {
    color: #007bff;
}

.info-label {
    font-size: 0.8rem;
    color: #6c757d;
}

.info-value {
    font-size: 1rem;
    color: #333;
}

/* 쿠팡 스타일 상품 정보 */
.product-info-sidebar {
    position: sticky;
    top: 100px;
}

.brand-category {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-summary {
    display: flex;
    align-items: center;
}

.rating-display {
    display: flex;
    align-items: center;
}

.delivery-benefits {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.benefit-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.benefit-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

/* 심플한 사이드바 스타일 */
.right-sidebar {
    margin-top: 30px;
}

.product-features,
.shipping-guide,
.customer-support {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.feature-list,
.guide-list,
.support-list {
    margin: 0;
    padding: 0;
}

.feature-item,
.guide-item,
.support-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.2s ease;
}

.feature-item:last-child,
.guide-item:last-child,
.support-item:last-child {
    border-bottom: none;
}

.feature-item:hover,
.guide-item:hover,
.support-item:hover {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
    margin-right: -8px;
}

/* 우측 사이드바 */
.right-sidebar {
    margin-top: 30px;
}

.recommended-products {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
}

.recommended-item {
    padding: 10px;
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.2s ease;
}

.recommended-item:hover {
    background-color: #f8f9fa;
}

.recommended-item:last-child {
    border-bottom: none;
}

.item-title {
    font-weight: 500;
    margin-bottom: 5px;
    line-height: 1.3;
}

.item-price {
    font-size: 0.9rem;
    margin-bottom: 3px;
}

.item-rating {
    font-size: 0.8rem;
}

.cart-summary {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.cart-total {
    background: #f8f9fa;
}

.total-info {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* 상품 정보 스타일 */
.product-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.price-section {
    padding: 20px 0;
}

.price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: #dc3545;
}

.original-price {
    font-size: 1.2rem;
    margin-top: 5px;
}

.stock-info {
    padding: 15px 0;
}

.stock-available, .stock-unavailable {
    font-size: 1.1rem;
}

/* 구매 옵션 스타일 */
.purchase-options {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.quantity-selector .input-group {
    max-width: 150px;
}

.quantity-selector .btn {
    width: 40px;
}

.quantity-selector input {
    text-align: center;
    font-weight: 600;
}

.purchase-actions .btn {
    padding: 12px 24px;
    font-size: 1.1rem;
    font-weight: 600;
}

/* 탭 스타일 */
.nav-tabs .nav-link {
    font-weight: 600;
    color: #6c757d;
    border: none;
    padding: 12px 20px;
}

.nav-tabs .nav-link.active {
    color: #007bff;
    background: none;
    border-bottom: 3px solid #007bff;
}

.nav-tabs .nav-link:hover {
    color: #007bff;
    border-bottom: 3px solid #007bff;
}

.tab-content {
    background: white;
    border-radius: 0 0 8px 8px;
}

/* 탭 내용 표시/숨김 - Bootstrap 충돌 해결 */
.tab-content > .tab-pane,
.tab-pane {
    display: none !important;
}

.tab-content > .tab-pane.active,
.tab-pane.active {
    display: block !important;
}

/* 후기 스타일 */
.review-stats {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.rating-input {
    display: flex;
    flex-direction: row-reverse;
    gap: 5px;
}

.rating-input input[type="radio"] {
    display: none;
}

.rating-input label {
    font-size: 2rem;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* 이미지 모달 스타일 */
#imageModal {
    z-index: 9999 !important;
}

#imageModal .modal-backdrop {
    z-index: 9998 !important;
    background-color: transparent !important;
}

#imageModal .modal-content {
    border: none;
    background: transparent;
    border-radius: 0;
}

#imageModal .modal-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

#imageModal .modal-full-image {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

#imageModal .modal-full-image:hover {
    transform: scale(1.02);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}

.rating-input input[type="radio"]:checked ~ label {
    color: #ffc107;
}

.rating-input label:hover,
.rating-input label:hover ~ label {
    color: #ffc107;
}

/* 카테고리 배지 스타일 */
.category-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.category-badge .badge {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}



/* 관련 상품 섹션 스타일 */
.related-products {
}

.section-title {
    color: #333;
    font-weight: 600;
    text-align: center;
}

.section-title i {
    color: #007bff;
}

/* 상품 카드 스타일 */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.product-image-container {
    position: relative;
    overflow: hidden;
}

.product-image {
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-card .card-body {
    padding: 15px;
}

.product-card .card-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.product-card .card-text {
    font-size: 16px;
    margin-bottom: 0;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.category-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.product-image {
    height: 200px;
    object-fit: cover;
}

/* 추가 이미지 갤러리 */
.additional-image-item {
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

.additional-image-item:hover {
    transform: scale(1.05);
}

.additional-image-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .product-title {
        font-size: 1.5rem;
    }
    
    .price-amount {
        font-size: 2rem;
    }
    
    .main-product-image {
        height: 300px;
    }
    
    .thumbnail-image {
        height: 60px;
    }
    
    .purchase-actions .btn {
        font-size: 1rem;
        padding: 10px 20px;
    }
    
    .product-image-info .row .col-4 {
        margin-bottom: 15px;
    }
}

/* Breadcrumb 섹션 스타일 */
.breadcrumb-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid #dee2e6;
}

/* Breadcrumb 네비게이션 스타일 */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.breadcrumb-item {
    font-size: 14px;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #6c757d;
    margin: 0 8px;
}

.breadcrumb-item a {
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: #007bff !important;
}

.breadcrumb-item.active {
    color: #495057;
    font-weight: 600;
}

/* 상품 정보 섹션 스타일 - 통일 */
.product-info-section,
.product-description-section {
    padding: 20px;
    margin-bottom: 20px;
}

.product-info-section h6,
.product-description-section h6 {
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.product-info-content {
    padding: 20px;
    background: transparent;
    border: none;
}

/* 상품 설명 스타일 */
.product-description {
    line-height: 1.6;
}

.product-description img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 10px 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.product-description p {
    margin-bottom: 1rem;
}

.product-description h1, .product-description h2, .product-description h3,
.product-description h4, .product-description h5, .product-description h6 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
}

/* 일반 탭 스타일 */
.product-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 0;
}

.product-tab-btn {
    background: none;
    border: none;
    padding: 15px 25px;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    position: relative;
}

.product-tab-btn:hover {
    color: #007bff;
    background-color: #f8f9fa;
}

.product-tab-btn.active {
    color: #007bff;
    border-bottom-color: #007bff;
    background-color: rgba(0, 123, 255, 0.1);
}

/* 모바일에서 탭메뉴 세로 배치 */
@media (max-width: 768px) {
    .product-tabs {
        flex-direction: column;  /* 세로 배치 */
        gap: 0.5rem;            /* 탭 간격 */
        border-bottom: none;     /* 하단 테두리 제거 */
    }
    
    .product-tab-btn {
        width: 100%;            /* 전체 너비 */
        text-align: center;     /* 텍스트 중앙 정렬 */
        padding: 12px 20px;     /* 패딩 조정 */
        border: 1px solid #dee2e6;  /* 테두리 추가 */
        border-radius: 6px;     /* 모서리 둥글게 */
        margin-bottom: 0;       /* 하단 마진 제거 */
        background-color: #f8f9fa;  /* 배경색 추가 */
    }
    
    .product-tab-btn:hover {
        background-color: #e9ecef;
        border-color: #007bff;
    }
    
    .product-tab-btn.active {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
        border-bottom-color: #007bff;
    }
    
        /* 모바일에서 후기 통계 2열 배치 */
    .review-stats .row {
        flex-direction: row;    /* 가로 배치 */
        flex-wrap: wrap;        /* 줄바꿈 허용 */
        gap: 0.5rem;            /* 간격 */
    }
    
    .review-stats .col-md-3 {
        width: calc(50% - 0.25rem);  /* 2열 배치 (간격 고려) */
        margin-bottom: 0.5rem;  /* 하단 간격 축소 */
        padding: 0.75rem;       /* 내부 여백 축소 */
        border: 1px solid #e9ecef;  /* 테두리 추가 */
        border-radius: 8px;     /* 모서리 둥글게 */
        background-color: #fff; /* 배경색 */
    }
    
    .review-stats .h3 {
        font-size: 1.5rem;      /* 숫자 크기 적당하게 */
        margin-bottom: 0.5rem;  /* 하단 간격 축소 */
    }
    
    .review-stats .small {
        font-size: 0.8rem;      /* 라벨 텍스트 크기 축소 */
        font-weight: 500;       /* 폰트 굵기 */
    }
}

/* 리뷰 관련 커스텀 버튼 스타일 */
.review-write-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background-color: #007bff;
    border: 1px solid #007bff;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.review-write-btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.review-write-btn:focus {
    background-color: #0056b3;
    border-color: #0056b3;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.review-disabled-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: not-allowed;
    opacity: 0.6;
}

.review-login-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    background-color: transparent;
    border: 1px solid #6c757d;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.review-login-btn:hover {
    background-color: #6c757d;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.review-login-btn:focus {
    background-color: #6c757d;
    color: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.25);
}

/* 상품 상세 페이지 액션 버튼 스타일 */
.product-cart-btn {
    display: inline-block;
    padding: 10px 36px;
    font-size: 15px;
    font-weight: 600;
    color: #6c757d;
    background-color: transparent;
    border: 1px solid #ced4da;
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    margin-right: 12px;
    min-width: 150px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.product-cart-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.product-cart-btn:hover::before {
    left: 100%;
}

.product-cart-btn:hover {
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #495057;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.product-cart-btn:focus {
    background-color: #f8f9fa;
    border-color: #007bff;
    color: #495057;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15), 0 6px 20px rgba(0, 0, 0, 0.1);
}

.product-buy-btn {
    display: inline-block;
    padding: 10px 36px;
    font-size: 15px;
    font-weight: 600;
    color: #495057;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    min-width: 150px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.product-buy-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

.product-buy-btn:hover::before {
    left: 100%;
}

.product-buy-btn:hover {
    background-color: #bee5eb;
    border-color: #a8d5b8;
    color: #212529;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.product-buy-btn:focus {
    background-color: #bee5eb;
    border-color: #a8d5b8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
}

.product-buy-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 액션 버튼 컨테이너 */
.action-buttons {
    margin-top: 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.css-tab-pane {
    display: none;
}

.css-tab-pane.active {
    display: block;
}

/* 탭 컨테이너 스타일 */
.css-tab-content {
    /* footer에 영향을 주지 않도록 격리 */
    font-style: normal;
    font-weight: normal;
}

/* footer 글자체 보호 */
footer {
    font-style: normal !important;
    font-weight: normal !important;
}

footer * {
    font-style: normal !important;
    font-weight: normal !important;
}

/* 우측 상품 정보 사이드바 스타일 */
.product-info-sidebar {
    padding: 20px 0;
}

.product-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.product-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    flex: 1;
    margin-right: 15px;
}

.product-specs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    padding: 8px 0;
    border-bottom: 1px solid #f8f9fa;
}

.product-actions .action-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-actions .action-circle:hover {
    background: #f8f9fa;
    border-color: #007bff;
    transform: scale(1.1);
}

.product-actions .action-circle i {
    font-size: 16px;
    color: #6c757d;
}

.product-actions .action-circle:hover i {
    color: #007bff;
}

.product-origin,
.product-price,
.product-rating,
.delivery-time,
.courier {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #f8f9fa;
}

.product-price {
    padding: 15px 0 !important;
    border-bottom: 2px solid #f8f9fa !important;
}

.price-amount {
    font-size: 28px;
    font-weight: 700;
    color: #dc3545;
    text-align: center;
    width: 100%;
}

.product-origin:last-child,
.product-rating:last-child,
.delivery-time:last-child,
.courier:last-child {
    border-bottom: none;
}

.rating-stars {
    font-size: 18px;
}

.review-count {
    display: flex;
    align-items: center;
    gap: 5px;
}

.product-features-section {
    margin-top: 10px;
    padding-top: 10px;
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.feature-row:first-child {
    justify-content: space-between;
}

.feature-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.feature-text {
    color: #495057;
    font-size: 14px;
}

/* 구매 섹션 스타일 */
.purchase-section {
    padding-top: 20px;
    border-top: 1px solid #f8f9fa;
}

.purchase-section .quantity-controls {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.purchase-section .action-buttons {
    display: flex;
    gap: 10px;
}

.purchase-section .action-buttons .btn {
    flex: 1;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.purchase-section .action-buttons .btn-outline-secondary {
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.purchase-section .action-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.quantity-controls {
    display: flex;
    align-items: center;
}

.quantity-controls .input-group {
    border-radius: 6px;
    overflow: hidden;
}

.quantity-controls .btn {
    border: 1px solid #dee2e6;
    padding: 8px 12px;
    font-weight: 600;
}

.quantity-controls .form-control {
    border-left: none;
    border-right: none;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
}

.action-buttons .btn {
    padding: 15px 20px;
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.action-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 예약금 및 판매 방식 정보 스타일 */
.deposit-info {
    border-left: 3px solid #007bff;
    background: rgba(0, 123, 255, 0.05) !important;
}

.sale-type-info {
    margin-top: 0.5rem;
}

.deposit-info small, .sale-type-info small {
    font-weight: 500;
}

/* 상품 카드에서 예약금 정보 스타일 */
.product-card .deposit-info {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.product-card .sale-type-info {
    margin-bottom: 0.5rem;
}

.product-card .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

/* 상품 상세 페이지에서 판매 방식 정보 스타일 */
.product-detail .sale-type-info {
    margin-bottom: 1rem;
}

.product-detail .sale-type-info .badge {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
}

/* ===== 상품 관리 폼 스타일 ===== */

/* Summernote 에디터 커스텀 스타일 */
.note-editor.note-frame {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.note-editor.note-frame .note-editing-area {
    background: #fff;
}

.note-editor.note-frame .note-status-output {
    height: auto;
    min-height: 300px;
}

.note-editor.note-frame .note-editable {
    padding: 1rem;
    font-size: 14px;
    line-height: 1.6;
}

.note-editor.note-frame .note-toolbar {
    background: #f8f9fa;
    border-bottom: 1px solid #ced4da;
    padding: 0.5rem;
}

.note-editor.note-frame .note-btn {
    border: 1px solid #ced4da;
    background: #fff;
    color: #495057;
}

.note-editor.note-frame .note-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.note-editor.note-frame .note-btn.active {
    background: #007bff;
    border-color: #007bff;
    color: #fff;
}

/* 이미지 관리 스타일 */
.main-image-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.main-image-remove-btn:hover {
    background: rgba(200, 35, 51, 1);
    transform: scale(1.1);
}

.image-preview-item {
    position: relative;
    margin-bottom: 15px;
}

.image-preview-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #dee2e6;
}

.image-preview-item .remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.image-preview-item .remove-btn:hover {
    background: rgba(200, 35, 51, 1);
    transform: scale(1.1);
}

.additional-image-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.additional-image-remove-btn:hover {
    background: rgba(200, 35, 51, 1);
    transform: scale(1.1);
}

/* 이미지 컨테이너에 호버 효과 추가 */
.image-container {
    transition: transform 0.2s ease;
}

.image-container:hover {
    transform: scale(1.02);
}

/* ===== 체크아웃 페이지 전용 스타일 ===== */

/* Breadcrumb 섹션 스타일 */
.breadcrumb-section {
    margin-bottom: 2rem;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #6c757d;
}

.breadcrumb-item.active .breadcrumb-link {
    color: #495057;
    font-weight: 600;
}

/* 체크아웃 카드 스타일 */
.checkout-summary {
    border: 1px solid #dee2e6;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.checkout-card {
    border: 1px solid #dee2e6;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.checkout-card .card-header {
    background-color: #dee2e6 !important;
    color: #495057 !important;
    border-bottom: 1px solid #dee2e6;
}

.checkout-summary .card-header {
    background-color: #dee2e6 !important;
    color: #495057 !important;
    border-bottom: 1px solid #dee2e6;
}

.checkout-card .card-body {
    border: 1px solid #dee2e6;
}

.checkout-summary .card-body {
    border: 1px solid #dee2e6;
}

.card-header h6 {
    margin: 0;
    font-weight: 600;
}

/* 우편번호 검색 버튼 커스텀 스타일 */
.postcode-search-btn {
    height: 38px; /* form-control과 동일한 높이 */
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-left: none;
    background-color: #fff;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0 0.375rem 0.375rem 0;
}

.postcode-search-btn:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    color: #495057;
}

.postcode-search-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

.postcode-search-btn:active {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

/* 체크아웃 버튼 커스텀 스타일 */
.checkout-submit-btn {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1.5rem;
    border: 1px solid #007bff;
    background-color: #007bff;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0.375rem;
}

.checkout-submit-btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.checkout-submit-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.checkout-submit-btn:active {
    background-color: #004085;
    border-color: #004085;
}

.checkout-back-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #6c757d;
    background-color: #fff;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0.375rem;
}

.checkout-back-btn:hover {
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
}

.checkout-back-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

.checkout-back-btn:active {
    background-color: #545b62;
    border-color: #545b62;
}

/* ===== 장바구니 페이지 전용 스타일 ===== */

/* 장바구니 버튼 커스텀 스타일 */
.cart-shop-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 1px solid #007bff;
    background-color: #007bff;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0.375rem;
}

.cart-shop-btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.cart-shop-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.cart-shop-btn:active {
    background-color: #004085;
    border-color: #004085;
}

.cart-quantity-btn {
    height: 38px;
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    background-color: #fff;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-quantity-btn:first-child {
    border-radius: 0.375rem 0 0 0.375rem;
    border-right: none;
}

.cart-quantity-btn:last-child {
    border-radius: 0 0.375rem 0.375rem 0;
    border-left: none;
}

.cart-quantity-btn:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    color: #495057;
}

.cart-quantity-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

.cart-quantity-btn:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.cart-remove-btn {
    height: 32px;
    width: 32px;
    padding: 0;
    border: 1px solid #dc3545;
    background-color: #fff;
    color: #dc3545;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-remove-btn:hover {
    background-color: #dc3545;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.cart-remove-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.cart-remove-btn:active {
    background-color: #c82333;
    border-color: #c82333;
}

.cart-continue-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #6c757d;
    background-color: #fff;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0.375rem;
}

.cart-continue-btn:hover {
    background-color: #f8f9fa;
    color: #495057;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(73, 80, 87, 0.2);
}

.cart-continue-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

.cart-continue-btn:active {
    background-color: #545b62;
    border-color: #545b62;
}

.cart-checkout-btn {
    width: 100%;
    height: 48px;
    padding: 0.75rem 1.5rem;
    border: 1px solid #007bff;
    background-color: #007bff;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0.375rem;
}

.cart-checkout-btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.cart-checkout-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.cart-checkout-btn:active {
    background-color: #004085;
    border-color: #004085;
}

/* 빈 장바구니 아이콘 스타일 */
.empty-cart-icon {
    font-size: 4rem;
    opacity: 0.5;
}

/* ===== 장바구니 테이블 반응형 스타일 ===== */

/* 데스크톱 테이블 스타일 */
.cart-table {
    min-width: 800px;
}

.cart-product-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.cart-product-name {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.3;
    word-break: break-word;
}

.cart-product-details {
    font-size: 0.8rem;
    line-height: 1.2;
}

.cart-quantity-controls {
    display: flex;
    width: 140px; /* 3자리 수량 입력을 위해 확장 */
    height: 32px;
}

.cart-quantity-controls .cart-quantity-btn {
    flex: 1;
    height: 32px;
    font-size: 1rem;
    font-weight: 600;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #dee2e6 !important;
    background: #fff !important;
    color: #6c757d !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.cart-quantity-controls .cart-quantity-btn:hover {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
}

.cart-quantity-controls .cart-quantity {
    flex: 2;
    text-align: center;
    height: 32px;
    font-size: 1rem;
    font-weight: 300;
    padding: 0 !important;
}

/* 모바일 반응형 스타일 */
@media (max-width: 768px) {
    .cart-table {
        min-width: auto;
    }
    
    .cart-table thead {
        display: none;
    }
    
    .cart-item-row {
        display: block;
        border: 1px solid #dee2e6;
        margin-bottom: 1rem;
        padding: 1rem;
        background: white;
    }
    
    .cart-image-cell,
    .cart-name-cell,
    .cart-price-cell,
    .cart-quantity-cell,
    .cart-subtotal-cell,
    .cart-action-cell {
        display: block;
        width: 100%;
        padding: 0.5rem 0;
        border: none;
        text-align: left;
    }
    
    .cart-image-cell {
        text-align: center;
        padding-bottom: 1rem;
    }
    
    .cart-product-image {
        width: 120px;
        height: 120px;
        border-radius: 8px;
    }
    
    .cart-product-name {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        text-align: center;
    }
    
    .cart-product-details {
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .cart-price-cell {
        text-align: center;
        font-size: 1.2rem;
        font-weight: 600;
        color: #dc3545;
        margin-bottom: 1rem;
    }
    
    .cart-quantity-cell {
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .cart-quantity-controls {
        justify-content: center;
        margin: 0 auto;
    }
    
    .cart-subtotal-cell {
        text-align: center;
        font-size: 1.1rem;
        font-weight: 600;
        color: #007bff;
        margin-bottom: 1rem;
        padding: 0.5rem;
        background: #f8f9fa;
        border-radius: 6px;
    }
    
    .cart-action-cell {
        text-align: right;
        padding-right: 1rem;
    }
    
    .cart-remove-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    /* 모바일에서 카드 여백 조정 */
    .checkout-card .card-body {
        padding: 1rem;
    }
    
    /* 모바일에서 주문 요약 카드 조정 */
    .checkout-summary {
        margin-top: 1rem;
    }
}

/* 태블릿 중간 크기 반응형 */
@media (min-width: 769px) and (max-width: 1024px) {
    .cart-table {
        min-width: 700px;
    }
    
    .cart-product-name {
        font-size: 0.9rem;
    }
    
    .cart-product-details {
        font-size: 0.75rem;
    }
    
    .cart-quantity-controls {
        width: 100px;
    }
}

/* 테이블 헤더 굵은 줄 제거 */
.cart-table thead th {
    border-bottom: 1px solid #dee2e6 !important;
}

/* 테이블 border-top 제거 */
.table>:not(:first-child) {
    border-top: 0px !important;
}

/* 모바일에서 네비게이션 바 상하 패딩 추가 */
@media (max-width: 768px) {
    #mainNav {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    
    /* 모바일에서 드롭다운 메뉴 스타일 수정 */
    .custom-dropdown-menu .dropdown-item {
        background-color: transparent !important;
        border: none !important;
        border-bottom: 0px !important;
    }
    
    .custom-dropdown-menu .dropdown-item:hover {
        background-color: transparent !important;
    }
    
    .custom-dropdown-menu .dropdown-item:focus {
        background-color: transparent !important;
    }
    
    /* 드롭다운 구분선 제거 */
    .custom-dropdown-menu .dropdown-divider {
        display: none !important;
    }
}

/* orders.php 버튼 스타일들 */
.orders-shop-btn {
    display: inline-block;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    background-color: #007bff;
    border: 1px solid #007bff;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.5;
}

.orders-shop-btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.orders-shop-btn:focus {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.orders-shop-btn:active {
    background-color: #004085;
    border-color: #004085;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.orders-cancel-btn {
    display: block;
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #dc3545;
    background-color: transparent;
    border: 1px solid #dc3545;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.orders-cancel-btn:hover {
    background-color: #dc3545;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.orders-review-btn {
    display: block;
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #007bff;
    background-color: transparent;
    border: 1px solid #007bff;
    color: #007bff;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.orders-review-btn:hover {
    background-color: #007bff;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.orders-detail-btn {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    background-color: transparent;
    border: 1px solid #6c757d;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.orders-detail-btn:hover {
    background-color: #6c757d;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

/* 주문 내역 없음 섹션의 쇼핑 이모티콘 */
.orders-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
}

/* ===== 체크아웃 페이지 전용 스타일 ===== */

/* 주소록 모달 스타일 */
.address-item {
    transition: all 0.2s ease-in-out;
    border: 1px solid #e9ecef;
}

.address-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
    transform: translateY(-1px);
}

.address-item .card-body {
    padding: 1rem;
}

.address-item .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
}

.address-item .fw-medium {
    font-weight: 500;
    color: #495057;
}

.address-item small.text-muted {
    font-size: 0.75rem;
}

/* 주소록 모달 크기 조정 */
#addressBookModal .modal-dialog {
    max-width: 800px;
}

/* 로딩 스피너 스타일 */
.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* 비활성화된 결제 옵션 스타일 */
.disabled-option {
    opacity: 0.6;
    cursor: not-allowed;
}

.disabled-option .form-check-input:disabled {
    cursor: not-allowed;
}

.disabled-option .form-check-label {
    cursor: not-allowed;
}

/* 결제 방법 구분선 스타일 */
hr.my-3 {
    border-color: #dee2e6;
    opacity: 0.5;
}

/* 모바일 breadcrumb 줄바꿈 방지 */
.breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
}

.breadcrumb-item {
    flex-shrink: 0;
}

.breadcrumb-item a {
    white-space: nowrap;
}

/* 모바일에서 breadcrumb 스크롤바 숨기기 */
.breadcrumb::-webkit-scrollbar {
    display: none;
}

.breadcrumb {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 쿠폰 섹션 스타일 */
.coupon-section {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: #f8f9fa;
}

.coupon-section .input-group {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.coupon-section .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.coupon-section .btn-outline-primary:hover {
    background-color: #007bff;
    border-color: #007bff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

/* 쿠폰 메시지 스타일 */
#couponMessage .alert {
    margin-bottom: 0;
    font-size: 0.875rem;
}

#couponMessage .btn-close-sm {
    padding: 0.25rem;
    font-size: 0.75rem;
}

/* 쿠폰 적용 정보 스타일 */
#appliedCouponInfo .alert {
    margin-bottom: 0;
    border: 1px solid #d4edda;
    background-color: #d1ecf1;
    color: #0c5460;
}

#appliedCouponInfo .alert-success {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

#appliedCouponInfo .btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
    background-color: transparent;
}

#appliedCouponInfo .btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* 쿠폰 입력 필드 포커스 스타일 */
.coupon-section .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* 쿠폰 적용 버튼 로딩 상태 */
#applyCouponBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 할인 금액 표시 스타일 */
#couponDiscountRow {
    color: #28a745;
    font-weight: 500;
}

#couponDiscount {
    color: #28a745;
    font-weight: 600;
}

/* 쿠폰 적용 후 가격 표시 스타일 */
#afterCouponRow {
    color: #007bff;
    font-weight: 500;
}

#afterCouponPrice {
    color: #007bff;
    font-weight: 600;
}

/* 로딩 스피너 애니메이션 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 로딩 스피너 애니메이션 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* DataTables 반응형 스타일 */
@media (max-width: 575.98px) {
    /* DataTables 컨트롤 숨김 (576px 이하에서만) */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info {
        display: none !important;
    }
    
    /* 576px 이하에서 3개 컬럼만 표시 */
    #couponsTable th:nth-child(n+4),
    #couponsTable td:nth-child(n+4) {
        display: none !important;
    }
    
    /* No., 쿠폰명, 쿠폰코드 컬럼만 표시 */
    #couponsTable th:nth-child(-n+3),
    #couponsTable td:nth-child(-n+3) {
        display: table-cell !important;
    }
    
    /* DataTables 페이지네이션은 유지 */
    .dataTables_wrapper .dataTables_paginate {
        display: block !important;
    }
    
    /* 테이블 반응형 처리 */
    .table-responsive {
        overflow-x: auto;
    }
    
    /* 모바일에서 테이블 셀 최소 너비 설정 */
    .table td, .table th {
        min-width: 80px;
        white-space: nowrap;
    }
    
    /* No. 컬럼은 더 작게 */
    .table td:first-child, .table th:first-child {
        min-width: 50px;
    }
    
    /* 관리 컬럼은 버튼 크기에 맞게 */
    .table td:last-child, .table th:last-child {
        min-width: 100px;
    }
}

/* 576px 이상에서는 모든 컨트롤 표시 */
@media (min-width: 576px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        display: block !important;
    }
}

/* 투명 배경/검정 글씨 info 메시지 */
.alert-info.info-plain {
    background-color: rgba(23, 162, 184, 0.08) !important; /* 은은한 info 톤 배경 */
    color: #212529 !important;
    border: 1px solid rgba(23, 162, 184, 0.35) !important; /* 연한 info 톤 보더 */
}

/* Sales performance table font sizing */
.sales-perf-table th,
.sales-perf-table td {
  font-size: 14px;
  font-weight: 400;
}

.perf-label-strong {
  font-size: 16px;
  font-weight: 700;
}