/* ==================================================
   🔥 갤러리 게시판 모던 디자인 업그레이드 🔥
================================================== */
/* 1. 카드 전체 윤곽 부드럽게 & 그림자 효과 */
#gallery_3_col .card {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    background-color: #fff !important;
}

/* 2. 마우스 올렸을 때 살짝 떠오르는 입체 애니메이션 */
#gallery_3_col .card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 25px rgba(0,0,0,0.1) !important;
}

/* 3. 썸네일 이미지 비율과 크기 강제 고정 */
#gallery_3_col .card img {
    width: 100% !important;
    height: 220px !important; /* 여기서 사진 높이를 조절할 수 있습니다 */
    object-fit: cover !important;
    border-bottom: 1px solid #f8f9fa !important;
}

/* 4. 카드 안쪽 여백 넉넉하게 */
#gallery_3_col .card-body {
    padding: 1.5rem !important;
}

/* 5. 제목 텍스트 세련되게 (1줄 넘어가면 ... 처리) */
#gallery_3_col .card-title a {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #2b2b2b !important;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#gallery_3_col .card-title a:hover {
    color: #0d6efd !important;
}

/* 6. 본문 내용 텍스트 부드럽게 (2줄 넘어가면 ... 처리) */
#gallery_3_col .card-text {
    font-size: 0.9rem !important;
    color: #868e96 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5 !important;
    margin-top: 12px !important;
}

/* ==================================================
   🔥 게시판 전체 버튼 & 유튜브 뷰어 완벽 업그레이드 🔥
================================================== */
/* 1. 호떡 된 유튜브 뷰어 화면 16:9 황금비율로 꽉 차게 키우기 */
#bo_v_atc .justify-content-md-center .col-md-10 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}
#bo_v_atc .embed-container {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* 🔥 핵심! 세로 높이를 16:9 비율로 강제 팽창! 🔥 */
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
    margin: 0 auto 30px auto !important;
}
#bo_v_atc .embed-container iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* 2. 게시판 모든 버튼 (목록, 보기, 쓰기, 댓글) 모던 앱 스타일 통일 */
.btn-group .btn, 
#mj-board-btn-wrap .btn, 
#bo_w .btn-secondary, 
#btn_submit {
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important; /* 글씨는 무조건 하얗게! */
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 8px 18px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important; /* 아이콘과 글자 사이 간격 */
    background-color: #64748b !important; /* 🌟 기본 색상(그레이) 지정 - 하얀 버튼 증발 완벽 방지! */
}

/* 마우스 호버 효과 (살짝 뜨면서 밝아짐) */
.btn-group .btn:hover, 
#mj-board-btn-wrap .btn:hover, 
#bo_w .btn-secondary:hover, 
#btn_submit:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important;
    filter: brightness(1.1) !important;
    color: #ffffff !important;
}

/* 3. 버튼 그룹 간격 띄우기 및 정렬 */
#fboardlist .mb40 .btn-group, 
#mj-board-btn-wrap .col, 
#bo_w .text-center {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
#mj-board-btn-wrap .col { justify-content: flex-end !important; }
#bo_w .text-center { justify-content: center !important; }

/* 4. 각 기능별 찰떡 컬러 지정 (자동 타겟팅) */
/* 관리자 (다크 네이비) */
.btn-group a[href*="adm"], #mj-board-btn-wrap a[href*="adm"] {
    background-color: #1e293b !important;
}
/* 글쓰기, 작성완료, 댓글등록 (민트 그린) */
.btn-group a[href*="write"], #mj-board-btn-wrap a[href*="write"], #btn_submit {
    background-color: #10b981 !important;
}
/* 수정 (블루) */
#mj-board-btn-wrap a[href*="w=u"] {
    background-color: #3b82f6 !important;
}
/* 삭제, 선택삭제 (레드) */
.btn-group button[value*="삭제"], #mj-board-btn-wrap a[onclick*="del"] {
    background-color: #ef4444 !important;
}
/* 답변, 스크랩, 선택복사, 선택이동, RSS (퍼플) */
#mj-board-btn-wrap a[href*="reply"], #mj-board-btn-wrap a[href*="scrap"], 
.btn-group button[value*="복사"], .btn-group button[value*="이동"], 
#mj-board-btn-wrap a[onclick*="board_move"], .btn-group a[href*="rss"] {
    background-color: #8b5cf6 !important;
}

/* ==================================================
   🔥 뷰어(상세페이지) 전체 UI 모던 리폼 프로젝트 🔥
================================================== */

/* 1. 상단 타이틀 & 작성자 정보 영역 감싸는 카드 박스 만들기 */
#mj-board-view-title-wrap {
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
    margin-bottom: 20px !important;
}
/* 제목 폰트 세련되게 키우기 */
#mj-board-view-title-wrap h2 span {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    letter-spacing: -0.5px !important;
}
/* 작성자 정보란 밑줄 지우고 깔끔하게 정리 */
#mj-board-view-title-wrap .row.mb30.pb10 {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 12px !important;
    color: #64748b !important;
    font-size: 0.9rem !important;
}

/* 2. 이전글 / 다음글 리스트 박스 모던하게 다듬기 (글씨 숨김 방지) */
.board-prev-next {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}
.board-prev-next .list-group {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
}
.board-prev-next .list-group-item {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 16px 20px !important;
    background-color: #ffffff !important;
}
.board-prev-next .list-group-item:last-child {
    border-bottom: none !important;
}
/* 🔥 이전글/다음글 제목 및 날짜 글씨 색상 강제 지정 (숨김 방지) 🔥 */
.board-prev-next a, 
.board-prev-next .list-group-item,
.board-prev-next span {
    color: #1e293b !important; /* 선명한 다크 네이비 글씨 */
    text-decoration: none !important;
    font-weight: 600 !important;
}
.board-prev-next a:hover {
    color: #3b82f6 !important; /* 마우스 올리면 파란색 */
}
.board-prev-next .b_date {
    color: #64748b !important; /* 날짜는 차분한 회색 */
    font-size: 0.85rem !important;
}

/* 3. 댓글 영역 (댓글(0) 타이틀 및 입력창) 현대적으로 개조 */
#mj-board-comment-wrap {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
    margin-top: 30px !important;
}
/* '댓글(0)' 제목 스타일 */
#mj-board-comment-wrap .h5, #mj-board-comment-wrap h2, #mj-board-comment-wrap p:has(> i) {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-bottom: 15px !important;
}
/* 댓글 입력 텍스트 영역 테두리 둥글게 */
#mj-board-comment-wrap textarea.form-control, 
#mj-board-comment-wrap .form-control {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    box-shadow: none !important;
}
#mj-board-comment-wrap textarea.form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* 댓글 등록 버튼 중앙 정렬 및 민트 그린 색상 적용 */
#mj-board-comment-wrap .text-center, 
#mj-board-comment-wrap div:has(> #btn_submit),
#mj-board-comment-wrap .btn_confirm {
    text-align: center !important;
    margin-top: 15px !important;
}
#mj-board-comment-wrap button[type="submit"], 
#mj-board-comment-wrap .btn-primary {
    background-color: #10b981 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1) !important;
}