/* --- 1. 작성자 이름 및 상단 정보 수정 --- */
/* 다크모드에서 작성자 이름이 안 보이는 문제 해결 */
.sv_member, .nickname, #bo_v_info .profile_info strong {
    color: inherit !important;
}

/* 작성자 위 '이상한 페이지 정보' 제거 (보통 상단 네비바나 경로 정보) */
/* 사진상 나타나는 불필요한 텍스트 요소를 숨깁니다 */
.page_info_sh, .board_path, .sv_member + span[style*="display:none"] { 
    display: none !important; 
}

/* --- 2. 추천/비추천 버튼 시인성 개선 --- */
/* 다크모드에서 버튼 테두리와 글자가 잘 보이도록 수정 */
#bo_v_act .btn_b01, #bo_v_act .btn_b02 {
    border: 1px solid rgba(255,255,255,0.2) !important;
    background: rgba(128,128,128,0.1) !important;
    color: #fff !important;
    border-radius: 20px;
    padding: 10px 20px;
}
#bo_v_act strong { color: #ffeb3b !important; } /* 추천 숫자는 노란색으로 포인트 */

/* --- 3. 캡챠(Captcha) 다크모드 대응 --- */
/* 글쓰기 시 캡챠 입력창이 흰색으로 묻히는 현상 방지 */
#captcha_key {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    padding: 5px;
}
.captcha_box {
    background: #f9f9f9 !important;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* --- 4. 리스트 하단 페이지네이션 디자인 개선 --- */
/* 버튼 크기를 키우고 모바일에서도 누르기 편하게 수정 */
.pg_wrap {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 5px;
}
.pg_page, .pg_current {
    display: inline-block;
    width: 35px; /* 크기 확장 */
    height: 35px;
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.2s;
}
.pg_page {
    background: rgba(128, 128, 128, 0.1);
    color: inherit;
}
.pg_current {
    background: #ff0000; /* 유튜브 레드 포인트 */
    color: #fff !important;
}
.pg_page:hover {
    background: rgba(128, 128, 128, 0.3);
}

/* 모바일 대응: 페이지 번호가 너무 많을 때 줄바꿈 방지 */
@media (max-width: 768px) {
    .pg_wrap { flex-wrap: wrap; }
    .pg_page, .pg_current { width: 32px; height: 32px; line-height: 32px; font-size: 14px; }
}
/* --- 아래 코드를 style.css 맨 하단에 추가하세요 --- */

/* 1. 작성자 이름 글자색 (다크모드 대응) */
.sv_member, .nickname, #bo_v_info .profile_info strong {
    color: inherit !important;
}

/* 2. 작성자 위 불필요한 정보 숨기기 */
.board_path, .page_info_sh {
    display: none !important;
}

/* 3. 추천/비추천 버튼 배경색 및 글자색 보정 */
#bo_v_act .btn_b01, #bo_v_act .btn_b02 {
    background: #555 !important;
    color: #fff !important;
    border: 1px solid #777 !important;
    padding: 0 15px !important;
    height: 35px !important;
    line-height: 33px !important;
    display: inline-block !important;
}

/* 4. 캡챠 입력창 (흰 배경 고정) */
#captcha_key {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
}

/* 5. 하단 페이지 번호 버튼 디자인 */
.pg_wrap {
    margin: 30px 0 !important;
    text-align: center !important;
    display: block !important; /* 레이아웃 붕괴 방지 */
}
.pg_page, .pg_current {
    display: inline-block !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    margin: 2px !important;
    background: #444 !important;
    color: #fff !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-size: 14px !important;
}
.pg_current {
    background: #ff0000 !important; /* 현재 페이지 빨간색 */
}
/* --- 추가 끝 --- */
/* --- 댓글 영역 레이아웃 초기화 및 보정 --- */
#bo_vc {
    margin: 30px 0;
    padding: 0 10px;
    clear: both; /* 레이아웃 꼬임 방지 */
}

/* 댓글 목록 간격 및 다크모드 대응 */
.vc_nav { 
    color: inherit !important; 
    margin-bottom: 15px;
}

#bo_vc article {
    border-bottom: 1px solid rgba(128,128,128,0.1) !important;
    padding: 15px 0 !important;
    background: transparent !important;
}

/* 댓글 입력창 (Textarea) 디자인 */
#wr_content {
    width: 100% !important;
    background: rgba(128,128,128,0.05) !important;
    color: inherit !important;
    border: 1px solid rgba(128,128,128,0.2) !important;
    border-radius: 8px;
    padding: 15px;
    min-height: 100px;
    box-sizing: border-box;
}

/* 댓글 등록 버튼 유튜브 스타일 */
#bo_vc_w .btn_submit {
    float: right;
    margin-top: 10px;
    padding: 0 20px;
    height: 40px;
    background: #ff0000 !important; /* 유튜브 레드 */
    color: #fff !important;
    border: none !important;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
}

/* 캡챠가 댓글창에서도 깨질 경우를 대비 */
#bo_vc_w #captcha_key {
    background: #fff !important;
    color: #000 !important;
}

/* 모바일에서 버튼이 밀리는 현상 방지 */
@media (max-width: 768px) {
    #bo_vc_w .btn_submit { width: 100%; float: none; margin-top: 5px; }
}
/* --- 여기서부터 복사하세요 --- */

/* 1. 작성자 이름: 다크모드에서 잘 보이게 */
.sv_member, .nickname, #bo_v_info .profile_info strong {
    color: inherit !important;
}

/* 2. 상단 이상한 정보 숨기기 */
.board_path, .page_info_sh {
    display: none !important;
}

/* 3. 추천/비추천 버튼: 다크모드 대응 */
#bo_v_act .btn_b01, #bo_v_act .btn_b02 {
    background: #444 !important;
    color: #fff !important;
    border: 1px solid #666 !important;
    border-radius: 20px !important;
    padding: 0 15px !important;
    display: inline-block !important;
    height: 35px !important;
    line-height: 33px !important;
}

/* 4. 캡챠: 글쓰기 시 입력창 흰색 고정 */
#captcha_key {
    background-color: #ffffff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
}

/* 5. 리스트 하단 페이지 번호: 크게 만들기 (댓글창 영향 안 주게 수정) */
#bo_list .pg_wrap {
    display: flex !important;
    justify-content: center !important;
    margin: 30px 0 !important;
    gap: 5px !important;
}
#bo_list .pg_page, #bo_list .pg_current {
    display: inline-block !important;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    text-align: center !important;
    background: #333 !important;
    color: #fff !important;
    border-radius: 6px !important;
    text-decoration: none !important;
}
#bo_list .pg_current {
    background: #ff0000 !important;
}

/* 6. 댓글창 틀어짐 방지용 초기화 */
#bo_vc_w {
    clear: both !important;
    display: block !important;
    padding-top: 20px !important;
}
/* --- 여기까지 복사하세요 --- */
/* 1. 상단 제목 및 정보 영역 정리 */
#bo_v_title {
    margin: 10px 0 20px;
    padding: 0 0 15px;
    border-bottom: 1px solid rgba(128,128,128,0.2);
}
#bo_v_title .bo_v_subject {
    font-size: 1.4em !important;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    line-height: 1.4;
}

/* 2. 작성자, 날짜 등 정보를 한 줄로 깔끔하게 */
#bo_v_info {
    font-size: 0.9em;
    color: #888 !important;
    border: none !important;
    padding: 0 !important;
}
#bo_v_info span {
    margin-right: 15px;
    display: inline-block;
}

/* 3. 수정, 삭제, 목록 버튼 (펼쳐짐 방지 및 우측 정렬) */
#bo_v_top {
    text-align: right;
    margin: 20px 0;
    border-top: 1px solid rgba(128,128,128,0.1);
    padding-top: 15px;
}
.bo_v_com {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex; /* 버튼들을 가로로 정렬 */
    gap: 5px; /* 버튼 사이 간격 */
}
.bo_v_com li {
    display: inline-block;
}
.bo_v_com a, .bo_v_com input {
    display: inline-block !important;
    height: 35px !important;
    line-height: 33px !important;
    padding: 0 15px !important;
    border: 1px solid rgba(128,128,128,0.3) !important;
    background: rgba(128,128,128,0.05) !important;
    color: inherit !important;
    border-radius: 4px;
    font-size: 13px !important;
    text-decoration: none;
}

/* 4. 영상과 제목 사이 불필요한 여백/이상한 텍스트 제거 */
#bo_v_atc {
    padding-top: 10px;
}
/* 1. 게시글 상단 버튼 (수정, 삭제, 목록) 정렬 */
.bo_v_com {
    display: flex !important;
    justify-content: flex-end !important; /* 오른쪽 정렬 */
    align-items: center;
    gap: 8px; /* 버튼 사이 간격 */
    margin: 15px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.bo_v_com li {
    display: inline-block !important;
    margin: 0 !important;
}

.bo_v_com a, .bo_v_com .btn_b01, .bo_v_com .btn_b02 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 32px !important; /* 높이 통일 */
    padding: 0 12px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    white-space: nowrap;
}

/* 2. 댓글 입력창 하단 (이름, 비번, 캡챠, 등록버튼) 균형 잡기 */
#bo_vc_w .bo_vc_w_info {
    display: flex !important;
    flex-wrap: wrap; /* 모바일 대응 */
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
}

/* 이름, 비번, 캡챠 입력창 크기 및 높이 통일 */
#bo_vc_w .form-control, 
#bo_vc_w input[type="text"], 
#bo_vc_w input[type="password"] {
    flex: 1; /* 동일한 비율로 확장 */
    min-width: 100px;
    height: 40px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(128,128,128,0.3) !important;
    background: rgba(128,128,128,0.05) !important;
    color: inherit !important;
    border-radius: 5px;
    box-sizing: border-box;
}

/* 캡챠 이미지와 입력칸 정렬 */
#captcha_key {
    height: 40px !important;
    flex: 1.2 !important; /* 캡챠는 조금 더 넓게 */
}

.captcha_box {
    display: flex !important;
    align-items: center;
    gap: 5px;
    flex: 2; /* 캡챠 영역 전체 비중 */
}

/* 3. 댓글 등록 버튼 (유튜브 스타일 레드) */
#bo_vc_w .btn_submit {
    height: 40px !important;
    padding: 0 25px !important;
    background: #ff0000 !important; /* 유튜브 레드 */
    border: none !important;
    color: #fff !important;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.2s;
}

/* 4. 모바일 최적화 (768px 이하) */
@media (max-width: 768px) {
    .bo_v_com {
        justify-content: center !important; /* 모바일은 중앙 정렬 */
        width: 100%;
    }
    
    #bo_vc_w .bo_vc_w_info {
        flex-direction: column; /* 세로로 쌓기 */
    }
    
    #bo_vc_w .form-control, 
    #bo_vc_w input[type="text"], 
    #bo_vc_w input[type="password"],
    .captcha_box,
    #bo_vc_w .btn_submit {
        width: 100% !important; /* 전체 너비 사용 */
        flex: none !important;
    }
}
/* 1. 추천/비추천 버튼: 크기 확대 및 다크모드 강조 */
#bo_v_act {
    margin: 40px 0 !important;
    display: flex !important;
    justify-content: center;
    gap: 15px;
}
#bo_v_act .btn_b01, #bo_v_act .btn_b02 {
    width: auto !important;
    min-width: 100px;
    height: 45px !important; /* 크기 키움 */
    line-height: 43px !important;
    border-radius: 25px !important; /* 둥근 버튼 */
    font-size: 15px !important;
    font-weight: bold !important;
    border: 1px solid rgba(128,128,128,0.3) !important;
    background: rgba(128,128,128,0.1) !important;
    color: inherit !important;
}
#bo_v_act strong {
    color: #ffeb3b !important; /* 숫자는 밝은 노랑 */
    font-size: 16px;
    margin-left: 5px;
}

/* 2. 상단 우측 버튼(수정, 삭제) 붕뜸 방지 및 정렬 */
.bo_v_com {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
    gap: 6px;
    margin: 20px 0 !important;
}
.bo_v_com li a, .bo_v_com li button, .bo_v_com li input {
    height: 34px !important;
    line-height: 32px !important;
    padding: 0 15px !important;
    background: rgba(128,128,128,0.1) !important;
    border: 1px solid rgba(128,128,128,0.2) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    color: inherit !important;
    display: inline-flex !important;
    align-items: center;
}

/* 3. 댓글창 하단 (이름/비번/캡챠) 수평 균형 정렬 */
#bo_vc_w .bo_vc_w_info {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}
#bo_vc_w .bo_vc_w_info input[type="text"], 
#bo_vc_w .bo_vc_w_info input[type="password"] {
    flex: 1; /* 가로로 균등 배분 */
    height: 45px !important; /* 높이 통일 */
    border: 1px solid rgba(128,128,128,0.3) !important;
    background: rgba(128,128,128,0.05) !important;
    color: inherit !important;
    padding: 0 15px !important;
    border-radius: 6px;
}

/* 캡챠 영역 높이 맞춤 */
.captcha_box {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex: 1.5; /* 캡챠는 조금 더 넓게 */
}
#captcha_img {
    height: 45px !important; /* 캡챠 이미지 높이 고정 */
    width: auto;
    border-radius: 4px;
}
#captcha_key {
    height: 45px !important;
    flex: 1;
    background: #fff !important; /* 캡챠 입력창은 흰색 고정 (다크모드 시인성) */
    color: #000 !important;
}

/* 댓글 등록 버튼 (유튜브 레드) */
#bo_vc_w .btn_submit {
    height: 45px !important;
    padding: 0 30px !important;
    background: #ff0000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

/* 4. 모바일 최적화 (768px 이하) */
@media (max-width: 768px) {
    #bo_vc_w .bo_vc_w_info {
        flex-direction: column; /* 모바일은 세로로 */
    }
    .captcha_box {
        width: 100%;
    }
    #bo_vc_w .btn_submit {
        width: 100%; /* 모바일은 등록버튼 꽉 차게 */
    }
    #bo_v_act .btn_b01, #bo_v_act .btn_b02 {
        min-width: 80px;
        font-size: 13px;
    }
}
/* 캡챠 입력 영역 최적화 */
#captcha_box {
    background: rgba(128, 128, 128, 0.05);
    padding: 10px;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center;
}

#captcha_key {
    border-radius: 4px !important;
}

/* 댓글 입력창 버튼과 텍스트 영역 조절 */
.bo_vc_w textarea {
    border: 1px solid rgba(128,128,128,0.3) !important;
    background: rgba(128,128,128,0.05) !important;
    color: inherit !important;
    border-radius: 6px !important;
}

/* 댓글 버튼이 너무 커지지 않게 조절 */
.btn_confirm {
    height: 45px !important;
    border-radius: 6px !important;
}
/* 댓글 영역 캡차 이미지와 입력창 반응형 수정 */
#captcha {
    display: flex;
    flex-wrap: wrap; /* 너비가 부족하면 다음 줄로 넘김 */
    gap: 5px; /* 이미지와 입력창 사이 간격 */
    max-width: 100%; /* 부모 너비를 넘지 않도록 설정 */
}

#captcha img {
    max-width: 120px; /* 캡차 이미지 크기 제한 */
    height: auto;
}

#captcha_key {
    flex: 1; /* 남는 공간을 입력창이 채우도록 함 */
    min-width: 100px; /* 너무 작아지지 않게 최소 너비 설정 */
    width: 100% !important; /* 모바일에서 한 줄을 다 쓰게 하고 싶다면 이 설정 사용 */
}
/* 댓글 영역 캡차 이미지와 입력창 반응형 수정 */
#captcha {
    display: flex;
    flex-wrap: wrap; /* 너비가 부족하면 다음 줄로 넘김 */
    gap: 5px; /* 이미지와 입력창 사이 간격 */
    max-width: 100%; /* 부모 너비를 넘지 않도록 설정 */
}

#captcha img {
    max-width: 120px; /* 캡차 이미지 크기 제한 */
    height: auto;
}

#captcha_key {
    flex: 1; /* 남는 공간을 입력창이 채우도록 함 */
    min-width: 100px; /* 너무 작아지지 않게 최소 너비 설정 */
    width: 100% !important; /* 모바일에서 한 줄을 다 쓰게 하고 싶다면 이 설정 사용 */
}