/* --- 1. Main Layout --- */
.feed-detail-container { padding-top: 20px; padding-bottom: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
.feed-post-wrapper {
    display: flex;
    max-width: 935px;
    width: 100%;
    margin: 0 auto 24px auto;
    border: 1px solid #dbdbdb;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    /* [수정 1] 긴 콘텐츠를 위해 max-height를 유지합니다. */
    max-height: calc(100vh - 120px);
}


/* --- 2. Left Column (Media) --- */
.post-media-section { flex: 1 1 60%; display: flex; align-items: center; justify-content: center; background-color: #000; }
.post-media-section .feed-post-content .main-feed-image { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* --- 3. Right Column (Info) --- */
.post-info-section { flex: 1 1 40%; display: flex; flex-direction: column; min-width: 340px; overflow: hidden; }
.post-info-section .feed-post {
    display: flex;
    flex-direction: column;
    /* [수정 2] 정보 영역이 이미지 높이에 맞춰지도록 height: 100%를 다시 활성화합니다. */
    height: 100%;
}
.post-info-section .feed-post-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #efefef; flex-shrink: 0; }
.post-info-section .user-profile { display: flex; align-items: center; gap: 12px; }
.post-info-section .user-profile .profile-image { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.post-info-section .user-profile .username { font-weight: 600; }
.post-info-section .post-scrollable-content {
    /* [수정 3] 불필요하게 늘어나지 않도록 flex-grow를 0으로 설정합니다. */
    flex-grow: 0;
    overflow-y: auto;
    padding: 16px;
    min-height: 0;
}
.post-scrollable-content .feed-content-body { display: flex; gap: 8px; margin-bottom: 16px; }
.post-scrollable-content .feed-content-body p { margin: 0; line-height: 1.5; }
.post-scrollable-content .hashtags { color: #00376b; margin: 0 0 16px 0; }
.post-scrollable-content .hashtags a { color: inherit; text-decoration: none; margin-right: 5px; }
.content-divider { border-top: 1px solid #efefef; margin: 16px 0; }

.post-info-section .feed-post-footer {
    padding: 16px;
    border-top: 1px solid #efefef;
    /* [수정 4] 이 속성이 푸터를 맨 아래로 밀어내는 핵심 역할을 합니다. */
    margin-top: auto;
    flex-shrink: 0;
}
.post-info-section .interaction-buttons { display: flex; gap: 16px; margin-bottom: 8px; }
.post-info-section .interaction-buttons button { background: none; border: none; padding: 0; cursor: pointer; }
.post-info-section .interaction-buttons svg { width: 24px; height: 24px; }
.post-info-section .like-count { font-weight: 600; margin-bottom: 8px; }
.post-info-section .post-timestamp { font-size: 11px; color: #8e8e8e; margin-bottom: 16px; }

/* [수정 5] 이전 수정에서 추가했던 구분선을 제거합니다. 푸터의 border-top이 그 역할을 대신합니다. */
.post-info-section .comment-input-area {
    width: 100%;
    /* border-top: 1px solid #efefef; */ /* 제거 */
    /* padding-top: 16px; */ /* 제거 */
}
.post-info-section .comment-input { width: 100%; border: none; padding: 8px 0; font-size: 14px; }
.post-info-section .comment-input:focus { outline: none; }

/* --- 4. Comment & Button Styles --- */
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-item { display: flex; align-items: flex-start; margin-bottom: 16px; }
.comment-item:last-child { margin-bottom: 0; }
.comment-writer-profile { margin-right: 12px; flex-shrink: 0; }
.comment-writer-profile img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background-color: #f0f0f0; }
.comment-content { display: flex; flex-direction: column; width: 100%; }
.comment-content p { margin: 0; line-height: 1.4; word-break: break-all; }
.comment-content .comment-writer-username { font-weight: 600; margin-right: 6px; }
.comment-content .comment-timestamp { font-size: 11px; color: #8e8e8e; margin-top: 4px; }

/* [수정 6] '댓글 없음' 메시지 스타일 추가 */
.no-comments-message {
    padding: 40px 16px;
    text-align: center;
    color: #8e8e8e;
    font-size: 14px;
}

.interaction-buttons button.liked svg { fill: #ed4956; stroke: #ed4956; }
.hidden-comment { display: none; }
.show-more-comments-btn { background: none; border: none; padding: 8px 0; margin-left: 50px; cursor: pointer; font-size: 12px; color: #8e8e8e; font-weight: 600; }
.show-more-comments-btn:hover { color: #262626; }
.comment-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.2s linear; }
.comment-item:hover .comment-actions { visibility: visible; opacity: 1; }
.comment-actions button { background: none; border: none; padding: 4px; margin: 0; cursor: pointer; line-height: 0; }
.comment-actions button svg { fill: #8e8e8e; transition: fill 0.2s; }
.comment-actions button:hover svg { fill: #262626; }
.post-actions > div, .comment-actions { display: flex; align-items: center; gap: 12px; }
.post-actions button { background: none; border: none; cursor: pointer; color: #8e8e8e; font-weight: 600; }
.post-actions button:hover { color: #262626; }
/* --- 5. Comment Edit Mode Styles --- */
.comment-edit-mode { width: 100%; }
.comment-edit-input { width: 100%; border: 1px solid #dbdbdb; border-radius: 4px; padding: 8px; resize: none; min-height: 60px; font-size: 14px; margin-bottom: 8px; }
.edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.edit-actions button { border: 1px solid #dbdbdb; background-color: #fff; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-weight: 600; line-height: normal; }
.edit-actions .save-edit-btn { background-color: #0095f6; color: white; border-color: #0095f6; }


/* =================================================== */
/*             [신규 추가] 팔로우 기능 관련 CSS           */
/* =================================================== */

/* 팔로우/팔로잉 링크 공통 스타일 */
.follow-link, .following-link {
    font-weight: 550; /* 폰트 굵기 */
    margin-left: 8px; /* 닉네임과의 간격 */
    text-decoration: none;
    cursor: pointer;
}

/* '팔로우' 링크 스타일 */
.follow-link {
    color: deepskyblue; /* 인스타그램의 파란색과 유사 */
}

/* '팔로잉' 링크 스타일 */
.following-link {
    color: deepskyblue; /* 기본 텍스트 색상 */
}
/* 1. '팔로잉' 버튼에 마우스를 올렸을 때 변화 없애기 */
.following-link:hover {
    color: deepskyblue; /* 원래 색상과 동일하게 설정 */
    text-decoration: none; /* 밑줄 등 장식 제거 */
}

/* 2. '팔로우' 버튼에 마우스를 올렸을 때 변화 없애기 */
.follow-link:hover {
    color: deepskyblue; /* 원래 색상과 동일하게 설정 */
    text-decoration: none; /* 밑줄 등 장식 제거 */
}
/* 언팔로우 모달 관련 스타일 */
.unfollow-modal-content {
    border-radius: 12px;
}
.unfollow-modal-content .modal-body {
    text-align: center;
    padding: 32px 16px 16px;
}
.unfollow-profile img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
    display: inline-block;
}
.unfollow-modal-content .modal-footer {
    border-top: none;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.unfollow-modal-content .modal-footer button {
    width: 100%;
    border: none;
    border-top: 1px solid #dbdbdb;
    padding: 14px 8px;
    margin: 0;
    background-color: transparent;
    font-weight: normal;
    font-size: 14px;
}
.unfollow-modal-content .modal-footer .btn-danger {
    color: #ed4956; /* 빨간색 텍스트 */
    font-weight: 700;
}
.unfollow-modal-content .modal-footer .btn-secondary {
    color: #262626;
}

/* =================================================== */
/*        [신규 추가] 게시물 옵션 모달 관련 CSS           */
/* =================================================== */

/* '...' 옵션 버튼 스타일 */
.options-menu-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

/* 모달 창의 전체적인 디자인 */
.options-modal-content {
    background-color: #ffffff;
    border-radius: 12px;
    border: none;
}
.options-modal-content:hover {
    border-radius: 12px !important; /* 호버 시에도 둥근 모서리 유지 */
}

/* 모달 메뉴 목록(ul)의 기본 스타일 초기화 */
#feed-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
}

/* 모달 메뉴 항목(li) 각각의 스타일 */
#feed-options-list li {
    padding: 14px 8px;
    font-size: 14px;
    text-align: center;
    border-top: 1px solid #dbdbdb; /* 메뉴 구분선 */
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.2s;
}

/* 첫 번째 메뉴는 위쪽 구분선 제거 */
#feed-options-list li:first-child {
    border-top: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* 마우스를 올렸을 때 약간의 배경색 변경 */
#feed-options-list li:hover {
    background-color: #f9f9f9;
}
/* [핵심 추가] 마지막 li의 하단 모서리를 둥글게 */
#feed-options-list li:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* '삭제', '신고', '팔로우 취소' 등 위험/중요 메뉴 스타일 */
#feed-options-list li.text-danger b {
    color: #ed4956; /* 빨간색 텍스트 */
    font-weight: 700; /* 굵은 글씨 */
}

/* ======================================================= */
/* 6. Mobile Responsive Styles (max-width: 991px)      */
/* ======================================================= */
@media (max-width: 991px) {
    /*
     * [핵심 수정 1]
     * 모바일 화면에서는 사진과 정보/댓글 영역을 세로로 쌓습니다.
     * flex-direction: column;
     */
    .feed-post-wrapper {
        flex-direction: column;
        /* [핵심 수정 2] 세로로 길어질 수 있도록 최대 높이 제한을 해제합니다. */
        max-height: none;
        border: none; /* 모바일에서는 카드 테두리 제거로 더 넓어보이게 함 */
        border-radius: 0;
    }

    /* [핵심 수정 3] 미디어 섹션이 화면 너비에 꽉 차도록 합니다. */
    .post-media-section {
        flex-basis: auto; /* flex-basis 초기화 */
    }

    /*
     * [핵심 수정 4]
     * 정보/댓글 영역의 최소 너비 제한을 풀어 화면 너비에 맞게 조절되도록 합니다.
     */
    .post-info-section {
        flex-basis: auto; /* flex-basis 초기화 */
        min-width: unset; /* 최소 너비 제한 해제 */
    }

    /* [핵심 수정 5] 전체 컨테이너의 좌우 패딩을 제거하여 꽉 찬 화면을 만듭니다. */
    .feed-detail-container {
        padding: 0;
    }

    /* 정보/댓글 영역의 헤더와 푸터에 다시 패딩을 주어 좌우 여백을 확보합니다. */
    .post-info-section .feed-post-header,
    .post-info-section .post-scrollable-content,
    .post-info-section .feed-post-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* [핵심 수정 6] 스크롤 영역이 불필요하므로 초기화합니다. */
    .post-info-section .post-scrollable-content {
        overflow-y: visible;
        flex-grow: 0; /* 불필요한 공간 차지 방지 */
    }
}