/* ========================================
   Notion Style Design System
   노션 스타일 디자인 시스템
   ======================================== */

/* ========================================
   CSS Variables - 노션 컬러 팔레트
   ======================================== */
:root {
    /* 노션 기본 색상 */
    --notion-black: #37352F;
    --notion-dark-gray: #787774;
    --notion-gray: #9B9A97;
    --notion-light-gray: #F7F6F3;
    --notion-white: #FFFFFF;

    /* 노션 강조 색상 (최소화) */
    --notion-blue: #2383E2;
    --notion-red: #E03E3E;
    --notion-orange: #D9730D;
    --notion-yellow: #DFAB01;
    --notion-green: #0F7B6C;
    --notion-purple: #6940A5;
    --notion-pink: #AD1A72;

    /* 배경 색상 */
    --notion-bg-default: #FFFFFF;
    --notion-bg-gray: #F7F6F3;
    --notion-bg-hover: rgba(55, 53, 47, 0.08);
    --notion-bg-active: rgba(55, 53, 47, 0.16);

    /* 보더 색상 */
    --notion-border: rgba(55, 53, 47, 0.09);
    --notion-border-strong: rgba(55, 53, 47, 0.16);

    /* 그림자 (최소화) */
    --notion-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --notion-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.08);

    /* 타이포그래피 */
    --notion-font-size-xs: 12px;
    --notion-font-size-sm: 14px;
    --notion-font-size-base: 16px;
    --notion-font-size-lg: 18px;
    --notion-font-size-xl: 20px;
    --notion-font-size-2xl: 24px;
    --notion-font-size-3xl: 30px;

    /* 간격 */
    --notion-space-1: 4px;
    --notion-space-2: 8px;
    --notion-space-3: 12px;
    --notion-space-4: 16px;
    --notion-space-5: 20px;
    --notion-space-6: 24px;
    --notion-space-8: 32px;
    --notion-space-10: 40px;
    --notion-space-12: 48px;

    /* 레이아웃 */
    --notion-content-width: 900px;
    --notion-content-padding: 96px;

    /* 트랜지션 */
    --notion-transition-fast: 0.15s ease;
    --notion-transition-normal: 0.2s ease;
    --notion-transition-slow: 0.3s ease;

    /* 보더 라디우스 */
    --notion-radius-sm: 4px;
    --notion-radius-md: 6px;
    --notion-radius-lg: 8px;
}

/* ========================================
   섹션 헤더 - 노션 스타일
   ======================================== */
.notion-section {
    width: 100%;
    position: relative;
    margin-bottom: 32px;
}

/* ========================================
   섹션 아이콘 래퍼 - 둥근 배경 아이콘
   ======================================== */
.notion-section-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
}

.notion-section-icon-wrapper i {
    font-size: 16px;
    color: #ffffff;
}

/* 아이콘 색상 변형 */
.notion-section-icon--purple {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
}

.notion-section-icon--blue {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
}

.notion-section-icon--green {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
}

.notion-section-icon--orange {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
}

.notion-section-icon--red {
    background: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
}

.notion-section-icon--pink {
    background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
}

/* 타이틀 그룹 내 아이콘 + 타이틀 래퍼 정렬 */
.notion-section-title-group .notion-section-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notion-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0; /* 타이틀~카드 간격 12px 유지 */
}

/* 더보기 버튼 */
.notion-section-more {
    font-size: var(--notion-font-size-sm);
    font-weight: 500;
    color: var(--notion-gray);
    text-decoration: underline;
    transition: color var(--notion-transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-end; /* 하단 정렬 */
}

.notion-section-more:hover {
    color: var(--notion-black);
}

.notion-section-title-group {
    display: flex;
    align-items: center;
    gap: var(--notion-space-2);
    cursor: pointer;
    transition: opacity var(--notion-transition-normal);
}

.notion-section-title-group:hover {
    opacity: 0.7;
}

.notion-section-title-group:hover .notion-section-arrow {
    transform: translateX(3px);
    color: var(--notion-blue);
}

/* 링크 없는 타이틀 그룹 */
.notion-section-title-group.no-link {
    cursor: default;
}

.notion-section-title-group.no-link:hover {
    opacity: 1;
}

.notion-section-arrow {
    font-size: var(--notion-font-size-lg);
    color: var(--notion-gray);
    margin-left: var(--notion-space-1);
    transition: transform var(--notion-transition-normal), color var(--notion-transition-normal);
    font-weight: 300;
}

.notion-section-emoji {
    font-size: var(--notion-font-size-xl);
    line-height: 1;
}

.notion-section-title {
    font-size: var(--notion-font-size-lg);
    font-weight: 600;
    color: var(--notion-black);
    letter-spacing: -0.02em;
    line-height: 1.3;
    font-family: 'Pretendard', sans-serif;
}

/* 화살표가 있는 타이틀 - 수평 정렬 */
.notion-section-title:has(.notion-section-arrow) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 타이틀 내부 화살표 */
.notion-section-title .notion-section-arrow {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* 2줄 타이틀 래퍼 */
.notion-section-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 서브타이틀 (2번째 줄) */
.notion-section-subtitle {
    font-size: var(--notion-font-size-sm);
    font-weight: 400;
    color: var(--notion-gray);
    letter-spacing: -0.01em;
    line-height: 1.3;
    font-family: 'Pretendard', sans-serif;
}

.notion-section-title-highlight {
    font-weight: 700;
}

/* 강조 색상 변형 */
.notion-section-title-highlight--red {
    color: var(--notion-red);
}

.notion-section-title-highlight--blue {
    color: var(--notion-blue);
}

.notion-section-title-highlight--orange {
    color: var(--notion-orange);
}

.notion-section-title-highlight--purple {
    color: var(--notion-purple);
}

.notion-section-title-highlight--green {
    color: var(--notion-green);
}

/* 기존 그라데이션 유지 옵션 */
.notion-section-title-highlight--gradient-hot {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.notion-section-title-highlight--gradient-new {
    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.notion-section-link {
    display: flex;
    align-items: center;
    gap: var(--notion-space-1);
    font-size: var(--notion-font-size-sm);
    color: var(--notion-gray);
    text-decoration: none;
    transition: color var(--notion-transition-normal);
}

.notion-section-link:hover {
    color: var(--notion-blue);
}

.notion-section-arrow {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--notion-transition-normal);
}

.notion-section-arrow svg {
    width: 18px;
    height: 18px;
}

/* ========================================
   태그/배지 - 노션 스타일
   ======================================== */
.notion-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--notion-radius-sm);
    font-size: var(--notion-font-size-xs);
    font-weight: 500;
    line-height: 20px;
}

.notion-tag--default {
    background: var(--notion-bg-gray);
    color: var(--notion-dark-gray);
}

.notion-tag--blue {
    background: rgba(35, 131, 226, 0.15);
    color: var(--notion-blue);
}

.notion-tag--red {
    background: rgba(224, 62, 62, 0.15);
    color: var(--notion-red);
}

.notion-tag--green {
    background: rgba(15, 123, 108, 0.15);
    color: var(--notion-green);
}

.notion-tag--orange {
    background: rgba(217, 115, 13, 0.15);
    color: var(--notion-orange);
}

.notion-tag--purple {
    background: rgba(105, 64, 165, 0.15);
    color: var(--notion-purple);
}

/* AI 태그 - 특별 스타일 */
.notion-tag--ai {
    font-family: 'Space Mono', 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
    background: linear-gradient(145deg, #374151 0%, #1F2937 50%, #374151 100%);
    color: #E5E7EB;
    border: 1px solid #4B5563;
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.15),
        inset 0 -1px 1px rgba(0,0,0,0.3),
        0 0 10px rgba(96, 165, 250, 0.3);
}

/* ========================================
   카드 - 노션 스타일
   ======================================== */
.notion-card {
    background: var(--notion-white);
    border: 1px solid var(--notion-border);
    border-radius: var(--notion-radius-lg);
    overflow: hidden;
    transition: background var(--notion-transition-normal);
}

.notion-card:hover {
    background: var(--notion-bg-hover);
}

.notion-card-content {
    padding: var(--notion-space-3) var(--notion-space-4);
}

.notion-card-title {
    font-size: var(--notion-font-size-sm);
    font-weight: 500;
    color: var(--notion-black);
    margin-bottom: var(--notion-space-1);
}

.notion-card-meta {
    font-size: var(--notion-font-size-xs);
    color: var(--notion-gray);
}

/* ========================================
   히어로 섹션 - 노션 스타일
   ======================================== */
.notion-hero {
    width: 100%;
    margin-bottom: var(--notion-space-8);
    padding: 0 var(--desktop-padding);
    box-sizing: border-box;
}

.notion-hero-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 5;
    max-height: 280px;
    overflow: hidden;
    background: var(--notion-bg-gray);
    border-radius: var(--notion-radius-md);
}

.notion-hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.95;
}

/* 히어로 인디케이터 - 노션 스타일 */
.notion-hero-indicators {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.notion-hero-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all var(--notion-transition-normal);
    border: none;
    padding: 0;
}

.notion-hero-indicator:hover {
    background: rgba(255, 255, 255, 0.8);
}

.notion-hero-indicator.active {
    background: rgba(255, 255, 255, 0.95);
    width: 18px;
    border-radius: 3px;
}

/* ========================================
   브랜드 소식 섹션 - 노션 스타일
   ======================================== */
.notion-stories-title {
    font-size: var(--notion-font-size-lg);
    font-weight: 700;
    color: var(--notion-black);
    line-height: 28px;
    margin-bottom: var(--notion-space-6);
    font-family: 'Pretendard', sans-serif;
}

.notion-stories-highlight {
    font-family: 'Georgia', serif;
    color: #B8860B;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.5px;
}

/* ========================================
   반응형 - 태블릿
   ======================================== */
@media (max-width: 1024px) {
    :root {
        --notion-content-padding: 24px;
    }

    .notion-section {
        margin-bottom: var(--notion-space-10);
    }

    .notion-section-header {
        padding-right: var(--tablet-padding);
    }

    .notion-hero {
        padding: 0;
    }

    .notion-hero-banner {
        border-radius: 0;
        max-height: 240px;
    }
}

/* ========================================
   반응형 - 모바일
   ======================================== */
@media (max-width: 767px) {
    :root {
        --notion-content-padding: 16px;
    }

    .notion-section {
        margin-bottom: var(--notion-space-6);
    }

    .notion-section-header {
        padding-right: var(--mobile-padding);
        margin-bottom: var(--notion-space-4);
    }

    .notion-section-title {
        font-size: var(--notion-font-size-base);
    }

    .notion-section-emoji {
        font-size: var(--notion-font-size-lg);
    }

    .notion-hero-banner {
        aspect-ratio: 16 / 7;
        max-height: 180px;
    }

    .notion-hero-indicators {
        position: static;
        transform: none;
        margin-top: var(--notion-space-3);
        justify-content: center;
    }

    .notion-hero-indicator {
        background: #D1D5DB;
    }

    .notion-hero-indicator.active {
        background: #374151;
    }

    .notion-stories-title {
        font-size: var(--notion-font-size-base);
        margin-bottom: var(--notion-space-4);
    }
}

/* ========================================
   유틸리티 클래스
   ======================================== */
.notion-text-primary {
    color: var(--notion-black);
}

.notion-text-secondary {
    color: var(--notion-dark-gray);
}

.notion-text-muted {
    color: var(--notion-gray);
}

.notion-bg-gray {
    background: var(--notion-bg-gray);
}

.notion-bg-hover:hover {
    background: var(--notion-bg-hover);
}

.notion-border {
    border: 1px solid var(--notion-border);
}

.notion-rounded {
    border-radius: var(--notion-radius-md);
}

/* 섹션 구분선 */
.notion-divider {
    width: 100%;
    height: 1px;
    background: var(--notion-border);
    margin: var(--notion-space-12) 0;
}

/* 호버 효과 통일 */
.notion-hoverable {
    transition: background var(--notion-transition-normal);
    border-radius: var(--notion-radius-sm);
}

.notion-hoverable:hover {
    background: var(--notion-bg-hover);
}

/* ========================================
   카드 스타일 개선 - 노션 스타일 (강화)
   ======================================== */

/* 카드 컨테이너 - 노션 스타일 (우선순위 강화) */
.notion-section .special-deals-container {
    gap: 20px !important;
}

/* 카드 호버 효과 - 배경 대신 미묘한 Y축 이동 */
.notion-section .deal-card,
.notion-section .place-card,
.content-section .notion-section .deal-card,
.content-section .notion-section .place-card {
    transition: transform var(--notion-transition-normal), box-shadow var(--notion-transition-normal) !important;
    border-radius: var(--notion-radius-md) !important;
    background: var(--notion-white) !important;
    box-shadow: none !important;
}

.notion-section .deal-card:hover,
.notion-section .place-card:hover,
.content-section .notion-section .deal-card:hover,
.content-section .notion-section .place-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--notion-shadow-sm) !important;
}

/* 카드 이미지 호버 효과 제거 (깔끔하게) */
.notion-section .deal-card-image::before,
.notion-section .place-card-image-inner {
    transition: none !important;
}

.notion-section .deal-card:hover .deal-card-image::before,
.notion-section .place-card:hover .place-card-image-inner {
    transform: none !important;
}

/* 카드 이미지 - 노션 스타일 둥근 모서리 */
.notion-section .deal-card-image,
.notion-section .place-card-image {
    border-radius: var(--notion-radius-md) !important;
    overflow: hidden !important;
}

/* 카드 타이틀 - 노션 스타일 */
.notion-section .deal-title,
.notion-section .place-card-title {
    color: var(--notion-black) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
    /* 2줄 제한 및 말줄임표 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 카드 위치/메타 정보 - 노션 스타일 */
.notion-section .deal-location,
.notion-section .place-card-location {
    color: #555555 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.notion-section .deal-location svg path {
    fill: #555555 !important;
}

/* 카드 가격 - 노션 스타일 */
.notion-section .deal-current-price,
.notion-section .place-card-price {
    color: var(--notion-black) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.notion-section .deal-current-price span {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #555555 !important;
}

/* 카드 정보 영역 */
.notion-section .deal-card-info,
.notion-section .deal-card-body,
.notion-section .place-card-info {
    padding: 2px 0 !important;  /* 2px - 이미지와 텍스트 간격 최소화 */
}

/* 할인율 텍스트 - 노션 스타일 (배경 없음) */
.notion-section .deal-discount {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    background: none !important;
    color: var(--notion-red) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
}

/* 원래 가격 - 노션 스타일 */
.notion-section .deal-original-price {
    color: #555555 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

.notion-section .deal-original-price span {
    font-size: 14px !important;
    color: #555555 !important;
    font-weight: 400 !important;
}

/* 프로모션 뱃지 - 반려동물 뱃지와 통일된 노션 스타일 */
.notion-section .promotion-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 8px !important;
    background: rgba(230, 81, 0, 0.1) !important;
    border: 1px solid rgba(230, 81, 0, 0.3) !important;
    border-radius: var(--notion-radius-sm) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    filter: none !important;
}

.notion-section .promotion-badge .fire-icon {
    font-size: 11px !important;
}

.notion-section .promotion-badge .promo-text {
    color: #E65100 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #E65100 !important;
}

/* 카드 뱃지 컨테이너 - 노션 스타일 */
.notion-section .card-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
}

/* 뱃지 크기 고정 - 노션 스타일 */
.notion-section .card-badges .promotion-badge,
.notion-section .card-badges .pet-friendly-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 8px !important;
    border-radius: var(--notion-radius-sm) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    height: 22px !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
    filter: none !important;
}

/* 반려동물 동반 가능 뱃지 - 노션 스타일 */
.notion-section .pet-friendly-badge {
    background: rgba(46, 125, 50, 0.1) !important;
    border: 1px solid rgba(46, 125, 50, 0.3) !important;
}

.notion-section .pet-friendly-badge .pet-icon,
.notion-section .promotion-badge .fire-icon {
    font-size: 11px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.notion-section .pet-friendly-badge .pet-text,
.notion-section .promotion-badge .promo-text {
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.notion-section .pet-friendly-badge .pet-text {
    color: #2E7D32 !important;
}

/* AI Score - 노션 스타일 */
.notion-section .ai-score-number {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--notion-purple) !important;
    color: var(--notion-purple) !important;
    animation: none !important;
}

/* 하트 아이콘 - 항상 표시 */
.notion-section .deal-heart-icon {
    opacity: 1 !important;
}

/* 카드 배지 - 노션 스타일 */
.notion-section .deal-badge,
.notion-section .place-badge {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: var(--notion-radius-sm) !important;
    font-size: var(--notion-font-size-xs) !important;
    font-weight: 500 !important;
    color: var(--notion-dark-gray) !important;
    padding: 3px 8px !important;
}

/* ========================================
   필터 섹션 - 노션 스타일
   ======================================== */

/* 필터 버튼 기본 스타일 */
.filter-section .filter-button {
    background: var(--notion-bg-gray);
    color: var(--notion-dark-gray);
    border: none;
    border-radius: var(--notion-radius-sm);
    padding: 6px 12px;
    font-size: var(--notion-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--notion-transition-normal);
}

.filter-section .filter-button:hover {
    background: var(--notion-bg-hover);
    color: var(--notion-black);
}

.filter-section .filter-button.active {
    background: var(--notion-black);
    color: var(--notion-white);
}

/* 서브카테고리 필터 - 노션 스타일 */
.subcategory-filter,
.filter-button.subcategory-filter {
    background: var(--notion-bg-gray) !important;
    color: var(--notion-dark-gray) !important;
    border: none !important;
    border-radius: var(--notion-radius-sm) !important;
    padding: 6px 12px !important;
    font-size: var(--notion-font-size-sm) !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all var(--notion-transition-normal) !important;
    position: relative;
    overflow: visible !important;
}

.subcategory-filter:hover,
.filter-button.subcategory-filter:hover {
    background: var(--notion-bg-hover) !important;
    color: var(--notion-black) !important;
}

.subcategory-filter.active,
.filter-button.subcategory-filter.active {
    background: var(--notion-black) !important;
    color: var(--notion-white) !important;
    border: none !important;
}

/* Shimmer 효과 비활성화 */
.subcategory-filter.active::before,
.subcategory-filter.active::after,
.filter-button.subcategory-filter.active::before,
.filter-button.subcategory-filter.active::after {
    display: none !important;
    content: none !important;
}

/* 서브카테고리 아이콘 */
.subcategory-filter i,
.filter-button.subcategory-filter i {
    font-size: 11px !important;
    margin-right: 4px;
}

/* 서브카테고리 컨테이너 */
.subcategory-filters {
    gap: 6px !important;
}

/* Additional Tab Section - 노션 스타일 */
.additional-tab-section {
    background: var(--notion-white) !important;
    border-bottom: 1px solid var(--notion-border) !important;
}

/* 위치 필터 버튼 */
.filter-section .location-filter-btn {
    background: var(--notion-bg-gray) !important;
    color: var(--notion-dark-gray) !important;
    border: none !important;
    border-radius: var(--notion-radius-sm) !important;
    padding: 6px 12px !important;
    font-size: var(--notion-font-size-sm) !important;
    font-weight: 500 !important;
    transition: all var(--notion-transition-normal) !important;
    position: relative;
}

.filter-section .location-filter-btn:hover {
    background: var(--notion-bg-hover) !important;
}

.filter-section .location-filter-btn.active {
    background: rgba(35, 131, 226, 0.15) !important;
    color: var(--notion-blue) !important;
    border: none !important;
}

/* Shimmer 효과 비활성화 */
.filter-section .location-filter-btn.active::before,
.filter-section .location-filter-btn.active::after {
    display: none !important;
}

.filter-section .location-filter-btn.active svg {
    filter: none !important;
    color: var(--notion-blue) !important;
}

.filter-section .location-filter-btn.active svg path {
    fill: var(--notion-blue) !important;
}

/* 거리 버튼 */
.filter-section .distance-btn {
    background: var(--notion-white);
    color: var(--notion-dark-gray);
    border: 1px solid var(--notion-border);
    border-radius: var(--notion-radius-sm);
    padding: 4px 10px;
    font-size: var(--notion-font-size-xs);
    font-weight: 500;
    transition: all var(--notion-transition-normal);
}

.filter-section .distance-btn:hover {
    border-color: var(--notion-border-strong);
    background: var(--notion-bg-gray);
}

.filter-section .distance-btn.active {
    background: var(--notion-black);
    color: var(--notion-white);
    border-color: var(--notion-black);
}

/* 할인 토글 */
.filter-section .discount-toggle {
    background: var(--notion-bg-gray);
    color: var(--notion-dark-gray);
    border: none;
    border-radius: var(--notion-radius-sm);
    padding: 6px 12px;
    font-size: var(--notion-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--notion-transition-normal);
}

.filter-section .discount-toggle:hover {
    background: var(--notion-bg-hover);
}

.filter-section .discount-toggle.active {
    background: rgba(15, 123, 108, 0.1);
    color: var(--notion-green);
}

/* 가격 필터 버튼 */
.filter-section .price-filter-button {
    background: var(--notion-bg-gray) !important;
    color: var(--notion-dark-gray) !important;
    border: none !important;
    border-radius: var(--notion-radius-sm) !important;
    padding: 6px 12px !important;
    font-size: var(--notion-font-size-sm) !important;
    font-weight: 500 !important;
    transition: all var(--notion-transition-normal) !important;
    position: relative;
}

.filter-section .price-filter-button:hover {
    background: var(--notion-bg-hover) !important;
}

.filter-section .price-filter-button.active {
    background: rgba(105, 64, 165, 0.15) !important;
    color: var(--notion-purple) !important;
    border: none !important;
}

/* Shimmer 효과 비활성화 */
.filter-section .price-filter-button.active::before,
.filter-section .price-filter-button.active::after {
    display: none !important;
}

.filter-section .price-filter-button.active svg {
    filter: none !important;
    color: var(--notion-purple) !important;
}

.filter-section .price-filter-button.active svg path {
    stroke: var(--notion-purple) !important;
}

/* 가격 드롭다운 패널 */
.filter-section .price-dropdown-panel {
    background: var(--notion-white);
    border: 1px solid var(--notion-border);
    border-radius: var(--notion-radius-lg);
    box-shadow: var(--notion-shadow-md);
}

.filter-section .price-panel-title {
    color: var(--notion-black);
    font-size: var(--notion-font-size-sm);
    font-weight: 600;
}

/* 가격 퀵 버튼 */
.filter-section .price-quick-btn {
    background: var(--notion-bg-gray);
    color: var(--notion-dark-gray);
    border: none;
    border-radius: var(--notion-radius-sm);
    font-size: var(--notion-font-size-xs);
    font-weight: 500;
    transition: all var(--notion-transition-normal);
}

.filter-section .price-quick-btn:hover {
    background: var(--notion-bg-hover);
    color: var(--notion-black);
}

/* 초기화 버튼 */
.filter-section .filter-reset,
.filter-section .price-reset-btn {
    background: transparent;
    color: var(--notion-gray);
    border: none;
    font-size: var(--notion-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--notion-transition-normal);
}

.filter-section .filter-reset:hover,
.filter-section .price-reset-btn:hover {
    color: var(--notion-red);
}


/* ========================================
   섹션 간 구분선 추가 (선택적)
   ======================================== */
.notion-section + .notion-section {
    /* border-top: 1px solid var(--notion-border); */
    /* padding-top: var(--notion-space-12); */
}

/* ========================================
   스크롤바 노션 스타일
   ======================================== */
.notion-section ::-webkit-scrollbar {
    height: 6px;
}

.notion-section ::-webkit-scrollbar-track {
    background: transparent;
}

.notion-section ::-webkit-scrollbar-thumb {
    background: var(--notion-border-strong);
    border-radius: 3px;
}

.notion-section ::-webkit-scrollbar-thumb:hover {
    background: var(--notion-dark-gray);
}

/* ========================================
   인덱스 페이지 전용 - 노션 스타일 강화
   ======================================== */

/* 콘텐츠 섹션 배경 */
.content-section {
    background: var(--notion-white);
}

/* 섹션 간격 - 노션 스타일 */
.content-section .notion-section {
    margin-bottom: 32px !important;
}

/* 섹션 헤더 - 노션 스타일 강화 */
.content-section .notion-section-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    padding: 0 !important; /* 타이틀~카드 간격 12px 유지 */
}

/* 타이틀 그룹 - 노션 스타일 */
.content-section .notion-section-title-group {
    display: flex !important;
    align-items: center !important;
    gap: var(--notion-space-2) !important;
    cursor: pointer !important;
    transition: opacity var(--notion-transition-normal) !important;
}

.content-section .notion-section-title-group:hover {
    opacity: 0.7 !important;
}

.content-section .notion-section-title-group:hover .notion-section-arrow {
    transform: translateX(3px) !important;
    color: var(--notion-blue) !important;
}

/* 링크 없는 타이틀 */
.content-section .notion-section-title-group.no-link {
    cursor: default !important;
}

.content-section .notion-section-title-group.no-link:hover {
    opacity: 1 !important;
}

/* 이모지 */
.content-section .notion-section-emoji {
    font-size: var(--notion-font-size-xl) !important;
    line-height: 1 !important;
}

/* 섹션 타이틀 */
.content-section .notion-section-title {
    font-size: var(--notion-font-size-lg) !important;
    font-weight: 600 !important;
    color: var(--notion-black) !important;
    letter-spacing: -0.02em !important;
    line-height: 28px !important;
    font-family: 'Pretendard', sans-serif !important;
    margin: 0 !important;
}

/* 화살표 */
.content-section .notion-section-arrow {
    font-size: var(--notion-font-size-lg) !important;
    color: var(--notion-gray) !important;
    margin-left: var(--notion-space-1) !important;
    transition: transform var(--notion-transition-normal), color var(--notion-transition-normal) !important;
    font-weight: 300 !important;
}

/* 브랜드 소식 컨테이너 - 노션 스타일 */
.content-section .brand-updates-container {
    gap: var(--notion-space-5) !important;
}

/* ========================================
   반응형 - 노션 스타일 강화
   ======================================== */

/* 태블릿 */
@media (max-width: 1024px) {
    .content-section .notion-section {
        margin-bottom: var(--notion-space-10) !important;
    }

    .content-section .notion-section-header {
        margin-bottom: var(--notion-space-4) !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        margin-left: -24px; /* content-section padding 상쇄 */
        width: calc(100% + 24px); /* 상쇄된 만큼 너비 확장 */
    }
}

/* 모바일 */
@media (max-width: 767px) {
    .content-section .notion-section {
        margin-bottom: var(--notion-space-8) !important;
    }

    .content-section .notion-section-header {
        margin-bottom: var(--notion-space-3) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: -16px; /* content-section padding 상쇄 */
        width: calc(100% + 16px); /* 상쇄된 만큼 너비 확장 */
    }

    .content-section .notion-section-title {
        font-size: var(--notion-font-size-base) !important;
    }

    .content-section .notion-section-emoji {
        font-size: var(--notion-font-size-lg) !important;
    }

    /* 모바일 카드 컨테이너 간격 - 10px */
    .notion-section .special-deals-container {
        gap: 10px !important;
    }

    /* 모바일 카드 스타일 */
    .notion-section .deal-title,
    .notion-section .place-card-title {
        font-size: 14px !important;
    }

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

    .notion-section .deal-location,
    .notion-section .place-card-location {
        font-size: 14px !important;
    }

    /* 모바일 카드 정보 영역 - 이미지와 텍스트 간격 제거 */
    .notion-section .deal-card-info,
    .notion-section .deal-card-body,
    .notion-section .place-card-info {
        padding: 0 !important;
    }

    /* 모바일 AI score 텍스트 사이즈 */
    .notion-section .ai-score-number,
    .deal-card .ai-score-number {
        font-size: 12px !important;
    }

    .deal-price-section > div[style*="font-size:14px"] {
        font-size: 12px !important;
    }
}