@charset "utf-8";

/**
 * 게시판 스킨 - basic (Clean Portal)
 *
 * --gb-* CSS 변수 기반, 글로벌 오버라이드 금지
 * 스킨 전용 접두사: bo-list-*, bo-view-*, bo-write-*, bo-comment-*
 *
 * @version 20260301-002
 */

/* ============================================
   목록 (bo-list)
   ============================================ */

#bo_list {
    background: var(--gb-surface-card);
}

/* 카테고리 필 탭 */
.bo-list-category {
    padding: var(--gb-space-4) var(--gb-space-4) 0;
}

.bo-list-category .bo-cate-link {
    display: inline-block;
    padding: var(--gb-space-1) var(--gb-space-3);
    border-radius: 9999px;
    font-size: var(--gb-font-sm);
    font-weight: var(--gb-font-medium);
    color: var(--gb-gray-600);
    background: var(--gb-gray-100);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.bo-list-category .bo-cate-link:hover {
    color: var(--gb-primary);
    background: var(--gb-primary-light);
    border-color: var(--gb-primary);
}

.bo-list-category .bo-cate-link.active {
    color: var(--gb-text-on-primary);
    background: var(--gb-primary);
}

/* 헤더 바 (건수 + 버튼) */
.bo-list-header {
    padding: var(--gb-space-3) var(--gb-space-4);
}

.bo-list-header .bo-list-info {
    font-size: var(--gb-font-sm);
    color: var(--gb-gray-500);
}

.bo-list-header .bo-list-info strong {
    color: var(--gb-gray-800);
    font-weight: var(--gb-font-semibold);
}

/* 버튼 컴팩트 */
#bo_list .btn-sm,
#bo_v .btn-sm {
    padding: 0.2rem 0.5rem;
    font-size: var(--gb-font-xs);
}

/* 하단 액션 + 페이징 (레이어 겹침) */
.bo-list-footer {
    display: grid;
    grid-template: 1fr / 1fr;
    align-items: center;
    padding: var(--gb-space-5) var(--gb-space-4);
    border-top: 1px solid var(--gb-gray-100);
}

.bo-list-footer-actions,
.bo-list-paging {
    grid-row: 1;
    grid-column: 1;
}

.bo-list-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}

.bo-list-footer-actions > * {
    pointer-events: auto;
}

.bo-list-paging {
    display: flex;
    justify-content: center;
    align-items: center;
}

#bo_list .bo-pg-btn {
    min-width: 1.75rem;
    height: 1.75rem;
    font-size: var(--gb-font-xs);
    border-radius: 6px;
}

/* 검색 블록 */
.bo-list-footer-search {
    padding: var(--gb-space-6) var(--gb-space-4);
    background: var(--gb-gray-50);
    border-top: 1px solid var(--gb-gray-100);
}

.bo-list-footer-search .input-group {
    max-width: 420px;
    margin: 0 auto;
}

.bo-list-footer-search .form-select,
.bo-list-footer-search .form-control {
    font-size: var(--gb-font-sm);
    padding: 0.3rem 0.6rem;
}

.bo-list-footer-search .btn {
    font-size: var(--gb-font-sm);
    padding: 0.3rem 0.75rem;
}

/* 테이블 컬럼 너비 */
#bo_list .bo-col-chk { width: 50px; }
#bo_list .bo-col-num { width: 70px; }
#bo_list .bo-col-name { width: 100px; }
#bo_list .bo-col-hit { width: 70px; }
#bo_list .bo-col-good { width: 70px; }
#bo_list .bo-col-date { width: 100px; }

/* 답글 들여쓰기 (CSS 변수) */
#bo_list .bo-list-table td[style*="--bo-reply-depth"] {
    padding-left: var(--bo-reply-depth, 0px);
}

/* 검색 필드 너비 */
.bo-list-footer-search .bo-search-field {
    max-width: 140px;
}

/* 댓글 대댓글 들여쓰기 (CSS 변수) */
.bo-comment-item[style*="--bo-cmt-depth"] {
    margin-left: var(--bo-cmt-depth, 0px);
}

/* 뷰 메타 댓글 링크 */
.bo-view-comment-link {
    color: inherit;
    text-decoration: none;
}

/* 테이블 */
#bo_list .table-responsive {
    overflow: visible;
}

#bo_list .bo-list-table {
    font-size: var(--gb-font-sm);
    margin-bottom: 0;
}

#bo_list .bo-list-table thead th {
    font-weight: var(--gb-font-semibold);
    font-size: var(--gb-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gb-gray-500);
    padding: var(--gb-space-3) var(--gb-space-3);
    border-bottom: 2px solid var(--gb-gray-200);
    background: var(--gb-gray-50);
    white-space: nowrap;
}

#bo_list .bo-list-table tbody td {
    padding: var(--gb-space-3) var(--gb-space-3);
    vertical-align: middle;
    color: var(--gb-gray-700);
    border-bottom: 1px solid var(--gb-gray-100);
}

#bo_list .bo-list-table tbody tr {
    transition: background-color 0.15s ease;
}

#bo_list .bo-list-table tbody tr:hover {
    background-color: var(--gb-gray-50);
}

/* 공지행 */
#bo_list .bo-list-table .bo-notice-row {
    background-color: var(--gb-primary-light);
    border-left: 2px solid var(--gb-primary);
}

#bo_list .bo-list-table .bo-notice-row:hover {
    background-color: var(--gb-primary-light);
}

/* 제목 링크 */
#bo_list .bo-subject-link {
    color: var(--gb-gray-800);
    text-decoration: none;
    font-weight: var(--gb-font-medium);
    transition: color 0.15s ease;
}

#bo_list .bo-subject-link:hover {
    color: var(--gb-primary);
}

/* 뱃지 */
#bo_list .bo-badge-new {
    display: inline-block;
    padding: 1px 5px;
    font-size: 0.625rem;
    font-weight: var(--gb-font-bold);
    color: var(--gb-text-on-primary);
    background: var(--gb-danger);
    border-radius: 3px;
    line-height: 1.4;
    vertical-align: middle;
}

#bo_list .bo-badge-comment {
    display: inline-block;
    padding: 1px 5px;
    font-size: 0.625rem;
    font-weight: var(--gb-font-semibold);
    color: var(--gb-text-on-primary);
    background: var(--gb-primary);
    border-radius: 3px;
    line-height: 1.4;
    vertical-align: middle;
}

#bo_list .bo-badge-notice {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.625rem;
    font-weight: var(--gb-font-bold);
    color: var(--gb-text-on-primary);
    background: var(--gb-primary);
    border-radius: 3px;
}

#bo_list .bo-badge-reading {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.625rem;
    font-weight: var(--gb-font-semibold);
    color: var(--gb-primary);
    background: var(--gb-primary-light);
    border: 1px solid var(--gb-primary);
    border-radius: 3px;
}

#bo_list .bo-cate-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: var(--gb-font-xs);
    font-weight: var(--gb-font-medium);
    color: var(--gb-gray-500);
    background: var(--gb-gray-100);
    border-radius: 3px;
    text-decoration: none;
    transition: color 0.15s ease;
}

#bo_list .bo-cate-badge:hover {
    color: var(--gb-primary);
}

/* 모바일 서브라인 */
#bo_list .bo-mobile-meta {
    font-size: var(--gb-font-xs);
    color: var(--gb-gray-400);
    margin-top: var(--gb-space-1);
}

/* 빈 목록 */
#bo_list .bo-empty-row td {
    padding: var(--gb-space-8) var(--gb-space-4);
    color: var(--gb-gray-400);
}


/* ============================================
   글보기 (bo-view)
   ============================================ */

#bo_v {
    background: var(--gb-surface-card);
}

/* 제목 영역 */
.bo-view-title {
    padding: var(--gb-space-6) var(--gb-space-6) var(--gb-space-4);
}

.bo-view-title h2 {
    font-size: var(--gb-font-2xl);
    font-weight: var(--gb-font-bold);
    color: var(--gb-gray-900);
    line-height: var(--gb-leading-tight);
    margin: 0;
}

.bo-view-title .bo-cate-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--gb-font-xs);
    font-weight: var(--gb-font-medium);
    color: var(--gb-primary);
    background: var(--gb-primary-light);
    border-radius: 3px;
    margin-bottom: var(--gb-space-2);
}

/* 작성자 메타 바 */
.bo-view-meta {
    padding: var(--gb-space-3) var(--gb-space-6);
    border-top: 1px solid var(--gb-gray-100);
    border-bottom: 1px solid var(--gb-gray-100);
    background: var(--gb-gray-50);
}

/* 작성자명+IP flex 정렬 (크로스 브라우저) */
.bo-author-line {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.bo-view-meta .bo-author-name,
.bo-view-meta .bo-meta-info {
    font-size: var(--gb-font-sm);
    line-height: var(--gb-leading-normal);
}

.bo-view-meta .bo-author-name {
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-800);
}

.bo-view-meta .bo-meta-info {
    color: var(--gb-gray-500);
}

.bo-view-meta .bo-meta-info i {
    width: 1rem;
    text-align: center;
    color: var(--gb-gray-400);
}

/* 본문 */
.bo-view-body {
    padding: var(--gb-space-6);
    line-height: var(--gb-leading-relaxed);
    color: var(--gb-gray-800);
    word-break: break-word;
}

.bo-view-body img {
    max-width: 100%;
    height: auto;
}

/* 서명 */
.bo-view-signature {
    margin-top: var(--gb-space-6);
    padding-top: var(--gb-space-4);
    border-top: 1px solid var(--gb-gray-100);
    font-size: var(--gb-font-sm);
    color: var(--gb-gray-400);
}

/* 추천/비추천 */
.bo-view-vote {
    padding: var(--gb-space-6);
    text-align: center;
    border-top: 1px solid var(--gb-gray-100);
}

.bo-view-vote .bo-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gb-space-2);
    padding: var(--gb-space-2) var(--gb-space-6);
    border-radius: 9999px;
    font-size: var(--gb-font-sm);
    font-weight: var(--gb-font-medium);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid;
}

.bo-view-vote .bo-vote-good {
    color: var(--gb-success);
    border-color: var(--gb-success);
    background: transparent;
}

.bo-view-vote .bo-vote-good:hover {
    color: var(--gb-text-on-primary);
    background: var(--gb-success);
    transform: translateY(-1px);
}

.bo-view-vote .bo-vote-nogood {
    color: var(--gb-danger);
    border-color: var(--gb-danger);
    background: transparent;
}

.bo-view-vote .bo-vote-nogood:hover {
    color: var(--gb-text-on-primary);
    background: var(--gb-danger);
    transform: translateY(-1px);
}

.bo-view-vote .bo-vote-count {
    color: var(--gb-gray-500);
    font-size: var(--gb-font-sm);
}

.bo-view-vote .bo-vote-count-only span {
    color: var(--gb-gray-500);
    font-size: var(--gb-font-sm);
}

/* 첨부파일 */
.bo-view-attach {
    padding: var(--gb-space-4) var(--gb-space-6);
    border-top: 1px solid var(--gb-gray-100);
}

.bo-view-attach h3 {
    font-size: var(--gb-font-sm);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-700);
    margin-bottom: var(--gb-space-3);
}

.bo-view-attach .bo-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gb-space-3);
    border-radius: 6px;
    text-decoration: none;
    color: var(--gb-gray-700);
    transition: all 0.15s ease;
    border: 1px solid var(--gb-gray-100);
    margin-bottom: var(--gb-space-2);
}

.bo-view-attach .bo-file-item:hover {
    background: var(--gb-gray-50);
    border-color: var(--gb-primary);
    color: var(--gb-primary);
}

.bo-view-attach .bo-file-item .bo-file-name {
    font-weight: var(--gb-font-medium);
}

.bo-view-attach .bo-file-item .bo-file-info {
    font-size: var(--gb-font-xs);
    color: var(--gb-gray-400);
}

/* 관련링크 */
.bo-view-link {
    padding: var(--gb-space-4) var(--gb-space-6);
    border-top: 1px solid var(--gb-gray-100);
}

.bo-view-link h3 {
    font-size: var(--gb-font-sm);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-700);
    margin-bottom: var(--gb-space-3);
}

.bo-view-link .bo-link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gb-space-3);
    border-radius: 6px;
    text-decoration: none;
    color: var(--gb-primary);
    transition: all 0.15s ease;
    border: 1px solid var(--gb-gray-100);
    margin-bottom: var(--gb-space-2);
}

.bo-view-link .bo-link-item:hover {
    background: var(--gb-primary-light);
    border-color: var(--gb-primary);
}

.bo-view-link .bo-link-item .bo-link-hit {
    font-size: var(--gb-font-xs);
    color: var(--gb-gray-400);
}

/* 이전/다음글 */
.bo-view-nav {
    border-top: 1px solid var(--gb-gray-100);
}

.bo-view-nav .bo-nav-item {
    display: flex;
    align-items: center;
    gap: var(--gb-space-3);
    padding: var(--gb-space-3) var(--gb-space-6);
    text-decoration: none;
    color: var(--gb-gray-700);
    transition: all 0.15s ease;
    border-bottom: 1px solid var(--gb-gray-100);
}

.bo-view-nav .bo-nav-item:last-child {
    border-bottom: none;
}

.bo-view-nav .bo-nav-item:hover {
    background: var(--gb-gray-50);
    color: var(--gb-primary);
}

.bo-view-nav .bo-nav-item:hover .bo-nav-arrow {
    color: var(--gb-primary);
}

.bo-view-nav .bo-nav-arrow {
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
    color: var(--gb-gray-400);
    transition: transform 0.15s ease, color 0.15s ease;
}

.bo-view-nav .bo-nav-item:hover .bo-nav-arrow.bo-prev {
    transform: translateY(-2px);
}

.bo-view-nav .bo-nav-item:hover .bo-nav-arrow.bo-next {
    transform: translateY(2px);
}

.bo-view-nav .bo-nav-label {
    font-size: var(--gb-font-xs);
    color: var(--gb-gray-400);
    font-weight: var(--gb-font-medium);
    min-width: 3rem;
}

.bo-view-nav .bo-nav-subject {
    flex: 1;
    font-size: var(--gb-font-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-view-nav .bo-nav-date {
    font-size: var(--gb-font-xs);
    color: var(--gb-gray-400);
    flex-shrink: 0;
}

/* SNS/스크랩 바 */
.bo-view-sns {
    padding: var(--gb-space-3) var(--gb-space-6);
    border-top: 1px solid var(--gb-gray-100);
}

.bo-sns-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.bo-sns-label {
    font-size: var(--gb-font-xs);
    color: var(--gb-gray-400);
    font-weight: var(--gb-font-medium);
    margin-right: var(--gb-space-1);
    letter-spacing: 0.02em;
}

.bo-sns-divider {
    width: 1px;
    height: 20px;
    background: var(--gb-gray-200);
    margin: 0 4px;
}

/* 공유 버튼 공통 */
.bo-sns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--gb-gray-200);
    background: var(--gb-surface-card);
    color: var(--gb-gray-500);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.bo-sns-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--gb-shadow-md);
}

/* 브랜드별 호버 색상 */
.bo-sns-facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: var(--gb-text-on-primary);
}

.bo-sns-twitter:hover {
    background: #000;
    border-color: #000;
    color: var(--gb-text-on-primary);
}

.bo-sns-kakao:hover {
    background: #fee500;
    border-color: #fee500;
    color: #3c1e1e;
}

.bo-sns-copy:hover {
    background: var(--gb-primary);
    border-color: var(--gb-primary);
    color: var(--gb-text-on-primary);
}

/* URL 복사 완료 상태 */
.bo-sns-copied {
    background: var(--gb-success) !important;
    border-color: var(--gb-success) !important;
    color: var(--gb-text-on-primary) !important;
    transform: scale(1.1);
}

/* 스크랩 버튼 */
.bo-sns-scrap:hover {
    background: var(--gb-warning);
    border-color: var(--gb-warning);
    color: var(--gb-text-on-primary);
}

/* 댓글 SNS 배지 (댓글 목록 인라인) */
.bo-sns-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 9px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.bo-sns-badge:hover {
    opacity: 0.8;
}

.bo-sns-badge-facebook {
    background: #1877f2;
    color: var(--gb-text-on-primary);
}

.bo-sns-badge-twitter {
    background: #000;
    color: var(--gb-text-on-primary);
}

/* 댓글 작성 SNS 동시등록 */
.bo-sns-register {
    display: flex;
    align-items: center;
    gap: var(--gb-space-3);
}

.bo-sns-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--gb-font-sm);
    color: var(--gb-gray-600);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid var(--gb-gray-200);
    background: var(--gb-surface-card);
    transition: all 0.2s ease;
}

.bo-sns-check:hover {
    border-color: var(--gb-gray-300);
    background: var(--gb-gray-50);
}

.bo-sns-check .form-check-input {
    margin: 0;
}

.bo-sns-check i {
    font-size: 13px;
}

.bo-sns-check span {
    font-size: var(--gb-font-xs);
    font-weight: var(--gb-font-medium);
}

.bo-sns-check-off {
    opacity: 0.5;
}

/* 하단 버튼 */
.bo-view-buttons {
    padding: var(--gb-space-4) var(--gb-space-6);
    border-top: 1px solid var(--gb-gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ============================================
   댓글 (bo-comment)
   ============================================ */

.bo-comment {
    margin-top: var(--gb-space-6);
    background: var(--gb-surface-card);
}

.bo-comment-header {
    padding: var(--gb-space-4) var(--gb-space-6);
    border-bottom: 1px solid var(--gb-gray-100);
}

.bo-comment-header h2 {
    font-size: var(--gb-font-base);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-800);
    margin: 0;
}

.bo-comment-header .bo-comment-count {
    display: inline-block;
    padding: 1px 6px;
    font-size: var(--gb-font-xs);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-text-on-primary);
    background: var(--gb-primary);
    border-radius: 9999px;
    margin-left: var(--gb-space-2);
    vertical-align: middle;
}

/* 댓글 아이템 */
.bo-comment-item {
    padding: var(--gb-space-4) var(--gb-space-6);
    border-bottom: 1px solid var(--gb-gray-100);
    transition: background-color 0.15s ease;
}

.bo-comment-item:last-child {
    border-bottom: none;
}

.bo-comment-item:hover {
    background-color: var(--gb-gray-50);
}

/* 대댓글 들여쓰기 */
.bo-comment-reply {
    border-left: 2px solid var(--gb-gray-200);
}

.bo-comment-item .bo-comment-author {
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-800);
    font-size: var(--gb-font-sm);
}

.bo-comment-item .bo-comment-date {
    font-size: var(--gb-font-xs);
    color: var(--gb-gray-400);
}

.bo-comment-item .bo-comment-body {
    color: var(--gb-gray-700);
    font-size: var(--gb-font-sm);
    line-height: var(--gb-leading-relaxed);
}

.bo-comment-item .bo-comment-secret {
    color: var(--gb-gray-400);
}

/* 빈 댓글 */
.bo-comment-empty {
    padding: var(--gb-space-8) var(--gb-space-4);
    text-align: center;
    color: var(--gb-gray-400);
    font-size: var(--gb-font-sm);
}

/* 댓글 작성 */
.bo-comment-write {
    padding: var(--gb-space-4) var(--gb-space-6);
    border-top: 1px solid var(--gb-gray-200);
    background: var(--gb-gray-50);
}

.bo-comment-write textarea {
    min-height: 80px;
    font-size: var(--gb-font-sm);
    transition: min-height 0.2s ease;
}

.bo-comment-write textarea:focus {
    min-height: 120px;
}


/* ============================================
   글쓰기 (bo-write)
   ============================================ */

#bo_w {
    background: var(--gb-surface-card);
}

.bo-write-header {
    padding: var(--gb-space-8) var(--gb-space-6) var(--gb-space-6);
    border-bottom: 2px solid var(--gb-gray-100);
    background: linear-gradient(180deg, var(--gb-surface-page) 0%, var(--gb-surface-card) 100%);
}

.bo-write-header h2 {
    font-size: var(--gb-font-xl);
    font-weight: var(--gb-font-bold);
    color: var(--gb-gray-900);
    margin: 0;
}

/* 글쓰기 폼 섹션 */
.bo-write-section {
    padding: var(--gb-space-5) var(--gb-space-6);
    border-bottom: 1px solid var(--gb-gray-100);
    animation: vueSectionFadeIn 0.3s ease-out backwards;
}

.bo-write-section:nth-child(1) { animation-delay: 0s; }
.bo-write-section:nth-child(2) { animation-delay: 0.04s; }
.bo-write-section:nth-child(3) { animation-delay: 0.08s; }
.bo-write-section:nth-child(4) { animation-delay: 0.12s; }
.bo-write-section:nth-child(5) { animation-delay: 0.16s; }
.bo-write-section:nth-child(6) { animation-delay: 0.20s; }
.bo-write-section:nth-child(7) { animation-delay: 0.24s; }

.bo-write-section:last-of-type {
    border-bottom: none;
}

/* 제목·본문 섹션 확장 */
.bo-write-section-hero {
    padding-top: var(--gb-space-6);
    padding-bottom: var(--gb-space-6);
}

.bo-write-section-label {
    font-size: var(--gb-font-xs);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--gb-space-3);
    padding-left: var(--gb-space-3);
    border-left: 3px solid var(--gb-primary);
    line-height: var(--gb-leading-normal);
}

/* 분류·옵션 버튼 (btn-check pill) */
#bo_w .bo-cate-btn,
#bo_w .bo-opt-btn {
    font-size: var(--gb-font-sm);
    font-weight: var(--gb-font-medium);
    padding: var(--gb-space-1) var(--gb-space-4);
    border-radius: 9999px;
    color: var(--gb-gray-600);
    background: var(--gb-gray-100);
    border: 1px solid var(--gb-gray-200);
    transition: all 0.2s ease;
}

#bo_w .bo-cate-btn:hover,
#bo_w .bo-opt-btn:hover {
    color: var(--gb-primary);
    background: var(--gb-primary-light);
    border-color: var(--gb-primary);
}

#bo_w .btn-check:checked + .bo-cate-btn,
#bo_w .btn-check:checked + .bo-opt-btn {
    color: var(--gb-text-on-primary);
    background: var(--gb-primary);
    border-color: var(--gb-primary);
    box-shadow: var(--gb-shadow-sm);
}

.bo-opt-check {
    display: none;
    font-size: 0.7em;
    margin-right: 2px;
}

#bo_w .btn-check:checked + .bo-opt-btn .bo-opt-check {
    display: inline;
}

/* 제목 입력 — 언더라인 */
#bo_w #wr_subject {
    font-size: var(--gb-font-lg);
    font-weight: var(--gb-font-medium);
    padding: var(--gb-space-2) 0;
    border: none;
    border-bottom: 2px solid var(--gb-gray-200);
    border-radius: 0;
    background: transparent;
    transition: border-color var(--gb-transition);
}

#bo_w #wr_subject:focus {
    border-bottom-color: var(--gb-primary);
    box-shadow: none;
    background-color: transparent;
}

#bo_w #wr_subject::placeholder {
    color: var(--gb-gray-300);
    font-weight: var(--gb-font-normal);
}

/* 임시저장 버튼 */
#bo_w #btn_autosave {
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

/* 에디터 영역 강조 */
#bo_w .wr_content {
    border: 1px solid var(--gb-border-default);
    border-radius: var(--gb-radius);
    overflow: hidden;
    transition: border-color var(--gb-transition), box-shadow var(--gb-transition);
}

#bo_w .wr_content:focus-within {
    border-color: var(--gb-border-focus);
    box-shadow: var(--gb-focus-ring);
}

/* 임시저장 팝업 */
.bo-autosave {
    border: 1px solid var(--gb-gray-200);
    border-radius: 6px;
    background: var(--gb-surface-card);
    overflow: hidden;
}

.bo-autosave-head {
    padding: var(--gb-space-2) var(--gb-space-4);
    background: var(--gb-gray-50);
    border-bottom: 1px solid var(--gb-gray-100);
}

.bo-autosave ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gb-space-2) var(--gb-space-4);
    border-bottom: 1px solid var(--gb-gray-100);
    transition: background 0.15s;
}

.bo-autosave ul li:last-child {
    border-bottom: none;
}

.bo-autosave ul li:hover {
    background: var(--gb-gray-50);
}

.bo-autosave .autosave_load {
    color: var(--gb-gray-800);
    text-decoration: none;
    font-size: var(--gb-font-sm);
    font-weight: var(--gb-font-medium);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-autosave .autosave_load:hover {
    color: var(--gb-primary);
}

.bo-autosave ul li > span {
    font-size: var(--gb-font-xs);
    color: var(--gb-gray-400);
    flex-shrink: 0;
    margin-left: var(--gb-space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--gb-space-2);
    white-space: nowrap;
}

.bo-autosave .autosave_del {
    background: none;
    border: none;
    font-size: var(--gb-font-xs);
    color: var(--gb-danger);
    cursor: pointer;
    padding: 0;
}

.bo-autosave .autosave_del:hover {
    text-decoration: underline;
}

/* 태그 입력 (cf-tag-box) */
#bo_w .cf-tag-box {
    min-height: 46px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-content: flex-start;
    cursor: text;
    border-radius: var(--gb-radius);
    transition: border-color var(--gb-transition), box-shadow var(--gb-transition);
}

#bo_w .cf-tag-box:focus-within {
    border-color: var(--gb-border-focus);
    box-shadow: var(--gb-focus-ring);
}

#bo_w .cf-tag-text {
    border: none;
    outline: none;
    flex: 1 1 120px;
    min-width: 80px;
    background: transparent;
    font-size: var(--gb-font-sm);
    padding: 0;
    line-height: 1.8;
    color: var(--gb-gray-800);
}

#bo_w .cf-tag-text::placeholder {
    color: var(--gb-gray-400);
}

#bo_w .cf-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    font-size: var(--gb-font-sm);
    font-weight: var(--gb-font-medium);
    border-radius: 4px;
    background-color: var(--gb-primary);
    color: var(--gb-text-on-primary);
    margin: 1px 2px;
    line-height: 1.5;
}

#bo_w .cf-tag-remove {
    background: none;
    border: none;
    color: color-mix(in srgb, var(--gb-text-on-primary) 80%, transparent);
    padding: 0 0 0 2px;
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
}

#bo_w .cf-tag-remove:hover {
    color: var(--gb-text-on-primary);
}

/* 링크 섹션 */
#bo_w .input-group-text {
    background: var(--gb-surface-page);
    border-color: var(--gb-border-default);
    color: var(--gb-gray-400);
    transition: color var(--gb-transition), border-color var(--gb-transition);
}

#bo_w .input-group:focus-within .input-group-text {
    color: var(--gb-primary);
    border-color: var(--gb-border-focus);
}

/* 폼 하단 버튼 */
.bo-write-actions {
    padding: var(--gb-space-4) var(--gb-space-6);
    border-top: 1px solid var(--gb-border-default);
    background: var(--gb-surface-card);
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
}

/* 작성완료 버튼 */
#bo_w #btn_submit {
    padding: var(--gb-space-2) var(--gb-space-8);
    font-weight: var(--gb-font-semibold);
    font-size: var(--gb-font-sm);
    letter-spacing: 0.02em;
    transition: all var(--gb-transition-normal);
    box-shadow: var(--gb-shadow-sm);
}

#bo_w #btn_submit:hover {
    transform: translateY(-1px);
    box-shadow: var(--gb-shadow-md);
}

#bo_w #btn_submit:active {
    transform: translateY(0);
    box-shadow: var(--gb-shadow-sm);
}


/* ============================================
   D&D 파일 업로드 (bo-upload)
   ============================================ */

.bo-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gb-space-2);
    padding: var(--gb-space-10) var(--gb-space-4);
    border: 2px dashed var(--gb-border-default);
    border-radius: var(--gb-radius);
    background: var(--gb-surface-page);
    cursor: pointer;
    transition: border-color var(--gb-transition-normal), background-color var(--gb-transition-normal), transform var(--gb-transition-normal);
}

.bo-upload-dropzone:hover {
    border-color: var(--gb-primary);
    background: var(--gb-primary-light);
}

.bo-upload-dropzone.bo-upload-dragover {
    border-color: var(--gb-primary);
    background: var(--gb-primary-light);
    border-style: solid;
}

.bo-upload-icon {
    font-size: 2rem;
    color: var(--gb-gray-400);
}

.bo-upload-dropzone:hover .bo-upload-icon {
    color: var(--gb-primary);
    animation: vueBounceUp 0.4s ease;
}

.bo-upload-dropzone.bo-upload-dragover .bo-upload-icon {
    color: var(--gb-primary);
}

.bo-upload-text {
    font-size: var(--gb-font-sm);
    color: var(--gb-text-secondary);
    margin: 0;
    text-align: center;
}

.bo-upload-browse {
    color: var(--gb-primary);
    font-weight: var(--gb-font-semibold);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bo-upload-browse:hover {
    color: var(--gb-primary-dark, var(--gb-primary));
}

/* 파일 목록 */
.bo-upload-list {
    display: flex;
    flex-direction: column;
    gap: var(--gb-space-2);
}

.bo-upload-item {
    display: flex;
    align-items: center;
    gap: var(--gb-space-3);
    padding: var(--gb-space-3);
    border: 1px solid var(--gb-border-default);
    border-radius: 6px;
    background: var(--gb-surface-card);
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.bo-upload-item:hover {
    border-color: var(--gb-border-strong);
}

.bo-upload-marked-delete {
    opacity: 0.4;
}

.bo-upload-marked-delete .bo-upload-item-name {
    text-decoration: line-through;
}

/* 썸네일 */
.bo-upload-item-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
    background: var(--gb-surface-raised);
}

.bo-upload-thumb {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.bo-upload-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.5rem;
    color: var(--gb-gray-400);
}

/* 파일 정보 */
.bo-upload-item-info {
    min-width: 0;
}

.bo-upload-item-name {
    font-weight: var(--gb-font-medium);
    color: var(--gb-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-upload-item-size {
    font-size: 0.75rem;
}

/* 설명 입력 */
#bo_w .bo-upload-content-input {
    font-size: var(--gb-font-xs);
    padding: 0.15rem 0.5rem;
}

/* 진행률 */
.bo-upload-progress {
    margin-top: var(--gb-space-1);
}

.bo-upload-progress .progress {
    height: 3px;
    border-radius: 2px;
    background: var(--gb-gray-100);
}

.bo-upload-progress .progress-bar {
    transition: width 0.15s ease;
}

/* 삭제 버튼 */
.bo-upload-item-remove {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    color: var(--gb-text-tertiary);
    background: transparent;
    border: none;
    transition: all 0.15s ease;
}

.bo-upload-item-remove:hover {
    color: var(--gb-danger);
    background: var(--gb-surface-raised);
}

/* 안내 텍스트 */
.bo-upload-info {
    font-size: var(--gb-font-xs);
}


/* 페이징: bootstrap-custom.css의 .bo-pagination 사용 */


/* ============================================
   글쓰기 애니메이션
   ============================================ */

@keyframes vueSectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes vueBounceUp {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
    70% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    #bo_w .bo-write-section {
        animation: none;
    }
}


/* ============================================
   다크모드 보완 (글쓰기)
   ============================================ */

[data-theme="dark"] .bo-write-header {
    background: linear-gradient(180deg, var(--gb-surface-page) 0%, var(--gb-surface-card) 100%);
}

[data-theme="dark"] .bo-write-actions {
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] #bo_w #wr_subject:focus {
    border-bottom-color: var(--gb-primary);
}

/* 다크모드: Twitter(X) 호버 배경 보완 */
[data-theme="dark"] .bo-sns-twitter:hover {
    background: #1d9bf0;
    border-color: #1d9bf0;
}


/* ============================================
   반응형
   ============================================ */

@media (max-width: 767.98px) {
    #bo_list .bo-list-table {
        font-size: var(--gb-font-xs);
    }

    #bo_list .bo-list-table thead th,
    #bo_list .bo-list-table tbody td {
        padding: var(--gb-space-2) var(--gb-space-2);
    }

    .bo-view-title {
        padding: var(--gb-space-4);
    }

    .bo-view-title h2 {
        font-size: var(--gb-font-xl);
    }

    .bo-view-meta,
    .bo-view-body,
    .bo-view-attach,
    .bo-view-link,
    .bo-view-vote,
    .bo-view-sns,
    .bo-view-buttons {
        padding-left: var(--gb-space-4);
        padding-right: var(--gb-space-4);
    }

    .bo-view-nav .bo-nav-item {
        padding: var(--gb-space-3) var(--gb-space-4);
    }

    .bo-comment-header,
    .bo-comment-item,
    .bo-comment-write {
        padding-left: var(--gb-space-4);
        padding-right: var(--gb-space-4);
    }

    .bo-write-header,
    .bo-write-section,
    .bo-write-actions {
        padding-left: var(--gb-space-4);
        padding-right: var(--gb-space-4);
    }

    .bo-list-footer {
        padding: var(--gb-space-3) var(--gb-space-3);
    }

    .bo-list-footer-search {
        padding: var(--gb-space-4) var(--gb-space-3);
    }

    .bo-list-footer-search .input-group {
        max-width: 100%;
    }

    /* 모바일: 맨앞/앞/다음/맨끝 버튼 숨김 */
    #bo_list .bo-pg-buttons > :nth-child(-n+2),
    #bo_list .bo-pg-buttons > :nth-last-child(-n+2) {
        display: none;
    }

    /* 모바일: 현재 페이지 기준 ±2 (최대 5개) 노출 */
    #bo_list .bo-pg-buttons .bo-pg-num {
        display: none;
    }

    #bo_list .bo-pg-buttons .bo-pg-num:has(+ .bo-pg-active),
    #bo_list .bo-pg-buttons .bo-pg-num:has(+ * + .bo-pg-active),
    #bo_list .bo-pg-buttons .bo-pg-active + .bo-pg-num,
    #bo_list .bo-pg-buttons .bo-pg-active + .bo-pg-num + .bo-pg-num {
        display: inline-flex;
    }

    /* SNS 공유 */
    .bo-sns-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .bo-sns-label {
        display: none;
    }

    /* D&D 업로드 모바일 */
    .bo-upload-dropzone {
        padding: var(--gb-space-6) var(--gb-space-3);
    }

    .bo-upload-icon {
        font-size: 1.5rem;
    }

    .bo-upload-item-thumb {
        width: 40px;
        height: 40px;
    }

    .bo-upload-thumb-icon {
        font-size: 1.1rem;
    }
}