/* ===== 테마 변수 (팬톤 컬러 기반 화이트 베이스 10종) ===== */

/* 공통 고정 변수 (모든 테마 동일) */
:root {
    --gs-bg-primary:   #ffffff;
    --gs-bg-secondary: #ffffff;
    --gs-bg-card:      #ffffff;
    --gs-bg-hover:     #f8f9fa;
    --gs-text:         #1a1a1a;
    --gs-text-muted:   #6b6b6b;
    --gs-border:       #eaeaea;
    /* 기본 테마 1 */
    --gs-accent:       #FE5000;
    --gs-accent-hover: #d94300;
}

/* 1 · Pantone 021 C · 비비드 오렌지 */
[data-theme="1"] {
    --gs-accent:       #FE5000;
    --gs-accent-hover: #d94300;
}

/* 2 · Pantone 2726 C · 클래식 로열블루 */
[data-theme="2"] {
    --gs-accent:       #3333FF;
    --gs-accent-hover: #2222dd;
}

/* 3 · Pantone 485 C · 클래식 레드 */
[data-theme="3"] {
    --gs-accent:       #DA291C;
    --gs-accent-hover: #b82216;
}

/* 4 · Pantone 354 C · 에메랄드 그린 */
[data-theme="4"] {
    --gs-accent:       #009A44;
    --gs-accent-hover: #007a36;
}

/* 5 · Pantone 3262 C · 터쿼이즈 */
[data-theme="5"] {
    --gs-accent:       #00A591;
    --gs-accent-hover: #007d6c;
}

/* 6 · Pantone 2685 C · 울트라 바이올렛 */
[data-theme="6"] {
    --gs-accent:       #5F4B8B;
    --gs-accent-hover: #4a3870;
}

/* 7 · Pantone 812 C · 쇼킹 핑크 */
[data-theme="7"] {
    --gs-accent:       #F6009B;
    --gs-accent-hover: #cc0080;
}

/* 8 · Pantone 7688 C · 세레니티 블루 */
[data-theme="8"] {
    --gs-accent:       #5A7FA0;
    --gs-accent-hover: #426282;
}

/* 9 · Pantone 130 C · 선샤인 옐로우 */
[data-theme="9"] {
    --gs-accent:       #F0A500;
    --gs-accent-hover: #c88800;
}

/* 10 · Pantone 1788 C · 리빙 코랄 */
[data-theme="10"] {
    --gs-accent:       #FF6B6B;
    --gs-accent-hover: #e05050;
}

/* ==================== */

body { background-color: var(--gs-bg-primary); color: var(--gs-text); font-family: sans-serif; margin: 0; }

/* 헤더/푸터 완전 고정 */
header {
    display: flex;
    justify-content: space-between;
    padding: 20px 10%;
    background: #ffffff !important;
    border-bottom: 1px solid #eaeaea !important;
    color: #1a1a1a !important;
}
header a, header span, header * {
    color: #1a1a1a !important;
}

footer, .footer {
    background: #ffffff !important;
    border-top: 1px solid #eaeaea !important;
    color: #1a1a1a !important;
}
footer *, .footer * {
    color: #1a1a1a !important;
}

.hero { text-align: center; padding: 80px 20px; background: #ffffff; }
.search-box input { width: 400px; padding: 15px; border-radius: 25px; border: 1px solid #eaeaea; }
.search-box button { padding: 15px 30px; border-radius: 25px; background: var(--gs-accent); color: white; border: none; cursor: pointer; }
.categories { display: flex; justify-content: center; gap: 20px; padding: 40px; background: #ffffff; }
.cat-item {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    text-decoration: none;
    color: #1a1a1a;          /* 고정 */
    transition: 0.3s;
    border: 1px solid #eaeaea; /* 고정 */
}
.cat-item:hover { border-color: var(--gs-accent); background: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

/* 관리자 레이아웃 */
.admin-wrapper {
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
    min-height: 80vh;
    background: #ffffff;
}
.sidebar {
    width: 200px;
    background: #ffffff;
    border-right: 1px solid #eaeaea;
    padding: 20px;
    flex-shrink: 0;
}
.edit-container {
    margin: 20px;
    background: #ffffff;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #eaeaea;
    max-width: 800px;
}

/* 실시간 입점업체 수 배너 스타일 */
.company-counter-banner {
    text-align: center;
    padding: 30px 20px;
    background-color: var(--gs-bg-hover); /* 테마별 연한 배경색 */
    border-top: 1px solid var(--gs-border);
    border-bottom: 1px solid var(--gs-border);
    margin: 20px 0;
}

.company-counter-banner p {
    font-size: 20px;
    font-weight: 600;
    color: var(--gs-text);
    margin: 0;
}

/* ✨ 숫자 부분을 검은색으로 고정 */
.company-counter-banner .highlight-count {
    color: #111111; 
    font-size: 26px;
    font-weight: 800;
    margin: 0 4px;
}

/* ===== 신규 입점업체 무한 롤링 (왼쪽에서 오른쪽으로) ===== */
/* ===== 신규 입점업체 무한 롤링 (오른쪽에서 왼쪽으로) ===== */
.new-store-wrapper {
    width: 100%;
    overflow: hidden; 
    padding: 10px 0;
}
.new-store-track {
    display: flex;
    width: max-content; 
    /* ✨ 수정: 오른쪽에서 왼쪽으로 이동하도록 이름 변경 */
    animation: moveRightToLeft 30s linear infinite; 
}
.new-store-track:hover {
    animation-play-state: paused; 
}
.store-item {
    width: 260px; 
    flex-shrink: 0;
    margin: 0 12.5px; 
}

/* ✨ 수정: 시작(0%)과 끝(100%)의 위치를 반대로 뒤집음 */
@keyframes moveRightToLeft {
    0% { transform: translateX(0); } /* 원래 위치에서 시작 */
    100% { transform: translateX(-50%); } /* 왼쪽 바깥 방향으로 이동하며 순환 */
}

/* ===== ✨ 모바일 화면 (가로 너비 768px 이하) 맞춤 설정 추가 ===== */
@media screen and (max-width: 768px) {
    /* 1. 카드 전체 너비 축소 (기존 260px의 약 2/3 크기인 173px) */
    .store-item {
        width: 173px !important; 
        margin: 0 8px !important; /* 카드 사이의 간격도 폰에 맞게 살짝 축소 */
    }
    
    /* 2. 썸네일 이미지 높이 축소 (기존 180px의 2/3 크기인 120px) */
    .expert-card-img {
        height: 120px !important; 
    }
    
    /* 3. 카드 내부 텍스트 영역 여백 축소 */
    .expert-card-body {
        padding: 12px !important; /* 기존 18px에서 축소 */
    }
    
    /* 4. 모바일 화면에 맞춰 글자 크기도 자연스럽게 약간 축소 */
    .expert-card-body h3 {
        font-size: 15px !important; /* 기존 17px에서 축소 */
        margin-bottom: 6px !important;
    }
    .expert-card-desc {
        font-size: 12px !important; /* 기존 13px에서 축소 */
        height: 34px !important; /* 글자 크기에 맞춰 높이 조정 */
    }
    .expert-card-badge {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }
}