/* 1. 웹폰트 정의 */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

/* 1. 바닥 고정을 위한 body 설정 변경 */
html, body {
    height: 100%;
}

:root {
    --bg-color: #ffffff;
    --inactive-blue: #c9dfff; /* 연한 하늘색 */
    --active-blue: #91bdff;   /* 진한 하늘색 */
    --line-color: #333333;
}

body {
    display: flex;
    flex-direction: column; /* 세로로 쌓이게 설정 */
    /* font-family: 'Pretendard', sans-serif; */
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--bg-color);
    margin: 0;
    padding: 20px;
    -webkit-font-smoothing: antialiased; /* 폰트를 더 매끄럽게 보이게 함 */
    letter-spacing: 0.1px;
}

#content-area {
    flex: 1;
    padding-bottom: 50px; /* 푸터와의 간격 */
}

/* 버튼에도 폰트가 상속되도록 명시 */
button, .date-btn {
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: 0.1px; /* 폰트 가독성을 위해 자간 살짝 조절 */
}

.date-bar {
    display: flex;
    gap: 10px;
    overflow-x: auto; /* 가로 스크롤 허용 */
    white-space: nowrap; /* 버튼이 아래로 떨어지지 않게 함 */
    padding: 15px 0;
    -ms-overflow-style: none; /* IE 스크롤바 숨기기 */
    scrollbar-width: none; /* 파이어폭스 스크롤바 숨기기 */
    scroll-behavior: smooth;
}

.date-bar::-webkit-scrollbar {
    display: none; /* 크롬, 사파리 스크롤바 숨기기 (깔끔함을 위해) */
}

.date-btn {
    flex: 0 0 auto; /* 버튼 크기 유지 */
    padding: 12px 25px;
    background-color: var(--inactive-blue);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

/* 하트 버튼(첫 번째 버튼)에 포인트 주기 */
.date-btn:first-child {
    background-color: #ffdbdb; /* 기획안의 연보라/하늘색 느낌 */
    color: #ffa3a3;
}

.date-btn.active {
    background-color: var(--active-blue);
    color: white;
}

/* 콘텐츠 섹션 스타일 */
.category-title {
    margin-top: 30px;
    font-size: 1.2rem;
    border-bottom: 2px solid var(--line-color);
    padding-bottom: 5px;
}

.content-item {
    display: flex;
    align-items: center;
    background-color: #e1f5fe;
    margin: 15px 0;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: black;
}

.thumbnail {
    width: 120px;
    height: 67px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 4px;
}

footer {
    width: 100%;
    padding: 30px 0;
    margin-top: auto; /* 핵심: 내용이 적어도 바닥으로 밀어냄 */
    display: flex;
    justify-content: center; /* 영역 자체는 중앙 정렬 */
    border-top: 1px solid #eeeeee;
}

.footer-content {
    text-align: left; /* 폰트(텍스트)는 왼쪽 정렬 */
    font-size: 0.2rem;
    color: #e6e6e6;
    line-height: 1.6; /* 두 줄 분량 가독성 조절 */
}

/* 상단 멤버 바 스타일 */
.member-bar {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10px;
    justify-content: space-between; /* 화면 전체에 균등하게 배분 */
}

.mem-btn {
    flex: 1; /* 모든 버튼이 동일한 비율로 공간을 나눠 가짐 */
    min-width: 0; /* flex 환경에서 버튼이 찌그러지지 않도록 방지 */
    padding: 8px 0;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
}

.mem-btn:hover {
    background-color: #ffa3a3;
    color: white;
}

.variety-fixed {
    flex: 1; /* 글자가 있으므로 다른 버튼보다 약간 더 넓게 설정 */
    font-size: 0.6rem;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap; /* 글자가 아래로 꺾이지 않게 고정 */
    background-color: var(--inactive-blue); /* 예능 버튼은 살짝 다른 색으로 포인트 */
    border-color: lightgray;
}