/* 1. 기본 초기화 */
body { 
    margin: 0; padding: 0; 
    background-color: #000000; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color: #ffffff;
    overflow-x: hidden; 
}

a { text-decoration: none !important; color: #888888; transition: 0.3s; }
a:hover { color: #ffffff; }

/* 2. 헤더 */
.top-bar {
    position: sticky; top: 0; z-index: 1000;
    background-color: #000000; height: 60px; 
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 30px; border-bottom: 1px solid #1a1a1a; box-sizing: border-box;
}
.header-center { position: absolute; left: 50%; transform: translateX(-50%); }
.logo-img { height: 26px; width: auto; }

.header-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.filter-btn {
    background: none; border: none; color: #888888; 
    font-size: 13px; font-weight: 700; cursor: pointer; 
    text-transform: uppercase; letter-spacing: 1px; margin-right: 15px;
}
.filter-btn.active, .filter-btn:hover { color: #ffffff; }

.contact-btn { 
    color: #ffffff !important; 
    border: 1px solid #ffffff; 
    padding: 4px 10px; 
    font-size: 11px; 
    font-weight: bold;
    transition: all 0.3s ease;
}

.spotify-btn:hover {
    background-color: #1DB954 !important;
    border-color: #1DB954 !important;
}

/* 3. 그리드 및 고급 호버 효과 */
.container { max-width: 1400px; margin: 0 auto; padding: 40px 20px; }
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr; 
    grid-auto-rows: 320px;
    gap: 20px;
}

.item-link { 
    position: relative; 
    display: block; 
    overflow: hidden; 
    background: #000; 
}

.is-featured { grid-row: span 2; } 

.item-link img { 
    width: 100%; height: 100%; 
    object-fit: cover; 
    opacity: 0.8; 
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.5s ease; 
}

.item-link:hover img { 
    transform: scale(1.08); 
    opacity: 1; 
}

.item-link:hover .item-title {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.item-content {
    position: absolute; 
    bottom: 0; left: 0; width: 100%;
    padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
    box-sizing: border-box;
    z-index: 2;
}

.item-title {
    color: #cccccc !important; 
    margin: 0; 
    font-size: 14px; 
    line-height: 1.4; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

.item-tag { 
    display: block; 
    margin-top: 5px; 
    font-size: 10px; 
    color: #888; 
    letter-spacing: 1px; 
}

.is-featured .item-title { font-size: 24px; font-weight: 800; }

/* 4. 상세 페이지 스타일 */
.post-wrapper {
    max-width: 800px;
    margin: 80px auto;
    padding: 0 25px;
    line-height: 1.8;
    box-sizing: border-box;
}

#post-header { 
    text-align: center; 
    margin-bottom: 60px; 
}

#post-title { 
    font-size: clamp(28px, 5vw, 42px); 
    font-weight: 800; 
    text-transform: uppercase; 
    color: #ffffff;
    margin-bottom: 20px;
}

.markdown-body {
    font-size: 17px;
    color: #dddddd;
}

.markdown-body img { 
    max-width: 100%;
    height: auto; 
    display: block; 
    margin: 40px auto;
}

/* 5. 페이지네이션 버튼 */
#pagination-wrapper {
    grid-column: 1 / -1; display: flex; justify-content: center; 
    align-items: center; gap: 40px; margin: 80px 0; padding-bottom: 50px;
}
.page-nav-btn {
    background: none; border: 1px solid #333; color: #888;
    padding: 10px 25px; font-size: 11px; font-weight: bold; cursor: pointer;
    transition: 0.3s;
}
.page-nav-btn:hover:not(:disabled) { color: #fff; border-color: #fff; }
.page-nav-btn:disabled { opacity: 0.1; }

/* 6. 반응형 (정렬 최적화 + 콤팩트 간격 버전) */
@media (max-width: 768px) {
    .top-bar { 
        position: relative; 
        height: auto; 
        flex-direction: column; 
        padding: 20px 0; /* 상하 여백을 40px -> 20px로 줄임 */
        gap: 15px; /* 층 사이 간격을 30px -> 15px로 줄임 */
    }
    
    .header-left { 
        width: 100%; 
        display: flex;
        justify-content: center;
        margin: 0;
    }
    .logo-img { height: 20px; } /* 로고 크기 최적화 */

    .category-nav, .header-right {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        justify-items: center;
        margin: 0 auto;
        max-width: 320px;
    }

    .filter-btn {
        margin: 0 !important;
        font-size: 13px;
        white-space: nowrap;
        padding: 2px 0; /* 버튼 자체의 세로 높이 줄임 */
    }

    .header-right {
        gap: 0;
        margin-top: -5px; /* 카테고리와의 간격 더 밀착 */
    }
    
    .contact-btn { 
        width: 82px; /* 버튼 너비 미세 조정 */
        padding: 4px 0; 
        font-size: 9px; 
        text-align: center;
        display: inline-block;
    }

    .grid-container { 
        grid-template-columns: 1fr !important; 
        grid-auto-rows: auto; 
        padding-top: 10px; /* 그리드 첫 줄과 헤더 사이 간격 조정 */
    }
    .item-link { height: 350px; grid-row: span 1 !important; }
    .post-wrapper { margin: 30px auto; padding: 0 20px; }
}