@charset "utf-8";
/* ============================================================
   LEGATO — 게시판·백엔드 공통 스타일
   업로드 위치 : /theme/basic/css/legato-bbs.css
   로드 순서   : legato-sub.css → legato-bbs.css → legato-member.css
                 (회원 영역은 member 가 나중에 로드돼 우선합니다)

   범위 : .bbs-wrap 안 — 게시판 목록·보기·쓰기, 그누보드 기본 폼
   제외 : 스마트에디터 본문(iframe) 내부는 건드리지 않습니다.
          글이 실제로 발행될 때의 배경이 흰색이므로, 편집 중에도
          흰 배경으로 보는 편이 결과와 일치합니다.
   ============================================================ */

/* ── 1. 기본 타이포 ────────────────────────────────────── */
.bbs-wrap {
  color: var(--white, #fff);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 15px;
  line-height: 1.7;
}
.bbs-wrap a { color: var(--gray-400, #9999A5); text-decoration: none; }
.bbs-wrap a:hover { color: var(--amber, #FFBF00); }
.bbs-wrap h1, .bbs-wrap h2, .bbs-wrap h3 { color: var(--white, #fff); }

/* ── 2. 입력 요소 ──────────────────────────────────────── */
.bbs-wrap input[type=text],
.bbs-wrap input[type=password],
.bbs-wrap input[type=email],
.bbs-wrap input[type=tel],
.bbs-wrap input[type=number],
.bbs-wrap input[type=url],
.bbs-wrap select,
.bbs-wrap textarea:not(#wr_content) {
  box-sizing: border-box;
  height: 46px;
  padding: 0 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 2px;
  color: var(--white, #fff);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 14.5px;
  -webkit-appearance: none;
  appearance: none;
}
.bbs-wrap textarea:not(#wr_content) { height: auto; padding: 12px 14px; line-height: 1.7; }
.bbs-wrap input:focus, .bbs-wrap select:focus, .bbs-wrap textarea:focus {
  outline: none;
  border-color: var(--amber, #FFBF00);
  background: rgba(255,191,0,.06);
}
.bbs-wrap ::placeholder { color: var(--gray-600, #666674); }
.bbs-wrap input[type=checkbox], .bbs-wrap input[type=radio] {
  width: 17px; height: 17px; margin: 0 6px 0 0;
  vertical-align: -3px; accent-color: var(--amber, #FFBF00); cursor: pointer;
}
.bbs-wrap input[type=file] {
  color: var(--gray-400, #9999A5); font-size: 13.5px;
  padding: 10px 0; height: auto; background: none; border: 0;
}

/* ── 3. 버튼 ───────────────────────────────────────────── */
.bbs-wrap .btn_submit,
.bbs-wrap input[type=submit],
.bbs-wrap button[type=submit] {
  height: 48px; padding: 0 26px;
  border: 0; border-radius: 2px;
  background: var(--amber, #FFBF00);
  color: #0A0A0F;
  font-family: var(--font-sans, sans-serif);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
}
.bbs-wrap .btn_submit:hover,
.bbs-wrap input[type=submit]:hover,
.bbs-wrap button[type=submit]:hover { background: var(--amber-light, #FFD54F); }

.bbs-wrap .btn_cancel, .bbs-wrap .btn_close, .bbs-wrap .btn_b01, .bbs-wrap .btn_b02,
.bbs-wrap .btn_admin, .bbs-wrap .btn01, .bbs-wrap .btn02, .bbs-wrap .btn_frmline,
.bbs-wrap button:not([type=submit]):not(.gnb-mobile-toggle),
.bbs-wrap a.btn, .bbs-wrap .btn {
  display: inline-block;
  height: 40px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;
  background: transparent;
  color: var(--white, #fff);
  font-family: var(--font-sans, sans-serif);
  font-size: 13.5px; line-height: 38px;
  cursor: pointer;
}
.bbs-wrap .btn_cancel:hover, .bbs-wrap .btn_close:hover, .bbs-wrap .btn_b01:hover,
.bbs-wrap .btn_b02:hover, .bbs-wrap .btn_admin:hover, .bbs-wrap .btn01:hover,
.bbs-wrap .btn02:hover, .bbs-wrap .btn_frmline:hover,
.bbs-wrap button:not([type=submit]):not(.gnb-mobile-toggle):hover,
.bbs-wrap a.btn:hover, .bbs-wrap .btn:hover {
  border-color: var(--amber, #FFBF00);
  color: var(--amber, #FFBF00);
}
.bbs-wrap .btn_confirm { margin-top: 22px; display: flex; gap: 10px; align-items: center; }

/* ── 4. 테이블 (목록·보기) ─────────────────────────────── */
.bbs-wrap table { border-collapse: collapse; width: 100%; }
.bbs-wrap .tbl_head01 thead th,
.bbs-wrap .tbl_frm01 th {
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: var(--gray-400, #9999A5);
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 14px; text-align: left;
}
.bbs-wrap .tbl_head01 td, .bbs-wrap .tbl_frm01 td {
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px 14px; color: var(--white, #fff);
}
.bbs-wrap .tbl_head01 tbody tr:hover td { background: rgba(255,255,255,.03); }

/* ── 5. 게시판 컨테이너 ────────────────────────────────── */
.bbs-wrap #bo_list, .bbs-wrap #bo_v, .bbs-wrap #bo_w,
.bbs-wrap #bo_gall, .bbs-wrap #bo_sch { color: var(--white, #fff); }
.bbs-wrap #bo_v_title, .bbs-wrap #bo_v_info { color: var(--white, #fff); }
.bbs-wrap #bo_v_info { color: var(--gray-400, #9999A5); font-size: 13px; }
.bbs-wrap #bo_v_atc, .bbs-wrap #bo_v_con { color: var(--white, #fff); line-height: 1.9; }
.bbs-wrap #bo_btn_top { margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── 6. 페이지네이션 ───────────────────────────────────── */
.bbs-wrap .pg_wrap { margin: 30px 0; text-align: center; }
.bbs-wrap .pg_page, .bbs-wrap .pg_current, .bbs-wrap .pg_start,
.bbs-wrap .pg_prev, .bbs-wrap .pg_next, .bbs-wrap .pg_end {
  display: inline-block; min-width: 36px; height: 36px; line-height: 34px;
  margin: 0 2px; padding: 0 8px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 2px;
  color: var(--gray-400, #9999A5);
  font-family: var(--font-mono, monospace); font-size: 13px;
}
.bbs-wrap .pg_current {
  background: var(--amber, #FFBF00);
  border-color: var(--amber, #FFBF00);
  color: #0A0A0F; font-weight: 700;
}
.bbs-wrap .pg_page:hover { border-color: var(--amber, #FFBF00); color: var(--amber, #FFBF00); }

/* ── 7. 글쓰기 화면 ────────────────────────────────────── */
.bbs-wrap #bo_w .write_div { margin-bottom: 14px; }
.bbs-wrap #wr_subject { font-size: 16px; height: 50px; }
.bbs-wrap #autosave_pop, .bbs-wrap .autosave_wrapper {
  background: var(--black-card, #1A1A24);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 3px; padding: 16px 18px; color: var(--white, #fff);
}
.bbs-wrap #autosave_pop ul, .bbs-wrap .autosave_wrapper ul { list-style: none; margin: 0; padding: 0; }
.bbs-wrap #autosave_pop li, .bbs-wrap .autosave_wrapper li {
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.bbs-wrap #autosave_pop li:last-child, .bbs-wrap .autosave_wrapper li:last-child { border-bottom: 0; }

/* 스마트에디터 주변 (툴바·상태바는 에디터 자체 CSS 를 그대로 둡니다) */
.bbs-wrap .smarteditor2, .bbs-wrap #smart_editor2 { border-radius: 2px; overflow: hidden; }

/* 단축키 일람 — 에디터가 만드는 목록. 기본 상태로는 세로로 흩어져 보입니다 */
.bbs-wrap .se2_shortcut_layer, .bbs-wrap [class*="se2_shortcut"] {
  background: var(--black-card, #1A1A24);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--white, #fff);
  padding: 14px 16px; border-radius: 3px;
}

/* ── 8. 안내·검증 메시지 ───────────────────────────────── */
.bbs-wrap #validation_check { color: var(--risk, #ff6b4a); font-size: 14px; }
.bbs-wrap .frm_info, .bbs-wrap .cbg { color: var(--gray-400, #9999A5); font-size: 13px; }
.bbs-wrap .empty_list, .bbs-wrap .empty_table {
  padding: 60px 0; text-align: center; color: var(--gray-600, #666674);
}

/* ── 9. 모바일 ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .bbs-wrap .tbl_head01 { font-size: 13px; }
  .bbs-wrap .btn_confirm { flex-direction: column; align-items: stretch; }
  .bbs-wrap .btn_confirm > * { width: 100%; }
}

/* == 16. 게시판 스킨(list_type01) 밝은 테마 잔재 덮기 ==================
   큐가 복구되면서 /theme/basic/skin/board/list_type01/style.css 가
   처음으로 로드됐습니다. 상용 테마 기본값이라 흰 배경·검은 글자 기준입니다.
   특히 #bo_v { background:#fff } 때문에 게시글 제목이 흰 글자 + 흰 배경으로
   보이지 않는 상태였습니다.
   아래 선택자는 스킨과 "같은 우선순위"로 맞추고 뒤에 로드되게 해서 이깁니다.
   (legato-bbs.css 는 스킨 CSS 보다 나중에 로드됩니다)               */

/* ── 16-1. 목록 ─────────────────────────────────────── */
#bo_list caption {
  margin: 0 0 8px;
  color: var(--gray-600, #666674);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: .1em;
  text-align: left;
}
#bo_list .tbl_head01 thead th {
  height: auto;
  padding: 14px 12px;
  background: rgba(255,255,255,.04);
  color: var(--amber-light, #FFD54F);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
}
#bo_list .tbl_head01 td {
  height: auto;
  padding: 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 15px;
}
#bo_list .bo_tit {
  justify-content: flex-start;
  color: var(--white, #fff);
  font-size: 16px;
  font-weight: 500;
}
#bo_list tbody tr:hover .bo_tit { color: var(--amber, #FFBF00); }
#bo_list .td_num strong, .td_num strong { color: var(--gray-600, #666674); font-weight: 400; }
#bo_list .td_date, #bo_list .td_datetime { color: var(--gray-600, #666674); font-family: var(--font-mono, monospace); }
#bo_list_total { background: none; color: var(--gray-400, #9999A5); padding: 0; border-radius: 0; }
#bo_list .txt_expired { color: var(--gray-600, #666674); }
#bo_list .txt_active { color: var(--amber-light, #FFD54F); }
.bo_notice td { background: rgba(255,191,0,.06) !important; border-bottom: 1px solid rgba(255,191,0,.18); }
.bo_notice .notice_icon { background: var(--amber, #FFBF00); color: #0A0A0F; }
.bo_cate_link { background: rgba(255,255,255,.08); color: var(--amber-light, #FFD54F); }
#bo_cate { background: none; border: 1px solid rgba(255,255,255,.12); }
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active { background: rgba(255,255,255,.06); }
#bo_cate #bo_cate_on { background: var(--amber, #FFBF00); color: #0A0A0F; border-bottom-color: transparent; box-shadow: none; }
.btn_bo_adm input { background: rgba(255,255,255,.08); color: var(--gray-400, #9999A5); }

/* ── 16-2. 읽기 ─────────────────────────────────────── */
#bo_v { background: none; }
#bo_v_title .bo_v_tit { color: var(--white, #fff); }
#bo_v_info {
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: var(--gray-400, #9999A5);
}
#bo_v_info .sv_member { color: var(--white, #fff); }
#bo_v_info .if_date { color: var(--gray-600, #666674); }

/* 본문은 흰 카드로 둡니다. 스마트에디터가 흰 배경에서 작성되므로
   발행 화면도 흰 배경이어야 작성 화면과 결과가 일치합니다. */
#bo_v_atc {
  padding: 34px 30px;
  border-radius: 2px;
  background: #fff;
  color: #111;
}
#bo_v_con { color: #111; }
#bo_v_con a { color: #0A58CA; }

#bo_v_file, #bo_v_link { border: 1px solid rgba(255,255,255,.14); }
#bo_v_file h2, #bo_v_link h2 { background: rgba(255,255,255,.05); border-bottom-color: rgba(255,255,255,.10); color: var(--gray-400, #9999A5); }
#bo_v_file a, #bo_v_link a { color: var(--amber-light, #FFD54F); }
.bo_v_file_cnt, .bo_v_link_cnt { color: var(--gray-600, #666674); }

.bo_v_nb { border-bottom: 1px solid rgba(255,255,255,.10); }
.bo_v_nb li { border-color: rgba(255,255,255,.10); }
.bo_v_nb li:hover { background: rgba(255,255,255,.03); }
.bo_v_nb li .nb_tit { color: var(--white, #fff); }
.bo_v_nb li .nb_date { color: var(--gray-600, #666674); }

#bo_v_act a:hover { background-color: rgba(255,255,255,.05); }
#bo_v_share .btn { border-color: rgba(255,255,255,.18); color: var(--gray-400, #9999A5); }
#bo_v_share .btn:hover { background: rgba(255,255,255,.05); }
#bo_v_share .btn i { background: rgba(255,255,255,.08); color: var(--gray-400, #9999A5); }

/* ── 16-3. 댓글 ─────────────────────────────────────── */
.cmt_btn { background-image: none; color: var(--amber, #FFBF00); }
.bo_vc_hdinfo { color: var(--gray-600, #666674); }
#bo_vc .cmt_contents {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 2px;
  color: var(--white, #fff);
}
#bo_vc p a.s_cmt { color: var(--amber-light, #FFD54F); }
#bo_vc_empty { color: var(--gray-600, #666674); }
.bo_vc_w textarea {
  background: var(--black-light, #12121A);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--white, #fff);
  box-shadow: none;
}

/* ── 16-4. 쓰기 ─────────────────────────────────────── */
#bo_w .bo_w_link label,
#bo_w .bo_w_flie .lb_icon { background: rgba(255,255,255,.06); color: var(--gray-400, #9999A5); }
#bo_w .bo_w_flie .file_wr {
  background: var(--black-light, #12121A);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--white, #fff);
}
#bo_w .bo_w_flie .file_del { color: var(--gray-600, #666674); }
#bo_w .bo_w_select select { border: 1px solid rgba(255,255,255,.14); }
/* 스마트에디터 본문 iframe 은 흰 배경 유지 (스킨 기본값 그대로) */

/* ── 16-5. 임시저장 팝업 ────────────────────────────── */
#autosave_pop {
  background: var(--black-card, #1A1A24);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
#autosave_pop:before { border-color: transparent transparent rgba(255,255,255,.14) transparent; }
#autosave_pop:after { border-color: transparent transparent var(--black-card, #1A1A24) transparent; }
#autosave_pop ul { border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
#autosave_pop li { background: none; border-bottom: 1px solid rgba(255,255,255,.06); }
#autosave_pop span { color: var(--gray-600, #666674); }
.autosave_close { color: var(--gray-400, #9999A5); }
.autosave_close:hover { background: rgba(255,255,255,.05); color: var(--amber, #FFBF00); }

/* == 17. 컨텐츠 페이지 (#ctt) — 이용약관 · 개인정보처리방침 ============
   /bbs/content.php?co_id=provision · ?co_id=privacy
   이 페이지들은 head.php 를 쓰므로 .bbs-wrap 이 없습니다. 그래서
   이 절만 .bbs-wrap 스코프 밖에 둡니다.

   고친 것
     #ctt { background:#fff }            ← 스킨 기본값. 글자는 흰색이라
                                           흰 배경에 흰 글씨가 됐습니다.
     #ctt header h1 { font-size:0 }      ← 페이지 제목이 숨겨져 있었습니다.
     컨테이너에 폭·여백이 없어 고정 헤더 아래로 파고들었습니다.       */

#ctt {
  box-sizing: border-box;
  max-width: 900px;
  margin: 0 auto;
  padding: 120px 20px 100px;
  background: none;
  color: rgba(255,255,255,.80);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 15px;
  line-height: 1.95;
}
#ctt header { margin: 0 0 34px; }
#ctt header h1 {
  position: static;
  overflow: visible;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: var(--white, #fff);
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  background-image: linear-gradient(var(--amber, #FFBF00), var(--amber, #FFBF00));
  background-repeat: no-repeat;
  background-size: 46px 2px;
  background-position: left bottom;
}
#ctt_con { padding: 0; line-height: 1.95; }

/* 붙여넣은 약관은 줄마다 <p class="p01"> 로 들어옵니다.
   문단 여백을 0 으로 두어야 원문 줄바꿈 그대로 보입니다.
   빈 줄은 <p><br></p> 가 만들어 줍니다. */
#ctt_con p { margin: 0; }
#ctt_con p:empty { min-height: 1em; }
#ctt_con h1, #ctt_con h2, #ctt_con h3, #ctt_con h4 {
  margin: 34px 0 12px;
  color: var(--white, #fff);
  font-size: 17px;
  font-weight: 600;
}
#ctt_con strong, #ctt_con b { color: var(--white, #fff); font-weight: 600; }
#ctt_con a { color: var(--amber-light, #FFD54F); text-decoration: underline; }
#ctt_con a:hover { color: var(--amber, #FFBF00); }
#ctt_con hr { margin: 28px 0; border: 0; border-top: 1px solid rgba(255,255,255,.10); }
#ctt_con ul, #ctt_con ol { margin: 10px 0 10px 20px; }
#ctt_con li { margin: 4px 0; }
#ctt_con table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  background: rgba(255,255,255,.03);
}
#ctt_con th, #ctt_con td {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 14px;
}
#ctt_con th { background: rgba(255,255,255,.05); color: var(--amber-light, #FFD54F); font-weight: 600; }
#ctt_con img { max-width: 100%; height: auto; }
.ctt_admin { margin: 0 0 12px; text-align: right; }
.ctt_admin a { color: var(--gray-600, #666674); font-size: 13px; }

@media (max-width: 640px) {
  #ctt { padding: 100px 18px 80px; font-size: 14.5px; }
  #ctt header h1 { font-size: 24px; }
}

/* ── 18. select 드롭다운 목록 색상 ────────────────────
   <select> 자체는 다크로 칠했지만 펼쳐지는 목록은 OS 가 그립니다.
   배경을 지정하지 않으면 흰 배경에 흰 글씨가 됩니다(윈도우 크롬). */
.bbs-wrap select option { background-color: var(--black-card, #1A1A24); color: var(--white, #fff); }
.bbs-wrap select option:disabled { color: var(--gray-600, #666674); }
#ctt select option { background-color: var(--black-card, #1A1A24); color: var(--white, #fff); }