/* ============================================
   건축포털 김반장 - 메인 스타일시트
   당근마켓 스타일 모바일 퍼스트
   ============================================ */

/* 페이징 컨테이너 */
.pagination-container {
    margin: 40px 0;
    padding: 20px 0;
    text-align: center;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    color: #333;
}

.pagination-btn:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #999;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-numbers {
    display: flex;
    gap: 4px;
}

.pagination-number {
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-number:hover {
    background: #f5f5f5;
    border-color: #999;
}

.pagination-number.active {
    background: #FF6F0F;
    color: #fff;
    border-color: #FF6F0F;
}

.pagination-info {
    margin-top: 12px;
    font-size: 14px;
    color: #666;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .pagination {
        gap: 4px;
    }
    
    .pagination-number {
        min-width: 36px;
        height: 36px;
        font-size: 12px;
    }
    
    .pagination-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* 리셋 및 기본 설정 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: keep-all;
    text-wrap: balance;
}

/* 토스트 메시지 */
#toast {
    text-align: center;
}

:root {
    /* 당근마켓 색상 */
    --primary-color: #FF6F0F;
    --primary-hover: #E85D00;
    --background: #FFFFFF;
    --surface: #F8F9FA;
    --text-primary: #212529;
    --text-secondary: #868E96;
    --border: #E2E8F0;
    --error: #EF4444;
    --success: #10B981;
    
    /* 간격 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* 그림자 */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    
    /* 모서리 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: 60px; /* 하단 퀵메뉴 공간 */
}

/* ============================================
   상단 헤더
   ============================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.header-main {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    justify-content: space-between;
}

.header-logo {
    flex-shrink: 0;
}

.logo-link {
    display: inline-block;
    text-decoration: none;
}

.logo-img {
    height: 32px;
    width: auto;
    display: block;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    position: relative;
}

.header-icon-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--text-primary);
    font-size: 20px;
    text-decoration: none;
    transition: opacity 0.2s;
    position: relative;
}

.header-icon-btn:hover,
.header-icon-btn:active {
    opacity: 0.7;
}

.header-icon-btn svg {
    width: 24px;
    height: 24px;
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: #ef4444;
    color: white;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--background);
    box-sizing: border-box;
}

.header-icon-btn.chat {
    display:none; /* 모바일용 */
}
.header-icon-btn.profile {
    display:none; /* 모바일용 */
}


/* ============================================
   1차 카테고리 슬라이드
   ============================================ */
.category-slider {
    width: 100%;
    height: 48px;
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: sticky;
    top: 56px; /* header 높이만큼 아래에 고정 */
    z-index: 99; /* header(z-index: 100) 아래, 콘텐츠 위 */
    box-shadow: var(--shadow-sm);
}

.category-slider-content {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-left: var(--spacing-sm);
}

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

.category-all-btn {
    flex-shrink: 0;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 var(--spacing-sm);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.category-all-btn:hover {
    background-color: var(--border);
}

.category-all-btn svg {
    width: 18px;
    height: 18px;
}

.category-list {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    gap: var(--spacing-md);
    height: 100%;
    white-space: nowrap;
    flex: 1;
    overflow-x: auto;
}

.view-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-sm);
    flex-shrink: 0;
    background-color: var(--background);
    position: relative;
    z-index: 1;
}

.view-toggle-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    padding: 0;
}

.view-toggle-btn:hover {
    background-color: var(--surface);
    color: var(--text-primary);
}

.view-toggle-btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.view-toggle-btn svg {
    width: 16px;
    height: 16px;
}

/* 뷰/정렬 선택 컨트롤 */
.view-sort-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-sm);
    flex-shrink: 0;
    background-color: var(--background);
    position: relative;
    z-index: 10;
}

.control-btn-wrapper {
    position: relative;
}

.control-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s;
    padding: 0;
    gap: 4px;
}

.control-btn:hover {
    background-color: var(--surface);
    border-color: var(--primary-color);
}

.control-btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.control-btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.control-btn-label {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* 정렬 버튼 아이콘 숨기기 */
#sortSelectIcon {
    display: none;
}

/* 정렬 버튼 라벨 항상 표시 */
#sortSelectLabel {
    display: inline-block !important;
}

.control-dropdown {
    position: fixed;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 120px;
    overflow: hidden;
    display: none;
}

.control-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.control-option:last-child {
    border-bottom: none;
}

.control-option:hover {
    background: var(--surface);
}

.control-option.active {
    background: #fff5e6;
    color: var(--primary-color);
    font-weight: 500;
}

.control-option svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sort-order-icon {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: auto;
}

.category-item {
    flex-shrink: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    transition: color 0.2s;
    gap: 4px;
}

.category-item.has-parent-icon::before {
    content: '↑';
    font-size: 12px;
    opacity: 0.6;
    transition: opacity 0.2s;
    margin-right: 2px;
    line-height: 1;
}

.category-item.has-parent-icon:hover::before {
    opacity: 1;
}

.category-item:hover,
.category-item.active {
    color: var(--text-primary);
    font-weight: 600;
}


/* ============================================
   인트로 화면
   ============================================ */
.intro-screen {
    position: fixed;
    top: 104px; /* 헤더(56px) + 카테고리 슬라이더(48px) */
    left: 0;
    width: 100%;
    height: calc(100vh - 104px);
    background-color: var(--background);
    z-index: 1000;
    display: none; /* 기본적으로 숨김 */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 1.6s ease-out;
}

.intro-screen.show {
    display: flex;
    opacity: 1;
}

.intro-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.intro-content {
    text-align: center;
    padding: var(--spacing-lg);
    width: 100%;
    max-width: 900px;
}

.intro-text {
    margin-bottom: var(--spacing-xl);
    font-size: 30px; /* PC 기본값 */
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.6;
}

.intro-text .intro-line1,
.intro-text .intro-line2 {
    display: inline;
}

.intro-category-wrapper {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    overflow: hidden;
    height: 1.5em;
    line-height: 1.5em;
    /* PC 기본값 */
    margin-bottom: -10px;
    line-height: 34px;
    font-size: 34px;
}

.intro-text .intro-category-name {
    font-size: 34px; /* PC 기본값 */
    font-weight: 700;
    color: var(--primary-color);
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    position: relative;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    white-space: nowrap;
    line-height: 1.5em;
    transform: translateY(2px);
}

/* 위로 올라가면서 사라지기 */
.intro-text .intro-category-name.slide-out-up {
    transform: translateY(2px) translateY(-100%);
    opacity: 0;
}

/* 아래에서 올라오면서 나타나기 */
.intro-text .intro-category-name.slide-in-up {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform: translateY(100%);
    opacity: 0;
    line-height: 1.5em;
}

.intro-text .intro-category-name.slide-in-up.active {
    transform: translateY(2px);
    opacity: 1;
}

/* 아래로 내려가면서 사라지기 */
.intro-text .intro-category-name.slide-out-down {
    transform: translateY(2px) translateY(100%);
    opacity: 0;
}

/* 위에서 내려오면서 나타나기 */
.intro-text .intro-category-name.slide-in-down {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform: translateY(-100%);
    opacity: 0;
    line-height: 1.5em;
}

.intro-text .intro-category-name.slide-in-down.active {
    transform: translateY(2px);
    opacity: 1;
}

.intro-button {
    margin-top: var(--spacing-xl);
    padding: 14px 32px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.intro-button:hover {
    background-color: var(--primary-hover);
}

.intro-button:active {
    transform: scale(0.98);
}

/* 모바일 스타일 */
@media (max-width: 767px) {
    .intro-text {
        font-size: 20px;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .intro-text .intro-line1 {
        display: block;
        text-align: center;
    }
    
    .intro-text .intro-line2 {
        display: block;
        text-align: center;
    }
    
    .intro-category-wrapper {
        margin-bottom: -5px;
        line-height: 24px;
        font-size: 24px;
    }
    
    .intro-text .intro-category-name {
        font-size: 24px;
    }
}

/* ============================================
   상품 목록
   ============================================ */
.main-container {
    width: 100%;
}

.main-container.hidden {
    display: none;
}

.main-content {
    padding: var(--spacing-md);
    max-width: 100%;
    margin: 0 auto;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

/* 갤럭시 폴드 같은 매우 좁은 화면: 1열 */
@media (max-width: 360px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

.products-grid[data-view="list"] {
    display: block;
    grid-template-columns: none;
    gap: 0;
}

.products-grid[data-view="list"] .product-card {
    display: none !important;
}

.products-grid[data-view="list"] .product-item {
    display: flex !important;
    margin-bottom: var(--spacing-md);
    width: 100%;
}

.products-grid[data-view="list"] .product-item:last-child {
    margin-bottom: 0;
}

.products-grid[data-view="grid"] .product-item {
    display: none !important;
}

/* 상품 카드 (그리드 뷰) */
.product-card {
    background-color: var(--background);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:active {
    transform: scale(0.98);
}

.product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* 정사각형 비율 */
    background-color: var(--surface);
    overflow: hidden;
}

.product-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* 정사각형 비율 */
    background-color: var(--surface);
    overflow: hidden;
}

.product-image img,
.product-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-image-placeholder,
.product-image-wrapper .product-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background-color: var(--surface);
    color: var(--text-secondary);
    opacity: 0.6;
}

.product-card:hover .product-image img,
.product-card:hover .product-image-wrapper img {
    transform: scale(1.1);
}

.product-badges {
    position: absolute;
    top: var(--spacing-xs);
    left: var(--spacing-xs);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    z-index: 2;
}

.badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.badge-new {
    background-color: var(--primary-color);
    color: white;
}

.badge-discount {
    background-color: var(--error);
    color: white;
}

.product-favorite {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    transition: background-color 0.2s;
}

.product-favorite svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
    fill: none;
    transition: stroke 0.2s, fill 0.2s;
}

.product-favorite:hover {
    background-color: rgba(255, 111, 15, 0.1);
}

.product-favorite:hover svg {
    stroke: var(--primary-color);
}

/* 활성화된 하트 */
.product-favorite.active {
    background-color: rgba(255, 111, 15, 0.1);
}

.product-favorite.active svg {
    stroke: var(--primary-color);
    fill: var(--primary-color);
}

.product-info {
    padding: var(--spacing-sm);
}

.product-name {
    font-size: 20px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    /* min-height: 2.8em; */
}

.product-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    font-size: 12px;
    color: var(--text-secondary);
}

.product-region {
    font-weight: 500;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

.product-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.price-original {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: line-through;
    margin-right: var(--spacing-xs);
}

.price-current {
    color: var(--text-primary);
}

/* 상품 아이템 (리스트 뷰) */
.product-item {
    display: flex;
    background-color: var(--background);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
}

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

.product-item-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    background-color: var(--surface);
    position: relative;
    overflow: hidden;
}

.product-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-item-image .product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background-color: var(--surface);
    color: var(--text-secondary);
    opacity: 0.6;
}

.product-item:hover .product-item-image img {
    transform: scale(1.1);
}

.product-item-info {
    flex: 1;
    padding: 0 var(--spacing-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-item-name {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.product-item-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-item-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.product-item-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
}

/* ============================================
   하단 퀵메뉴
   ============================================ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: var(--background);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs);
    text-decoration: none;
    color: var(--text-secondary);
    transition: color 0.2s;
    min-height: 60px;
}

.nav-item.active {
    color: var(--primary-color);
}

.nav-icon {
    font-size: 24px;
    margin-bottom: 2px;
}

.nav-label {
    font-size: 11px;
    font-weight: 500;
}

/* ============================================
   플로팅 버튼 (상품추가)
   ============================================ */
.floating-add-btn {
    position: fixed;
    bottom: 80px;
    right: var(--spacing-md);
    width: 56px;
    height: 56px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.floating-add-btn:hover {
    transform: scale(1.05);
}

.floating-add-btn:active {
    transform: scale(0.95);
}

/* ============================================
   검색 화면
   ============================================ */
.search-header {
    width: 100%;
    height: 56px;
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
}

.search-header-content {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    gap: var(--spacing-sm);    
}

.search-back-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-primary);
    flex-shrink: 0;
}

.search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    height: 40px;
    padding: 0 var(--spacing-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 15px;
    outline: none;
    background-color: var(--surface);
}

.search-input:focus {
    border-color: var(--primary-color);
    background-color: var(--background);
}

.search-submit-btn,
.search-sort-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-primary);
    color: var(--text-primary);
    flex-shrink: 0;
}

.recent-searches {
    width: 100%;
    background-color: var(--background);
}

.recent-searches-content {
    padding: var(--spacing-md);
}

.recent-searches-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.recent-searches-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.recent-searches-delete-all {
    font-size: 14px;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.recent-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.recent-search-item:last-child {
    border-bottom: none;
}

.recent-search-text {
    flex: 1;
    font-size: 15px;
    color: var(--text-primary);
}

.recent-search-delete {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 18px;
}

.search-category-bar {
    width: 100%;
    height: 48px;
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.search-category-bar::-webkit-scrollbar {
    display: none;
}

.search-category-bar-content {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding-left: var(--spacing-xs);
}

.search-category-list {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm);
    gap: var(--spacing-sm);
    height: 100%;
    white-space: nowrap;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.search-category-item {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    background-color: var(--surface);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.search-category-item.active {
    background-color: var(--primary-color);
    color: white;
}

/* ============================================
   알림 화면
   ============================================ */
.notification-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background-color: var(--background);
    z-index: 1000;
    transition: right 0.3s ease;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
    overflow-y: auto;
}

.notification-panel.open {
    right: 0;
}

.notification-header {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-md);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background-color: var(--background);
    z-index: 10;
}

.notification-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.notification-close-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-primary);
}

.notification-list {
    padding: var(--spacing-md);
}

.notification-item {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.2s;
}

.notification-item:hover {
    background-color: var(--surface);
}

.notification-item.unread {
    background-color: #FFF9E6;
}

.notification-header-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.notification-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.notification-title-text {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.notification-time {
    font-size: 12px;
    color: var(--text-secondary);
}

.notification-content {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-item.expanded .notification-content {
    -webkit-line-clamp: unset;
}

.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.notification-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   전체 카테고리 레이어
   ============================================ */
.category-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.category-overlay.show {
    opacity: 1;
    visibility: visible;
}

.category-panel {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--background);
    z-index: 1000;
    transition: left 0.3s ease;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    overflow-y: auto;
}

.category-panel.open {
    left: 0;
}

.category-panel-header {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background-color: var(--background);
    z-index: 10;
}

.category-panel-close-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-primary);
    margin-right: var(--spacing-sm);
}

.category-panel-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.category-panel-list {
    padding: var(--spacing-md);
}

.category-panel-item {
    margin-bottom: var(--spacing-sm);
}

.category-panel-level1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background-color: var(--surface);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s;
}

.category-panel-level1:hover {
    background-color: var(--border);
}

.category-panel-level1-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.category-panel-level1-toggle {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.category-panel-level1.collapsed .category-panel-level1-toggle {
    transform: rotate(0deg);
}

.category-panel-level2-wrapper {
    margin-top: var(--spacing-xs);
    padding-left: var(--spacing-md);
}

.category-panel-level2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: var(--radius-sm);
}

.category-panel-level2:hover {
    background-color: var(--surface);
}

.category-panel-level2-text {
    font-size: 15px;
    color: var(--text-primary);
    flex: 1;
}

.category-panel-level2-toggle {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.category-panel-level2.collapsed .category-panel-level2-toggle {
    transform: rotate(0deg);
}

.category-panel-level3-wrapper {
    margin-top: var(--spacing-xs);
    padding-left: var(--spacing-md);
}

.category-panel-level3 {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s, color 0.2s;
}

.category-panel-level3:hover {
    background-color: var(--surface);
    color: var(--text-primary);
}

/* ============================================
   전체 메뉴 화면 (레거시 - 다른 페이지에서 사용 가능)
   ============================================ */
.menu-panel {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--background);
    z-index: 1000;
    transition: left 0.3s ease;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    overflow-y: auto;
}

.menu-panel.open {
    left: 0;
}

.menu-header {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background-color: var(--background);
    z-index: 10;
}

.menu-back-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-primary);
    margin-right: var(--spacing-sm);
}

.menu-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.menu-list {
    padding: var(--spacing-md);
}

.menu-category {
    margin-bottom: var(--spacing-sm);
}

.menu-category-level1 {
    padding: var(--spacing-sm) 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-category-level1-text {
    flex: 1;
    cursor: pointer;
}

.menu-category-level1-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.menu-category-level1-toggle::after {
    content: '▼';
    font-size: 12px;
    transition: transform 0.2s;
}

.menu-category-level1.collapsed .menu-category-level1-toggle::after {
    transform: rotate(-90deg);
}


.menu-category-level2 {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-category-level2-text {
    flex: 1;
    cursor: pointer;
}

.menu-category-level2-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.menu-category-level2-toggle::after {
    content: '▶';
    font-size: 10px;
    transition: transform 0.2s;
}

.menu-category-level2.collapsed .menu-category-level2-toggle::after {
    transform: rotate(-90deg);
}

.menu-category-level3 {
    padding: var(--spacing-xs) var(--spacing-lg);
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: color 0.2s;
}

.menu-category-level3:hover {
    color: var(--primary-color);
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   상품 상세 화면
   ============================================ */
.product-detail-header {
    width: 100%;
    height: 56px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
}

.product-detail-header-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-md);
}

.product-detail-header-left,
.product-detail-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.product-image-slider {
    width: 100%;
    position: relative;
    background-color: var(--surface);
    aspect-ratio: 1; /* 기본 크기: 정사각형 비율 (1:1) */
    min-height: 300px; /* 최소 높이 설정 (이모지 표시 시에도 적절한 크기 유지) */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 이미지가 영역을 벗어나지 않도록 */
}

.product-image-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 영역을 꽉 채우도록 */
    display: block;
}

/* 이미지 placeholder 스타일 (상품 상세 페이지용) */
.product-image-slider .product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px; /* 이모지 크기 */
    background-color: var(--surface);
    color: var(--text-secondary);
    opacity: 0.6;
}

.product-image-indicators {
    position: absolute;
    bottom: var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--spacing-xs);
    z-index: 2;
}

.product-image-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color 0.2s;
}

.product-image-indicator.active {
    background-color: white;
}

.seller-info {
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--border);
}

.seller-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--surface);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    /* 기본 unknown man 이미지 (SVG) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23e2e8f0'/%3E%3Ccircle cx='24' cy='19' r='7' fill='%2394a3b8'/%3E%3Cpath d='M12 39 Q12 30 24 30 Q36 30 36 39' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.seller-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: none;
}

.seller-avatar.has-image {
    background-image: none;
}

.seller-avatar.has-image img {
    display: block;
}

.seller-info-text {
    flex: 1;
}

.seller-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.seller-rating {
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.product-detail-info {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border);
}

.product-detail-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.product-detail-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.product-detail-meta {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.product-detail-description {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* PC 버전: 상품 상세 상단 영역 (이미지 + 정보) */
.product-detail-top {
    display: block;
    margin-bottom: var(--spacing-lg);
}

/* 이미지 영역 */
.product-image-area {
    width: 100%;
    margin-bottom: var(--spacing-md);
}

/* 모바일: 상품 정보 영역 스타일 */
.product-info-area {
    padding: 0;
}

/* 모바일: 탭 바 숨김 */
.product-detail-tabs {
    display: none;
}

/* 모바일: 탭 패널 모두 표시 */
.product-detail-tab-content {
    display: block;
}

.tab-panel {
    display: block;
}

/* 모바일: 리뷰 섹션은 항상 표시 */
#reviewsPanel {
    display: block;
}

/* 모바일: 상세 설명 영역 */
#descriptionPanel {
    display: block;
}

/* 모바일: 하단 고정 버튼 표시 */
.product-detail-bottom-bar {
    display: flex;
}

/* 썸네일 영역 (PC 버전에서만 표시) */
.product-thumbnails {
    display: none;
    margin-top: var(--spacing-sm);
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.product-thumbnail {
    position: relative;
    width: 80px;
    height: 80px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.product-thumbnail:hover {
    border-color: var(--primary-color);
    opacity: 0.8;
}

.product-thumbnail.active {
    border-color: var(--primary-color);
}

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

.product-thumbnail-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background-color: var(--surface);
    color: var(--text-secondary);
    opacity: 0.6;
    border-radius: var(--radius-sm);
}

/* 상품 정보 영역 */
.product-info-area {
    width: 100%;
}

/* 통계 정보 (PC 버전) */
.product-stats {
    display: none;
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: var(--spacing-md) 0;
    gap: var(--spacing-lg);
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 14px;
    color: var(--text-secondary);
}

.stat-icon {
    font-size: 16px;
}

.stat-value {
    font-weight: 500;
    color: var(--text-primary);
}

/* 옵션 선택 */
.product-options {
    margin: var(--spacing-md) 0;
}

.product-options label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.option-select {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    background-color: var(--background);
    color: var(--text-primary);
}

/* 액션 버튼 영역 (모바일에서는 숨김, 하단 고정 버튼 사용) */
.product-actions {
    display: none; /* 모바일에서는 숨김 */
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* 탭 바 (PC 버전) */
.product-detail-tabs {
    display: none;
    border-bottom: 2px solid var(--border);
    margin: var(--spacing-lg) 0;
    gap: var(--spacing-lg);
}

.tab-btn {
    background: none;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* 탭 패널 */
.product-detail-tab-content {
    width: 100%;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* 상세 이미지들 */
.product-detail-images {
    margin-top: var(--spacing-lg);
}

.detail-image {
    width: 100%;
    height: auto;
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md);
}

.reviews-section {
    padding: var(--spacing-md);
    border-top: 8px solid var(--surface);
}

.reviews-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.review-item {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border);
}

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

.review-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.review-author {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.review-rating {
    font-size: 14px;
    color: var(--text-secondary);
}

.review-date {
    font-size: 13px;
    color: var(--text-secondary);
    margin-left: auto;
}

.review-content {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.product-detail-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: var(--background);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    gap: var(--spacing-sm);
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}

.product-favorite-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
}

.product-favorite-btn svg {
    width: 24px;
    height: 24px;
    stroke: var(--text-secondary);
    fill: none;
    transition: stroke 0.2s, fill 0.2s;
}

.product-favorite-btn.active {
    border-color: var(--primary-color);
}

.product-favorite-btn.active svg {
    stroke: var(--primary-color);
    fill: var(--primary-color);
}

.product-chat-btn {
    flex: 1;
    height: 48px;
    background-color: var(--primary-color);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.product-chat-btn:hover {
    background-color: var(--primary-hover);
}

/* ============================================
   채팅 화면
   ============================================ */
.chat-list {
    /* padding: var(--spacing-md); */
}

.chat-item {
    display: flex;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.chat-item:hover {
    background-color: var(--surface);
}

.chat-delete-btn {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: var(--spacing-xs);
    opacity: 0.5;
    transition: opacity 0.2s;
    z-index: 10;
}

.chat-delete-btn:hover {
    opacity: 1;
}

.chat-item:hover .chat-delete-btn {
    opacity: 0.7;
}

.chat-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--surface);
    flex-shrink: 0;
    margin-right: var(--spacing-xs);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='28' fill='%23e2e8f0'/%3E%3Ccircle cx='28' cy='22' r='8' fill='%2394a3b8'/%3E%3Cpath d='M14 45 Q14 35 28 35 Q42 35 42 45' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: none;
}

.chat-avatar.has-image {
    background-image: none;
}

.chat-avatar.has-image img {
    display: block;
}

.chat-product-image {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    flex-shrink: 0;
    margin-right: var(--spacing-xs);
    overflow: hidden;
    position: relative;
}

.chat-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background-color: var(--surface);
}

.chat-info {
    flex: 1;
    min-width: 0;
    padding-right: 40px; /* 삭제 버튼 공간 확보 */
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.chat-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-time {
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.chat-product-name {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-preview {
    font-size: 14px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-unread {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: var(--spacing-sm);
}

/* ============================================
   채팅방 팝업
   ============================================ */
.chat-room-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.chat-room-overlay.show {
    opacity: 1;
    visibility: visible;
}

.chat-room-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
}

.chat-room-popup.open {
    transform: translateX(0);
}

/* ============================================
   채팅방 화면 (카카오톡 스타일)
   ============================================ */
.chat-room-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.chat-room-header-content {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm);
    gap: var(--spacing-sm);
}

.chat-room-back-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-primary);
    flex-shrink: 0;
}

.chat-room-user-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.chat-room-user-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-room-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--surface);
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e2e8f0'/%3E%3Ccircle cx='20' cy='16' r='6' fill='%2394a3b8'/%3E%3Cpath d='M10 32 Q10 25 20 25 Q30 25 30 32' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.chat-room-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: none;
}

.chat-room-avatar.has-image {
    background-image: none;
}

.chat-room-avatar.has-image img {
    display: block;
}

.chat-room-user-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-room-user-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-room-product-name {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-room-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.chat-room-menu-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-primary);
    flex-shrink: 0;
}

.chat-room-messages {
    flex: 1;
    min-height: 0;
    padding: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    overflow-y: auto;
    background-color: #F5F5F5;
    -webkit-overflow-scrolling: touch;
}

.chat-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-md) 0;
}

.chat-date-divider span {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 12px;
}

.chat-message {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message-me {
    flex-direction: row-reverse;
}

.chat-message-other {
    flex-direction: row;
}

.chat-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--surface);
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='18' fill='%23e2e8f0'/%3E%3Ccircle cx='18' cy='14' r='5' fill='%2394a3b8'/%3E%3Cpath d='M9 29 Q9 22 18 22 Q27 22 27 29' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.chat-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: none;
}

.chat-message-avatar.has-image {
    background-image: none;
}

.chat-message-avatar.has-image img {
    display: block;
}

.chat-message-content {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    gap: 4px;
}

.chat-message-me .chat-message-content {
    align-items: flex-end;
}

.chat-message-other .chat-message-content {
    align-items: flex-start;
}

.chat-message-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.4;
    word-wrap: break-word;
    /* white-space: pre-wrap; */
}

.chat-message-me .chat-message-bubble {
    background-color: #FFE812;
    color: var(--text-primary);
    border-top-right-radius: 4px;
}

.chat-message-other .chat-message-bubble {
    background-color: white;
    color: var(--text-primary);
    border-top-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chat-message-time {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 0 4px;
}

.chat-message-time-me {
    text-align: right;
}

.chat-message-time-other {
    text-align: left;
}

.chat-room-input-area {
    position: relative;
    background-color: var(--background);
    border-top: 1px solid var(--border);
    padding: var(--spacing-sm);
    flex-shrink: 0;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.chat-room-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm);
    max-width: 100%;
}

.chat-room-mic-btn {
    width: 40px;
    height: 40px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.chat-room-mic-btn:hover {
    background-color: var(--border);
}

.chat-room-mic-btn.active {
    background-color: var(--error);
    border-color: var(--error);
    color: white;
    animation: pulse 1.5s ease-in-out infinite;
}

.chat-room-mic-btn.active .mic-icon {
    transform: scale(1.1);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.chat-room-input {
    flex: 1;
    min-height: 40px;
    max-height: 120px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: inherit;
    resize: none;
    outline: none;
    background-color: var(--surface);
    line-height: 1.4;
    overflow-y: auto;
}

.chat-room-input:focus {
    border-color: var(--primary-color);
    background-color: var(--background);
}

.chat-room-send-btn {
    min-width: 60px;
    height: 40px;
    padding: 0 var(--spacing-md);
    background-color: var(--primary-color);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.1s;
}

.chat-room-send-btn:hover {
    background-color: var(--primary-hover);
}

.chat-room-send-btn:active {
    transform: scale(0.95);
}

.chat-room-send-btn:disabled {
    background-color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.5;
}

.chat-room-recording-indicator {
    position: absolute;
    bottom: 100%;
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 13px;
    color: var(--error);
    background-color: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
    z-index: 101;
    animation: fadeIn 0.3s ease-in;
}

.recording-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--error);
    animation: blink 1s ease-in-out infinite;
}

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

/* 하단 퀵메뉴가 있을 때 입력 영역 위치 조정 (팝업이 아닌 경우만) */
/* 팝업으로 변경되어 이 규칙은 더 이상 필요 없음 */
/* body:has(.bottom-nav) .chat-room-input-area {
    bottom: 60px;
}

body:has(.bottom-nav) .chat-room-messages {
    padding-bottom: 200px;
} */

/* ============================================
   프로필 화면
   ============================================ */
.profile-header {
    padding: var(--spacing-lg) var(--spacing-md);
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
}

.profile-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.profile-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--surface);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='40' fill='%23e2e8f0'/%3E%3Ccircle cx='40' cy='32' r='12' fill='%2394a3b8'/%3E%3Cpath d='M20 65 Q20 50 40 50 Q60 50 60 65' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.profile-avatar.has-image {
    background-image: none;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-avatar-upload-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.profile-avatar-upload-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.profile-avatar-upload-btn:active {
    transform: scale(0.95);
}

.profile-avatar-upload-btn svg {
    width: 14px;
    height: 14px;
}

.profile-details {
    flex: 1;
}

.profile-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.profile-email {
    font-size: 14px;
    color: var(--text-secondary);
}

.profile-stats {
    display: flex;
    gap: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border);
}

.profile-stat {
    flex: 1;
    text-align: center;
}

.profile-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}

.profile-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.profile-menu {
    padding: var(--spacing-md);
}

.profile-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color 0.2s;
}

.profile-menu-item:hover {
    background-color: var(--surface);
}

.profile-menu-item:last-child {
    border-bottom: none;
}

.profile-menu-label {
    font-size: 15px;
    font-weight: 500;
}

.profile-menu-icon {
    font-size: 18px;
    color: var(--text-secondary);
}

.profile-logout-btn {
    width: 100%;
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    background-color: var(--error);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.profile-logout-btn:hover {
    background-color: #dc2626;
    transform: translateY(-1px);
}

.profile-logout-btn:active {
    transform: translateY(0);
    background-color: #b91c1c;
}

.profile-logout-label {
    display: block;
}

/* ============================================
   유틸리티 클래스
   ============================================ */
.empty-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
}

.loading {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

/* 무한 스크롤 로딩 인디케이터 (화면 중앙 고정) */
.loading-more {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: rgba(128, 128, 128, 0.9);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-width: 140px;
    pointer-events: none;
}

.loading-more::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 3px solid var(--border);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading {
    justify-content: center;
    min-height: 200px;
}

/* products-grid 내부의 loading은 그리드 전체 영역을 차지하도록 */
.products-grid .loading {
    grid-column: 1 / -1;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* products-grid가 빈 상태일 때 중앙 정렬 */
#productsGrid.empty,
#searchResults.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
}

/* products-grid가 로딩 중일 때도 중앙 정렬 */
#productsGrid.loading,
#searchResults.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
}


@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

.btn-secondary {
    background-color: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-secondary:hover {
    background-color: var(--border);
}

/* ============================================
   반응형 디자인
   ============================================ */
/* PC/태블릿 스타일: 배경/구분선 영역은 100%, 콘텐츠 영역은 max-width: 1200px */
@media (min-width: 768px) {
    /* 헤더: 배경/구분선은 100%, 콘텐츠는 max-width: 1200px */
    .header {
        width: 100%;
    }
    
    .header-main {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-md);
    }
    
    /* 카테고리 슬라이드: 배경/구분선은 100%, 콘텐츠는 max-width: 1200px */
    .category-slider {
        width: 100%;
    }
    
    .category-slider-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-md);
    }
    
    /* 메인 콘텐츠: 배경은 100%, 콘텐츠는 max-width: 1200px */
    .main-container {
        width: 100%;
    }
    
    .main-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-md);
        min-height: 60vh; /* PC에서 최소 높이 설정 */
    }
    
    /* 상품 그리드: 태블릿에서 3열 */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* 검색 페이지 메인 콘텐츠 최소 높이 */
    .main-container .main-content {
        min-height: 60vh;
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    
    .products-grid[data-view="list"] {
        display: block;
        grid-template-columns: none;
    }

    /* 검색 페이지 */
    .search-header {
        width: 100%;
    }
    
    .search-header-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-md);
    }

    .recent-searches {
        width: 100%;
    }
    
    .recent-searches-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: var(--spacing-md);
    }
    
    .search-category-bar {
        width: 100%;
    }
    
    .search-category-bar-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-md);
    }

    .recent-search-item {
        display: inline;
        border: 1px solid var(--border);
        padding: var(--spacing-sm) var(--spacing-sm);
        border-radius: 10px;
        margin: 0 1rem;
    }

    .recent-search-delete {
        display: inline;
    }
    
    /* 검색 페이지 메인 콘텐츠 최소 높이 (PC) */
    .search-page .main-content {
        min-height: 60vh;
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    
    /* 추천 상품 영역 */
    .recommended-products {
        margin-bottom: var(--spacing-xl);
    }
    
    .recommended-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: var(--spacing-lg);
        color: var(--text-primary);
    }

    /* 프로필 페이지 */
    .profile-header, .profile-menu {
        max-width: 1200px;
        margin: 0 auto;
    }

    .view-toggle {
        padding: 0 var(--spacing-md);
    }

    /* 찜한 상품/내 상품 페이지 */
    .favorites-header {
        width: 100%;
    }
    
    .favorites-header-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-md);
    }
    
    .category-bar {
        width: 100%;
    }
    
    .category-bar-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-md);
    }
    
    .main-container {
        width: 100%;
    }
    
    .main-container .main-content {
        max-width: 1200px;
        margin-left: auto; margin-right: auto;
        padding: var(--spacing-md);
    }

    /* 상품 상세 페이지 */
    .product-detail-header {
        width: 100%;
    }
    
    .product-detail-header-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-md);
    }
    
    .product-image-slider {
        width: 100%;
    }
    
    .main-container {
        width: 100%;
    }

    /* PC 버전: 상품 상세 레이아웃 */
    .product-detail-top {
        display: flex;
        gap: var(--spacing-xl);
        margin-bottom: var(--spacing-xl);
    }

    .product-image-area {
        flex: 1;
        max-width: 500px;
        margin-bottom: 0;
    }

    /* PC 버전: 탭 패널 전환 기능 활성화 */
    .product-detail-tab-content {
        display: block;
    }

    .tab-panel {
        display: none;
    }

    .tab-panel.active {
        display: block;
    }

    .product-image-slider {
        width: 100%;
        aspect-ratio: 1;
        border-radius: var(--radius-md);
        overflow: hidden;
        background-color: var(--surface);
    }

    .product-image-slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-thumbnails {
        display: flex;
        margin-top: var(--spacing-sm);
    }

    .product-info-area {
        flex: 1;
        min-width: 0;
    }

    .product-detail-title {
        font-size: 24px;
        margin-bottom: var(--spacing-md);
    }

    .product-detail-price {
        font-size: 32px;
        margin-bottom: var(--spacing-sm);
    }

    .seller-info {
        margin: var(--spacing-md) 0;
        padding: var(--spacing-md);
        background-color: var(--surface);
        border-radius: var(--radius-md);
        border: none;
    }

    .product-stats {
        display: flex;
    }

    /* PC 버전: 액션 버튼 영역 표시 */
    .product-actions {
        display: flex; /* PC 버전에서만 표시 */
        margin-top: var(--spacing-lg);
    }

    .product-favorite-btn {
        width: 56px;
        height: 56px;
    }
    
    .product-favorite-btn svg {
        width: 28px;
        height: 28px;
    }

    .product-chat-btn {
        height: 56px;
        font-size: 16px;
        font-weight: 600;
    }

    /* 탭 바 표시 */
    .product-detail-tabs {
        display: flex;
    }

    /* 하단 고정 버튼 숨김 (PC 버전) */
    .product-detail-bottom-bar {
        display: none;
    }

    /* 탭 패널 스타일 */
    .tab-panel {
        padding: var(--spacing-lg) 0;
    }

    .reviews-section {
        border-top: none;
        padding: 0;
    }

    /* 하단 퀵메뉴: PC에서는 숨김 */
    .bottom-nav {
        display: none;
    }

    #menuBtn {
        display: none;
    }
    
    /* PC에서 채팅/프로필 아이콘 표시 */
    .header-icon-btn.chat {
        display: inherit;
    }
    .header-icon-btn.profile {
        display: inherit;
    }
    
    /* 채팅방 팝업: PC에서는 800px 중앙 정렬 */
    .chat-room-popup {
        top: 50%;
        left: 50%;
        width: 800px;
        max-width: 90vw;
        height: 90vh;
        max-height: 800px;
        transform: translate(-50%, -50%) translateX(100vw);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }
    
    .chat-room-popup.open {
        transform: translate(-50%, -50%) translateX(0);
    }
}

@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* PC에서 리스트 뷰는 한 줄에 2개 */
    .products-grid[data-view="list"] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .products-grid[data-view="list"] .product-item {
        width: 100%;
        margin-bottom: 0;
    }
    
    /* PC에서 구독 플랜 좌우 배치 */
    .subscription-plans {
        flex-direction: row !important;
        gap: var(--spacing-lg);
    }
    
    .subscription-plan-card {
        flex: 1;
        max-width: 50%;
    }
    
    /* PC에서 구독 혜택 한 줄에 3개 */
    .subscription-benefits {
        flex-direction: row !important;
        gap: var(--spacing-md);
    }
    
    .benefit-item {
        flex: 1;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
}

/* ============================================
   설정 페이지 스타일
   ============================================ */
.settings-section {
    background-color: var(--background);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.settings-section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.settings-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.settings-form {
    margin-top: var(--spacing-md);
}

.settings-form .form-group {
    margin-bottom: var(--spacing-md);
}

.settings-form label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-weight: normal;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="password"],
.settings-form input[type="tel"] {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.settings-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 111, 15, 0.1);
}

.settings-form input[readonly] {
    background-color: var(--surface);
    cursor: not-allowed;
}

.required {
    color: var(--error);
}

/* 파일 업로드 영역 */
.file-upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background-color: var(--surface);
}

.file-upload-area:hover {
    border-color: var(--primary-color);
    background-color: rgba(255, 111, 15, 0.05);
}

.file-upload-area.drag-over {
    border-color: var(--primary-color);
    background-color: rgba(255, 111, 15, 0.1);
}

.file-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
}

.file-upload-placeholder svg {
    color: var(--text-secondary);
}

.file-upload-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

.file-upload-preview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.file-upload-preview img {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--radius-md);
    object-fit: contain;
}

.file-upload-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background-color: var(--surface);
    border-radius: var(--radius);
}

.btn-remove-file {
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--error);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-remove-file:hover {
    background-color: #dc2626;
}

/* 업로드 진행률 */
.upload-progress {
    margin-top: var(--spacing-sm);
}

.upload-progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--surface);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-xs);
}

.upload-progress-fill {
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.3s;
    width: 0%;
}

.upload-progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* 주소 입력 그룹 */
.address-input-group {
    display: flex;
    gap: var(--spacing-xs);
}

.address-input-group input {
    flex: 1;
}

.btn-secondary {
    padding: 0.875rem 1rem;
    background-color: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background-color: var(--border);
}

/* 모바일 최적화 */
@media (max-width: 767px) {
    body {
        font-size: 15px;
    }
    
    .header-main {
        padding: 0 var(--spacing-sm);
    }
    
    .main-content {
        padding: var(--spacing-sm);
    }
    
    .products-grid {
        gap: var(--spacing-sm);
    }

    .address-input-group {
        flex-direction: column;
    }

    .btn-secondary {
        width: 100%;
    }
}

/* 정렬 레이어 스타일 - 기본 (드롭다운) */
.sort-layer {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 200;
    min-width: 120px;
    overflow: hidden;
}

/* search 페이지의 정렬 레이어 위치 조정 */
.search-header-content {
    position: relative;
}

/* 정렬 레이어 - 하단 슬라이드 (index.html 전용) */
.sort-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sort-overlay.show {
    opacity: 1;
    visibility: visible;
}

.sort-layer-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 200;
    max-height: 50vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    opacity: 0;
    visibility: hidden;
    min-width: auto;
    border: none;
    border-radius: 0;
}

.sort-layer-bottom.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.sort-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.sort-option:last-child {
    border-bottom: none;
}

.sort-option:hover {
    background: #f8f9fa;
}

.sort-option.active {
    background: #fff5e6;
    color: #FF6F0F;
}

.sort-option-text {
    font-size: 14px;
}

.sort-option-icon {
    font-size: 12px;
    margin-left: 8px;
}

/* ============================================
   구독 관련 스타일
   ============================================ */

/* 구독 컨테이너 */
.subscription-container {
    max-width: 100%;
    padding: var(--spacing-md);
    padding-bottom: 80px;
}

.subscription-section {
    margin-bottom: var(--spacing-xl);
}

.subscription-section-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

/* 구독 플랜 카드 */
.subscription-plans {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.subscription-plan-card {
    position: relative;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    background: var(--background);
    cursor: pointer;
    transition: all 0.3s ease;
}

.subscription-plan-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.subscription-plan-card.selected {
    border: 3px solid var(--primary-color);
    background: #fff5e6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

.subscription-plan-card.selected::before {
    content: '✓';
    position: absolute;
    top: 12px;
    left: 12px;
    width: 28px;
    height: 28px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.subscription-plan-card.recommended {
    border-color: var(--primary-color);
}

/* 추천 플랜이 선택되지 않았을 때는 태두리를 약하게 */
.subscription-plan-card.recommended:not(.selected) {
    border: 1px dashed var(--primary-color);
    opacity: 0.7;
}

.plan-badge {
    position: absolute;
    top: -10px;
    right: var(--spacing-md);
    background: var(--primary-color);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.plan-header {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.plan-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: var(--spacing-xs);
}

.plan-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
}

.plan-currency {
    font-size: 18px;
    color: var(--text-secondary);
}

.plan-period {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.plan-discount {
    display: inline-block;
    background: var(--error);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: var(--spacing-xs);
}

.plan-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.plan-feature {
    font-size: 14px;
    color: var(--text-primary);
    padding: var(--spacing-xs) 0;
}

.plan-feature.highlight {
    color: var(--primary-color);
    font-weight: 600;
}

/* 구독 혜택 */
.subscription-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.benefit-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--surface);
    border-radius: var(--radius-md);
}

.benefit-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.benefit-text {
    flex: 1;
}

.benefit-text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.benefit-text p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* 구독 폼 */
.subscription-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.subscription-form .form-group,
.coupon-form .form-group {
    margin-bottom: var(--spacing-md);
}

.subscription-form .form-group label,
.coupon-form .form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 16px;
    transition: border-color 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* 결제 수단 선택 */
.payment-methods {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.payment-method-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--background);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 120px;
}

.payment-method-option:hover {
    border-color: var(--primary-color);
    background-color: rgba(255, 111, 15, 0.05);
}

.payment-method-option.selected {
    border-color: var(--primary-color);
    background-color: rgba(255, 111, 15, 0.1);
    box-shadow: 0 0 0 3px rgba(255, 111, 15, 0.1);
}

.payment-method-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-sm);
}

.payment-method-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-row {
    display: flex;
    gap: var(--spacing-md);
}

.form-row .form-group {
    flex: 1;
}

.card-info-section {
    padding: var(--spacing-md);
    background: var(--surface);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-sm);
}

.bank-info-section {
    padding: var(--spacing-md);
    background: var(--surface);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-sm);
}

.bank-info-header {
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.bank-info-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.bank-info-notice {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.bank-info-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.bank-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--background);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.bank-info-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.bank-info-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.terms-link {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s;
}

.terms-link:hover {
    color: var(--primary-hover);
}

.btn-subscribe {
    width: 100%;
    padding: 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: var(--spacing-md);
}

.btn-subscribe:hover {
    background: var(--primary-hover);
}

.btn-subscribe:disabled {
    background: var(--text-secondary);
    cursor: not-allowed;
}

/* 로딩 오버레이 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    color: white;
    font-size: 16px;
    font-weight: 500;
}

/* 모달 스타일 */
.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: var(--spacing-md);
}

.modal-content {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    max-width: 400px;
    width: 100%;
    box-shadow: var(--shadow-lg);
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    text-align: center;
}

.modal-message {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    line-height: 1.6;
}

.modal-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--surface);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.balance-label {
    font-size: 14px;
    color: var(--text-primary);
}

.balance-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

.modal-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.btn-modal-cancel,
.btn-modal-primary {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-cancel {
    background: var(--surface);
    color: var(--text-primary);
}

.btn-modal-cancel:hover {
    background: #e9ecef;
}

.btn-modal-primary {
    background: var(--primary-color);
    color: white;
}

.btn-modal-primary:hover {
    background: var(--primary-hover);
}

/* ============================================
   쿠폰 관련 스타일
   ============================================ */

/* 쿠폰 컨테이너 */
.coupon-container {
    max-width: 100%;
    padding: var(--spacing-md);
    padding-bottom: 80px;
}

.coupon-section {
    margin-bottom: var(--spacing-xl);
}

.coupon-section-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

/* 쿠폰 잔액 카드 */
.coupon-balance-section {
    margin-bottom: var(--spacing-xl);
}

.balance-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    color: white;
    box-shadow: var(--shadow-md);
}

.balance-label {
    font-size: 20px;
    opacity: 0.9;
    margin-bottom: var(--spacing-sm);
}

.balance-value {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.balance-unit {
    font-size: 18px;
    opacity: 0.9;
}

/* 쿠폰 패키지 카드 */
.coupon-packages {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.coupon-package-card {
    position: relative;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    background: var(--background);
    cursor: pointer;
    transition: all 0.3s ease;
}

.coupon-package-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.coupon-package-card.selected {
    border-color: var(--primary-color);
    background: #fff5e6;
    box-shadow: var(--shadow-md);
}

.coupon-package-card.recommended {
    border-color: var(--primary-color);
}

.package-badge {
    position: absolute;
    top: -10px;
    right: var(--spacing-md);
    background: var(--primary-color);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.package-header {
    text-align: center;
}

.package-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.package-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: var(--spacing-xs);
}

.package-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
}

.package-currency {
    font-size: 18px;
    color: var(--text-secondary);
}

.package-per-unit {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.package-discount {
    display: inline-block;
    background: var(--error);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: var(--spacing-xs);
}

/* 쿠폰 안내 */
.coupon-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.info-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--surface);
    border-radius: var(--radius-md);
}

.info-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.info-text {
    flex: 1;
}

.info-text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.info-text p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* 쿠폰 폼 */
.coupon-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.btn-purchase {
    width: 100%;
    padding: 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: var(--spacing-md);
}

.btn-purchase:hover {
    background: var(--primary-hover);
}

.btn-purchase:disabled {
    background: var(--text-secondary);
    cursor: not-allowed;
}

/* PC에서 쿠폰 패키지 한 줄에 3개 */
@media (min-width: 1024px) {
    .coupon-packages {
        flex-direction: row;
        gap: var(--spacing-xl);
        align-items: stretch;
    }
    
    .coupon-package-card {
        flex: 1;
    }
    
    /* 추천 쿠폰 패키지(30회쿠폰) 크게 표시 */
    .coupon-package-card.recommended {
        transform: scale(1.1);
        z-index: 1;
    }
    
    /* PC에서 쿠폰 안내 한 줄에 3개 */
    .coupon-info {
        flex-direction: row;
        gap: var(--spacing-md);
    }
    
    .info-item {
        flex: 1;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ============================================
   쿠폰 관리 페이지 스타일
   ============================================ */

.coupon-management-container {
    max-width: 100%;
    padding: var(--spacing-md);
    padding-bottom: 80px;
}

.btn-purchase-link {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--primary-color);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    margin-top: var(--spacing-md);
    transition: background 0.2s;
}

.btn-purchase-link:hover {
    background: var(--primary-hover);
}

/* 탭 메뉴 */
.coupon-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    border-bottom: 2px solid var(--border);
}

.coupon-tab {
    flex: 1;
    padding: var(--spacing-md);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.coupon-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.coupon-tab-content {
    margin-top: var(--spacing-md);
}

/* 내역 리스트 */
.coupon-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.coupon-history-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: box-shadow 0.2s;
}

.coupon-history-item:hover {
    box-shadow: var(--shadow-sm);
}

.history-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.history-item-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.history-item-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.history-item-icon.purchase {
    background: var(--success);
    color: white;
}

.history-item-icon.usage {
    background: var(--error);
    color: white;
}

.history-item-amount {
    font-size: 18px;
    font-weight: 700;
}

.history-item-amount.positive {
    color: var(--success);
}

.history-item-amount.negative {
    color: var(--error);
}

.history-item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--text-secondary);
}

.history-item-date {
    flex: 1;
}

.history-item-price,
.history-item-product {
    font-weight: 500;
    color: var(--text-primary);
}

.empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
    font-size: 16px;
}

/* ============================================
   구독 관리 페이지 스타일
   ============================================ */

.subscription-management-container {
    max-width: 100%;
    padding: var(--spacing-md);
    padding-bottom: 80px;
}

.subscription-balance-section {
    margin-bottom: var(--spacing-xl);
}

.balance-card.subscription {
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    color: white;
    box-shadow: var(--shadow-md);
}

.balance-card.subscription.subscribed {
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
}

.balance-card.subscription.subscribed.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.balance-card.subscription:not(.subscribed) {
    background: linear-gradient(135deg, var(--text-secondary) 0%, #6c757d 100%);
}

/* 구독 카드 내부 텍스트 스타일 (기존 balance-label, balance-value, balance-unit 재사용) */
.balance-card.subscription .balance-label {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: var(--spacing-sm);
}

.balance-card.subscription .balance-value {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.balance-card.subscription .balance-unit {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
}

.btn-subscribe-link {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--primary-color);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    margin-top: var(--spacing-md);
    transition: background 0.2s;
}

.btn-subscribe-link:hover {
    background: var(--primary-hover);
}

/* 구독 탭 메뉴 */
.subscription-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    border-bottom: 2px solid var(--border);
}

.subscription-tab {
    flex: 1;
    padding: var(--spacing-md);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.subscription-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.subscription-tab-content {
    margin-top: var(--spacing-md);
}

/* 구독 정보 아이템 */
.subscription-info-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.subscription-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--surface);
    border-radius: var(--radius-md);
}

.info-item-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.info-item-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.subscription-actions {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.subscription-section {
    margin-top: var(--spacing-xl);
}

.subscription-section-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.subscription-status-detail {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.subscription-days-remaining {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-top: var(--spacing-xs);
}

.subscription-status-icon.subscribed-warning {
    background: #f59e0b;
    color: white;
}

.subscription-status-icon.expired {
    background: var(--text-secondary);
    color: white;
}

/* ============================================
   푸터 (PC/태블릿 전용)
   ============================================ */
.site-footer {
    display: none; /* 모바일에서는 숨김 */
    width: 100%;
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    margin-top: var(--spacing-xl);
    padding: var(--spacing-xl) 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border);
}

.footer-section {
    flex: 1;
    min-width: 200px;
}

.footer-logo {
    margin-bottom: var(--spacing-md);
}

.footer-logo img {
    height: 32px;
    width: auto;
}

.footer-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--spacing-xs);
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-contact {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.8;
}

.footer-contact strong {
    color: var(--text-primary);
    font-weight: 600;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
}

.footer-copyright {
    color: var(--text-secondary);
    font-size: 13px;
}

.footer-legal {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.footer-legal a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: var(--primary-color);
}

/* PC/태블릿에서 푸터 표시 */
@media (min-width: 768px) {
    .site-footer {
        display: block;
    }
    
    body {
        padding-bottom: 0; /* PC에서는 하단 퀵메뉴가 없으므로 padding 제거 */
    }
}

/* 구독 내역 */
.subscription-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.subscription-history-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: box-shadow 0.2s;
}

.subscription-history-item:hover {
    box-shadow: var(--shadow-sm);
}

.history-item-icon.subscription {
    background: var(--success);
    color: white;
}

.history-item-icon.subscription.completed {
    background: var(--success);
    color: white;
}

.history-item-icon.subscription.pending {
    background: #ff9800; /* 주황색 */
    color: white;
}

.history-item-icon.subscription.canceled,
.history-item-icon.subscription.failed {
    background: var(--error);
    color: white;
}

.history-item-icon.subscription.refunded {
    background: #9e9e9e; /* 회색 */
    color: white;
}

.history-item-period {
    font-weight: 500;
    color: var(--text-primary);
}

.history-item-payment {
    margin-top: var(--spacing-xs);
    font-size: 13px;
    color: var(--text-secondary);
}

.history-item-bank-info {
    margin-top: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.bank-info-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* 모바일에서 입금 계좌 정보 항목별로 한 줄씩 표시 */
@media (max-width: 768px) {
    .bank-info-items {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .bank-info-items span {
        display: block;
        width: 100%;
    }
}

/* 구독 액션 버튼 */
.subscription-actions-section {
    margin-top: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.btn-subscription-renew {
    width: 100%;
    padding: 14px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-subscription-renew:hover {
    background: var(--primary-hover);
}

.btn-subscription-cancel {
    width: 100%;
    padding: 14px;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-subscription-cancel:hover {
    background: #e9ecef;
}

/* ============================================
   프로필 구독 상태 스타일
   ============================================ */

.subscription-status-section {
    padding: var(--spacing-md);
    background: var(--background);
}

.subscription-status-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.subscription-status-card.subscribed {
    border-color: var(--success);
    background: #f0fdf4;
}

.subscription-status-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.subscription-status-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.subscription-status-card.subscribed .subscription-status-icon {
    background: var(--success);
    color: white;
}

.subscription-status-card:not(.subscribed) .subscription-status-icon {
    background: var(--error);
    color: white;
}

.subscription-status-info {
    flex: 1;
}

.subscription-status-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.subscription-status-detail {
    font-size: 14px;
    color: var(--text-secondary);
}

.btn-subscription-manage,
.btn-subscription-subscribe {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-subscription-manage {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-subscription-manage:hover {
    background: #e9ecef;
}

.btn-subscription-subscribe {
    background: var(--primary-color);
    color: white;
}

.btn-subscription-subscribe:hover {
    background: var(--primary-hover);
}

/* ============================================
   헤더 쿠폰 배지 스타일
   ============================================ */

.header-coupon-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--primary-color);
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
    min-width: 50px;
    justify-content: center;
}

.header-coupon-badge:hover {
    background: var(--primary-hover);
}

.coupon-icon {
    font-size: 16px;
}

.coupon-balance {
    font-size: 14px;
    font-weight: 700;
}

/* 헤더 구독 배지 스타일 */
.header-subscription-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--success);
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
    min-width: 70px;
    justify-content: center;
}

.header-subscription-badge:hover {
    background: #059669;
}

.header-subscription-badge.warning {
    background: #f59e0b;
}

.header-subscription-badge.warning:hover {
    background: #d97706;
}

.subscription-icon {
    font-size: 16px;
    font-weight: 700;
}

.subscription-status-text {
    font-size: 13px;
    font-weight: 600;
}

/* ============================================
   프로필 배지 스타일
   ============================================ */

.profile-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.profile-badge {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.2s, opacity 0.2s;
    cursor: pointer;
}

.profile-badge:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* ============================================
   위치 정보 오류 안내 메시지
   ============================================ */

.location-error-notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFF3CD;
    border: 1px solid #FFC107;
    border-radius: 8px;
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    max-width: 90%;
    text-align: center;
    font-size: 14px;
    color: #856404;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.location-error-notification span {
    display: inline-block;
    line-height: 1.5;
}

.profile-badge.rating-badge {
    cursor: default;
}

.badge-image {
    height: 30px;
    width: auto;
    display: block;
    object-fit: contain;
    max-width: 100px;
}

.badge-fallback {
    display: inline-block;
    padding: 4px 10px;
    color: white;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.subscription-days-remaining {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-top: 4px;
}

.subscription-status-card.subscribed-warning {
    border-color: #f59e0b;
    background: #fffbeb;
}

.subscription-status-icon.subscribed-warning {
    background: #f59e0b;
    color: white;
}

.subscription-status-icon.expired {
    background: var(--text-secondary);
    color: white;
}

/* ============================================
   푸터 (PC/태블릿 전용)
   ============================================ */
.site-footer {
    display: none; /* 모바일에서는 숨김 */
    width: 100%;
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    margin-top: var(--spacing-xl);
    padding: var(--spacing-xl) 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border);
}

.footer-section {
    flex: 1;
    min-width: 200px;
}

.footer-logo {
    margin-bottom: var(--spacing-md);
}

.footer-logo img {
    height: 32px;
    width: auto;
}

.footer-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--spacing-xs);
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-contact {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.8;
}

.footer-contact strong {
    color: var(--text-primary);
    font-weight: 600;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
}

.footer-copyright {
    color: var(--text-secondary);
    font-size: 13px;
}

.footer-legal {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.footer-legal a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: var(--primary-color);
}

/* PC/태블릿에서 푸터 표시 */
@media (min-width: 768px) {
    .site-footer {
        display: block;
    }
    
    body {
        padding-bottom: 0; /* PC에서는 하단 퀵메뉴가 없으므로 padding 제거 */
    }
}