.board-view {font-size:1rem}
.board-view .board-setup {position:relative;border:1px solid #d5d5d5;height:38px;margin-bottom:20px}
.board-view .board-setup .select {position:absolute;top:-1px;left:-1px;display:inline-block;width:200px}
.board-view .board-setup-btn-box {position:absolute;top:-1px;right:-1px;display:inline-block;width:420px}
.board-view .board-setup-btn {float:left;width:25%;height:38px;line-height:38px;color:#fff;text-align:center;font-size:.8125rem}
.board-view .board-setup-btn:nth-child(odd) {background-color:#000}
.board-view .board-setup-btn:nth-child(even) {background-color:#3c3c3e}
.board-view .board-setup-btn:hover {opacity:0.8}
.board-view .board-view-subj {font-size:1.125rem}
.board-view .board-view-info {
    display: flex !important;
    align-items: center;      /* 아이콘과 텍스트의 세로 중앙 정렬 */
    gap: 15px;                /* 아이콘과 텍스트 사이의 여유 공간 */
    position: relative;
    min-height: 70px;         /* 기존 높이 유지 */
    border-top: 2px solid #757575;
    border-bottom: 1px solid #757575;
    padding: 10px 15px;       /* 좌우 패딩을 주어 아이콘이 테두리에 붙지 않게 함 */
    margin-top: 20px;
    background: #fafafa;
}
.board-view .board-view-info .view-photo-box {
    position: static !important; 
    flex-shrink: 0;           /* 공간이 좁아져도 아이콘 크기 고정 */
    display: flex;
}
.board-view .board-view-info .view-info-box {
    position: relative;
    flex-grow: 1;             /* 남은 너비를 꽉 채움 */
    display: flex;
    flex-direction: column;   /* 닉네임과 날짜를 위아래로 배치 */
    justify-content: center;
    min-width: 0;             /* 텍스트가 길어질 경우 대비 */
}
.board-view .board-view-info .view-photo img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    border: 1px solid #ddd;
    object-fit: cover;
}
.board-view .board-view-info .view-photo .view-user-icon {
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    border-radius: 50%;
}
.board-view .board-view-info .view-photo .view-photo-initial {
    width: 50px !important;
    height: 50px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #e8edf2;
    border-radius: 50%;
    border: 1px solid #ddd;
    font-size: 18px;
    font-weight: 700;
    color: #7b8794;
    line-height: 1;
}
.board-view .board-view-info .view-photo .view-user-icon svg {
    width: 30px !important;
    height: 30px !important;
    stroke: #757575;
}
.board-view .board-view-info .info-box-top {display:block;margin:0 0 4px}
.board-view .board-view-info .info-box-top .view-nick {font-size:1rem;margin-right:3px}
.board-view .board-view-info .info-box-top .view-nick .sv_wrap > a {font-weight:400}
.board-view .view-dist {
    display:inline-block;padding:1px 5px;border-radius:3px;
    background:#fef3c7;color:#92400e;border:1px solid #fde68a;
    font-size:11px;margin-left:6px;vertical-align:middle;line-height:1.3;
    white-space:nowrap;font-weight:500;
}
.board-view .view-dist i {width:9px;height:9px;vertical-align:-1px}
.dark-mode .board-view .view-dist {background:#3b2d0a;color:#fbbf24;border-color:#78350f}
.dropdown-menu .btn-e,                                                                                                                                
.sv.dropdown-menu .btn-e-xs,                                                                                                                             
.sv.dropdown-menu button { border-radius: 0 !important; }   
.board-view .board-view-info .info-box-top .view-lv-icon {display:inline-block;margin-right:3px}
.board-view .board-view-info .info-box-bottom {display:block;margin-top:-5px}
.board-view .board-view-info .info-box-bottom span {margin-right:8px;font-size:.875rem;white-space:nowrap}
.board-view .board-view-info .info-box-bottom strong {font-weight:400}
.board-view .board-view-info .info-box-bottom i {color:#a5a5a5;margin-right:5px}
.board-view .board-view-info .status-label {position:absolute;top:20px;right:0}
.board-view .board-view-info .status-label .bl-label {display:inline-block;width:100px;height:30px;line-height:30px;font-size:.8125rem;text-align:center;color:#fff;background-color:#a5a5a5}
.board-view .bl-photo img {width:22px !important;height:22px !important;border-radius:5px;vertical-align:middle;}
.board-view .bl-photo.bl-photo-initial {width:22px;height:22px;border-radius:8px;background:#e8edf2;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.board-view .bl-photo-initial-char {font-size:11px;font-weight:700;color:#7b8794;line-height:1}
.board-view .board-view-file ul {margin-bottom:0}
.board-view .board-view-file li {font-size:.8125rem;padding:8px 0;border-bottom:1px solid #eaeaea}
.board-view .board-view-file a:hover {text-decoration:underline}
.board-view .board-view-file span {margin-left:7px}
.board-view .board-view-file span i {margin-right:4px;color:#b5b5b5}
.board-view .board-view-link ul {margin-bottom:0}
.board-view .board-view-link li {font-size:.8125rem;padding:8px 0;border-bottom:1px solid #eaeaea}
.board-view .board-view-link a {text-decoration:underline}
.board-view .board-view-link a:hover {color:#3949ab}
.board-view .board-view-star {font-size:.9375rem;position:relative;padding:8px 0;border-bottom:1px solid #eaeaea}
.board-view .board-view-star .star-line-row {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.board-view .board-view-star .star-ratings-view {display:inline-flex;align-items:center;margin-bottom:0;margin-right:15px;float:none}
.board-view .board-view-star .star-ratings-view li {padding:0;float:left;margin-right:0}
.board-view .board-view-star .star-ratings-view li .rating {color:#a5a5a5;line-height:normal}
.board-view .board-view-star .star-ratings-view li .rating-selected {color:#E95A8B}
.board-view .board-view-star .star-line-row .eyoom-form.hidden-xs {margin-left:auto}
.board-view .board-view-star .star-line-row .eyoom-form.hidden-xs .rating {display:inline-flex;align-items:center;float:none;width:auto;margin-top:0}
.board-view .board-view-star .star-line-row .eyoom-form.hidden-xs .rating label {margin:0 0 0 2px}
.board-view .board-view-star .star-line-row .eyoom-form.hidden-xs .rating strong {margin-right:8px;color:#E95A8B}
.board-view .board-view-star .star-line-row .eyoom-form.hidden-xs .rating,
.board-view .board-view-star .collapse-rating-panel .rating-mobile {direction:ltr}
.board-view .board-view-star .collapse-rating-result-panel {position:relative;border:1px solid #d5d5d5;background:#fff;padding:10px;margin:7px 0 3px}
.board-view .board-view-star .collapse-rating-result-panel > span:after {content:"|";margin:0 3px;color:#d5d5d5}
.board-view .board-view-star .collapse-rating-result-panel > span:last-child:after {display:none}
.board-view .board-view-star .collapse-rating-result-panel span a {color:#1f2937}
.board-view .board-view-star .collapse-rating-result-panel span.active .sv_wrap > a {color:#E95A8B}
.board-view .eyoom-form .rating {display:inline-block;float:left;width:160px;margin-top:0px}
.board-view .eyoom-form .rating label {margin-top:3px;margin-bottom:0}
.board-view .eyoom-form .rating strong {color:#E95A8B}
.board-view .eyoom-form .rating-mobile {position:absolute;top:10px;left:50%;display:inline-block;float:left;width:160px;margin-top:0;margin-left:-80px}
.board-view .eyoom-form .rating-mobile label {margin:0;width:32px;height:28px;line-height:28px;padding:0}
.board-view .eyoom-form .rating-mobile label .fas {font-size:26px}
.board-view .board-view-star .collapse-rating-panel .rating.rating-mobile {
    position:relative !important;top:auto !important;left:auto !important;
    margin-top:0 !important;
    float:none !important;width:100% !important;max-width:320px;
    margin-left:auto !important;margin-right:auto !important;
    min-height:44px;
    display:flex !important;flex-direction:row !important;
    justify-content:center;align-items:center;gap:2px;
    direction:ltr !important
}
.board-view .board-view-star .collapse-rating-panel .rating-mobile input {position:absolute;left:-9999px}
.board-view .board-view-star .collapse-rating-panel .rating-mobile label {float:none !important;display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:40px}
.board-view .board-view-star .collapse-rating-panel {position:relative;border:1px solid #d5d5d5;background:#fff;min-height:52px;height:auto;padding:8px 10px;margin:5px 0 10px}
.board-view .eyoom-form .rating label .fas,
.board-view .eyoom-form .rating-mobile label .fas {color:#a5a5a5}
.board-view .eyoom-form .rating label.is-on .fas,
.board-view .eyoom-form .rating-mobile label.is-on .fas {color:#E95A8B}
.board-view .eyoom-form .radio i {top:20px;left:-30px;}
.board-view .rating-mb-photo, .board-view .good-mb-photo {display:inline-block;margin-right:2px}
.board-view .rating-mb-photo img, .board-view .good-mb-photo img {width:17px;height:17px;border-radius:50%}
.board-view .rating-mb-photo .rating-user-icon, .board-view .good-mb-photo .good-user-icon {font-size:.9375rem}
.board-view .board-view-star .collapse-rating-mo-btn {display:inline-flex;align-items:center;gap:4px;background:#E95A8B;color:#fff !important;border-radius:999px;padding:4px 14px;font-size:.8rem;font-weight:600;text-decoration:none !important;white-space:nowrap;flex-shrink:0;margin:0}
.board-view .board-view-star .collapse-rating-mo-btn:hover {background:#c4508f;color:#fff !important}
.board-view .board-view-btn-wrap {border-bottom:1px solid #eaeaea}
.board-view .board-view-btn-wrap:after {content:"";display:block;clear:both}
.board-view .board-view-btn-left {float:left;font-weight:500}
.board-view .board-view-btn-right {float:right;font-weight:500}
.board-view .board-view-btn {position:relative;float:left;padding:0 15px;height:35px;line-height:35px;cursor:pointer;background:#fff;font-size:.8125rem;color:#1f2937;border-left:1px solid #eaeaea}
.board-view .board-view-btn:last-child {border-right:1px solid #eaeaea}
.board-view .board-view-btn:hover {color:#E95A8B}
.board-view .view-top-btn {padding:20px 0}
.board-view .view-top-btn:after {display:block;visibility:hidden;clear:both;content:""}
.board-view .view-top-btn .top-btn-left li {float:left;margin-right:1px;margin-bottom:5px}
.board-view .view-top-btn .top-btn-right li {float:left;margin-left:1px}
.board-view .board-view-atc {min-height:200px}
.board-view .board-view-atc-title {position:absolute;font-size:0;line-height:0;overflow:hidden}
.board-view .board-view-file-conts {position:relative;overflow:hidden}
.board-view .board-view-file-conts #bo_v_img img {display:block;max-width:100%;height:auto;margin-bottom:10px}
.board-view .board-view-con {position:relative;overflow:hidden;margin-bottom:20px;width:100%;word-wrap:break-word}
.board-view .board-view-con img {max-width:100%;height:auto}
/* ----------------------------------------------------- */
/* 1. 컨테이너 및 정렬 */
/* ----------------------------------------------------- */
.board-view .board-view-good-btn {
    margin-bottom: 30px;
    text-align: center;
    padding-top: 20px; /* 상단 여백 추가 */
}

.board-view .board-view-good-btn .board-view-act-gng {
    position: relative;
    margin: 0 15px; /* 버튼 간격 넓히기 */
    display: inline-block;
}

/* ----------------------------------------------------- */
/* 2. 메인 버튼 스타일 (둥근 원) */
/* ----------------------------------------------------- */
.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn {
    /* 크기 조정: 80px -> 64px */
    position: relative;
    overflow: hidden;
    width: 64px;
    height: 64px;
    
    /* [수정] 테두리 라인 추가 */
    border: 1px solid #d5d5d5; /* 연한 테두리 */
    background: linear-gradient(145deg, #ffffff, #f0f0f0); /* 부드러운 그라데이션 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), /* 아래 그림자 */
                0 1px 3px rgba(0, 0, 0, 0.08); /* 윗쪽 그림자 */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    
    /* 애니메이션 준비 */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover 효과: 버튼을 누르는 듯한 입체감 */
.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn:hover {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), /* 그림자 줄여서 눌리는 느낌 */
                0 0 1px rgba(0, 0, 0, 0.05);
    transform: translateY(1px); /* 살짝 아래로 내려가게 */
    /* [수정] 호버 시 테두리 색상 강조 */
    border-color: #00796B;
}

/* ----------------------------------------------------- */
/* 3. 아이콘 스타일 */
/* ----------------------------------------------------- */
.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn i {
    font-size: 20px;
    color: #555555;
    margin: 0;
    line-height: 1;
    transition: color 0.25s;
}

/* Hover 시 아이콘 색상 변경 (마스크가 덮을 경우 보이지 않을 수 있음) */
.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn:hover i {
    /* 마스크를 사용할 것이므로 이 부분은 주석 처리하거나 단순화합니다. */
    /* color: #00796B; */
}

/* ----------------------------------------------------- */
/* 4. 숫자 (카운트) 스타일 */
/* ----------------------------------------------------- */
.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn strong {
    font-size: 14px; /* 추천숫자 폰트 크기 증가 (11px -> 14px) */
    font-weight: 600;
    color: #888888;
    line-height: 1.2;
    margin-top: 4px;
    transition: color 0.25s;
}

/* Hover 시 숫자 색상 변경 (마스크를 사용할 것이므로 이 부분은 주석 처리하거나 단순화합니다.) */
.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn:hover strong {
    /* color: #00796B; */
}

/* ----------------------------------------------------- */
/* 5. [수정] 마스크/텍스트 오버레이 (Hover 시 '추천' 글자 표시) */
/* ----------------------------------------------------- */
.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background: #00796B; /* 청록색 배경 */
    opacity: 0; /* 초기에는 숨김 */
    transition: opacity 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn h5 {
    color: #fff; /* 흰색 글자 */
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin: 0;
    background: transparent;
    opacity: 0;
    transform: scale(0.8); /* 살짝 작게 시작 */
    transition: all 0.25s ease;
}

/* Hover 시 마스크와 텍스트 표시 */
.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn:hover .mask {
    opacity: 1;
}

.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn:hover h5 {
    opacity: 1;
    transform: scale(1); /* 텍스트 확대하며 나타나게 */
}


/* ----------------------------------------------------- */
/* 6. Disabled 상태 */
/* ----------------------------------------------------- */
.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn.disabled {
    cursor: default;
    opacity: 0.6;
}
.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn.disabled:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transform: none;
    border-color: #d5d5d5; /* 비활성화 상태에서는 테두리 색상 변화 없음 */
}
.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn.disabled:hover i {
    color: #555555;
}
.board-view .board-view-good-btn .board-view-act-gng .act-gng-btn.disabled:hover strong {
    color: #888888;
}

/* ----------------------------------------------------- */
/* 7. 성공 알림 텍스트는 그대로 유지 */
/* ----------------------------------------------------- */
.board-view .board-view-act-good,.board-view-act-nogood {
    display:none;
    position:absolute;
    top: 30px; /* 위치 조정 */
    left: 50%;
    transform: translateX(-50%); /* 중앙 정렬 */
    padding: 5px 15px;
    width: auto;
    background: #000;
    color: #fff;
    text-align: center;
    border-radius: 4px; /* 알림창도 둥글게 */
    z-index: 10;
}
.board-view .board-view-good-member {position:relative;background:#fff;border:1px solid #d5d5d5;padding:15px;margin-bottom:10px}
.board-view .board-view-good-member h5 {position:relative;text-align:center;font-size:1.0625rem;margin:0 0 20px}
.board-view .board-view-good-member h5:after {content:"";display:block;position:absolute;bottom:-10px;left:50%;width:20px;height:2px;margin-left:-10px;background:#3949ab}
.board-view .board-view-good-member > span:after {content:"|";margin:0 3px;color:#d5d5d5}
.board-view .board-view-good-member > span:last-child:after {display:none}
.board-view .board-view-good-member span a {color:#1f2937}
.board-view .board-view-bot {zoom:1}
.board-view .board-view-bot:after {display:block;visibility:hidden;clear:both;content:""}
.board-view .board-view-bot h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.board-view .board-view-bot ul {margin:0;padding:0;list-style:none}
.board-view .blind {display:none}
.board-view .map-content-wrap {width:100%;height:350px}
.board-view .map-content-wrap > div {width:100%;height:350px}
.board-view .board-view-tag {position:relative;overflow:hidden;background:#fafafa;border:1px solid #d5d5d5;padding:10px;margin-top:20px}
.board-view .board-view-tag span {display:inline-block;padding:2px 8px;line-height:1;margin:2px;background:#e5e5e5;border-radius:2px !important}
.board-view .board-view-tag a:hover span {background:#757575;color:#fff}
.board-view .board-view-tag .fa-tags {width:22px;height:16px;line-height:16px;text-align:center;color:#353535;margin-right:5px;box-sizing:content-box}
.board-view pre {border-radius:0}
.board-view .caption-overflow span {left:0;right:0}
.draggable {display:block;width:100% \9;max-width:100%;height:auto;margin:0 auto}
button.mfp-close {position:fixed;color:#fff !important}
.mfp-figure .mfp-close {position:absolute}
@media (max-width:576px) {
    .board-view {font-size:1rem}
    .board-view .board-view-info .status-label {position:relative;top:inherit;right:inherit;margin-top:10px}
    .board-view .board-view-info .info-box-top .view-nick {font-size:1rem;margin-left:5px}
}

/* ============================================================
   Modern Button Design 2025 — view.skin 전용 오버라이드
   ============================================================ */

/* ---- 닉네임/회원 정보 영역 ---- */
.board-view .board-view-info {
    position: relative;
    min-height: unset;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    background: #f8f9fa;
    padding: 12px 16px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* 정보 박스 */
.board-view .board-view-info .view-info-box {
    margin-left: 0 !important;
    flex: 1;
    min-width: 0;
}

/* 닉네임 */
.board-view .board-view-info .info-box-top {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}
.board-view .board-view-info .info-box-top .view-nick {
    font-size: 1rem;
    font-weight: 700;
    color: #222;
    margin-right: 0;
}
.board-view .board-view-info .info-box-top .view-nick .sv_wrap > a {
    font-weight: 700;
    color: #222;
}

/* 하단 메타 정보 */
.board-view .board-view-info .info-box-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
}
.board-view .board-view-info .info-box-bottom span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .8rem;
    color:#9ca3af;
    margin-right: 0;
    white-space: nowrap;
}
.board-view .board-view-info .info-box-bottom i {
    color:#9ca3af;
    margin-right: 0;
    font-size: .8rem;
}
.board-view .board-view-info .info-box-bottom strong {
    font-weight: 600;
}

/* 승인 상태 라벨 */
.board-view .board-view-info .status-label {
    position: static;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}
.board-view .board-view-info .status-label .bl-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 600;
    line-height: normal;
}

/* 모바일 */
@media (max-width: 576px) {
    .board-view .board-view-info { padding: 10px 12px; gap: 10px; }
    .board-view .board-view-info .info-box-top .view-nick { font-size: .9375rem; }
    .board-view .board-view-info .status-label { position: static; margin-top: 0; }
}

/* 본문 하단 신고·스크랩 버튼 */
.board-view .board-view-con-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 4px;
}
.board-view .bvca-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 10px;
    font-size: .75rem;
    font-weight: 500;
    border-radius: 13px;
    background: transparent;
    color: #777 !important;
    border: 1px solid #c4c4c4;
    cursor: pointer;
    text-decoration: none;
    transition: all .18s ease;
    white-space: nowrap;
}
.board-view .bvca-btn:hover {
    background: #f4f4f6;
    border-color: #bbb;
    color: #777 !important;
    text-decoration: none;
}
.board-view .bvca-btn.bvca-btn-report:hover {
    color: #c0392b !important;
    border-color: #e0b0b0;
    background: #fff5f5;
}

/* 버튼 바와 본문 사이 여백 */
.board-view .board-view-atc { padding-top: 0; }
.board-view .board-view-atc .board-view-file-conts.m-t-15 { margin-top: 0px !important; }

/* board-view-btn 버튼 바 레이아웃 */
.board-view .board-view-btn-wrap {
    border-bottom: none;
    padding: 8px 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.board-view .board-view-btn-left {
    display: flex;
    align-items: center;
    gap: 4px;
    float: none;
    margin: 0;
    padding: 0;
}
.board-view .board-view-btn-right {
    display: flex;
    align-items: center;
    gap: 4px;
    float: none;
    margin: 0 0 0 auto;
    padding: 0;
}

/* board-view-btn 공통 */
.board-view .board-view-btn {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 29px;
    padding: 0 12px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1.5px solid #d0d0d0;
    border-left: 1.5px solid #d0d0d0;
    border-radius: 15px;
    background: transparent;
    color:#8390a0 !important;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
    line-height: normal;
}
.board-view .board-view-btn:last-child { border-right: 1.5px solid #d0d0d0; }
.board-view .board-view-btn:hover {
    background: #f4f4f6;
    border-color: #aaa;
    color: #222 !important;
    transform: translateY(-1px);
    text-decoration: none;
}
.board-view .board-view-btn:active { transform: translateY(0) scale(.98); }

/* 삭제 버튼 */
.board-view .board-view-btn[onclick*="del"] {
    color: #c0392b !important;
    border-color: #e8b4b0;
}
.board-view .board-view-btn[onclick*="del"]:hover {
    background: #fff5f5;
    border-color: #c0392b;
    color: #c0392b !important;
}

/* 글쓰기 버튼 */
.board-view .board-view-btn.btn-e-deep-purple {
    background: linear-gradient(135deg, #2DAAB8 0%, #007a73 100%);
    color: #fff !important;
    border: none;
    box-shadow: 0 2px 10px rgba(0,162,154,.3);
}
.board-view .board-view-btn.btn-e-deep-purple:hover {
    background: linear-gradient(135deg, #2DAAB8 0%, #007a73 100%);
    box-shadow: 0 3px 10px rgba(0,162,154,.4);
    color: #fff !important;
    border: none;
}

/* 이전글·다음글 (btn-e-dark) */
.board-view .btn-e.btn-e-dark.board-view-btn {
    background: linear-gradient(135deg, #c5c9d0 0%, #adb2bb 100%);
    color:#8390a0 !important;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.board-view .btn-e.btn-e-dark.board-view-btn:hover {
    background: linear-gradient(135deg, #c5c9d0 0%, #adb2bb 100%);
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
    color:#9ca3af !important;
    border: none;
}

/* btn-e 공통 베이스 */
.board-view .btn-e {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
}
.board-view .btn-e:hover { transform: translateY(-1px); text-decoration: none; }
.board-view .btn-e:active { transform: translateY(0) scale(.98); }

/* 추천/비추천 회원보기 (btn-gray) */
.board-view .btn-e.btn-gray {
    height: 30px;
    padding: 0 13px;
    font-size: .8125rem;
    background: transparent;
    color:#8390a0 !important;
    border: 1.5px solid #d0d0d0;
    box-shadow: none;
}
.board-view .btn-e.btn-gray:hover {
    background: #f4f4f6;
    border-color: #aaa;
    color: #222 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* 프로필수정 (btn-e-gray) */
.board-view .btn-e.btn-e-gray {
    height: 26px;
    padding: 0 10px;
    font-size: .75rem;
    background: transparent;
    color:#8390a0 !important;
    border: 1.5px solid #c8c8c8;
    box-shadow: none;
}
.board-view .btn-e.btn-e-gray:hover {
    background: #f4f4f6;
    border-color: #999;
    color: #222 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* 별점평가하기 (btn-e-dark) */
.board-view .btn-e.btn-e-dark {
    height: 32px;
    padding: 0 14px;
    font-size: .8125rem;
    background: linear-gradient(135deg, #c5c9d0 0%, #adb2bb 100%);
    color:#8390a0 !important;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.board-view .btn-e.btn-e-dark:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
    color:#9ca3af !important;
}

/* 신고하기 (btn-e-lg btn-e-pink) */
.board-view .btn-e.btn-e-lg {
    height: 40px;
    padding: 0 22px;
    font-size: .9375rem;
    border-radius: 20px;
}
.board-view .btn-e.btn-e-pink {
    background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%);
    color: #fff !important;
    border: none;
    box-shadow: 0 2px 10px rgba(248,87,166,.3);
}
.board-view .btn-e.btn-e-pink:hover {
    box-shadow: 0 3px 10px rgba(248,87,166,.4);
    color: #fff !important;
}

/* 모바일 */
@media (max-width: 576px) {
    .board-view .board-view-btn-wrap { flex-wrap: wrap; gap: 6px; padding: 8px 0; }
    .board-view .board-view-btn { height: 30px; padding: 0 11px; font-size: .75rem; }
    .board-view .board-view-btn-left,
    .board-view .board-view-btn-right { gap: 3px; }
}

/* 다크모드 */
.dark-mode .board-view .board-view-btn {
    border-color: #3a4350;
    color:#9ca3af !important;
}
.dark-mode .board-view .board-view-btn:last-child { border-right-color: #3a4350; }
.dark-mode .board-view .board-view-btn:hover {
    background: #252d38;
    border-color: #4a535e;
    color:#ced4da !important;
}
.dark-mode .board-view .board-view-btn[onclick*="del"] {
    color: #e57373 !important;
    border-color: #5a2a2a;
}
.dark-mode .board-view .board-view-btn[onclick*="del"]:hover {
    background: #2d1a1a;
    border-color: #e57373;
    color: #e57373 !important;
}
.dark-mode .board-view .btn-e.btn-e-dark.board-view-btn {
    background: linear-gradient(135deg, #3a3f48 0%, #2e333b 100%);
    color:#9ca3af !important;
}
.dark-mode .board-view .btn-e.btn-e-dark.board-view-btn:hover {
    background: linear-gradient(135deg, #3a3f48 0%, #2e333b 100%);
    color:#ced4da !important;
}
.dark-mode .board-view .btn-e.btn-e-dark {
    background: linear-gradient(135deg, #3a3f48 0%, #2e333b 100%);
    color:#9ca3af !important;
}
.dark-mode .board-view .btn-e.btn-gray,
.dark-mode .board-view .btn-e.btn-e-gray {
    border-color: #3a4350;
    color:#9ca3af !important;
}
.dark-mode .board-view .btn-e.btn-gray:hover,
.dark-mode .board-view .btn-e.btn-e-gray:hover {
    background: #252d38;
    border-color: #4a535e;
    color:#ced4da !important;
}
/* 게시판 정보창 */
.dark-mode .board-view .board-view-info {
    background: #161b22;
    border-color: #30363d;
}

.dark-mode .board-view .board-view-info .view-photo .view-user-icon {
    background-color: #3a3f48;
}

.dark-mode .board-view .board-view-info .view-photo .view-user-icon svg {
    stroke: #abb2bf; /* 아이콘 선 색상 */
}
.dark-mode .board-view .board-view-info .view-photo .view-photo-initial {
    background: #3a3f48;
    border-color: #30363d;
    color: #b8c0cc;
}
.dark-mode .board-view .bl-photo.bl-photo-initial {
    background: #3a3f48;
}
.dark-mode .board-view .bl-photo-initial-char {
    color: #b8c0cc;
}

/* ── 음성 녹음 플레이어 ── */
.board-view-voice-player { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: linear-gradient(135deg,rgba(45,170,184,.06) 0%,rgba(45,170,184,.02) 100%); border: 1px solid rgba(45,170,184,.25); border-radius: 10px; margin: 14px 0; }
.board-view-voice-player .voice-label { display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: #2DAAB8; }
.board-view-voice-player audio { width: 100%; border-radius: 6px; }
.dark-mode .board-view-voice-player { background: rgba(45,170,184,.07); border-color: rgba(45,170,184,.3); }
.dark-mode .board-view-voice-player .voice-label { color: #2DAAB8; }