@charset "utf-8";
/* ==========================================================================
   rb.BoardFactory — 게시판 스킨 bf.basic

   목업 mockup/css/sub.css (3~9절) 를 그누보드 기본 스킨 마크업에 입힌 것.

   마크업은 그누보드 것을 그대로 둔다. 체크박스 일괄선택, 정렬 링크, 답변
   들여쓰기, 비밀글 · 첨부 아이콘, 관리 버튼이 전부 이 클래스에 묶여 있어
   구조를 바꾸면 기능이 끊긴다. 여기서는 색과 간격만 다시 입힌다.

   색은 전부 토큰(var)이다. 다크 모드는 tokens.css 가 값을 뒤집어 주므로
   여기에 :root[data-theme="dark"] 규칙을 따로 쓸 일이 거의 없다.

    1. 공통
    2. 목록 도구 · 카테고리
    3. 목록 테이블
    4. 페이지네이션
    5. 검색
    6. 게시글 상세
    7. 이전 · 다음 글
    8. 댓글
    9. 글쓰기 폼
   10. 반응형
   ========================================================================== */

/* ==================================================== 1. 공통 */
#bo_list, #bo_v, #bo_w, #bo_vc { max-width: 100%; }

/* 서브 탭과 본문 사이. 우리 화면은 .sub-body 가 위 30px(좁은 화면 16px)을
   주지만, 게시판은 코어가 #bf_container 밑에 맨몸으로 넣어 그 틀이 없다
   (theme.css '본문 폭 기본값' — 폭만 준다). 목업 content-wrap 과 같은 값. */
#bo_list, #bo_v_wrap, #bo_w { margin-top: 30px; }

/* 링크는 기본으로 부모 색을 따른다. 특이도는 0 으로 둔다 — id 로 두었더니
   (#bo_list a) 제목 색(.bo_tit > a) · 줄 hover 색 · 버튼 hover 색 · 페이지
   이동 색처럼 클래스로 준 링크 색을 전부 이겨, 목업보다 옅게 나왔다. */
:where(#bo_list, #bo_v, #bo_w) a { color: inherit; }

.bf-ico-spin { animation: bf-spin 1s linear infinite; }
@keyframes bf-spin { to { transform: rotate(360deg); } }

/* 그누보드 기본 버튼을 테마 버튼으로 */
#bo_list .btn,
#bo_v .btn,
#bo_w .btn,
#bo_vc .btn,
.btn_b01, .btn_b02, .btn_b03,
.btn_submit, .btn_cancel, .btn_confirm .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--ink-700);
  line-height: 1; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
#bo_list .btn:hover,
#bo_v .btn:hover,
.btn_b01:hover, .btn_b02:hover, .btn_b03:hover {
  border-color: var(--sky-b2); color: var(--sky-t2);
}
.btn_submit {
  background: var(--sky-500); border-color: var(--sky-500); color: #fff;
  box-shadow: 0 4px 12px rgba(62,159,222,.3);
}
.btn_submit:hover { background: var(--sky-600); border-color: var(--sky-600); color: #fff; }
.btn_cancel { color: var(--ink-500); }

.bf-ico { width: 16px; height: 16px; }

/* 접근성 텍스트 (그누보드 기본 클래스) */
.sound_only {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ==================================== 2. 목록 도구 · 카테고리 */
#bo_cate { margin-bottom: 16px; }
#bo_cate_ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
#bo_cate_ul li { margin: 0; }
#bo_cate a {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: 13.5px; color: var(--ink-600);
  transition: all .18s;
}
#bo_cate a:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
#bo_cate #bo_cate_on {
  background: var(--sky-500); border-color: var(--sky-500);
  color: #fff; font-weight: 600;
}

/* 건수 + 버튼 줄 */
#bo_btn_top, .bo_fx {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
}
.bo_fx { margin: 20px 0 0; justify-content: flex-end; }

#bo_list_total { font-size: 14.5px; color: var(--ink-500); }
#bo_list_total strong, #bo_list_total b { font-weight: 700; color: var(--sky-t2); }

/* 정렬 단추(list.lib.php) — 링크(<a>)지만 모양 · 가운데 정렬은 sub.css .sort-btn 이 준다.
   건수는 왼쪽, 정렬과 아이콘 단추는 오른쪽. 600 이하는 정렬이 한 줄을 다 쓴다(sub.css). */
#bo_btn_top .sort-btns { margin-left: auto; }
/* 카드형 목록(bf.gallery · bf.file · bf.event · bf.review 의 list.body.php) — 관리 체크 · 빈 목록.
   카드 모양은 목업 CSS(sub.css .db-list · .file-list-lg · .ev-list · .rv-grid)가 가진다. */
#bo_list .bf-card-li { position: relative; }
#bo_list .bf-card-chk { position: absolute; top: 10px; left: 10px; z-index: 3; }
#bo_list .file-list .bf-card-chk { top: 50%; left: 6px; transform: translateY(-50%); }
#bo_list .bf-card-allchk { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13px; color: var(--ink-500); }
#bo_list .bf-list-empty { padding: 70px 0; text-align: center; font-size: 14px; color: var(--ink-400); }
#bo_list .bf-card-li .notice_icon { font-style: normal; }

@media (max-width: 600px) {
  /* 건수 · 아이콘 단추가 첫 줄, 정렬이 둘째 줄(가로 스크롤) */
  #bo_btn_top .btn_bo_user { margin-left: auto; }
  #bo_btn_top .sort-btns { order: 3; margin-left: 0; }
}

.btn_bo_user, .btn_admin_list {
  display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 0; list-style: none;
}
.btn_bo_user > li { position: relative; margin: 0; }

/* 더보기(점 3개) 드롭다운.
   정사각 아이콘 버튼이라 위 #bo_list .btn 의 좌우 안쪽 여백(18px)을 뺀다.
   그대로 두면 40px 폭에서 아이콘 자리가 2px 만 남아 빈 버튼처럼 보였다
   (관리자에게만 나오는 버튼이다). */
#bo_list .btn_more_opt,
.btn_more_opt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-500);
}
.btn_more_opt:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
/* 기본은 닫힌 상태다. 여는 것은 스킨 안의 jQuery .toggle() 이고, 그게
   인라인 display 를 얹으므로 이 규칙을 이긴다.
   ※ 이 한 줄이 없으면 관리자에게 늘 펼쳐진 채로 나와 표 머리글을 덮는다.
     (리빌더 기본 스킨 style.css 에 있던 규칙인데 옮기며 빠졌었다) */
.more_opt {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 160px; margin: 0; padding: 8px 0; list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.more_opt li { margin: 0; }
.more_opt a, .more_opt button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 16px;
  font-size: 14px; color: var(--ink-600); text-align: left;
}
.more_opt a:hover, .more_opt button:hover { background: var(--sky-50); color: var(--sky-t2); }

/* ==================================================== 3. 목록 테이블 */
.tbl_head01 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.tbl_head01 table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  /* default.css 의 .tbl_wrap table { background:#fff } 를 덮는다.
     그대로 두면 다크 모드에서 카드 안에 흰 판이 깔린다. */
  background: var(--surface);
  /* 같은 규칙의 위아래 #ececec 선도 지운다. 카드(.tbl_head01) 테두리 바로
     안쪽에 한 줄이 더 그어져 다크에서는 표 위에 흰 선이 됐다. 목업
     .board-list 는 카드 테두리 하나뿐이다. */
  border-top: 0; border-bottom: 0;
}
.tbl_head01 caption {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
}

.tbl_head01 thead th {
  height: 46px; padding: 0 8px;
  background: var(--sky-50);
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink-500);
  text-align: center;
  white-space: nowrap;
}
.tbl_head01 thead th a { color: inherit; }
.tbl_head01 thead th a:hover { color: var(--sky-t2); }

.tbl_head01 tbody tr { transition: background .18s; }
.tbl_head01 tbody tr:hover { background: var(--sky-50); }
/* default.css 의 .tbl_head01 tbody tr:hover td { background:#fafafa } 가 칸마다
   덮여 줄 색(목업 .bl-row:hover 의 --sky-50)이 안 보였고, 다크에서는 줄이 하얗게
   떴다. 칸은 비워 두고 줄 색만 쓴다. */
.tbl_head01 tbody tr:hover td { background: none; }
.tbl_head01 tbody td {
  height: 52px; padding: 10px 8px;
  /* default.css 의 .tbl_head01 td { border-top:1px solid #ecf0f1 } 을 지운다.
     표 테두리가 겹칠 때 그 선이 이겨 제목 칸에만 보였고, 다크 모드에서는 밝은
     줄이 됐다. 줄은 아래 테두리 하나로만 긋는다. */
  border-top: 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--ink-500);
  text-align: center;
  vertical-align: middle;
}
.tbl_head01 tbody tr:last-child td { border-bottom: 0; }

/* 공지 행 — 다크에서는 바닥보다 '밝게' 떠야 같은 역할을 한다 */
.tbl_head01 tbody tr.bo_notice { background: #FBFDFF; }
.tbl_head01 tbody tr.bo_notice:hover { background: var(--sky-50); }
:root[data-theme="dark"] .tbl_head01 tbody tr.bo_notice { background: #1B2733; }
:root[data-theme="dark"] .tbl_head01 tbody tr.bo_notice:hover { background: var(--sky-50); }

/* 칼럼 폭.

   table-layout:fixed 는 첫 행 — 즉 thead 의 th — 폭만 보고 칸을 나눈다.
   td 에만 width 를 줬더니 th 에는 아무 값이 없어 여섯 칸이 똑같이
   나뉘었고(1150/6 ≈ 192px), 제목이 체크박스와 같은 폭으로 찌그러졌다.
   그래서 th 에도 같은 폭을 준다. 폭 값은 목업 .bl-* 그대로다
   (mockup/css/sub.css 의 .bl-no 62 · .bl-writer 104 · .bl-date 66 · .bl-view 84).

   제목 칸은 폭을 주지 않는다 — fixed 에서 나머지를 전부 가져간다. */
.th_chk,      .td_chk      { width: 44px; }
.th_num2,     .td_num2     { width: 68px; }
.th_name,     .td_name     { width: 110px; }
.th_num,      .td_num      { width: 74px; }
.th_datetime, .td_datetime { width: 78px; }

.td_num2     { color: var(--ink-300); }
.td_datetime { font-size: 12.5px; color: var(--ink-400); }

.notice_icon {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 9px;
  border-radius: var(--r-xs);
  background: var(--sky-600); color: #fff;
  font-size: 11.5px; font-weight: 700;
}
.bo_current {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--sky-100); color: var(--sky-t3);
  font-size: 11.5px; font-weight: 700;
}

/* 제목 칸.
   말머리(.bo_cate_link)와 제목(.bo_tit)을 목업 .bl-subject 처럼 한 줄에 둔다 —
   안쪽 .bo_subj 가 가로 배치를 맡고 제목이 남는 폭을 먹는다.
   칸(td) 자체를 flex 로 두었더니 표 칸이 아니게 돼(브라우저가 익명 칸으로 한 번
   더 감싼다) 이 칸만 바탕 · 아래 테두리가 옆 칸과 1px 어긋났다. 좁은 화면에서는
   td 를 block 으로 바꾸는 규칙이 이겨 말머리가 제목 윗줄로 밀려 있었다. */
.td_subject { text-align: left; }
.bo_subj { display: flex; align-items: center; gap: 7px; min-width: 0; }
.bo_subj .bo_tit { flex: 1 1 auto; }
.bo_cate_link {
  flex: none;   /* 목업 .p-cate — 제목이 길어도 말머리는 줄어들지 않는다 */
  display: inline-flex; align-items: center;
  height: 21px; margin-right: 6px; padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--sky-100); color: var(--sky-t3);
  font-size: 11.5px; font-weight: 600;
  vertical-align: middle;
}
.bo_tit {
  display: flex; align-items: center; gap: 7px;
  min-width: 0;
}
.bo_tit > a {
  min-width: 0;
  font-size: 15px; color: var(--ink-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
tr:hover .bo_tit > a { color: var(--sky-t3); text-decoration: underline; }
tr.bo_notice .bo_tit > a { font-weight: 600; }

.bo_tit .bf-ico { width: 14px; height: 14px; color: var(--ink-300); flex: none; }
.bo_tit .bf-ico-hot { color: var(--point); }   /* 인기글 */

.new_icon, .cnt_cmt {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 18px; padding: 0 5px;
  border-radius: 4px;
  font-size: 10.5px; font-weight: 700;
}
.new_icon { background: var(--point); color: #fff; }
.cnt_cmt  { background: var(--sky-100); color: var(--sky-t3); }

.td_name .sv_member, .td_name .sv_guest { color: var(--ink-500); }

.empty_table {
  padding: 60px 16px !important;
  height: auto !important;
  color: var(--ink-400); font-size: 14.5px; text-align: center;
}

/* 체크박스 */
.chk_box input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
/* gap — 네모 칸과 글자('비밀글' 등)가 딱 붙어 있었다. 글자 없는 목록 체크박스는 sound_only 가 흐름 밖이라 영향 없음 */
.chk_box label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.chk_box label > span {
  display: inline-block; flex: none; width: 18px; height: 18px;
  border: 1px solid var(--ink-300);
  border-radius: 4px;
  background: var(--surface);
  transition: all .15s;
}
.chk_box input[type="checkbox"]:checked + label > span {
  background: var(--sky-500); border-color: var(--sky-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
}
.chk_box input[type="checkbox"]:focus-visible + label > span {
  outline: 2px solid var(--sky-500); outline-offset: 2px;
}

/* ==================================================== 4. 페이지네이션
   게시판만 쓰는 것이 아니다(get_paging — FAQ · 새글 · 검색 · 콘텐츠샵도 쓴다).
   테마 rb.css/theme.css '페이지 이동' 한 곳에서 맞춘다. 여기 따로 두었던 것은
   그쪽에 덮여 반쯤만 먹으면서 화살표를 빈 상자로 만들고 있었다. */

/* ==================================================== 5. 검색
   그누보드 기본 스킨의 검색은 인라인 패널이 아니라 '모달'이다.
   .btn_bo_sch 로 .bo_sch_wrap 을 toggle 하고 .bo_sch_bg 가 딤드 역할을 한다.
   (인라인으로 잡았다가 닫기 버튼만 덩그러니 남는 문제가 있었다.) */
.bo_sch_wrap {
  position: fixed; inset: 0; z-index: 800;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.bo_sch_wrap[style*="block"] { display: flex !important; }

.bo_sch_bg {
  position: absolute; inset: 0; z-index: 0;
  background: rgba(10,25,40,.5);
}

.bo_sch {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  margin: 0; padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-lg);
}
.bo_sch h3 {
  margin: 0 0 16px;
  font-size: 17px; font-weight: 700; color: var(--ink-900);
}
.bo_sch form { display: flex; flex-direction: column; gap: 10px; }
.bo_sch select { width: 100%; }

.sch_bar { display: flex; gap: 6px; }
.sch_bar .sch_input { flex: 1 1 auto; min-width: 0; }

.bo_sch_cls {
  position: absolute; right: 14px; top: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: none; color: var(--ink-400);
}
.bo_sch_cls:hover { background: var(--sky-50); color: var(--ink-700); }

#bo_sch select, #bo_sch input[type="text"], #bo_sch input[type="search"],
.bo_sch select, .bo_sch input[type="text"],
.sch_bar select, .sch_bar input {
  height: 44px; padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sky-50);
  font: inherit; font-size: 14px; color: var(--ink-800);
  outline: none;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
/* 다크 — 목업 .board-search 입력칸처럼 바닥보다 한 단계 들어가 보이게(목업 theme.css 4절) */
:root[data-theme="dark"] #bo_sch select, :root[data-theme="dark"] #bo_sch input[type="text"],
:root[data-theme="dark"] #bo_sch input[type="search"],
:root[data-theme="dark"] .bo_sch select, :root[data-theme="dark"] .bo_sch input[type="text"],
:root[data-theme="dark"] .sch_bar select, :root[data-theme="dark"] .sch_bar input { background: #101922; }
#bo_sch select, .bo_sch select { cursor: pointer; }
#bo_sch select:focus, #bo_sch input:focus,
.bo_sch select:focus, .bo_sch input:focus {
  background: var(--surface);
  border-color: var(--sky-b3);
  box-shadow: 0 0 0 3px rgba(62,159,222,.13);
}
.sch_btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--r-sm);
  background: var(--sky-500); color: #fff;
  font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.sch_btn { width: 52px; padding: 0; flex: none; }
.sch_btn:hover { background: var(--sky-600); }

/* ==================================================== 6. 게시글 상세
   카드 · 머리 · 본문 · 첨부 · 반응 줄의 모양은 테마 rb.css/sub.css 6절(목업
   이식본 — 1:1 문의 보기도 함께 쓴다)이 갖는다. 여기는 그누보드 마크업에
   맞춘 것만 둔다 — 목업의 <button> 자리에 그누보드는 <a> · <span> 을 쓰고,
   본문에는 글쓴이가 넣은 HTML 이 그대로 들어온다. */

/* 작성자 줄 — 댓글 수는 댓글 카드로 가는 링크다 */
.vm-info a { display: inline-flex; align-items: center; gap: 4px; }
.vm-info a:hover { color: var(--sky-t2); }
.vm-thumb img, .cm-thumb img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* 이름(.sv_member)이 둘레 색을 따르는 것은 theme.css 가 전역으로 맡는다 */
.vm-ip { color: var(--ink-400); font-weight: 400; }

/* 본문 — 긴 주소가 카드를 밀지 않게 */
#bo_v_con { word-break: keep-all; overflow-wrap: break-word; }
#bo_v_con img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
#bo_v_con a { color: var(--sky-t2); text-decoration: underline; }
#bo_v_img { padding: 30px 30px 0; }
#bo_v_img img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.view-sign {
  margin: 0 30px 24px; padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px; color: var(--ink-500);
}

/* 첨부 · 링크 — 둘 다 있으면 붙지 않게, 반응 줄이 없으면 카드 바닥과 떨어지게 */
.view-file + .view-file { margin-top: 10px; }
.view-wrap > .view-file:last-child { margin-bottom: 30px; }
.view-file a small { margin-left: 6px; font-size: 12px; color: var(--ink-400); }

/* 반응 줄 — sub.css 는 <button> 에만 모양을 준다 */
.view-act > a, .view-act > span {
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 18px;
  border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; font-weight: 500; color: var(--ink-600);
  transition: all .2s;
}
.view-act > a:hover { border-color: var(--sky-b2); color: var(--sky-t2); background: var(--sky-50); }
.view-act .va-like strong { font-family: var(--font-en); font-weight: 700; }
.view-act .va-msg { display: none; font-size: 12.5px; font-weight: 600; color: var(--sky-t2); }
.va-sns #bo_v_sns { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.va-sns #bo_v_sns a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
}
.va-sns #bo_v_sns span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* 그누보드 SNS 아이콘은 흰 글자 모양이라 브랜드 색 바탕이 있어야 보인다 */
.va-sns #bo_v_sns .sns_f { background: #3B5998; border-color: #3B5998; }
.va-sns #bo_v_sns .sns_t { background: #1DA1F2; border-color: #1DA1F2; }
.va-sns #bo_v_sns .sns_k { background: #FEE500; border-color: #FEE500; }

/* 버튼 줄 — 관리자는 버튼이 많아 좁은 화면에서 넘친다 */
#bo_v_bot { flex-wrap: wrap; }

/* ==================================================== 7. 이전 · 다음 글
   모양은 sub.css 7절(.view-nav)이 갖는다. 그누보드 마크업을 그대로 옮겨 담았다. */

/* ==================================================== 8. 댓글
   카드 · 머리 · 폼 · 목록 모양은 sub.css 8절(.comment · .cm-*)이 갖는다.
   목업의 <button> 자리에 그누보드는 <a> 를 쓰고, 답글은 여러 단으로 들어간다. */
#bo_vc .cm-meta { position: relative; flex-wrap: wrap; }   /* 이름 메뉴(사이드뷰) 겹침 z-index 가 먹게 */
#bo_vc .cm-ip { font-size: 12px; color: var(--ink-400); }
#bo_vc .cm-lock { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--ink-400); }
#bo_vc .cm-act a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--ink-400);
  transition: color .18s;
}
#bo_vc .cm-act a:hover { color: var(--sky-t2); }
#bo_vc .cm-item.cm-reply { margin-left: calc(30px * var(--cm-depth, 1)); }
.cm-empty {
  padding: 36px 0 12px;
  border-top: 1px solid var(--line-soft);
  text-align: center; font-size: 14px; color: var(--ink-400);
}

/* 쓰기 폼 — 비회원 칸 · 캡차 · 비밀글 */
.cm-guest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.cm-guest .frm_input {
  width: 100%; height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: 14px; color: var(--ink-800);
}
.cm-guest .cm-captcha { grid-column: 1 / -1; }
.cm-opt { display: inline-flex; align-items: center; gap: 14px; }
/* 답글 · 수정으로 폼이 댓글 밑에 들어갔을 때 */
.cm-body .cm-form { margin-top: 12px; }

/* 태그로 거른 목록 — list.skin.php */
.bf-tag-filter {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 12px 16px;
  border: 1px solid var(--sky-b1); border-radius: var(--r-md);
  background: var(--sky-50);
  font-size: 14px; color: var(--ink-600);
}
.bf-tag-filter .bf-ico { width: 17px; height: 17px; color: var(--sky-t2); }
.bf-tag-filter b { color: var(--sky-t3); font-weight: 700; }
.bf-tag-filter a {
  margin-left: auto;
  font-size: 13px; font-weight: 600; color: var(--sky-t2);
}
.bf-tag-filter a:hover { text-decoration: underline; }

/* 보기 — 태그 줄이 카드의 마지막이면(추천 줄이 없을 때) 아래 여백 */
.view-wrap > .view-tags:last-child { padding-bottom: 24px; }

/* ==================================================== 9. 글쓰기
   틀(카드 · 말머리 + 제목 · 본문 · 끌어다 놓기 · 옵션 줄 · 단추)은 테마 sub.css 9절
   (.write-form · .wf-* · .file-drop · .file-added)이 그린다 — 목업 community-write.html.
   여기는 그누보드 기능에만 있는 부분이다: 비회원 칸 · 링크 · 첨부 칸 · 임시 저장된 글 ·
   에디터 · 글자 수. write.skin.php · write.js 머리글 참고. */
#bo_w .wf-label { display: block; }
.wf-req { margin-left: 3px; color: var(--point); font-weight: 700; }
.write-form .wf-link,
.write-form .wf-captcha { margin-top: 20px; }

/* 그누보드 기본 CSS 는 required 칸 오른쪽 위에 빨간 별 그림을 박는다(default.css — !important).
   목업에는 없다 — 필수는 칸의 required 와 이름표의 * 로 충분하다. 댓글 칸도 같다. */
.write-form .required,
.write-form textarea.required,
.comment .required,
.comment textarea.required { background-image: none !important; }

/* sub.css 는 글자 칸만 그린다 — 비밀번호 칸도 같은 모양으로 */
.write-form input[type="password"] {
  width: 100%; height: 48px; padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sky-50);
  font-size: 15px; color: var(--ink-900);
  transition: all .2s;
}
.write-form input[type="password"]:focus {
  background: var(--surface); border-color: var(--sky-b3);
  box-shadow: 0 0 0 3px rgba(62,159,222,.13);
}
:root[data-theme="dark"] .write-form input[type="password"] { background: #101922; }

/* 비회원 — 두 칸씩 */
.wf-guest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin-bottom: 20px; }
.wf-guest .wf-label { margin-bottom: 6px; font-size: 13.5px; }

/* 본문 — DHTML 에디터. 틀(테두리)은 에디터 창(iframe)에 두르고, 그 위 오른쪽에
   코어의 '단축키 일람' 단추를 작게 둔다. 높이는 에디터가 정한다.
   보드팩토리 에디터(plugin/editor/smarteditor2_bf)는 창 안을 테마 색으로 그린다. */
.wf-editor.is-dhtml { border: 0; border-radius: 0; overflow: visible; }
.wf-editor.is-dhtml iframe {
  display: block;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .2s;
}
.wf-editor.is-dhtml:focus-within iframe { box-shadow: 0 0 0 1px var(--sky-b3), 0 0 0 4px rgba(62,159,222,.12); }
.wf-editor .cke_sc { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.wf-editor .btn_cke_sc {
  height: 28px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface);
  font-size: 12px; color: var(--ink-500);
}
.wf-editor .btn_cke_sc:hover { border-color: var(--sky-b3); color: var(--sky-t2); }
.wf-editor .cke_sc_def {
  margin: 0 0 10px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  font-size: 13px; color: var(--ink-600);
}
.wf-editor .wr_content { display: block; }
#char_count_desc {
  margin: 0; padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--sky-50);
  font-size: 13px; color: var(--ink-500);
}
#char_count_desc strong { color: var(--sky-t2); }
#char_count_wrap {
  padding: 8px 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-400); text-align: right;
}

/* 링크 — 칸 안 왼쪽에 고리 아이콘 */
.wf-link-item { position: relative; }
.wf-link-item + .wf-link-item { margin-top: 8px; }
.wf-link-item .ico {
  position: absolute; left: 15px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  color: var(--ink-400); pointer-events: none;
}
.write-form .wf-link-item input[type="text"] { padding-left: 40px; }

/* 첨부 칸 — 줄마다 코어 파일 칸 하나. 스크립트가 붙으면(.is-js) 파일 칸은 숨기고
   파일이 든 줄만 목록(.file-added)처럼 보인다. 스크립트가 없으면 파일 칸이 그대로 보인다. */
.wf-slot { flex-wrap: wrap; }
.wf-slot-label {
  display: flex; align-items: center; gap: 7px;
  flex: 1 1 auto; min-width: 0;
  color: var(--ink-700); cursor: default;
}
.wf-slot-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-slot-size:empty { display: none; }
.wf-slot-input { flex: 1 1 100%; font-size: 13px; color: var(--ink-600); }
.write-form .wf-slot-desc {
  flex: 1 1 calc(100% - 90px);
  height: 38px; padding: 0 12px;
  font-size: 13.5px;
}
.wf-slot-del { flex: none; margin-left: auto; font-size: 13px; }
/* sub.css 가 상자 · 단추를 display 로 그려 hidden 속성을 이긴다 — 되돌린다 */
.file-drop[hidden],
.file-added .wf-slot-clear[hidden] { display: none; }
.file-added .wf-slot-del span { flex: none; display: inline; overflow: visible; }   /* sub.css .file-added span 은 파일 이름 칸용 */
.wf-slot.is-del .wf-slot-name { color: var(--ink-400); text-decoration: line-through; }
.wf-file.is-js .file-drop + .wf-slots { display: none; }
.wf-file.is-js.has-files .file-drop + .wf-slots { display: block; }
.wf-file.is-js .wf-slot-input { display: none; }
.wf-file.is-js .wf-slot:not(.is-saved):not(.is-new) { display: none; }
.file-drop:focus-visible { outline: 2px solid var(--sky-500); outline-offset: 2px; }
:root[data-theme="dark"] .write-form .wf-slot-desc { background: #101922; }


/* 태그 — 칩 입력(write.js 3). 스크립트가 없으면 쉼표로 적는 칸(.wf-tag-raw)이 그대로 보인다 */
.write-form .wf-tag-row { margin-top: 20px; }
.wf-tag .tag-added:empty { display: none; }
.wf-tag.is-full .wf-tag-input { background: var(--surface); }
.wf-tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px 0 12px;
  border-radius: var(--r-full);
  background: var(--sky-100); color: var(--sky-t3);
  font-size: 13px; font-weight: 500;
  transition: background .15s;
}
.wf-tag-chip .ico { width: 12px; height: 12px; stroke-width: 2.6; opacity: .6; }
.wf-tag-chip:hover { background: var(--sky-b1); }
.wf-tag-chip:hover .ico { opacity: 1; }

/* 옵션 줄 — 오른쪽 끝에 임시 저장된 글 */
.wf-opt { align-items: center; }
.wf-autosave { position: relative; margin-left: auto; }
.wf-autosave-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface);
  font-size: 13px; color: var(--ink-600);
  transition: border-color .2s, color .2s;
}
.wf-autosave-btn:hover { border-color: var(--sky-b3); color: var(--sky-t2); }
#autosave_count {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--sky-100); color: var(--sky-t3);
  font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
}

/* 목록 창 — 코어 autosave.js 가 열고 닫는다(.show/.hide). 처음에는 닫혀 있어야 한다 */
#autosave_pop {
  display: none;
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30;
  width: 340px; max-width: calc(100vw - 40px);
  padding: 14px 16px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-lg);
}
#autosave_pop > strong { display: block; margin-bottom: 6px; font-size: 14px; color: var(--ink-900); }
#autosave_pop ul { max-height: 220px; overflow-y: auto; }
#autosave_pop ul:empty::before {
  content: '저장된 글이 없습니다.';
  display: block; padding: 10px 0;
  font-size: 13px; color: var(--ink-400);
}
#autosave_pop li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}
#autosave_pop li a {
  flex: 1 1 auto; min-width: 0;
  color: var(--ink-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#autosave_pop li a:hover { color: var(--sky-t2); }
#autosave_pop li span { flex: none; font-size: 12px; color: var(--ink-400); }
#autosave_pop .autosave_del { margin-left: 6px; font-size: 12px; color: var(--point); }
#autosave_pop > div { margin-top: 8px; text-align: right; }
#autosave_pop .autosave_close {
  height: 30px; padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--sky-50);
  font-size: 13px; color: var(--ink-600);
}

/* ==================================================== 10. 반응형 */
@media (max-width: 900px) {
  #bo_list, #bo_v_wrap, #bo_w { margin-top: 16px; }

  /* 테이블을 가로 스크롤 시키는 대신 필요 없는 칼럼을 접는다.
     모바일에서 가로 스크롤은 목록 훑기를 방해한다. */
  .tbl_head01 thead { display: none; }
  .tbl_head01 table, .tbl_head01 tbody, .tbl_head01 tr, .tbl_head01 td { display: block; width: auto; }
  .tbl_head01 tbody tr {
    position: relative;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .tbl_head01 tbody td {
    height: auto; padding: 0; border: 0;
    text-align: left;
  }
  .td_chk { position: absolute; right: 14px; top: 14px; width: auto; }
  .td_num2 { margin-bottom: 4px; font-size: 12px; }
  .td_subject { margin-bottom: 6px; }
  .bo_tit > a { white-space: normal; font-size: 14.5px; line-height: 1.45; }
  .td_name, .td_num, .td_datetime {
    display: inline-block !important;
    width: auto; margin-right: 10px;
    font-size: 12.5px; color: var(--ink-400);
  }
  .td_num::before { content: '조회 '; }

  #bo_v_img { padding: 22px 18px 0; }
  .view-sign { margin: 0 18px 18px; }
  .view-wrap > .view-file:last-child { margin-bottom: 22px; }
  .view-act > a, .view-act > span { height: 38px; padding: 0 13px; font-size: 13px; }
  .va-sns #bo_v_sns a { width: 38px; height: 38px; }

  #bo_vc .cm-item.cm-reply { margin-left: calc(14px * var(--cm-depth, 1)); }
  .cm-guest { grid-template-columns: minmax(0, 1fr); }
  .wf-guest { grid-template-columns: minmax(0, 1fr); }

  #bo_sch select, #bo_sch input[type="text"], #bo_sch input[type="search"] { width: 100%; }
  #bo_sch { padding: 16px; }
}

@media (max-width: 600px) {
  .wf-autosave { margin-left: 0; }
  #autosave_pop { right: auto; left: 0; }
  .write-form .board-btns { flex-wrap: wrap; }
  .write-form .board-btns .bf-btn { flex: 1 1 auto; }
}