/* ═══════════════════════════════════════════════
   bbs.css — 커뮤니티 게시판 (목록 + 상세 + 작성)
   디자인 레퍼런스: tools.css 프리미엄 터미널 패턴
   ═══════════════════════════════════════════════ */

/* ── 공통 폼 요소 텍스트 ─────────────────────── */
.bbs-page-header input,
.bbs-page-header select,
.bbs-list-container input,
.bbs-list-container select,
.bbs-search-bar input,
.bbs-search-bar select,
.bbs-write-form input,
.bbs-write-form select,
.bbs-write-form textarea,
.bbs-comment-form input,
.bbs-comment-form textarea,
.bbs-reply-form input,
.bbs-reply-form textarea,
.bbs-modal-content input,
.bbs-modal-content select,
.bbs-modal-content textarea {
  font-weight: 500;
  letter-spacing: -0.5px;
}

/* ── 페이지 헤더 ─────────────────────────────── */
.bbs-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-secondary);
}
.bbs-header-info { display: flex; flex-direction: column; gap: 6px; }
.bbs-title {
  font-size: 22px; font-weight: 800;
  color: var(--text-primary); font-family: var(--font-sans);
  letter-spacing: -0.8px; line-height: 1.2;
}
.bbs-subtitle {
  font-size: 13px; font-weight: 400; color: var(--text-muted);
  font-family: var(--font-sans); letter-spacing: -0.3px;
}

/* ── 글쓰기 버튼 (= tools.css tl-go-btn 동기화) ── */
/* ── 공통 버튼 베이스 ───────────────────────── */
.bbs-btn-write,
.bbs-btn-submit,
.bbs-btn-submit-sm,
.bbs-btn-back,
.bbs-btn-action,
.bbs-btn-cancel,
.bbs-btn-cancel-sm {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 20px; border-radius: 5px; /* 전체 공통 버튼 샤프닝 */
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
  letter-spacing: 0.02em;
  border: none; cursor: pointer;
  font-family: var(--font-sans);
  line-height: 1; box-sizing: border-box;
}

/* ── primary (골드) ── 글쓰기, 등록, 댓글등록, 확인 */
.bbs-btn-write,
.bbs-btn-submit,
.bbs-btn-submit-sm {
  background: linear-gradient(135deg, var(--color-accent), #e6b800);
  color: #000;
  box-shadow: 0 2px 8px rgba(240, 185, 11, 0.25);
}
.bbs-btn-write:hover,
.bbs-btn-submit:hover,
.bbs-btn-submit-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(240, 185, 11, 0.4);
}
.bbs-btn-write:active,
.bbs-btn-submit:active,
.bbs-btn-submit-sm:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(240, 185, 11, 0.2);
}

/* ── secondary (다크) ── 목록, 수정, 신고, 취소 */
.bbs-btn-back,
.bbs-btn-action,
.bbs-btn-cancel,
.bbs-btn-cancel-sm {
  background-color: var(--bg-body);
  border: 1px solid var(--border-secondary);
  color: var(--text-muted);
}
.bbs-btn-back:hover,
.bbs-btn-action:hover,
.bbs-btn-cancel:hover,
.bbs-btn-cancel-sm:hover {
  border-color: var(--color-accent);
  color: var(--text-primary);
}

/* ── danger (레드) ── 삭제 */
.bbs-btn-danger {
  border-color: rgba(239,68,68,0.3);
  color: #ef4444;
}
.bbs-btn-danger:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239,68,68,0.08);
}

/* ── 사이즈 조정 ── */
.bbs-btn-submit-sm,
.bbs-btn-cancel-sm {
  height: 28px; padding: 0 14px;
  font-size: 12px;
  border-radius: 6px;
}
.bbs-btn-submit {
  height: 36px; margin-top: 8px;
}

/* ── 알림 ─────────────────────────────────────── */
.bbs-alert {
  padding: 12px 32px; font-size: 13px; font-family: var(--font-sans);
  border-bottom: 1px solid var(--border-secondary);
}
.bbs-alert-success { background: rgba(34,197,94,0.06); color: #22c55e; }
.bbs-alert-error   { background: rgba(239,68,68,0.06); color: #ef4444; }

/* ── 타이틀 행 (타이틀 + 드롭다운) ────────────── */
.bbs-title-row {
  display: flex; align-items: center; gap: 0;
}
.bbs-title-row .bbs-title { margin-right: 4px; }
.bbs-title-row::after {
  content: ''; display: none;
}
.bbs-title-divider {
  color: var(--border-secondary); font-size: 20px; font-weight: 300;
  margin: 0 10px; user-select: none; line-height: 1;
  align-self: center;
}

/* ── 커스텀 서버 드롭다운 ────────────────────── */
.bbs-server-dropdown { position: relative; align-self: center; }

.bbs-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 2px; border: none; background: none;
  color: var(--color-accent); font-size: 16px; font-weight: 700;
  font-family: var(--font-sans); letter-spacing: -0.6px;
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap; position: relative;
}
.bbs-dropdown-trigger::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1.5px;
  background: var(--color-accent); opacity: 0;
  transform: scaleX(0); transform-origin: left;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
}
.bbs-dropdown-trigger:hover::after,
.bbs-server-dropdown.open .bbs-dropdown-trigger::after {
  opacity: 0.4; transform: scaleX(1);
}
.bbs-dropdown-trigger:hover {
  color: var(--color-accent);
}
.bbs-server-dropdown.open .bbs-dropdown-trigger {
  color: var(--color-accent);
}

.bbs-dropdown-chevron {
  width: 12px; height: 12px;
  transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
  opacity: 0.6; flex-shrink: 0;
}
.bbs-server-dropdown.open .bbs-dropdown-chevron {
  transform: rotate(180deg); opacity: 1;
}

.bbs-dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: -8px;
  min-width: 210px; max-height: 380px;
  overflow-y: auto; overflow-x: hidden;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-secondary);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  z-index: 100;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transition: all 0.22s cubic-bezier(.4, 0, .2, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
  padding: 6px;
}
.bbs-dropdown-menu::-webkit-scrollbar { width: 4px; }
.bbs-dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.bbs-dropdown-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.bbs-server-dropdown.open .bbs-dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
}

.bbs-dropdown-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  text-decoration: none; transition: all 0.12s;
  font-family: var(--font-sans); letter-spacing: -0.5px;
  gap: 12px;
}
.bbs-dropdown-item:hover {
  background-color: rgba(255,255,255,0.05);
  color: var(--text-primary);
}
.bbs-dropdown-item.active {
  background-color: rgba(240, 185, 11, 0.08);
  color: var(--color-accent); font-weight: 700;
}

.bbs-dropdown-name { flex: 1; }
.bbs-dropdown-count {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  font-family: var(--font-mono); letter-spacing: 0;
  min-width: 20px; text-align: right; opacity: 0.6;
}
.bbs-dropdown-item.active .bbs-dropdown-count {
  color: var(--color-accent); opacity: 0.7;
}

/* ── 서버 뱃지 ───────────────────────────────── */
.bbs-server-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 25px; border-radius: 3px; /* 높이 25, 둥글기 3 */
  font-size: 11px; font-weight: 500; /* 폰트 두께 500 */
  background: rgba(240, 185, 11, 0.1); border: 1px solid rgba(240, 185, 11, 0.2);
  color: var(--color-accent); font-family: var(--font-sans);
  letter-spacing: -0.5px; white-space: nowrap; box-sizing: border-box;
}
.bbs-server-badge.sm { font-size: 10px; width: 50px; height: 18px; border-radius: 9px; }


/* ── 목록 테이블 (PC) ────────────────────────── */
.bbs-list-container { background-color: var(--bg-surface); }
.bbs-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; font-family: var(--font-sans);
}
.bbs-table thead th {
  padding: 12px 10px; /* td와 동일한 패딩 통일 */
  font-weight: 500; color: var(--text-muted); font-size: 11px;
  letter-spacing: -0.2px; border-bottom: 1px solid var(--border-secondary);
  background-color: rgba(255,255,255,0.01);
}
.bbs-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
}
.bbs-table tbody tr:last-child {
  border-bottom: none;
}
.bbs-row-clickable { cursor: pointer; position: relative; } /* 전체 행 클릭 */
.bbs-table tbody tr.bbs-row-clickable td:first-child::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--color-accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s; opacity: 0;
}
.bbs-table tbody tr.bbs-row-clickable:hover td:first-child::before {
  transform: scaleY(1); opacity: 1;
}
.bbs-table tbody tr.bbs-row-clickable:hover { 
  background: rgba(255, 255, 255, 0.02); 
}
.bbs-table tbody tr.is-notice { background: rgba(240, 185, 11, 0.04); }
.bbs-table tbody tr.is-notice .col-title a { font-weight: 700; color: #fff; }
.bbs-table tbody tr.blinded { opacity: 0.35; }
.bbs-table td { padding: 14px 10px; color: var(--text-primary); letter-spacing: -0.3px; }

/* ── 열(Column) 완벽 비율/정렬 세팅 ── */
.bbs-table td.col-no     { width: 45px; text-align: center; color: var(--text-muted); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0; }
.bbs-table th.col-no     { width: 45px; text-align: center; }

.bbs-table td.col-server { width: 75px; text-align: center; }
.bbs-table th.col-server { width: 75px; text-align: center; }

.bbs-table td.col-title, .bbs-table th.col-title { text-align: left; padding-left: 8px !important; }
.col-title a {
  color: var(--text-primary); text-decoration: none;
  transition: color 0.15s; font-weight: 500; letter-spacing: -0.4px;
}
.bbs-table tbody tr:hover .col-title a { color: var(--color-accent); }

.bbs-title-wrapper {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.bbs-comment-count {
  color: var(--color-accent); font-size: 11px; font-weight: 700;
  font-family: var(--font-mono);
}
.bbs-icon-new {
  display: inline-flex; align-items: center; justify-content: center;
  background: #f87171; color: #ffffff;
  font-size: 9px; font-weight: 800;
  width: 15px; height: 15px; line-height: 1;
  border-radius: 4px; font-family: var(--font-mono);
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.2);
}
.bbs-icon-image {
  height: 18px; width: auto;
  display: inline-block;
  opacity: 0.9;
}

.bbs-table td.col-author { width: 110px; text-align: center; color: var(--text-secondary); font-size: 13px; font-weight: 400; letter-spacing: -0.5px; }
.bbs-table th.col-author { width: 110px; text-align: center; }

.bbs-table td.col-view   { width: 65px; text-align: center; color: var(--text-muted); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0; }
.bbs-table th.col-view   { width: 65px; text-align: center; }

.bbs-table td.col-date   { width: 70px; text-align: center; color: var(--text-muted); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0; }
.bbs-table th.col-date   { width: 70px; text-align: center; }

/* ── 모바일 리스트 ───────────────────────────── */
.bbs-mobile-list { display: none; }
.bbs-mobile-item {
  display: block; padding: 14px 20px;
  border-bottom: 1px solid var(--border-secondary);
  text-decoration: none; transition: background 0.15s;
  position: relative;
}
.bbs-mobile-item:last-child {
  border-bottom: none;
}
.bbs-mobile-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--color-accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s; opacity: 0;
}
.bbs-mobile-item:hover { background: rgba(240, 185, 11, 0.03); }
.bbs-mobile-item:hover::before { transform: scaleY(1); opacity: 1; }
.bbs-mobile-title {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 14px; color: var(--text-primary); font-weight: 500;
  line-height: 1.4; letter-spacing: -0.5px;
}
.bbs-mobile-title .title-text {
  color: var(--text-primary);
}
.bbs-mobile-meta {
  margin-top: 8px; font-size: 11px; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  letter-spacing: 0; font-weight: 400;
}
.bbs-mobile-meta span {
  display: flex; align-items: center; gap: 3px;
}
.bbs-mobile-meta i {
  font-size: 13px; opacity: 0.8;
}
.bbs-mobile-meta .divider {
  color: var(--border-primary); font-size: 10px; opacity: 0.5;
}

/* ── 빈 상태 ─────────────────────────────────── */
.bbs-empty {
  padding: 80px 20px; text-align: center; color: var(--text-muted);
}
.bbs-empty i { font-size: 48px; margin-bottom: 16px; display: block; opacity: 0.2; }
.bbs-empty p { font-size: 14px; }

/* ── 검색 ────────────────────────────────────── */
.bbs-search-bar {
  padding: 20px 32px;
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-secondary);
}
.bbs-search-form {
  display: flex; gap: 8px; max-width: 520px; margin: 0 auto;
}
.bbs-search-type {
  height: 36px; padding: 0 36px 0 14px; border-radius: 5px;
  background-color: var(--bg-body); border: 1px solid var(--border-secondary);
  color: var(--text-primary); font-size: 13px; font-family: var(--font-sans);
  box-sizing: border-box;
}
.bbs-search-input {
  flex: 1; height: 36px; padding: 0 14px; border-radius: 5px;
  background-color: var(--bg-body); border: 1px solid var(--border-secondary);
  color: var(--text-primary); font-size: 13px; font-family: var(--font-sans);
  transition: border-color 0.15s; box-sizing: border-box;
}
.bbs-search-input::placeholder { color: var(--text-muted); opacity: 0.6; }
.bbs-search-input:focus { outline: none; border-color: var(--color-accent); }
.bbs-search-btn {
  height: 36px; padding: 0 18px; border-radius: 5px;
  background-color: var(--bg-body);
  color: var(--text-muted); border: 1px solid var(--border-secondary);
  cursor: pointer; font-size: 13px; font-weight: 700;
  font-family: var(--font-sans); letter-spacing: -0.5px;
  transition: all 0.25s cubic-bezier(.4, 0, .2, 1);
  box-sizing: border-box;
}
.bbs-search-btn:hover {
  background: linear-gradient(135deg, var(--color-accent), #e6b800);
  color: #000; border-color: transparent;
  box-shadow: 0 2px 10px rgba(240, 185, 11, 0.35);
}

/* ── 페이지네이션 ────────────────────────────── */
.bbs-pagination {
  display: flex; justify-content: center; gap: 4px;
  padding: 20px 32px;
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-secondary);
}
.bbs-pagination a, .bbs-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 5px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--text-muted); transition: all 0.15s;
  font-family: var(--font-mono); letter-spacing: 0;
}
.bbs-pagination a:hover {
  background: rgba(255,255,255,0.05); color: var(--text-primary);
}
.bbs-pagination span.active {
  background: var(--color-accent); color: #000; font-weight: 800;
  box-shadow: 0 2px 8px rgba(240, 185, 11, 0.25);
}

/* ═══ 상세 페이지 ═══════════════════════════════ */
.bbs-view-container { background-color: var(--bg-surface); }
.bbs-view-header {
  padding: 24px 32px 20px;
  border-bottom: 1px solid var(--border-secondary);
}
.bbs-view-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 22px; font-weight: 800; color: var(--text-primary);
  margin: 0 0 18px 0; line-height: 1.4;
  font-family: var(--font-sans); letter-spacing: -0.03em;
  word-break: keep-all;
}
.bbs-view-title .title-text {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bbs-view-title .badge-glow {
  background: rgba(240, 185, 11, 0.1); color: var(--color-accent); 
  border: 1px solid rgba(240, 185, 11, 0.2);
  font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 5px;
  line-height: 1; flex-shrink: 0;
}
.bbs-view-title .title-text {
  flex: 1;
}

.bbs-view-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text-muted);
  font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.2px;
}
.bbs-view-meta .meta-left, .bbs-view-meta .meta-right {
  display: flex; align-items: center; gap: 14px;
}
.bbs-view-meta .meta-left .author {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-primary); font-weight: 600;
}
.bbs-view-meta .meta-left .author i {
  font-size: 18px; color: var(--text-muted);
}
.bbs-view-meta .meta-right span {
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  font-family: var(--font-mono); /* 수치 데이터 터미널 핏 */
}
.bbs-view-meta .meta-right .divider {
  color: var(--border-secondary); font-size: 12px; margin: 0;
}
.bbs-view-meta .meta-right i { 
  font-size: 16px; color: var(--text-tertiary); 
}
.bbs-view-content {
  padding: 28px 32px; min-height: 200px;
  font-size: 14px; line-height: 1.85; color: var(--text-primary);
  font-family: var(--font-sans); word-break: break-word;
  letter-spacing: -0.3px; font-weight: 400;
  border-bottom: 1px solid var(--border-secondary);
}
.bbs-view-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border-secondary);
}
.bbs-view-actions-left, .bbs-view-actions-right { display: flex; gap: 14px; }

/* 뷰 액션 버튼(목록, 수정, 삭제, 신고) - 답글 폼의 취소 버튼 스타일 차용 (반투명 버튼형) */
.bbs-view-actions .bbs-btn-back,
.bbs-view-actions .bbs-btn-action {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 16px; border-radius: 5px;
  background: rgba(255,255,255,0.05); border: none;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  box-shadow: none; cursor: pointer; transition: all 0.2s;
  letter-spacing: -0.2px; font-family: var(--font-sans); text-decoration: none;
}
.bbs-view-actions .bbs-btn-back:hover,
.bbs-view-actions .bbs-btn-action:hover {
  background: rgba(255,255,255,0.1); border: none; color: var(--text-primary);
}
.bbs-view-actions .bbs-btn-danger {
  color: var(--text-muted); 
}
.bbs-view-actions .bbs-btn-danger:hover {
  background: rgba(239, 68, 68, 0.15); color: #ef4444; border: none;
}

/* ═══ 댓글 스레드 ═════════════════════════════════ */
.bbs-comments-section { padding: 0 32px 32px; }
.bbs-comments-header {
  margin: 0 -32px; /* 부모 컨테이너의 좌우 패딩을 역산하여 보더라인 100% 확장 */
  padding: 14px 32px; /* 상단의 액션 버튼 영역(.bbs-view-actions)과 동일한 패딩 적용 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; min-height: 62px; box-sizing: border-box;
}
.bbs-comments-header h3 {
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  font-family: var(--font-sans); letter-spacing: -0.4px; margin: 0;
}
.bbs-comments-count { color: var(--color-accent); margin-left: 6px; font-family: var(--font-mono); }

.bbs-comments-list { padding-bottom: 24px; } /* 리스트 하단 리듬 확보 */

.bbs-comment {
  padding: 24px 32px; margin: 0 -32px; /* 좌우 여백을 채워 호버 시 100% 폭 사용 */
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative; transition: background-color 0.2s ease;
}
.bbs-comment::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--color-accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s; opacity: 0;
}
.bbs-comment:hover { background-color: rgba(255,255,255,0.015); }
.bbs-comment:hover::before { transform: scaleY(1); opacity: 1; }
.bbs-comment-header {
  display: flex; align-items: center; gap: 16px; /* 닉네임과 날짜 사이 여백 확대 */
  margin-bottom: 10px;
}
.bbs-comment-author, .bbs-comment-date {
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
}
.bbs-comment-author { 
  font-size: 13px; font-weight: 600; color: var(--text-muted); 
  letter-spacing: -0.3px; 
}
.bbs-comment-date { 
  font-size: 12px; color: rgba(255, 255, 255, 0.35); /* 날짜를 살짝 더 흐리게 조율 */
  font-family: var(--font-mono); letter-spacing: 0; 
}
.bbs-comment-author i, .bbs-comment-date i {
  font-size: 15px; color: var(--text-tertiary); /* 아이콘 색상을 한 톤 더 다운시켜 텍스트 돋보이게 */
}
.bbs-comment-content {
  font-size: 14px; line-height: 1.65; font-weight: 400;
  color: #EAECEF; word-break: break-word;
  letter-spacing: -0.3px; margin-bottom: 12px;
}
.bbs-comment-content .blinded { color: var(--text-muted); font-style: italic; }

/* 미니멀 인라인 버튼 */
.bbs-comment-actions { display: flex; gap: 14px; }
.bbs-btn-reply, .bbs-btn-sm {
  padding: 0; font-size: 12px; color: var(--text-tertiary); font-weight: 600;
  background: transparent; border: none;
  cursor: pointer; transition: color 0.2s; font-family: var(--font-sans);
}
.bbs-btn-reply:hover, .bbs-btn-sm:hover { color: var(--text-primary); }
.bbs-btn-del-comment:hover { color: #ef4444; }

/* 답글 (자연스러운 스레드 라인) */
.bbs-replies { 
  margin-left: 12px; padding-left: 20px; margin-top: 16px; 
  border-left: 2px solid rgba(255,255,255,0.06); 
  display: flex; flex-direction: column; gap: 8px; 
}
.bbs-reply {
  display: flex; padding: 14px 16px; border-radius: 8px;
  background: transparent; border: none;
  transition: background-color 0.2s ease;
}
.bbs-reply:hover {
  background: rgba(255, 255, 255, 0.03); /* Hover 시 해당 위치 하이라이트 */
}
.bbs-reply-body { flex: 1; }

/* ═══ 통합 에디터 스타일 입력 폼 ═════════════════ */
.bbs-comment-form form, .bbs-reply-form form {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  overflow: hidden; position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bbs-comment-form form:focus-within, .bbs-reply-form form:focus-within {
  border-color: rgba(240, 185, 11, 0.4);
}

.bbs-comment-form { margin-top: 32px; }
.bbs-reply-form { margin-top: 16px; margin-left: 12px; }

/* 작성자 정보 헤더부 */
.bbs-comment-form-inputs, .bbs-reply-inputs { 
  display: flex; margin: 0; 
  border-bottom: 1px solid rgba(255,255,255,0.04); 
}
.bbs-comment-form-inputs input, .bbs-reply-inputs input {
  flex: 1; height: 42px; padding: 0 16px; border: none; border-radius: 0;
  background: transparent; color: var(--text-primary);
  font-size: 13px; font-family: var(--font-sans); outline: none; box-shadow: none;
}
.bbs-comment-form-inputs input:first-child, .bbs-reply-inputs input:first-child {
  border-right: 1px solid rgba(255,255,255,0.04);
}

/* 텍스트 영역 */
.bbs-comment-form textarea, .bbs-reply-form textarea {
  width: 100%; min-height: 90px; padding: 16px 16px 56px 16px; 
  border: none; background: transparent; outline: none; box-shadow: none;
  color: var(--text-primary); font-size: 14px; resize: vertical;
  font-family: var(--font-sans); line-height: 1.6;
}

/* 하단 플로팅 버튼 */
.bbs-comment-form .bbs-btn-submit {
  position: absolute; right: 12px; bottom: 12px;
  width: auto; height: 34px; padding: 0 20px; border-radius: 5px; margin: 0;
  background: var(--color-accent); color: #000;
  font-size: 13px; font-weight: 700; box-shadow: 0 2px 8px rgba(240, 185, 11, 0.2);
}
.bbs-reply-submit {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; gap: 8px; margin: 0; justify-content: flex-end;
}
.bbs-reply-submit button {
  height: 34px; padding: 0 16px; border-radius: 5px; margin: 0; font-size: 13px;
}
.bbs-reply-submit .bbs-btn-submit-sm { 
  background: var(--color-accent); color: #000; font-weight: 700; border: none; 
  box-shadow: 0 2px 8px rgba(240, 185, 11, 0.2);
}
.bbs-reply-submit .bbs-btn-cancel-sm { 
  background: rgba(255,255,255,0.05); color: var(--text-muted); border: none; font-weight: 600;
}
.bbs-reply-submit .bbs-btn-cancel-sm:hover {
  background: rgba(255,255,255,0.1); color: var(--text-primary);
}

/* ═══ 글쓰기 폼 ═════════════════════════════════ */
.bbs-write-container { background-color: var(--bg-surface); }
.bbs-write-form { padding: 24px 32px 32px; }
.bbs-form-row-inline { display: flex; gap: 12px; }
.bbs-form-group { margin-bottom: 18px; flex: 1; }
.bbs-form-group label {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.3px;
  font-family: var(--font-mono); /* 라벨에 모노 폰트 이식 */
}
.bbs-form-group input,
.bbs-form-group select,
.bbs-form-group textarea {
  width: 100%; height: 36px; padding: 0 14px; border-radius: 5px; /* 5px 엣지 통일 */
  background-color: var(--bg-body); border: 1px solid var(--border-secondary);
  color: var(--text-primary); font-size: 13px; font-family: var(--font-sans);
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.bbs-form-group input[type="password"] {
  font-family: var(--font-mono); letter-spacing: 2px;
}
.bbs-form-group select {
  padding-right: 36px;
}
.bbs-form-group textarea {
  height: auto; padding: 9px 14px;
}
.bbs-form-group input:focus,
.bbs-form-group select:focus,
.bbs-form-group textarea:focus {
  outline: none; border-color: var(--color-accent);
}
.bbs-form-group textarea { resize: vertical; line-height: 1.7; }
.bbs-form-actions {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  padding-top: 20px; margin-top: 10px;
  border-top: 1px solid var(--border-secondary);
}
/* 등록/취소 버튼 높이, 너비, 정렬 완벽 동기화 */
.bbs-form-actions button, .bbs-form-actions a {
  height: 38px; line-height: 38px; padding: 0 24px; margin: 0; min-width: 90px;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; border-radius: 5px; font-weight: 600;
}
.bbs-form-actions .bbs-btn-cancel {
  background: rgba(255,255,255,0.05); border: none; color: var(--text-muted);
}
.bbs-form-actions .bbs-btn-cancel:hover {
  background: rgba(255,255,255,0.1); color: var(--text-primary);
}

/* ── TinyMCE 에디터 터미널 커스텀 ── */
.tox-tinymce {
  border-radius: 5px !important;
  border: 1px solid var(--border-secondary) !important;
}
.tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary {
  background-color: var(--bg-body) !important;
  border-bottom: none !important; /* 중복 보더(2px 현상) 원천 제거 */
  background-image: none !important;
}
.tox .tox-editor-header {
  border-bottom: 1px solid var(--border-secondary) !important; /* 상단 헤더 구분선 하나만 유지 */
  box-shadow: none !important;
}
html body .tox .tox-statusbar {
  background-color: var(--bg-body) !important;
  border-top: none !important; /* 에디터 캔버스의 border-bottom과 겹치는 현상 완벽 제거 (우선순위 격상) */
  align-items: center !important;
  padding: 0 8px !important;
}
html body .tox .tox-statusbar__text-container,
html body .tox .tox-statusbar__path,
html body .tox .tox-statusbar__right-container,
html body .tox .tox-statusbar__wordcount {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  line-height: 1 !important;
}
html body .tox .tox-statusbar__path-item {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
/* .bbs-btn-cancel — 공통 base로 이동 */

/* ═══ 모달 ═══════════════════════════════════════ */
.bbs-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: bbsModalFadeIn 0.2s ease forwards;
}
.bbs-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.bbs-modal-content {
  position: relative; z-index: 1;
  background: var(--bg-surface); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; width: 90vw; max-width: 440px;
  padding: 32px 36px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  animation: bbsModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bbsModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bbsModalPop {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.bbs-modal-content h4 {
  font-size: 18px; font-weight: 700; color: var(--text-primary); /* 폰트 키움 */
  margin: 0 0 20px; font-family: var(--font-sans);
}
.bbs-modal-content input,
.bbs-modal-content select,
.bbs-modal-content textarea {
  width: 100%; padding: 12px 16px; border-radius: 6px;
  background-color: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-primary); font-size: 14px;
  margin-bottom: 12px; box-sizing: border-box; font-family: var(--font-sans);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bbs-modal-content select { padding-right: 36px; }
.bbs-modal-content textarea {
  min-height: 120px; resize: none; line-height: 1.6; /* 텍스트 입력 영역 높이 확장 */
}
.bbs-modal-content input:focus,
.bbs-modal-content textarea:focus,
.bbs-modal-content select:focus {
  outline: none; border-color: rgba(240, 185, 11, 0.4);
}
.bbs-modal-error { color: #ef4444; font-size: 12px; margin-bottom: 12px; }

/* 모달 액션 버튼 리디자인 (댓글 폼 버튼 트렌드 이식) */
.bbs-modal-actions { 
  display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 16px; 
}
.bbs-modal-actions button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 20px; border-radius: 5px; margin: 0;
  box-sizing: border-box; line-height: 1; font-family: var(--font-sans);
  border: none; cursor: pointer; transition: all 0.2s;
}
.bbs-modal-actions .bbs-btn-cancel {
  background: rgba(255,255,255,0.05); color: var(--text-muted);
  font-size: 13px; font-weight: 600;
}
.bbs-modal-actions .bbs-btn-cancel:hover {
  background: rgba(255,255,255,0.1); color: var(--text-primary);
}
.bbs-modal-actions .bbs-btn-submit {
  background: var(--color-accent); color: #000;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(240, 185, 11, 0.2);
}
.bbs-modal-actions .bbs-btn-submit:hover {
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(240, 185, 11, 0.3);
}

/* 모달 액션 버튼 내 위험(삭제) 전용 버튼 리디자인 */
.bbs-modal-actions .bbs-btn-submit.bbs-btn-danger,
.bbs-modal-actions .bbs-btn-danger {
  background: rgba(239, 68, 68, 0.15); color: #ef4444; 
  box-shadow: none; border: 1px solid rgba(239, 68, 68, 0.2);
}
.bbs-modal-actions .bbs-btn-submit.bbs-btn-danger:hover,
.bbs-modal-actions .bbs-btn-danger:hover {
  background: rgba(239, 68, 68, 0.25); color: #f87171;
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

/* ═══ 반응형 ═════════════════════════════════════ */
@media (max-width: 600px) {
  .bbs-page-header { padding: 18px 20px; }
  .bbs-title { font-size: 18px; }
  .bbs-btn-write { padding: 8px 16px; font-size: 12px; }
  .bbs-filter-tabs-inner { padding: 0 16px; }
  .bbs-table { display: none; }
  .bbs-mobile-list { display: block; }
  .bbs-search-bar { padding: 14px 16px; }
  .bbs-search-form { flex-wrap: wrap; }
  .bbs-search-type { flex: 0 0 100%; }
  .bbs-pagination { padding: 14px 16px; }

  .bbs-view-header { padding: 18px 20px; }
  .bbs-view-title { font-size: 17px; }
  .bbs-view-content { padding: 20px; }
  .bbs-view-actions { padding: 12px 20px; flex-wrap: wrap; gap: 8px; }
  .bbs-comments-section { padding: 0 20px 20px; }
  .bbs-replies { margin-left: 16px; }
  .bbs-comment-form-inputs { flex-wrap: wrap; }
  .bbs-comment-form-inputs input { width: 100%; }

  .bbs-write-form { padding: 16px 20px 24px; }
  .bbs-form-row-inline { flex-direction: column; gap: 0; }
}