/* ============================================================
   KREAM Home 레이아웃 오버레이 (홈 index.html 전용) — v2
   - claude.ai/design "Kream homepage clone" 비주얼을 현재 섹션 구성에 입힘.
   - 섹션 종류·순서·데이터 배선(index-main.js)·반응형 스크롤은 그대로 유지.
   - 카드/섹션 헤더의 "디자인 레이아웃(타이포·간격·색·그리드)"만 교체.

   ⚠️ specificity 주의:
   toss-style.css 가 카드 전반을 `.notion-section .deal-*` (0,2,0) /
   `.content-section .notion-section .deal-card` (0,3,0) + !important 로 잡고 있음.
   따라서 여기 셀렉터도 동일 이상 specificity 로 맞춰야 실제로 적용됨.
   (단순 `.deal-title` 같은 0,1,0 셀렉터는 무시됨 — v1 실패 원인.)

   되돌리려면 index.html 의 이 파일 <link> 한 줄만 제거.
   ============================================================ */

:root {
    --kream-orange: #fa622f;
    --kream-discount: #ef5b51;
    --kream-ink: #1a1a1a;
    --kream-meta: #b0b0b0;
    --kream-heading: #222;
}

/* ============================================================
   1. 섹션 헤더 — 21px / 800 / -.5px, "더보기 ›"
   (.content-section .notion-section-title 가 20/600 으로 잡고 있어 동일 specificity 로 덮음)
   ============================================================ */
.content-section .notion-section-title {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: var(--kream-heading) !important;
    letter-spacing: -0.5px !important;
    line-height: 1.25 !important;
}

.content-section .notion-section-subtitle {
    font-size: 13px !important;
    color: #8b8b8b !important;
    font-weight: 400 !important;
}

.content-section .notion-section-more {
    font-size: 13px !important;
    color: #999 !important;
    font-weight: 500 !important;
}

.content-section .notion-section-more::after {
    content: " ›";
}

@media (max-width: 767px) {
    .content-section .notion-section-title {
        font-size: 18px !important;
    }
}

/* ============================================================
   2. 카드 컨테이너 평탄화 — KREAM 은 흰 배경/그림자 없는 '플랫 카드'
   (toss-style 의 .content-section .notion-section .deal-card = 0,3,0 라 동일 specificity 필요)
   ============================================================ */
.content-section .notion-section .deal-card,
.content-section .notion-section .place-card {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    gap: 10px !important;
}

.content-section .notion-section .deal-card:hover,
.content-section .notion-section .place-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================================
   3. 카드 이미지 — KREAM radius 8px (toss-style: radius-lg/16px → 8px)
   ============================================================ */
.notion-section .deal-card-image,
.notion-section .place-card-image {
    border-radius: 8px !important;
}

/* ============================================================
   4. 카드 텍스트 — 이름 13/700, 위치·메타 12/#b0b0b0
   ============================================================ */
.notion-section .deal-card-info,
.notion-section .deal-card-body {
    gap: 3px !important; /* 상품명↔지역(.deal-text-info 3px)과 동일하게 통일 */
    padding: 0 !important;
}

.notion-section .deal-text-info {
    gap: 3px !important;
}

.notion-section .deal-title,
.notion-section .place-card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--kream-ink) !important;
    line-height: 1.4 !important;
}

.notion-section .deal-location,
.notion-section .place-card-location {
    font-size: 12px !important;
    color: var(--kream-meta) !important;
    font-weight: 400 !important;
}

.notion-section .deal-location svg path {
    fill: var(--kream-meta) !important;
}

/* ============================================================
   5. 가격 — 할인율 #ef5b51 700 + 가격 #000 700 15px (한 줄)
   ============================================================ */
.notion-section .deal-price-section {
    gap: 3px !important; /* 가격↔원가도 상품명↔지역과 동일 간격 */
}

.notion-section .deal-price-row {
    gap: 5px !important;
}

.notion-section .deal-current-price,
.notion-section .place-card-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #000 !important;
}

.notion-section .discount-rate,
.notion-section .deal-discount-rate,
.notion-section .deal-discount {
    color: var(--kream-discount) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    background: none !important;
    padding: 0 !important;
}

.notion-section .original-price-text,
.notion-section .deal-original-price {
    font-size: 12px !important;
    color: var(--kream-meta) !important;
    font-weight: 400 !important;
}

/* ============================================================
   6. 그리드 — KREAM 밀도: 데스크탑 6열, column-gap 16 / row-gap 30
   (toss-style .notion-section .special-deals-container 가 gap 을 0,2,0 으로 잡아 동일 specificity 필요)
   모바일/태블릿 가로 스크롤은 product-card.css 그대로 유지.
   ============================================================ */
@media (min-width: 1200px) and (max-width: 1599px) {
    .notion-section .special-deals-container {
        grid-template-columns: repeat(6, 1fr) !important;
        column-gap: 8px !important;
        row-gap: 24px !important;
    }
    /* 6번째 카드까지 노출 (기존엔 5개에서 잘림) */
    .special-deals-container:not(.popular-places-container) .deal-card:nth-child(6) {
        display: flex !important;
    }
}

@media (min-width: 1600px) and (max-width: 1920px) {
    .notion-section .special-deals-container {
        column-gap: 8px !important;
        row-gap: 24px !important;
    }
}

/* ============================================================
   7. 상품 카드 섹션 회색 배경 → 흰색 통일 (KREAM 흰 배경)
   .featured-sections-wrapper 가 데스크탑(≥1025px)에서 전 섹션을
   #F2F4F6 풀폭 밴드로 깔고 있던 것을 흰색으로 바꿈. (모바일은 이미 흰색)
   ============================================================ */
@media (min-width: 1025px) {
    .featured-sections-wrapper {
        background: #fff !important;
    }
    /* 회색 배경 전제로 진하게(#D1D6DB) 잡았던 구분선 → 흰 배경에 맞춰 연하게 */
    .featured-sections-wrapper .featured-divider {
        background: #f0f0f0 !important;
    }
}

/* ============================================================
   8. KREAM 레이아웃 — 좌측 사이드바 제거 + 콘텐츠 1240px 가운데 정렬
      + 사이드바 메뉴를 상단 KREAM 네비로 이동 (데스크탑 ≥1025px, index 전용)
      ⚠ 공유 컴포넌트(sidebar.js/header.js)는 안 건드림 — index 페이지에서만 숨김/재배치.
      ⚠ 모바일(≤1024px)은 기존 사이드바(햄버거)·바텀네비 그대로.
   ============================================================ */
.kh { display: none; }  /* 기본 숨김 (모바일은 기존 컴포넌트 헤더 사용) */

@media (min-width: 1025px) {
    /* 좌측 사이드바 제거 (단, 햄버거(☰)로 .open 시엔 드로어로 노출) */
    .app-container .sidebar:not(.open) {
        display: none !important;
    }

    /* 콘텐츠 가운데 정렬 → 우측 과다 여백 해결 (기존: margin-left 240 + max-width 1200 좌측 고정) */
    .main-content {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 1240px !important;
        width: 100% !important;
        /* 일부 페이지의 .main-content { overflow-x:hidden }는 CSS 스펙상 overflow-y를
           auto로 강제 → 1240 중앙정렬 후 콘텐츠가 살짝 넘치면 '뷰포트가 아닌 1240 우측
           경계'에 엉뚱한 세로 스크롤바가 생긴다. clip은 다른 축을 auto로 강제하지 않으므로
           가로는 잘리되(가로 스크롤 방지) 세로 스크롤은 body가 담당하게 한다. */
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    /* ===== KREAM 클론 헤더 (3단) — claude.ai/design 원본 inline 스타일 그대로 ===== */
    .kh {
        display: block;
        background: #fff;
        border-bottom: 1px solid #eee;
        margin-bottom: 22px;
        position: sticky;
        top: 0;
        z-index: 150;   /* 필터섹션(sticky z-index:100) 위로 — 서브탭 드롭다운이 가려지던 버그 수정 */
    }

    /* 1단: 유틸리티 바 (우측 정렬, 작은 회색) */
    .kh-util-inner {
        max-width: 1240px; margin: 0 auto; padding: 7px 40px;
        display: flex; justify-content: flex-end; align-items: center; gap: 18px;
    }
    .kh-util-link {
        font-size: 11px; color: #999; text-decoration: none;
        background: none; border: 0; padding: 0; cursor: pointer; line-height: 1;
        font-family: inherit;
    }
    .kh-util-link:hover { color: #555; }
    .kh-login { color: #444; font-weight: 500; }

    /* 2단: 로고 + 메인 네비 + 검색/메뉴 */
    .kh-main-inner {
        max-width: 1240px; margin: 0 auto; padding: 2px 40px 14px;
        display: flex; align-items: center;
    }
    /* 로고 — 헤더 1행(유틸)+2행(로고/네비) 합친 높이로 좌측에 크게 (main-inner 기준 절대배치) */
    .kh-logo {
        position: absolute;
        left: 40px;
        top: -25px;          /* 1행(유틸바, 25px)까지 위로 확장 */
        height: 67px;        /* util(25) + main(42) */
        display: flex; align-items: center;
        z-index: 5;
        font-weight: 900; font-style: italic; font-size: 30px; letter-spacing: -1px;
        color: #000; text-decoration: none;
    }
    .kh-logo-img { height: 48px; width: auto; display: block; }
    /* 검색 펼침 시 로고 숨김(검색바가 가리는 영역과 충돌 방지) */
    .kh-main-inner.searching .kh-logo { opacity: 0; }
    .kh-nav {
        margin-left: auto; display: flex; gap: 22px; align-items: center;
        font-size: 16px; font-weight: 700;
    }
    .kh-nav-link { color: #222; text-decoration: none; }
    /* 내놓기: HOME/시세와 동일한 nav 링크 스타일(button 리셋) + 쉼머 강조 */
    button.kh-nav-link {
        background: none; border: 0; padding: 0; cursor: pointer;
        font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
    }
    /* 내놓기: 텍스트 '안'의 쉼머 — 검정 글자 위를 오렌지 글린트가 지나감.
       button.kh-nav-link(0,1,1)의 background:none 을 이기려 .kh-nav-link.kh-shimmer(0,2,0) 사용 */
    .kh-nav-link.kh-shimmer {
        color: #222;
        background: linear-gradient(100deg, #222 0%, #222 38%, #c5f120 50%, #222 62%, #222 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: khShimmer 2.8s linear infinite;
    }
    /* 양 끝(글린트가 글자 밖)에서 시작·종료 → 루프 이음매 없음(중간 50%에서 글자 가로지름) */
    @keyframes khShimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* 로그인 유저 드롭다운 (유틸바) — 서브탭 드롭다운과 동일 디자인, 우측 정렬 */
    .kh-user-wrap { position: relative; display: inline-flex; align-items: center; }
    .kh-user-trigger { display: inline-flex; align-items: center; }
    .kh-caret { margin-left: 3px; font-size: 9px; line-height: 1; }
    .kh-user-dropdown { left: auto !important; right: 0 !important; }
    .kh-user-wrap:hover .kh-user-dropdown,
    .kh-user-wrap:focus-within .kh-user-dropdown {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
    button.kh-dd-item {
        width: 100%; text-align: left;
        background: none; border: 0; cursor: pointer; font-family: inherit;
    }
    .kh-nav-link.active { color: #000; }
    .kh-nav-link:hover { color: #000; }
    .kh-actions { display: flex; gap: 16px; align-items: center; margin-left: 24px; }
    .kh-icon { background: none; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; }

    /* 검색 active 바 — 검색 아이콘 클릭 시 로고/네비 행 위로 펼쳐짐 */
    .kh-main-inner { position: relative; }
    .kh-searchbar {
        position: absolute;
        inset: 0;
        padding: 0 40px;
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
        z-index: 10;
    }
    .kh-main-inner.searching .kh-searchbar {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .kh-search-ico { flex-shrink: 0; }
    .kh-search-input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: none;
        background: transparent;
        font-family: inherit;
        font-size: 20px;
        font-weight: 500;
        color: #222;
        letter-spacing: -.3px;
    }
    .kh-search-input::placeholder { color: #bbb; font-weight: 400; }
    .kh-search-clear {
        flex-shrink: 0;
        background: none; border: 0; padding: 6px; cursor: pointer;
        display: flex; align-items: center; border-radius: 50%;
    }
    .kh-search-clear:hover { background: #f3f3f3; }
    /* 신규 표시 red dot — 기본 숨김. .has-new(신규 정보 등록 시 JS가 부여)일 때만 노출.
       텍스트 우상단 superscript 위치 (line-height 영향 안 받게 top:-0.55em) */
    .kh-dot {
        display: none;
        width: 4px; height: 4px; border-radius: 50%;
        background: #fa622f; margin-left: 2px;
        position: relative; top: -0.55em; vertical-align: baseline;
    }
    .kh-nav-link.has-new .kh-dot,
    .kh-tab.has-new .kh-dot {
        display: inline-block;
    }

    /* 3단: 서브 네비 탭 */
    .kh-sub { border-top: 1px solid #f1f1f1; }
    .kh-sub-inner {
        max-width: 1240px; margin: 0 auto; padding: 0 40px;
        display: flex; gap: 22px; align-items: center; height: 46px; font-size: 14px;
    }
    .kh-tab {
        color: #444; text-decoration: none; line-height: 46px; height: 46px;
        border-bottom: 2px solid transparent;
    }
    /* index 에서는 활성 탭 없음(비활성) → hover 시에만 밑줄 효과 */
    .kh-tab:hover { color: #000; border-bottom-color: #000; }
    .kh-tab.active { color: #000; font-weight: 700; border-bottom-color: #000; }

    /* 서브탭 드롭다운 (특가/혜택·비교견적) — hover 시 노출 */
    .kh-tab-wrap { position: relative; display: flex; align-items: center; }
    .kh-tab-wrap > .kh-tab { display: flex; }
    .kh-dropdown {
        position: absolute; top: 100%; left: 0;
        min-width: 150px;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
        padding: 8px 0;
        opacity: 0; visibility: hidden;
        transform: translateY(6px);
        transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
        z-index: 120;
    }
    .kh-tab-wrap:hover .kh-dropdown,
    .kh-tab-wrap:focus-within .kh-dropdown {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
    .kh-dd-item {
        display: block;
        padding: 9px 18px;
        font-size: 14px; font-weight: 500;
        color: #444;
        text-decoration: none;
        white-space: nowrap;
    }
    .kh-dd-item:hover { background: #f6f6f6; color: #000; }

    /* 기존 컴포넌트 헤더 바는 숨김 — 단, 검색 오버레이(#headerSearchOverlay)는
       .main-header 의 형제라 유지되며, 검색/알림 버튼은 DOM 에 남아 onclick 트리거로 동작 */
    #header-root .main-header { display: none !important; }

    /* 모바일 바텀네비용 바텀시트들이 데스크탑에서 안 숨겨져 좌측 여백에 새던 것 정리.
       (.bottom-nav 자체는 이미 display:none 이지만 시트들이 누락돼 있었음) */
    #find-space-sheet,
    #profile-sheet,
    #profile-sheet-overlay {
        display: none !important;
    }
}

/* ============================================================
   9. KREAM 클론 푸터 (.kf) — 풀폭 #fafafa 배경 + 1240 중앙
      claude.ai/design 원본 푸터 구조에 싱클 실제 데이터로 채움.
      데스크탑(≥1025px)만 노출, 모바일은 기존 컴포넌트 .footer 유지.
   ============================================================ */
.kf { display: none; }

@media (min-width: 1025px) {
    /* 기존 컴포넌트 푸터 숨김 (버튼 핸들러는 DOM 유지 → onclick 트리거로 인재채용/제휴/신고/건의 모달 동작) */
    .main-content > .footer { display: none !important; }

    .kf {
        display: block;
        background: #fafafa;
        border-top: 1px solid #eee;
        margin-top: 72px;
        font-family: 'Noto Sans KR', var(--toss-font-sans), sans-serif;
    }
    .kf-top {
        max-width: 1240px; margin: 0 auto; padding: 48px 40px;
        display: flex; justify-content: space-between; flex-wrap: wrap; gap: 48px;
    }
    /* 고객센터 + 앱 */
    .kf-cs { min-width: 280px; }
    .kf-cs-label { font-size: 12px; font-weight: 700; color: #999; letter-spacing: 1px; margin-bottom: 12px; }
    .kf-cs-phone { display: block; font-size: 26px; font-weight: 900; color: #222; letter-spacing: -1px; text-decoration: none; }
    .kf-cs-sub { font-size: 13px; color: #9a9a9a; margin-top: 10px; line-height: 1.7; }
    .kf-cs-actions { display: flex; gap: 10px; margin-top: 18px; }
    .kf-pill {
        font-size: 13px; font-weight: 600; color: #555; background: #fff;
        border: 1px solid #ddd; border-radius: 8px; padding: 9px 16px;
        cursor: pointer; text-decoration: none; font-family: inherit;
    }
    .kf-pill:hover { background: #f3f3f3; }
    .kf-gplay { display: inline-block; margin-top: 18px; }
    .kf-gplay img { display: block; height: 40px; width: auto; }
    /* 링크 컬럼 */
    .kf-cols { display: flex; gap: 60px; flex-wrap: wrap; }
    .kf-col { display: flex; flex-direction: column; gap: 11px; }
    .kf-col-title { font-size: 13px; font-weight: 700; color: #333; margin-bottom: 5px; }
    .kf-link {
        font-size: 13px; color: #999; text-decoration: none;
        background: none; border: 0; padding: 0; text-align: left;
        cursor: pointer; font-family: inherit;
    }
    .kf-link:hover { color: #555; }
    .kf-link-em { font-weight: 700; color: #666; }
    /* 하단 사업자 정보 바 */
    .kf-bottom { border-top: 1px solid #eee; }
    .kf-bottom-inner {
        max-width: 1240px; margin: 0 auto; padding: 24px 40px;
        font-size: 12px; color: #aaa; line-height: 1.9;
    }
    .kf-biz-title { font-weight: 700; color: #888; margin-bottom: 8px; }
    /* 통신판매중개자 고지 문구 */
    .kf-disclaimer {
        margin: 14px 0 0;
        max-width: 920px;
        font-size: 12px;
        color: #aaa;
        line-height: 1.7;
    }
    .kf-copy { margin-top: 12px; color: #bbb; }
}

/* ============================================================
   10. 스토리(브랜드 소식) 카드 → 상품 카드와 동일한 KREAM 플랫 스타일로 통일
       + 햄버거 사이드바 드로어 닫기 수단(오버레이/X) 데스크탑 노출
   ============================================================ */
@media (min-width: 1025px) {
    /* --- 스토리 카드: .deal-card 와 동일 톤(플랫·8px·1:1·제목 13/700) --- */
    /* 스토리 캐러셀: 가로형 16:9 카드, 1열 4개 노출 + 가로 스크롤(화살표) */
    .notion-section .brand-updates-container {
        display: block !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }
    .notion-section .brand-news-grid {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .notion-section .brand-news-grid::-webkit-scrollbar { display: none; }
    .notion-section .brand-news-card {
        flex: 0 0 calc((100% - 24px) / 4) !important; /* 4개 노출 (gap 8 × 3, 상품카드와 동일) */
        scroll-snap-align: start;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .notion-section .brand-news-card:hover { transform: none !important; }
    .notion-section .brand-news-card .card-image {
        aspect-ratio: 16 / 9 !important; /* 가로형 */
        border-radius: 8px !important;
    }

    /* 스토리 캐러셀 화살표 — hero(.banner-nav-arrow) UI 그대로 재사용 (잘림 방지 위해 안쪽 8px) */
    .kh-story-carousel { position: relative; }
    .kh-story-carousel .banner-nav-arrow { top: 38%; }       /* 카드 이미지 중앙에 맞춤 */
    .kh-story-carousel .banner-nav-arrow.prev { left: 8px; }
    .kh-story-carousel .banner-nav-arrow.next { right: 8px; }
    .kh-story-carousel:hover .banner-nav-arrow {
        opacity: 1 !important;
        visibility: visible !important;
    }
    .notion-section .brand-news-card .card-body {
        padding: 10px 1px 0 !important;
    }
    .notion-section .brand-news-card .company-name { /* 뉴스 제목 → 상품 카드 제목 톤 */
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
    .notion-section .brand-news-card .company-row {
        margin-top: 4px !important;
        gap: 5px !important;
    }
    .notion-section .brand-news-card .company-logo,
    .notion-section .brand-news-card .company-logo-placeholder {
        width: 16px !important;
        height: 16px !important;
    }
    .notion-section .brand-news-card .company-slogan { /* 회사명 → 회색 메타(.deal-location 톤) */
        font-size: 12px !important;
        font-weight: 400 !important;
        color: #b0b0b0 !important;
    }

    /* --- 햄버거 드로어: 우측에서 슬라이드인 + 닫기 수단 복구 --- */
    .app-container .sidebar.open {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        height: 100% !important;
        z-index: 1000 !important;
        animation: khSidebarRight .25s ease both !important;
    }
    /* 오버레이를 콘텐츠 위(헤더 z-index 90 위)로 올려 클릭-아웃 닫힘 + 딤 처리 */
    .sidebar-overlay.active { display: block !important; z-index: 999 !important; }
    .app-container .sidebar.open .sidebar-close-btn { display: flex !important; }
}

/* 우측 사이드바 슬라이드인 키프레임 */
@keyframes khSidebarRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ============================================================
   11. 그룹A 리스팅 페이지 공통 — 흰 배경 통일 + 필터 CTA KREAM 스타일
   (폰트는 이미 Pretendard로 동일 — 이질감은 toss 버튼 스타일 때문이었음)
   ============================================================ */
/* 페이지 회색 배경(#F2F4F6) → 흰색 (카드 뒤/콘텐츠 주변 회색 제거) */
body { background: #fff !important; }
/* toss 회색 플로팅 패널(#F2F4F6 라운드) → 흰색 통일 (페이지별 래퍼 포함) */
.content-section,
.search-results-section { background: #fff !important; }
/* 일부 페이지(계정/거래: my-points·payment 등)는 .main-content 자체에 회색(#F4F5F7/--toss-bg-base)을
   인라인 지정 → 흰색으로 덮음. (헤더/푸터/콘텐츠만 흰 페이지는 main-content에 bg 없어 무영향) */
.main-content { background: #fff !important; }

/* 검색 결과 그리드 → product 리스팅과 동일(4열, gap 8/24) */
@media (min-width: 1025px) {
    .search-results-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        column-gap: 8px !important;
        row-gap: 24px !important;
    }
}

/* 카테고리 네비(필터섹션) 상하 여백 제거(0) */
.filter-section { padding-top: 0 !important; padding-bottom: 0 !important; }

/* 필터 CTA(내 위치·할인·카테고리·가격·거리·서브카테고리) → KREAM 톤: 흰 배경 + 얇은 테두리,
   상하 패딩 5px(기존 10px의 50%) + font 13px 로 더 얇고 심플하게.
   (서브카테고리 .subcategory-filter 는 .filter-section 밖이라 별도 포함) */
.filter-section .location-filter-btn,
.filter-section .discount-toggle,
.filter-section .price-filter-button,
.filter-section .filter-button,
.filter-section .distance-btn,
.subcategory-filter,
.subcategory-filters .filter-button,
.sort-select {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    color: #444 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    line-height: 1.3 !important;
    height: auto !important;       /* 검색 등 고정 height(44px) 무력화 → product와 동일 두께 */
    min-height: 0 !important;
    box-shadow: none !important;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.filter-section .location-filter-btn:hover,
.filter-section .discount-toggle:hover,
.filter-section .price-filter-button:hover,
.filter-section .filter-button:hover,
.filter-section .distance-btn:hover,
.subcategory-filter:hover,
.subcategory-filters .filter-button:hover {
    border-color: #999 !important;
    color: #111 !important;
}
/* 활성/선택 = KREAM 블랙(토스 블루 대체) */
.filter-section .filter-button.active,
.filter-section .distance-btn.active,
.filter-section .discount-toggle.active,
.filter-section .location-filter-btn.active,
.subcategory-filter.active,
.subcategory-filters .filter-button.active {
    background: #222 !important;
    color: #fff !important;
    border-color: #222 !important;
}
.filter-section .filter-button.active svg,
.filter-section .discount-toggle.active svg { stroke: #fff !important; }
.sort-select:hover { border-color: #999 !important; color: #111 !important; }

/* 개수 텍스트(예: 29개) → 색 #222, 굵기 400 */
.results-count { color: #222 !important; font-weight: 400 !important; }

/* 검색 2열 카테고리(.additional-tab-section) 상단 구분선 제거 */
.additional-tab-section { border-top: none !important; }

/* 정렬 select: background:#fff 로 지워졌던 드롭다운 화살표 복구 + 우측 여백 축소(36→28px) */
.sort-select {
    padding-right: 28px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center !important;
}

/* 더보기(load-more) 버튼 → KREAM 톤(흰 배경 + 얇은 테두리, 그림자 제거) */
.load-more-button {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    color: #333 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.load-more-button:hover {
    border-color: #999 !important;
    color: #111 !important;
    background: #fafafa !important;
}

/* ============================================================
   12. .deal-card 어디에 있든 KREAM 통일 (검색 .search-results-grid, 북마크 등
   .notion-section 밖 카드 포함). notion 카드는 위 §의 더 높은 specificity 규칙이 적용됨. */
.deal-card {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    gap: 10px !important;
}
.deal-card:hover { transform: none !important; box-shadow: none !important; }
.deal-card .deal-card-image { border-radius: 8px !important; }
.deal-card .deal-card-info { gap: 3px !important; padding: 0 !important; }
.deal-card .deal-price-section { gap: 3px !important; }
.deal-card .deal-title {
    font-size: 13px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.4 !important;
}
.deal-card .deal-location { font-size: 12px !important; color: #b0b0b0 !important; font-weight: 400 !important; }
.deal-card .deal-location svg path { fill: #b0b0b0 !important; }
.deal-card .deal-current-price { font-size: 15px !important; font-weight: 700 !important; color: #000 !important; }
.deal-card .discount-rate,
.deal-card .deal-discount-rate,
.deal-card .deal-discount {
    color: #ef5b51 !important; font-weight: 700 !important; font-size: 15px !important; background: none !important; padding: 0 !important;
}
.deal-card .original-price-text,
.deal-card .deal-original-price { font-size: 12px !important; color: #b0b0b0 !important; font-weight: 400 !important; }