@charset "utf-8";
/* SIR 지운아빠 / mainstory + write(whisper) 통합 커스텀 */

/* ----------------------------------------------------
   폰트
---------------------------------------------------- */
@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;
}

/* ----------------------------------------------------
   카테고리
---------------------------------------------------- */
.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 ease;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_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:flex;flex-wrap:wrap;justify-content:center;
  gap:.5em;padding:20px 0;max-width:960px;margin:0 auto;list-style:none
}
#bo_gall .gall_li{
  float:none!important;flex:0 0 clamp(80px,18vw,140px);
  min-width:0;position:relative;padding:4px;box-sizing:content-box;overflow:visible
}
#bo_gall .gall_box{
  aspect-ratio:1/1;width:100%;
  background-size:140%!important;background-position:center center;background-repeat:no-repeat;
  border-radius:50%;overflow:hidden;
  box-shadow: inset 0 10px 15px rgba(255,0,100,.3),
              inset .5em .5em .5em rgba(100,255,200,.5),
              0 6px 18px rgba(255,255,255,.4);
  border:2px solid rgba(255,255,255,.3);
  transition:all .3s ease;backdrop-filter:blur(3px)
}
#bo_gall .gall_box:hover{
  transform:scale(1.1);
  box-shadow: inset 0 10px 15px rgba(255,255,255,.2),
              inset .5em .5em .5em rgba(255,255,255,.2),
              0 6px 18px rgba(255,255,255,.3)
}
#bo_gall .gall_con{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:2}
#bo_gall .gall_chk{position:absolute;bottom:0;left:0;right:0;z-index:2}

.gall_link_group{
  display:none;margin:6px auto 0;padding:0;border-radius:12px;text-align:center;animation:fadeDown .3s ease;
  background:rgba(0,0,0,.5);backdrop-filter:blur(3px);box-shadow:0 4px 6px rgba(0,0,0,.2);
  width:fit-content;max-width:90%
}
.gall_link_group a{
  display:inline-block;color:#fff;text-align:center;text-decoration:none;padding:6px 12px;transition:all .2s ease
}
.gall_link_group a:hover{background:rgba(174,92,92,.6);color:#fff!important;border-radius:12px}
@keyframes fadeDown{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

/* ----------------------------------------------------
   상단 버튼/검색
---------------------------------------------------- */
#bo_btn_top{margin:10px 0}
#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{margin:0;padding:0;list-style:none}
.btn_bo_user{float:right;margin:0;padding:0;list-style:none}
.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;vertical-align:middle}

#bo_sch{float:left}
#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}

/* 글쓰기 버튼 룩 */
#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 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;text-align:center;font-weight:bold}
.pg_wrap{clear:both}

/* ----------------------------------------------------
   뷰(모달 최소 구성)
---------------------------------------------------- */
#view_area{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:90;max-width:min(1080px,92vw);max-height:90vh;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.4)
}
#bo_v{position:relative;padding:20px 30px;box-sizing:border-box;overflow:auto}
#bo_v_con img,#bo_v_atc img{max-width:100%;height:auto}

/* ----------------------------------------------------
   반응형 보정
---------------------------------------------------- */
@media (max-width:480px){
  #view_area{max-width:95vw}
}

/* ==========================================================
   글쓰기 폼: whisper 스타일로 완전 통일
   - default.css의 고정 폭/배치를 차단
   - 실제 폭은 --form-max로만 제어
========================================================== */

/* 컨테이너: 다른 css의 #bo_w 고정폭 무효화 + 변수 선언 */
#bo_w{
  --form-max: 800px;
  max-width:none!important;      /* 기본 테마의 max-width 차단 */
  width:100%;
  margin:0 auto;
  padding:20px;
}

/* 레거시 배치/라벨 초기화 */
#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}

/* 베이스 레이아웃 */
#bo_w .board-write{
  --form-max: 800px;   /* 전체 폭 */
  --label-w : 110px;   /* 라벨 폭 */
  --gap     : 10px;

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

/* 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}

/* 입력 컴포넌트 */
#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}
#bo_w .board-write .wr_content{margin:0}

/* 소형 안내 텍스트 */
#bo_w #char_count_desc,#bo_w #char_count_wrap{font-size:12px;color:#666}

/* 버튼 */
#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}

/* 공개옵션 라벨 정렬 */
#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}

/* 테마 잔재 폭/플로트 해제 */
#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
}

/* 모바일 */
@media (max-width:768px){
  #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}
}

/* ===============================
   메인 배경 (mainstory 전용)
   body에 somogrid-bg 클래스를 붙이면 동작
=============================== */
html.somogrid-bg,
body.somogrid-bg{ background:transparent !important; }

body.somogrid-bg{
  position: relative; /* 일부 테마에서 z-index 컨텍스트 보장 */
}

body.somogrid-bg::before{
  content:"";
  position: fixed;           /* 스크롤 고정 배경 */
  inset: 0;
  z-index: -1;               /* 문서 뒤로 */
  pointer-events: none;
  background-image: url('/skin/board/mainstory/img/bg_mainstory.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 성능(모바일) 최적화 옵션 */
  will-change: transform;
}

/* 테마가 #wrap/#container에 배경색을 강하게 주는 경우를 대비한 우회 */
.somogrid-bg #wrap,
.somogrid-bg #wrapper,
.somogrid-bg #container{
  background: transparent !important;
}


/* 관리자: 리스트 상단 옵션 버튼 영역을 플렉스로 정렬 */
.list-option.btn{
  display:flex;
  gap:6px;
  justify-content: flex-end;
}
.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);
}

/* 배경이 어두울 때 대비 강화(사이트에 다크 배경 클래스가 있다면 같이 사용) */
.somogrid-bg .list-option.btn a{
  border-color:rgba(255,255,255,.35) !important;
  box-shadow:0 1px 4px rgba(255,255,255,.18);
}

textarea#wr_content {
    max-height: 50px !important;
    min-height: 10px;
}

/* 카테고리 변경 시 줄바꿈 전용 */
#bo_gall #gall_ul .cat_break{
  flex: 0 0 100%;
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0;
}