/* 댓글 시스템 전용 스타일 */

/* 댓글 섹션 */
.comments-section {
    margin-top: 30px !important;
}

/* 댓글 아이템 */
.comment-item {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.comment-main {
    border-left: 3px solid #007bff !important;
}

.comment-reply {
    margin-left: 30px !important;
    border-left: 3px solid #28a745 !important;
    background-color: #f8f9fa !important;
}

.comment-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e9ecef !important;
}

.comment-author strong {
    color: #495057 !important;
    font-weight: 600 !important;
}

.comment-author .text-muted {
    font-size: 12px !important;
    color: #6c757d !important;
}

.comment-actions .btn {
    font-size: 12px !important;
    padding: 4px 8px !important;
    margin-right: 5px !important;
    border-radius: 4px !important;
}

.comment-content {
    line-height: 1.6 !important;
    color: #495057 !important;
    font-size: 14px !important;
    margin-bottom: 10px !important;
}

/* 답글 폼 스타일 */
.reply-form {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin-top: 15px !important;
}

/* 댓글 폼 기본 스타일 (데스크톱 우선) */
.comment-form {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.comment-form .container-fluid {
    padding: 0 !important;
}

/* 모든 폼 그룹에 균일한 간격 적용 */
.comment-form .form-group {
    margin-bottom: 20px !important;
}

.comment-form .form-group:last-child {
    margin-bottom: 0 !important;
}

/* 라벨 스타일 */
.comment-form .form-label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #495057 !important;
    font-size: 14px !important;
}

.comment-form .form-label.required::after {
    content: " *" !important;
    color: #dc3545 !important;
}

/* 입력 필드 기본 스타일 */
.comment-form input[type="text"],
.comment-form input[type="email"], 
.comment-form input[type="password"],
.comment-form textarea {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    box-sizing: border-box !important;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="password"]:focus,
.comment-form textarea:focus {
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* 필수 입력 필드 강조 */
.comment-form input[required],
.comment-form textarea[required] {
    border-left: 3px solid #28a745 !important;
}

/* 텍스트 영역 */
.comment-form textarea {
    min-height: 100px !important;
    resize: vertical !important;
}

/* 체크박스 영역 */
.comment-form .form-check {
    display: flex !important;
    align-items: center !important;
    padding: 12px !important;
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    margin: 0 !important;
}

.comment-form .form-check-input {
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    margin-top: 0 !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    position: relative !important;
}

.comment-form .form-check-label {
    margin-bottom: 0 !important;
    font-weight: 500 !important;
    color: #495057 !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

/* 버튼 스타일 */
.comment-form .btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.15s ease-in-out !important;
}

.comment-form .btn-primary {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
}

.comment-form .btn-primary:hover {
    background-color: #0056b3 !important;
    border-color: #004085 !important;
}

.comment-form .btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
    margin-left: 10px !important;
}

.comment-form .btn-secondary:hover {
    background-color: #545b62 !important;
    border-color: #4e555b !important;
}

/* 알림 메시지 */
.comment-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: none;
    border-radius: 8px;
}

.comment-alert .btn-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    opacity: 0.8;
}

.comment-alert .btn-close:hover {
    opacity: 1;
}

/* 체크박스 체크 상태 스타일 */
.comment-form input[type="checkbox"]:checked {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

/* 비밀댓글 관련 스타일 */
.secret-comment-placeholder {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 5px;
    padding: 15px;
}

.secret-comment-placeholder .alert {
    margin-bottom: 0;
    background-color: transparent;
    border: none;
    padding: 0;
    color: #856404;
}

.secret-password-form {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    margin-top: 10px;
}

.secret-password-form .form-label {
    font-weight: 600;
    color: #495057;
}

.secret-password-form input[type="password"] {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
}

.secret-password-form input[type="password"]:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    outline: 0 !important;
}

/* 비밀댓글 배지 스타일 */
.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
    font-weight: 600;
}

/* 비밀댓글 버튼 스타일 */
.view-secret-btn {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
}

.view-secret-btn:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

/* 비밀댓글 확인/취소 버튼 */
.confirm-secret-btn {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
}

.confirm-secret-btn:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

.cancel-secret-btn {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

.cancel-secret-btn:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
}

/* 모바일 반응형 스타일 */
@media (max-width: 768px) {
    /* 댓글 작성 폼 모바일 조정 */
    .comment-form {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* 폼 그룹 간격 조정 */
    .comment-form .form-group {
        margin-bottom: 15px !important;
    }
    
    /* 입력 필드 모바일 최적화 */
    .comment-form input[type="text"],
    .comment-form input[type="email"], 
    .comment-form input[type="password"],
    .comment-form textarea {
        font-size: 16px !important; /* iOS 줌 방지 */
        padding: 12px !important;
    }
    
    /* 텍스트 영역 높이 조정 */
    .comment-form textarea {
        min-height: 120px !important;
    }
    
    /* 버튼 모바일 스타일 */
    .comment-form .btn {
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    .comment-form .btn-secondary {
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* 댓글 목록 모바일 스타일 */
    .comment-item {
        margin-bottom: 20px !important;
        padding: 15px !important;
    }
    
    .comment-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .comment-actions {
        margin-top: 10px !important;
        width: 100% !important;
    }
    
    .comment-actions .btn {
        margin-right: 8px !important;
        margin-bottom: 5px !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
        width: auto !important;
    }
    
    /* 대댓글 들여쓰기 조정 */
    .comment-reply {
        margin-left: 20px !important;
    }
    
    /* 비밀댓글 폼 모바일 스타일 */
    .secret-password-form {
        padding: 15px !important;
    }
    
    .secret-password-form .row {
        margin: 0 !important;
    }
    
    .secret-password-form .col-md-8,
    .secret-password-form .col-md-4 {
        padding: 0 !important;
        margin-bottom: 10px !important;
    }
    
    .secret-password-form .btn {
        width: 100% !important;
        margin-bottom: 5px !important;
    }
}

/* 더 작은 모바일 화면 (360px 이하) */
@media (max-width: 360px) {
    .comment-form {
        padding: 12px !important;
    }
    
    .comment-form input[type="text"],
    .comment-form input[type="email"], 
    .comment-form input[type="password"],
    .comment-form textarea {
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    .comment-form .btn {
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    .comment-reply {
        margin-left: 10px !important;
    }
}