/* gudock.css (수정 완료된 버전) */

body {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #fff;
    /* 통일된 배경색 */
    overflow-x: hidden;
}

/* 상품 상세 페이지에서 햄버거 버튼 체크 시: 사이드바 숨김, 하단 버튼들 원위치 */
body:has([data-page="product_detail"]) #sidebar-toggle-checkbox:checked~.main-wrapper .sidebar {
    display: none !important;
}

body:has([data-page="product_detail"]) #sidebar-toggle-checkbox:checked~.main-wrapper .content-area {
    margin-left: 0 !important;
}

/* 상품 상세 페이지에서 하단 버튼들이 콘텐츠 영역과 동기화 */
body:has([data-page="product_detail"]) .fixed-bottom-actions {
    left: 13rem !important;
    /* 사이드바 너비만큼 시작 */
    right: 0 !important;
    width: calc(100% - 13rem) !important;
    /* 사이드바 제외한 너비 */
    max-width: calc(112.5rem - 13rem) !important;
    /* 상세페이지와 동일한 최대 너비에서 사이드바 너비 제외 */
    margin: 0 auto !important;
    /* 중앙 정렬 */
}

/* 햄버거 버튼 클릭 시 하단 버튼들도 전체 너비로 */
body:has([data-page="product_detail"]):has(#sidebar-toggle-checkbox:checked) .fixed-bottom-actions {
    left: 0 !important;
    width: 100% !important;
    max-width: 112.5rem !important;
    /* 상세페이지와 동일한 최대 너비 */
    margin: 0 auto !important;
    /* 중앙 정렬 */
}

/* 반응형: 768px 이하에서는 사이드바가 없으므로 하단 버튼들도 전체 너비 */
@media (max-width: 48rem) {

    /* 768px -> 48rem */
    body:has([data-page="product_detail"]) .fixed-bottom-actions {
        left: 0 !important;
        width: 100% !important;
        max-width: 112.5rem !important;
        margin: 0 auto !important;
    }
}

.navbar {
    height: 3.75rem;
    /* 60px -> 3.75rem */
    background-color: #fff;
    /* 상단바 배경색 추가 */
}

.sidebar {
    width: 13rem;
    /* 240px -> 16rem */
    flex-shrink: 0;
    background-color: #fff;
    /* 통일된 배경색 */
    padding: 0 0.25rem;
    /* 위아래 0, 좌우 0.25rem */
    padding-top: 0.8rem;
    /* 12px -> 0.8rem */
    position: fixed;
    height: calc(100vh - 3.75rem);
    /* 60px -> 3.75rem */
    overflow-y: auto;
    top: 3.75rem;
    /* 60px -> 3.75rem */
    left: 0;
    z-index: 1000;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.sidebar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    padding-left: 1.5rem;
    font-size: 0.85rem;
    /* 넓은 사이드바 메뉴 폰트 크기 */
}

.sidebar .nav-link img {
    vertical-align: middle;
}

.sidebar .nav-link:hover {
    background-color: #e0e0e0;
    /* 마우스 오버 시 배경색 변경 */
}

.content-area {
    margin-left: 13rem;
    /* 240px -> 16rem */
    padding: 0.75rem 0.8rem 0 0.8rem;
    /* Navbar height (3.75rem) + Chips container height (approx 2.5rem) */
}

.footer {
    background-color: #fff;
    /* 통일된 배경색 */
    color: #333;
    /* 텍스트 색상 조정 */
    padding: 1rem 0;
    text-align: center;
    flex-shrink: 0;
}

.scroll-wrapper {
    position: relative;
    margin: 0 -12px;
    /* 컨테이너 패딩 보정 */
    padding: 0 12px;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.scroll-btn.hidden {
    opacity: 0;
    visibility: hidden;
}

.scroll-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


.scroll-btn:hover {
    background-color: #fff;
    color: inherit;
    border-color: #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.scroll-btn-left {
    left: 0px;
    /* 위치 조정 */
}

.scroll-btn-right {
    right: 0px;
    /* 위치 조정 */
}

.scroll-btn img {
    filter: none;
    width: 24px;
    height: 24px;
}

.scroll-btn[disabled] img {
    opacity: 0.3;
    filter: grayscale(1) brightness(1.8);
}

/* 체크박스 해킹을 이용한 사이드바 토글 (데스크톱) */
#sidebar-toggle-checkbox:checked~.main-wrapper .sidebar {
    width: 5rem;
    /* 70px -> 4.375rem (축소된 너비는 유지) */
}

#sidebar-toggle-checkbox:checked~.main-wrapper .sidebar .sidebar-text {
    font-size: 0.7rem;
    margin-top: 0.5rem;
    /* 8px -> 0.5rem */
    white-space: normal;
    /* 텍스트가 줄바꿈되도록 */
    overflow: visible;
    /* 넘치는 텍스트가 잘리지 않도록 */
    opacity: 1;
    /* 항상 보이도록 */
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    padding-left: 1.5rem;
    font-size: 0.85rem;
    /* 넓은 사이드바 메뉴 폰트 크기 */
}

#sidebar-toggle-checkbox:checked~.main-wrapper .sidebar .nav-link {
    padding: 0.625rem 0.2rem;
    /* 좁은 사이드바에서 좌우 패딩을 줄여 텍스트 공간 확보 */
}

#sidebar-toggle-checkbox:checked~.main-wrapper .sidebar .nav-link {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.625rem 0;
    /* 10px -> 0.625rem */
}

#sidebar-toggle-checkbox:checked~.main-wrapper .sidebar .nav-link img {
    margin-right: 0 !important;
}

#sidebar-toggle-checkbox:checked~.main-wrapper .content-area {
    margin-left: 5rem;
    /* 70px -> 4.375rem */
}

/* 좁은 사이드바일 때 카테고리 칩 위치 조정 */
#sidebar-toggle-checkbox:checked~.main-wrapper .category-chips-container {
    left: 5rem;
    /* 축소된 사이드바 너비 */
}

.notification-list {
    /* width: 25rem;  알림창 너비 설정 */
    max-height: 25rem;
    /* 최대 높이 설정 */
    overflow-y: auto;
    /* 스크롤 가능 */
}

.notification-dropdown-menu .dropdown-item>div {
    white-space: normal;
    word-break: keep-all;
}

/* 반응형 디자인 */
@media (max-width: 48rem) {

    /* 768px -> 48rem */
    .nav-link {
        margin-right: 0rem !important;
        /* 모바일에서 마진 줄이기 */
        padding: 0.5rem 0.75rem !important;
        /* 모바일에서 패딩 조정 */
    }

    .sidebar {
        width: 13rem;
        /* 240px -> 16rem */
        position: fixed;
        top: 3.75rem;
        /* 60px -> 3.75rem */
        left: 0;
        height: calc(100vh - 3.75rem);
        /* 60px -> 3.75rem */
        transform: translateX(-100%);
        z-index: 1020;
    }

    .content-area {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    #sidebarToggleLabel {
        display: none !important;
    }

    .category-chips-container {
        left: 0 !important;
    }

    .category-chips {
        gap: 0.5rem !important;
        ;
        /* 간격 증가 */
    }

    .notification-list {
        width: 100vw;
        max-height: 20rem;
    }

    .notification-dropdown-menu,
    .user-dropdown-menu {
        position: fixed !important;
        top: 3.75rem !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw;
        max-width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

.d-flex.align-items-center>.nav-link:last-child img[alt="User"] {
    width: 2.375rem;
    height: 2.375rem;
}

#sidebarToggleLabel {
    margin-left: 0.22rem;
}

#sidebarToggleLabel img {
    vertical-align: middle;
}

.navbar-brand img {
    width: 2.375rem;
    /* 38px */
    height: 2.375rem;
    /* 38px */
    background-color: rgb(9, 8, 8);
    /* 로고 배경색 */
    border-radius: 50%;
    /* 로고를 원형으로 */
}

.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-brand-text {
    font-weight: 600;
    font-size: 1.4rem;
    margin-left: 0.5rem;
    /* 로고와 텍스트 사이의 간격 */
}

.search-bar-container-padding {
    padding: 0 1rem;
}

.search-bar {
    max-width: 37.5rem;
    width: 100%;
}

.search-bar .form-control {
    border-top-left-radius: 1.25rem;
    border-bottom-left-radius: 1.25rem;
    border-right: none;
    height: 2.5rem;
    padding-left: 1rem;
}

.search-bar .form-control::placeholder {
    color: #bbb;
    opacity: 1;
}

.search-bar .form-control:focus {
    box-shadow: none;
    border-color: #ccc;
}

.search-bar .btn {
    border-top-right-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
}

.search-bar .btn img {
    width: 1.25rem;
    height: 1.25rem;
}

.create-button {
    border: 1px solid #ccc;
    border-radius: 1.25rem;
    padding: 0.375rem 0.75rem;
    color: #333;
    background-color: #fff;
    height: 2.5rem;
}

.create-button:hover {
    background-color: #f0f0f0;
}

.submenu {
    padding-left: 2rem;
}

.submenu .nav-link {
    padding-left: 0.5rem;
}

#sidebar-toggle-checkbox:checked~.main-wrapper .sidebar .submenu {
    display: none;
}

/* ==============================================================
   .product-card 관련 스타일을 모두 제거했습니다. 
   이 카드 스타일은 이제 product_card.css 파일에서만 관리됩니다.
   ==============================================================
*/

.category-chips-container {
    position: fixed;
    top: 3.75rem;
    /* Navbar height */
    left: 13rem;
    /* Sidebar width */
    right: 0;
    z-index: 999;
    background-color: #fff;
    margin-bottom: 0;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-chips {
    display: inline-flex;
    gap: 0.8rem;
    /* 간격 증가 */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-grow: 1;
    padding-left: 0.8rem;
    /* 왼쪽 패딩 추가 */
}

.category-chips::-webkit-scrollbar {
    display: none;
}

.arrow-button {
    background-color: #fff;
    border: none;
    cursor: pointer;
    padding: 0 0.5rem;
    z-index: 1;
    flex-shrink: 0;
}

.arrow-button.left-arrow {
    position: sticky;
    left: 0;
}

.arrow-button.right-arrow {
    position: sticky;
    right: 0;
}

.load-more-btn {
    border-radius: 1.5rem;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    border-color: #ccc;
}

.load-more-btn:hover {
    background-color: #f0f0f0;
    border-color: #aaa;
}

.bottom-nav {
    height: 3.75rem;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, .08);
    background-color: #fff;
}

.bottom-nav .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #606060;
    padding: 0.25rem 0.5rem;
}

.bottom-nav .nav-link.active {
    color: #000;
}

.bottom-nav .nav-text {
    white-space: nowrap;
}

.create-button-mobile {
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #606060;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

#sidebar-toggle-checkbox:checked~.main-wrapper .sidebar hr {
    display: none;
}

[data-bs-theme="dark"] body {
    background-color: #121212;
    color: #e1e1e1;
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] .footer,
[data-bs-theme="dark"] .bottom-nav,
[data-bs-theme="dark"] .category-chips-container,
[data-bs-theme="dark"] .arrow-button {
    background-color: #121212 !important;
    color: #e1e1e1;
}

[data-bs-theme="dark"] .sidebar .nav-link:hover {
    background-color: #333;
}

[data-bs-theme="dark"] .search-bar .form-control {
    background-color: #222;
    border-color: #444;
    color: #e1e1e1;
}

[data-bs-theme="dark"] .search-bar .form-control::placeholder {
    color: #666;
    opacity: 1;
}

[data-bs-theme="dark"] .search-bar .btn {
    background-color: #333;
    border-color: #444;
}

[data-bs-theme="dark"] .create-button {
    background-color: transparent;
    border-color: #444;
    color: #e1e1e1;
}

[data-bs-theme="dark"] .create-button:hover {
    background-color: #333;
}

[data-bs-theme="dark"] .load-more-btn {
    color: #f1f1f1;
    border-color: #444;
}

[data-bs-theme="dark"] .load-more-btn:hover {
    background-color: #333;
    border-color: #555;
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: #2c2c2c;
    border-color: #444;
}

[data-bs-theme="dark"] .dropdown-item {
    color: #e1e1e1;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #444;
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: #444;
}

[data-bs-theme="dark"] .dropdown-header {
    color: #aaa;
}

[data-bs-theme="dark"] .mobile-search-overlay {
    background-color: #121212;
}

[data-bs-theme="dark"] .mobile-search-overlay .input-group .form-control {
    background-color: #222;
    border-color: #444;
    color: #e1e1e1;
}

[data-bs-theme="dark"] .mobile-search-overlay .input-group .form-control::placeholder {
    color: #666;
    opacity: 1;
}

[data-bs-theme="dark"] .mobile-search-overlay .input-group .btn {
    background-color: #333;
    border-color: #444;
}


[data-bs-theme="dark"] .navbar .nav-link img,
[data-bs-theme="dark"] .navbar .btn img,
[data-bs-theme="dark"] #sidebarToggleLabel img,
[data-bs-theme="dark"] .sidebar .nav-link img,
[data-bs-theme="dark"] .bottom-nav .nav-link img,
[data-bs-theme="dark"] .dropdown-item img,
[data-bs-theme="dark"] .arrow-button img {
    filter: invert(1);
}

[data-bs-theme="dark"] .navbar-brand img,
[data-bs-theme="dark"] img[alt*="User"],
[data-bs-theme="dark"] img[src*="account_circle.svg"],


[data-bs-theme="dark"] .sidebar .nav-link.active,
[data-bs-theme="dark"] .sidebar .nav-link:hover {
    background-color: #272727;
    border-radius: 0.5rem;
}

[data-bs-theme="dark"] .bottom-nav .nav-link.active,
[data-bs-theme="dark"] .bottom-nav .nav-link:hover {
    color: #fff;
}

[data-bs-theme="dark"] .create-button {
    border-color: #555;
}

[data-bs-theme="dark"] .create-button:hover {
    background-color: #272727;
    border-color: #555;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #272727;
}

.mobile-search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3.75rem;
    z-index: 1040;
    background-color: #f0f0f0;
    padding: 0 1rem;
    align-items: center;
}

.mobile-search-overlay .input-group {
    max-width: 37.5rem;
    width: 100%;
}

.mobile-search-overlay .input-group .form-control {
    border-top-left-radius: 1.25rem;
    border-bottom-left-radius: 1.25rem;
    border-right: none;
    height: 2.5rem;
    padding-left: 1rem;
}

.mobile-search-overlay .input-group .form-control::placeholder {
    color: #bbb;
    opacity: 1;
}

.mobile-search-overlay .input-group .form-control:focus {
    box-shadow: none;
    border-color: #ccc;
}

.mobile-search-overlay .input-group .btn {
    border-top-right-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
}

.mobile-search-overlay .input-group .btn img {
    width: 1.25rem;
    height: 1.25rem;
}

/* Product Grid Container */
.product-grid-container {
    display: grid;
    gap: 1rem;
    /* 카드 사이 간격 */
    justify-content: center;
    max-width: 100%;

    /* ▼▼▼ 이 부분을 추가하세요 ▼▼▼ */
    max-width: 3400px;
    /* 예시: 그리드의 최대 너비를 1920px로 제한 */
    margin-right: auto;
    /* max-width와 함께 사용하여 컨테이너를 중앙 정렬 */

    /* auto-fit: 현재 너비에 맞는 만큼 칼럼을 자동으로 채웁니다.
      minmax(16rem, 1fr): 각 칼럼의 최소 너비는 16rem(약 256px)을 보장하고, 
                         여유 공간이 생기면 다른 칼럼들과 1:1 비율로 균등하게 나눠 가집니다.
    */
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* ==============================================================
   Global Font Scaling for Responsive Design
   rem 단위 사용 시, html 루트 폰트 크기만 변경하면 전체 UI가 비례 조절됨
   ============================================================== */

/* 태블릿 (≤1024px) */
@media (max-width: 64rem) {
    html {
        font-size: 14px;
        /* 기본 16px 대비 ~87.5% 축소 */
    }
}

/* 모바일 (≤768px) */
@media (max-width: 48rem) {
    html {
        font-size: 13px;
        /* 기본 16px 대비 ~81.25% 축소 */
    }
}

/* 소형 모바일 (≤480px) */
@media (max-width: 30rem) {
    html {
        font-size: 12px;
        /* 기본 16px 대비 75% 축소 */
    }
}