/* CSS Custom Properties */
        :root {
            --sidebar-width: 240px;
            --header-height: 80px;
            --card-gap: 24px;
            --mobile-padding: 16px;
            --tablet-padding: 24px;
            --desktop-padding: 40px;
            --border-color: #EAECF0;
            --text-primary: #101828;
            --text-secondary: #344054;
            --text-tertiary: #667085;
            --background-gray: #F9FAFB;
            --border-radius: 8px;
            --card-border-radius: 6px;  /* 카드 전체 둥글기를 6px로 줄임 */
        }

        /* ========================================
           Lazy Loading Placeholder Styles
           ======================================== */
        .lazy-bg {
            background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 20%, #e0e0e0 40%, #e0e0e0 100%);
            background-size: 468px 100%;
            animation: lazyBgShimmer 1.5s ease-in-out infinite;
            background-position: center;
        }

        @keyframes lazyBgShimmer {
            0% { background-position: -468px 0; }
            100% { background-position: 468px 0; }
        }

        /* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Pretendard', sans-serif;
            background: white;
            overflow-x: hidden;
            line-height: 1.5;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            height: 8px;
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        /* Layout Container */
        .app-container {
            display: flex;
            min-height: 100vh;
            position: relative;
        }

        /* Sidebar Styles */
        .sidebar {
            width: var(--sidebar-width);
            height: 100vh;
            background: white;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100;
            overflow-y: auto;
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        /* Flickering Grid Background - Left Side Effect */
        .flickering-grid-container {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 30%; /* Only left 30% */
            height: 100%;
            z-index: 1; /* Changed from 0 to 1 to be above sidebar background but below content */
            pointer-events: none;
            overflow: hidden;
            mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.3) 80%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.3) 80%, transparent 100%);
        }

        .flickering-grid-canvas {
            pointer-events: none;
            width: 100%;
            height: 100%;
        }

        /* Ensure content is above the grid */
        .sidebar > *:not(.flickering-grid-container) {
            position: relative;
            z-index: 2; /* Changed from 1 to 2 to be above the grid */
        }


        .sidebar-nav {
            padding: 24px;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
        }

        .sidebar-brand {
            padding: 24px 16px 8px 26px;
            align-self: stretch;
            justify-content: flex-start;
            align-items: center;
            gap: 8px;
            display: flex;
            margin-bottom: 8px;
            position: relative;
            z-index: 10;
            background: transparent; /* Changed from white to transparent */
        }

        .sidebar-brand h1 {
            flex: 1 1 0;
            height: 33px;
            color: black;
            font-size: 24px;
            font-weight: 700;
            word-wrap: break-word;
            margin: 0;
        }

        .sidebar-brand h1 a {
            color: inherit;
            text-decoration: none;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            transition: all 0.3s ease;
        }

        .sidebar-logo-icon {
            width: 130px;
            height: auto;
            object-fit: contain;
            vertical-align: middle;
        }

        /* Syncle 로고 오로라 효과 */
        .sidebar-brand h1 a:hover {
            background: linear-gradient(90deg, #8A2BE2, #FF1493, #00BFFF, #00FF7F, #FFD700, #FF6347, #8A2BE2);
            background-size: 400% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: aurora-flow 3s ease-in-out infinite;
        }

        @keyframes aurora-flow {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes gradient-flow {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        /* sidebar-divider 스타일은 sidebar.css에서 관리 */

        .sidebar-nav .nav-section {
            margin-top: 8px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            flex: 1;
            gap: 8px;
        }

        .nav-button {
            align-self: stretch;
            padding: 8px 12px;
            border: none;
            background: transparent;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: 'Pretendard', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: #191D23;
            text-align: left;
            position: relative;
            min-height: 16px;
            line-height: 18px;
        }

        .nav-button.active {
            background: transparent;
            color: #191D23;
        }

        /* 노션 스타일 호버 효과 (스티치 효과 제거됨) */
        /* nav-button 스타일은 sidebar.css에서 관리 */

        /* 드롭다운 메뉴 스타일 */
        .nav-item {
            align-self: stretch;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            display: flex;
            position: relative;
        }

        .dropdown-item {
            display: flex;
            flex-direction: column;
        }

        .nav-link {
            align-self: stretch;
            padding: 8px 12px;
            border: none;
            background: transparent;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: 'Pretendard', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: #191D23;
            text-align: left;
            position: relative;
            min-height: 16px;
            line-height: 18px;
        }

        /* dropdown-trigger 스타일은 sidebar.css에서 관리 */

        .dropdown-arrow-icon {
            width: 16px;
            height: 16px;
            transition: transform 0.2s ease;
            margin-left: auto;
            flex-shrink: 0;
            transform: rotate(90deg);
            filter: brightness(0);
        }

        .dropdown-item.expanded .dropdown-arrow-icon {
            transform: rotate(-90deg);
        }

        .dropdown-menu {
            align-self: stretch;
            padding: 8px;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-end;
            gap: 8px;
            display: none;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }

        .dropdown-menu.open {
            display: flex;
            max-height: 500px;
        }

        .dropdown-content {
            align-self: stretch;
            padding-left: 28px;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 8px;
            display: flex;
            position: relative;
        }

        /* 세로선 제거됨 - 노션 스타일 */

        .dropdown-link {
            align-self: stretch;
            padding: 6px 8px;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 8px;
            display: flex;
            font-family: 'Pretendard', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: #191D23;
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.2s ease;
            position: relative;
            line-height: 16px;
        }

        /* dropdown-link 스타일은 sidebar.css에서 관리 */

        /* AI Agent 특별 글꼴 스타일 */
        .ai-agent-button {
            font-weight: 600;
            letter-spacing: 0.5px;
            font-size: 13px !important;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            position: relative;
            padding: 8px 12px;
            min-height: 34px;
            line-height: 18px;
            align-self: stretch;
            box-sizing: border-box;
        }

        /* Info icon styles */
        .info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: help;
            position: relative;
            margin: 0;
            height: 14px;
            line-height: 1;
        }

        .info-icon svg {
            transition: all 0.2s ease;
        }

        .info-icon:hover svg circle {
            stroke: #2563eb;
            fill: #eff6ff;
        }

        .info-icon:hover svg text {
            fill: #2563eb;
        }

        /* Tooltip styles */
        .tooltip {
            position: fixed;
            background: #000000;
            color: white;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 12px;
            font-family: 'Pretendard', sans-serif;
            font-weight: 400;
            text-transform: none;
            letter-spacing: normal;
            white-space: nowrap;
            line-height: 1.4;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 99999;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .tooltip::after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 100%;
            border: 6px solid transparent;
            border-right-color: #000000;
        }

        .tooltip.show {
            opacity: 1;
            visibility: visible;
        }

        /* ========================================
           Hero Section - 듀얼 배너 기본 스타일 (데스크톱)
           ======================================== */
        .hero-section {
            width: 100%;
            margin-top: 12px;
            margin-bottom: 24px;
            padding: 0 var(--desktop-padding);
            box-sizing: border-box;
        }

        /* 듀얼 배너 레이아웃 (8:2 비율) - Grid로 동일 높이 보장 */
        .hero-grid {
            display: grid;
            grid-template-columns: 8fr 2fr;
            gap: 24px !important; /* 상품 카드 간격과 동일 */
            max-width: 1600px; /* Full HD(1920px) 이상에서 크기 제한 */
            align-items: stretch;
        }

        /* Main Banner - 이미지가 높이를 결정 */
        .main-banner {
            position: relative;
            overflow: hidden;
            background: #f0f0f0;
            border-radius: 6px;
            clip-path: inset(0 round 6px); /* 이미지가 절대 바깥으로 나가지 않도록 강제 클리핑 */
        }

        /* 서브 배너 - 메인과 동일한 높이 */
        .sub-banner {
            position: relative;
            height: 100%;
            align-self: stretch;
            overflow: hidden;
            background: #f0f0f0;
            border-radius: 6px;
            cursor: pointer;
            clip-path: inset(0 round 6px); /* 이미지가 절대 바깥으로 나가지 않도록 강제 클리핑 */
        }

        .sub-banner-slider {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .sub-banner-track {
            display: flex;
            height: 100%;
            transition: transform 0.5s ease;
        }

        .sub-banner-slide {
            min-width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .sub-banner-slide img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .sub-banner-content {
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            padding: 0 20px;
            text-align: center;
            z-index: 5;
        }

        .sub-badge {
            display: inline-block;
            background: #333;
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .sub-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            line-height: 1.4;
            margin: 0;
        }

        .sub-pagination {
            position: absolute;
            bottom: 16px;
            right: 16px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        /* 태블릿/모바일에서 정보 아이콘과 툴팁 숨기기 */
        @media (max-width: 1024px) {
            .ai-agent-button .info-icon,
            .ai-agent-button .tooltip {
                display: none !important;
            }

            /* AI Agent 버튼 텍스트만 표시 */
            .ai-agent-button {
                gap: 0;
            }

            /* 모바일/태블릿 사이드바에서 로고, 로고 아래 구분선, auth-container, 드롭다운 구분선 숨기기 */
            .sidebar > .sidebar-brand,
            .sidebar-brand + .sidebar-divider,
            .sidebar #auth-container,
            .sidebar #dropdown-divider {
                display: none !important;
            }

            /* 모바일/태블릿에서 nav-section을 flex로 만들어 버튼 순서 조정 */
            .sidebar .nav-section {
                display: flex;
                flex-direction: column;
            }

            /* spacer div를 display: contents로 만들어서 자식 요소들이 nav-section의 직접 자식처럼 동작 */
            .sidebar .nav-section > div:not(.nav-item) {
                display: contents;
            }

            /* 특가/혜택 버튼 다음에 구분선, 등록하기 버튼이 오도록 order 설정 */
            .sidebar .nav-section > .nav-button:nth-of-type(1) { order: 1; } /* 홈 */
            .sidebar .nav-section > .nav-button:nth-of-type(2) { order: 2; } /* AI Agent */
            .sidebar .nav-section > .nav-button:nth-of-type(3) { order: 3; } /* 지도 */
            .sidebar .nav-section > .nav-button:nth-of-type(4) { order: 4; } /* 비교견적 */
            .sidebar .nav-section > .nav-item.dropdown-item { order: 5; } /* 특가/혜택 드롭다운 */

            /* spacer div 내부의 구분선을 특가/혜택 바로 아래로 */
            .sidebar .nav-section > div > .sidebar-divider:not(#dropdown-divider) {
                order: 6;
            }

            /* 등록하기 버튼을 구분선 바로 아래로 */
            .sidebar .register-button {
                order: 7 !important;
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }
        }


        .login-button {
            position: relative;
            margin-bottom: 12px;
            align-self: stretch;
            width: 100%;
            height: 40px;
            cursor: pointer;
            overflow: hidden;
            border-radius: 50px;
            border: 1px solid #e2e8f0;
            background: white;
            padding: 8px 12px;
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-sizing: border-box;
            white-space: nowrap;
            font-family: 'Pretendard', sans-serif;
        }

        .login-button:hover {
            border-color: #000;
            background: transparent;
        }

        /* Inner content wrapper */
        .login-button .btn-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.3s ease;
            width: 100%;
            height: 100%;
        }

        /* Dot indicator */
        .login-button .btn-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #000;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
        }

        .login-button:hover .btn-dot {
            transform: scale(120);
            opacity: 1;
        }

        /* Initial text */
        .login-button .btn-text-initial {
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            color: #334155;
            white-space: nowrap;
            font-size: 13px;
            line-height: 1;
        }

        .login-button:hover .btn-text-initial {
            transform: translateX(20px);
            opacity: 0;
        }

        /* Hover content */
        .login-button .btn-hover-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            color: #ffffff;
            transform: translateX(20px);
            opacity: 0;
            transition: all 0.3s ease;
            pointer-events: none;
            font-size: 13px;
            white-space: nowrap;
        }

        .login-button:hover .btn-hover-content {
            transform: translateX(0);
            opacity: 1;
        }

        .login-button .btn-hover-content span {
            display: flex;
            align-items: center;
            line-height: 1;
        }

        .login-button .btn-hover-content i {
            font-size: 12px;
            color: #ffffff;
            display: flex;
            align-items: center;
        }

        /* 내 공간 등록하기 버튼 스타일 */
        .register-button {
            /* CSS Variables */
            --spread: 45deg;
            --shimmer-color: #ffffff;
            --radius: 6px;
            --speed: 6s;
            --cut: 0.05em;
            --bg: #000;

            /* Base Styles */
            margin-bottom: 8px;
            align-self: stretch;
            width: 100%;
            height: 40px;
            z-index: 0;
            display: flex;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            white-space: nowrap;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: var(--bg);
            border-radius: var(--radius);
            transform: translateZ(0);
            transition: transform 0.3s ease-in-out;
            position: relative;
        }

        .register-button:active {
            transform: translateY(1px);
        }

        /* Spark container */
        .register-button .spark-container {
            position: absolute;
            inset: 0;
            overflow: visible;
            z-index: -30;
            filter: blur(3px);
        }

        /* Spark */
        .register-button .spark {
            position: absolute;
            inset: 0;
            height: 100%;
            width: 100%;
            border-radius: 0;
            mask: none;
        }

        /* Spark before */
        .register-button .spark-before {
            position: absolute;
            inset: -100%;
            width: auto;
            rotate: 0;
            background: conic-gradient(
                from calc(270deg - (var(--spread) * 0.5)),
                transparent 0,
                var(--shimmer-color) var(--spread),
                transparent var(--spread),
                transparent 360deg
            );
            animation: spin-around var(--speed) linear infinite;
            translate: 0 0;
        }

        @keyframes spin-around {
            0% {
                rotate: 0deg;
            }
            100% {
                rotate: 360deg;
            }
        }

        /* Button content */
        .register-button .button-content {
            position: relative;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
        }

        .register-button .text-blue {
            color: #ffffff;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: -0.3px;
            line-height: 18px;
            font-family: 'Pretendard', sans-serif;
        }

        .register-button .text-gray {
            color: rgba(255, 255, 255, 0.9);
            font-size: 13px;
            font-weight: 400;
            letter-spacing: -0.3px;
            line-height: 18px;
            font-family: 'Pretendard', sans-serif;
        }

        /* Highlight */
        .register-button .highlight {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border-radius: var(--radius);
            padding: 4px 6px;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            box-shadow: inset 0 -8px 10px rgba(255, 255, 255, 0.12);
            transform: translateZ(0);
            transition: all 0.3s ease-in-out;
        }

        .register-button:hover .highlight {
            box-shadow: inset 0 -6px 10px rgba(255, 255, 255, 0.24);
        }

        .register-button:active .highlight {
            box-shadow: inset 0 -10px 10px rgba(255, 255, 255, 0.24);
        }

        /* Backdrop */
        .register-button .backdrop {
            position: absolute;
            z-index: -20;
            background: var(--bg);
            border-radius: var(--radius);
            inset: var(--cut);
        }

        /* Main Content */
        .main-content {
            flex: 1;
            margin-left: var(--sidebar-width);
            min-height: 100vh;
            overflow-x: hidden; /* 수평 스크롤 방지 */
            max-width: calc(100vw - var(--sidebar-width));
            box-sizing: border-box;
            position: relative; /* For grid positioning */
            padding-top: 0;
        }


        /* 태블릿/모바일에서 사이드바 영향 제거 및 수직 패딩 조정 */
        @media (max-width: 1024px) {
            .main-content {
                margin-left: 0;
                max-width: 100vw;
                padding-top: 0;
            }

            .content-section {
                padding-left: var(--tablet-padding);
                padding-right: 0;
                overflow: visible;
            }

            .sidebar {
                display: none; /* 완전히 숨김 처리 */
            }

            .sidebar.mobile-open {
                display: flex;
                transform: translateX(0);
            }
        }

        /* 헤더 스타일은 css/components/header.css에서 관리됩니다 */

        /* Tag Buttons */
        .tag-buttons-container {
            display: flex;
            gap: 16px;
            align-items: center;
            flex-wrap: wrap;
        }

        .tag-button {
            height: 38px;
            background: linear-gradient(155deg, #F7F7F7 31%, #EEEEEE 51%);
            border-radius: 50px;
            border: none;
            cursor: pointer;
            position: relative;
            padding: 1.5px;
            min-width: 120px;
            transition: all 0.3s ease;
        }

        .tag-button::before {
            content: '';
            position: absolute;
            top: 1.5px;
            left: 1.5px;
            right: 1.5px;
            bottom: 1.5px;
            background: #FBFBFB;
            border-radius: 50px;
            z-index: 1;
        }

        .tag-button span,
        .tag-button {
            color: black;
            font-family: 'Inter', 'Pretendard', sans-serif;
            font-size: 15px;
            font-weight: 500;
            line-height: 26px;
            text-align: center;
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 7.5px 12.5px;
        }

        .tag-button:hover {
            transform: translateY(-1px);
            box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
        }

        /* 모바일 메뉴 토글 스타일은 css/components/header.css에서 관리됩니다 */

        /* Content Sections */
        .content-section {
            padding: 0 var(--desktop-padding);
            overflow: hidden; /* 콘텐츠가 섹션을 벗어나지 않도록 */
            width: 100%;
            box-sizing: border-box;
        }

        /* 상품 섹션 정렬 */
        .popular-places-container,
        .new-places-container,
        .brand-news-container {
            margin-left: 0;
            margin-right: 0;
            width: 100%;
            box-sizing: border-box;
        }


        /* Hero Section Container - 상품 섹션과 동일한 너비 */
        .hero-section {
            width: 100%;
            margin-top: 12px;
            margin-bottom: 24px;
            padding: 0 var(--desktop-padding);
            box-sizing: border-box;
        }

        .sub-badge {
            display: inline-block;
            padding: 4px 12px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 11px;
            font-weight: 600;
            border-radius: 20px;
            margin-bottom: 12px;
            letter-spacing: 0.5px;
        }

        .sub-title {
            font-size: 18px;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0;
            line-height: 1.4;
            text-shadow: 0 1px 2px rgba(255,255,255,0.5);
        }

        .sub-pagination {
            position: absolute;
            bottom: 16px;
            right: 16px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            z-index: 5;
        }

        /* 태블릿에서 서브 배너 숨김 */
        @media (max-width: 1199px) {
            .hero-section .hero-grid {
                grid-template-columns: 1fr;
            }

            .hero-section .hero-grid .main-banner {
                /* 이미지가 높이를 결정 */
            }

            .sub-banner {
                display: none;
            }

            .banner-overlay {
                padding: 30px 24px 24px;
            }

            .banner-title {
                font-size: 22px;
            }
        }

        .banner-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        .banner-controls {
            position: absolute;
            bottom: 16px;
            right: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .pause-button {
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 8px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .pause-button:hover {
            background: rgba(0, 0, 0, 0.7);
        }

        .pause-icon-bar {
            width: 2px;
            height: 12px;
            background: white;
            border-radius: 1px;
        }

        /* Dropdown Menu Styles */
        .menu-item {
            position: relative;
        }

        /* menu-item 스타일은 sidebar.css에서 관리 */

        #user-profile {
            position: relative;
        }

        #user-menu.show {
            display: block !important;
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .hero-section {
                margin-top: 0; /* 데스크톱 24px 오버라이드 */
                margin-bottom: 0;
                padding: 0; /* 모바일에서 좌우 여백 제거 */
            }

            .hero-section .hero-grid {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .hero-section .hero-grid .main-banner {
                border-radius: 0; /* 모바일에서 둥근 모서리 제거 */
                clip-path: none; /* 모바일에서 클리핑 제거 */
                /* 이미지가 높이를 결정 */
            }

            .sub-banner {
                display: none;
            }

            .banner-overlay {
                padding: 20px 16px 16px;
            }

            .banner-title {
                font-size: 18px;
                margin-bottom: 4px;
            }

            .banner-author {
                font-size: 12px;
            }

            .banner-author::before {
                width: 20px;
                height: 20px;
            }

            .banner-controls {
                bottom: 12px;
                right: 12px;
            }

            .pause-button {
                padding: 6px;
            }

            .pause-icon-bar {
                width: 1.5px;
                height: 10px;
            }

            /* 모바일 인디케이터 크기 축소 */
            .hero-indicators {
                bottom: 12px;
                padding: 6px 10px;
                gap: 6px;
            }

            .indicator-dot {
                width: 6px;
                height: 6px;
            }

            .indicator-dot.active {
                width: 18px;
            }
        }


        /* Section Headers */
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .section-title {
            color: var(--text-primary);
            font-size: 24px;
            font-weight: 700;
        }

        .section-link {
            color: var(--text-tertiary);
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
        }

        .section-link:hover {
            color: var(--text-secondary);
        }

        /* Card Layouts */
        .cards-grid {
            display: flex;
            gap: var(--card-gap);
            margin-bottom: 48px;
            overflow-x: auto;
            overflow-y: visible;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding-bottom: 8px;
        }

        /* Brand updates container */
        .brand-updates-container {
            padding: 0;
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding-bottom: 8px;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .brand-updates-container::-webkit-scrollbar {
            display: none;
        }


        /* 이미지 컨테이너 - overflow와 border-radius 담당 */
        .place-card-image {
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: 6px;
            overflow: hidden;  /* 확대된 내용이 밖으로 나가지 않도록 */
            position: relative;
            background-color: #F2F2F2;
        }

        /* 이미지 내부 래퍼 - 실제 확대 효과 담당 */
        .place-card-image-inner {
            width: 100%;
            height: 100%;
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
        }

        /* 카드 hover 시 내부 이미지만 확대 */
        .place-card:hover .place-card-image-inner {
            transform: scale(1.1);  /* 10% 확대 */
        }

        /* 아이콘들은 확대되지 않도록 */
        .place-card-image > div:not(.place-card-image-inner) {
            position: absolute !important;
            z-index: 2;
        }




        /* Mobile Overlay */
        .mobile-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 90;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .mobile-overlay.active {
            display: block;
            opacity: 1;
            pointer-events: auto;
        }

        /* Popular Places Container - 기본 그리드 */
        .popular-places-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding-bottom: 8px;
            width: 100%;
            max-width: 100%;
            overflow: visible;
            box-sizing: border-box;
        }

        /* 큰 화면에서는 최대 6개 열로 제한 */
        @media (min-width: 1600px) {
            .popular-places-container {
                grid-template-columns: repeat(6, minmax(250px, 1fr));
            }

            /* 새로운 플레이스 섹션 - 6개 열에서는 그리드 유지 */
            .new-places-scroll {
                display: grid !important;
                overflow: visible !important;
                grid-template-columns: repeat(6, minmax(250px, 1fr)) !important;
            }

            .new-places-scroll .place-card {
                width: 100% !important;
                min-width: 0 !important;
            }
        }

        /* 중간 화면 */
        @media (min-width: 1200px) and (max-width: 1599px) {
            .popular-places-container {
                grid-template-columns: repeat(5, minmax(220px, 1fr));
            }

            /* 새로운 플레이스 섹션 - 5개 열일 때 6번째 카드 숨기기 */
            .new-places-scroll {
                display: grid !important;
                grid-template-columns: repeat(5, minmax(220px, 1fr)) !important;
                gap: 20px !important;
                overflow: visible !important;
            }

            /* 6번째 이후 카드 숨기기 */
            .new-places-scroll .place-card:nth-child(n+6) {
                display: none !important;
            }

            .new-places-scroll .place-card {
                width: 100% !important;
                min-width: 0 !important;
            }
        }
        

        /* 태블릿 - 1줄 가로 스크롤 */
        @media (max-width: 1199px) and (min-width: 768px) {
            .popular-places-container {
                display: flex;
                overflow-x: auto;
                gap: 20px;
                /* 컨테이너를 왼쪽 끝까지 확장 - 스크롤 시 여백 없이 이동 */
                margin-left: calc(-1 * var(--tablet-padding));
                width: calc(100% + var(--tablet-padding));
                padding-right: 24px;
                scrollbar-width: none;
                -ms-overflow-style: none;
                /* scroll-snap 제거 - 초기 자동 스크롤 방지 */
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
            }

            /* NEW 스페이스 섹션의 중첩 래퍼 우측 여백 제거 */
            .section-wrapper,
            .slide-wrapper {
                padding-right: 0 !important;
                margin-right: 0 !important;
            }

            /* 태블릿 섹션 헤더에 우측 여백 추가 */
            .popular-places-header {
                padding-right: 24px;
            }

            .popular-places-container::-webkit-scrollbar {
                display: none;
            }

            .popular-places-container .place-card {
                width: 240px;  /* 카드 크기를 살짝 키워서 4번째 카드가 더 많이 잘리도록 */
                min-width: 240px;
                flex: 0 0 auto;
                /* scroll-snap-align 제거 */
            }

            /* 첫 번째 카드에 좌측 마진 - 타이틀과 시작점 정렬 (구체적 선택자) */
            /* spacer 요소가 첫 번째이므로 first-of-type 사용 */
            .popular-places-container .place-card:first-of-type,
            .popular-places-container .deal-card:first-of-type {
                margin-left: var(--tablet-padding);
            }

            /* 브랜드 소식 컨테이너 - 부모는 overflow visible로 변경 (이중 스크롤 방지) */
            .brand-updates-container {
                overflow: visible !important;
                overflow-x: visible !important;
            }

            /* 브랜드 소식 컨테이너 - 스크롤 시 0px까지 도달 가능하도록 */
            /* brand-news-grid가 유일한 스크롤 컨테이너 */
            .brand-updates-container .brand-news-grid {
                margin-left: calc(-1 * var(--tablet-padding));
                width: calc(100% + var(--tablet-padding));
                padding-right: var(--tablet-padding);
                overflow-x: auto;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            .brand-updates-container .brand-news-grid::-webkit-scrollbar {
                display: none;
            }

            /* 첫 번째 카드에 margin-left 적용 (grid가 아닌 카드에!) */
            .brand-updates-container .brand-news-card:first-of-type {
                margin-left: var(--tablet-padding);
            }

            /* 브랜드 소식 로딩 상태 - 스켈레톤 컨테이너 */
            .brand-updates-container .brand-news-loading {
                margin-left: calc(-1 * var(--tablet-padding));
                width: calc(100% + var(--tablet-padding));
                padding-right: var(--tablet-padding);
            }

            .brand-updates-container .brand-news-loading .bn-skeleton-card:first-of-type {
                margin-left: var(--tablet-padding);
            }
        }

        /* 모바일 - 1줄 가로 스크롤 (2.5개 카드 표시) */
        @media (max-width: 767px) {
            #popular-places-container,
            #new-places-container,
            #special-deals-container-2,
            #special-deals-container,
            #discount-products-container,
            #budget-products-container,
            #pet-products-container,
            #team-products-container {
                display: flex;
                overflow-x: auto;
                gap: 10px;
                /* 컨테이너를 왼쪽 끝까지 확장 - 스크롤 시 여백 없이 이동 */
                margin-left: calc(-1 * var(--mobile-padding));
                width: calc(100% + var(--mobile-padding));
                padding-right: 16px;
                scrollbar-width: none;
                -ms-overflow-style: none;
                /* scroll-snap 제거 - 초기 자동 스크롤 방지 */
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
            }

            #popular-places-container::-webkit-scrollbar,
            #new-places-container::-webkit-scrollbar,
            #special-deals-container-2::-webkit-scrollbar,
            #special-deals-container::-webkit-scrollbar {
                display: none;
            }

            #popular-places-container .place-card,
            #popular-places-container .deal-card,
            #popular-places-container .skeleton-product-card,
            #new-places-container .place-card,
            #new-places-container .deal-card,
            #new-places-container .skeleton-product-card,
            #special-deals-container-2 .place-card,
            #special-deals-container-2 .deal-card,
            #special-deals-container-2 .skeleton-product-card,
            #special-deals-container .place-card,
            #special-deals-container .deal-card,
            #special-deals-container .skeleton-product-card,
            #discount-products-container .place-card,
            #discount-products-container .deal-card,
            #discount-products-container .skeleton-product-card,
            #budget-products-container .place-card,
            #budget-products-container .deal-card,
            #budget-products-container .skeleton-product-card,
            #pet-products-container .place-card,
            #pet-products-container .deal-card,
            #pet-products-container .skeleton-product-card,
            #team-products-container .place-card,
            #team-products-container .deal-card,
            #team-products-container .skeleton-product-card {
                width: calc((100vw - 46px) / 2.3);
                min-width: calc((100vw - 46px) / 2.3);
                flex: 0 0 auto;
                /* scroll-snap-align 제거 */
            }

            /* 첫 번째 카드에 좌측 마진 - 타이틀과 시작점 정렬 (구체적 선택자) */
            /* spacer 요소가 첫 번째이므로 first-of-type 사용 */
            #popular-places-container .place-card:first-of-type,
            #popular-places-container .deal-card:first-of-type,
            #popular-places-container .skeleton-product-card:first-of-type,
            #new-places-container .place-card:first-of-type,
            #new-places-container .deal-card:first-of-type,
            #new-places-container .skeleton-product-card:first-of-type,
            #special-deals-container-2 .place-card:first-of-type,
            #special-deals-container-2 .deal-card:first-of-type,
            #special-deals-container-2 .skeleton-product-card:first-of-type,
            #special-deals-container .place-card:first-of-type,
            #special-deals-container .deal-card:first-of-type,
            #special-deals-container .skeleton-product-card:first-of-type,
            #discount-products-container .place-card:first-of-type,
            #discount-products-container .deal-card:first-of-type,
            #discount-products-container .skeleton-product-card:first-of-type,
            #budget-products-container .place-card:first-of-type,
            #budget-products-container .deal-card:first-of-type,
            #budget-products-container .skeleton-product-card:first-of-type,
            #pet-products-container .place-card:first-of-type,
            #pet-products-container .deal-card:first-of-type,
            #pet-products-container .skeleton-product-card:first-of-type,
            #team-products-container .place-card:first-of-type,
            #team-products-container .deal-card:first-of-type,
            #team-products-container .skeleton-product-card:first-of-type {
                margin-left: var(--mobile-padding);
            }

            /* 브랜드 소식 컨테이너 - 부모는 overflow visible로 변경 (이중 스크롤 방지) */
            .brand-updates-container {
                overflow: visible !important;
                overflow-x: visible !important;
            }

            /* 브랜드 소식 컨테이너 - 스크롤 시 0px까지 도달 가능하도록 */
            /* brand-news-grid가 유일한 스크롤 컨테이너 */
            .brand-updates-container .brand-news-grid {
                margin-left: calc(-1 * var(--mobile-padding));
                width: calc(100% + var(--mobile-padding));
                padding-right: var(--mobile-padding);
                overflow-x: auto;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            .brand-updates-container .brand-news-grid::-webkit-scrollbar {
                display: none;
            }

            /* 첫 번째 카드에 margin-left 적용 (grid가 아닌 카드에!) */
            .brand-updates-container .brand-news-card:first-of-type {
                margin-left: var(--mobile-padding);
            }

            /* 브랜드 소식 로딩 상태 - 스켈레톤 컨테이너 */
            .brand-updates-container .brand-news-loading {
                margin-left: calc(-1 * var(--mobile-padding));
                width: calc(100% + var(--mobile-padding));
                padding-right: var(--mobile-padding);
            }

            .brand-updates-container .brand-news-loading .bn-skeleton-card:first-of-type {
                margin-left: var(--mobile-padding);
            }
        }

        /* Responsive Design */
        /* 헤더 반응형 스타일은 css/components/header.css에서 관리됩니다 */
        @media (max-width: 1024px) {
            .content-section {
                padding: var(--tablet-padding);
                padding-top: 20px;
                overflow: visible;
            }

            /* 태블릿에서 섹션 간격 줄이기 */
            .content-section > div[style*="margin-bottom: 48px"] {
                margin-bottom: 36px !important;
            }

            /* 태블릿에서 히어로섹션 좌우 여백 제거 */
            .hero-section {
                margin-top: 0; /* 데스크톱 24px 오버라이드 */
                padding: 0;
            }

            .main-banner {
                border-radius: 0;
            }

            .tag-buttons-container {
                gap: 12px;
            }

            .tag-button {
                min-width: 100px;
                font-size: 14px;
            }

        }

        @media (max-width: 767px) {
            .content-section {
                padding-left: var(--mobile-padding);
                padding-right: 0;
                padding-top: 16px;
                overflow: visible;
            }

            /* NEW 스페이스 섹션의 중첩 래퍼 우측 여백 제거 */
            .section-wrapper,
            .slide-wrapper {
                padding-right: 0 !important;
                margin-right: 0 !important;
            }

            /* 섹션 헤더와 타이틀에 우측 여백 추가 (카드 컨테이너 제외) */
            .popular-places-header,
            .content-section > div[style*="margin-bottom"] > div:not([id$="-container"]):not(.special-deals-container):not(.brand-updates-container) {
                padding-right: var(--mobile-padding);
            }

            /* 모바일에서 섹션 간격 줄이기 */
            .content-section > div[style*="margin-bottom: 48px"] {
                margin-bottom: 10px !important;
            }

            /* 스토리 섹션은 약간 더 넓은 간격 */
            .content-section > div[style*="margin-bottom: 48px"]:has(#brandNewsContainer) {
                margin-bottom: 20px !important;
            }

            /* 헤더 스타일은 css/components/header.css에서 관리됩니다 */

            .tag-buttons-container {
                width: 100%;
                justify-content: flex-start;
                overflow-x: auto;
                flex-wrap: nowrap;
                gap: 8px;
                padding-bottom: 4px;
            }

            .tag-button {
                min-width: 120px;
                flex-shrink: 0;
                font-size: 13px;
            }

            .section-title {
                font-size: 20px;
            }


            .cards-grid {
                gap: 16px;
                margin-bottom: 36px;
                overflow: hidden;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            .cards-grid::-webkit-scrollbar {
                display: none;
            }


            .brand-card-image {
                width: 60px;
                height: 60px;
            }

            .brand-card-vertical .brand-card-image {
                width: 100%;
                height: 120px;
            }

            .brand-card-name {
                font-size: 14px;
            }

            .brand-card-description {
                font-size: 13px;
            }

            /* 모바일 가격 텍스트 크기 */
            .deal-title {
                font-size: 13px !important;
            }

            .deal-current-price {
                font-size: 14px !important;
                font-weight: 600 !important;
            }

            .deal-original-price {
                font-size: 11px !important;
            }

            .deal-discount {
                font-size: 12px !important;
            }

            .place-card-title {
                font-size: 13px !important;
            }

            .place-card-price {
                font-size: 14px !important;
            }

        }

        /* Popular Places Header Hover Effect */
        .popular-places-header:hover .arrow-icon {
            transform: translateX(4px);
        }

        .popular-places-header:hover {
            opacity: 0.8;
        }


        /* Heart Icon Styles */
        .heart-icon {
            position: absolute;
            right: 12px;
            bottom: 12px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .heart-icon svg {
            filter: brightness(0) invert(1);
        }

        .heart-icon:hover svg {
            filter: none;
        }

        .heart-icon:hover path {
            fill: rgba(254, 103, 105, 0.5);
            stroke: #FE6769;
        }

        .heart-icon.active svg {
            filter: none;
        }

        .heart-icon.active path {
            fill: rgba(254, 103, 105, 0.5);
            stroke: #FE6769;
        }

        /* Place Card 기본 스타일 */
        .place-card {
            width: 100%;
            min-width: 0; /* 그리드 아이템이 축소될 수 있도록 */
            height: auto;
            border-radius: var(--card-border-radius);
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
            box-sizing: border-box;
            overflow: visible; /* hover 효과를 위해 visible로 설정 */
        }

        /* Place Card 내부 콘텐츠 스타일 */
        .place-card-info {
            padding: 12px 0px 12px 0px;
            min-height: 74px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .place-card-title {
            color: black;
            font-size: 13px;
            font-family: Pretendard;
            font-weight: 500;
            margin-bottom: 3px;
            padding: 0;
            margin-left: 0;
            margin-right: 0;
            /* 2줄 제한 및 말줄임표 */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
        }

        .place-card-location {
            color: #9E9E9E;
            font-size: 13px;
            font-family: Pretendard;
            font-weight: 500;
            margin-bottom: 3px;
            padding: 0;
            margin-left: 0;
            margin-right: 0;
        }

        .place-card-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0;
            margin-left: 0;
            margin-right: 0;
        }

        .place-card-price {
            color: black;
            font-size: 16px;
            font-family: Pretendard;
            font-weight: 600;
            padding: 0;
            margin: 0;
        }

        .place-card-rating {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .place-card-star {
            color: #F8CF06;
            font-size: 12px;
        }

        .place-card-score {
            color: #9E9E9E;
            font-size: 12px;
            font-family: Pretendard;
            font-weight: 500;
        }

        /* 카테고리 아이콘 스타일 */
        .category-icon {
            position: absolute;
            left: 12px;
            top: 12px;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .category-icon.orange .category-dot {
            width: 8px;
            height: 8px;
            background: #F97316;
            border-radius: 50%;
        }

        .category-icon.green .category-dot {
            width: 8px;
            height: 8px;
            background: #10B981;
            border-radius: 50%;
        }

        .category-icon.blue .category-dot {
            width: 8px;
            height: 8px;
            background: #3B82F6;
            border-radius: 50%;
        }

        .category-icon.yellow .category-dot {
            width: 8px;
            height: 8px;
            background: #F59E0B;
            border-radius: 50%;
        }

        .category-icon.purple .category-dot {
            width: 8px;
            height: 8px;
            background: #8B5CF6;
            border-radius: 50%;
        }

        /* 추가 아이콘 스타일 */
        .additional-icon {
            position: absolute;
            left: 36px;
            top: 12px;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .additional-icon .icon-rect {
            width: 10px;
            height: 6px;
            background: #F98058;
            border-radius: 2px;
        }

        /* 배지 스타일 */
        .place-badge {
            position: absolute;
            left: 12px;
            top: 12px;
            padding: 4px 8px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            backdrop-filter: blur(8px);
            font-size: 12px;
            font-weight: 600;
            color: #667085;
        }

        .place-badge.new {
            right: 36px;
            left: auto;
        }

        /* 스페셜 배지 */
        .special-badge {
            position: absolute;
            left: 12px;
            bottom: 32px;
            width: 30px;
            height: 20px;
            background: linear-gradient(114deg, #FFCB5D 0%, #FA7C63 100%);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .special-badge .inner-rect {
            width: 16px;
            height: 8px;
            background: white;
            border-radius: 2px;
        }

        /* 가격에 번개 아이콘 */
        .price-with-lightning {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .lightning-icon {
            color: #3C82FA;
            font-size: 12px;
        }

        /* ========================================
           상품 카드 Skeleton 로딩 UI
           ======================================== */
        @keyframes productShimmer {
            0% {
                background-position: -468px 0;
            }
            100% {
                background-position: 468px 0;
            }
        }

        .skeleton-product-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .skeleton-product-card .skeleton-image {
            width: 100%;
            aspect-ratio: 1 / 1;
            background: linear-gradient(
                90deg,
                #e0e0e0 0%,
                #f0f0f0 20%,
                #e0e0e0 40%,
                #e0e0e0 100%
            ) !important;
            background-size: 468px 100% !important;
            animation: productShimmer 1.5s ease-in-out infinite !important;
            border-radius: 16px;
            position: relative;
            overflow: hidden;
        }

        /* Skeleton 이미지 ::before 제거 (기존 deal-card-image 스타일 덮어쓰기 방지) */
        .skeleton-product-card .skeleton-image::before {
            display: none !important;
            content: none !important;
        }

        .skeleton-product-card .deal-card-body {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 0;
        }

        .skeleton-product-card .skeleton-text {
            height: 12px;
            background: linear-gradient(
                90deg,
                #e0e0e0 0%,
                #f0f0f0 20%,
                #e0e0e0 40%,
                #e0e0e0 100%
            );
            background-size: 468px 100%;
            animation: productShimmer 1.5s ease-in-out infinite;
            border-radius: 4px;
        }

        .skeleton-product-card .skeleton-title {
            width: 80%;
            height: 16px;
        }

        .skeleton-product-card .skeleton-subtitle {
            width: 60%;
            height: 14px;
        }

        .skeleton-product-card .skeleton-price {
            width: 50%;
            height: 18px;
            margin-top: 4px;
        }

        /* 상품 에러 상태 UI */
        .product-error-state {
            text-align: center;
            padding: 60px 20px;
            background: #fef2f2;
            border-radius: 16px;
            width: 100%;
            grid-column: 1 / -1;
        }

        .product-error-state .error-icon {
            font-size: 48px;
            color: #ef4444;
            margin-bottom: 16px;
        }

        .product-error-state .error-title {
            margin: 0 0 8px;
            font-size: 18px;
            font-weight: 600;
            color: #111827;
        }

        .product-error-state .error-message {
            margin: 0 0 20px;
            font-size: 14px;
            color: #6b7280;
            line-height: 1.6;
        }

        .product-error-state .retry-button {
            padding: 10px 20px;
            background: #ef4444;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: background 0.2s ease;
        }

        .product-error-state .retry-button:hover {
            background: #dc2626;
        }

        .product-error-state .retry-button:active {
            transform: scale(0.98);
        }

        /* Flex 컨테이너에서 에러 상태 가로 스크롤 방지 */
        .special-deals-container .product-error-state {
            min-width: 100%;
            flex: 0 0 100%;
        }

        /* ========================================
           🏆 인기상품 랭킹 뱃지 스타일 - 미니멀 버전
           레퍼런스: 좌상단 모서리에 완전히 붙어있는 스타일
           ======================================== */
        .ranking-badge-minimal {
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            /* 좌상단 모서리만 둥글게 (이미지 border-radius와 맞춤) */
            border-radius: 8px 0 8px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            color: white;
            background: rgba(0, 0, 0, 0.85);
            z-index: 3;
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        /* 모바일 반응형 - 뱃지 크기 조정 */
        @media (max-width: 767px) {
            .ranking-badge-minimal {
                width: 22px;
                height: 22px;
                font-size: 12px;
                border-radius: 8px 0 5px 0;
            }
        }

        /* 섹션 구분선 */
        .section-divider {
            height: 1px;
            background: var(--border-color);
            margin: 32px 0;
        }

        /* 태블릿: content-section padding-right가 0이므로 구분선에 우측 여백 추가 */
        /* width: auto (기본값)이면 margin-right가 정상 적용됨 */
        @media (max-width: 1024px) {
            .section-divider {
                margin-right: var(--tablet-padding);
            }
        }

        /* 모바일: content-section padding-right가 0이므로 구분선에 우측 여백 추가 */
        @media (max-width: 767px) {
            .section-divider {
                margin: 24px 0;
                margin-right: var(--mobile-padding);
            }
        }

        /* ========================================
           카테고리 퀵링크 섹션
           ======================================== */
        .category-quicklinks {
            display: flex;
            justify-content: center; /* 데스크톱: 센터 정렬 */
            align-items: center;
            gap: 12px;
            padding: 0 0 24px 0; /* 상단: 0 (hero margin-bottom 24px 사용), 하단: 24px (균등 여백) */
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            background: white;
        }

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

        .category-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-width: 72px;
            padding: 12px 16px;
            text-decoration: none;
            border-radius: 12px;
            transition: all 0.2s ease;
            background: transparent;
            border: 1px solid transparent;
        }

        .category-link:hover {
            background: #f3f4f6;
            border-color: #e5e7eb;
        }

        .category-link .category-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px; /* 둥근 사각형 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            position: static;
            left: auto;
            top: auto;
            overflow: hidden; /* 이미지 클리핑 */
        }

        /* 카테고리 아이콘 이미지 스타일 */
        .category-link .category-icon .category-icon-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px; /* 둥근 사각형 */
        }

        /* 이미지가 있는 카테고리 아이콘은 배경 제거 */
        .category-link .category-icon:has(.category-icon-img) {
            background: transparent;
        }

        /* 각 카테고리별 아이콘 - 모두 이미지 사용으로 배경 제거 */
        .category-link:nth-child(1) .category-icon, /* 오피스 */
        .category-link:nth-child(2) .category-icon, /* 회의실 */
        .category-link:nth-child(3) .category-icon, /* 창고 */
        .category-link:nth-child(4) .category-icon, /* 스튜디오 */
        .category-link:nth-child(5) .category-icon, /* 스터디카페 */
        .category-link:nth-child(6) .category-icon { /* 짐보관 */
            background: transparent;
        }

        .category-link .category-name {
            font-size: 14px;
            font-weight: 500;
            color: #374151;
            white-space: nowrap;
        }

        /* 태블릿 반응형 */
        @media (max-width: 1024px) {
            .category-quicklinks {
                justify-content: flex-start; /* 태블릿: 좌측 정렬 (스크롤 대비) */
                padding: 0 0 20px 0; /* 상단: 0 (content-section padding-top 20px 사용), 하단: 20px */
                gap: 10px;
                /* 스크롤 컨테이너 패턴 - 상품 카드와 동일 */
                margin-left: calc(-1 * var(--tablet-padding));
                width: calc(100% + var(--tablet-padding));
                padding-right: var(--tablet-padding);
            }

            /* 첫 번째 링크에 좌측 마진 - 헤더와 시작점 정렬 */
            .category-quicklinks .category-link:first-of-type {
                margin-left: var(--tablet-padding);
            }

            .category-link {
                min-width: 68px;
                padding: 10px 14px;
                flex-shrink: 0;
            }

            .category-link .category-icon {
                width: 48px;
                height: 48px;
                font-size: 16px;
            }

            .category-link .category-name {
                font-size: 13px;
            }
        }

        /* 모바일 반응형 */
        @media (max-width: 767px) {
            .category-quicklinks {
                justify-content: flex-start; /* 모바일: 좌측 정렬 */
                padding: 0 0 16px 0; /* 상단: 0 (content-section padding-top 16px 사용), 하단: 16px */
                gap: 8px;
                /* 스크롤 컨테이너 패턴 - 상품 카드와 동일 */
                margin-left: calc(-1 * var(--mobile-padding));
                width: calc(100% + var(--mobile-padding));
                padding-right: var(--mobile-padding);
            }

            /* 첫 번째 링크에 좌측 마진 - 헤더와 시작점 정렬 */
            .category-quicklinks .category-link:first-of-type {
                margin-left: var(--mobile-padding);
            }

            .category-link {
                min-width: 64px;
                padding: 10px 12px;
                gap: 6px;
                flex-shrink: 0;
            }

            .category-link .category-icon {
                width: 44px;
                height: 44px;
                font-size: 14px;
            }

            .category-link .category-name {
                font-size: 13px;
            }
        }

        /* ========================================
           비교견적 CTA 배너 스타일 (미니멀)
           ======================================== */
        .rfq-cta-banner {
            margin-bottom: 32px;
        }

        /* 데스크톱: 신규상품 아래 배너만 표시 */
        .rfq-cta-mobile {
            display: none;
        }

        .rfq-cta-desktop {
            display: block;
        }

        .rfq-cta-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 16px;
            background: #191919;
            border-radius: 6px;
            text-decoration: none;
            transition: background 0.2s ease;
        }

        .rfq-cta-link:hover {
            background: #2d2d2d;
        }

        .rfq-cta-content {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .rfq-cta-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .rfq-cta-icon i {
            font-size: 18px;
            color: white;
        }

        .rfq-cta-title {
            font-size: 15px;
            font-weight: 500;
            color: white;
        }

        .rfq-cta-arrow {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            transition: transform 0.2s ease;
        }

        .rfq-cta-link:hover .rfq-cta-arrow {
            transform: translateX(3px);
        }

        /* 태블릿 반응형 */
        @media (max-width: 1024px) {
            /* 모바일/태블릿: 할인 중인 공간 아래 배너만 표시 */
            .rfq-cta-mobile {
                display: block;
            }

            .rfq-cta-desktop {
                display: none;
            }

            .rfq-cta-banner {
                margin-right: var(--tablet-padding);
            }
        }

        /* 모바일 반응형 */
        @media (max-width: 767px) {
            .rfq-cta-banner {
                margin-right: var(--mobile-padding);
                margin-bottom: 24px;
            }

            .rfq-cta-link {
                padding: 8px 14px;
                justify-content: center;
            }

            .rfq-cta-icon i {
                font-size: 16px;
                line-height: 1;
            }

            .rfq-cta-title {
                font-size: 14px;
                line-height: 1;
            }

            .rfq-cta-arrow {
                display: none;
            }
        }

        /* ========================================
           스켈레톤 반응형 표시 규칙
           ======================================== */
        /* 데스크톱 (≥1200px): 5개 표시 */
        @media (min-width: 1200px) {
            .special-deals-container > .skeleton-product-card:nth-child(n+6) {
                display: none !important;
            }
        }

        /* 태블릿 (768~1199px): 4개 표시 */
        @media (max-width: 1199px) and (min-width: 768px) {
            .special-deals-container > .skeleton-product-card:nth-child(n+5) {
                display: none !important;
            }
        }

        /* 모바일 (≤767px): 3개 표시 */
        @media (max-width: 767px) {
            .special-deals-container > .skeleton-product-card:nth-child(n+4) {
                display: none !important;
            }
        }

        /* ========================================
           모바일 할인/인기상품 섹션 - 3열 2줄 그리드
           ======================================== */
        @media (max-width: 767px) {
            #discount-products-container,
            #popular-places-container {
                /* 가로 스크롤 → 그리드로 변경 */
                display: grid !important;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;

                /* 스크롤 관련 속성 제거 */
                overflow-x: visible;
                margin-left: 0;
                width: 100%;
                padding-right: var(--mobile-padding);
            }

            /* 6개까지만 표시 (3x2) */
            #discount-products-container > *:nth-child(n+7),
            #popular-places-container > *:nth-child(n+7) {
                display: none !important;
            }

            /* 카드 너비 리셋 */
            #discount-products-container .place-card,
            #discount-products-container .deal-card,
            #discount-products-container .skeleton-product-card,
            #popular-places-container .place-card,
            #popular-places-container .deal-card,
            #popular-places-container .skeleton-product-card {
                width: 100% !important;
                min-width: 0 !important;
                margin-left: 0 !important;
            }

            /* ========================================
               가격 세로 배치: 할인가 위, 할인율+원가 아래
               ======================================== */
            #discount-products-container .deal-price-section,
            #popular-places-container .deal-price-section {
                display: grid !important;
                grid-template-columns: auto 1fr;
                grid-template-rows: auto auto;
                grid-template-areas:
                    "current current"
                    "rate original";
                gap: 1px 4px;
                align-items: baseline;
            }

            /* 내부 div를 contents로 만들어 자식들이 그리드에 직접 참여 */
            #discount-products-container .deal-price-section > div:first-child,
            #popular-places-container .deal-price-section > div:first-child {
                display: contents !important;
            }

            /* 할인가 - 첫 줄 전체 차지 */
            #discount-products-container .deal-current-price,
            #popular-places-container .deal-current-price {
                grid-area: current !important;
                font-size: 14px !important;
                font-weight: 600 !important;
            }

            /* 할인율 - 둘째 줄 왼쪽 */
            #discount-products-container .deal-price-section > div:first-child > span:first-child,
            #popular-places-container .deal-price-section > div:first-child > span:first-child {
                grid-area: rate !important;
                font-size: 14px !important;
                font-weight: 600 !important;
            }

            /* 원가 - 둘째 줄 오른쪽 (할인율 옆) */
            #discount-products-container .deal-original-price,
            #popular-places-container .deal-original-price {
                grid-area: original !important;
                font-size: 13px !important;
            }

            /* 모바일 할인/인기상품 섹션에서 원가 단위(월/시간) 숨기기 */
            #discount-products-container .deal-original-price .price-unit,
            #popular-places-container .deal-original-price .price-unit {
                display: none;
            }

            /* 모바일 할인/인기상품 섹션에서 위치 핀 아이콘 숨기기 */
            #discount-products-container .deal-location svg,
            #popular-places-container .deal-location svg {
                display: none;
            }
        }