/* 기본 설정 */

@font-face {

    font-family: 'GmarketSansMedium';

    src: local('GmarketSansMedium'),

         url('/GmarketSansMedium.woff') format('woff');

    font-weight: normal;

    font-style: normal;

    font-display: swap;  /* 폰트 로딩 중에도 텍스트가 보이도록 함 */

}



:root {

    --primary-color: #2D3436;

    --accent-color: #0984E3;

    --background-color: #F7F8FA;

    --card-background: #FFFFFF;

    --text-primary: #2D3436;

    --text-secondary: #636E72;

    --border-color: #DFE6E9;

    --hover-color: #74B9FF;

    --shadow-sm: 0 2px 4px 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);

    --transition: all 0.3s ease;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'GmarketSansMedium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    background-color: var(--background-color);

    color: var(--text-primary);

    line-height: 1.6;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* 상단 추천 게시글 섹션 */

.featured-posts {

    padding: 60px 0;

    background: var(--card-background);

    margin-bottom: 40px;

    box-shadow: var(--shadow-sm);

}



.section-title {

    text-align: center;

    font-size: 28px;

    margin-bottom: 40px;

    color: var(--text-primary);

    position: relative;

}



.section-title::after {

    content: '';

    display: block;

    width: 50px;

    height: 3px;

    background: var(--accent-color);

    margin: 15px auto 0;

    border-radius: 2px;

}



.featured-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    list-style: none;

    padding: 0;

}



.featured-item {

    border-radius: 12px;

    overflow: hidden;

    background: var(--card-background);

    box-shadow: var(--shadow-md);

    transition: var(--transition);

}



.featured-item:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-lg);

}



.featured-link {

    text-decoration: none;

    color: inherit;

    display: block;

}



.featured-image-wrapper {

    position: relative;

    padding-top: 60%; /* 이미지 비율 유지 */

    overflow: hidden;

}





.featured-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.featured-item:hover .featured-image {

    transform: scale(1.05);

}



.featured-content {

    padding: 20px;

}



.featured-category {

    display: inline-block;

    background: var(--accent-color);

    color: white;

    padding: 4px 12px;

    border-radius: 20px;

    font-size: 14px;

    margin-bottom: 12px;

}



.featured-title {

    font-size: 18px;

    margin-bottom: 12px;

    color: var(--text-primary);

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.featured-meta {

    display: flex;

    justify-content: space-between;

    color: var(--text-secondary);

    font-size: 14px;

}



/* 카테고리 네비게이션 */

.category-nav {

    background: var(--card-background);

    padding: 20px 0;

    margin-bottom: 20px;

    box-shadow: var(--shadow-sm);

    position: sticky;

    top: 0;

    z-index: 100;

}



.category-nav .container {

    display: flex;

    gap: 15px;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    padding-bottom: 5px;

}



.category-nav .container::-webkit-scrollbar {

    display: none;

}



.category-link {

    color: var(--text-secondary);

    text-decoration: none;

    padding: 8px 20px;

    border-radius: 20px;

    transition: var(--transition);

    white-space: nowrap;

    font-size: 15px;

}



.category-link.active {

    background: var(--accent-color);

    color: white;

}



.category-link:hover:not(.active) {

    background: var(--border-color);

}



/* 일반 게시글 목록 */

.post-list {

    padding: 0px 0;

}



.post-item {

    background: var(--card-background);

    border-radius: 12px;

    overflow: hidden;

    margin-bottom: 30px;

    box-shadow: var(--shadow-md);

    transition: var(--transition);

}



.post-item:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-lg);

}



.post-link {

    display: flex;

    text-decoration: none;

    color: inherit;

}



.post-thumbnail {

    flex: 0 0 280px;

    position: relative;

    height: 260px; /* 고정 높이 설정 */

    overflow: hidden;

    border-radius: 12px 0 0 12px; /* 왼쪽만 라운드 처리 */

}



.post-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.post-content {

    flex: 1;

    padding: 25px;

    display: flex;

    flex-direction: column;

}



.post-header {

    margin-bottom: 15px;

}



.post-category {

    display: inline-block;

    background: var(--accent-color);

    color: white;

    padding: 4px 12px;

    border-radius: 20px;

    font-size: 14px;

    margin-bottom: 10px;

}



.post-title {

    font-size: 22px;

    color: var(--text-primary);

    line-height: 1.4;

    margin: 0 0 15px;

}



.post-excerpt {

    color: var(--text-secondary);

    font-size: 15px;

    line-height: 1.6;

    margin-bottom: 15px;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.post-meta {

    margin-top: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: var(--text-secondary);

    font-size: 14px;

}



/* 페이지네이션 */

.pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-top: 50px;

    padding: 20px 0;

}



.pagination a {

    color: var(--text-primary);

    text-decoration: none;

    padding: 8px 16px;

    border-radius: 6px;

    transition: var(--transition);

}



.pagination a.active {

    background: var(--accent-color);

    color: white;

}



.pagination a:hover:not(.active) {

    background: var(--border-color);

}



.page-dots {

    color: var(--text-secondary);

}



.page-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

}





/* 총개시물 스타일 추가함 */

.post-list-header {

    display: flex;

    justify-content: flex-end;

    margin-bottom: 25px;

}



.post-count {

    color: var(--text-secondary);

    font-size: 15px;

    background: var(--card-background);

    padding: 6px 12px;

    border-radius: 15px;

    box-shadow: var(--shadow-sm);

}



/* 반응형 디자인 */



@media (max-width: 768px) {

    .featured-grid {

        grid-template-columns: repeat(2, 1fr) !important; /* !important로 강제 적용 */

        gap: 15px;

    }

    

    /* 모바일에서의 다른 스타일 */

    .post-link {

        flex-direction: column;

    }

    

    .post-thumbnail {

        flex: none;

        height: 200px;

        border-radius: 12px 12px 0 0;

    }

    

    .featured-image-wrapper {

        padding-top: 70%;

    }

    

    .featured-content {

        padding: 15px;

    }

    

    .featured-title {

        font-size: 16px;

    }

}





/* 애니메이션 */

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.post-item {

    animation: fadeIn 0.6s ease backwards;

}



.post-item:nth-child(1) { animation-delay: 0.1s; }

.post-item:nth-child(2) { animation-delay: 0.2s; }

.post-item:nth-child(3) { animation-delay: 0.3s; }

.post-item:nth-child(4) { animation-delay: 0.4s; }

.post-item:nth-child(5) { animation-delay: 0.5s; }



/* 접근성 */

.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;

}



/* 포커스 스타일 */

a:focus {

    outline: 3px solid var(--accent-color);

    outline-offset: 2px;

}