@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

.category-buttons {
    text-align: center;
    margin: 50px 0;
}

.category-btn {
    padding: 10px 20px;
    margin: 0 10px;
    background: #f9f9f9;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s, color 0.3s;
    font-family: 'Pretendard', sans-serif; /* ✅ Pretendard 폰트 적용 */
}

.category-btn:hover {
    background: white;
    font-weight: bold;
    color: #00B3CC;
}

.category-btn.active {
    background: white;
    font-weight: bold;
    color: #00B3CC;
}

.scroll-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 25px;
}

.scroll-container {
    display: flex;
    overflow-x: auto;
    padding: 10px;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
    scroll-behavior: smooth; /* ✅ 부드럽게 이동 */
    max-width: 100%; /* ✅ 적당한 너비 제한 */
}

/* Chrome, Safari 스크롤바 숨김 */
.scroll-container::-webkit-scrollbar {
    display: none;
}

.category-btn {
    flex: 0 0 auto;
    padding: 10px 20px;
    border-radius: 20px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    font-size: 1rem;
    font-family: 'Pretendard', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}
.detail-section {
    display: flex;
    justify-content: center;   /* ✅ 가로 중앙 */
    align-items: center;       /* ✅ 세로 중앙 (선택사항) */
    width: 100%;
    min-height: 600px;         /* ✅ 높이 지정 (없으면 세로 정렬 안 예쁨) */
    padding: 20px 0;
    box-sizing: border-box;    /* ✅ 패딩까지 포함 */
}

.detail-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;            /* ✅ fallback으로 추가 */
}

.scroll-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    user-select: none;
    padding: 5px 10px;
}
@media (max-width: 120px) {
    .scroll-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 25px;
    }
}

@media (max-width: 730px) {
    .scroll-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 3px;
    }
}

@media (max-width: 480px) {
    .scroll-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 3px;
    }
}