@charset "utf-8";
/**
 * board.css — 게시판 전용 CSS (다크 테마)
 * ══════════════════════════════════════════════════════
 * 로드 순서: layout.css → respond.css → board.css
 * 네임스페이스: #board-* / .bd-* (게시판 전용)
 *
 * layout.css 공용 재사용:
 *   .btn1 / .btn2 / .btn3 — 버튼 (layout.css [23-6])
 *   .btn-wrap / .left / .right — 버튼 래퍼 (layout.css [23-5])
 *   .inp — 입력창 기본 (layout.css [24])
 *
 * layout.css [22] 충돌 대응:
 *   #sub span, #sub td, #sub li 등에 color:inherit / background:transparent
 *   → #board-list table td/th, #board-seek 등 더 구체적 선택자로 복원
 *
 * CSS 변수: layout.css의 :root 변수 그대로 사용
 *   --bg-base / --bg-card / --border / --border-bright
 *   --accent-cyan / --accent-orange / --text-primary / --text-secondary
 *
 * 섹션 목록:
 *   [1]  소스코드 영역
 *   [2]  카테고리 + 게시글 수
 *   [3]  게시글 목록 테이블 — #board-list
 *   [4]  페이징 + 버튼 — #board-paging
 *   [5]  검색 폼 — .bd-search-bar
 *   [6]  게시글 보기 — #board-view
 *   [7]  좋아요 — #board-likes
 *   [8]  이전/다음 글 — #board-seek
 *   [9]  게시글 쓰기 — #board-write
 *  [10]  비밀번호 입력 — #board-pwd
 *  [11]  댓글 — #comm-form / #comm-list / #comm-re-form
 *  [12]  팝업 공통 — .bd-popup-tit / .bd-popup-cont
 *  [13]  팝업 내부 — 게시글관리 / 회원정보 / 임시저장
 *  [14]  프로필 이미지 — .board-mb-profileimg
 *  [15]  모바일 @media (max-width:1000px)
 */


/* ════════════════════════════════════
   [1] 소스코드 영역
════════════════════════════════════ */
#mod_board_top_source    { margin-bottom: 40px; }
#mod_board_bottom_source { margin-top: 40px; }


/* ════════════════════════════════════
   [2] 카테고리 + 게시글 수
════════════════════════════════════ */
.board-cat-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* 카테고리 탭 */
#board-cat { margin: 10px 0; }
#board-cat ul > li { display: inline-block; margin: 3px; vertical-align: top; }
#board-cat ul > li a {
    border: 1px solid var(--border, rgba(0,200,255,0.11));
    border-radius: 100px;
    color: var(--text-secondary, #7a8aaa);
    display: block;
    font-size: 14px;
    line-height: 36px;
    padding: 0 18px;
    text-decoration: none;
    transition: all 0.2s;
}
#board-cat ul > li.active a,
#board-cat ul > li:hover a {
    border-color: var(--accent-cyan, #00c8ff);
    color: var(--accent-cyan, #00c8ff);
    background: rgba(0,200,255,0.06);
}

/* 게시글 수 */
#boatd-total {
    color: var(--text-secondary, #7a8aaa);
    font-size: 14px;
    margin: 0;
    white-space: nowrap;
}
#sub #boatd-total,
#boatd-total { color: var(--text-secondary, #7a8aaa) !important; }
#sub #boatd-total strong,
#boatd-total strong {
    color: var(--accent-cyan, #00c8ff) !important;
    font-size: 17px;
    font-weight: 700;
}


/* ════════════════════════════════════
   [3] 게시글 목록 테이블 — #board-list
   ─────────────────────────────────
   layout.css [22] #sub td/th: background:transparent / color:inherit
   → 더 구체적인 선택자로 배경/색상 복원
════════════════════════════════════ */
#board-list { margin-top: 8px; }
#board-list table {
    background: transparent;
    border-top: 2px solid var(--border-bright, rgba(0,200,255,0.36));
    width: 100%;
    border-collapse: collapse;
}

/* thead */
#sub #board-list table thead th,
#board-list table thead th {
    background: rgba(0,200,255,0.05) !important;
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.18));
    border-top: none;
    color: var(--text-secondary, #7a8aaa) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.03em;
    padding: 14px 8px;
    text-align: center;
}

/* tbody td — 기본 좌측 정렬 (제목 포함 모든 열)
   중앙 정렬이 필요한 열(no, 날짜, 조회 등)은 td.no 에서 별도 지정 */
#sub #board-list table tbody td,
#board-list table tbody td {
    background: transparent !important;
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.08));
    color: var(--text-secondary, #7a8aaa) !important;
    font-size: 14px;
    letter-spacing: -0.03em;
    padding: 14px 8px;
    text-align: left;
    transition: background 0.15s;
    vertical-align: middle;
}

/* ── 홀짝 줄 배경 (zebra stripe) ── */
#board-list table tbody tr:nth-child(odd)  td { background: transparent !important; }
#board-list table tbody tr:nth-child(even) td { background: rgba(0,200,255,0.02) !important; }

/* ── hover: 줄 전체 배경 강조 ── */
#board-list table tbody tr:hover td {
    background: rgba(0,200,255,0.07) !important;
    cursor: pointer;
}

/* ── 공지 행: 약간 다른 배경 (zebra 위에 덮음) ── */
#board-list table tbody.notice td { background: rgba(0,200,255,0.04) !important; }
#board-list table tbody.notice tr:hover td { background: rgba(0,200,255,0.09) !important; }

/* No./날짜/조회 등 숫자 열 — 중앙 정렬 */
#sub #board-list table td.no,
#board-list table td.no {
    color: var(--text-dim, #3a4660) !important;
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    text-align: center;        /* 번호/날짜/조회수 열만 중앙 */
}
#board-list table td.no strong { color: var(--accent-orange, #ff6b2b) !important; font-weight: 700; }

/* 제목 열 */
#board-list table td.sbj { text-align: left; padding-left: 12px; }
#board-list table td.sbj a {
    color: var(--text-primary, #e8f0ff);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
    word-break: break-all;
    display: inline-flex;       /* ★ 아이콘과 텍스트를 가로 정렬 */
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 5px;
}
#board-list table td.sbj a:hover { color: var(--accent-cyan, #00c8ff); }

/* ── N/HOT/자물쇠/첨부 아이콘 (<img> 태그로 출력) ──
   CMS가 $new_ico / $hot_ico / $secret_ico / $file_ico 를
   <img src="..."> 태그로 출력하므로 크기를 명시적으로 제한
   (제한 없으면 원본 이미지 크기로 표시되어 레이아웃 깨짐) */
#board-list table td.sbj a img {
    height: 16px !important;    /* ★ 아이콘 높이 16px 고정 */
    width: auto !important;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── <i> FA 아이콘 (secret_ico 등을 FA로 출력하는 경우) ── */
#board-list table td.sbj a i {
    font-size: 12px;
    vertical-align: middle;
    flex-shrink: 0;
    color: var(--text-dim, #3a4660);
}
#board-list table td.sbj a i.fa-lock          { color: var(--text-dim, #3a4660); }   /* 비밀글 자물쇠 */
#board-list table td.sbj a i.fa-paperclip     { color: var(--text-secondary, #7a8aaa); }  /* 첨부파일 */
#board-list table td.sbj a i.fa-fire,
#board-list table td.sbj a i.fa-fire-flame-curved { color: var(--accent-orange, #ff6b2b); }  /* HOT */
#board-list table td.sbj a i.fa-n,
#board-list table td.sbj a i.fa-certificate  { color: var(--accent-cyan, #00c8ff); }  /* NEW */

/* 카테고리 배지
   ★ 모바일에서 display:block 으로 전환되면 한 줄 차지 → inline-flex 유지 */
#board-list table td.sbj .cat {
    background: rgba(0,200,255,0.1);
    border: 1px solid rgba(0,200,255,0.25);
    border-radius: 4px;
    color: var(--accent-cyan, #00c8ff) !important;
    display: inline-flex !important;    /* ★ block 방지 */
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 댓글 수 */
#board-list table td.sbj .cmt {
    color: var(--accent-orange, #ff6b2b) !important;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 700;
    margin-left: 2px;
    flex-shrink: 0;
}

/* 작성자 열 */
#board-list table td.writer { font-size: 13px; }

/* 모바일 전용 td — PC에서 숨김 */
#board-list table td.mobile-info { display: none; }

/* 데이터 없음 */
#sub #board-nodata,
#board-nodata {
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.08));
    color: var(--text-dim, #3a4660) !important;
    display: block;
    font-style: italic;
    padding: 48px 0;
    text-align: center;
    margin-top: -1px;
}
/* ── 게시판 데이터 없음 #board-nodata ── */
#board-nodata {
  /* 아이콘과 텍스트 세로 배치 */
  display: flex;
  flex-direction: column;     /* 위: 아이콘 / 아래: 텍스트 */
  align-items: center;        /* 가로 가운데 정렬 */
  gap: 10px;                  /* 아이콘 ↔ 텍스트 간격 */
 
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 28px 0;
  letter-spacing: .5px;
}

/* ════════════════════════════════════
   [4] 페이징 — #board-paging
   ─────────────────────────────────
   layout.css [22] 충돌 대응:
   
   문제 원인:
     현재 페이지 번호는 <span class="on">3</span> 또는
     <strong>3</strong> 형태로 출력됩니다.
   
     layout.css [22]에 아래 규칙이 있습니다:
       #sub span { color: inherit !important; }          ← span 글자색 덮음
       #sub *    { background-color: transparent !important; } ← 배경색 덮음
   
     이 규칙들이 현재 페이지의 강조 색상(cyan)과 배경을 지워버립니다.
   
   해결:
     #board-paging 안에 더 구체적인 선택자 + !important 로
     layout.css [22]보다 명시도를 높여 현재 페이지 스타일을 복원합니다.
   
   지원 클래스 (CMS별로 다름):
     .on    — 현재 페이지 (가장 일반적)
     .cur   — 현재 페이지 (일부 CMS)
     strong — 현재 페이지를 strong 태그로 감싸는 방식
════════════════════════════════════ */
#board-paging { margin: 20px auto; }

/* ── 페이징 버튼 기본 스타일 복원 ──
   layout.css .paging a/span 이 있지만
   [22] color:inherit 이 span 색상을 덮을 수 있으므로 명시적 복원 */
#sub #board-paging .paging a,
#sub #board-paging .paging span,
#board-paging .paging a,
#board-paging .paging span {
    color: var(--text-secondary, #7a8aaa) !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--border, rgba(0,200,255,0.11)) !important;
    border-radius: 8px;
    transition: all 0.18s;
}

#sub #board-paging .paging a:hover,
#board-paging .paging a:hover {
    color: var(--accent-cyan, #00c8ff) !important;
    background: rgba(0,200,255,0.08) !important;
    border-color: var(--border-bright, rgba(0,200,255,0.36)) !important;
}

/* ── 현재 페이지 강조 복원 ──
   실제 출력 HTML 구조 확인 결과:
     <ul class="paging">
       <li><a href="?page=1">1</a></li>
       <li class="active"><a>2</a></li>   ← 현재 페이지: li에 .active 클래스
     </ul>

   layout.css [22]:
     #sub li { background-color: transparent !important; color: inherit !important; }
     → li.active 의 배경/색상이 덮힘
     → li 안의 a 태그도 color:inherit 으로 덮힘

   해결: #board-paging .paging li.active 와 그 안의 a 를
         더 구체적인 선택자로 복원

   하위 호환 (다른 CMS 방식도 대응):
     .on / .cur / strong 방식도 함께 선언 */

/* li.active 자체 — 배경 처리 */
#sub #board-paging .paging li.active,
#board-paging .paging li.active {
    background: rgba(0,200,255,0.14) !important;          /* 반투명 cyan 배경 */
    border: 1px solid var(--accent-cyan, #00c8ff) !important;
    border-radius: 8px;
}

/* li.active 안의 a — 글자색 처리
   a 태그는 [22]에 없지만 color:inherit 체인으로 덮힐 수 있음 */
#sub #board-paging .paging li.active a,
#board-paging .paging li.active a {
    color: var(--accent-cyan, #00c8ff) !important;        /* cyan 글자색 */
    background: transparent !important;                    /* li 배경을 쓰므로 a는 투명 */
    border: none !important;                               /* li에 border 있으므로 a는 제거 */
    font-weight: 700 !important;
    cursor: default !important;                            /* 현재 페이지 — 클릭 불가 커서 */
}

/* 하위 호환 — .on / .cur / strong 방식 (다른 CMS 대응) */
#sub #board-paging .paging .on,
#sub #board-paging .paging .cur,
#sub #board-paging .paging strong,
#board-paging .paging .on,
#board-paging .paging .cur,
#board-paging .paging strong {
    color: var(--accent-cyan, #00c8ff) !important;
    background: rgba(0,200,255,0.14) !important;
    border-color: var(--accent-cyan, #00c8ff) !important;
    font-weight: 700 !important;
    cursor: default !important;
}


/* ════════════════════════════════════
   [5] 검색 폼 — .bd-search-bar
   ─────────────────────────────────
   구조:
     .bd-search-bar (flex 컨테이너)
       ├ .bd-search-inner (테두리 박스 — select + input + 검색버튼)
       │    ├ .bd-search-select-wrap
       │    ├ .bd-search-input-wrap
       │    └ .bd-search-btn
       └ .bd-search-reset (테두리 밖 독립 초기화 버튼)

   디자인 원칙:
   - 기본: 적당한 폭(max-width:600px), 중앙 정렬
   - 포커스: max-width:800px 까지 확장 (transition)
   - 초기화 버튼은 .bd-search-inner 밖에 위치 (독립 원형 버튼)
════════════════════════════════════ */

/* 검색바 래퍼 — flex 행, 포커스 확장 애니메이션 */
.bd-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;    /* 중앙 정렬 */
    margin-top: 28px;
    margin-bottom: 0;
    /* 포커스 확장: max-width를 transition으로 조절 */
    transition: max-width 0.3s ease;
}

/* 테두리 박스 — select + input + 검색버튼 */
.bd-search-inner {
    display: flex;
    align-items: center;
    /* 기본 폭: 적당하게 */
    width: 560px;
    max-width: 100%;
    background: var(--bg-card, #0c1124);
    border: 1px solid var(--border-bright, rgba(0,200,255,0.36));
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    transition: width 0.35s cubic-bezier(0.4,0,0.2,1),
                border-color 0.2s, box-shadow 0.2s;
}
/* 포커스 시 확장 */
.bd-search-inner:focus-within {
    width: 800px;
    border-color: var(--accent-cyan, #00c8ff);
    box-shadow: 0 0 0 3px rgba(0,200,255,0.1), 0 4px 20px rgba(0,0,0,0.3);
}

/* 셀렉트 래퍼 */
.bd-search-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-right: 1px solid var(--border, rgba(0,200,255,0.18));
    background: rgba(0,200,255,0.05);
    min-width: 120px;
}
.bd-search-select-icon {
    position: absolute; left: 11px;
    color: var(--accent-cyan, #00c8ff);
    font-size: 11px; pointer-events: none; z-index: 1;
}
.bd-search-select-arrow {
    position: absolute; right: 9px;
    color: var(--text-dim, #3a4660);
    font-size: 10px; pointer-events: none; z-index: 1;
}
/* layout.css [22] #sub select → background:transparent 복원 */
#sub .bd-search-select,
.bd-search-select {
    appearance: none; -webkit-appearance: none;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary, #e8f0ff) !important;
    cursor: pointer;
    font-size: 13px; height: 42px;
    padding: 0 26px 0 29px;
    width: 100%; outline: none;
}
#sub .bd-search-select option,
.bd-search-select option {
    background: var(--bg-card, #0c1124);
    color: var(--text-primary, #e8f0ff);
}

/* 키워드 입력 래퍼 */
.bd-search-input-wrap {
    position: relative; display: flex; align-items: center; flex: 1;
}
.bd-search-input-icon {
    position: absolute; left: 12px;
    color: var(--text-dim, #3a4660); font-size: 12px; pointer-events: none;
}
/* layout.css [22] #sub input → background:transparent 복원 */
#sub .bd-search-input,
.bd-search-input {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary, #e8f0ff) !important;
    font-size: 14px; height: 42px; outline: none;
    padding: 0 12px 0 34px; width: 100%;
}
#sub .bd-search-input::placeholder,
.bd-search-input::placeholder { color: var(--text-dim, #3a4660); }

/* 검색 버튼 — .bd-search-inner 안쪽 오른쪽 끝 */
.bd-search-btn {
    display: flex; align-items: center; gap: 5px;
    flex-shrink: 0; height: 42px; padding: 0 18px;
    background: linear-gradient(135deg, var(--accent-cyan, #00c8ff), #0055dd) !important;
    border: none !important;
    border-left: 1px solid rgba(0,200,255,0.25);
    border-radius: 0 9px 9px 0;
    color: #fff !important; cursor: pointer;
    font-size: 13px; font-weight: 600;
    transition: filter 0.2s, transform 0.15s; white-space: nowrap;
}
.bd-search-btn:hover  { filter: brightness(1.15); }
.bd-search-btn:active { transform: scale(0.96); }
.bd-search-btn i      { font-size: 12px; }

/* 초기화 버튼 — .bd-search-inner 밖, 독립 원형 버튼 */
.bd-search-reset {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 38px; height: 38px;
    background: transparent !important;
    border: 1px solid var(--border, rgba(0,200,255,0.22));
    border-radius: 50%;                  /* 원형 */
    color: var(--text-dim, #3a4660) !important;
    font-size: 13px; text-decoration: none;
    transition: all 0.25s;
}
.bd-search-reset:hover {
    background: rgba(255,107,43,0.1) !important;
    border-color: var(--accent-orange, #ff6b2b);
    color: var(--accent-orange, #ff6b2b) !important;
    transform: rotate(-45deg);
}


/* ════════════════════════════════════
   [6] 게시글 보기 — #board-view
════════════════════════════════════ */
#board-view .view-tit {
    border-top: 2px solid var(--border-bright, rgba(0,200,255,0.36));
}
#board-view .view-tit h3 {
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.11));
    color: var(--text-primary, #e8f0ff);
    font-size: 22px; font-weight: 700;
    letter-spacing: -0.03em; line-height: 1.4;
    padding: 28px 20px; position: relative;
}
#board-view .view-tit h3 em {
    color: var(--text-secondary, #7a8aaa);
    display: block; font-size: 13px;
    font-style: normal; font-weight: 400;
    letter-spacing: -0.02em; margin-bottom: 8px;
}
/* info 목록 */
#board-view .view-tit .info {
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.11));
    padding: 20px; text-align: left;
    display: flex; flex-wrap: wrap; gap: 0;
}
#sub #board-view .view-tit .info li,
#board-view .view-tit .info li {
    color: var(--text-secondary, #7a8aaa) !important;
    display: inline-block; font-size: 13px;
    letter-spacing: -0.03em; margin: 0 30px 0 0;
}
#sub #board-view .view-tit .info li strong,
#board-view .view-tit .info li strong {
    color: var(--text-dim, #3a4660) !important;
    margin-right: 6px;
}

/* 본문 테이블 — width:100% 명시로 전체 폭 확보 */
#sub #board-view table,
#board-view table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;       /* colgroup 비율 고정 */
}
#sub #board-view table td,
#board-view table td,
#sub #board-view table th,
#board-view table th {
    background: transparent !important;
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.08));
    color: var(--text-secondary, #7a8aaa) !important;
    letter-spacing: -0.03em; padding: 14px 10px;
    word-break: break-word;    /* 긴 내용 줄바꿈 보장 */
}
/* 본문 영역 — 패딩 줄여 실질 폭 최대화 */
#board-view .article-wrap { padding: 28px 14px; vertical-align: top; }
#board-view .article      { min-height: 400px; color: var(--text-primary, #e8f0ff); line-height: 1.8; }
/* 이미지: 고정 800px 제거 → 부모 폭에 맞게 */
#board-view .article img  { height: auto !important; max-width: 100% !important; }
#board-view .img-wrap     { margin-bottom: 50px; text-align: center; }


/* ════════════════════════════════════
   [6-1] 게시글 본문 콘텐츠 스타일 — .article .nostyle
   ─────────────────────────────────
   이 사이트의 게시글은 카카오 티스토리 에디터(또는 유사 에디터)에서
   작성된 HTML이 그대로 저장됩니다.
   모든 스타일이 인라인 style="" 속성으로 지정되어 있어서
   layout.css [22]의 color:inherit, background-color:transparent 규칙이
   글자색·배경색을 덮어버리는 문제가 생깁니다.

   해결 방법:
     #sub .article .nostyle 안의 요소들을
     더 구체적인 선택자 + !important 로 다크테마에 맞게 재정의합니다.

   ★ 인라인 style 우선순위:
     인라인 style > 외부 CSS !important 는 아닙니다.
     !important가 붙은 외부 CSS 선택자가 인라인보다 우선합니다.
════════════════════════════════════ */

/* ──────────────────────────────────
   본문 컨테이너 기본값
   .nostyle = 에디터가 감싸는 div,
   여기서 기본 글자색과 줄 간격을 설정합니다
────────────────────────────────── */
#board-view .article .nostyle {
    color: var(--text-primary, #e8f0ff);   /* 기본 글자색 — 밝은 흰색 */
    line-height: 1.9;                       /* 읽기 좋은 줄 간격 */
    word-break: break-word;                 /* 긴 단어·URL 줄바꿈 */
}

/* ──────────────────────────────────
   단락 (p 태그)
   에디터가 color:#555 를 인라인으로 넣지만
   다크 배경에서는 너무 어두우므로 밝은 색으로 재정의합니다
────────────────────────────────── */
#sub #board-view .article .nostyle p,
#board-view .article .nostyle p {
    color: var(--text-secondary, #c0cce4) !important;  /* 본문 글자 — 부드러운 회청색 */
    line-height: 2 !important;                          /* 넉넉한 줄 간격 */
    margin-bottom: 20px !important;                     /* 단락 간 여백 */
    word-break: break-all;
}

/* ──────────────────────────────────
   대제목 (h2)
   에디터가 border-left, border-bottom 을 인라인으로 넣습니다.
   회색 선(#666)을 다크 테마의 cyan 계열로 덮어씁니다.
   ★ !important 를 써야 인라인 style을 이깁니다
────────────────────────────────── */
#sub #board-view .article .nostyle h2,
#board-view .article .nostyle h2 {
    color: var(--text-primary, #e8f0ff) !important;      /* 제목 글자색 */
    border-left-color:  var(--accent-cyan, #00c8ff) !important;  /* 왼쪽 굵은 선 → cyan */
    border-bottom-color: rgba(0,200,255,0.35) !important;        /* 하단 선 → 반투명 cyan */
    margin: 36px 0 18px !important;
    font-size: 1.3em !important;
    font-weight: 600 !important;
}

/* ──────────────────────────────────
   소제목 (h3)
   에디터가 background-color:#dedede(밝은 회색)를 인라인으로 넣습니다.
   다크 테마에 맞게 어두운 반투명 cyan 배경으로 바꿉니다
────────────────────────────────── */
#sub #board-view .article .nostyle h3,
#board-view .article .nostyle h3 {
    color: var(--text-primary, #e8f0ff) !important;      /* 소제목 글자색 */
    background-color: rgba(0,200,255,0.10) !important;   /* 어두운 cyan 배경 (#dedede 대체) */
    border: 1px solid rgba(0,200,255,0.22) !important;   /* 얇은 테두리 추가 */
    border-radius: 8px !important;
    margin: 26px 0 16px !important;
    font-size: 1.05em !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
}

/* ──────────────────────────────────
   코드 블록 — pre + code.hljs
   에디터가 background:rgb(250,250,250)(흰색)을 인라인으로 넣지만
   layout.css [22]의 background:transparent 로 배경이 사라집니다.
   다크 테마용 코드 배경색으로 복원합니다
────────────────────────────────── */
#sub #board-view .article .nostyle pre,
#board-view .article .nostyle pre {
    background-color: rgba(0,0,0,0) !important;          /* pre 자체는 투명 */
    border: 1px solid var(--border, rgba(0,200,255,0.18)) !important;
    border-radius: 10px !important;
    overflow: hidden !important;                          /* code가 border-radius를 따르게 */
    margin: 16px 0 24px !important;
}

/* code.hljs — 코드 내용이 담기는 실제 박스 */
#sub #board-view .article .nostyle pre code,
#board-view .article .nostyle pre code {
    display: block !important;
    background-color: var(--bg-card, #0c1124) !important;  /* 다크 배경 */
    color: #abb2bf !important;                              /* 기본 코드 색 — 밝은 회색 */
    font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    padding: 18px 20px !important;
    overflow-x: auto !important;                            /* 긴 코드 가로 스크롤 */
    white-space: pre !important;
    border-radius: 9px !important;
}

/* ──────────────────────────────────
   코드 하이라이팅 색상 — hljs 토큰
   에디터가 인라인으로 색상을 지정하지만
   다크 배경에서 잘 보이도록 밝게 재정의합니다
   (원본: 밝은 배경 기준 색상 → 다크 배경용으로 조정)
────────────────────────────────── */
/* 키워드 (if, else, in, for ...) — 연보라 */
#board-view .article .nostyle .hljs-keyword { color: #c678dd !important; }

/* 문자열 ("hello", '값' ...) — 연초록 */
#board-view .article .nostyle .hljs-string  { color: #98c379 !important; }

/* 내장 함수 (echo, print ...) — 연황금 */
#board-view .article .nostyle .hljs-built_in { color: #e5c07b !important; }

/* 주석 (# 이나 // 로 시작하는 설명) — 어두운 회색 */
#board-view .article .nostyle .hljs-comment  { color: #5c6370 !important; font-style: italic; }

/* 숫자 (128, 256 ...) — 연주황 */
#board-view .article .nostyle .hljs-number   { color: #d19a66 !important; }

/* 함수명 (my_function ...) — 연파랑 */
#board-view .article .nostyle .hljs-function,
#board-view .article .nostyle .hljs-title    { color: #61afef !important; }

/* 변수명 ($var ...) — 연빨강 */
#board-view .article .nostyle .hljs-variable { color: #e06c75 !important; }

/* ──────────────────────────────────
   더보기 박스 — div[data-ke-type="moreLess"]
   에디터가 background:#fafafa, border:1px dashed #ddd 를 인라인으로 넣습니다.
   다크 테마에 맞게 어두운 배경과 점선 테두리로 바꿉니다
────────────────────────────────── */
#sub #board-view .article .nostyle div[data-ke-type="moreLess"],
#board-view .article .nostyle div[data-ke-type="moreLess"] {
    background-color: rgba(0,200,255,0.04) !important;   /* 매우 연한 cyan 배경 */
    border-color: rgba(0,200,255,0.25) !important;        /* cyan 점선 테두리 */
    border-radius: 10px !important;
    color: var(--text-secondary, #7a8aaa) !important;
    padding: 16px 20px !important;
    margin: 16px 0 !important;
}

/* 더보기 버튼 (.btn-toggle-moreless) */
#board-view .article .nostyle .btn-toggle-moreless {
    color: var(--accent-cyan, #00c8ff) !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: opacity 0.2s;
}
#board-view .article .nostyle .btn-toggle-moreless:hover { opacity: 0.75; }

/* ──────────────────────────────────
   인라인 코드 (<code> 단독 사용시)
   pre 없이 문장 안에 쓰인 `코드` 스타일
────────────────────────────────── */
#board-view .article .nostyle code:not(.hljs) {
    background: rgba(0,200,255,0.08) !important;
    border: 1px solid rgba(0,200,255,0.18) !important;
    border-radius: 4px !important;
    color: var(--accent-cyan, #00c8ff) !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 0.88em !important;
    padding: 2px 6px !important;
}

/* ──────────────────────────────────
   링크 (a 태그)
────────────────────────────────── */
#sub #board-view .article .nostyle a,
#board-view .article .nostyle a {
    color: var(--accent-cyan, #00c8ff) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s;
}
#board-view .article .nostyle a:hover { opacity: 0.8; }

/* ──────────────────────────────────
   강조 (strong, b 태그)
────────────────────────────────── */
#sub #board-view .article .nostyle strong,
#sub #board-view .article .nostyle b,
#board-view .article .nostyle strong,
#board-view .article .nostyle b {
    color: var(--text-primary, #e8f0ff) !important;
    font-weight: 700 !important;
}

/* ──────────────────────────────────
   구분선 (hr 태그)
────────────────────────────────── */
#board-view .article .nostyle hr {
    border: none !important;
    border-top: 1px solid var(--border, rgba(0,200,255,0.18)) !important;
    margin: 28px 0 !important;
}

/* ──────────────────────────────────
   인용 (blockquote 태그)
────────────────────────────────── */
#board-view .article .nostyle blockquote {
    background: rgba(0,200,255,0.04) !important;
    border-left: 4px solid var(--accent-cyan, #00c8ff) !important;
    border-radius: 0 8px 8px 0 !important;
    color: var(--text-secondary, #7a8aaa) !important;
    margin: 16px 0 !important;
    padding: 12px 20px !important;
}

/* ──────────────────────────────────
   표 (table 태그) — 본문 안 인라인 테이블
────────────────────────────────── */
#sub #board-view .article .nostyle table,
#board-view .article .nostyle table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 16px 0 !important;
}
#sub #board-view .article .nostyle table th,
#board-view .article .nostyle table th {
    background: rgba(0,200,255,0.08) !important;
    color: var(--text-primary, #e8f0ff) !important;
    border: 1px solid var(--border, rgba(0,200,255,0.18)) !important;
    padding: 10px 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
}
#sub #board-view .article .nostyle table td,
#board-view .article .nostyle table td {
    background: transparent !important;
    color: var(--text-secondary, #c0cce4) !important;
    border: 1px solid var(--border, rgba(0,200,255,0.12)) !important;
    padding: 10px 14px !important;
}
#board-view .article .nostyle table tr:nth-child(even) td {
    background: rgba(255,255,255,0.02) !important;  /* 짝수 행 줄무늬 */
}

/* ──────────────────────────────────
   목록 (ul, ol, li 태그)
────────────────────────────────── */
#sub #board-view .article .nostyle ul,
#sub #board-view .article .nostyle ol,
#board-view .article .nostyle ul,
#board-view .article .nostyle ol {
    color: var(--text-secondary, #c0cce4) !important;
    padding-left: 24px !important;
    margin: 10px 0 16px !important;
}
#sub #board-view .article .nostyle li,
#board-view .article .nostyle li {
    color: var(--text-secondary, #c0cce4) !important;
    line-height: 1.9 !important;
    margin-bottom: 4px !important;
}



/* 첨부파일 */
#board-view .fileinfo a {
    color: var(--accent-cyan, #00c8ff);
    font-size: 14px; letter-spacing: -0.03em;
    word-break: break-all; text-decoration: none;
    transition: opacity 0.2s;
}
#board-view .fileinfo a:hover { opacity: 0.8; }
#board-view .fileinfo .byte,
#board-view .fileinfo .cnt {
    color: var(--text-dim, #3a4660);
    font-size: 13px; margin-right: 8px;
}

/* 삭제된 글 박스 */
#board-view .drop-box {
    background: rgba(255,107,43,0.06);
    border: 1px solid rgba(255,107,43,0.28);
    border-left: 3px solid var(--accent-orange, #ff6b2b);
    border-radius: 8px; color: var(--text-secondary, #7a8aaa);
    font-size: 13px; line-height: 1.6;
    padding: 16px 18px; text-align: center;
}


/* ════════════════════════════════════
   [7] 좋아요 — #board-likes
════════════════════════════════════ */
#board-likes          { margin-top: 60px; text-align: center; }
#board-likes > button {
    background: none; border: none;
    display: inline-block; margin: 0 12px; width: 36px; cursor: pointer;
}
#board-likes > button img { height: auto; width: 28px; }
#board-likes > button p   {
    color: var(--text-secondary, #7a8aaa);
    display: block; font-size: 12px;
    font-weight: 700; margin-top: 4px;
}


/* ════════════════════════════════════
   [8] 이전/다음 글 — #board-seek
════════════════════════════════════ */
#board-seek           { margin: 40px 0; }
#board-seek > li {
    border: 1px solid var(--border, rgba(0,200,255,0.11));
    line-height: 50px;
    margin-bottom: -1px;
    padding: 0 200px 0 110px;
    position: relative;
    transition: background 0.15s;
}
#board-seek > li:hover { background: rgba(0,200,255,0.04); }

#sub #board-seek > li strong,
#board-seek > li strong {
    background: rgba(0,200,255,0.06) !important;
    color: var(--text-secondary, #7a8aaa) !important;
    font-weight: 600; height: 100%;
    left: 0; letter-spacing: -0.03em;
    position: absolute; text-align: center;
    top: 0; width: 90px;
}
#board-seek > li strong i { color: var(--accent-cyan, #00c8ff); margin-left: 4px; }
#board-seek > li .sbj {
    color: var(--text-primary, #e8f0ff);
    display: block; font-size: 14px;
    font-weight: 500; letter-spacing: -0.03em;
    overflow: hidden; text-decoration: none;
    text-overflow: ellipsis; white-space: nowrap;
    transition: color 0.2s;
}
#board-seek > li .sbj:hover { color: var(--accent-cyan, #00c8ff); }
#board-seek > li .sbj .cmt {
    color: var(--accent-orange, #ff6b2b);
    font-family: Arial, Tahoma; font-size: 12px;
    font-weight: 700; margin-left: 8px;
}
#board-seek > li .writer { position: absolute; right: 100px; top: 0; color: var(--text-dim, #3a4660); font-size: 13px; }
#board-seek > li .date   { color: var(--text-dim, #3a4660); font-size: 12px; position: absolute; right: 20px; top: 0; }
#board-ft-list { margin-top: 120px; }


/* ════════════════════════════════════
   [9] 게시글 쓰기 — #board-write
   ─ 수정 이력:
     · 카테고리 셀렉트: width 100% → auto(최대 280px), 커스텀 디자인 추가
     · 옵션행(공지·비밀·이메일): flex 가로 배치 + 간격 정돈
     · 하단 버튼(.btn-wrap): 모바일에서 동일 크기 균등 배치
════════════════════════════════════ */

/* ── 쓰기 폼 제목 ── */
#board-write h3 {
    color: var(--text-primary, #e8f0ff);
    font-size: 18px; margin-bottom: 16px;
    letter-spacing: -0.03em;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.18));
}

/* ── 쓰기 테이블 기본 구조 ── */
#board-write table { width: 100%; border-collapse: collapse; }

/* th (라벨 셀) */
#sub #board-write table tr > th,
#board-write table tr > th {
    background: rgba(0,200,255,0.04) !important;
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.11));
    border-top: none;
    color: var(--text-secondary, #7a8aaa) !important;
    font-size: 13px; font-weight: 600;
    padding: 14px 16px; text-align: left;
    white-space: nowrap;        /* ★ th가 줄어들어 내용 줄바꿈 방지 */
    width: 120px;
}

/* td (입력 셀) */
#sub #board-write table tr > td,
#board-write table tr > td {
    background: transparent !important;
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.08));
    color: var(--text-primary, #e8f0ff) !important;
    letter-spacing: -0.03em;
    padding: 12px 10px;         /* ★ 14px → 12px: 행 간격 조금 줄여 답답함 해소 */
}
#board-write table tbody tr:first-child > * {
    border-top: 1px solid var(--border-bright, rgba(0,200,255,0.36));
}

/* ── [9-1] 카테고리 셀렉트 ──────────────────────────────
   문제: class="inp w100" 때문에 td 전체 폭으로 늘어남
   해결: 커스텀 셀렉트 래퍼(.bd-write-select-wrap)로 감싸서
         최대 280px 고정, 화살표 아이콘 추가
   ─ PHP에서 <select id="category" class="inp w100"> 로 출력되므로
     #board-write 안의 select#category 를 직접 오버라이드
─────────────────────────────────────────────────────── */

/* 셀렉트 래퍼 — position:relative 로 화살표 아이콘 포함 */
#board-write .bd-write-select-wrap {
    display: inline-flex;
    align-items: center;
    position: relative;
    max-width: 280px;           /* ★ 화면 꽉 차는 문제 해결 */
    width: 100%;
}
/* 커스텀 화살표 아이콘 — PHP에서 <i class="bd-write-select-arrow"> 로 출력
   ::after 방식은 FA 로드 타이밍에 따라 깨질 수 있으므로 i 태그 사용 */
#board-write .bd-write-select-wrap .bd-write-select-arrow {
    position: absolute; right: 12px;
    color: var(--text-dim, #3a4660);
    font-size: 10px; pointer-events: none;
}

/* 셀렉트 본체 — layout.css [22]의 w100 강제 폭을 덮어씀 */
#sub #board-write table select#category,
#board-write table select#category,
#sub #board-write .bd-write-select-wrap select,
#board-write .bd-write-select-wrap select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border, rgba(0,200,255,0.22)) !important;
    border-radius: 8px !important;
    color: var(--text-primary, #e8f0ff) !important;
    cursor: pointer;
    font-size: 14px !important;
    height: 40px;
    outline: none;
    padding: 0 32px 0 12px !important;  /* 오른쪽 화살표 공간 확보 */
    transition: border-color 0.2s;
    width: 100% !important;             /* 래퍼가 max-width 를 제한 */
}
#sub #board-write table select#category:focus,
#board-write table select#category:focus {
    border-color: var(--accent-cyan, #00c8ff) !important;
    box-shadow: 0 0 0 3px rgba(0,200,255,0.1);
}
/* 셀렉트 옵션 드롭다운 배경 */
#sub #board-write table select#category option,
#board-write table select#category option {
    background: var(--bg-card, #0c1124) !important;
    color: var(--text-primary, #e8f0ff) !important;
}

/* ── [9-2] 옵션 행 (공지·비밀글·이메일) ─────────────────
   문제: $opt_notice 등이 inline 나열되어 간격 없이 붙음
   해결: td에 flex 설정 + gap으로 균일 간격
─────────────────────────────────────────────────────── */
#sub #board-write table td.opt,
#board-write table td.opt {
    display: flex !important;
    flex-wrap: wrap;            /* 모바일에서 넘치면 줄바꿈 */
    align-items: center;
    gap: 6px 16px;              /* 위아래 6px, 좌우 16px */
    padding: 10px 10px !important;
}
/* 옵션 라벨(label) — 체크박스·라디오 옆 텍스트 */
#board-write table td.opt label,
#board-write table td.opt span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary, #7a8aaa);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
/* 체크박스·라디오 버튼 자체 */
#board-write table td.opt input[type="checkbox"],
#board-write table td.opt input[type="radio"] {
    accent-color: var(--accent-cyan, #00c8ff);
    cursor: pointer;
    height: 15px; width: 15px;
    margin: 0;
    vertical-align: middle;
    flex-shrink: 0;
}
/* opt td가 별도 클래스 없이 3번째 tr > td 일 경우도 커버
   (CMS가 class="opt"를 붙이지 않을 수 있으므로) */
#board-write table tr:has(label) > td:not(.subject):not(.article) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 10px 10px !important;
}

/* ── 제목 입력 ── */
#board-write table td.subject { padding: 10px 0; }
#board-write table td.subject .inp {
    font-size: 16px; height: 46px; padding: 0 16px;
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border, rgba(0,200,255,0.18)) !important;
    border-radius: 8px;
    color: var(--text-primary, #e8f0ff) !important;
    outline: none; transition: border-color 0.2s;
}
#board-write table td.subject .inp:focus {
    border-color: var(--accent-cyan, #00c8ff) !important;
    box-shadow: 0 0 0 3px rgba(0,200,255,0.1);
}

/* ── 본문 에디터 영역 ── */
#board-write table td.article { border: none; padding: 0; }

/* ── 첨부파일 ── */
#board-write .bytetxt {
    color: var(--text-dim, #3a4660); display: block; font-size: 13px; margin-top: 4px;
}
#board-write .uploaded_wrap {
    background: rgba(0,200,255,0.04);
    border: 1px solid var(--border, rgba(0,200,255,0.11));
    border-radius: 8px; margin-top: 8px; padding: 12px 16px;
}
#board-write .uploaded {
    color: var(--text-secondary, #7a8aaa); display: block; font-size: 13px; margin-bottom: 4px;
}

/* ── 임시저장 버튼 박스 ── */
.temp-btn {
    border: 1px solid var(--border-bright, rgba(0,200,255,0.36));
    border-radius: 8px; display: inline-flex;
    height: 38px; overflow: hidden;
}
.temp-btn button {
    display: inline-block; line-height: 38px;
    padding: 0 14px; vertical-align: middle;
    background: none; border: none; cursor: pointer;
    font-size: 13px; color: var(--text-secondary, #7a8aaa);
    transition: all 0.2s;
}
.temp-btn button:hover { background: rgba(0,200,255,0.08); color: var(--text-primary, #e8f0ff); }
.temp-btn button.load-btn {
    border-left: 1px solid var(--border, rgba(0,200,255,0.18));
    background: rgba(0,200,255,0.06);
}
.temp-btn button.load-btn strong {
    color: var(--accent-cyan, #00c8ff); font-size: 13px; font-weight: 700;
}
.temp-btn button.save-btn { color: var(--text-secondary, #7a8aaa); }


/* ════════════════════════════════════
   [10] 비밀번호 입력 — #board-pwd
════════════════════════════════════ */
#board-pwd {
    background: var(--bg-card, #0c1124);
    border: 1px solid var(--border-bright, rgba(0,200,255,0.36));
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    box-sizing: border-box;
    margin: 40px auto; overflow: hidden; width: 400px;
}
#board-pwd table { width: 100%; border-collapse: collapse; }
#sub #board-pwd table thead th,
#board-pwd table thead th {
    background: rgba(0,200,255,0.06) !important;
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.18));
    color: var(--text-secondary, #7a8aaa) !important;
    font-size: 14px; font-weight: 600; padding: 18px;
    text-align: center;
}
#sub #board-pwd table tbody td,
#board-pwd table tbody td {
    background: transparent !important;
    color: var(--text-primary, #e8f0ff) !important;
    padding: 20px; text-align: center;
}
#board-pwd .inp {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border, rgba(0,200,255,0.18)) !important;
    border-radius: 8px; color: var(--text-primary, #e8f0ff) !important;
    height: 40px; margin-right: 8px; padding: 0 14px;
    outline: none; transition: border-color 0.2s;
}
#board-pwd .inp:focus { border-color: var(--accent-cyan, #00c8ff) !important; }


/* ════════════════════════════════════
   [11] 댓글 — #comm-form / #comm-list / #comm-re-form
════════════════════════════════════ */
#board-comment { margin: 50px 0; }
#board-comment .total {
    color: var(--text-secondary, #7a8aaa);
    display: block; font-size: 13px;
    letter-spacing: -0.03em; margin-bottom: 12px;
}
#sub #board-comment .total strong,
#board-comment .total strong {
    color: var(--text-primary, #e8f0ff) !important; font-size: 16px;
}

/* 댓글 입력 */
#comm-form           { margin-bottom: 16px; }
#comm-form fieldset  { position: relative; background: var(--bg-card, #0c1124); border: 1px solid var(--border, rgba(0,200,255,0.18)); border-radius: 10px; overflow: hidden; }
#comm-form fieldset > * { float: left; }
#comm-form fieldset textarea {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary, #e8f0ff) !important;
    min-height: 100px; padding: 14px 16px; resize: none; width: 87%;
    font-size: 14px; outline: none;
}
#comm-form fieldset textarea::placeholder { color: var(--text-dim, #3a4660); }
#comm-form fieldset .sbm {
    background: linear-gradient(135deg, var(--accent-cyan, #00c8ff), #0055dd) !important;
    border: none !important; border-radius: 0 9px 9px 0;
    color: #fff !important; cursor: pointer;
    font-size: 14px; font-weight: 700;
    height: 100px; width: 13%; min-width: 60px;
    transition: filter 0.2s;
}
#comm-form fieldset .sbm:hover { filter: brightness(1.12); }

/* 게스트 작성자 입력 */
.gue-writer { margin-bottom: 6px; }
.gue-writer .inp {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border, rgba(0,200,255,0.18)) !important;
    border-radius: 8px; color: var(--text-primary, #e8f0ff) !important;
    height: 36px; padding: 0 12px; font-size: 13px; outline: none;
}

/* 댓글 목록 */
#comm-list                { list-style: none; }
#comm-list > li {
    background: var(--bg-card, #0c1124);
    border: 1px solid var(--border, rgba(0,200,255,0.11));
    border-radius: 10px; margin: 8px 0; position: relative;
    transition: border-color 0.2s;
}
#comm-list > li:hover     { border-color: var(--border-bright, rgba(0,200,255,0.36)); }
#comm-list .comm-list-li.reply { margin-left: 24px; border-left: 2px solid rgba(0,200,255,0.22); }

#comm-list .comm-btn { position: absolute; right: 14px; top: 14px; }
#comm-list .comm-btn a {
    color: var(--text-dim, #3a4660);
    font-size: 12px; letter-spacing: -0.03em;
    margin-left: 8px; text-decoration: none;
    transition: color 0.2s;
}
#comm-list .comm-btn a:hover { color: var(--accent-cyan, #00c8ff); }

#comm-list .info { border-bottom: 1px solid var(--border, rgba(0,200,255,0.08)); padding: 12px 16px; }
#sub #comm-list .info .writer,
#comm-list .info .writer {
    color: var(--text-primary, #e8f0ff) !important; margin-right: 10px;
}
#sub #comm-list .info .date,
#comm-list .info .date { color: var(--text-dim, #3a4660) !important; font-size: 12px; }

#comm-list .comment {
    background: transparent; line-height: 1.7; padding: 12px 16px;
}
#sub #comm-list .comment > p,
#comm-list .comment > p {
    color: var(--text-secondary, #7a8aaa) !important;
    display: inline; font-size: 14px;
}
#comm-list .comment > a[data-profile] { color: var(--accent-cyan, #00c8ff); font-weight: 700; }

/* 대댓글 입력 */
#comm-re-form {
    background: rgba(0,200,255,0.03);
    border-top: 1px solid var(--border, rgba(0,200,255,0.11));
    display: none; padding: 14px 20px 14px 44px; position: relative;
}
#comm-re-form .rep-ico { height: 13px; left: 16px; position: absolute; top: 18px; width: 13px; }
#comm-re-form fieldset { padding-right: 160px; position: relative; background: none; border: none; }
#comm-re-form fieldset textarea {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border, rgba(0,200,255,0.18)) !important;
    border-radius: 8px; color: var(--text-primary, #e8f0ff) !important;
    min-height: 100px; padding: 10px 14px; resize: none; width: 100%;
    font-size: 13px; outline: none; box-sizing: border-box;
}
#comm-re-form fieldset .re_sbm {
    background: linear-gradient(135deg, var(--accent-cyan, #00c8ff), #0055dd) !important;
    border: none !important; border-radius: 8px;
    color: #fff !important; cursor: pointer; font-size: 14px; font-weight: 700;
    height: 100px; position: absolute; right: 0; top: 0; width: 150px;
    transition: filter 0.2s;
}
#comm-re-form fieldset .re_sbm:hover { filter: brightness(1.12); }


/* ════════════════════════════════════
   [12] 팝업 공통 — .bd-popup-tit / .bd-popup-cont
   ─────────────────────────────────
   layout.css #pop-view .tit / .cont 와 분리
   → .bd-popup-* 접두사 사용
════════════════════════════════════ */
/* 팝업 컨테이너 — 기존 #ctrpop/#mbpop/#temppop에 적용 */
#ctrpop, #mbpop, #temppop {
    background: var(--bg-card, #0c1124) !important;
    border: 1px solid var(--border-bright, rgba(0,200,255,0.36));
    border-top: 2px solid var(--accent-cyan, #00c8ff);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 40px rgba(0,200,255,0.06);
    box-sizing: border-box; display: none;
    height: 380px; left: 50%;
    margin-left: -200px; margin-top: -190px;
    overflow: hidden; padding-top: 60px;
    position: fixed; top: 50%; width: 400px; z-index: 801; /* 딤배경(800)보다 높게 */
}
#temppop { margin-left: -300px; width: 600px; }

/* 팝업 딤 배경 */
#ctrpop-bg, #mbpop-bg, #temppop-bg {
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    display: none; height: 100%; left: 0;
    position: fixed; top: 0; width: 100%; z-index: 800; /* 헤더(400)보다 높게 */
}

/* 팝업 헤더 .bd-popup-tit → 기존 .tit 스타일 오버라이드 */
.bd-popup-tit,
#ctrpop .tit, #mbpop .tit, #temppop .tit {
    background: rgba(0,200,255,0.06) !important;
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.18)) !important;
    box-sizing: border-box; left: 0; line-height: 60px;
    padding: 0 20px; position: absolute; top: 0;
    width: 100%; z-index: 802; /* 팝업 컨테이너(801)보다 높게 */
    display: flex; align-items: center; justify-content: space-between;
}
.bd-popup-tit h2,
#ctrpop .tit h2, #mbpop .tit h2, #temppop .tit h2 {
    color: var(--text-primary, #e8f0ff) !important;
    font-size: 15px; font-weight: 700; letter-spacing: -0.03em;
}
.bd-popup-tit .close,
#ctrpop .tit .close, #mbpop .tit .close, #temppop .tit .close {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border, rgba(0,200,255,0.18)) !important;
    border-radius: 8px;
    color: var(--text-secondary, #7a8aaa) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; height: 34px; text-decoration: none;
    transition: all 0.2s; width: 34px;
}
.bd-popup-tit .close:hover,
#ctrpop .tit .close:hover, #mbpop .tit .close:hover, #temppop .tit .close:hover {
    background: rgba(255,255,255,0.1) !important;
    color: var(--text-primary, #e8f0ff) !important;
    border-color: var(--border-bright, rgba(0,200,255,0.36)) !important;
}

/* 팝업 본문 */
.bd-popup-cont,
#ctrpop .cont, #mbpop .cont, #temppop .cont {
    box-sizing: border-box; height: 100%;
    overflow-y: auto; padding: 18px 20px;
    background: transparent !important;
}


/* ════════════════════════════════════
   [13] 팝업 내부 스타일
════════════════════════════════════ */

/* ── 게시글 관리 팝업 ── */
#sub #ctrpop .cont p,
#ctrpop .cont p {
    color: var(--text-secondary, #7a8aaa) !important;
    font-size: 14px; letter-spacing: -0.03em;
    margin-bottom: 12px; text-align: center;
}
#sub #ctrpop .cont p strong,
#ctrpop .cont p strong {
    color: var(--accent-cyan, #00c8ff) !important;
    font-size: 20px; margin: 0 4px;
}
.ctr-btn { text-align: center; margin-bottom: 12px; }

/* OR 구분선 */
#sub #ctrpop .cont em,
#ctrpop .cont em {
    color: var(--text-dim, #3a4660) !important;
    display: block; font-size: 12px; font-style: normal;
    letter-spacing: 2px; margin: 16px 0;
    position: relative; text-align: center;
}
#ctrpop .cont em::before,
#ctrpop .cont em::after {
    background: var(--border, rgba(0,200,255,0.18));
    content: ''; display: block; height: 1px;
    position: absolute; top: 50%; width: 42%;
}
#ctrpop .cont em::before { left: 0; }
#ctrpop .cont em::after  { right: 0; }

/* select */
#sub #ctrpop .cont select,
#ctrpop .cont select {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border, rgba(0,200,255,0.18)) !important;
    border-radius: 8px; color: var(--text-primary, #e8f0ff) !important;
    height: 40px; margin-bottom: 10px; padding: 0 12px; width: 100%;
    outline: none;
}

/* ── 회원정보 팝업 ── */
.mb-tbl { width: 100%; border-collapse: collapse; }
#sub .mb-tbl tbody tr > th,
.mb-tbl tbody tr > th {
    background: rgba(0,200,255,0.04) !important;
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.08)) !important;
    color: var(--text-primary, #e8f0ff) !important;
    font-size: 13px; font-weight: 600; padding: 10px 14px; text-align: left;
    width: 90px;
}
#sub .mb-tbl tbody tr > td,
.mb-tbl tbody tr > td {
    background: transparent !important;
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.08)) !important;
    color: var(--text-secondary, #7a8aaa) !important;
    font-size: 13px; padding: 10px 14px;
}
.sment {
    color: var(--text-secondary, #7a8aaa);
    display: block; font-size: 13px;
    letter-spacing: -0.03em; line-height: 1.7;
    margin-bottom: 16px; text-align: center;
}
.mb-btn { text-align: center; }
.mb-btn.mt10 { margin-top: 10px; }

/* ── 임시저장 팝업 ──
   .tbl 은 layout.css #message-send .tbl 과 이름이 겹침
   → #temppop 부모를 명시해서 완전 분리 */
#temppop .tbl { width: 100%; border-collapse: collapse; }
#sub #temppop .tbl tbody tr > td,
#temppop .tbl tbody tr > td {
    background: transparent !important;
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.08)) !important;
    color: var(--text-secondary, #7a8aaa) !important;
    font-size: 14px; padding: 12px 8px;
}
#temppop .tbl tbody td .sbj {
    color: var(--text-primary, #e8f0ff);
    display: block; font-size: 14px; font-weight: 500;
    letter-spacing: -0.03em; line-height: 1.5; text-decoration: none;
    transition: color 0.2s;
}
#temppop .tbl tbody td .sbj:hover { color: var(--accent-cyan, #00c8ff); }
#temppop .tbl tbody td .date {
    color: var(--text-dim, #3a4660); display: block;
    font-family: var(--font-mono, monospace); font-size: 12px;
    letter-spacing: -0.03em; text-align: right;
}
#temppop .tbl tbody td .remove-btn {
    color: var(--text-dim, #3a4660);
    font-size: 14px; text-decoration: none; transition: color 0.2s;
}
#temppop .tbl tbody td .remove-btn:hover { color: var(--accent-orange, #ff6b2b); }


/* ════════════════════════════════════
   [14] 프로필 이미지
════════════════════════════════════ */
.board-mb-profileimg {
    background-position: center center;
    background-size: cover;
    border-radius: 50%;
    display: inline-block;
    height: 24px; position: relative;
    vertical-align: middle; width: 24px;
}
.board-mb-profileimg::after {
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    box-sizing: border-box; content: '';
    display: block; height: 100%;
    left: 0; position: absolute; top: 0; width: 100%;
}


/* ════════════════════════════════════
   [15] 모바일 @media (max-width:1000px)
════════════════════════════════════ */
@media screen and (max-width: 1000px) {

    #mod_board_top_source    { margin-bottom: 20px; }
    #mod_board_bottom_source { margin-top: 20px; }

    /* 카테고리 */
    #board-cat           { margin: -2px -2px 16px; }
    #board-cat ul > li   { margin: 2px; }
    #board-cat ul > li a { font-size: 12px; line-height: 30px; padding: 0 12px; }

    /* 게시글 수 */
    #boatd-total { font-size: 13px; margin-bottom: 12px; }

    /* 검색 폼 모바일 — 전체 폭 */
    .bd-search-bar         { justify-content: stretch; gap: 8px; margin-top: 20px; }
    .bd-search-inner       { width: 100%; border-radius: 8px; }
    .bd-search-inner:focus-within { width: 100%; } /* 모바일은 이미 100% */
    .bd-search-select-wrap { min-width: 86px; }
    .bd-search-select      { font-size: 12px !important; height: 38px; padding: 0 22px 0 25px; }
    .bd-search-input       { font-size: 13px !important; height: 38px; padding: 0 10px 0 30px; }
    .bd-search-btn         { height: 38px; padding: 0 13px; font-size: 12px; gap: 0; }
    .bd-search-btn span    { display: none; }      /* 버튼 텍스트 숨김 */
    .bd-search-input-icon  { font-size: 11px; left: 10px; }
    .bd-search-select-icon { font-size: 10px; left: 8px; }
    .bd-search-reset       { width: 34px; height: 34px; border-radius: 50%; }

    /* ────────────────────────────────────────────────────
       목록 테이블 모바일
       ─ tr: display:block (flex 는 table tr 에서 브라우저 호환 이슈)
       ─ 모든 td: display:none 기본
       ─ 공지/일반 동일하게 chk·sbj·mobile-info 만 복원
       ─ 공지 배지: tbody.notice 의 첫 번째 td.no 만 표시
    ──────────────────────────────────────────────────── */
    #board-list table colgroup          { display: none; }
    #board-list table tr                { display: block; position: relative; }
    #board-list table thead th          { display: none; }
    #board-list table td                { display: none; border: none; padding: 0; }

    /* ── 줄 구분선: tr 단위 (숨겨진 td 에 border 가지 않도록) ── */
    #board-list table tbody tr {
        border-bottom: 1px solid var(--border, rgba(0,200,255,0.08));
    }

    /* ── PC zebra + hover 모바일에서도 동일 적용 ── */
    #board-list table tbody tr:nth-child(odd)        { background: transparent; }
    #board-list table tbody tr:nth-child(even)       { background: rgba(0,200,255,0.025); }
    #board-list table tbody tr:hover                 { background: rgba(0,200,255,0.07) !important; cursor: pointer; }
    /* 공지 행 배경 (일반보다 약간 강조) */
    #board-list table tbody.notice tr                { background: rgba(0,200,255,0.04) !important; }
    #board-list table tbody.notice tr:hover          { background: rgba(0,200,255,0.09) !important; }

    /* ── 체크박스 ── */
    #board-list table td.chk {
        display: block;
        position: absolute; right: 10px; top: 14px;
        background: transparent !important;
        width: 20px;
    }

    /* ── 공지 배지 (.notice-badge) ────────────────────────
       PHP: <td class="no notice-badge"><strong>공지</strong></td>
       날짜·조회수 td.no 와 클래스로 명확히 구분
    ─────────────────────────────────────────────────── */
    #board-list table td.notice-badge {
        display: block;
        padding: 10px 12px 0 12px;
        text-align: left !important;    /* PC의 text-align:center 덮어씌움 */
        background: transparent !important;
    }
    #board-list table td.notice-badge strong {
        display: inline-flex;
        align-items: center;
        background: rgba(255,107,43,0.14);
        border: 1px solid rgba(255,107,43,0.38);
        border-radius: 4px;
        color: var(--accent-orange, #ff6b2b) !important;
        font-size: 10px; font-weight: 700;
        line-height: 1; padding: 3px 7px;
        white-space: nowrap;
    }

    /* ── td.sbj — 제목 (공지/일반 공통) ── */
    #board-list table td.sbj {
        display: block;
        padding: 6px 36px 4px 12px;
    }
    /* 공지 행은 배지 아래 이어지므로 위 패딩 줄임 */
    #board-list table tbody.notice tr td.sbj { padding-top: 4px; }

    /* a 태그: .cat 배지 위 + 제목 아래 세로 배치 */
    #board-list table td.sbj a {
        font-size: 14px; font-weight: 600; line-height: 1.4;
        display: flex; flex-direction: column;
        align-items: flex-start; gap: 3px;
    }
    /* 카테고리 배지 (개인/업무 등) */
    #board-list table td.sbj .cat {
        display: inline-flex !important;
        font-size: 10px; padding: 2px 6px; margin: 0;
    }
    /* N/HOT 아이콘 크기 */
    #board-list table td.sbj a img { height: 14px !important; }
    #board-list table td.sbj .cmt  { font-size: 11px; margin-left: 2px; }

    /* ── td.mobile-info — 작성자·날짜·조회수 ── */
    #board-list table td.mobile-info {
        display: block;
        padding: 3px 12px 10px;
        text-align: left; width: 100%;
    }
    #sub #board-list table td.mobile-info ul li,
    #board-list table td.mobile-info ul li {
        color: var(--text-dim, #3a4660) !important;
        display: inline-block; font-size: 11px;
        letter-spacing: -0.03em; margin-right: 10px;
    }
    #sub #board-list table td.mobile-info ul li > strong,
    #board-list table td.mobile-info ul li > strong {
        color: var(--text-secondary, #7a8aaa) !important;
        font-weight: 600; margin-right: 3px;
    }

    /* 게시글 보기 */
    #board-view .view-tit h3 { font-size: 17px; padding: 18px 14px; }
    #board-view .view-tit h3 em { font-size: 12px; }
    #board-view .view-tit .info { padding: 10px 14px; }
    #board-view .view-tit .info li { font-size: 12px; margin-right: 14px; }
    #board-view .article-wrap { padding: 20px 0; }
    #board-view .article      { min-height: 200px; }
    #board-view .article img  { max-width: 100% !important; }
    #board-view .img-wrap     { margin-bottom: 20px; }
    #board-view .fileinfo a   { font-size: 13px; }

    /* 이전/다음 글 */
    #board-seek > li { line-height: 20px; padding: 12px 12px 12px 80px; }
    #board-seek > li strong { box-sizing: border-box; height: 100%; padding-top: 14px; width: 64px; }
    #board-seek > li .sbj  { font-size: 13px; }
    #board-seek > li .writer,
    #board-seek > li .date { font-size: 12px; position: static; }
    #board-seek > li .date { margin-left: 8px; }

    /* ── 게시글 쓰기 모바일 ───────────────────────────────
       ★ 문제 ①: 옵션항목이 모바일에서 넘쳐 줄이 내려감
          해결: flex-wrap:wrap + gap 줄바꿈 허용 (PC와 동일, 이미 적용됨)
       ★ 문제 ②: 카테고리 셀렉트가 모바일에서도 너무 넓음
          해결: max-width:100%로 전체 폭 사용하되 th 숨김 처리
       ★ 문제 ③: 하단 버튼 크기 불균일
          해결: .btn-wrap flex + 버튼 동일 min-width
    ─────────────────────────────────────────────────────── */
    #board-write h3 { font-size: 14px; }

    /* th 폭 축소 */
    #sub #board-write table tr > th,
    #board-write table tr > th {
        width: 68px;
        font-size: 12px;
        padding: 10px 10px;
    }
    /* td 패딩 축소 */
    #sub #board-write table tr > td,
    #board-write table tr > td { padding: 8px 8px; }

    /* 카테고리 셀렉트 모바일 — 래퍼 전체 폭 */
    #board-write .bd-write-select-wrap { max-width: 100%; }
    #sub #board-write table select#category,
    #board-write table select#category { font-size: 13px !important; height: 38px; }

    /* 옵션 행 모바일 — 간격 좁혀서 줄바꿈 최소화 */
    #sub #board-write table td.opt,
    #board-write table td.opt,
    #board-write table tr:has(label) > td:not(.subject):not(.article) {
        gap: 4px 12px !important;  /* 간격 좁혀 한 줄에 최대한 */
        padding: 8px 8px !important;
    }
    #board-write table td.opt label,
    #board-write table td.opt span { font-size: 12px; }

    /* 제목 입력 */
    #board-write table td.subject .inp { font-size: 14px; }

    /* 댓글 */
    #comm-form fieldset textarea  { min-height: 90px; width: 80%; }
    #comm-form fieldset .sbm      { height: 90px; min-width: 0; width: 20%; }
    #comm-re-form                 { padding: 12px 10px 12px 36px; }
    #comm-re-form fieldset        { padding-right: 80px; }
    #comm-re-form fieldset textarea { min-height: 80px; }
    #comm-re-form fieldset .re_sbm { height: 80px; width: 74px; }

    /* 팝업 */
    #ctrpop, #mbpop, #temppop {
        height: 62%; left: 4%; margin-left: 0; margin-top: 0;
        padding-top: 52px; top: 19%; width: 92%;
        border-radius: 12px;
    }
    #temppop { margin-left: 0; width: 92%; }
    #board-pwd { margin: 20px auto; width: 100%; }

    /* 비밀번호 */
    #board-pwd table tbody td { padding: 16px; }

    /* 프로필 이미지 */
    .board-mb-profileimg { height: 18px; width: 18px; }
    #board-seek > li .writer .board-mb-profileimg { display: none; }

    /* ── [6-1] 본문 콘텐츠 모바일 — 코드블록/제목 축소 ── */
    #board-view .article .nostyle pre code {
        font-size: 12px !important;
        padding: 14px 14px !important;
    }
    #board-view .article .nostyle h2 {
        font-size: 1.1em !important;
        margin: 24px 0 12px !important;
    }
    #board-view .article .nostyle h3 {
        font-size: 0.97em !important;
        margin: 18px 0 10px !important;
        padding: 5px 12px !important;
    }

    /* ── 하단 기능 버튼 모바일 균등 크기 ──────────────────
       ★ 문제: .btn1 / .btn2 / .btn3 가 내용(텍스트+아이콘)에 따라
               크기가 제각각으로 보임
       해결:
         · .btn-wrap 을 전체 폭 flex 컨테이너로
         · .left / .right 의 버튼을 flex:1 로 균등 배분
         · 버튼 height 고정 + justify-content:center
         · padding 은 0 으로 초기화하여 높이만으로 크기 제어
    ─────────────────────────────────────────────────────── */
    #board-write ~ .btn-wrap,       /* 글쓰기 페이지 하단 버튼 */
    #board-view  ~ .btn-wrap,       /* 글보기 페이지 하단 버튼 */
    .btn-wrap {
        gap: 8px;
    }
    /* .left / .right 각 영역을 균등 flex */
    .btn-wrap .left,
    .btn-wrap .right {
        flex: 1;
        gap: 6px;
    }
    /* 버튼 개별 — 같은 높이·폭으로 균등 */
    .btn-wrap .left  .btn1,
    .btn-wrap .left  .btn2,
    .btn-wrap .left  .btn3,
    .btn-wrap .right .btn1,
    .btn-wrap .right .btn2,
    .btn-wrap .right .btn3 {
        flex: 1;                    /* 같은 영역 안 버튼들 균등 폭 */
        height: 42px !important;    /* 높이 고정 */
        padding: 0 10px !important; /* 좌우만 */
        font-size: 13px !important;
        justify-content: center;
        min-width: 0;               /* flex 축소 허용 */
        white-space: nowrap;
    }

} /* end @media */