/* =====================================================
   ARTIFEX noticeGallery 보드 스킨 — 뷰 + 댓글 (scope: .bd-view / #bo_vc)
   뷰: eyebrow + 타이틀(text-h2) + 메타 13px + 1px 구분선,
   본문 17px lh1.8, 콘텐츠 max-width 800.
   ===================================================== */

/* 상단 카테고리 탭 (공지사항/이벤트) */
.bd-view-tabs {
  max-width: calc(800px + var(--container-pad) * 2);
  margin-inline: auto;
  padding: var(--sp-8) var(--container-pad) 0;
}
.bd-view-tabs .tabs a { cursor: pointer; }

.bd-view {
  max-width: calc(800px + var(--container-pad) * 2);
  margin-inline: auto;
  padding: var(--sp-12) var(--container-pad) var(--sp-24);
}

/* ---- 헤더 ---- */
.bd-view__head { padding-bottom: var(--sp-6); }
.bd-view__head .eyebrow {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-600);
  margin-bottom: var(--sp-2);
}
.bd-view__title {
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  line-height: 1.35;
}
.bd-view__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--text-caption);
  color: var(--ink-500);
}

/* ---- 상단 버튼 바 (1px 구분선) ---- */
.bd-view__bar {
  display: flex;
  justify-content: flex-end;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line-200);
  border-bottom: 1px solid var(--line-200);
}
.bd-view__bar .btn_bo_user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ---- 본문 ---- */
#bo_v_atc { padding: var(--sp-8) 0; }

#bo_v_img { margin-bottom: var(--sp-6); }
#bo_v_img img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

#bo_v_con {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-700);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
#bo_v_con img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
#bo_v_con p { margin-bottom: var(--sp-3); }

.bd-view__sig {
  margin-top: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--ink-500);
}

/* ---- 첨부파일 / 관련링크 ---- */
#bo_v_file, #bo_v_link {
  margin-bottom: var(--sp-6);
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-6);
}
#bo_v_file h2, #bo_v_link h2 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-500);
  margin-bottom: var(--sp-3);
}
#bo_v_file li, #bo_v_link li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-1) 0;
  font-size: var(--text-sm);
  color: var(--ink-700);
}
#bo_v_file li svg, #bo_v_link li svg {
  width: 16px;
  height: 16px;
  flex: none;
  align-self: center;
  color: var(--ink-500);
}
#bo_v_file li a:hover strong, #bo_v_link li a:hover strong {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bo_v_file_cnt, .bo_v_link_cnt {
  font-size: var(--text-caption);
  color: var(--ink-500);
}

/* ---- 이전글/다음글 ---- */
.bo_v_nb {
  border-top: 1px solid var(--line-200);
}
.bo_v_nb li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-1);
  border-bottom: 1px solid var(--line-200);
  font-size: var(--text-sm);
}
.bo_v_nb .nb_tit {
  flex: none;
  font-weight: 600;
  color: var(--ink-500);
}
.bo_v_nb a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-900);
}
.bo_v_nb a:hover { color: var(--brand-600); }
.bo_v_nb .nb_date {
  flex: none;
  font-size: var(--text-caption);
  color: var(--ink-500);
}

/* =====================================================
   댓글 (view_comment.skin.php — 마크업 계약 유지, 스타일만 재작성)
   ===================================================== */

/* 댓글 토글 버튼 */
.cmt_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: calc(800px + var(--container-pad) * 2);
  margin-inline: auto;
  padding: var(--sp-4) var(--container-pad);
  border-top: 1px solid var(--line-200);
  font-size: var(--text-body);
  color: var(--ink-900);
  text-align: left;
}
.cmt_btn .total b { font-weight: 700; }
.cmt_btn .cmt_more::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-500);
  border-bottom: 1.5px solid var(--ink-500);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.cmt_btn.cmt_btn_op .cmt_more::after { transform: rotate(225deg); }

/* 댓글 목록 */
#bo_vc {
  max-width: calc(800px + var(--container-pad) * 2);
  margin-inline: auto;
  padding: 0 var(--container-pad) var(--sp-6);
}
#bo_vc > h2 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
#bo_vc article {
  position: relative;
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line-200);
}
#bo_vc article:first-of-type { border-top: 0; }
#bo_vc .pf_img { flex: none; }
#bo_vc .pf_img img,
#bo_vc .pf_img .profile_img img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
#bo_vc .cm_wrap { flex: 1; min-width: 0; }
#bo_vc .cm_wrap header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--ink-700);
}
#bo_vc .cm_wrap header h2 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
#bo_vc .bo_vc_hdinfo {
  font-size: var(--text-caption);
  color: var(--ink-500);
}
#bo_vc .cmt_contents {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-700);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
#bo_vc .cmt_contents .icon-secret {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--ink-500);
}
#bo_vc_empty {
  padding: var(--sp-8) 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-500);
}

/* 댓글 옵션 (답변/수정/삭제) */
#bo_vc .bo_vl_opt { flex: none; }
#bo_vc .btn_cm_opt {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-200);
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
#bo_vc .btn_cm_opt:hover { color: var(--brand-600); border-color: var(--brand-600); }
#bo_vc .bo_vc_act {
  display: none;
  position: absolute;
  right: 0;
  top: 40px;
  z-index: var(--z-dropdown);
  min-width: 96px;
  background: var(--bg-0);
  border: 1px solid var(--line-200);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
#bo_vc .bo_vc_act li a {
  display: block;
  padding: 10px 16px;
  font-size: var(--text-sm);
  color: var(--ink-700);
}
#bo_vc .bo_vc_act li a:hover { background: var(--bg-50); color: var(--brand-600); }

/* ---- 댓글 쓰기 폼 (폼킷 소비) ---- */
.bo_vc_w {
  max-width: calc(800px + var(--container-pad) * 2);
  margin-inline: auto;
  padding: var(--sp-6) var(--container-pad) var(--sp-16);
}
.bo_vc_w > h2 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: var(--sp-3);
}
.bo_vc_w #char_cnt {
  display: block;
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--ink-500);
  margin-bottom: var(--sp-2);
}
.bo_vc_w textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--line-200);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-family: inherit;
  font-size: var(--text-sm);
  resize: vertical;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bo_vc_w textarea:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.bo_vc_w ::placeholder { color: var(--ink-300); }

.bo_vc_w_wr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.bo_vc_w_info {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.bo_vc_w_info .frm_input {
  height: 48px;
  border: 1px solid var(--line-200);
  border-radius: var(--r-sm);
  padding: 0 var(--sp-4);
  background: var(--bg-0);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bo_vc_w_info .frm_input:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.bo_vc_w .btn_confirm {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
}
.bo_vc_w .secret_cm {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--ink-700);
}
.bo_vc_w .secret_cm label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  cursor: pointer;
}
.bo_vc_w .secret_cm .selec_chk { accent-color: var(--brand-600); }

/* 캡차 (게스트) */
.bo_vc_w #captcha { display: inline-flex; align-items: center; gap: var(--sp-1); }
.bo_vc_w #captcha #captcha_key {
  height: 48px;
  border: 1px solid var(--line-200);
  border-radius: var(--r-sm);
  padding: 0 var(--sp-3);
  width: 90px;
}

/* ---- 반응형 ---- */
@media (max-width: 640px) {
  .bd-view { padding: var(--sp-8) var(--container-pad) var(--sp-16); }
  .bd-view__bar { justify-content: flex-start; }
  .bo_vc_w .btn_confirm { margin-left: 0; }
}