/* 전체 배경 설정 */
body {
    background-color: #ffffff;
    color: #000000;
    margin: 0;
    font-family: 'Pretendard', -apple-system, sans-serif;
}

/* 메인 컨테이너 */
.main-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}

/* --- 타이틀 애니메이션 영역 추가 --- */

/* 1. 문구가 보일 창문 역할 (한 줄만 보이게 가둠) */
.main-title-container {
    height: 60px;          /* 한 문장의 높이 */
    overflow: hidden;      /* 창문 밖 글자 숨김 */
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
}

/* 2. 실제로 위로 움직이는 박스 */
.title-slider {
    display: flex;
    flex-direction: column;
    /* 4문장 x 5초 = 총 20초로 변경 */
    animation: slideUp 20s infinite ease-in-out; 
}

/* 3. 개별 타이틀 스타일 (기존 .main-title 수정) */
.main-title {
    font-size: 2.3rem;     /* 텍스트 크기 */
    font-weight: bold;
    height: 60px;          /* container 높이와 반드시 일치 */
    line-height: 60px;     /* 세로 가운데 정렬 */
    margin: 0;
    color: #000;
    white-space: nowrap;   /* 줄바꿈 방지 */
}

/* 4. 위로 올라가는 애니메이션 핵심 동작 (5초 간격 유지) */
@keyframes slideUp {
    /* 0% ~ 20% : 첫 번째 문구 멈춤 (약 4~5초) */
    0%, 20%   { transform: translateY(0); }         
    
    /* 25% ~ 45% : 두 번째 문구 멈춤 */
    25%, 45%  { transform: translateY(-60px); }    
    
    /* 50% ~ 70% : 세 번째 문구 멈춤 */
    50%, 70%  { transform: translateY(-120px); }   
    
    /* 75% ~ 95% : 마지막 문구(첫 번째와 동일) 멈춤 */
    75%, 95%  { transform: translateY(-180px); }   
    
    /* 100% : 다시 처음으로 부드럽게 복귀 */
    100%      { transform: translateY(-180px); }
}

/* --- 검색바 영역 --- */
.search-section {
    max-width: 800px;
    margin: 0 auto 50px;
}

.search-bar-wrapper {
    display: flex;
    background: #e9ecef;
    border-radius: 50px;
    padding: 12px 25px;
    align-items: center;
    border: 2px solid #343a40;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.search-category {
    color: #000;
    font-weight: 800;
    padding-right: 15px;
    border-right: 2px solid #adb5bd;
    margin-right: 15px;
}

.search-bar-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    color: #000;
    font-size: 1.1rem;
    font-weight: 500;
    outline: none;
}

.search-bar-wrapper input::placeholder {
    color: #6c757d;
}

/* --- 카테고리 그리드 --- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 50px;
}

.category-card {
    background: #f1f3f5;
    color: #212529;
    border-radius: 15px;
    padding: 30px 20px;
    text-align: left;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #eee;
}

.category-card:hover {
    background: #ffffff;
    border-color: #343a40;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.category-card span {
    font-size: 1.1rem;
    font-weight: bold;
}

/* --- 지역 태그 섹션 --- */
.region-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 50px;
    margin-bottom: 30px; 
}

.tag {
    background: #ffffff;
    padding: 10px 22px;
    border-radius: 25px;
    font-size: 0.95rem;
    color: #343a40;
    border: 2px solid #ced4da; 
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.tag:hover {
    background: #f8f9fa;
    border-color: #343a40;
    color: #000;
    transform: translateY(-2px);
}

/* 인기 공구 영역 - 왼쪽 정렬 버전 */
.popular-keywords {
    max-width: 800px;      /* 검색바와 동일한 너비 */
    margin: 15px auto 0;   /* 위쪽 여백 15px, 가운데 배치(컨테이너 기준) */
    text-align: left;      /* 글자들은 왼쪽으로! */
    padding-left: 25px;    /* 검색바 안쪽 여백과 맞추기 위해 추가 */
}

.popular-keywords .label {
    font-size: 0.9rem;
    color: #666;
    margin-right: 5px;
}

.keyword-list {
    display: inline-block; /* 라벨 옆에 바로 붙도록 설정 */
}

.keyword-list span {
    font-size: 0.9rem;
    color: #888;
    margin-right: 10px;
    cursor: pointer;
}

.keyword-list span:hover {
    color: #000;
    text-decoration: underline;
}