@charset "UTF-8";

/* --- 페이지 기본 레이아웃 --- */
.container {
    /* [핵심 수정 1] max-width를 피드(850px)와 동일하게 맞춥니다. */
    max-width: 850px;
    margin: 20px auto;
    /* [핵심 수정 2] padding을 피드와 동일한 방식으로 적용합니다. */
    padding: 0 20px;
}

.page-title-section {
    margin-bottom: 20px;
}

.page-main-title {
    font-size: 32px; /* 피드의 32px와는 다를 수 있어 유지합니다. */
    font-weight: bold;
    /* [수정] 개별 패딩 제거. 부모(.container)의 패딩을 상속받습니다. */
}

/* ========================================================== */
/* 상단 메인 탭 스타일 (발견/팔로잉/커뮤니티) */
/* ========================================================== */
.main-tabs {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    /* [수정] 개별 패딩 제거. 부모(.container)의 패딩을 상속받습니다. */
}

.main-tabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.main-tabs ul li a {
    /* [수정] 피드와 동일하게 display 속성 통일 */
    display: inline-block;
    /* [수정] 피드와 동일하게 padding(간격) 통일 */
    padding: 10px 20px;
    text-decoration: none;
    color: #888;
    font-weight: bold;
    /* [수정] font-size를 제거하여 피드와 동일하게 상위 스타일을 상속받도록 함 */
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.main-tabs ul li.active a,
.main-tabs ul li a:hover {
    color: #000;
    border-bottom-color: #000;
}

/* --- 하위 컨트롤 영역 (카테고리 탭 + 글쓰기 버튼) --- */
.sub-controls-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* [수정] 개별 패딩 제거. 부모(.container)의 패딩을 상속받습니다. */
}

.board-tabs-container {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    cursor: grab;
}

.board-tabs-container.active-drag {
    cursor: grabbing;
}

.nav-tabs {
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none;    /* Firefox */
}

.nav-tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.nav-tabs .nav-item {
    flex-shrink: 0;
}

.nav-tabs .nav-link {
    border: none;
    color: #888;
    padding: 10px 16px;
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
}

.nav-tabs .nav-link.active {
    color: #000;
    font-weight: bold;
    border-bottom: 2px solid #000;
}



/* --- 게시글 리스트 --- */
.post-list-container {
    border-top: 1px solid #000;
}

.post-item {
    display: flex;
    /* [핵심 수정 3] 좌우 패딩을 0으로 설정하여 부모(.container)의 패딩과 중첩되지 않게 합니다.
       이렇게 하면 게시글 구분선이 컨테이너 너비에 딱 맞게 그려집니다. */
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    gap: 20px;
    align-items: flex-start;
}

.post-item a {
    text-decoration: none;
    color: inherit;
    display: contents;
}

.post-item-content {
    flex: 1;
}

.post-item-content .title {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 500;
}

.post-item-content .meta {
    font-size: 13px;
    color: #888;
}

.post-item-thumbnail {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.post-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

#loading-indicator {
    padding: 30px;
    text-align: center;
    color: #888;
}

/* ========================================================== */
/* [추가] 게시글 아이템 내부 정보 레이아웃 스타일 (레퍼런스 반영) */
/* ========================================================== */

/* --- 1. 게시글 제목 --- */
.post-item-content .title {
    /* 기존 스타일을 유지하거나 필요시 조정 */
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333; /* 제목 색상을 좀 더 명확하게 */
}

/* --- 2. 작성자 정보 (닉네임 · 날짜) --- */
.author-info {
    font-size: 13px;
    color: #888; /* 레퍼런스와 같이 회색 계열로 */
    margin-bottom: 10px;
    font-weight: 400;
}

.author-info .separator {
    margin: 0 4px; /* 점(·) 좌우에 약간의 간격 */
}

/* --- 3. 통계 정보 (조회수, 댓글) --- */
.post-stats {
    display: flex;
    align-items: center;
    gap: 12px; /* 조회수와 댓글 그룹 사이의 간격 */
    font-size: 13px;
    color: #888;
}

.post-stats .views,
.post-stats .comments {
    display: flex;
    align-items: center;
    gap: 4px; /* 아이콘과 숫자 사이의 간격 */
    margin-bottom: 0;
}

/* --- 4. SVG 아이콘 스타일 --- */
.post-stats svg {
    /* SVG의 크기는 JS에서 width/height 속성으로 제어하고 있으나, 
       세부 조정이 필요하면 여기서 수정할 수 있습니다. */
    vertical-align: middle; /* 텍스트와의 수직 정렬을 미세 조정 */
}

.post-item.is-notice .title {
    color: #007bff; /* Bootstrap의 기본 파란색 계열입니다. */
    font-weight: 600;  /* 파란색이 흰 배경에서 잘 보이도록 기본(500)보다 약간 굵게 조정했습니다. */
}