@charset "utf-8";

/* ==============================
   폰트
============================== */
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@font-face{
  font-family:'Paperlogy-4Regular';
  src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight:400; font-style:normal;
}

/* 공통 */
*{ box-sizing:border-box }
::-webkit-scrollbar{ display:none }

/* ==============================
   카테고리/상단 버튼
============================== */
.ico-category{ background:#000; color:#fff; border-radius:10px; padding:0 5px }
.simple-category{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:20px; justify-content:center }
.simple-category li{
  background:#fff; color:#444; border-radius:10px; padding:4px 6px;
  border:1px inset #333; transition:background .2s; white-space:nowrap; text-align:center
}
.simple-category li:hover{ background:#dcbfbe; color:#444 }
.simple-category li.selected{ background:#ae5d5c }
.simple-category li.selected a{ color:#fff !important }

#bo_btn_top{
    margin: 10px 0;
    overflow: hidden; 
}
#bo_btn_top:after,.bo_fx:after,#bo_sch:after{ content:""; display:block; clear:both }
.bo_fx{ margin-bottom:5px; float:right }
.bo_fx ul,.btn_bo_user,.btn_bo_adm{ margin:0; padding:0; list-style:none }
.btn_bo_user{ float:right }
.btn_bo_user li{ float:left; margin-left:5px }
.btn_bo_adm{ float:left }
.btn_bo_adm li{ float:left; margin-right:5px }
.btn_bo_adm input{ padding:0 8px; border:0; text-decoration:none; vertical-align:middle }

#bo_btn_top .btn_bo_user{ display:block !important }
#bo_btn_top .btn_bo_user a.ui-btn,
#bo_btn_top .btn_bo_user a.point{
  display:inline-block !important; background:#fff !important; color:#222 !important;
  border:1px solid rgba(0,0,0,.15) !important; border-radius:10px !important;
  padding:6px 14px !important; text-decoration:none !important; font-weight:600 !important; line-height:1.2 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.06) !important; vertical-align:middle
}
#bo_btn_top .btn_bo_user a.ui-btn:hover,
#bo_btn_top .btn_bo_user a.point:hover{
  background:#f5f5f5 !important; box-shadow:0 2px 6px rgba(0,0,0,.10) !important
}

/* ==============================
   리스트(갤러리)
============================== */
#bo_gall{ margin:0 auto }
#bo_gall h2{ margin:0; padding:0; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden }

#bo_gall #gall_ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center; 
  margin: 10px auto;
  list-style: none;
  max-width: 1000px;
  row-gap: 8px;
}
#bo_gall #gall_ul > li{
  width:100%;
}
@media (max-width: 800px) {
  #bo_gall #gall_ul {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }
}

/* 카드 */
#bo_gall .gall_box{
  position:relative; overflow:hidden; aspect-ratio:5/7;
  border:none !important; box-shadow:none !important; transition:transform .3s
}
#bo_gall .gall_box *{ pointer-events:none !important }
#bo_gall .gall_box > a.gall_link{ position:absolute; inset:0; display:block; z-index:20; pointer-events:auto !important }
#bo_gall .gall_box .gall_link img,
#bo_gall .gall_link img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .3s; z-index:10
}
#bo_gall .gall_box:hover .gall_link img,
#bo_gall .gall_link:hover img{ transform:scale(1.03) }
#bo_gall .gall_box:hover{ transform:scale(1.06) }

#bo_gall .gall_con,#bo_gall .gall_chk{
  position:absolute; inset:0; z-index:5; pointer-events:none !important; background:transparent; border:0
}
#bo_gall .gall_box::before,#bo_gall .gall_box::after,
#bo_gall .gall_con::before,#bo_gall .gall_con::after,
#bo_gall .gall_chk::before,#bo_gall .gall_chk::after,
#bo_gall a.gall_link::before,#bo_gall a.gall_link::after{ content:none !important; display:none !important }

#bo_gall .gall_box.is-before img.thumb{ filter:grayscale(100%); opacity:.9 }

/* 검색/공지 최소 */
#bo_sch legend{ position:absolute; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden }
#bo_sch select{ border:0; height:28px; float:left }
#bo_sch .sch_input{ height:28px; border:0; padding:0 10px; float:left }
#bo_sch .sch_btn{ float:left; margin-top:-1px }
.pg_wrap{ clear:both }
#bo_gall li.empty_list{ padding:85px 0; text-align:center }
#bo_gall li.gall_li.bo_notice .gall_name,
#bo_gall li.gall_li.bo_notice .gall_date{ display:none }
#bo_gall li.gall_li.bo_notice,
#bo_gall li.gall_li.bo_notice .gall_box,
#bo_gall li.gall_li.bo_notice .gall_con{ display:block; width:100%; clear:both }
#bo_gall li.gall_li.bo_notice .bo_tit{ padding:10px; height:auto }
#bo_gall li.gall_li.bo_notice .gall_chk{ left:auto; right:0; top:0; bottom:0 }
#bo_gall li.gall_li.bo_notice .gall_box{ opacity:1 }
#bo_gall .bo_notice .notice_icon{
  display:inline-block; width:20px; height:20px; line-height:18px; margin-right:5px; font-style:normal; text-align:center; font-weight:bold
}

/* ==============================
   뷰 영역(필요 최소)
============================== */
#bo_v{ position:relative; padding:20px 30px; overflow:auto }
#bo_v_con img{ max-width:100%; height:auto }

/* ==============================
   글쓰기 폼: whisper 스타일
   default.css의 고정폭을 확실히 무력화하고
   --form-max 로 폭을 관리
============================== */

/* 1) 컨테이너: 고정폭 제거 및 변수 정의 */
#bo_w{
  --form-max: 800px;   /* 원하는 공통 폭 */
  max-width:none !important;  /* default.css 끊기 */
  width:100%;
  margin:0 auto;
  padding:20px;
}

/* 2) 과거 레이아웃 잔재 초기화 */
#bo_w .write_div,
#bo_w .bo_w_info,
#bo_w .bo_w_tit,
#bo_w .bo_w_link,
#bo_w .bo_w_flie,
#bo_w .bo_w_info .frm_input,
#bo_w .bo_w_tit .frm_input,
#bo_w .bo_w_tit #btn_autosave,
#bo_w .bo_w_link label,
#bo_w .bo_w_flie label{ all:unset }

/* 3) 폼 베이스(네가 원하는 그 블록 그대로) */
#bo_w .board-write{
  --form-max: 800px;   /* 전체 폭 */
  --label-w : 110px;   /* 라벨 폭 */
  --gap     : 10px;

  max-width: var(--form-max);
  margin: 0 auto;
  padding: 12px 0;
}

/* 4) dl 그리드 */
#bo_w .board-write dl{
  display:grid;
  grid-template-columns: var(--label-w) 1fr;
  align-items:center;
  gap:var(--gap);
  margin:10px 0;
}
#bo_w .board-write dt{
  margin:0; text-align:right; padding-right:6px; white-space:nowrap;
  font-family:'Paperlogy-4Regular'; font-size:13px; color:#4a4a4a; opacity:.95;
}
#bo_w .board-write dd{ margin:0 }

/* 5) 인풋 공통 룩 */
#bo_w .board-write .frm_input,
#bo_w .board-write .frm_input.full,
#bo_w .board-write .frm_file.full,
#bo_w .board-write textarea,
#bo_w .board-write select{
  width:100%;
  border:1px solid rgba(110,70,50,.25);
  border-radius:10px;
  padding:9px 12px;
  background:#fff;
  font:inherit;
  color:#333;
  outline:none;
}
#bo_w .board-write select{ height:36px; padding:6px 12px }
#bo_w .board-write input[type="file"]{ padding:6px 8px }

/* 6) 에디터 박스 */
#bo_w .board-write .wr_content{ margin:0 }

/* 7) 작은 텍스트 */
#bo_w #char_count_desc,
#bo_w #char_count_wrap{ font-size:12px; color:#666 }

/* 8) 버튼 */
#bo_w .btn_confirm{ margin-top:16px; text-align:center }
#bo_w .btn_confirm .ui-btn{
  display:inline-block; background:#fff; color:#222;
  border:1px solid rgba(0,0,0,.15); border-radius:10px;
  padding:8px 16px; text-decoration:none; font-weight:600; line-height:1.2;
  box-shadow:0 1px 3px rgba(0,0,0,.06)
}
#bo_w .btn_confirm .ui-btn:hover{ background:#f5f5f5; box-shadow:0 2px 6px rgba(0,0,0,.10) }
#bo_w .btn_confirm .ui-btn.point{ background:#ae5d5c; border-color:#ae5d5c; color:#fff }

/* 9) 라벨 정렬 */
#bo_w .board-write #set_secret + * label,
#bo_w .board-write label[for="notice"],
#bo_w .board-write label[for="html"],
#bo_w .board-write label[for="mail"]{
  margin-left:4px; margin-right:8px; vertical-align:middle; font-size:13px
}

/* 10) 테마 잔재 폭/플로트 제거 */
#bo_w .board-write input[type="text"],
#bo_w .board-write input[type="url"],
#bo_w .board-write input[type="file"],
#bo_w .board-write select,
#bo_w .board-write textarea,
#bo_w .board-write .frm_input,
#bo_w .board-write .frm_input.full,
#bo_w .board-write .frm_file.full,
#bo_w .board-write .wr_content{
  width:100% !important; max-width:100% !important; float:none !important
}

/* 11) 모바일 */
@media (max-width:800px){
  #bo_w .board-write{ max-width:100%; padding:8px 0 }
  #bo_w .board-write dl{ grid-template-columns:1fr }
  #bo_w .board-write dt{ text-align:left; padding-right:0 }
}


/* 관리자: 리스트 상단 옵션 버튼 영역을 플렉스로 정렬 */
.list-option.btn{
  display:flex;
  gap:6px;
  justify-content: flex-end;
  height: 20px;
}
.list-option{ opacity:.2; transition:opacity .2s }
.list-option:hover{ opacity:1 }

/* 기본순서를 뒤로 밀어두고(mod가 앞으로 오게) */
.list-option.btn a{ order:2; }

/* 수정 버튼을 맨 앞으로 */
.list-option.btn a.mod{ order:1; }

/* 버튼 룩: 흰색 박스 + 둥근 모서리 + 그림자(검은 배경 대비) */
.list-option.btn a{
  display:inline-block;
  background:#fff !important;
  color:#222 !important;
  border:1px solid rgba(0,0,0,.18) !important;
  border-radius:5px;
  padding:3px;
  font-size: 0.8em;
  line-height:1.2;
  text-decoration:none !important;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  transition:background .15s ease, box-shadow .15s ease, transform .02s ease;
}

/* 호버/액티브 */
.list-option.btn a:hover{
  background:#f6f7f8 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.list-option.btn a:active{
  transform:translateY(.5px);
}


#bo_btn_top,
.simple-category,
.bo_fx {
  position: relative;
  z-index: 9999 !important;
}