@charset "utf-8";

/* [1] 폰트 강제 통일 */
.th-board-feed, 
.th-board-feed button, 
.th-board-feed input, 
.th-board-feed select, 
.th-board-feed textarea { 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; 
    -webkit-font-smoothing: antialiased;
    color: #000;
}

.th-board-feed a { text-decoration: none; color: inherit; }

/* [2] 피드 기본 구조 */
.th-board-feed { width: 100%; background: #ffffff; }
.th-post-item { display: flex; padding: 25px 20px; border-bottom: 1px solid #efefef; }
.th-post-item:hover { background-color: #fafafa; }

/* 좌측 아바타 컨테이너 */
.th-avatar-col { display: flex; flex-direction: column; align-items: center; margin-right: 15px; flex-shrink: 0; }
.th-thread-line { width: 2px; background: #f0f0f0; flex-grow: 1; margin-top: 10px; border-radius: 2px; }

/* =========================================
   [3] 프로필 아바타 
   ========================================= */
.author-profile {
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}

.profile-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.profile-text {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0; 
    color: #666;               
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
}

/* [4] 우측 콘텐츠 */
.th-content-col { flex: 1; min-width: 0; }
.th-post-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.th-name { font-weight: 700; font-size: 15px; color: #000; }
.th-time { color: #999; font-size: 14px; }
.th-more-btn { color: #8c98a4; cursor: pointer; font-size: 18px; }

/* 본문 텍스트 */
.th-text { font-size: 15px; line-height: 1.6; color: #111; word-break: break-all; margin-bottom: 10px; }
.th-detail-link { color: #8c98a4; font-size: 14px; text-decoration: underline; display: inline-block; margin-bottom: 15px; }

/* =========================================
   [5] Owl Carousel 스와이프 레이아웃 CSS
   ========================================= */
.th-owl-gallery { margin: 10px 0 15px 0; width: 100%; }
.th-owl-gallery:not(.owl-loaded) { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; }
.th-owl-gallery .owl-stage { display: flex !important; flex-wrap: nowrap !important; }

.th-owl-gallery .item { 
    display: block; height: 300px; width: auto;   
    border-radius: 12px; overflow: hidden; border: 1px solid #efefef; background-color: #f9f9f9;
}
.th-owl-gallery .item img { 
    display: block; height: 100% !important; width: auto !important; 
    max-width: 550px !important; object-fit: contain; 
}

@media screen and (max-width: 768px) {
    .th-owl-gallery .item img { max-width: 80vw !important; }
}

/* =========================================
   [6] 하단 액션 버튼 (좋아요, 댓글 등)
   ========================================= */
.th-post-actions { 
    display: flex; 
    align-items: center;
    gap: 32px; /* 버튼 사이 간격을 넓혀서 스크린샷과 유사하게 */
    color: #536471; /* 트렌디한 회색 */
    margin-top: 15px; 
}
.th-action-btn { 
    display: flex; 
    align-items: center; 
    gap: 8px; /* 아이콘과 숫자 사이 간격 */
    font-size: 20px; /* 아이콘 크기 */
    cursor: pointer; 
    text-decoration: none; 
    color: inherit; 
    background: none;
    border: none;
    padding: 0;
    transition: color 0.2s ease;
}
.th-action-btn span { 
    font-size: 14px; 
    font-weight: 500;
}
/* 마우스를 올렸을 때 각 버튼별 포인트 컬러 */
.th-action-btn.like:hover { color: #f91880; } /* 핑크색 하트 */
.th-action-btn.comment:hover { color: #1d9bf0; } /* 파란색 댓글 */
.th-action-btn.repost:hover { color: #00ba7c; } /* 초록색 리포스트 */
.th-action-btn.share:hover { color: #1d9bf0; }

/* [7] 푸터 */
.sns-board-footer { padding: 30px 20px; border-top: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
.page-link { padding: 8px 12px; color: #999; font-size: 15px; text-decoration: none; border-radius: 6px; }
.page-link.active { color: #000; font-weight: 700; background: #f5f5f5; }
.sns-write-btn { background: #000; color: #fff; padding: 10px 25px; border-radius: 30px; font-weight: 700; font-size: 14px; text-decoration: none; }