/**
 * Product Detail Page Styles
 *
 * 사이드바 스타일은 sidebar.js가 자동으로 로드하는
 * css/components/sidebar.css에서 관리됩니다.
 */

/* CSS Custom Properties */
:root {
    --sidebar-width: 240px;
    --header-height: 80px;
    --card-gap: 24px;
    --mobile-padding: 16px;
    --tablet-padding: 24px;
    --desktop-padding: 40px;
    /* ✅ WCAG AA 대비율 개선 (1.2:1 → 2.5:1) */
    --border-color: #D0D5DD;
    --border-light: #EAECF0;
    /* 장식용 (대비 불필요) */
    --text-primary: #101828;
    --text-secondary: #344054;
    /* ✅ WCAG AA 대비율 개선 (4.6:1 → 8:1) */
    --text-tertiary: #475467;
    --background-gray: #F9FAFB;
    --border-radius: 8px;
    --card-border-radius: 12px;
}

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

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-pretendard, 'Pretendard'), sans-serif;
    background: white;
    overflow-x: hidden;
    line-height: 1.5;
    width: 100%;
    max-width: 100vw;
}

/* 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;
}

/* 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;
    padding-top: 0;
}

/* 태블릿/모바일에서 사이드바 없음 */
@media (max-width: 1024px) {
    .main-content {
        margin-left: 0;
        max-width: 100vw;
        padding-top: 0;
    }
}

/* ========================================
   프로모션 뱃지 - 반려동물 뱃지와 통일된 스타일
   ======================================== */
.promotion-badge {
    padding: 3px 5px;
    border-radius: 12px;
    font-size: 11px;
    font-family: var(--font-pretendard, 'Pretendard'), sans-serif;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    border: 1px solid #FF8A65;
    max-width: fit-content;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* 불꽃 아이콘 */
.promotion-badge .fire-icon {
    display: inline-block;
    font-size: 11px;
}

/* "특가" 텍스트 */
.promotion-badge .promo-text {
    color: #E65100;
    font-weight: 600;
}

/* 호버 효과 */
.promotion-badge:hover {
    transform: translateY(-0.5px);
    filter: drop-shadow(0 2px 4px rgba(255, 107, 107, 0.3));
    background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%);
}

/* 모바일 최적화 */
@media (max-width: 767px) {
    .promotion-badge {
        font-size: 10px;
        padding: 2px 4px;
        border-radius: 10px;
    }

    .promotion-badge .fire-icon {
        font-size: 10px;
    }
}

/* Header Styles */
.main-header {
    width: 100%;
    height: 80px;
    background: white;
    display: flex;
    align-items: center;
    padding: 0 var(--desktop-padding);
    position: relative;
    margin-top: 0;
}

/* Header Logo - 데스크톱에서 숨김 */
.header-logo {
    display: none;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.header-logo h1 {
    margin: 0;
    color: black;
    font-size: 24px;
    font-weight: 700;
}

.header-logo h1 a {
    color: inherit;
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
}

/* 헤더 로고 오로라 효과 */
.header-logo 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%;
    }
}

.header-content {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 99px;
}

/* Search Container */
.search-container {
    flex-shrink: 0;
}

/* 모바일에서만 검색창 숨김 (태블릿은 유지) */
@media (max-width: 767px) {
    .search-container {
        display: none !important;
    }
}

.search-box {
    width: 420px;
    height: 42px;
    position: relative;
    background: white;
    border-radius: 6px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.search-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 15px;
    color: #333;
    font-family: 'Pretendard', sans-serif;
    font-size: 13.02px;
    font-weight: 500;
}

.search-input::placeholder {
    color: #D1D1D1;
    font-family: 'Pretendard', sans-serif;
    font-size: 13.02px;
    font-weight: 500;
}

.search-icon {
    width: 27px;
    height: 27px;
    margin-right: 13px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.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: '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);
}

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

/* 스티치 효과 애니메이션 */
@keyframes stitchAppear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.menu-item:hover::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px dashed #666;
    border-radius: 6px;
    pointer-events: none;
    animation: stitchAppear 0.3s ease forwards;
    z-index: 10;
}

.menu-item:active {
    transform: scale(0.98);
}

.logout-item:hover::before {
    border-color: #ff6b6b;
}

#user-profile {
    position: relative;
}

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

/* Mobile Back Button - Hidden by default on desktop */
.mobile-back-button {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 0;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.mobile-back-button svg {
    width: 18px;
    height: 18px;
}

/* Mobile Menu Toggle - Hidden by default on desktop */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* 데스크톱에서 완전히 숨기기 */
@media (min-width: 1025px) {
    .mobile-back-button,
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* 상품 상세 페이지 내 프로필 아이콘 (리뷰 등) - 사이드바 제외 */
.main-content .user-profile,
.desktop-content .user-profile {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667085 0%, #475467 100%);
    border-radius: 20px;
}

/* Content Sections */
.content-section {
    padding: var(--desktop-padding);
    padding-top: 24px;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

/* 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 {
    opacity: 1;
    pointer-events: auto;
}

/* Responsive Design */
@media (max-width: 1023px) {
    .main-content {
        margin-left: 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
    }

    .mobile-overlay {
        display: block;
    }

    .content-section {
        padding: var(--tablet-padding);
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Header Responsive - Tablet */
    .main-header {
        padding: 0;
        position: relative;
        justify-content: center;
    }

    /* 헤더 로고 표시 (태블릿) - flexbox로 양쪽 정렬 */
    .header-logo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 var(--tablet-padding);
        width: 100%;
        box-sizing: border-box;
        pointer-events: none;
    }

    .header-logo h1,
    .header-logo .mobile-menu-toggle,
    .header-logo .mobile-back-button {
        pointer-events: auto;
    }

    /* 태블릿에서 뒤로가기 토글 숨김 */
    .mobile-back-button {
        display: none !important;
    }

    /* 헤더 컨텐츠 중앙 정렬 (태블릿) */
    .header-content {
        justify-content: center;
        gap: 0;
    }

    /* 검색창 항상 표시 (태블릿) - 데스크톱처럼 유지 */
    .search-box {
        position: static !important;
        width: 350px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

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

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

    /* 햄버거 버튼 스타일 (태블릿) */
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        width: 24px;
        height: 24px;
        transform: none;
    }
}

@media (max-width: 767px) {
    .content-section {
        padding: 0 12px;
        padding-top: 0;
        padding-bottom: 0;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .product-detail-container {
        max-width: 100%;
    }

    /* 모바일에서 헤더 숨기기 - 캐러셀 위 뒤로가기 버튼으로 대체 */
    .main-header {
        display: none !important;
    }

    /* 캐러셀 오버레이 버튼 표시 */
    .carousel-overlay-buttons {
        display: flex !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 8px !important;
    }

    .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;
    }
}

/* Hamburger Menu Styles - Already defined above, removed duplicate */

/* Product Detail Styles */
.product-detail-container {
    display: grid;
    grid-template-columns: 1fr 376px;
    gap: 2rem;
    max-width: 100%;
    margin: 0 auto;
}

.product-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 섹션 간 간격 조정 */
}

/* Carousel Styles */
.product-carousel {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    position: relative;
}

/* 캐러셀 오버레이 버튼 (모바일 전용) - 데스크톱에서 숨김 */
.carousel-overlay-buttons {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 12px;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}

.carousel-overlay-left,
.carousel-overlay-right {
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

.carousel-overlay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.carousel-overlay-btn:active {
    transform: scale(0.95);
}

.carousel-overlay-btn svg {
    display: block;
    width: 28px;
    height: 28px;
}

/* 이미지 인디케이터 (모바일/태블릿 전용) */
.carousel-indicator {
    display: none;
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 6px 12px;
    border-radius: 16px;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    z-index: 10;
    pointer-events: none;
}

@media (max-width: 1023px) {
    .carousel-indicator {
        display: block;
    }
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.3s ease;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-placeholder {
    width: 100%;
    height: 100%;
    background: #E3E3E3;
}

/* Thumbnails */
.product-thumbnails {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    margin-top: 0.5rem;
    /* 메인 사진과 썸네일 간격 조정 */
}

.thumbnail {
    width: 66.5px;
    height: 66.5px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.25;
    transition: opacity 0.2s;
}

.thumbnail.active {
    opacity: 1;
}

.thumbnail-placeholder {
    width: 100%;
    height: 100%;
    background: #BABABA;
}

/* Product Header */
.product-header {
    background: white;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.product-info {
    flex: 1;
}

.product-category {
    color: #616161;
    font-size: 13.95px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    line-height: 24px;
}

.product-title {
    color: black;
    font-size: 18px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    line-height: 34px;
    margin-top: 0.5rem;
}

.product-actions {
    display: flex;
    gap: 1rem;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: black;
    font-size: 15px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
}

/* Animated Subscribe Button */
.animated-subscribe-btn {
    position: relative;
    display: flex;
    height: 40px;
    min-width: 120px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: black;
    color: white;
    padding: 0 1.5rem;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

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

.animated-subscribe-btn .btn-initial,
.animated-subscribe-btn .btn-subscribed {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.animated-subscribe-btn .btn-initial {
    transform: translateY(0);
    opacity: 1;
}

.animated-subscribe-btn .btn-subscribed {
    transform: translateY(40px);
    opacity: 0;
}

.animated-subscribe-btn.subscribed .btn-initial {
    transform: translateY(-40px);
    opacity: 0;
}

.animated-subscribe-btn.subscribed .btn-subscribed {
    transform: translateY(0);
    opacity: 1;
}

.animated-subscribe-btn .chevron-right {
    transition: transform 0.3s ease;
}

.animated-subscribe-btn:hover .chevron-right {
    transform: translateX(2px);
}

.animated-subscribe-btn .check-icon {
    animation: checkBounce 0.6s ease;
}

@keyframes checkBounce {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.animated-subscribe-btn .btn-text {
    display: inline-block;
    line-height: 1;
}

.animated-subscribe-btn svg {
    display: inline-block;
    flex-shrink: 0;
}

/* Sections */
.section-location,
.section-space,
.section-reviews,
.section-similar {
    padding: 1rem 0;
}

@media (max-width: 1023px) {
    .section-location,
    .section-space,
    .section-reviews,
    .section-similar {
        padding: 0;
    }

    /* 모바일/태블릿에서 pricing 섹션 패딩 조정 */
    .mobile-info-card .pricing-content {
        padding: 0;
    }

    /* .mobile-info-card .company-card padding은 기본 스타일 사용 */
}

@media (max-width: 767px) {
    .section-location,
    .section-space,
    .section-reviews,
    .section-similar {
        padding: 0;
    }

    /* 모바일에서 pricing 섹션 패딩 조정 */
    .mobile-info-card .pricing-content {
        padding: 12px 0 0 0; /* 상단 12px: 구분선과 상품명 사이 여백 */
    }

    /* .mobile-info-card .company-card는 기본 스타일 사용 (border, padding, border-radius) */
}

/* 섹션 타이틀 - 토스 스타일 */
.section-title {
    color: var(--toss-text-primary, #191F28);
    font-size: 18px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.02em;
}

.section-title::before {
    font-size: 18px;
    line-height: 1;
}

.section-space .section-title::before {
    content: "📋";
}

.section-reviews .section-title::before {
    content: "💬";
}

.section-location .section-title::before {
    content: "📍";
}

/* Location Map */
.location-map {
    width: 100%;
    aspect-ratio: 16 / 6;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

/* 네이버 지도 캔버스 선명도 향상 (Retina 디스플레이 대응) */
.location-map canvas,
.location-minimap canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.location-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 모바일에서 위치 미니맵 비율 16:9로 변경 */
@media (max-width: 767px) {
    .location-map {
        aspect-ratio: 16 / 9;
        margin-bottom: 16px;
    }
}

/* Space Cards */
.space-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.space-card {
    background: #FBFBFB;
    border-radius: 6px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.space-card svg {
    color: black;
    flex-shrink: 0;
}

.space-card span {
    color: black;
    font-size: 15.25px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
}

.space-description {
    padding: 0;
    color: #37352f;
    font-size: 15px;
    font-family: var(--font-pretendard, 'Pretendard'), -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif !important;
    font-weight: 400;
    line-height: 1.7;
}

/* 첫 번째 요소의 상단 마진 제거 - 타이틀과 내용 간격을 다른 섹션들과 일치시킴 */
.space-description > *:first-child {
    margin-top: 0;
}

/* ========================================
   더보기/접기 컨테이너 - 토스 스타일
   ======================================== */
.space-description-wrapper {
    position: relative;
}

/* 접힌 상태 - 높이 제한 */
.space-description-wrapper.collapsed .space-description {
    max-height: 240px;
    overflow: hidden;
}

/* 접힌 상태 - 그라데이션 fade 효과 */
.space-description-wrapper.collapsed::after {
    content: "";
    position: absolute;
    bottom: 56px; /* 버튼 높이(44px) + margin(12px) 고려 */
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    pointer-events: none;
    z-index: 1;
}

/* 더보기/접기 버튼 - 토스 스타일 */
.read-more-btn {
    display: none; /* 기본 숨김 - JS에서 높이 체크 후 표시 */
    width: 100%;
    padding: 14px 20px;
    margin-top: 12px;
    background: var(--toss-bg-base, #F2F4F6);
    border: none;
    border-radius: var(--toss-radius-md, 12px);
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--toss-text-secondary, #4E5968);
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
    text-align: center;
    position: relative;
    z-index: 2;
}

.read-more-btn:hover {
    background: var(--toss-line-normal, #E5E8EB);
    color: var(--toss-text-primary, #191F28);
}

.read-more-btn:active {
    transform: scale(0.98);
}

.read-more-btn i {
    margin-left: 6px;
    font-size: 12px;
    transition: transform 0.2s ease;
}

/* 접힌 상태에서만 버튼 표시 */
.space-description-wrapper.collapsed .read-more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 펼친 상태에서도 버튼 표시 (접기 용) */
.space-description-wrapper.expanded .read-more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* JS에서 아이콘 변경 처리하므로 회전 불필요 */

/* Tiptap 에디터 콘텐츠 스타일 - 노션 스타일 */
.space-description h1,
.space-description h2,
.space-description h3,
.space-description h4,
.space-description h5,
.space-description h6 {
    margin: 1.2em 0 0.4em 0;
    font-weight: 600;
    line-height: 1.3;
    color: #37352f;
}

.space-description h1 {
    font-size: 1.875em;
    font-weight: 700;
}

.space-description h2 {
    font-size: 1.5em;
    font-weight: 600;
    padding-bottom: 6px;
    border-bottom: 1px solid #e9e9e7;
}

.space-description h3 {
    font-size: 1.25em;
    font-weight: 600;
}

.space-description p {
    margin: 0.5em 0;
    color: #37352f;
    font-family: inherit !important;
}

.space-description strong,
.space-description b {
    font-weight: 600;
}

.space-description em,
.space-description i {
    font-style: italic;
}

.space-description s,
.space-description strike {
    text-decoration: line-through;
    color: #9b9a97;
}

/* 노션 하이라이트 색상 */
.space-description mark {
    background-color: #faf3dd;
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

.space-description mark[data-color="yellow"] { background-color: #faf3dd; }
.space-description mark[data-color="blue"] { background-color: #e7f3f8; }
.space-description mark[data-color="green"] { background-color: #edf3ec; }
.space-description mark[data-color="pink"] { background-color: #faf1f5; }
.space-description mark[data-color="purple"] { background-color: #f4f0f7; }
.space-description mark[data-color="red"] { background-color: #fdebec; }

/* 리스트 - 노션 스타일 */
.space-description ul,
.space-description ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
    list-style-position: inside;
}

.space-description ul {
    list-style-type: disc;
}

.space-description ul ul {
    list-style-type: circle;
}

.space-description ul ul ul {
    list-style-type: square;
}

.space-description li {
    margin: 0.3em 0;
    padding-left: 0.2em;
}

.space-description li::marker {
    color: #37352f;
}

/* 체크리스트 - 노션 스타일 */
.space-description ul[data-type="taskList"] {
    list-style: none;
    padding-left: 0;
}

.space-description ul[data-type="taskList"] li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
}

.space-description ul[data-type="taskList"] li input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    pointer-events: none;
    accent-color: #2eaadc;
}

/* 인용구 - 노션 스타일 */
.space-description blockquote {
    border-left: 3px solid #37352f;
    margin: 1em 0;
    padding: 12px 16px;
    background: #f7f6f3;
    border-radius: 0 4px 4px 0;
    color: #37352f;
    font-style: normal;
}

/* 코드 블록 - 노션 스타일 */
.space-description pre {
    background: #f7f6f3;
    border-radius: 4px;
    padding: 16px;
    overflow-x: auto;
    margin: 1em 0;
    border: 1px solid #e9e9e7;
}

.space-description code {
    background: rgba(135, 131, 120, 0.15);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.875em;
    color: #eb5757;
}

.space-description pre code {
    background: none;
    padding: 0;
    color: #37352f;
}

/* 링크 - 노션 스타일 */
.space-description a {
    color: #37352f;
    text-decoration: underline;
    text-decoration-color: rgba(55, 53, 47, 0.4);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}

.space-description a:hover {
    text-decoration-color: #37352f;
}

/* 구분선 - 노션 스타일 */
.space-description hr {
    border: none;
    border-top: 1px solid #e9e9e7;
    margin: 1.5em 0;
}

/* 이미지 - 노션 스타일 */
.space-description img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1em 0;
}

/* 더보기 버튼 - 토스 스타일 */
.btn-more {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 20px;
    background: var(--toss-bg-base, #F2F4F6);
    border: none;
    border-radius: var(--toss-radius-md, 12px);
    cursor: pointer;
    color: var(--toss-text-secondary, #4E5968);
    font-size: 14px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.btn-more:hover {
    background: var(--toss-line-normal, #E5E8EB);
    color: var(--toss-text-primary, #191F28);
}

/* Reviews */
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.add-review-btn.animated-subscribe-btn {
    /* 저장하기 버튼과 동일한 스타일 사용 */
    min-width: 120px;
}

.add-review-btn .btn-initial {
    gap: 0.5rem;
}

.reviews-container {
    margin-bottom: 0;
}

/* 리뷰 없음 상태 - 토스 스타일 */
.no-reviews {
    text-align: center;
    padding: 32px 20px;
    border-radius: var(--toss-radius-lg, 16px);
    position: relative;
    overflow: hidden;
    background: var(--toss-bg-grouped-base, #F9FAFB);
    border: none;
}

/* Retro Grid Container */
.retro-grid {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    perspective: 200px;
    opacity: var(--opacity);
    inset: 0;
}

/* Grid Wrapper with 3D transform */
.retro-grid-inner {
    position: absolute;
    inset: 0;
    transform: rotateX(var(--grid-angle));
}

/* Animated Grid Pattern */
.retro-grid-lines {
    background-image:
        linear-gradient(to right, var(--light-line) 1px, transparent 0),
        linear-gradient(to bottom, var(--light-line) 1px, transparent 0);
    background-repeat: repeat;
    background-size: var(--cell-size) var(--cell-size);
    height: 300vh;
    width: 600vw;
    margin-left: -200%;
    transform-origin: 100% 0 0;
    animation: grid 15s linear infinite;
}

/* Bottom Gradient Overlay */
.retro-grid-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, white 0%, transparent 90%);
}

/* Grid Animation */
@keyframes grid {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Keep text on top */
.no-reviews p {
    margin: 0;
    font-size: 15px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    color: #37352f;
    position: relative;
    z-index: 10;
}

.no-reviews p::before {
    content: "📝";
    display: block;
    font-size: 32px;
    margin-bottom: 12px;
}

.no-reviews-sub {
    display: none;
}

/* Retro Grid 숨기기 */
.no-reviews .retro-grid {
    display: none;
}

.reviews-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.review-item.hidden {
    display: none;
}

/* 리뷰 더보기 버튼 - 토스 스타일 */
.show-more-reviews-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-top: 12px;
    background: var(--toss-bg-base, #F2F4F6);
    border: none;
    border-radius: var(--toss-radius-md, 12px);
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--toss-text-secondary, #4E5968);
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
    text-align: center;
}

.show-more-reviews-btn:hover {
    background: var(--toss-line-normal, #E5E8EB);
    color: var(--toss-text-primary, #191F28);
}

.review-item {
    border-bottom: 1px solid #F2F2F2;
    padding-bottom: 1.5rem;
    position: relative;
    padding-right: 120px;
    /* Space for thumbnail (100px + 20px gap) */
}

.review-rating {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.stars {
    color: #F8CF06;
    font-size: 16px;
}

.review-more {
    background: none;
    border: none;
    color: #9E9E9E;
    cursor: pointer;
    font-size: 20px;
}

.review-info {
    flex: 1;
}

.review-author {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.review-author strong {
    font-size: 11.25px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
}

.review-date {
    color: #9E9E9E;
    font-size: 11.44px;
    font-family: 'Pretendard', sans-serif;
}

.review-thumbnail {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.review-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-image-count {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Pretendard', sans-serif;
}

.review-text {
    color: black;
    font-size: 15px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    line-height: 26px;
}

/* =====================================================
   오늘의집 스타일 리뷰 UI (New Review System)
   ===================================================== */

/* 리뷰 헤더 (타이틀 + 별점 세로 배치) */
.review-header-new {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    margin-bottom: 16px;
}

.review-header-title {
    font-size: 18px;
    font-weight: 700;
    color: #191919;
    font-family: 'Pretendard', sans-serif;
}

/* 별점 행 (4.8 ★★★★★ (340) >) */
.review-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.review-rating-display {
    display: flex;
    align-items: center;
    gap: 6px;
}

.review-rating-score {
    font-size: 20px;
    font-weight: 700;
    color: #191919; /* 노션 검정색 */
    font-family: 'Pretendard', sans-serif;
}

.review-rating-stars {
    color: #FFD700;
    font-size: 18px;
    letter-spacing: 1px;
}

.review-rating-stars i.empty {
    color: #E0E0E0; /* 빈 별 회색 */
}

.review-rating-count {
    color: #828C94;
    font-size: 14px;
    font-family: 'Pretendard', sans-serif;
    margin-left: 2px;
}

.review-rating-arrow {
    color: #CCCCCC;
    font-size: 20px;
    font-weight: 300;
}

/* 리뷰 사진 그리드 (이미지 모아보기) */
.review-photos-section {
    margin-bottom: 24px;
}

.review-photos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border-radius: 12px;
    overflow: hidden;
}

/* 첫 번째 큰 이미지 (왼쪽) */
.review-photo-large {
    grid-row: span 2;
    position: relative;
    aspect-ratio: 1;
    cursor: pointer;
    overflow: hidden;
}

.review-photo-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.review-photo-large:hover img {
    transform: scale(1.05);
}

/* 작은 이미지들 (오른쪽) */
.review-photos-small {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
}

.review-photo-item {
    position: relative;
    aspect-ratio: 1;
    cursor: pointer;
    overflow: hidden;
}

.review-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.review-photo-item:hover img {
    transform: scale(1.05);
}

/* 이미지 카운트 배지 */
.review-photo-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Pretendard', sans-serif;
}

/* 전체보기 버튼 오버레이 */
.review-photo-view-all {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Pretendard', sans-serif;
    cursor: pointer;
}

.review-photo-view-all-count {
    font-size: 18px;
    font-weight: 700;
}

.review-photo-view-all-text {
    font-size: 13px;
    font-weight: 500;
}

/* 데스크톱: 리뷰 사진 그리드 - 5열 균등 배치 */
@media (min-width: 768px) {
    .review-photos-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

    /* 큰 이미지도 일반 크기로 통일 */
    .review-photo-large {
        grid-row: span 1;
        aspect-ratio: 1;
    }

    /* small 컨테이너를 그리드에 직접 펼침 */
    .review-photos-small {
        display: contents;
    }

    .review-photo-item {
        aspect-ratio: 1;
    }
}

/* 새로운 리뷰 카드 (좌: 이미지, 우: 텍스트) */
.reviews-list-new {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-card-new {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F1F1F1;
}

.review-card-new:last-child {
    border-bottom: none;
}

/* 리뷰 썸네일 (왼쪽) - 정사각형 */
.review-card-thumbnail {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.review-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.review-card-thumbnail:hover img {
    transform: scale(1.05);
}

.review-card-thumbnail-count {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Pretendard', sans-serif;
}

/* 리뷰 내용 (오른쪽) */
.review-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.review-card-text {
    color: #191919;
    font-size: 14px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    /* 3줄 말줄임 */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
}

.review-card-meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #828C94;
    font-family: 'Pretendard', sans-serif;
}

.review-card-date {
    color: #828C94;
}

.review-card-meta-divider {
    color: #E0E0E0;
}

.review-card-source {
    color: #828C94; /* 등록일과 동일한 색상 */
}

/* 이미지 없는 리뷰 카드 */
.review-card-no-image {
    padding-left: 0;
}

.review-card-no-image .review-card-text {
    -webkit-line-clamp: 3;
}

/* 리뷰 텍스트 더보기 (개별 리뷰 카드) */
.review-card-text.expandable {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-card-text.expandable.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.review-expand-btn {
    background: none;
    border: none;
    color: #828C94;
    font-size: 13px;
    font-family: 'Pretendard', sans-serif;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 4px;
    transition: color 0.2s;
}

.review-expand-btn:hover {
    color: #191919;
}

/* 호스트 답글 스타일 */
.review-reply {
    background: #F9FAFB;
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 12px;
}

.review-reply-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.review-reply-badge {
    background: #F3F4F6;
    color: #191919;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.review-reply-date {
    color: #828C94;
    font-size: 13px;
}

.review-reply-text {
    color: #344054;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

/* 리뷰 더보기 버튼 (전체 목록) - 토스 스타일 */
.review-show-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    margin-top: 12px;
    background: var(--toss-bg-base, #F2F4F6);
    border: none;
    border-radius: var(--toss-radius-md, 12px);
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--toss-text-secondary, #4E5968);
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.review-show-more-btn:hover {
    background: var(--toss-line-normal, #E5E8EB);
    color: var(--toss-text-primary, #191F28);
}

/* 모바일 반응형 */
@media (max-width: 767px) {
    .review-header-new {
        padding-top: 12px;
        padding-bottom: 0;
        margin-bottom: 8px;
        gap: 0;
    }

    .review-header-title {
        font-size: 16px;
    }

    /* 별점 표시 */
    .review-rating-display {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .review-rating-stars {
        display: flex;
        align-items: center;
        line-height: 1;
    }

    .review-rating-stars i {
        color: #FFC107;
        font-size: 16px;
        line-height: 1;
    }

    .review-rating-score {
        font-family: 'PretendardVariable', 'Pretendard', sans-serif;
        font-weight: 500;
        font-size: 18px;
        line-height: 1;
    }

    .review-rating-count {
        line-height: 1;
    }

    .review-photos-grid {
        border-radius: 8px;
    }

    .review-card-new {
        gap: 12px;
        padding-bottom: 16px;
    }

    .review-card-thumbnail {
        width: 80px;
        height: 80px; /* 정사각형 */
        border-radius: 6px;
    }

    .review-card-text {
        font-size: 14px; /* 데스크톱과 동일 */
        -webkit-line-clamp: 3;
    }

    .review-card-meta {
        font-size: 13px; /* 데스크톱과 동일 */
    }

    .review-show-more-btn {
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* Reply Box Styles */
.review-reply-box {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    margin-right: -120px;
    /* Offset parent padding to use full width */
}

.review-reply-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 12px;
}

.review-reply-label {
    font-weight: 600;
    color: #6B7280;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.review-reply-header strong {
    font-weight: 600;
    color: #1F2937;
    font-size: 12px;
}

.review-reply-date {
    color: #9CA3AF;
    font-size: 11px;
    margin-left: auto;
}

.review-reply-content {
    color: #374151;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}


.btn-all-reviews {
    display: block;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    background: white;
    border: 1px solid #E3E3E3;
    border-radius: 6px;
    cursor: pointer;
    color: black;
    font-size: 15px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
}

/* Sidebar */
.product-sidebar {
}

.sidebar-content {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

/* ========================================
   Company Card 스타일
   → 이 파일 하단에서 관리
   ======================================== */

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

/* Review star icon styles */
.review-star-icon {
    flex-shrink: 0;
    display: block;
}

.review-rating-number {
    line-height: 1;
    display: block;
}

/* Message button using register-button style */
.register-button.message-btn {
    width: 100%;
    margin-bottom: 0;
    margin-top: 20px;
}

/* 버튼 컨테이너 - 채팅하기와 통화 버튼을 나란히 배치 */
.contact-buttons-container {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.contact-buttons-container .register-button {
    flex: 1;
    margin-top: 0;
}

/* 통화 버튼 스타일 - map.html과 동일 */
.detail-contact-btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Icon-only button style */
.detail-contact-btn.icon-only {
    flex: 1;
    padding: 0;
    min-width: 44px;
}

.detail-contact-btn.icon-only i {
    font-size: 18px;
}

.detail-contact-secondary {
    background: white;
    color: #101828;
    border: 1px solid #EAECF0;
}

/* Phone button hover effect - green */
.detail-contact-btn.phone-btn:hover i {
    color: #00b938;
}

/* Chat button hover effect - blue */
.detail-contact-btn.chat-btn:hover i {
    color: #3b82f6;
}

/* Phone tooltip - desktop only */
.phone-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #000000;
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

.detail-contact-btn.phone-btn {
    position: relative;
}

@media (min-width: 1024px) {
    .detail-contact-btn.phone-btn:hover .phone-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-12px);
    }
}

/* Mobile fixed buttons → 이 파일 하단에서 관리 */
@media (max-width: 1023px) {
    .company-stats {
        display: none;
    }

    /* 모바일/태블릿 회사 카드 → 이 파일 하단에서 관리 */

    .company-header {
        margin-bottom: 0;
    }

    .card-divider {
        display: none;
    }

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

/* ========================================
   Pricing 스타일
   → 이 파일 하단에서 관리
   ======================================== */

.discount-badge {
    margin-bottom: 1rem;
}

/* MagicUI Animated Shiny Text */
.animated-shiny-text-wrapper {
    z-index: 10;
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0;
}

.animated-shiny-text-container {
    position: relative;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #f5f5f5;
    transition: all 0.3s ease-in;
    cursor: pointer;
    display: inline-flex;
}

.animated-shiny-text-container:hover {
    background-color: #e5e5e5;
    border-color: rgba(0, 0, 0, 0.1);
}

.animated-shiny-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 1rem;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease-out;
    position: relative;
}

.animated-shiny-text .emoji {
    margin-right: 0.25rem;
    font-size: 14px;
}

.animated-shiny-text .shiny-text {
    background: linear-gradient(105deg,
            #939393 0%,
            #939393 45%,
            #000000 50%,
            #939393 55%,
            #939393 100%);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shiny-text 6s ease-in-out infinite;
}

@keyframes shiny-text {
    0% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.animated-shiny-text-container:hover .animated-shiny-text .shiny-text {
    -webkit-text-fill-color: #525252;
    transition: -webkit-text-fill-color 0.3s ease;
}

.animated-shiny-text .arrow-icon {
    margin-left: 0.25rem;
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease-in-out;
    flex-shrink: 0;
}

.animated-shiny-text-container:hover .arrow-icon {
    transform: translateX(2px);
}



/* ========================================
   Product Specs 스타일
   → 이 파일 하단에서 관리
   ======================================== */

/* 데스크탑 구분선 (사이드바용) */
@media (min-width: 1024px) {

    /* 회사정보 섹션 - 이미 border와 padding 포함 */
    .product-sidebar .company-card {
        padding: 24px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        background: #e5e5e5;
    }

    /* 회사정보 섹션 내 채팅하기 버튼 둥글기 */
    .product-sidebar .company-card .register-button {
        --radius: 6px;
    }

    /* 상품정보 섹션 테두리 */
    .product-sidebar .pricing-section {
        border: 1px solid #e5e5e5;
        border-radius: 6px;
    }

    /* pricing-section과 product-specs 사이 구분선 */
    .product-sidebar .product-specs {
        padding-top: 1rem;
        border-top: 1px solid #e5e5e5;
        margin-top: 1rem;
    }

    /* product-specs 내 편의시설 섹션 구분선 */
    .product-sidebar .product-specs>div:last-child {
        padding-top: 0;
        border-top: none;
    }
}

/* Mobile product-specs → 이 파일 하단에서 관리 */

/* 1인당 가격 표시 스타일 (더치페이) */
.per-person-price {
    font-size: 12px;
    color: #667085;
    font-weight: 400;
    margin-left: 4px;
    white-space: nowrap;
}

/* 1인당 가격 블라인드 스타일 */
.per-person-price.per-person-blinded {
    color: #98A2B3;
    font-style: italic;
}

/* 데스크톱 스펙 테이블에서 1인당 가격 스타일 - 모바일과 동일하게 상속 */
.specs-table-amazon .per-person-price {
    font-size: inherit;
    color: inherit;
    display: inline;
}

/* 모바일에서 1인당 가격 스타일 */
@media (max-width: 767px) {
    .per-person-price {
        font-size: 11px;
        color: #98A2B3;
        display: inline;
        margin-left: 4px;
    }
}

/* Badge Styles (Enhanced Design) */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 500;
    padding: 0.175rem 0.55rem;
    font-family: 'Pretendard', sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.2;
    flex: 0 0 auto;
    min-width: 0;
    max-width: calc(25% - 0.225rem);
}

/* Badge Variants */
.badge-default {
    background-color: #09090b;
    color: #fafafa;
}

.badge-secondary {
    background-color: #f4f4f5;
    color: #18181b;
}

.badge-outline {
    background-color: transparent;
    border: 1px solid #e4e4e7;
    color: #18181b;
}

.badge-outline:hover {
    background-color: #f9fafb;
}

/* 편의시설 뱃지 - 토스 스타일 */
.badge-amenity {
    background: var(--toss-bg-base, #F2F4F6);
    color: var(--toss-text-secondary, #4E5968);
    border: none;
    border-radius: var(--toss-radius-full, 9999px);
    padding: 6px 12px;
    font-family: 'PretendardVariable', 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-amenity:hover {
    background: var(--toss-line-normal, #E5E8EB);
    color: var(--toss-text-primary, #191F28);
}

/* Active/Clicked state */
.badge-amenity:active {
    transform: translateY(0);
}

/* Cool mode active state */
.badge-amenity.cool-mode-active {
    /* No special animation needed */
}

/* 편의시설 뱃지 다크모드 */
[data-theme="dark"] .badge-amenity {
    background: #1E1E1E;
    border-color: #333;
    color: #E0E0E0;
}

[data-theme="dark"] .badge-amenity:hover {
    background: #2D2D2D;
    border-color: #404040;
}

[data-theme="dark"] .amenity-badges-amazon .amenity-badge {
    background: #1E1E1E;
    border-color: #333;
    color: #E0E0E0;
}

[data-theme="dark"] .amenity-badges-amazon .amenity-badge:hover {
    background: #2D2D2D;
    border-color: #404040;
}


/* 반응형 편의시설 배지 */
@media (max-width: 1200px) {
    .badge {
        max-width: calc(33.33% - 0.2rem);
    }
}

@media (max-width: 768px) {
    .amenity-badges {
        gap: 0.3rem;
    }

    .badge {
        font-size: 13px;
        padding: 0.25rem 0.5rem;
        line-height: 1.2;
        max-width: calc(50% - 0.15rem);
    }
}

@media (max-width: 480px) {
    .badge {
        font-size: 12px;
        max-width: calc(50% - 0.15rem);
        padding: 0.2rem 0.45rem;
    }
}

.report-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 3rem 1rem 1rem 1rem;
    margin-top: 0.5rem;
    color: black;
    font-size: 13.12px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    text-decoration: none;
    position: relative;
}

.report-link::before {
    display: none;
}


/* Mobile/Tablet Cards */
.mobile-info-card {
    display: none;
}

/* Desktop Only */
.desktop-only {
    display: flex;
}

/* Mobile/Tablet Only */
.mobile-tablet-only {
    display: none;
}

@media (max-width: 1023px) {
    .mobile-tablet-only {
        display: block;
    }

    /* 회사정보 카드 아래 구분선 - 1px 풀와이드 */
    .mobile-info-card.mobile-tablet-only {
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 0;
        position: relative;
    }

    /* 회사정보 카드 아래 1px 풀와이드 구분선 */
    .mobile-info-card.mobile-tablet-only::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 1px;
        background: #e9edf3;
    }
}

/* Mobile Header */
.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.mobile-header .product-title {
    margin: 0;
    flex: 1;
}

.mobile-header .animated-subscribe-btn {
    flex-shrink: 0;
}

/* Mobile Header Actions (공유 + 저장 버튼 그룹) */
.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 공유 버튼 스타일 */
.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.share-btn:hover {
    background: var(--background-gray);
    border-color: var(--text-tertiary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.share-btn:active {
    transform: translateY(0);
}

.share-btn svg {
    width: 20px;
    height: 20px;
}

/* 모바일/태블릿에서 제목 옆 공유 버튼 숨기기 (캐러셀 오버레이에 이미 있음) */
@media (max-width: 1023px) {
    .mobile-header-actions .share-btn {
        display: none;
    }
}

/* 데스크톱 제목 행 (제목 + 공유 버튼) */
.desktop-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0.5rem;
}

.desktop-title-row .product-title {
    flex: 1;
    margin: 0;
}

.desktop-title-row .share-btn {
    flex-shrink: 0;
    margin-top: 2px;
}

/* 공유 토스트 메시지 스타일 */
.share-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #101828;
    color: white;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
}

.share-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.share-toast svg {
    color: #38f094;
    flex-shrink: 0;
}

/* 모바일에서 토스트 위치 조정 */
@media (max-width: 767px) {
    .share-toast {
        bottom: 140px;
        max-width: calc(100% - 32px);
    }
}

.pricing-content {
    padding: 1.5rem 0;
}

/* Mobile/Tablet - Remove horizontal padding for consistent spacing */
@media (max-width: 1023px) {
    .mobile-info-card .pricing-content {
        padding: 12px 0 0 0; /* 상단 12px: 구분선과 상품명 사이 여백 */
    }

    /* .mobile-info-card .company-card는 기본 스타일(border, padding) 유지 */

    /* Company info on two lines */
    .mobile-info-card .company-title {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        min-width: 0;
    }

    .mobile-info-card .company-title h3 {
        overflow: visible;
        margin: 0;
        font-size: 16px;
    }

    .mobile-info-card .company-title h3 .company-name-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .mobile-info-card .company-title p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

    .mobile-info-card .company-title p {
        font-size: 12px;
    }

    /* Remove divider above company stats on mobile/tablet */
    .mobile-info-card .card-divider {
        display: none;
    }
}

/* Mobile Divider */
.mobile-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}

.mobile-divider .divider-line {
    width: 172px;
    height: 16px;
    opacity: 0.5;
}

/* Mobile/Tablet Price & Space Divider - 삭제됨 */
@media (max-width: 1023px) {
    .mobile-info-card .pricing-content>.mobile-divider {
        display: none;
    }
}

.mobile-info-card .company-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 24px;
}

/* Hide amenities title on mobile/tablet */
@media (max-width: 1023px) {
    .mobile-info-card .amenities-title {
        display: none;
    }
}

/* 모바일/태블릿: AI 분석 섹션을 편의시설 뱃지와 지도 사이로 이동 */
@media (max-width: 1023px) {
    .product-main > .section-ai-analysis {
        order: 10;
        margin-top: 16px;
        margin-bottom: 0.5rem;
    }

    .product-main > .mobile-section-divider {
        order: 11;
    }

    .product-main > .section-location {
        order: 12;
        margin-top: 0.5rem;
    }

    .product-main > .section-space {
        order: 13;
        margin-top: 1rem;
        padding-bottom: 8px;
        border-bottom: none;
    }

    .product-main > .section-reviews {
        order: 14;
        margin-top: 0;
        padding-bottom: 20px;
        border-bottom: none;
        position: relative;
    }

    /* 리뷰 섹션 하단 풀와이드 구분선 (8px) - 하단 1px은 #e9edf3 선 색상 */
    .product-main > .section-reviews::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 8px;
        background: linear-gradient(to bottom, #f7f8fb 0%, #f7f8fb calc(100% - 1px), #e9edf3 calc(100% - 1px), #e9edf3 100%);
    }

    .product-main > .section-wrapper {
        order: 15;
        margin-top: 12px;
        margin-bottom: 0;
    }
}

/* Mobile Section Dividers - Hidden on desktop */
.mobile-section-divider {
    display: none;
}

@media (max-width: 767px) {
    .mobile-section-divider {
        height: 1px;
        background: #f7f8fb;
        border: none;
        padding: 0;
        display: block !important;
        /* 풀와이드: 뷰포트 전체 너비로 확장 */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        margin: 0;
    }

    .pricing-content .mobile-section-divider {
        height: 1px;
        background: #f7f8fb;
        border: none;
        padding: 0;
        display: block !important;
        /* 풀와이드: 뷰포트 전체 너비로 확장 */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        margin: 16px 0;
    }

    /* 섹션 구분선: 8px (space-편의시설, 편의시설-위치, 위치-AI분석, AI분석-설명, 설명-호스트리뷰) */
    /* 하단 1px은 #e9edf3 선 색상으로 구분 (index.html과 동일) */
    #spaceAmenitiesDivider,
    #amenitiesLocationDivider,
    #detailSectionDivider,
    #aiDescriptionDivider,
    #descriptionReviewDivider {
        height: 8px;
        background: linear-gradient(to bottom, #f7f8fb 0%, #f7f8fb calc(100% - 1px), #e9edf3 calc(100% - 1px), #e9edf3 100%);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mobile-section-divider {
        height: 1px;
        background: #f7f8fb;
        border: none;
        padding: 0;
        display: block !important;
        /* 풀와이드: 뷰포트 전체 너비로 확장 */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        margin: 0;
    }

    .pricing-content .mobile-section-divider {
        height: 1px;
        background: #f7f8fb;
        border: none;
        padding: 0;
        display: block !important;
        /* 풀와이드: 뷰포트 전체 너비로 확장 */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        margin: 16px 0;
    }
}

/* Company Section Dividers - 1px solid lines */
@media (max-width: 767px) {
    .mobile-info-card>.mobile-divider {
        height: 1px;
        background-color: #E5E7EB;
        padding: 0;
        margin: 0;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        width: 100vw;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mobile-info-card>.mobile-divider {
        height: 1px;
        background-color: #E5E7EB;
        padding: 0;
        margin: 0 calc(-1 * var(--tablet-padding));
        width: calc(100% + 2 * var(--tablet-padding));
    }
}

/* Responsive Design */
@media (max-width: 1023px) {

    /* 태블릿과 모바일에서 썸네일 숨김 */
    .product-thumbnails {
        display: none !important;
    }

    .desktop-only {
        display: none !important;
    }

    .product-header {
        padding: 0;
    }

    .product-actions {
        display: none;
    }

    .mobile-header .animated-subscribe-btn {
        display: none;
    }

    .mobile-header {
        margin-bottom: 12px; /* 상품명과 가격 섹션 사이 여백 */
    }

    .pricing-content {
        padding: 0;
    }

    .amenity-badges {
        margin-bottom: 0.5rem;
    }

    .section-location .section-title {
        display: none;
    }

    .mobile-info-card+.mobile-section-divider {
        display: none;
    }

    .mobile-info-card {
        display: block;
        margin: 0;
        padding: 0;
        background: white;
        border: none;
        /* 모바일에서 테두리 제거 */
        border-radius: 0;
        /* 모바일에서 둥근 모서리 제거 */
        overflow: visible;
    }

    .product-sidebar .company-card,
    .product-sidebar .pricing-section,
    .product-sidebar .report-link,
    .product-sidebar .sidebar-similar-places {
        display: none;
    }

    /* Full-width carousel on mobile/tablet - 정사각형 */
    .product-carousel {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        margin-left: calc(-1 * var(--mobile-padding));
        margin-right: calc(-1 * var(--mobile-padding));
        width: calc(100% + 2 * var(--mobile-padding));
        max-height: 100vw;
        border-radius: 0;
    }
}

@media (max-width: 1400px) {
    .product-detail-container {
        grid-template-columns: 1fr 340px;
    }
}

@media (max-width: 1200px) {
    .space-cards {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 1024px) {
    .product-detail-container {
        grid-template-columns: 1fr;
    }

    .product-sidebar {
        position: static;
        margin-top: 1rem;
        margin-bottom: 0;
    }

    .product-carousel {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        margin-left: calc(-1 * var(--tablet-padding));
        margin-right: calc(-1 * var(--tablet-padding));
        width: calc(100% + 2 * var(--tablet-padding));
        max-height: 100vw;
        border-radius: 0;
    }
}

@media (max-width: 768px) {
    .no-reviews {
        padding: 20px 12px;
    }

    .section-reviews .review-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    .add-review-btn.animated-subscribe-btn {
        width: auto;
        flex-shrink: 0;
    }

    .product-carousel {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        margin-left: calc(-1 * var(--mobile-padding));
        margin-right: calc(-1 * var(--mobile-padding));
        width: calc(100% + 2 * var(--mobile-padding));
        max-height: 100vw;
        border-radius: 0;
    }

    .product-header {
        flex-direction: column;
        gap: 1rem;
        padding: 0;
    }

    .product-actions {
        display: none;
    }

    .mobile-header .animated-subscribe-btn {
        display: none;
    }

    .mobile-header {
        margin-bottom: 12px; /* 상품명과 가격 섹션 사이 여백 */
    }

    .pricing-content {
        padding: 0;
    }

    .amenity-badges {
        margin-bottom: 0.5rem;
    }

    .section-location .section-title {
        display: none;
    }

    .mobile-info-card+.mobile-section-divider {
        display: none;
    }

    .space-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .product-carousel {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        margin-left: calc(-1 * var(--mobile-padding));
        margin-right: calc(-1 * var(--mobile-padding));
        width: calc(100% + 2 * var(--mobile-padding));
        max-height: 100vw;
        border-radius: 0;
    }

    .thumbnail {
        width: 50px;
        height: 50px;
    }

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

    .product-title {
        font-size: 18px;
    }
}

/* Deal Card Styles for Similar Places Section */
.special-deals-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* 울트라와이드 화면 - 7개 열 */
@media (min-width: 1921px) {
    .special-deals-container {
        grid-template-columns: repeat(7, 1fr);
    }

    /* 8번째 이후 카드 숨기기 (7개만 표시) */
    .special-deals-container .deal-card:nth-child(n+8) {
        display: none;
    }
}

/* 와이드 화면 - 6개 열 */
@media (min-width: 1600px) and (max-width: 1920px) {
    .special-deals-container {
        grid-template-columns: repeat(6, 1fr);
    }

    /* 7번째 이후 카드 숨기기 (6개만 표시) */
    .special-deals-container .deal-card:nth-child(n+7) {
        display: none;
    }
}

/* 데스크탑 화면 - 5개 열 */
@media (min-width: 1200px) and (max-width: 1599px) {
    .special-deals-container {
        grid-template-columns: repeat(5, 1fr);
    }

    /* 6번째 이후 카드 숨기기 (5개만 표시) */
    .special-deals-container .deal-card:nth-child(n+6) {
        display: none;
    }
}

/* 태블릿 - 2열 그리드 */
@media (max-width: 1199px) and (min-width: 768px) {
    /* 하단 고정 버튼 여백 확보 (푸터와의 간격 최소화) */
    .product-main {
        padding-bottom: 24px;
    }

    .special-deals-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding-right: 0px;
    }

    .special-deals-container .deal-card {
        width: 100%;
    }
}

/* 모바일 - 2열 그리드 */
@media (max-width: 767px) {
    /* 하단 고정 버튼 여백 확보 (푸터와의 간격 최소화) */
    .product-main {
        padding-bottom: 24px;
    }

    .special-deals-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding-right: 0px;
    }

    /* 빈 컨테이너 숨김 */
    .special-deals-container:empty {
        display: none;
    }

    /* 유사 상품 섹션 타이틀 여백 */
    .section-wrapper .section-title {
        margin-bottom: 1rem !important;
    }

    .special-deals-container .deal-card {
        width: 100%;
    }

    /* 모바일 텍스트 크기 */
    .special-deals-container .deal-title {
        font-size: 14px;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .special-deals-container .deal-location {
        font-size: 14px;
    }

    .special-deals-container .deal-current-price {
        font-size: 14px;
        line-height: 20px;
    }

    .special-deals-container .deal-original-price {
        font-size: 12px;
    }

    .special-deals-container .deal-discount-rate {
        font-size: 14px;
        color: #FF4D4F;
        font-family: var(--font-pretendard, 'Pretendard'), sans-serif;
        font-weight: 600;
    }

    /* 카드 간격 조정 */
    .special-deals-container .deal-card {
        gap: 8px;
    }

    .special-deals-container .deal-card-info {
        gap: 2px;
        padding: 2px;
    }

    /* 모바일 비슷한 매물 섹션 - 하단 마진 제거 (구분선이 간격 담당) */
    /* .content-section 추가로 toss-style.css의 .content-section .notion-section 오버라이드 */
    .content-section section.notion-section.section-similar-mobile {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 모바일 비슷한 매물과 최근 본 상품 사이 구분선 - section-divider 스타일 */
    .section-similar-mobile::after {
        content: '';
        display: block;
        height: 8px;
        /* 하단 1px 구분선 효과 - 토스 앱 스타일 */
        background: linear-gradient(to bottom,
            #f7f8fb 0%,
            #f7f8fb calc(100% - 1px),
            #e9edf3 calc(100% - 1px),
            #e9edf3 100%);
        margin-top: 12px;
        margin-bottom: 0; /* 호스트리뷰 구분선과 동일하게 하단 마진 제거 */
        margin-left: calc(-1 * var(--toss-space-4, 16px));
        width: calc(100% + var(--toss-space-8, 32px));
    }

    /* 모바일 최근 본 상품 섹션 - 구분선과 타이틀 사이 거리 (ID로 최고 특정성) */
    /* .product-main > .section-wrapper의 margin-top: 12px를 오버라이드 */
    #recently-viewed-section-mobile.notion-section.section-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 최근 본 상품 헤더 - 구분선과 타이틀 사이 12px 간격 */
    #recently-viewed-section-mobile .notion-section-header {
        margin-top: 0.5rem !important; /* 12px - 구분선과 타이틀 사이 간격 */
        padding-top: 0 !important;
        margin-bottom: 12px !important; /* 타이틀과 카드 사이 간격만 유지 */
    }

    /* 최근 본 상품 타이틀 텍스트 영역 마진 제거 */
    #recently-viewed-section-mobile .notion-section-text {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 최근 본 상품 타이틀 h3 마진 제거 */
    #recently-viewed-section-mobile .notion-section-title {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

.deal-card {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.deal-card-image {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.deal-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.04) 100%), #F7F7F7;
    background-size: cover;
    background-position: center;
    background-image: inherit;
    transition: transform 0.3s ease;
}

.deal-card:hover .deal-card-image::before {
    transform: none;
}

.deal-heart-icon {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.deal-heart-icon svg {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

.deal-heart-icon svg path {
    fill: rgba(255, 255, 255, 0.5);
    stroke: #FE6769;
    stroke-width: 2;
    transition: all 0.3s ease;
}

.deal-heart-icon:hover svg path {
    fill: #FE6769;
    stroke: #FE6769;
}

.deal-heart-icon.active svg path {
    fill: #FE6769;
    stroke: #FE6769;
}

.deal-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px;
}

.deal-text-info {
    display: flex;
    flex-direction: column;
}

.deal-title {
    color: black;
    font-size: 14px;
    font-family: var(--font-pretendard, 'Pretendard'), sans-serif;
    font-weight: 400;
}

.deal-location {
    color: #9E9E9E;
    font-size: 14px;
    font-family: var(--font-pretendard, 'Pretendard'), sans-serif;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 2px;
}

.deal-price-section {
    display: flex;
    flex-direction: column;
}

.deal-current-price {
    color: #363636;
    font-size: 14px;
    font-family: var(--font-pretendard, 'Pretendard'), sans-serif;
    font-weight: 600;
    line-height: 24px;
}

.deal-original-price {
    color: #707070;
    font-size: 13px;
    font-family: var(--font-pretendard, 'Pretendard'), sans-serif;
    font-weight: 400;
    text-decoration: line-through;
    line-height: 20px;
}

.deal-discount {
    color: #FF4D4F;
    font-size: 14px;
    font-family: var(--font-pretendard, 'Pretendard'), sans-serif;
    font-weight: 600;
}

/* AI Analysis Section Styles */
.section-ai-analysis {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* ========== AI 분석 섹션 - 노션 스타일 ========== */
.section-ai-analysis {
    margin: 16px 0;
}

.ai-analysis-card {
    background: linear-gradient(135deg, #f4f0f7 0%, #e7f3f8 100%);
    border-radius: 6px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    /* border-top 제거: mobile-section-divider와 겹쳐서 2px처럼 보이는 문제 해결 */
    border-left: 1px solid #e9e9e7;
    border-right: 1px solid #e9e9e7;
}

/* 모바일: AI 분석 카드 컨테이너 스타일 제거 */
@media (max-width: 767px) {
    .ai-analysis-card {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
    }
}

/* AI 카드 헤더 */
.ai-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ai-card-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}

.ai-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #37352f;
}

.ai-card-badge {
    padding: 2px 8px;
    background: rgba(107, 64, 165, 0.15);
    color: #6940a5;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 호버 효과 제거됨 */

/* AI 분석 카드 애니메이션 제거됨 (성능 최적화) */

/* Loading State - 노션 스타일 */
.ai-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.ai-loading-dots {
    display: flex;
    gap: 4px;
}

.ai-loading-dots span {
    width: 6px;
    height: 6px;
    background: #9b87b2;
    border-radius: 50%;
    animation: dotPulse 1.4s ease-in-out infinite;
}

.ai-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%, 80%, 100% {
        opacity: 0.4;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

.ai-loading p {
    color: #6b6b6b;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

/* Result State - 노션 스타일 */
.ai-result {
    padding: 4px 0;
}

.ai-summary {
    color: #37352f;
    font-size: 14px;
    line-height: 1.7;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    word-break: keep-all;
    white-space: pre-wrap;
}

/* 타이핑 애니메이션 커서 - AI 스타일 */
.ai-summary.typing {
    position: relative;
}

.ai-summary.typing::after {
    content: '▍';
    color: #6940a5;
    font-weight: 300;
    margin-left: 2px;
    font-size: 16px;
    vertical-align: middle;
    animation: aiCursorPulse 0.6s ease-in-out infinite;
}

@keyframes aiCursorPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* Error State - 노션 스타일 */
.ai-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.ai-error-icon {
    font-size: 16px;
    line-height: 1;
}

.ai-error p {
    color: #6b6b6b;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

/* 모바일 반응형: 기본 스타일과 동일하여 미디어쿼리 불필요 */

/* ========================================
   사이드바 비슷한 매물 섹션 (데스크탑 전용)
   ======================================== */

.sidebar-similar-places {
    margin-top: 24px;
}

.sidebar-similar-places .notion-section-header {
    margin-bottom: 16px;
}

.sidebar-similar-places .special-deals-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* 사이드바 내 카드 스타일 - 2열 레이아웃 */
.sidebar-similar-places .deal-card {
    width: 100%;
    min-width: 0;
}

.sidebar-similar-places .deal-card-image {
    aspect-ratio: 1/1;
    border-radius: 8px;
}

.sidebar-similar-places .deal-card-info {
    padding: 2px;
}

.sidebar-similar-places .deal-title {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    margin: 0;
}

.sidebar-similar-places .deal-location {
    font-size: 14px;
    color: #9E9E9E;
    margin: 1px 0 0;
    line-height: 1.2;
}

.sidebar-similar-places .deal-price-section {
    margin-top: 2px;
}

.sidebar-similar-places .deal-current-price {
    font-size: 16px;
    font-weight: 600;
}

.sidebar-similar-places .deal-original-price {
    font-size: 13px;
    color: #9E9E9E;
    text-decoration: line-through;
    margin-top: 1px;
}

.sidebar-similar-places .deal-discount-rate {
    color: #FF4D4F;
    font-weight: 600;
    font-size: 16px;
}

/* 사이드바 빈 상태 메시지 */
.sidebar-similar-places .empty-state-message {
    padding: 24px 0;
    text-align: center;
}

/* 데스크톱에서 모바일 비슷한 매물 섹션 숨기기 */
@media (min-width: 1024px) {
    .section-similar-mobile {
        display: none !important;
    }
}

/* ========================================
   예약하기 버튼 스타일 (Magic UI 기반)
   ======================================== */

/* 버튼 컨테이너 */
.reservation-buttons-container {
    display: flex;
    gap: 10px;
    margin-top: 1.5rem;
    width: 100%;
}

/* 찜 버튼 스타일 */
.bookmark-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
    border: 1px solid #EAECF0;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* ✅ 포커스 가시성 개선 (WCAG 2.4.7) */
.bookmark-btn:focus {
    outline: 2px solid #6366F1;
    outline-offset: 2px;
}

.bookmark-btn .bookmark-icon {
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

.bookmark-btn .bookmark-icon path {
    stroke: #101828;
    fill: transparent;
    transition: all 0.3s ease;
}

/* Hover effect - 하트 아이콘 색상 변경 (핑크/빨강) */
.bookmark-btn:hover .bookmark-icon path {
    stroke: #ff4d4d;
}

.bookmark-btn:active {
    transform: translateY(0);
}

/* 찜 활성화 상태 */
.bookmark-btn.active .bookmark-icon path {
    fill: #ff4d4d !important;
    stroke: none !important;
}

.bookmark-btn.active .bookmark-icon {
    animation: heartbeat 0.6s ease;
}

@keyframes heartbeat {
    0%,
    100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(0.95);
    }
    75% {
        transform: scale(1.1);
    }
}

/* 공통 베이스 스타일 */
.reservation-btn {
    flex: 1;
    height: 44px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Pretendard', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* ✅ 포커스 가시성 개선 (WCAG 2.4.7) */
.reservation-btn:focus {
    outline: 2px solid #6366F1;
    outline-offset: 2px;
}

.reservation-btn-text {
    position: relative;
    z-index: 10;
}

.reservation-btn-arrow {
    position: relative;
    z-index: 10;
    transition: transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.reservation-btn:hover .reservation-btn-arrow {
    transform: translateX(4px);
}

.reservation-btn:active {
    transform: translateY(1px);
}

/* 옵션 1: Shimmer Button (기존 등록하기 버튼 스타일) */
.reservation-btn-shimmer {
    --spread: 45deg;
    --shimmer-color: #ffffff;
    --radius: 8px;
    --speed: 4s;
    --cut: 0.05em;
    --bg: #3182F6;

    background: var(--bg);
    border-radius: var(--radius);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.reservation-btn-shimmer .reservation-btn-spark-container {
    position: absolute;
    inset: 0;
    overflow: visible;
    z-index: 0;
    filter: blur(3px);
}

.reservation-btn-shimmer .reservation-btn-spark {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
}

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

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

.reservation-btn-shimmer .reservation-btn-highlight {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: var(--radius);
    box-shadow: inset 0 -8px 10px rgba(255, 255, 255, 0.12);
    transition: all 0.3s ease;
}

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

.reservation-btn-shimmer .reservation-btn-backdrop {
    position: absolute;
    z-index: 1;
    background: var(--bg);
    border-radius: var(--radius);
    inset: var(--cut);
}

/* 옵션 2: Simple Button (효과 없음) */
.reservation-btn-pulsating {
    background: #3182F6;
    color: white;
    border-radius: 8px;
}

.reservation-btn-pulsating:hover {
    background: #2952c8;
}

/* 옵션 3: Interactive Hover Button */
.reservation-btn-interactive {
    background: white;
    color: #000;
    border: 2px solid #000;
    border-radius: 50px;
}

.reservation-btn-interactive::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 5;
}

.reservation-btn-interactive:hover::before {
    transform: translateY(-50%) scale(100);
}

.reservation-btn-interactive .reservation-btn-text {
    transition: all 0.3s ease;
}

.reservation-btn-interactive:hover .reservation-btn-text {
    color: white;
    transform: translateX(12px);
}

.reservation-btn-interactive .reservation-btn-arrow {
    opacity: 0;
    transform: translateX(-12px);
    transition: all 0.3s ease;
}

.reservation-btn-interactive:hover .reservation-btn-arrow {
    opacity: 1;
    transform: translateX(0);
    color: white;
}

/* 모바일 반응형 - 메시지/통화 버튼과 동일한 높이 */
@media (max-width: 1023px) {

    /* 모바일에서 원래 예약 버튼 컨테이너 숨김 (하단 fixed로 이동) */
    .reservation-buttons-container {
        display: none;
    }

    .bookmark-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .reservation-btn {
        height: 44px;
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    /* 모바일에서 원래 예약 버튼 컨테이너 숨김 */
    .reservation-buttons-container {
        display: none;
    }

    .bookmark-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .bookmark-btn .bookmark-icon {
        width: 20px;
        height: 20px;
    }

    .reservation-btn {
        height: 44px;
        font-size: 15px;
    }
}

/* ===================================
   모바일 섹션 네비게이션 (Fixed 탭)
   =================================== */
.mobile-section-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: white;
    border-bottom: 1px solid #E5E7EB;
    display: none;
    align-items: stretch; /* center → stretch: 탭이 전체 높이 차지하도록 변경 */
    padding: 0;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}

/* 표시 상태 */
.mobile-section-nav.visible {
    transform: translateY(0);
    opacity: 1;
}

/* 모바일/태블릿에서만 활성화 */
@media (max-width: 1023px) {
    .mobile-section-nav {
        display: flex;
    }
}

/* 데스크톱에서는 완전히 숨김 */
@media (min-width: 1024px) {
    .mobile-section-nav {
        display: none !important;
    }
}

/* 상위 버튼 */
.section-nav-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 16px;
    background: none;
    border: none;
    border-right: 1px solid #E5E7EB;
    cursor: pointer;
    color: #6B7280;
    font-size: 11px;
    font-weight: 500;
    min-width: 56px;
    transition: all 0.2s ease;
}

.section-nav-top:hover {
    background: #F9FAFB;
    color: #374151;
}

.section-nav-top:active {
    background: #F3F4F6;
}

.section-nav-top svg {
    flex-shrink: 0;
}

/* 탭 컨테이너 */
.section-nav-tabs {
    display: flex;
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.section-nav-tabs::-webkit-scrollbar {
    display: none;
}

/* 개별 탭 */
.section-nav-tab {
    flex: 1;
    padding: 14px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    white-space: nowrap;
    transition: all 0.2s ease;
    position: relative;
}

.section-nav-tab:hover {
    color: #374151;
    background: #F9FAFB;
}

/* 활성 탭 */
.section-nav-tab.active {
    color: #3182F6;
    border-bottom-color: #3182F6;
    font-weight: 600;
}

/* 포커스 스타일 (접근성) */
.section-nav-top:focus-visible,
.section-nav-tab:focus-visible {
    outline: 2px solid #6366F1;
    outline-offset: -2px;
}

/* ===================================
   모바일 스티키 CTA (하단 고정)
   =================================== */
.mobile-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--border-color);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: none;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-sticky-cta.visible {
    display: flex;
    transform: translateY(0);
}

/* 북마크 버튼 */
.sticky-cta-bookmark {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sticky-cta-bookmark:hover {
    background: var(--background-gray);
    border-color: var(--text-tertiary);
}

.sticky-cta-bookmark:focus {
    outline: 2px solid #6366F1;
    outline-offset: 2px;
}

.sticky-bookmark-icon {
    color: var(--text-tertiary);
    transition: all 0.3s;
}

.sticky-cta-bookmark.active .sticky-bookmark-icon {
    animation: heartbeat 0.4s ease-in-out;
}

.sticky-cta-bookmark.active .sticky-bookmark-icon path {
    fill: #EF4444 !important;
    stroke: none !important;
}

/* 가격 및 예약 버튼 컨테이너 */
.sticky-cta-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sticky-cta-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sticky-price-label {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
}

.sticky-price-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/* 예약 버튼 - 기본 예약 스타일 */
.sticky-cta-reserve {
    flex: 1;
    height: 52px;
    background: #3182F6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Pretendard', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.sticky-cta-reserve:hover {
    background: #2952c8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(51, 98, 228, 0.3);
}

.sticky-cta-reserve:active {
    transform: translateY(0);
}

.sticky-cta-reserve:focus {
    outline: 2px solid #6366F1;
    outline-offset: 2px;
}

.sticky-cta-reserve svg {
    transition: transform 0.2s;
}

.sticky-cta-reserve:hover svg {
    transform: translateX(3px);
}

/* 모바일에서만 표시 */
@media (min-width: 768px) {
    .mobile-sticky-cta {
        display: none !important;
    }
}

/* ========================================= */
/* Review Modal Styles - REMOVED */
/* Review writing is only available in payment-history.html after purchase */
/* Review DISPLAY styles (for showing existing reviews) remain in sections above */
/* ========================================= */

/* 면적 단위 전환 아이콘 포커스 스타일 (독립적 기능, 유지) */
.area-unit-icon:focus {
    outline: 2px solid #6366F1;
    outline-offset: 2px;
}

/* ========================================= */
/* Skeleton Loading Styles (Migrated from inline) */
/* Lines 2437-2479 from product-detail.html */
/* ========================================= */

/* 스켈레톤 로딩 애니메이션 - 토스 스타일 */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--toss-bg-base, #F2F4F6) 0%,
        var(--toss-bg-grouped-base, #F9FAFB) 50%,
        var(--toss-bg-base, #F2F4F6) 100%
    );
    background-size: 200% 100%;
    animation: toss-skeleton-wave 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 16px;
    border-radius: 4px;
    margin: 8px 0;
}

.skeleton-title {
    height: 32px;
    width: 60%;
    border-radius: 8px;
    margin-bottom: 16px;
}

.skeleton-image {
    width: 100%;
    height: 400px;
    border-radius: 12px;
}

/* Hide content until loaded */
.content-loading .product-title,
.content-loading .price-display,
.content-loading .product-specs {
    opacity: 0;
}

.content-loaded .skeleton {
    display: none;
}

/* ========================================
   모바일 이미지 라이트박스 갤러리
   - 모바일/태블릿 전용 (1024px 이하)
   - 통합 네비게이션 바 (하단)
   - 스와이프 + 순환 지원
   ======================================== */

/* 라이트박스 컨테이너 - 기본 숨김 */
.mobile-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-lightbox.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
}

/* 닫기 버튼 */
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    transition: background 0.2s ease;
}

.lightbox-close:hover,
.lightbox-close:focus {
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

/* 이미지 컨테이너 */
.lightbox-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 60px 16px 80px;
    touch-action: pan-y pinch-zoom;
}

.lightbox-image-wrapper {
    display: flex;
    transition: transform 0.3s ease;
    height: 100%;
    will-change: transform;
}

.lightbox-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* 하단 통합 네비게이션 바 */
.lightbox-nav-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 16px;
    z-index: 10001;
}

/* 네비게이션 버튼 */
.lightbox-nav-btn {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-nav-btn:hover,
.lightbox-nav-btn:focus {
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

.lightbox-nav-btn:active {
    transform: scale(0.95);
}

/* 카운터 */
.lightbox-counter {
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 500;
    min-width: 60px;
    text-align: center;
    user-select: none;
}

/* 데스크톱에서 라이트박스 숨김 */
@media (min-width: 1025px) {
    .mobile-lightbox {
        display: none !important;
    }
}

/* 모바일/태블릿에서 캐러셀 이미지 클릭 힌트 */
@media (max-width: 1024px) {
    .carousel-slide {
        cursor: pointer;
    }

    .carousel-slide img {
        transition: transform 0.2s ease;
    }

    .carousel-slide:active img {
        transform: scale(0.98);
    }
}

/* 안전 영역 (노치 대응) */
@supports (padding: max(0px)) {
    .lightbox-close {
        top: max(16px, env(safe-area-inset-top));
        right: max(16px, env(safe-area-inset-right));
    }

    .lightbox-nav-bar {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
        height: calc(64px + max(0px, env(safe-area-inset-bottom)));
    }

    .lightbox-image-container {
        padding-bottom: calc(80px + max(0px, env(safe-area-inset-bottom)));
    }
}

/* ================================
   더보기 옵션 하단 시트 (Bottom Sheet)
   ================================ */
.more-options-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.more-options-overlay.active {
    display: block;
    opacity: 1;
}

.more-options-sheet {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 80vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.more-options-sheet.active {
    display: block;
    transform: translateY(0);
}

.more-options-content {
    padding: 12px 0 8px;
}

.more-options-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 24px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-align: left;
    transition: background-color 0.15s ease;
}

.more-options-item:hover {
    background-color: #f8f8f8;
}

.more-options-item:active {
    background-color: #f0f0f0;
}

.more-options-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #555;
}

/* 신고하기 - 빨간색 */
.more-options-item.report {
    color: #ff6b6b;
}

.more-options-item.report svg {
    color: #ff6b6b;
}

/* 닫기 버튼 */
.more-options-close {
    display: block;
    width: calc(100% - 32px);
    margin: 8px 16px 16px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    background: #f5f5f5;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: center;
    transition: background-color 0.15s ease;
}

.more-options-close:hover {
    background-color: #ebebeb;
}

.more-options-close:active {
    background-color: #e0e0e0;
}

/* ========================================
   노션 스타일 섹션 헤더 (아이콘 박스)
   - notion-style.css의 space-between 오버라이드
   ======================================== */
.section-location .notion-section-header,
.section-space .notion-section-header,
.section-reviews .notion-section-header,
.section-wrapper .notion-section-header {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

/* 노션 섹션 아이콘 - 토스 스타일 */
.notion-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: var(--toss-blue-light, #E8F3FF);
    border-radius: var(--toss-radius-sm, 8px);
    font-size: 18px;
    flex-shrink: 0;
}

.notion-section-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 노션 섹션 타이틀 - 토스 스타일 */
.notion-section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--toss-text-primary, #191F28);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.02em;
}

.notion-section-subtitle {
    font-size: 13px;
    color: var(--toss-text-tertiary, #8B95A1);
    font-weight: 400;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.3;
    margin: 0;
}

/* 리뷰 헤더 내 notion-section-header 마진 제거 (별점과 수평 정렬) */
.review-header-new .notion-section-header {
    margin-bottom: 0;
}

/* 반응형 - 모바일 */
@media (max-width: 767px) {
    .section-location .notion-section-header,
    .section-space .notion-section-header,
    .section-reviews .notion-section-header,
    .section-wrapper .notion-section-header {
        margin-bottom: 12px;
    }

    .review-header-new .notion-section-header {
        margin-bottom: 0;
    }

    .notion-section-icon {
        width: 28px;
        height: 28px;
        font-size: 16px;
        border-radius: 6px;
    }

    .notion-section-title {
        font-size: 16px;
    }

    .notion-section-subtitle {
        font-size: 12px;
    }
}

/* 아이콘 박스 색상 변형 - 토스 스타일 */
.notion-section-icon.icon-info {
    background: var(--toss-blue-light, #E8F3FF);
}

.notion-section-icon.icon-location {
    background: rgba(55, 210, 141, 0.12);
}

.notion-section-icon.icon-review {
    background: rgba(253, 153, 51, 0.12);
}

.notion-section-icon.icon-similar {
    background: rgba(147, 51, 234, 0.12);
}

/* ========================================
   아마존 스타일 데스크톱 3컬럼 레이아웃
   - 1024px 이상에서만 적용
   - 컬럼1: 이미지 갤러리 (42%)
   - 컬럼2: 상품 정보 (35%)
   - 컬럼3: 액션 사이드바 (23%)
   ======================================== */

/* 데스크톱/모바일 표시 제어 */
.desktop-only {
    display: none;
}

.mobile-tablet-layout {
    display: block;
}

/* 데스크톱 3컬럼 레이아웃 (1024px 이상) */
@media (min-width: 1024px) {
    .desktop-only {
        display: block;
    }

    .mobile-tablet-layout {
        display: none !important;
    }

    /* 기존 사이드바 숨기기 */
    .product-sidebar {
        display: none !important;
    }

    /* 데스크톱에서 content-section 패딩 최소화 */
    .content-section {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    /* 3컬럼 그리드 레이아웃 */
    .product-detail-container.amazon-desktop-layout {
        display: grid;
        grid-template-columns: 45fr 32fr 23fr;
        grid-template-rows: auto auto auto auto auto auto auto;
        grid-template-areas:
            "gallery info actions"
            "location location location"
            "description description description"
            "host-products host-products host-products"
            "reviews reviews reviews"
            "similar similar similar"
            "recently-viewed recently-viewed recently-viewed";
        gap: 30px;
        max-width: 1440px;
        width: 100%;
        margin: 0 auto;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .product-gallery-column {
        grid-area: gallery;
        margin-left: 0;
        padding-left: 0;
    }

    /* 위치 섹션 (전체 너비) */
    .location-section-fullwidth {
        grid-area: location;
    }

    .location-section-fullwidth .section-inner {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .location-content-wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .location-address-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .location-address-row .location-icon {
        font-size: 18px;
    }

    .location-address-text {
        font-size: 15px;
        color: #333;
        font-weight: 500;
    }

    .location-map-fullwidth {
        width: 100%;
        height: 350px;
        border-radius: 12px;
        overflow: hidden;
        background: #f5f5f5;
    }

    .minimap-address {
        font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 14px;
        color: #565959;
        margin: 12px 0 0 0;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .minimap-address::before {
        content: '📍';
        font-size: 14px;
    }

    .product-info-column {
        grid-area: info;
    }

    .product-actions-column {
        grid-area: actions;
    }

    /* 하단 섹션들 - Full Width */
    .section-reviews {
        grid-area: reviews;
        grid-column: 1 / -1;
    }

    .section-similar-mobile {
        display: none !important;
    }
}

/* ========================================
   컬럼 1: 이미지 갤러리 스타일
   ======================================== */
.gallery-layout {
    display: flex;
    gap: 12px;
}

.gallery-thumbnails-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 72px;
    flex-shrink: 0;
    order: -1; /* 썸네일을 왼쪽에 배치 */
}

.gallery-thumbnails-vertical .thumb-item {
    width: 70px;
    height: 70px;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative; /* 오버레이 포지셔닝을 위해 필요 */
}

.gallery-thumbnails-vertical .thumb-item:hover:not(.active) {
    border-color: #B0D0F7;
}

.gallery-thumbnails-vertical .thumb-item.active {
    border-color: #3182F6;
    box-shadow: 0 0 0 2px rgba(49, 130, 246, 0.25);
}

.gallery-thumbnails-vertical .thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-main-image {
    flex: 1;
    position: relative;
    min-width: 0;
}

.main-image-container {
    width: 100%;
    aspect-ratio: 1 / 1; /* 정사각형 비율 */
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.main-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: opacity 0.2s ease;
}

/* 이미지 카운터 배지 (데스크톱) */
.gallery-image-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 16px;
    backdrop-filter: blur(4px);
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    z-index: 10;
    pointer-events: none;
    letter-spacing: 0.5px;
}

/* 갤러리 공유 버튼 (데스크톱) */
.gallery-share-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s ease;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.gallery-share-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.05);
}

.gallery-share-btn:active {
    transform: scale(0.95);
}

.gallery-share-btn svg {
    width: 20px;
    height: 20px;
}

/* ========================================
   컬럼 2: 상품 정보 스타일
   ======================================== */

/* 호스트 링크 */
.host-store-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3182F6;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.host-store-link:hover {
    color: #252c3e;
    text-decoration: underline;
}

.host-store-link .host-name {
    font-weight: 500;
}

.host-store-link .host-link-text {
    color: inherit;
}

.host-store-link svg {
    width: 14px;
    height: 14px;
}

/* 상품 제목 */
.product-title-desktop {
    font-size: 28px;
    font-weight: 700;
    color: #0f1111;
    line-height: 1.3;
    margin: 0 0 16px 0;
}

/* 별점 + 위치 */
.rating-location-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

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

.rating-star {
    font-size: 16px;
}

.rating-star-svg {
    flex-shrink: 0;
}

.location-icon-svg {
    flex-shrink: 0;
}

.rating-score {
    font-weight: 600;
    color: #0f1111;
    font-size: 14px;
}

.rating-count {
    color: #3182F6;
    font-size: 14px;
    cursor: pointer;
}

.rating-count:hover {
    text-decoration: underline;
    color: #252c3e;
}

.rating-location-divider {
    color: #d5d9d9;
}

.location-info {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #565959;
    font-size: 14px;
}

/* 가격 정보 카드 - 토스 스타일 */
.price-info-card {
    background: var(--toss-bg-grouped-base, #F9FAFB);
    border: none;
    border-radius: var(--toss-radius-lg, 16px);
    padding: 20px;
    margin-bottom: 20px;
}

.price-info-card .price-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
}

/* 보증금 행에만 구분선 */
.price-info-card .price-row:first-child {
    border-bottom: 1px solid #e8e8e8;
}

/* 월 사용료 행 (두 번째 행부터) 상단 패딩 통일 */
.price-info-card .price-row:not(:first-child) {
    padding-top: 16px;
}

[data-theme="dark"] .price-info-card .price-row:first-child {
    border-bottom-color: #374151;
}

.price-info-card .price-label {
    color: #6B7280;
    font-size: 14px;
    padding-top: 3px;
}

.price-info-card .price-value-wrap {
    text-align: right;
}

.price-info-card .price-current-row {
    display: flex;
    align-items: flex-start; /* 상단 정렬 */
    justify-content: flex-end;
    gap: 8px;
}

.price-info-card .price-discount-rate {
    font-family: 'PretendardVariable', 'Pretendard', sans-serif !important;
    color: #EF4444;
    font-size: 20px;
    font-weight: 500 !important;
    margin-top: 4px; /* 26px 기준 시각적 상단 맞춤 */
}

.price-info-card .price-value {
    font-family: 'PretendardVariable', 'Pretendard', sans-serif !important;
    font-weight: 600 !important;
    color: var(--toss-text-primary, #191F28);
    font-size: 16px;
}

.price-info-card .price-value.price-highlight {
    font-family: 'PretendardVariable', 'Pretendard', sans-serif !important;
    color: var(--toss-text-primary, #191F28);
    font-size: 28px;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

.price-info-card .price-original {
    font-family: 'PretendardVariable', 'Pretendard', sans-serif !important;
    display: block;
    font-size: 14px;
    color: #565959;
    text-decoration: line-through;
    margin-top: 2px;
}

/* 임대 기간 선택 */
.period-selector-section {
    margin-bottom: 20px;
}

.period-selector-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f1111;
    margin: 0 0 12px 0;
}

.period-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.period-btn {
    padding: 10px 16px;
    border: 1px solid #d5d9d9;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 70px;
    text-align: center;
}

.period-btn:hover {
    border-color: #3182F6;
    background: #f7fafa;
}

.period-btn.selected {
    border-color: #3182F6;
    background: #e7f4f5;
    box-shadow: 0 0 0 2px rgba(0, 113, 133, 0.2);
}

.period-btn .period-label {
    font-size: 14px;
    font-weight: 500;
    color: #0f1111;
}

/* 공간 세부 정보 테이블 - 토스 스타일 */
.specs-section {
    margin-bottom: 24px;
}

.specs-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--toss-text-primary, #191F28);
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
}

.specs-table-amazon {
    width: 100%;
    border-collapse: collapse;
}

.specs-table-amazon tr {
    border-bottom: 1px solid var(--toss-line-weak, #F2F4F6);
}

.specs-table-amazon tr:last-child {
    border-bottom: none;
}

.specs-table-amazon td {
    padding: 12px 0;
    font-size: 15px;
}

.specs-table-amazon .spec-label {
    color: var(--toss-text-tertiary, #8B95A1);
    font-weight: 500;
    width: 35%;
}

.specs-table-amazon .spec-value {
    color: var(--toss-text-primary, #191F28);
}

/* 전용면적 단위 전환 스위치 */
.area-value-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.area-unit-switch {
    position: relative;
    display: inline-flex;
    width: 52px;
    height: 24px;
    cursor: pointer;
}

.area-unit-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.area-switch-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3182F6;
    border-radius: 12px;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
}

.area-switch-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    z-index: 1;
    transition: color 0.3s;
}

.area-switch-sqm {
    color: #fff;
}

.area-switch-pyeong {
    color: rgba(255, 255, 255, 0.5);
}

.area-switch-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.area-unit-switch input:checked + .area-switch-slider::before {
    transform: translateX(28px);
}

.area-unit-switch input:checked + .area-switch-slider .area-switch-sqm {
    color: rgba(255, 255, 255, 0.5);
}

.area-unit-switch input:checked + .area-switch-slider .area-switch-pyeong {
    color: #fff;
}

/* 편의시설 - 토스 스타일 */
.amenities-section-amazon {
    margin-bottom: 24px;
}

.amenities-title-amazon {
    font-size: 18px;
    font-weight: 700;
    color: var(--toss-text-primary, #191F28);
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
}

.amenity-badges-amazon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.amenity-badges-amazon .amenity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--toss-bg-base, #F2F4F6);
    border: none;
    border-radius: var(--toss-radius-full, 9999px);
    font-family: 'PretendardVariable', 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--toss-text-secondary, #4E5968);
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.amenity-badges-amazon .amenity-badge:hover {
    background: var(--toss-line-normal, #E5E8EB);
    color: var(--toss-text-primary, #191F28);
}

.amenity-badges-amazon .amenity-badge.amenity-empty {
    background: #F8F9FA;
    color: #ADB5BD;
    font-style: italic;
}

/* 이용 규칙 - 토스 스타일 */
.rules-section-amazon {
    margin-top: 24px;
    margin-bottom: 24px;
}

.rules-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.rules-title-amazon {
    font-size: 18px;
    font-weight: 700;
    color: var(--toss-text-primary, #191F28);
    margin: 0;
    letter-spacing: -0.02em;
}

.rules-toggle-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--toss-line-normal, #E5E8EB);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--toss-text-secondary, #6B7684);
    cursor: pointer;
    transition: all 0.15s ease;
}

.rules-toggle-btn:hover {
    background: var(--toss-bg-base, #F2F4F6);
    border-color: var(--toss-line-dark, #D1D6DB);
}

.rules-toggle-btn .toggle-icon {
    transition: transform 0.2s ease;
}

.rules-toggle-btn[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

.rules-content {
    font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
    font-size: 15px;
    color: var(--toss-text-secondary, #4E5968);
    line-height: 1.75;
    padding: 16px;
    background: var(--toss-bg-base, #F2F4F6);
    border-radius: 12px;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

.rules-content.collapsed {
    max-height: 100px;
    overflow: hidden;
    position: relative;
}

.rules-content.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--toss-bg-base, #F2F4F6));
    pointer-events: none;
}

.rules-content p {
    margin: 0;
    white-space: pre-wrap;
}

/* 공간 소개 */
.description-section-amazon {
    margin-bottom: 20px;
}

.description-title-amazon {
    font-size: 20px;
    font-weight: 700;
    color: #0f1111;
    margin: 0 0 16px 0;
}

.description-content-amazon {
    font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
    font-size: 15px;
    color: #37352f;
    line-height: 1.75;
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    /* Tiptap 에디터 기본 스타일 */
    word-wrap: break-word;
}

.description-content-amazon.expanded {
    max-height: none;
}

/* Tiptap 에디터 스타일 - 공간 소개 */
.description-content-amazon h1 {
    font-size: 1.875em;
    font-weight: 700;
    margin: 1em 0 0.5em 0;
    line-height: 1.2;
    color: #37352f;
}

.description-content-amazon h2 {
    font-size: 1.5em;
    font-weight: 600;
    margin: 0.8em 0 0.4em 0;
    line-height: 1.3;
    color: #37352f;
}

.description-content-amazon h3 {
    font-size: 1.25em;
    font-weight: 600;
    margin: 0.6em 0 0.3em 0;
    line-height: 1.4;
    color: #37352f;
}

.description-content-amazon h4 {
    font-size: 1.1em;
    font-weight: 600;
    margin: 0.5em 0 0.25em 0;
    color: #37352f;
}

.description-more-btn {
    background: none;
    border: none;
    color: #3182F6;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.description-more-btn:hover {
    color: #252c3e;
    text-decoration: underline;
}

/* Tiptap 에디터 스타일 - 공간 소개 내용 */
.description-content-amazon p {
    margin: 0.5em 0;
    line-height: 1.75;
    color: #37352f;
}

.description-content-amazon ul,
.description-content-amazon ol {
    padding-left: 1.5em;
    margin: 0.5em 0;
}

.description-content-amazon li {
    margin: 0.25em 0;
    line-height: 1.75;
}

.description-content-amazon a {
    color: #0b6e99;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.description-content-amazon a:hover {
    color: #37352f;
}

.description-content-amazon code {
    background: #f7f6f3;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Pretendard', monospace;
    font-size: 0.9em;
    color: #e03e3e;
}

.description-content-amazon pre {
    background: #f7f6f3;
    color: #37352f;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1em 0;
    font-family: 'Pretendard', monospace;
    font-size: 0.9em;
    line-height: 1.5;
    border: 1px solid #e9e9e7;
}

.description-content-amazon pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    border-radius: 0;
}

.description-content-amazon blockquote {
    border-left: 3px solid #d3d3d0;
    padding-left: 1em;
    margin: 1em 0;
    color: #9b9a97;
    font-style: italic;
}

.description-content-amazon hr {
    border: none;
    border-top: 1px solid #e9e9e7;
    margin: 2em 0;
}

.description-content-amazon strong {
    font-weight: 700;
}

.description-content-amazon em {
    font-style: italic;
}

.description-content-amazon s {
    text-decoration: line-through;
}

/* 형광펜 스타일 */
.description-content-amazon mark {
    padding: 0.1em 0.2em;
    border-radius: 2px;
    background: #fff3bf;
}

/* Task List 스타일 */
.description-content-amazon ul[data-type="taskList"] {
    list-style: none;
    padding-left: 0;
}

.description-content-amazon ul[data-type="taskList"] li {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
}

.description-content-amazon ul[data-type="taskList"] input[type="checkbox"] {
    margin-top: 0.25em;
    accent-color: #0b6e99;
}

/* ========================================
   위치 정보 섹션 (데스크톱)
   ======================================== */
.location-section-amazon {
    margin: 24px 0;
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
}

.location-title-amazon {
    font-size: 14px;
    font-weight: 600;
    color: #0f1111;
    margin: 0 0 12px 0;
}

.location-map-desktop {
    width: 100%;
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #f8f9fa;
}

.location-address-amazon {
    font-size: 13px;
    color: #565959;
    margin: 0;
}

/* ========================================
   리뷰 섹션 (데스크톱)
   ======================================== */
.reviews-section-amazon {
    margin: 24px 0;
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
}

.reviews-title-amazon {
    font-size: 14px;
    font-weight: 600;
    color: #0f1111;
    margin: 0 0 16px 0;
}

.reviews-summary-amazon {
    margin-bottom: 16px;
}

.reviews-summary-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviews-avg-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.avg-rating-star {
    font-size: 18px;
}

.avg-rating-value {
    font-size: 18px;
    font-weight: 700;
    color: #0f1111;
}

.reviews-total-count {
    font-size: 13px;
    color: #565959;
}

.reviews-list-amazon {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-item-amazon {
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.review-header-amazon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.review-user-amazon {
    font-size: 13px;
    font-weight: 600;
    color: #0f1111;
}

.review-date-amazon {
    font-size: 12px;
    color: #565959;
}

.review-rating-amazon {
    font-size: 12px;
    margin-bottom: 8px;
}

.review-content-amazon {
    font-size: 14px;
    color: #0f1111;
    line-height: 1.6;
    margin: 0;
}

.review-reply-amazon {
    margin-top: 12px;
    padding: 12px;
    background: #fff;
    border-left: 3px solid #3182F6;
    border-radius: 0 8px 8px 0;
}

.review-reply-amazon .reply-label {
    font-size: 12px;
    font-weight: 600;
    color: #3182F6;
    display: block;
    margin-bottom: 4px;
}

.review-reply-amazon .reply-content {
    font-size: 13px;
    color: #0f1111;
    line-height: 1.5;
    margin: 0;
}

.no-reviews-text {
    font-size: 14px;
    color: #565959;
    text-align: center;
    padding: 24px;
}

/* ========================================
   컬럼 3: 액션 사이드바 스타일
   ======================================== */
.product-actions-column {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px; /* action-card-sticky와 AI 분석 섹션 사이의 간격 */
}

.action-card-sticky {
    position: sticky;
    top: 100px;
}

/* 가격 요약 */
.price-summary-amazon {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8e8e8;
}

.price-summary-amazon .price-main {
    display: flex;
    align-items: flex-start; /* 상단 정렬 */
    gap: 4px;
}

.price-summary-amazon .price-currency {
    font-size: 16px;
    color: #0f1111; /* 가격과 동일한 색상 */
    margin-top: 6px; /* 28px 기준 시각적 상단 맞춤 */
}

.price-summary-amazon .price-amount {
    font-family: 'PretendardVariable', 'Pretendard', sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: #0f1111;
}

.price-summary-amazon .price-deposit {
    font-size: 14px;
    color: #565959;
    margin-top: 4px;
}

/* 입주 가능일 배지 */
.availability-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 14px;
}

.availability-badge.available {
    background: #f0f9f0;
    color: #067d00;
}

.availability-badge.unavailable {
    background: #fff5f5;
    color: #c40000;
}

/* 위치 요약 */
.location-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #565959;
    margin-bottom: 16px;
}

/* CTA 버튼 그룹 */
.cta-buttons-amazon {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.cta-buttons-amazon .cta-row {
    display: flex;
    gap: 8px;
}

.cta-btn-amazon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    border-radius: var(--toss-radius-md, 12px);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    border: none;
}

.cta-btn-amazon.secondary {
    flex: 1;
    background: var(--toss-bg-base, #F2F4F6);
    border: none;
    color: var(--toss-text-secondary, #4E5968);
}

.cta-btn-amazon.secondary:hover {
    background: var(--toss-line-normal, #E5E8EB);
    color: var(--toss-text-primary, #191F28);
}

.cta-btn-amazon.secondary.chat-btn:hover i {
    color: #3b82f6;
}

.cta-btn-amazon.secondary.phone-btn:hover i {
    color: #00b938;
}

/* 데스크톱 전화버튼 툴팁 */
.cta-btn-amazon.secondary.phone-btn.desktop-phone-btn {
    position: relative;
}

.cta-btn-amazon.secondary.phone-btn .phone-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #000000;
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cta-btn-amazon.secondary.phone-btn .phone-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #000000;
}

.cta-btn-amazon.secondary.phone-btn:hover .phone-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
}

.cta-btn-amazon.bookmark {
    width: 100%;
    background: var(--toss-bg-base, #F2F4F6);
    border: none;
    color: var(--toss-text-secondary, #4E5968);
}

.cta-btn-amazon.bookmark:hover {
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
}

.cta-btn-amazon.bookmark:hover .bookmark-icon {
    color: #ff6b6b;
}

.cta-btn-amazon.bookmark.active {
    background: #fff5f5;
    border-color: #ff6b6b;
}

.cta-btn-amazon.bookmark.active .bookmark-icon {
    fill: #ff6b6b;
    color: #ff6b6b;
}

/* 비교 버튼 - 토스 스타일 */
.cta-btn-amazon.compare {
    flex: 1;
    background: var(--toss-bg-white, #FFFFFF);
    border: 1.5px solid var(--toss-line-normal, #E5E8EB);
    color: var(--toss-text-secondary, #4E5968);
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.cta-btn-amazon.compare:hover {
    border-color: var(--toss-blue-primary, #3182F6);
    color: var(--toss-blue-primary, #3182F6);
    background: var(--toss-blue-bg, #E8F3FF);
}

.cta-btn-amazon.compare:active {
    transform: scale(0.98);
}

.cta-btn-amazon.compare .compare-icon {
    transition: all 0.2s ease;
}

/* 비교 추가됨 상태 */
.cta-btn-amazon.compare.added {
    background: var(--toss-blue-primary, #3182F6);
    border-color: var(--toss-blue-primary, #3182F6);
    color: white;
}

.cta-btn-amazon.compare.added:hover {
    background: var(--toss-blue-dark, #1B64DA);
    border-color: var(--toss-blue-dark, #1B64DA);
}

.cta-btn-amazon.compare.added .compare-icon {
    color: white;
}

/* 비활성화 (최대 4개) */
.cta-btn-amazon.compare:disabled {
    background: var(--toss-bg-base, #F9FAFB);
    border-color: var(--toss-line-weak, #F2F4F6);
    color: var(--toss-text-placeholder, #B0B8C1);
    cursor: not-allowed;
}

.cta-btn-amazon.compare:disabled:hover {
    transform: none;
}

/* 찜하기 + 비교 버튼 행 레이아웃 조정 */
.cta-buttons-amazon .cta-row:has(.bookmark) {
    display: flex;
    gap: 10px;
}

.cta-buttons-amazon .cta-row:has(.bookmark) .cta-btn-amazon.bookmark {
    flex: 1;
    width: auto;
}

.cta-btn-amazon.primary.reserve {
    width: 100%;
    background: var(--toss-blue-primary, #3182F6);
    border: none;
    color: var(--toss-text-white, #FFFFFF);
    font-size: 16px;
    font-weight: 600;
    padding: 16px 20px;
    border-radius: var(--toss-radius-md, 12px);
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.cta-btn-amazon.primary.reserve:hover {
    background: var(--toss-blue-secondary, #1B64DA);
    box-shadow: none;
}

.cta-btn-amazon.primary.reserve:active {
    transform: scale(0.96);
}

/* 포커스 접근성 개선 (WCAG 2.4.7) */
.cta-btn-amazon.primary.reserve:focus-visible {
    outline: 2px solid #6366F1;
    outline-offset: 2px;
}

/* 화살표 애니메이션 */
.cta-btn-amazon.primary.reserve svg {
    transition: transform 0.3s ease;
}

.cta-btn-amazon.primary.reserve:hover svg {
    transform: translateX(4px);
}

/* 호스트 미니 카드 - 토스 스타일 */
.host-mini-card {
    background: var(--toss-bg-grouped-base, #F9FAFB);
    border: none;
    border-radius: var(--toss-radius-lg, 16px);
    padding: 20px;
    margin-bottom: 16px;
}

.host-mini-card .host-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.host-mini-card .host-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--toss-radius-md, 12px);
    background: var(--toss-line-normal, #E5E8EB);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--toss-text-secondary, #4E5968);
    font-weight: 600;
    overflow: hidden;
}

.host-mini-card .host-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.host-mini-card .host-info {
    flex: 1;
    min-width: 0;
}

/* 호스트명 + 인증 배지 한줄 정렬 */
.host-mini-card .host-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.host-mini-card .host-name-link {
    font-weight: 600;
    color: var(--toss-text-primary, #191F28);
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.host-mini-card .host-name-link:hover {
    color: var(--toss-blue-primary, #3182F6);
}

/* 모바일 인증 배지 (FA 아이콘) */
.company-verification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}

/* 회사 카드 h3 flex 정렬 */
.company-card .company-title h3 {
    display: flex;
    align-items: center;
    gap: 2px;
}

.host-mini-card .host-description {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: var(--toss-text-tertiary, #8B95A1);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.host-mini-card .host-trust-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--toss-line-weak, #F2F4F6);
}

.host-mini-card .host-trust-info:empty {
    display: none;
}

.host-mini-card .host-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}

.host-mini-card .host-trust-item-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    color: #8b95a1;
}

.host-mini-card .host-trust-item-text {
    font-weight: 500;
    color: #4e5968;
    font-size: 13px;
}

.host-mini-card .host-trust-item-sub {
    color: #8b95a1;
    font-size: 12px;
    margin-left: 4px;
}

.host-mini-card .host-trust-item--verified .host-trust-item-icon {
    color: #3182f6;
}

/* 데스크톱 AI 분석 섹션 (컬럼3 사이드바 내) */
.desktop-ai-section {
    margin-top: 0; /* 간격은 .product-actions-column의 gap으로 관리 */
}

.ai-error-desktop {
    padding: 12px 0;
    text-align: center;
}

.ai-error-desktop p {
    font-size: 13px;
    color: #9ca3af;
    margin: 0;
}

/* 계약 조건 - 토스 스타일 */
.contract-terms-amazon {
    background: var(--toss-bg-grouped-base, #F9FAFB);
    border-radius: var(--toss-radius-md, 12px);
    padding: 16px;
    margin-bottom: 16px; /* AI 분석 섹션과의 간격 */
}

.contract-terms-amazon .contract-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--toss-text-secondary, #4E5968);
    margin: 0 0 12px 0;
}

.contract-terms-amazon .contract-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contract-terms-amazon .contract-list li {
    font-size: 13px;
    color: #0f1111;
    padding: 5px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.contract-terms-amazon .contract-list li::before {
    content: "•";
    color: #565959;
    flex-shrink: 0;
}

/* ========================================
   하단 섹션 (Full Width) - 데스크톱
   ======================================== */
@media (min-width: 1024px) {
    /* 지도 섹션 */
    .product-detail-container.amazon-desktop-layout .section-location {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid #e8e8e8;
    }

    /* 리뷰 섹션 */
    .product-detail-container.amazon-desktop-layout .section-reviews {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid #e8e8e8;
    }
}

/* ========================================
   리뷰 섹션 아마존 스타일 (데스크톱)
   ======================================== */
@media (min-width: 1024px) {
    .reviews-amazon-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 32px;
    }

    /* 별점 분포 */
    .rating-distribution {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
    }

    .rating-summary {
        text-align: center;
        margin-bottom: 20px;
    }

    .rating-summary .rating-score-large {
        font-size: 48px;
        font-weight: 700;
        color: #0f1111;
    }

    .rating-summary .rating-stars {
        color: #ffa41c;
        font-size: 20px;
        letter-spacing: 2px;
    }

    .rating-summary .rating-total {
        color: #565959;
        font-size: 14px;
        margin-top: 4px;
    }

    .rating-bars {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .rating-bar-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
    }

    .rating-bar-row .stars {
        width: 60px;
        color: #3182F6;
        cursor: pointer;
        white-space: nowrap;
    }

    .rating-bar-row .stars:hover {
        text-decoration: underline;
    }

    .rating-bar-row .bar {
        flex: 1;
        height: 18px;
        background: #e8e8e8;
        border-radius: 2px;
        overflow: hidden;
    }

    .rating-bar-row .bar-fill {
        height: 100%;
        background: #ffa41c;
        border-radius: 2px;
    }

    .rating-bar-row .percent {
        width: 40px;
        text-align: right;
        color: #3182F6;
    }

    /* 데스크톱 갤러리 썸네일 추가 스타일 */
    .desktop-thumbnail-item {
        width: 60px;
        height: 60px;
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.2s ease;
        position: relative;
        flex-shrink: 0;
    }

    .desktop-thumbnail-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .desktop-thumbnail-item:hover {
        border-color: #ddd;
    }

    .desktop-thumbnail-item.active {
        border-color: #FF6B35;
    }

    .gallery-thumbnails-vertical .thumb-item .thumbnail-more-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.65);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
        font-weight: 600;
        border-radius: 4px;
        z-index: 2;
    }

    /* 스펙 테이블 하이라이트 */
    .specs-table td.highlight-green {
        color: #22c55e;
        font-weight: 600;
    }

    /* CTA 버튼 호버 효과 강화 */
    .cta-button-group .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    }

    .cta-button-group .btn-secondary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* 호스트 스토어 링크 호버 */
    .host-store-link:hover svg {
        transform: translateX(4px);
    }
}

/* ========================================
   전체 너비 섹션 스타일 (데스크톱 전용)
   ======================================== */
@media (min-width: 1024px) {
    .full-width-section {
        position: relative;
        width: 100%;
        padding-top: 20px;
        padding-bottom: 0;
        margin-bottom: -10px;
    }

    /* 구분선을 화면 전체 너비로 확장 */
    .full-width-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 1px;
        background: #e8e8e8;
    }

    .full-width-section .section-inner {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    /* 섹션 타이틀 - 토스 스타일 */
    .section-title-amazon {
        font-size: 20px;
        font-weight: 700;
        color: var(--toss-text-primary, #191F28);
        margin: 0 0 24px 0;
        letter-spacing: -0.02em;
    }

    /* ========================================
       공간 소개 섹션 (전체 너비) - 토스 스타일
       ======================================== */
    .description-section-fullwidth {
        grid-area: description;
    }

    /* 더보기 버튼 포함 wrapper */
    .description-section-fullwidth .section-inner {
        position: relative;
    }

    /* 콘텐츠 영역 */
    .description-section-fullwidth .description-content-amazon {
        font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
        font-size: 15px;
        color: #37352f;
        line-height: 1.75;
        word-wrap: break-word;
        transition: max-height 0.3s ease;
    }

    /* 접힌 상태 - 높이 제한 */
    .description-section-fullwidth.collapsed .description-content-amazon {
        max-height: 240px;
        overflow: hidden;
    }

    /* 접힌 상태 - 그라데이션 fade 효과 */
    .description-section-fullwidth.collapsed .section-inner::after {
        content: "";
        position: absolute;
        bottom: 56px; /* 버튼 높이 고려 */
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
        pointer-events: none;
    }

    /* 펼친 상태 */
    .description-section-fullwidth.expanded .description-content-amazon {
        max-height: none;
        overflow: visible;
    }

    /* 더보기/접기 버튼 - 토스 스타일 */
    .description-section-fullwidth .description-more-btn {
        display: none; /* 기본 숨김 - JS에서 높이 체크 후 표시 */
        width: 100%;
        padding: 14px 20px;
        margin-top: 16px;
        background: var(--toss-bg-base, #F2F4F6);
        border: none;
        border-radius: var(--toss-radius-md, 12px);
        font-family: 'Pretendard', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--toss-text-secondary, #4E5968);
        cursor: pointer;
        transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
        text-align: center;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

    /* 버튼 호버 */
    .description-section-fullwidth .description-more-btn:hover {
        background: var(--toss-line-normal, #E5E8EB);
        color: var(--toss-text-primary, #191F28);
    }

    /* 접힌 상태에서만 버튼 표시 */
    .description-section-fullwidth.collapsed .description-more-btn,
    .description-section-fullwidth.expanded .description-more-btn {
        display: flex;
    }

    /* 버튼 아이콘 */
    .description-section-fullwidth .description-more-btn i {
        font-size: 12px;
        transition: transform 0.2s ease;
    }

    /* ========================================
       호스트 상품 섹션 (전체 너비)
       ======================================== */
    .host-products-section-fullwidth {
        grid-area: host-products;
    }

    .host-products-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .host-products-header .section-title-amazon {
        margin: 0;
    }

    .host-products-more-link {
        font-size: 14px;
        color: #787774;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: color 0.15s;
    }

    .host-products-more-link:hover {
        color: #37352F;
    }

    /* 스크롤 래퍼 - 네비게이션 버튼 포함 */
    .host-products-scroll-wrapper {
        position: relative;
        width: 100%;
    }

    .host-products-scroll-container {
        width: 100%;
        overflow: hidden;
    }

    .host-products-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        padding-bottom: 16px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .host-products-grid::-webkit-scrollbar {
        display: none;
    }

    /* 네비게이션 버튼 스타일 */
    .host-products-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .host-products-nav-btn i {
        font-size: 14px;
        color: #37352F;
    }

    .host-products-nav-prev {
        left: -20px;
    }

    .host-products-nav-next {
        right: -20px;
    }

    /* hover 시 버튼 표시 */
    .host-products-scroll-wrapper:hover .host-products-nav-btn {
        opacity: 1;
        visibility: visible;
    }

    .host-products-nav-btn:hover {
        background: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(1.05);
    }

    .host-products-nav-btn:active {
        transform: translateY(-50%) scale(0.95);
    }

    /* 숨김 상태 (시작/끝 위치) */
    .host-products-nav-btn.hidden {
        display: none !important;
    }

    .host-products-loading {
        display: flex;
        gap: 16px;
    }

    /* index.html의 deal-card 스타일과 동일하게 적용 */
    .host-products-grid .deal-card {
        width: 200px;
        min-width: 200px;
        max-width: 200px;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        cursor: pointer;
        animation: fadeIn 0.3s ease;
    }

    .host-products-grid .deal-card-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        position: relative;
        border-radius: 6px;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        background-color: #F7F7F7;
    }

    .host-products-grid .deal-card-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.04) 100%), #F7F7F7;
        background-size: cover;
        background-position: center;
        background-image: inherit;
        transition: transform 0.3s ease;
    }

    .host-products-grid .deal-card:hover .deal-card-image::before {
        transform: none;
    }

    .host-products-grid .deal-heart-icon {
        position: absolute;
        right: 8px;
        bottom: 8px;
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 10;
    }

    .host-products-grid .deal-heart-icon:hover {
        transform: scale(1.15);
    }

    .host-products-grid .deal-card-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 2px;
    }

    .host-products-grid .deal-text-info {
        display: flex;
        flex-direction: column;
    }

    .host-products-grid .deal-title {
        color: black;
        font-size: 15px;
        font-family: Pretendard;
        font-weight: 400;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .host-products-grid .deal-location {
        color: #555555;
        font-size: 14px;
        font-family: Pretendard;
        font-weight: 400;
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .host-products-grid .deal-price-section {
        display: flex;
        flex-direction: column;
    }

    .host-products-grid .deal-current-price {
        color: #363636;
        font-size: 16px;
        font-family: Pretendard;
        font-weight: 600;
        line-height: 24px;
    }

    .host-products-grid .deal-original-price {
        color: #555555;
        font-size: 13px;
        font-family: Pretendard;
        font-weight: 400;
        text-decoration: line-through;
        line-height: 20px;
    }

    .host-products-empty {
        text-align: center;
        padding: 40px 20px;
        color: #787774;
        font-size: 14px;
    }

    /* 스켈레톤 로딩 카드 - index.html과 동일한 스타일 */
    .host-products-loading .skeleton-product-card {
        width: 200px;
        min-width: 200px;
        max-width: 200px;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .host-products-loading .skeleton-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
        background-size: 200% 100%;
        animation: shimmer 1.5s ease-in-out infinite;
        border-radius: 6px;
    }

    .host-products-loading .skeleton-text {
        height: 14px;
        background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
        background-size: 200% 100%;
        animation: shimmer 1.5s ease-in-out infinite;
        border-radius: 4px;
    }

    .host-products-loading .skeleton-text:first-of-type {
        width: 80%;
    }

    .host-products-loading .skeleton-text:last-of-type {
        width: 50%;
    }

    @keyframes shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* ========================================
       고객 리뷰 섹션 (전체 너비)
       ======================================== */
    .reviews-section-fullwidth {
        grid-area: reviews;
    }

    .reviews-section-fullwidth .reviews-content-grid {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 32px;
    }

    /* 별점 분포 카드 */
    .rating-distribution-card {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 24px;
        height: fit-content;
    }

    .rating-overall {
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #e8e8e8;
    }

    .rating-score-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .rating-star-icon {
        font-size: 20px;
        line-height: 1;
    }

    .rating-big-number {
        font-family: 'PretendardVariable', 'Pretendard', sans-serif;
        font-size: 48px;
        font-weight: 500;
        color: #0f1111;
        line-height: 1;
    }

    .rating-total-count {
        font-size: 14px;
        color: #565959;
        margin-top: 8px;
    }

    .rating-bars {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .rating-bar-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .rating-bar-row .rating-label {
        font-size: 13px;
        color: #565959;
        width: 30px;
        flex-shrink: 0;
    }

    .rating-bar {
        flex: 1;
        height: 12px;
        background: #e8e8e8;
        border-radius: 6px;
        overflow: hidden;
    }

    .rating-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #ffc107 0%, #ff9800 100%);
        border-radius: 6px;
        transition: width 0.3s ease;
    }

    .rating-bar-row .rating-percent {
        font-size: 12px;
        color: #565959;
        width: 35px;
        text-align: right;
        flex-shrink: 0;
    }

    /* 리뷰 메인 콘텐츠 */
    .reviews-main-content {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* 리뷰 사진 갤러리 */
    .review-photos-gallery {
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 12px;
        padding: 20px;
    }

    .review-photos-title {
        font-size: 14px;
        font-weight: 600;
        color: #0f1111;
        margin: 0 0 12px 0;
    }

    .review-photos-grid {
        display: flex;
        gap: 8px;
        overflow-x: auto;
    }

    .review-photo-item {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .review-photo-item:hover {
        transform: scale(1.05);
    }

    .review-photo-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .review-photo-more {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .no-photos-placeholder {
        text-align: center;
        padding: 24px;
        color: #565959;
        font-size: 14px;
    }

    /* 리뷰 목록 래퍼 */
    .reviews-list-wrapper {
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 12px;
        padding: 20px;
    }

    .reviews-list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .reviews-list-title {
        font-size: 14px;
        font-weight: 600;
        color: #0f1111;
        margin: 0;
    }

    .reviews-sort-select {
        padding: 6px 12px;
        border: 1px solid #d5d9d9;
        border-radius: 6px;
        font-size: 13px;
        color: #0f1111;
        background: #fff;
        cursor: pointer;
    }

    .reviews-list-amazon {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .reviews-more-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px;
        margin-top: 16px;
        background: #fff;
        border: 1px solid #d5d9d9;
        border-radius: 8px;
        color: #0f1111;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .reviews-more-btn:hover {
        background: #f7f7f7;
    }

    /* 데스크톱 리뷰 카드 스타일 (모바일과 동일) */
    .reviews-list-amazon .review-card-new {
        display: flex;
        gap: 16px;
        padding-bottom: 20px;
        border-bottom: 1px solid #F1F1F1;
    }

    .reviews-list-amazon .review-card-new:last-child {
        border-bottom: none;
    }

    .reviews-list-amazon .review-card-new.review-card-no-image {
        padding-left: 0;
    }

    .reviews-list-amazon .review-card-thumbnail {
        flex-shrink: 0;
        width: 100px;
        height: 100px;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
    }

    .reviews-list-amazon .review-card-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease;
    }

    .reviews-list-amazon .review-card-thumbnail:hover img {
        transform: scale(1.05);
    }

    .reviews-list-amazon .review-card-thumbnail-count {
        position: absolute;
        bottom: 6px;
        right: 6px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Pretendard', sans-serif;
    }

    .reviews-list-amazon .review-card-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .reviews-list-amazon .review-card-text {
        font-size: 14px;
        line-height: 1.6;
        color: #333;
        margin: 0 0 10px 0;
        word-break: keep-all;
        font-family: 'Pretendard', sans-serif;
    }

    .reviews-list-amazon .review-card-text.expandable {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .reviews-list-amazon .review-card-text.expandable.expanded {
        -webkit-line-clamp: unset;
        display: block;
    }

    .reviews-list-amazon .review-expand-btn {
        background: none;
        border: none;
        color: #888;
        font-size: 13px;
        cursor: pointer;
        padding: 0;
        margin-bottom: 8px;
        font-family: 'Pretendard', sans-serif;
    }

    .reviews-list-amazon .review-expand-btn:hover {
        color: #333;
    }

    .reviews-list-amazon .review-card-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #888;
        font-family: 'Pretendard', sans-serif;
    }

    .reviews-list-amazon .review-card-meta-divider {
        color: #ddd;
    }

    .reviews-list-amazon .review-reply {
        margin-top: 12px;
        padding: 12px;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .reviews-list-amazon .review-reply-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .reviews-list-amazon .review-reply-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        background: #0f1111;
        color: white;
        font-size: 11px;
        font-weight: 600;
        border-radius: 4px;
    }

    .reviews-list-amazon .review-reply-date {
        font-size: 12px;
        color: #888;
    }

    .reviews-list-amazon .review-reply-text {
        font-size: 13px;
        line-height: 1.5;
        color: #555;
        margin: 0;
    }

    /* ========================================
       비슷한 매물 섹션 (전체 너비)
       ======================================== */
    .similar-section-fullwidth {
        grid-area: similar;
        padding-bottom: 24px;
    }

    /* ========================================
       최근 본 상품 섹션 (전체 너비) - 비슷한 매물과 동일 스타일
       ======================================== */
    .recently-viewed-section-fullwidth {
        grid-area: recently-viewed;
        padding-bottom: 24px;
    }

    /* 최근 본 상품 스크롤 - 비슷한 매물과 동일 스타일 적용 */
    .recently-viewed-section-fullwidth .similar-products-scroll {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        padding-bottom: 16px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .recently-viewed-section-fullwidth .similar-products-scroll::-webkit-scrollbar {
        display: none;
    }

    /* 스크롤 래퍼 - 네비게이션 버튼 포함 */
    .similar-products-scroll-wrapper {
        position: relative;
        width: 100%;
    }

    .similar-section-fullwidth .similar-products-scroll {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        padding-bottom: 16px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .similar-products-scroll::-webkit-scrollbar {
        display: none;
    }

    /* 네비게이션 버튼 스타일 */
    .similar-products-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .similar-products-nav-btn i {
        font-size: 14px;
        color: #37352F;
    }

    .similar-products-nav-prev {
        left: -20px;
    }

    .similar-products-nav-next {
        right: -20px;
    }

    /* hover 시 버튼 표시 */
    .similar-products-scroll-wrapper:hover .similar-products-nav-btn {
        opacity: 1;
        visibility: visible;
    }

    .similar-products-nav-btn:hover {
        background: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(1.05);
    }

    .similar-products-nav-btn:active {
        transform: translateY(-50%) scale(0.95);
    }

    /* 숨김 상태 (시작/끝 위치) */
    .similar-products-nav-btn.hidden {
        display: none !important;
    }

    /* 비슷한 매물 - deal-card 스타일 (index.html 동일) */
    .similar-products-scroll .deal-card {
        flex-shrink: 0;
        width: 200px;
        min-width: 200px;
        background: #fff;
        border-radius: 6px;
        overflow: visible;
        text-decoration: none;
        transition: transform 0.2s ease;
    }

    .similar-products-scroll .deal-card:hover {
        transform: translateY(-4px);
    }

    .similar-products-scroll .deal-card-image {
        width: 100%;
        height: 200px;
        aspect-ratio: 1/1;
        border-radius: 6px;
        overflow: hidden;
    }

    .similar-products-scroll .deal-card-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 2px;
    }

    .similar-products-scroll .deal-title {
        color: black;
        font-size: 15px;
        font-family: Pretendard;
        font-weight: 400;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .similar-products-scroll .deal-location {
        color: #555555;
        font-size: 14px;
        font-family: Pretendard;
        font-weight: 400;
        display: flex;
        align-items: center;
        gap: 2px;
    }

    /* 데스크톱 비슷한 매물 위치 아이콘 숨김 */
    .similar-products-scroll .deal-location svg {
        display: none;
    }

    .similar-products-scroll .deal-price-section {
        display: flex;
        flex-direction: column;
    }

    .similar-products-scroll .deal-current-price {
        color: #363636;
        font-size: 16px;
        font-family: Pretendard;
        font-weight: 600;
        line-height: 24px;
    }

    .similar-products-scroll .deal-original-price {
        color: #555555;
        font-size: 13px;
        font-family: Pretendard;
        font-weight: 400;
        text-decoration: line-through;
        line-height: 20px;
    }

    .similar-products-scroll .deal-discount {
        font-size: 16px;
    }

    /* 데스크톱 비슷한 매물/최근 본 상품 할인율 스타일 */
    .similar-products-scroll .deal-discount-rate {
        color: #FF4D4F;
        font-size: 16px;
        font-family: Pretendard;
        font-weight: 600;
        line-height: 24px;
    }

    /* 기존 similar-product-card 스타일 (fallback) */
    .similar-product-card {
        flex-shrink: 0;
        width: 200px;
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 12px;
        overflow: hidden;
        text-decoration: none;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .similar-product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .similar-product-image {
        width: 100%;
        height: 140px;
        overflow: hidden;
    }

    .similar-product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .similar-product-info {
        padding: 12px;
    }

    .similar-product-name {
        font-size: 14px;
        font-weight: 600;
        color: #0f1111;
        margin: 0 0 6px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .similar-product-price {
        font-size: 15px;
        font-weight: 700;
        color: #b12704;
        margin: 0;
    }

    .no-similar-text {
        text-align: center;
        padding: 40px;
        color: #565959;
        font-size: 14px;
    }
}

/* ========================================
   모바일 상단 헤더 바 (쇼핑몰 스타일)
   ======================================== */
.mobile-product-header {
    display: none;
}

@media (max-width: 767px) {
    .mobile-product-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        height: 52px;
        /* content-section의 padding: 0 12px 상쇄 */
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
        padding: 0 12px;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
    }

    .mobile-header-left,
    .mobile-header-right {
        display: flex;
        align-items: center;
        gap: 0;
    }

    /* 첫 번째/마지막 버튼 여백 조정 (아이콘을 콘텐츠 시작점에 맞춤) */
    .mobile-header-left .mobile-header-btn:first-child {
        margin-left: -10px;
    }

    .mobile-header-right .mobile-header-btn:last-child {
        margin-right: -10px;
    }

    .mobile-header-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        background: transparent;
        color: #191919;
        cursor: pointer;
        transition: background 0.15s ease;
        border-radius: 8px;
    }

    .mobile-header-btn:active {
        background: #f5f5f5;
    }

    .mobile-header-btn svg {
        display: block;
    }

    .mobile-header-title {
        flex: 1;
        font-size: 15px;
        font-weight: 500;
        color: #191919;
        text-align: center;
        margin: 0;
        padding: 0 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: 'Pretendard', sans-serif;
        line-height: 52px; /* 헤더 높이와 동일하게 수직 중앙 정렬 */
    }

    /* 캐러셀 border-radius 제거 (헤더와 연결) */
    .product-carousel {
        border-radius: 0;
    }
}

/* ========================================
   검색 오버레이 스타일 (모바일 전용)
======================================== */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    visibility: hidden;
}

.search-overlay.active {
    transform: translateX(0);
    visibility: visible;
}

/* 검색 헤더 */
.search-overlay-header {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 56px;
    padding: 0 12px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.search-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    flex-shrink: 0;
}

.search-header-btn:first-child {
    margin-left: -10px;
}

.search-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 0 12px;
    margin-left: 4px;
}

.search-input-icon {
    color: #999;
    flex-shrink: 0;
}

.search-input-field {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #333;
    padding: 0 8px;
    outline: none;
}

.search-input-field::placeholder {
    color: #999;
}

.search-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

/* 검색 콘텐츠 */
.search-overlay-content {
    padding: 20px 16px;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

/* 섹션 공통 */
.search-category-section,
.search-popular-section,
.search-recent-section {
    margin-bottom: 28px;
}

.search-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #191919;
    margin: 0 0 14px 0;
}

.search-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.search-section-header .search-section-title {
    margin: 0;
}

.search-clear-all {
    font-size: 13px;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
}

/* 카테고리 그리드 */
.search-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 8px;
}

.search-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
}

.category-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #f8f9fa;
    border-radius: 16px;
    font-size: 22px;
    color: #5D5FEF;
    transition: all 0.2s ease;
}

.search-category-item:hover .category-icon-wrap,
.search-category-item:active .category-icon-wrap {
    background: #5D5FEF;
    color: #fff;
}

.search-category-item span {
    font-size: 12px;
    color: #555;
    text-align: center;
    line-height: 1.3;
}

/* 인기 검색어 태그 */
.search-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-tag {
    display: inline-block;
    padding: 8px 14px;
    background: #f5f5f5;
    border-radius: 20px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
}

.search-tag:hover,
.search-tag:active {
    background: #5D5FEF;
    color: #fff;
}

/* 최근 검색어 */
.search-recent-list {
    display: flex;
    flex-direction: column;
}

.search-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

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

.recent-query {
    flex: 1;
    font-size: 14px;
    color: #333;
    text-decoration: none;
}

.recent-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: #bbb;
    cursor: pointer;
}

.recent-delete:hover {
    color: #888;
}

/* 데스크톱에서는 검색 오버레이 숨김 */
@media (min-width: 768px) {
    .search-overlay {
        display: none !important;
    }
}

/* ========================================
   Airbnb 스타일 지도 마커
   ======================================== */
.map-marker-airbnb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.map-marker-airbnb:hover {
    transform: scale(1.1);
    z-index: 100;
}

.marker-image-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #000;
    background: #fff;
}

.marker-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marker-pointer {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #000;
    margin-top: -1px;
}

/* 마커 이미지 로드 실패 시 기본 아이콘 스타일 */
.marker-image-wrapper .marker-fallback-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
}

.marker-image-wrapper .marker-fallback-icon svg {
    width: 24px;
    height: 24px;
}

/* ========================================
   스펙/편의시설 토글 기능 (notion CSS 통합)
   ======================================== */

/* 스펙 헤더 row + 토글 버튼 */
.specs-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.specs-header-row .specs-title {
    margin: 0;
}

.specs-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--toss-line-normal, #E5E8EB);
    border-radius: var(--toss-radius-sm, 8px);
    font-size: 12px;
    font-weight: 500;
    color: var(--toss-text-tertiary, #8B95A1);
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.specs-toggle-btn:hover {
    background: var(--toss-bg-base, #F2F4F6);
    border-color: var(--toss-line-emphasized, #D1D6DB);
    color: var(--toss-text-secondary, #4E5968);
}

.specs-toggle-btn .toggle-icon {
    transition: transform 0.2s ease;
}

.specs-toggle-btn[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* 스펙 테이블 래퍼 */
.specs-table-wrapper {
    transition: max-height 0.3s ease;
}

/* 접힌 상태 - 처음 4개 행만 표시 */
.specs-table-wrapper.collapsed {
    max-height: 180px;
    overflow: hidden;
    position: relative;
}

.specs-table-wrapper.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
}

/* 펼친 상태 */
.specs-table-wrapper.expanded {
    max-height: 500px;
    overflow: visible;
}

.specs-table-wrapper.expanded::after {
    display: none;
}

/* 편의시설 헤더 row + 토글 버튼 */
.amenities-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.amenities-header-row .amenities-title-amazon {
    margin: 0;
}

.amenities-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--toss-line-normal, #E5E8EB);
    border-radius: var(--toss-radius-sm, 8px);
    font-size: 12px;
    font-weight: 500;
    color: var(--toss-text-tertiary, #8B95A1);
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.amenities-toggle-btn:hover {
    background: var(--toss-bg-base, #F2F4F6);
    border-color: var(--toss-line-emphasized, #D1D6DB);
    color: var(--toss-text-secondary, #4E5968);
}

.amenities-toggle-btn .toggle-icon {
    transition: transform 0.2s ease;
}

.amenities-toggle-btn[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* 편의시설 접힌 상태 - 최대 2줄만 표시 */
.amenity-badges-amazon.collapsed {
    max-height: 76px;
    overflow: hidden;
    position: relative;
}

.amenity-badges-amazon.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
}

.amenity-badges-amazon.expanded {
    max-height: none;
    overflow: visible;
}

.amenity-badges-amazon.expanded::after {
    display: none;
}

/* 모바일: 더보기 버튼 */
.amenities-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background: transparent;
    border: 1px dashed var(--toss-line-normal, #E5E8EB);
    border-radius: var(--toss-radius-sm, 8px);
    font-size: 13px;
    font-weight: 500;
    color: var(--toss-text-tertiary, #8B95A1);
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.amenities-more-btn:hover {
    background: var(--toss-bg-base, #F2F4F6);
    border-color: var(--toss-line-emphasized, #D1D6DB);
    color: var(--toss-text-secondary, #4E5968);
}

.amenities-more-btn .more-icon {
    transition: transform 0.2s ease;
}

.amenities-more-btn.expanded .more-icon {
    transform: rotate(180deg);
}

/* 모바일 반응형 - 토글 비활성화 */
@media (max-width: 767px) {
    .specs-header-row,
    .amenities-header-row {
        display: none;
    }

    .specs-table-wrapper.collapsed,
    .amenity-badges-amazon.collapsed {
        max-height: none;
        overflow: visible;
    }

    .specs-table-wrapper.collapsed::after,
    .amenity-badges-amazon.collapsed::after {
        display: none;
    }
}

/* ========================================
   모바일 토스 스타일 타이포그래피 (767px 이하)
   ======================================== */
@media (max-width: 767px) {
    /* 상품명 - 토스 스타일 */
    .mobile-info-card .product-title,
    .mobile-header .product-title {
        font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: var(--toss-text-primary, #191F28);
        line-height: 1.4;
        letter-spacing: -0.02em;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    /* 할인율 - 토스 레드 강조 */
    .mobile-info-card .discount-percent {
        font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: var(--toss-status-error, #DE362F) !important;
        line-height: 1;
    }

    /* 현재 가격 - 굵고 크게 */
    .mobile-info-card .price-current {
        font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 22px;
        font-weight: 600;
        color: var(--toss-text-primary, #191F28);
        line-height: 1;
        letter-spacing: -0.02em;
    }

    /* 가격 단위 (월/시간) */
    .mobile-info-card .price-unit {
        font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 18px;
        font-weight: 500;
        color: var(--toss-text-primary, #191F28);
        line-height: 1;
    }

    /* 정가 - 작고 연하게 */
    .mobile-info-card .price-original,
    .mobile-info-card .price-original-label {
        font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: var(--toss-text-tertiary, #8B95A1);
    }

    .mobile-info-card .price-original {
        text-decoration: line-through;
    }

    /* 가격 영역 레이아웃 - 토스 스타일 간격 */
    .mobile-info-card .price-display {
        gap: 4px;
        margin-bottom: 12px;
    }

    .mobile-info-card .price-main-row {
        gap: 6px;
        align-items: baseline;
    }

    /* Space 섹션 - 토스 스타일 리스트 */
    .mobile-info-card .specs-container {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        margin-top: 12px;
        margin-bottom: 0;
    }

    /* 스펙 리스트 - 단일 컬럼 */
    .mobile-info-card .product-specs {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* 각 스펙 항목 - 좌측 라벨, 좌측 값 (수평 배치) */
    .mobile-info-card .product-specs p {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        margin: 0;
        border-bottom: none;
        gap: 12px;
    }

    /* 라벨 - 토스 tertiary, 좌측 고정 너비 */
    .mobile-info-card .product-specs p strong {
        font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: var(--toss-text-tertiary, #8B95A1);
        flex-shrink: 0;
        min-width: 72px;
    }

    /* 값 - 토스 primary, 좌측 */
    .mobile-info-card .product-specs p span {
        font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 14px !important;
        font-weight: 500;
        color: var(--toss-text-primary, #191F28);
        text-align: left;
    }

    /* 면적 단위 토글 아이콘 - 토스 블루 강조 */
    .mobile-info-card .area-unit-icon {
        color: var(--toss-blue-primary, #3182F6) !important;
        opacity: 1 !important;
        font-size: 12px !important;
        padding: 8px !important;
        margin: -8px !important;
        margin-left: -5px !important;
        border-radius: 6px;
        transition: background 0.15s ease !important;
    }

    .mobile-info-card .area-unit-icon:hover,
    .mobile-info-card .area-unit-icon:active {
        background: rgba(49, 130, 246, 0.08);
    }

    /* 모바일 편의시설 뱃지 - 토스 스타일 */
    .mobile-amenities-section .amenity-badges-amazon .amenity-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        background: var(--toss-bg-base, #F2F4F6);
        border: none;
        border-radius: var(--toss-radius-full, 9999px);
        font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
        font-size: 13px;
        font-weight: 500;
        color: var(--toss-text-secondary, #4E5968);
    }

    /* 모바일 숨겨진 뱃지 */
    .mobile-amenities-section .amenity-badges-amazon .amenity-badge.hidden-badge {
        display: none !important;
    }

    .mobile-amenities-section .amenity-badges-amazon.show-all .amenity-badge.hidden-badge {
        display: inline-flex !important;
    }
}

/* ========================================
   모바일/태블릿 위치 섹션 가시성 제어
   ======================================== */

/* 모바일 위치 섹션 - 기본적으로 숨김 (모바일에서만 표시) */
.mobile-location-section {
    display: none;
}

/* 태블릿/데스크톱에서 기본 위치 섹션 표시 */
.tablet-desktop-only {
    display: block;
}

@media (max-width: 1023px) {
    /* 모바일 위치 섹션 표시 */
    .mobile-location-section {
        display: block;
        margin-top: var(--toss-space-4, 16px);
        padding: 0;
    }

    .mobile-location-section .location-map {
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 200px;
        border-radius: var(--toss-radius-md, 12px);
        overflow: hidden;
    }

    /* 태블릿/데스크톱 전용 위치 섹션 숨김 */
    .tablet-desktop-only {
        display: none !important;
    }
}

/* ========================================
   모바일 회사 정보 카드 레이아웃
   ======================================== */

/* 회사 헤더 행: 회사정보 + 통화/메시지 버튼 */
.company-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--toss-space-3, 12px);
}

.company-header {
    display: flex;
    align-items: center;
    gap: var(--toss-space-4, 16px);
    margin-bottom: var(--toss-space-5, 20px);
}

.company-logo {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--toss-bg-base, #F2F4F6) 0%, var(--toss-line-normal, #E5E8EB) 100%);
    border-radius: var(--toss-radius-lg, 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--toss-text-primary, #191F28);
    font-size: 22px;
    font-weight: 700;
    overflow: hidden;
    box-shadow: var(--toss-shadow-xs);
    border: 1px solid var(--toss-line-weak, #F2F4F6);
    flex-shrink: 0;
}

.company-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-title h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--toss-text-primary, #191F28);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--toss-space-2, 8px);
    cursor: pointer;
    transition: color 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.company-title h3:hover .company-name-text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.company-name-arrow {
    flex-shrink: 0;
    opacity: 0.5;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.company-title h3:hover .company-name-arrow {
    opacity: 1;
    transform: translateX(3px);
}

.company-title p {
    font-size: 13px;
    color: var(--toss-text-tertiary, #8B95A1);
    margin: var(--toss-space-1, 4px) 0 0 0;
}

/* 회사 카드 구분선 */
.card-divider {
    width: 100%;
    height: 1px;
    background: var(--toss-line-weak, #F2F4F6);
    margin-bottom: var(--toss-space-5, 20px);
}

/* 회사 통계 */
.company-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--toss-space-3, 12px);
    margin-bottom: var(--toss-space-5, 20px);
    align-items: stretch;
}

.stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 8px;
    border-radius: var(--toss-radius-md, 12px);
    gap: 4px;
    transition: background 0.15s cubic-bezier(0.2, 0, 0, 1);
    text-align: center;
    min-height: 80px;
    box-sizing: border-box;
}

.stat-item[data-stat="space"] {
    background: rgba(49, 130, 246, 0.08);
}

.stat-item[data-stat="review"] {
    background: rgba(253, 153, 51, 0.08);
}

.stat-item[data-stat="response"] {
    background: rgba(55, 210, 141, 0.08);
}

.stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1;
    font-size: 18px;
    font-weight: 700;
    color: var(--toss-text-primary, #191F28);
    white-space: nowrap;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: var(--toss-text-tertiary, #8B95A1);
    font-weight: 500;
}

/* 연락처 버튼 - 토스 스타일 */
.contact-buttons-container {
    display: flex;
    gap: var(--toss-space-3, 12px);
    margin-top: var(--toss-space-5, 20px);
}

.detail-contact-btn {
    flex: 1;
    height: 42px;
    border: 1px solid var(--toss-line-normal, #E5E8EB);
    border-radius: var(--toss-radius-md, 12px);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--toss-space-2, 8px);
    background: var(--toss-bg-white, #FFFFFF);
    color: var(--toss-text-primary, #191F28);
    position: relative;
}

.detail-contact-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--toss-shadow-sm);
    background: var(--toss-bg-base, #F2F4F6);
}

.detail-contact-btn.icon-only {
    flex: 1;
    min-width: auto;
    padding: 0 var(--toss-space-4, 16px);
}

.detail-contact-btn.chat-btn::after {
    content: "메시지";
}

.detail-contact-btn.chat-btn:hover {
    color: var(--toss-blue-primary, #3182F6);
}

.detail-contact-btn.phone-btn::after {
    content: "전화";
}

.detail-contact-btn.phone-btn:hover {
    color: var(--toss-status-success, #37D28D);
}

/* ========================================
   모바일 스티키 CTA - 토스 스타일
   ======================================== */
@media (max-width: 1023px) {
    /* 모바일 회사 카드 조정 */
    .mobile-info-card .company-card {
        background: transparent;
        border: none;
        padding: 12px 0;
        box-shadow: none;
    }

    .mobile-info-card .company-header {
        margin-bottom: 0;
    }

    .mobile-info-card .company-stats {
        display: none;
    }

    .mobile-info-card .card-divider {
        display: none;
    }

    /* 모바일 회사 헤더 우측 버튼 */
    .mobile-info-card .company-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .mobile-info-card .company-header-actions .detail-contact-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        padding: 0;
        background: transparent;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--toss-text-tertiary, #8B95A1);
    }

    .mobile-info-card .company-header-actions .detail-contact-btn:hover {
        color: var(--toss-text-primary, #191F28);
        box-shadow: none;
        transform: none;
    }

    .mobile-info-card .company-header-actions .detail-contact-btn::after {
        display: none;
    }

    .mobile-info-card .company-header-actions .detail-contact-btn i {
        font-size: 20px;
    }

    /* 하단 스티키 버튼 (프로모션 + 찜 + 예약하기) - 항상 표시 */
    .contact-buttons-container.mobile-sticky-buttons {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        border-top: 1px solid var(--toss-line-normal, #E5E8EB) !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    /* 프로모션 배너 - 초기 숨김, 캐러셀 벗어나면 애니메이션으로 표시 */
    .contact-buttons-container.mobile-sticky-buttons .sticky-promo-banner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 6px 16px 2px;
        background: white;
        /* 초기 상태: 숨김 */
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.25s ease;
    }

    /* 스크롤 시 프로모션 배너 표시 (상단 네비게이터와 동시에) */
    .contact-buttons-container.mobile-sticky-buttons.visible .sticky-promo-banner {
        max-height: 40px;
        padding: 6px 16px 2px;
        opacity: 1;
    }

    .contact-buttons-container.mobile-sticky-buttons .sticky-promo-banner .promo-icon {
        color: var(--toss-status-error, #DE362F);
        flex-shrink: 0;
    }

    .contact-buttons-container.mobile-sticky-buttons .sticky-promo-banner .promo-text {
        font-size: 13px;
        color: var(--toss-text-primary, #191F28);
        font-weight: 500;
    }

    .contact-buttons-container.mobile-sticky-buttons .sticky-promo-banner .promo-text strong {
        color: var(--toss-status-error, #DE362F);
        font-weight: 700;
    }

    /* 버튼 영역 */
    .contact-buttons-container.mobile-sticky-buttons .sticky-buttons-row {
        display: flex;
        gap: 8px;
        padding: 6px 16px 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .contact-buttons-container.mobile-sticky-buttons .mobile-bookmark-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        flex: 0 0 auto !important;
        border-radius: var(--toss-radius-md, 12px);
        background: white;
        border: 1px solid var(--toss-line-normal, #E5E8EB);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
    }

    .contact-buttons-container.mobile-sticky-buttons .mobile-bookmark-btn:hover {
        background: var(--toss-bg-base, #F2F4F6);
    }

    /* 모바일 비교 버튼 */
    .contact-buttons-container.mobile-sticky-buttons .mobile-compare-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        flex: 0 0 auto !important;
        border-radius: var(--toss-radius-md, 12px);
        background: white;
        border: 1px solid var(--toss-line-normal, #E5E8EB);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
        color: var(--toss-text-secondary, #4E5968);
    }

    .contact-buttons-container.mobile-sticky-buttons .mobile-compare-btn:hover {
        background: var(--toss-bg-base, #F2F4F6);
    }

    /* 비교 버튼 활성 상태 (이미 비교 목록에 추가됨) */
    .contact-buttons-container.mobile-sticky-buttons .mobile-compare-btn.active {
        background: var(--toss-blue-light, #E8F3FF);
        border-color: var(--toss-blue-primary, #3182F6);
        color: var(--toss-blue-primary, #3182F6);
    }

    .contact-buttons-container.mobile-sticky-buttons .mobile-compare-btn.active:hover {
        background: var(--toss-blue-light, #E8F3FF);
    }

    .contact-buttons-container.mobile-sticky-buttons .mobile-reservation-btn {
        flex: 1;
        height: 44px;
        background: var(--toss-blue-primary, #3182F6) !important;
        border-radius: var(--toss-radius-md, 12px);
        font-size: 14px;
        font-weight: 600;
        color: white;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--toss-space-2, 8px);
        transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
    }

    .contact-buttons-container.mobile-sticky-buttons .mobile-reservation-btn:hover {
        background: var(--toss-blue-secondary, #1B64DA) !important;
    }

    /* 모바일 예약 버튼 화살표 숨김 */
    .contact-buttons-container.mobile-sticky-buttons .mobile-reservation-btn .reservation-btn-arrow {
        display: none;
    }

    /* 예약 버튼 컨테이너 숨김 (하단 스티키 사용) */
    .reservation-buttons-container {
        display: none;
    }
}

/* ========================================
   포인트 적립 안내 스타일 (미니멀)
   - 데스크톱: 우측 정렬
   - 모바일: 좌측 정렬
   ======================================== */
.points-earn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e8e8e8;
    padding-top: 16px;
    margin-top: 8px;
}

.points-earn-label {
    color: #6B7280;
    font-size: 14px;
    padding-top: 3px;
    flex-shrink: 0;
}

.points-earn-text {
    font-size: 14px;
    color: #4E5968;
    font-weight: 400;
}

/* 모바일: 좌측 정렬 */
.points-earn-row.mobile {
    justify-content: flex-start;
    gap: 12px;
    padding: 0;
    margin-top: 12px;
    border-top: none;
}

.mobile-info-card .points-earn-row.mobile .points-earn-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--toss-text-tertiary, #8B95A1);
    padding-top: 0;
    min-width: 72px;
}

.mobile-info-card .points-earn-row.mobile .points-earn-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--toss-text-primary, #191F28);
}

/* 다크모드 */
[data-theme="dark"] .points-earn-row {
    border-top-color: #374151;
}

/* ===============================================
   플로팅 비교 버튼 (Floating Compare Button)
   - 데스크톱: 우측 하단 고정
   - 모바일: 상단 헤더 아래 우측 고정
   =============================================== */
.floating-compare-btn {
    position: fixed;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: #FFFFFF;
    border: 1.5px solid var(--toss-line-normal, #E5E8EB);
    border-radius: 9999px;
    cursor: pointer;
    font-family: 'Pretendard', -apple-system, sans-serif;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.floating-compare-btn:hover {
    background: var(--toss-blue-primary, #3182F6);
    border-color: var(--toss-blue-primary, #3182F6);
}

.floating-compare-btn:hover .floating-compare-text,
.floating-compare-btn:hover .floating-compare-plus {
    color: white;
}

.floating-compare-btn:active {
    transform: scale(0.98);
}

/* 아이콘 */
.floating-compare-icon {
    width: 20px;
    height: 20px;
    color: var(--toss-text-primary, #191F28);
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.floating-compare-btn:hover .floating-compare-icon {
    color: white;
}

/* 텍스트 */
.floating-compare-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--toss-text-primary, #191F28);
    white-space: nowrap;
    transition: color 0.2s ease;
}

.floating-compare-plus {
    flex-shrink: 0;
    color: var(--toss-text-primary, #191F28);
    transition: color 0.2s ease;
}

/* 배지 (비교 목록 개수) - 숫자만 표시 */
.floating-compare-badge {
    display: none;
    font-size: inherit;
    font-weight: inherit;
    color: var(--toss-blue-primary, #3182F6);
}

.floating-compare-badge.visible {
    display: inline-block;
}

/* 활성 상태 (비교 목록에 추가됨) */
.floating-compare-btn.active {
    background: var(--toss-blue-primary, #3182F6);
    border-color: var(--toss-blue-primary, #3182F6);
}

.floating-compare-btn.active .floating-compare-text,
.floating-compare-btn.active .floating-compare-plus,
.floating-compare-btn.active .floating-compare-icon,
.floating-compare-btn.active .floating-compare-badge {
    color: white;
}

.floating-compare-btn:hover .floating-compare-badge {
    color: white;
}

/* 데스크톱 (1024px 이상): 우측 하단 항상 표시, 내놓기 버튼과 동일한 크기 */
@media (min-width: 1024px) {
    .floating-compare-btn {
        bottom: 32px;
        right: 32px;
        height: 60px;
        padding: 0 24px;
        gap: 12px;
    }

    .floating-compare-text {
        font-size: 18px;
    }

    .floating-compare-plus {
        width: 18px;
        height: 18px;
    }
}

/* 모바일/태블릿 (1023px 이하): 우측 하단 (스티키 푸터 위), 처음부터 표시 */
@media (max-width: 1023px) {
    .floating-compare-btn {
        top: auto;
        bottom: 70px; /* 기본 위치: 스티키 푸터(~60px) + 여백 */
        right: 16px;
        padding: 10px 14px;
        gap: 6px;
        border-radius: 9999px;
        /* 처음부터 표시 (예약하기 버튼처럼) */
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        transition: bottom 0.3s ease;
    }

    /* 프로모션 배너가 표시될 때 위치 조정 (할인 상품 전용) */
    .floating-compare-btn.with-promo {
        bottom: 100px; /* 스티키 푸터(~60px) + 프로모션 배너(~30px) + 여백 */
    }

    /* 하위 호환성: visible 클래스는 더 이상 필요 없지만 기존 코드 호환 */
    .floating-compare-btn.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .floating-compare-icon {
        width: 18px;
        height: 18px;
    }

    .floating-compare-text {
        font-size: 14px;
        font-weight: 500;
    }
}

/* 초소형 모바일: 아이콘만 표시 */
@media (max-width: 374px) {
    .floating-compare-btn {
        padding: 10px;
        border-radius: 50%;
    }

    .floating-compare-text {
        display: none;
    }
}

/* 접근성 포커스 스타일 */
.floating-compare-btn:focus-visible {
    outline: 3px solid var(--toss-blue-primary, #3182F6);
    outline-offset: 2px;
}

/* 모션 감소 모드 */
@media (prefers-reduced-motion: reduce) {
    .floating-compare-btn {
        transition: none;
    }
}

/* =====================================================
   가격 숨기기 (블라인드) UI 스타일
   ===================================================== */

/* 블라인드 가격 섹션 */
.price-blinded-section {
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
    border-radius: 12px;
    text-align: center;
}

.price-blinded-section.pending {
    background: linear-gradient(135deg, #fff9db 0%, #fff3bf 100%);
}

.price-blinded-section.rejected {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe3e3 100%);
}

/* 블라인드 처리된 가격 */
.blinded-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}

.price-blur {
    font-size: 28px;
    font-weight: 700;
    color: #868e96;
    filter: blur(6px);
    user-select: none;
    letter-spacing: 2px;
}

.blinded-price .price-unit {
    font-size: 14px;
    color: #868e96;
}

/* 안내 문구 */
.blinded-notice {
    font-size: 13px;
    color: #495057;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* 요청 상태 표시 */
.request-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.request-status.pending {
    background: #fff3bf;
    color: #e67700;
}

.request-status.pending svg {
    stroke: #e67700;
}

.request-status.rejected {
    background: #ffe3e3;
    color: #c92a2a;
}

.request-status.rejected svg {
    stroke: #c92a2a;
}

.reject-reason {
    font-size: 12px;
    color: #868e96;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    margin-top: 8px;
}

/* 가격 요청 버튼 */
.btn-price-request {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--toss-blue-primary, #3182F6);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    max-width: 280px;
}

.btn-price-request:hover {
    background: #1a6dd8;
    transform: translateY(-1px);
}

.btn-price-request:active {
    transform: translateY(0);
}

.btn-price-request svg {
    flex-shrink: 0;
}

/* =====================================================
   승인 후 인센티브 배너 스타일
   ===================================================== */

.price-approved-section {
    margin-bottom: 16px;
}

.incentive-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fff3bf 0%, #ffe8cc 100%);
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid #ffd43b;
}

.incentive-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.incentive-text {
    flex: 1;
}

.incentive-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #e67700;
    margin-bottom: 2px;
}

.incentive-text small {
    font-size: 12px;
    color: #868e96;
}

/* 인센티브 적용 가격 */
.price-with-incentive {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.price-original-row,
.price-incentive-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.price-original-row .label,
.price-incentive-row .label {
    font-size: 12px;
    color: #868e96;
    min-width: 40px;
}

.price-original {
    font-size: 14px;
    color: #adb5bd;
    text-decoration: line-through;
}

.price-incentive {
    font-size: 24px;
    font-weight: 700;
    color: #f03e3e;
}

.price-incentive-row .price-unit {
    font-size: 12px;
    color: #868e96;
}

/* =====================================================
   모달 기본 스타일
   ===================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}

/* ui-bundle showConfirm/showAlert 모달과의 클래스명 충돌 방지
   ui-bundle에서는 .modal-overlay가 배경(형제)이고,
   여기서는 .modal-overlay가 컨테이너(부모)이므로 스코핑 필요 */
.custom-modal .modal-overlay {
    position: absolute;
    display: block;
    align-items: initial;
    justify-content: initial;
    z-index: auto;
    padding: 0;
}

.modal-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: modalFadeIn 0.15s ease-out forwards;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f3f5;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #212529;
}

.modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #868e96;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.modal-close:hover {
    background: #f1f3f5;
    color: #495057;
}

.modal-body {
    /* 본문 스타일 */
}

/* =====================================================
   가격 요청 모달 스타일
   ===================================================== */

/* sidebar.css 등 다른 CSS의 .modal-content 스타일 덮어쓰기 */
#priceRequestModal.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

#priceRequestModal .modal-content.price-request-modal {
    position: relative !important;
    width: 380px !important;
    max-width: calc(100vw - 32px) !important;
    background: white !important;
    border-radius: 20px !important;
    padding: 0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
}

/* 토스 스타일 모달 헤더 */
#priceRequestModal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: none;
    margin-bottom: 0;
}

#priceRequestModal .modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #191F28;
}

#priceRequestModal .modal-close {
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    color: #8B95A1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
}

#priceRequestModal .modal-close:hover {
    background: #F2F4F6;
}

#priceRequestModal .modal-close svg {
    width: 20px;
    height: 20px;
}

/* 토스 스타일 모달 바디 */
#priceRequestModal .modal-body {
    padding: 0 20px 20px;
}

/* 안내 박스 */
.price-request-modal .modal-info-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F2F7FF;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.price-request-modal .modal-info-box svg {
    flex-shrink: 0;
}

.price-request-modal .modal-info-box span {
    font-size: 13px;
    color: #333D4B;
    line-height: 1.4;
}

.price-request-modal .form-group {
    margin-bottom: 14px;
}

.price-request-modal .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #333D4B;
    margin-bottom: 6px;
}

.price-request-modal .period-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.price-request-modal .period-inputs input,
.price-request-modal .period-inputs select {
    flex: 1;
}

.price-request-modal .period-inputs span {
    font-size: 13px;
    color: #8B95A1;
    flex-shrink: 0;
}

.price-request-modal .toss-input,
.price-request-modal .toss-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E5E8EB;
    border-radius: 10px;
    font-size: 14px;
    color: #191F28;
    background: #F9FAFB;
    transition: all 0.15s;
}

.price-request-modal .toss-input::placeholder {
    color: #ADB5BD;
}

.price-request-modal .toss-input:focus,
.price-request-modal .toss-select:focus {
    outline: none;
    border-color: #3182F6;
    background: white;
    box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.1);
}

.price-request-modal textarea.toss-input {
    resize: none;
    min-height: 72px;
}

.price-request-modal .modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.price-request-modal .btn-secondary {
    flex: 1;
    padding: 12px 16px;
    background: #F2F4F6;
    color: #4E5968;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.price-request-modal .btn-secondary:hover {
    background: #E5E8EB;
}

.price-request-modal .btn-primary {
    flex: 1.5;
    padding: 12px 16px;
    background: #3182F6;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.price-request-modal .btn-primary:hover {
    background: #1B64DA;
}

.price-request-modal .btn-primary:active {
    transform: scale(0.98);
}

.price-request-modal .btn-primary:disabled {
    background: #B0C4DE;
    cursor: not-allowed;
}

/* =====================================================
   투어 신청 버튼 & 모달 스타일
   ===================================================== */

/* 투어 신청 버튼 래퍼 - 예약 버튼과 tight pair */
.tour-request-btn-wrapper {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

/* 투어 신청 버튼 (데스크톱) - blue outline */
.tour-request-btn {
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    color: #3182F6;
    border: 1.5px solid #3182F6;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}

.tour-request-btn:hover {
    background: #F2F7FF;
    border-color: #1B64DA;
    color: #1B64DA;
}

.tour-request-btn:active {
    transform: scale(0.98);
}

/* 대기 중 상태 */
.tour-request-btn.pending {
    background: #FFFBEB;
    border-color: #F59E0B;
    color: #D97706;
    cursor: default;
}

.tour-request-btn.pending:hover {
    background: #FFFBEB;
    border-color: #F59E0B;
    color: #D97706;
}

/* 확정 상태 */
.tour-request-btn.confirmed {
    background: #ECFDF5;
    border-color: #10B981;
    color: #059669;
    cursor: default;
}

.tour-request-btn.confirmed:hover {
    background: #ECFDF5;
    border-color: #10B981;
    color: #059669;
}

/* 상태 안내 텍스트 */
.tour-request-status-text {
    font-size: 12px;
    color: #8B95A1;
    text-align: center;
    margin: 6px 0 0;
}

/* 거절 사유 */
.tour-reject-reason {
    font-size: 12px;
    color: #DE362F;
    text-align: center;
    margin: 6px 0 0;
}

/* 모바일 투어 신청 버튼 (sticky bar) */
.mobile-tour-request-btn {
    padding: 12px 16px;
    background: transparent;
    color: #3182F6;
    border: 1.5px solid #3182F6;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    transition: all 0.15s;
}

.mobile-tour-request-btn:active {
    transform: scale(0.96);
}

.mobile-tour-request-btn.pending {
    background: #FFFBEB;
    border-color: #F59E0B;
    color: #D97706;
    cursor: default;
}

.mobile-tour-request-btn.confirmed {
    background: #ECFDF5;
    border-color: #10B981;
    color: #059669;
    cursor: default;
}

/* 투어 모달 오버레이 - bottom-nav.js 패턴 (transition 기반) */
#tourRequestModal.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0) !important;
    backdrop-filter: blur(0px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    padding: 20px !important;
    transition: background 0.3s ease, backdrop-filter 0.3s ease !important;
}

#tourRequestModal.modal-overlay.active {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
}

#tourRequestModal .modal-content.tour-request-modal {
    position: relative !important;
    width: 480px !important;
    max-width: calc(100vw - 32px) !important;
    background: white !important;
    border-radius: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    /* 초기 상태: 아래로 숨기고 투명 */
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

#tourRequestModal.active .modal-content.tour-request-modal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 모달 헤더 */
.tour-request-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 12px;
    border-bottom: none;
    margin-bottom: 0;
}

.tour-request-modal .modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #191F28;
    margin: 0;
}

.tour-request-modal .modal-close {
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    color: #8B95A1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
}

.tour-request-modal .modal-close:hover {
    background: #F2F4F6;
}

/* 모달 바디 */
.tour-request-modal .modal-body {
    padding: 0 20px 24px;
}

/* 안내 박스 */
.tour-request-modal .modal-info-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F2F7FF;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
}

.tour-request-modal .modal-info-box svg {
    flex-shrink: 0;
}

.tour-request-modal .modal-info-box span {
    font-size: 13px;
    color: #333D4B;
    line-height: 1.4;
}

/* 폼 그룹 */
.tour-request-modal .form-group {
    margin-bottom: 16px;
}

.tour-request-modal .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333D4B;
    margin-bottom: 6px;
}

.tour-request-modal .form-group label .required {
    color: #DE362F;
    font-weight: 400;
}

.tour-request-modal .form-group label .optional {
    color: #8B95A1;
    font-weight: 400;
    font-size: 12px;
}

/* 입력 필드 */
.tour-request-modal .toss-input,
.tour-request-modal .toss-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E5E8EB;
    border-radius: 10px;
    font-size: 14px;
    color: #191F28;
    background: #F9FAFB;
    transition: all 0.15s;
    font-family: inherit;
    box-sizing: border-box;
}

.tour-request-modal .toss-input::placeholder {
    color: #ADB5BD;
}

.tour-request-modal .toss-input:focus,
.tour-request-modal .toss-select:focus {
    outline: none;
    border-color: #3182F6;
    background: white;
    box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.1);
}

.tour-request-modal textarea.toss-input {
    resize: none;
    min-height: 60px;
    line-height: 1.5;
}

/* 모달 액션 버튼 */
.tour-request-modal .modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.tour-request-modal .btn-secondary {
    flex: 1;
    padding: 14px 16px;
    background: #F2F4F6;
    color: #4E5968;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.tour-request-modal .btn-secondary:hover {
    background: #E5E8EB;
}

.tour-request-modal .btn-primary {
    flex: 1.5;
    padding: 14px 16px;
    background: #3182F6;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.tour-request-modal .btn-primary:hover {
    background: #1B64DA;
}

.tour-request-modal .btn-primary:active {
    transform: scale(0.98);
}

.tour-request-modal .btn-primary:disabled {
    background: #B0C4DE;
    cursor: not-allowed;
}

/* 모바일 반응형: bottom sheet - bottom-nav.js profile-sheet 패턴
   transition: transform으로 하단에서 슬라이드업, .active 토글 */
@media (max-width: 768px) {
    #tourRequestModal.modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #tourRequestModal .modal-content.tour-request-modal {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12) !important;
        /* 초기 상태: 화면 아래에 숨김 (bottom-nav profile-sheet와 동일) */
        opacity: 1 !important;
        transform: translateY(100%) !important;
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    #tourRequestModal.active .modal-content.tour-request-modal {
        transform: translateY(0) !important;
    }

    #tourRequestModal .tour-request-modal .modal-body {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    #tourRequestModal .tour-request-modal .modal-actions {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* =====================================================
   가격 파티클 블라인드 효과 (반중력 스타일)
   ===================================================== */

/* 파티클 바 - Canvas 기반 반중력 파티클 컨테이너 */
.price-blind-bar {
    display: inline-block;
    position: relative;
    width: 5em;
    height: 1em;
    vertical-align: middle;
    border-radius: 3px;
    background: transparent;
    overflow: hidden;
}

/* 파티클 바 - 작은 크기 (인원제한, 계약조건용) */
.price-blind-bar-sm {
    width: 3em;
    height: 0.9em;
}

/* 파티클 바 - AI 섹션용 (어두운 배경) */
.price-blind-bar-ai {
    width: 100%;
    height: 60px;
    border-radius: 8px;
}

/* AI 블라인드 안내 컨테이너 */
.ai-blind-notice {
    padding: 16px;
    text-align: center;
}

/* 가격 확인 요청 버튼 */
.price-request-btn {
    width: 100%;
    padding: 14px 16px;
    margin-top: 16px;
    background: #3182F6;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.price-request-btn:hover {
    background: #1B64DA;
}

/* =====================================================
   채팅/연락처 버튼 비활성화 스타일
   ===================================================== */

.cta-btn-amazon.chat-btn.disabled,
.cta-btn-amazon.phone-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* 채팅/전화 disabled 안내는 title 속성 툴팁으로 대체 (::after 겹침 방지) */

/* 버튼 부모에 relative 추가 */
.cta-btn-amazon {
    position: relative;
}

/* 모바일 대응 */
@media (max-width: 767px) {
    .price-blinded-section {
        padding: 16px;
    }

    .price-blur {
        font-size: 24px;
    }

    .btn-price-request {
        max-width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }

    .incentive-banner {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .price-incentive {
        font-size: 20px;
    }
}

/* =====================================================
   모바일 가격 블라인드 전용 스타일
   ===================================================== */

/* 모바일 가격 영역 블라인드 (버튼 없이 안내만) */
.price-blinded-section.mobile-blinded {
    padding: 12px 0;
    background: transparent;
    border-radius: 0;
    text-align: left;
}

.price-blinded-section.mobile-blinded .blinded-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
    justify-content: flex-start;
}

.price-blinded-section.mobile-blinded .blinded-price .price-unit {
    font-size: 14px;
    color: #98A2B3;
    font-weight: 400;
}

.price-blinded-section.mobile-blinded .blinded-notice {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.price-blinded-section.mobile-blinded .request-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}

.price-blinded-section.mobile-blinded .request-status.pending {
    color: #f59e0b;
}

.price-blinded-section.mobile-blinded .request-status.rejected {
    color: #ef4444;
}

.price-blinded-section.pending.mobile-blinded {
    background: transparent;
}

.price-blinded-section.rejected.mobile-blinded {
    background: transparent;
}

.price-blinded-section.mobile-blinded .reject-reason {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

/* 하단 CTA: 가격 확인 요청 스타일 */
.reservation-btn.price-blind-cta {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.reservation-btn.price-blind-cta:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.reservation-btn.price-blind-cta.pending {
    background: linear-gradient(135deg, #6dacf7 0%, #4d94f5 100%);
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.85;
}

.reservation-btn.price-blind-cta.rejected {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ===================================
   가용성 캘린더 (Availability Calendar)
   =================================== */

/* CTA 토글 버튼 */
.availability-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    margin-top: 0;
    border: 1.5px solid #d1d5db;
    border-radius: 12px;
    background: #fff;
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.availability-toggle-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.availability-toggle-btn.open {
    background: #f3f4f6;
}

.availability-toggle-btn:active {
    transform: scale(0.98);
}

.availability-toggle-btn .toggle-chevron {
    transition: transform 0.3s ease;
}

.availability-toggle-btn.open .toggle-chevron {
    transform: rotate(180deg);
}

/* 드롭다운 컨테이너 */
.availability-calendar-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
    margin-top: -8px;
}

.availability-calendar-dropdown.open {
    max-height: 500px;
    opacity: 1;
}

.availability-calendar-dropdown .availability-calendar-section {
    margin-top: 0;
    border-top: none;
    border-radius: 0 0 12px 12px;
    border-color: #d1d5db;
}

.availability-toggle-btn.open {
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    margin-bottom: 0;
}

/* 다크모드 토글 버튼 */
[data-theme='dark'] .availability-toggle-btn {
    background: #1f2937;
    border-color: #4b5563;
    color: #d1d5db;
}

[data-theme='dark'] .availability-toggle-btn:hover {
    background: #374151;
}

[data-theme='dark'] .availability-calendar-dropdown .availability-calendar-section {
    border-color: #4b5563;
}

.availability-calendar-section {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    background: var(--bg-primary, #fff);
}

.availability-calendar-header {
    margin-bottom: 12px;
}

.availability-calendar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--toss-text-primary, #191F28);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.3;
    margin: 0;
}

.availability-calendar-title svg {
    color: var(--text-secondary, #6b7280);
    flex-shrink: 0;
}

/* 월 네비게이션 */
.availability-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
}

.cal-nav-btn:hover:not(:disabled) {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-primary, #1f2937);
}

.cal-nav-btn:disabled {
    cursor: not-allowed;
}

.cal-month-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

/* 캘린더 그리드 */
.availability-calendar-grid {
    user-select: none;
}

.cal-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}

.cal-header-row {
    margin-bottom: 2px;
}

.cal-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    font-size: 12px;
    border-radius: 0;
}

.cal-day-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary, #9ca3af);
}

.cal-day-name.sun { color: #ef4444; }
.cal-day-name.sat { color: #3b82f6; }

.cal-empty {
    background: transparent;
}

/* 날짜 셀 상태 - 원형 뱃지 스타일 */
.cal-date {
    font-weight: 500;
    color: var(--text-primary, #1f2937);
    transition: all 0.15s;
    position: relative;
}

.cal-date .cal-date-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: all 0.15s;
}

.cal-date.available .cal-date-inner {
    background: #ecfdf5;
    color: var(--text-primary, #1f2937);
}

.cal-date.booked .cal-date-inner {
    background: #fee2e2;
    color: #dc2626;
    font-weight: 600;
}

.cal-date.past {
    color: var(--text-tertiary, #d1d5db);
}

.cal-date.past .cal-date-inner {
    background: transparent;
}

.cal-date.today .cal-date-inner {
    border: 1.5px solid #3b82f6;
    font-weight: 700;
}

.cal-date.sun:not(.past):not(.booked) .cal-date-inner { color: #ef4444; }
.cal-date.sat:not(.past):not(.booked) .cal-date-inner { color: #3b82f6; }

/* 시간제 상품: 클릭 가능한 날짜 */
.cal-date[data-date] {
    cursor: pointer;
}

.cal-date[data-date]:hover:not(.past) .cal-date-inner {
    background: var(--bg-secondary, #e5e7eb);
    transform: scale(1.1);
}

.cal-date.selected .cal-date-inner {
    background: #3b82f6 !important;
    color: #fff !important;
}

/* 범례 */
.availability-calendar-legend {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, #f3f4f6);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot.available {
    background: #d1fae5;
    border: 1px solid #34d399;
}

.legend-dot.booked {
    background: #fca5a5;
    border: 1px solid #f87171;
}

.legend-dot.past {
    background: #e5e7eb;
    border: 1px solid #d1d5db;
}

/* 시간대 슬롯 */
.availability-timeslots {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #f3f4f6);
}

.timeslots-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin-bottom: 8px;
}

.timeslots-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.timeslot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.15s;
}

.timeslot.available {
    background: #d1fae5;
    color: #065f46;
}

.timeslot.booked {
    background: #fecaca;
    color: #991b1b;
}

.timeslot.past {
    background: var(--bg-secondary, #f9fafb);
    color: var(--text-tertiary, #d1d5db);
}

/* 모바일 캘린더 */
.mobile-availability.availability-calendar-section {
    margin: 0 -16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 16px;
}

.mobile-availability.availability-calendar-section::before {
    content: '';
    display: block;
    height: 8px;
    margin: 0 -16px 16px;
    background: linear-gradient(to bottom, #f7f8fb 0%, #f7f8fb calc(100% - 1px), #e9edf3 calc(100% - 1px), #e9edf3 100%);
}

/* ::after 제거 - #detailSectionDivider와 겹쳐서 구분선이 2개 보이는 문제 해결 */

/* 다크모드 */
[data-theme='dark'] .availability-calendar-section {
    border-color: #374151;
    background: var(--bg-primary, #1f2937);
}

[data-theme='dark'] .cal-date.booked .cal-date-inner {
    background: #7f1d1d;
    color: #fca5a5;
}

[data-theme='dark'] .cal-date.available .cal-date-inner {
    background: #064e3b;
    color: #d1fae5;
}

[data-theme='dark'] .timeslot.available {
    background: #064e3b;
    color: #6ee7b7;
}

[data-theme='dark'] .timeslot.booked {
    background: #7f1d1d;
    color: #fca5a5;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .availability-calendar-title {
        font-size: 16px;
    }

    .availability-calendar-section {
        padding: 14px;
    }

    .cal-cell {
        height: 40px;
        font-size: 13px;
    }

    .cal-date .cal-date-inner {
        width: 32px;
        height: 32px;
    }

    .timeslots-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}