@charset "utf-8";
/* ============================================================================
   board.css: 포크 스킨(theme/inerp/skin/board/inerp) 스타일
   ============================================================================
   ── 왜 스킨에 style.css 를 두지 않는가 (10_CSS.md §1.5 부수결정 3)
      스킨이 `add_stylesheet(..., 0)` 로 넣는 CSS 는 **언레이어드**라 우리 CSS 와 특이도로 싸운다.
      게시판 스타일을 전부 이 파일(order 92)로 모으면 파일 1개·전선 1개가 된다.
      대신 원본 `skin/board/basic/style.css` 가 담당하던 것을 여기서 **전부 다시 책임진다**.
      특히 `.chk_box` 체크박스 커스터마이즈와 `.more_opt`/`.bo_sch_wrap` 의 초기 display 는
      빠뜨리면 조용히 깨지는 항목이다.

   ── 스코프 규칙 (02 §5.2)
      그누보드 클래스는 **반드시 `.ie-content` 안으로 스코프**한다.
      전역으로 재정의하면 /adm/ 이나 우리가 만들지 않은 스킨(회원·검색)이 깨진다.
   ============================================================================ */

/* ═══ 공통 컨테이너 ═════════════════════════════════════════════════════ */
.ie-content #bo_list,
.ie-content #bo_v,
.ie-content #bo_w { box-sizing: border-box; }

/* 게시판 상단 정보줄 + 버튼 */
.ie-content #bo_btn_top {
  display: flex; align-items: center; gap: var(--ie-sp-3);
  flex-wrap: wrap;
  margin-block-end: var(--ie-sp-3);
}
.ie-content #bo_list_total { font-size: var(--ie-fs-13); color: var(--ie-c-text-muted); }
.ie-content #bo_list_total span { color: var(--ie-c-text-body); font-weight: var(--ie-fw-semi); font-variant-numeric: tabular-nums; }

.ie-content .btn_bo_user,
.ie-content .bo_fx > ul {
  display: flex; align-items: center; gap: var(--ie-sp-2);
  margin: 0 0 0 auto; padding: 0; list-style: none;
}
.ie-content .bo_fx { display: flex; margin-block-start: var(--ie-sp-3); }

/* 그누보드 버튼 클래스 → 우리 버튼 토큰으로 통일 (css/default.css:262~299 은 gnu 레이어에 갇혀 있다) */
.ie-content .btn,
.ie-content .btn_b01,
.ie-content .btn_b02,
.ie-content .btn_b03,
.ie-content .btn_b04,
.ie-content .btn_admin,
.ie-content .btn_cancel,
.ie-content .btn_submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ie-sp-2);
  block-size: var(--ie-control-h); padding-inline: var(--ie-sp-4);
  border: 1px solid var(--ie-c-border-field); border-radius: var(--ie-r-md);
  background: var(--ie-c-surface-card); color: var(--ie-c-text-label);
  font-family: inherit; font-size: var(--ie-fs-14); font-weight: var(--ie-fw-semi);
  line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.ie-content .btn:hover,
.ie-content .btn_b01:hover { background: var(--ie-c-surface-hover); text-decoration: none; }
.ie-content .btn_submit,
.ie-content .btn_b02 {
  background: var(--ie-c-action); border-color: var(--ie-c-action); color: var(--ie-c-action-on);
}
.ie-content .btn_submit:hover { background: var(--ie-c-action-hover); border-color: var(--ie-c-action-hover); }
.ie-content .btn_admin { color: var(--ie-danger-ink); border-color: var(--ie-danger-border); background: var(--ie-danger-tint); }

/* `.btn_confirm` 은 "확인 버튼"이 아니라 **버튼 정렬 래퍼**다 (css/default.css:275). 헷갈리지 마라. */
.ie-content .btn_confirm {
  display: flex; justify-content: center; gap: var(--ie-sp-2);
  margin-block-start: var(--ie-sp-6);
}

/* 관리자 옵션 드롭다운: 초기 display:none 이어야 jQuery .toggle() 이 동작한다 */
.ie-content .btn_more_opt { position: relative; }
.ie-content .more_opt {
  display: none;
  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0;
  min-inline-size: 140px; z-index: var(--ie-z-popover);
  margin: 0; padding: var(--ie-sp-1); list-style: none;
  background: var(--ie-c-surface-card);
  border: 1px solid var(--ie-c-border); border-radius: var(--ie-r-md);
  box-shadow: var(--ie-shadow-pop);
}
.ie-content .more_opt li { display: block; }
.ie-content .more_opt button {
  inline-size: 100%; display: flex; align-items: center; gap: var(--ie-sp-2);
  padding: var(--ie-sp-2) var(--ie-sp-3);
  background: none; border: 0; border-radius: var(--ie-r-sm);
  color: var(--ie-c-text-body); font-family: inherit; font-size: var(--ie-fs-13);
  text-align: start; cursor: pointer;
}
.ie-content .more_opt button:hover { background: var(--ie-c-surface-hover); }

/* ═══ 카테고리 ═══════════════════════════════════════════════════════════ */
.ie-content #bo_cate h2 { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.ie-content #bo_cate_ul { display: flex; flex-wrap: wrap; gap: var(--ie-sp-2); margin: 0 0 var(--ie-sp-3); padding: 0; list-style: none; }
.ie-content #bo_cate_ul a {
  display: inline-flex; align-items: center; block-size: var(--ie-control-h-sm); padding-inline: var(--ie-sp-3);
  border: 1px solid var(--ie-c-border); border-radius: var(--ie-r-full);
  background: var(--ie-c-surface-card); color: var(--ie-c-text-label); font-size: var(--ie-fs-13);
}
.ie-content #bo_cate_ul a:hover { background: var(--ie-c-surface-hover); text-decoration: none; }
.ie-content #bo_cate_ul #bo_cate_on {
  background: var(--ie-c-action); border-color: var(--ie-c-action); color: var(--ie-c-action-on); font-weight: var(--ie-fw-semi);
}

/* ═══ 목록 표 ═══════════════════════════════════════════════════════════
   `.tbl_head01`(css/default.css:303~329)은 `td{height:60px}` `thead th{padding:20px 0}` 라
   08 §7.1 의 44px/34px 규격과 정면 충돌한다. 우리 표 규격으로 덮는다. */
.ie-content .tbl_wrap { overflow-x: auto; border: 1px solid var(--ie-c-border); border-radius: var(--ie-r-md); background: var(--ie-c-surface-card); }
.ie-content .tbl_head01 table {
  inline-size: 100%;
  border-collapse: separate; border-spacing: 0;   /* ★ sticky th 에서 테두리가 살아남는 유일한 값 */
  font-size: var(--ie-fs-14); font-variant-numeric: tabular-nums;
}
.ie-content .tbl_head01 caption { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.ie-content .tbl_head01 thead th {
  block-size: var(--ie-thead-h); padding: 0 var(--ie-sp-3);
  background: var(--ie-c-surface-header); color: var(--ie-c-text-label);
  font-size: var(--ie-fs-13); font-weight: var(--ie-fw-semi);
  text-align: center; white-space: nowrap;
  border-block-end: 1px solid var(--ie-c-border-strong);
}
.ie-content .tbl_head01 thead th a { color: inherit; }
.ie-content .tbl_head01 tbody td {
  block-size: var(--ie-row-h); padding: var(--ie-sp-2) var(--ie-sp-3);
  border-block-end: 1px solid var(--ie-c-border);
  color: var(--ie-c-text-body); text-align: center; vertical-align: middle;
}
.ie-content .tbl_head01 tbody tr:hover td { background: var(--ie-c-surface-hover); }
.ie-content .tbl_head01 tbody tr:last-child td { border-block-end: 0; }
.ie-content .td_subject, .ie-content .bo_tit { text-align: start !important; }
.ie-content .bo_tit { display: inline-flex; align-items: center; gap: var(--ie-sp-2); color: var(--ie-c-text-body); font-weight: var(--ie-fw-semi); }
.ie-content .bo_tit:hover { color: var(--ie-c-text-link); }
.ie-content .cnt_cmt { color: var(--ie-c-action); font-weight: var(--ie-fw-semi); font-size: var(--ie-fs-12); }
.ie-content .td_num, .ie-content .td_num2 { inline-size: 60px; color: var(--ie-c-text-muted); font-size: var(--ie-fs-13); }
.ie-content .td_name  { inline-size: 130px; font-size: var(--ie-fs-13); }
.ie-content .td_date, .ie-content .td_datetime { inline-size: 110px; color: var(--ie-c-text-muted); font-size: var(--ie-fs-13); }
.ie-content .notice_icon {
  display: inline-flex; align-items: center; block-size: 20px; padding-inline: 6px;
  border-radius: var(--ie-r-sm);
  background: var(--ie-info-tint); color: var(--ie-info-ink);
  border: 1px solid var(--ie-info-border);
  font-size: var(--ie-fs-11); font-weight: var(--ie-fw-semi);
}
.ie-content tr.bo_notice td { background: var(--ie-c-surface-page); }
.ie-content .bo_current { color: var(--ie-c-action); font-weight: var(--ie-fw-semi); font-size: var(--ie-fs-12); }

/* ═══ 체크박스: 원본 style.css 는 input 을 화면 밖으로 보내고 label>span 에
   배경이미지(img/chk.png)를 깔았다. 그 CSS 를 안 싣는 지금은 **네이티브 체크박스를 되살린다.**
   이걸 빠뜨리면 선택 체크박스가 통째로 보이지 않는다. ══════════════════ */
.ie-content .chk_box input[type="checkbox"] {
  position: static; inline-size: 16px; block-size: 16px; margin: 0;
  opacity: 1; clip: auto; accent-color: var(--ie-c-action);
}
.ie-content .chk_box label { display: inline; }
.ie-content .chk_box label span { display: none; }
.ie-content .td_chk, .ie-content .all_chk { inline-size: 40px; }

/* ═══ 게시판 검색 (모달 오버레이) ════════════════════════════════════════
   초기 display:none 이어야 `$(".bo_sch_wrap").toggle()` 이 "열기"로 동작한다. */
.ie-content .bo_sch_wrap { display: none; position: fixed; inset: 0; z-index: var(--ie-z-modal); }
.ie-content .bo_sch_bg { position: absolute; inset: 0; background: rgba(18, 34, 42, .45); }
.ie-content .bo_sch {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: min(92vw, 460px);
  padding: var(--ie-sp-5);
  background: var(--ie-c-surface-card); border: 0; border-radius: var(--ie-r-lg);
  box-shadow: var(--ie-shadow-modal);
}
.ie-content .bo_sch h3 { font-size: var(--ie-fs-18); margin-block-end: var(--ie-sp-4); }
.ie-content .bo_sch select {
  inline-size: 100%; block-size: var(--ie-control-h); margin-block-end: var(--ie-sp-2);
  padding-inline: var(--ie-sp-3);
  border: 1px solid var(--ie-c-border-field); border-radius: var(--ie-r-md);
  font-family: inherit; font-size: var(--ie-fs-14);
}
.ie-content .sch_bar { display: flex; gap: var(--ie-sp-2); }
.ie-content .sch_input {
  flex: 1 1 auto; min-inline-size: 0; block-size: var(--ie-control-h); padding-inline: var(--ie-sp-3);
  border: 1px solid var(--ie-c-border-field); border-radius: var(--ie-r-md);
  font-family: inherit; font-size: var(--ie-fs-14);
}
.ie-content .sch_btn {
  inline-size: var(--ie-control-h); block-size: var(--ie-control-h);
  border: 1px solid var(--ie-c-action); border-radius: var(--ie-r-md);
  background: var(--ie-c-action); color: var(--ie-c-action-on); cursor: pointer;
}
.ie-content .bo_sch_cls {
  position: absolute; inset-block-start: var(--ie-sp-3); inset-inline-end: var(--ie-sp-3);
  inline-size: 32px; block-size: 32px;
  background: none; border: 0; border-radius: var(--ie-r-md);
  color: var(--ie-c-text-muted); cursor: pointer;
}

/* ═══ 게시물 읽기 ════════════════════════════════════════════════════════ */
.ie-content #bo_v {
  background: var(--ie-c-surface-card);
  border: 1px solid var(--ie-c-border); border-radius: var(--ie-r-md);
  padding: var(--ie-sp-6);
}
.ie-content #bo_v_title { font-size: var(--ie-fs-20); font-weight: var(--ie-fw-semi); line-height: var(--ie-lh-tight); }
.ie-content .bo_v_cate {
  display: inline-flex; align-items: center; block-size: 22px; padding-inline: var(--ie-sp-2);
  margin-inline-end: var(--ie-sp-2); border-radius: var(--ie-r-sm);
  background: var(--ie-c-action-subtle-bg); color: var(--ie-brand-700);
  font-size: var(--ie-fs-12); font-weight: var(--ie-fw-semi);
}
.ie-content #bo_v_info {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ie-sp-3);
  margin-block: var(--ie-sp-3) 0; padding-block: var(--ie-sp-3);
  border-block: 1px solid var(--ie-c-border);
  font-size: var(--ie-fs-13); color: var(--ie-c-text-muted);
}
.ie-content #bo_v_info strong { font-weight: var(--ie-fw-semi); color: var(--ie-c-text-body); }
.ie-content #bo_v_con {
  padding-block: var(--ie-sp-6);
  font-size: var(--ie-fs-16); line-height: var(--ie-lh-read); color: var(--ie-c-text-body);
  word-break: keep-all; overflow-wrap: break-word;
}
.ie-content #bo_v_con img { max-inline-size: 100%; block-size: auto; }
.ie-content #bo_v_con a { color: var(--ie-c-text-link); text-decoration: underline; }
.ie-content #bo_v_con ul { list-style: disc; padding-inline-start: 1.4em; }
.ie-content #bo_v_con ol { list-style: decimal; padding-inline-start: 1.6em; }

.ie-content #bo_v_file, .ie-content #bo_v_link {
  margin-block-start: var(--ie-sp-4); padding: var(--ie-sp-3) var(--ie-sp-4);
  background: var(--ie-c-surface-page); border: 1px solid var(--ie-c-border); border-radius: var(--ie-r-md);
  font-size: var(--ie-fs-13);
}
.ie-content #bo_v_file ul, .ie-content #bo_v_link ul { margin: 0; padding: 0; list-style: none; }
.ie-content #bo_v_file li, .ie-content #bo_v_link li { padding-block: var(--ie-sp-1); }
.ie-content .bo_v_file_cnt, .ie-content .bo_v_link_cnt { color: var(--ie-c-text-muted); }

.ie-content #bo_v_act { display: flex; justify-content: center; gap: var(--ie-sp-2); margin-block-start: var(--ie-sp-5); }
.ie-content .bo_v_nb { margin-block-start: var(--ie-sp-5); padding-block-start: var(--ie-sp-4); border-block-start: 1px solid var(--ie-c-border); }
.ie-content .bo_v_nb ul { margin: 0; padding: 0; list-style: none; }
.ie-content .bo_v_nb li { display: flex; gap: var(--ie-sp-3); padding-block: var(--ie-sp-2); font-size: var(--ie-fs-13); }
.ie-content .nb_tit { color: var(--ie-c-text-muted); flex: 0 0 60px; }
.ie-content .bo_v_com { margin-block-start: var(--ie-sp-5); }

/* ═══ 댓글 ═══════════════════════════════════════════════════════════════ */
.ie-content .cmt_btn {
  inline-size: 100%; margin-block-start: var(--ie-sp-5);
  display: flex; align-items: center; gap: var(--ie-sp-2);
  padding: var(--ie-sp-3) var(--ie-sp-4);
  background: var(--ie-c-surface-card);
  border: 1px solid var(--ie-c-border); border-radius: var(--ie-r-md);
  font-family: inherit; font-size: var(--ie-fs-14); color: var(--ie-c-text-body); cursor: pointer;
}
.ie-content #bo_vc {
  margin-block-start: var(--ie-sp-3);
  background: var(--ie-c-surface-card);
  border: 1px solid var(--ie-c-border); border-radius: var(--ie-r-md);
  padding: var(--ie-sp-4);
}
.ie-content #bo_vc h2 { font-size: var(--ie-fs-15); margin-block-end: var(--ie-sp-3); }
.ie-content #bo_vc article { padding-block: var(--ie-sp-3); border-block-start: 1px solid var(--ie-c-border); }
.ie-content #bo_vc article:first-of-type { border-block-start: 0; }
.ie-content .cmt_contents { font-size: var(--ie-fs-14); line-height: var(--ie-lh-ui); }
.ie-content .bo_vc_hdinfo { font-size: var(--ie-fs-13); color: var(--ie-c-text-muted); }
.ie-content .bo_vc_act { display: flex; gap: var(--ie-sp-2); margin-block-start: var(--ie-sp-2); }
.ie-content .bo_vc_act a { font-size: var(--ie-fs-12); color: var(--ie-c-text-muted); }
.ie-content #bo_vc_w { margin-block-start: var(--ie-sp-4); }
.ie-content #wr_content, .ie-content .bo_vc_w textarea {
  inline-size: 100%; box-sizing: border-box; min-block-size: 100px;
  padding: var(--ie-sp-3);
  border: 1px solid var(--ie-c-border-field); border-radius: var(--ie-r-md);
  font-family: inherit; font-size: var(--ie-fs-14); line-height: var(--ie-lh-ui);
}

/* ═══ 글쓰기 ═════════════════════════════════════════════════════════════ */
.ie-content #bo_w {
  background: var(--ie-c-surface-card);
  border: 1px solid var(--ie-c-border); border-radius: var(--ie-r-md);
  padding: var(--ie-sp-6);
}
.ie-content .write_div { margin-block-end: var(--ie-sp-4); }
.ie-content .bo_w_info { display: flex; flex-wrap: wrap; gap: var(--ie-sp-2); }
.ie-content .frm_input, .ie-content .sch_input, .ie-content #bo_w select {
  box-sizing: border-box; block-size: var(--ie-control-h); padding-inline: var(--ie-sp-3);
  border: 1px solid var(--ie-c-border-field); border-radius: var(--ie-r-md);
  background: var(--ie-c-surface-card);
  font-family: inherit; font-size: var(--ie-fs-14); color: var(--ie-c-text-body);
}
.ie-content .full_input { inline-size: 100%; }
.ie-content .half_input { inline-size: 200px; max-inline-size: 100%; }
.ie-content .bo_v_option { display: flex; flex-wrap: wrap; gap: var(--ie-sp-4); margin: 0; padding: 0; list-style: none; }
.ie-content .bo_v_option li { display: flex; align-items: center; gap: var(--ie-sp-1); font-size: var(--ie-fs-13); }
.ie-content .btn_frmline {
  block-size: var(--ie-control-h-sm); padding-inline: var(--ie-sp-3);
  border: 1px solid var(--ie-c-border-field); border-radius: var(--ie-r-md);
  background: var(--ie-c-surface-card); font-family: inherit; font-size: var(--ie-fs-13); cursor: pointer;
}
.ie-content #autosave_wrapper { position: relative; }
.ie-content #autosave_pop {
  display: none; position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 4px);
  min-inline-size: 260px; z-index: var(--ie-z-popover);
  padding: var(--ie-sp-3);
  background: var(--ie-c-surface-card); border: 1px solid var(--ie-c-border);
  border-radius: var(--ie-r-md); box-shadow: var(--ie-shadow-pop);
}
.ie-content .frm_file { font-size: var(--ie-fs-13); }
.ie-content textarea#wr_content { min-block-size: 320px; }
.ie-content #char_count_desc, .ie-content #char_count_wrap { font-size: var(--ie-fs-12); color: var(--ie-c-text-muted); }

/* 자동등록방지: 이미지 경로는 그누보드 CSS(gnu 레이어)의 것을 그대로 쓴다.
   여기서는 배치만 조정한다. 배경이미지를 우리가 다시 선언하면 상대경로가 깨진다. */
.ie-content #captcha { display: flex; align-items: center; gap: var(--ie-sp-2); flex-wrap: wrap; }

/* 그누보드 사이드뷰(회원 이름 클릭 팝업): lib 가 생성하므로 우리가 못 없앤다 */
.ie-content .sv_wrap { position: relative; display: inline-block; }