@charset "utf-8";
/*  게시판 스킨 손질 — 스톤 어라이브 (2026-09-21)

    같은 폴더 style.css 는 그누보드 원본에서 **색만** 도구로 갈아 놓은
    것이다(_g5/skin_css_tokens.py). 그것만으로는 모양이 옛 스킨 그대로라,
    짜임새와 간격은 여기서 다듬는다.

    이 파일이 style.css 뒤에 실린다. 원본이 `#id` 로 적어 둔 규칙은
    클래스만으로 못 이기므로, 같은 `#id` 를 함께 적어야 한다.

    site.css 의 토큰을 쓴다. 여기서 새 색을 만들지 않는다.              */


/* ═══════════════ 게시판 이름 ═══════════════

   이름은 테마 head.php 가 #container_title 로 찍는다.
   스킨이 표 안에 넣어 두는 <caption> 과 겹치므로 그것은 숨긴다.

   **.sound_only 는 건드리지 않는다.** 그 이름은 단추 안 숨은 글에도
   쓰여, 드러내면 '게시판 검색'·'새글' 같은 글자가 같이 새어 나온다. */
#container_title{
  margin:0 0 20px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
  color:var(--ink); font-size:clamp(20px,2.4vw,26px);
  text-align:center; letter-spacing:-.02em;
}
#bo_list caption,
#bo_gall caption{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}


/* ═══════════════ 목록 ═══════════════ */
#bo_list{padding:0}
#bo_list_total{color:var(--ink-mute); font-size:13px}
#bo_list_total .total_cnt{color:var(--gold)}

#bo_cate h2{margin:0 0 10px; font-size:15px; color:var(--ink-dim)}
#bo_cate ul{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; padding:0; list-style:none}
#bo_cate a{
  display:inline-flex; align-items:center; height:34px; padding:0 14px;
  border-radius:999px; border:1px solid var(--line);
  color:var(--ink-dim); font-size:13px;
}
#bo_cate a:hover{border-color:rgba(255,200,97,.45); color:var(--gold)}
#bo_cate #bo_cate_on{
  border-color:var(--gold); color:var(--gold); background:rgba(255,200,97,.14);
}

.bo_fx{display:flex; align-items:center; gap:8px; margin:0 0 14px}
.bo_fx .btn_bo_user{margin-left:auto}

#bo_list .board_list{border-top:1px solid var(--line)}
#bo_list .td_num2{color:var(--ink-mute); font-size:13px}
#bo_list .td_subject a{color:var(--ink)}
#bo_list .td_subject a:hover{color:var(--gold)}
#bo_list .bo_current{color:var(--gold)}
#bo_list .td_name,
#bo_list .td_date,
#bo_list .td_num{color:var(--ink-mute); font-size:12.5px}

/*  ‘새 글’ 딱지 */
#bo_list .new_icon,
#bo_list .cnt_cmt{
  display:inline-flex; align-items:center; height:19px; padding:0 7px;
  margin-left:5px; border-radius:999px;
  background:rgba(255,200,97,.16); border:1px solid rgba(255,200,97,.3);
  color:var(--gold); font-size:11px; vertical-align:1px;
}
#bo_list .cnt_cmt{background:rgba(255,236,200,.08); border-color:var(--line); color:var(--ink-mute)}

/*  공지 줄 */
#bo_list .bo_notice td{background:rgba(255,200,97,.05)}
#bo_list .bo_notice .notice_icon{color:var(--gold); font-size:12px}


/* ═══════════════ 검색 ═══════════════ */
#bo_sch{margin-top:22px; text-align:center}
#bo_sch fieldset{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:10px 12px; border-radius:12px; border:1px solid var(--line);
}
#bo_sch select,
#bo_sch .sch_input{min-height:40px}
#bo_sch .sch_input{width:min(260px,52vw)}


/* ═══════════════ 글 읽기 ═══════════════ */
#bo_v_title{margin-bottom:6px}
#bo_v_title .bo_v_cate{
  display:inline-flex; align-items:center; height:24px; padding:0 10px;
  margin-right:7px; border-radius:999px;
  background:rgba(255,200,97,.14); border:1px solid rgba(255,200,97,.3);
  color:var(--gold); font-size:12px; vertical-align:2px;
}
#bo_v_info{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  padding:12px 0; margin:0 0 4px;
  border-bottom:1px solid var(--line);
}
#bo_v_info strong{color:var(--ink-dim); font-size:13px}
#bo_v_info .sv_member,
#bo_v_info .member{color:var(--ink)}
#bo_v_info .profile_img img{border-radius:50%}

#bo_v_file ul,
#bo_v_link ul{margin:0; padding:0; list-style:none}
#bo_v_file li,
#bo_v_link li{
  margin:6px 0; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line);
}
#bo_v_file a,
#bo_v_link a{color:var(--ink-dim); font-size:13px}
#bo_v_file a:hover,
#bo_v_link a:hover{color:var(--gold)}

#bo_v_atc{padding:22px 2px}
#bo_v_con{color:var(--ink-dim); line-height:1.9; font-size:15px}
#bo_v_con img{max-width:100%; height:auto; border-radius:8px}

/*  좋아요·싫어요 */
#bo_v_act{margin:20px 0; text-align:center}
#bo_v_act a{
  display:inline-flex; align-items:center; gap:7px; min-height:42px;
  padding:0 20px; margin:0 4px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-dim); font-size:14px;
}
#bo_v_act a:hover{border-color:var(--gold); color:var(--gold)}

/*  앞 글 · 다음 글 */
#bo_v_nb ul{margin:18px 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
#bo_v_nb li{padding:12px 4px; border-bottom:1px solid rgba(255,236,200,.07)}
#bo_v_nb a{color:var(--ink-dim); font-size:14px}
#bo_v_nb a:hover{color:var(--gold)}


/* ═══════════════ 댓글 ═══════════════ */
#bo_vc{margin-top:26px}
#bo_vc h2{margin:0 0 14px}
#bo_vc article{padding:16px 2px; border-bottom:1px solid rgba(255,236,200,.07)}
#bo_vc header{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-bottom:8px;
}
#bo_vc .sv_member,
#bo_vc .member{color:var(--ink); font-size:14px}
#bo_vc .bo_vc_hdinfo{color:var(--ink-mute); font-size:12px}
#bo_vc p{margin:0; color:var(--ink-dim); line-height:1.8; font-size:14px}
#bo_vc .bo_vc_act{display:flex; gap:6px; margin-top:9px}
#bo_vc .bo_vc_act a{color:var(--ink-mute); font-size:12px}
#bo_vc .bo_vc_act a:hover{color:var(--gold)}

#bo_vc_w{margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
#bo_vc_w .bo_vc_w_info{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
#bo_vc_w textarea{width:100%; min-height:96px}
#bo_vc_w .btn_confirm{display:flex; align-items:center; gap:10px; margin-top:12px}
#bo_vc_w .btn_confirm .btn_submit{margin-left:auto}


/* ═══════════════ 글쓰기 ═══════════════ */
#bo_w{max-width:none}
#bo_w .write_div{margin:0 0 10px; padding:0; border:0}
#bo_w .bo_w_tit,
#bo_w .bo_w_select,
#bo_w .bo_w_link,
#bo_w .bo_w_flie,
#bo_w .bo_w_info{margin-bottom:10px}

/*  이름·비번·메일·홈페이지를 한 줄에 */
#bo_w .bo_w_info{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
#bo_w .bo_w_info .frm_input{width:100%}
@media (max-width:760px){
  #bo_w .bo_w_info{grid-template-columns:repeat(2,minmax(0,1fr))}
}

#bo_w .frm_input,
#bo_w textarea{width:100%}
#bo_w #wr_content{min-height:280px}

/*  html 체크 줄 */
#bo_w .write_div .chk_box{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
#bo_w .chk_box label{display:inline-flex; align-items:center; gap:6px; cursor:pointer}

/*  파일 붙이기 */
#bo_w .bo_w_flie .file_wr{margin-bottom:6px}
#bo_w .bo_w_flie .frm_file{width:100%}

/*  맨 아래 단추 */
#bo_w .btn_confirm{display:flex; gap:8px; margin-top:16px}
#bo_w .btn_confirm .btn_submit{margin-left:auto; min-width:120px}


/* ═══════════════ 갤러리 ═══════════════ */
#bo_gall .gall_con{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;
  margin:0; padding:0; list-style:none;
}
#bo_gall li{
  margin:0; padding:12px; border-radius:14px;
  border:1px solid var(--line); background:rgba(0,0,0,.2);
}
#bo_gall li:hover{border-color:rgba(255,200,97,.4)}
#bo_gall .gall_href img{width:100%; height:auto; border-radius:10px}
#bo_gall .gall_text_href a{color:var(--ink); font-size:14px}
#bo_gall .gall_text_href a:hover{color:var(--gold)}
#bo_gall .gall_info{margin-top:6px; color:var(--ink-mute); font-size:12px}


/* ═══════════════ 좁은 화면 ═══════════════ */
@media (max-width:760px){
  #bo_list .td_num,
  #bo_list .td_name,
  #bo_list .td_date{display:none}
  #bo_v_info{gap:4px 10px; font-size:12px}
  #bo_v_con{font-size:14px}
  #bo_gall .gall_con{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ═══════════════ 스마트에디터 ═══════════════

   에디터는 제 틀(iframe)과 제 스타일을 들고 온다. 그 안까지 어둡게 하려면
   플러그인을 고쳐야 하는데, 글은 흰 바탕에 쓰는 편이 읽기 좋으므로
   **안은 그대로 두고 겉테두리만** 우리 결에 맞춘다. */
#bo_w .smarteditor2,
#bo_w .wr_content.smarteditor2{
  border:1px solid var(--line); border-radius:11px; overflow:hidden;
}
#bo_w .smarteditor2 iframe{display:block}

/*  글 쓰는 칸은 종이다 (2026-09-21)

    에디터는 iframe 두 겹이다. 바깥 겹(SmartEditor2Skin.html)만 색을 가질 수
    있고 — 안쪽 두 문서는 배경이 투명이라 바깥 색이 그대로 비친다 —
    스킨 style.css 가 그 바깥 겹을 어둡게 칠해 두었다. 종이로 되돌린다.
    안쪽 글자는 검정이라 크림 바탕에서 그대로 읽힌다. */
.sa-wrap #container.is-board #bo_w .smarteditor2 iframe,
.sa-wrap #container.is-board #bo_w .wr_content.smarteditor2 iframe{
  background-color:#fffaf0 !important;
}

/*  에디터가 켜지면 원래 글상자는 숨는다. 그때 최소높이가 남아 빈 자리를
    만들므로 없앤다 */
#bo_w .smarteditor2 #wr_content[style*="display: none"],
#bo_w .smarteditor2 #wr_content[style*="display:none"]{min-height:0}

/*  단축키 안내 단추는 에디터 위에 겹쳐 떠서 가린다 */
#bo_w .btn_help,
#bo_w a[href="#se_help"]{
  position:static; margin:0 0 8px;
  font-size:12px; color:var(--ink-mute);
}

/* ═══════════════ 글 본문 ═══════════════

   카드 전체가 종이가 됐으므로(g5.css 11번) 본문은 색을 따로 안 준다.
   대신 읽는 자리라는 것이 드러나게 테두리와 여백만 준다. */
body.sa-inner #bo_v_atc{
  margin:18px 0 0; padding:24px 26px;
  border-radius:12px; border:1px solid rgba(120,90,50,.28);
  background-color:rgba(255,250,240,.7) !important;
}
body.sa-inner #bo_v_con{ font-size:15.5px; line-height:1.9 }
body.sa-inner #bo_v_con a{ text-decoration:underline }
body.sa-inner #bo_v_con blockquote{
  margin:14px 0; padding:10px 16px;
  border-left:3px solid rgba(120,90,50,.45);
  background-color:rgba(200,170,110,.18) !important;
}
body.sa-inner #bo_v_con hr{ border:0; border-top:1px solid rgba(120,90,50,.3) }
body.sa-inner #bo_v_con code,
body.sa-inner #bo_v_con pre{
  padding:2px 6px; border-radius:6px;
  background-color:rgba(200,170,110,.25) !important;
}

/*  댓글 한 덩이씩 */
body.sa-inner #bo_vc article{
  margin:8px 0; padding:14px 16px !important;
  border-radius:11px; border:1px solid rgba(120,90,50,.22);
  background-color:rgba(255,250,240,.6) !important;
}

@media (max-width:760px){
  body.sa-inner #bo_v_atc{padding:16px 14px}
  body.sa-inner #bo_v_con{font-size:15px}
}

/* ═══════════════ 최근 글 · 목록 단추 (2026-09-21) ═══════════════

   글을 다 읽은 자리에서 다음 글로 이어 가거나 목록으로 돌아갈 수 있게
   맨 아래에 둔다. 위쪽 아이콘 단추(≡)만으로는 눈에 안 띄었다. */
#sa_v_more{
  margin-top:28px; padding-top:22px;
  border-top:1px solid var(--line);
}
.sa_more_tit{
  margin:0 0 12px; font-size:15px; color:var(--ink-dim);
}
.sa_more_list{margin:0 0 22px; padding:0; list-style:none}
.sa_more_list li{border-bottom:1px solid var(--line)}
.sa_more_list li:last-child{border-bottom:0}
.sa_more_list a{
  display:flex; align-items:center; gap:10px;
  padding:11px 6px; color:var(--ink-dim); font-size:14px;
}
.sa_more_list a:hover{color:var(--gold)}
.sa_more_subject{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sa-wrap #container.is-board .sa_more_cmt{
  flex:0 0 auto; min-width:20px; padding:1px 7px; border-radius:999px;
  border:1px solid var(--line); background-color:var(--stone-2) !important;
  font-style:normal; font-size:11px;
}
.sa_more_date{
  flex:0 0 auto; color:var(--ink-mute); font-size:12px;
  font-variant-numeric:tabular-nums;
}
/*  지금 보고 있는 글 */
.sa_more_list li.is-now a{color:var(--gold)}
.sa_more_list li.is-now .sa_more_subject::before{
  content:"\25B8 "; color:var(--gold);
}

.sa_more_btns{display:flex; align-items:center; gap:8px}
.sa_btn_list,.sa_btn_write{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 26px; border-radius:11px;
  border:1px solid var(--line); font-size:15px;
}
.sa-wrap #container.is-board .sa_btn_list{
  flex:1; background-color:var(--stone-2) !important; color:var(--ink);
}
.sa-wrap #container.is-board .sa_btn_list:hover{border-color:var(--gold); color:var(--gold)}
.sa-wrap #container.is-board .sa_btn_write{
  background-color:#e8c789 !important; border-color:#c79a4a; color:#4a2c0c;
}
.sa-wrap #container.is-board .sa_btn_write:hover{background-color:#f0d49f !important; color:#3a2410}

@media (max-width:560px){
  .sa_more_date{display:none}
  .sa_btn_list,.sa_btn_write{padding:0 16px; font-size:14px}
}

/* ═══════════════ 굵게 걷어내기 (2026-09-21) ═══════════════

   쓰는 글꼴(ONE Mobile POP)에 굵은 자체가 없다. 굵게를 주면 브라우저가
   없는 자체를 억지로 부풀려 획이 뭉개진다. 강조는 색과 크기로 한다.
   (site.css 에 같은 규칙이 있지만 스킨이 .bo_tit 로 다시 걸어 이긴다) */
.sa-wrap #container.is-board .bo_tit,
.sa-wrap #container.is-board .bo_notice td a,
.sa-wrap #container.is-board .bo_notice .notice_icon,
.sa-wrap #container.is-board #bo_cate #bo_cate_on,
.sa-wrap #container.is-board #bo_v_info .guest,
.sa-wrap #container.is-board #bo_v_table,
.sa-wrap #container.is-board #char_count,
.sa-wrap #container.is-board .autosave_close,
.sa-wrap #container.is-board #bo_list .bo_tit .new_icon{
  font-weight:400;
}