/* 스톤 어라이브 — 그누보드 기본 스킨 덧칠 (2026-09-21, 3판)

   ─────────────────────────────────────────────────────────────
   1·2판은 흰 상자를 볼 때마다 그 선택자를 하나씩 더했다. 그누보드 스킨은
   쪽마다 아이디가 달라(#bo_v, #bo_w, .mbskin …) 끝이 없었다.

   3판은 뒤집는다 — **쪽 안의 바탕색을 한 번에 다 지우고**, 우리가 보여
   주려는 면만 다시 칠한다. 안 가본 쪽에서도 흰 상자가 안 나온다.

   지우는 것은 바탕'색'뿐이다. 바탕'그림'은 아이콘에 쓰이므로 안 건드린다.
   ─────────────────────────────────────────────────────────────

   범위는 body.sa-inner — 그누보드가 제 스킨으로 그리는 쪽이다.
   우리가 만든 쪽(pets·jobs·play)은 sa-own 이라 여기 안 걸린다.

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

/* ═══════════════ 1. 바탕색 싹 지우기 ═══════════════ */
/*  **범위는 .sa-wrap / .mbskin 안이다.** 처음에는 body.sa-inner 전체에
    걸었다가 우리 머리띠까지 덮어, 드롭다운 메뉴(밝은 바탕 + 어두운 글자)의
    바탕만 지워져 글자가 안 보였다. 머리띠·푸터는 site.css 가 맡는다. */
body.sa-inner .sa-wrap,   body.sa-inner .sa-wrap *:not(img):not(canvas):not(svg):not(iframe),
body.sa-inner .mbskin,    body.sa-inner .mbskin *:not(img):not(canvas):not(svg):not(iframe){
  background-color:transparent !important;
}

/* ═══════════════ 2. 보여 줄 면만 다시 칠하기 ═══════════════ */
.sa-wrap #container{ background-color:rgba(27,22,17,.88) !important }
body.sa-inner thead th,
body.sa-inner .tbl_head01 thead th,
body.sa-inner .tbl_frm01 th{ background-color:rgba(0,0,0,.30) !important }
body.sa-inner tbody tr:hover td{ background-color:rgba(255,236,200,.05) !important }

body.sa-inner input[type=text],body.sa-inner input[type=password],
body.sa-inner input[type=email],body.sa-inner input[type=tel],
body.sa-inner input[type=number],body.sa-inner input[type=search],
body.sa-inner input[type=url],body.sa-inner input[type=date],
body.sa-inner select,body.sa-inner textarea,body.sa-inner .frm_input{
  background-color:var(--stone) !important;
}
body.sa-inner .btn,body.sa-inner .btn_submit,body.sa-inner .btn_cancel,
body.sa-inner .btn_b01,body.sa-inner .btn_b02,body.sa-inner .btn_b03,
body.sa-inner .btn_admin,body.sa-inner .btn_frmline,body.sa-inner .btn_close,
body.sa-inner input[type=submit],body.sa-inner input[type=button],
body.sa-inner button:not(.burger),
body.sa-inner .pg_page,body.sa-inner .pg_current{
  background-color:var(--stone-2) !important;
}
body.sa-inner .mbskin_box{ background-color:rgba(27,22,17,.94) !important }
body.sa-inner .mb_log_cate h2{ background-color:var(--stone-2) !important }
body.sa-inner #bo_vc h2,body.sa-inner .bo_vc_hdr{ background-color:rgba(0,0,0,.28) !important }
/* 자동등록방지 그림만은 흰 바탕이어야 읽힌다 */
body.sa-inner #captcha_img,body.sa-inner .captcha_img{ background-color:#fff !important }

/* ═══════════════ 3. 테두리도 한 번에 ═══════════════

   스킨은 #ccc·#e9e9e9 같은 밝은 테두리를 쓴다. 어두운 바탕에서 흰 줄로
   보이므로 통째로 우리 선 색으로 바꾼다. */
body.sa-inner .sa-wrap *,
body.sa-inner .mbskin *{ border-color:var(--line) }
body.sa-inner input:focus,body.sa-inner select:focus,body.sa-inner textarea:focus{
  border-color:var(--gold);
}

/* ═══════════════ 4. 글자와 고리 ═══════════════

   **앞가지 body.sa-inner 를 빼지 말 것.** 이것이 "그누보드가 그린 쪽" 이라는
   표시다. 빼면 우리가 만든 쪽(play·pets·jobs·download)까지 물들어,
   쪽 CSS 의 `.faq-item b{color:var(--gold)}` 같은 규칙이 같은 무게에
   나중 순서로 밀려 금색이 사라진다. */
body.sa-inner .sa-wrap,body.sa-inner .mbskin,
body.sa-inner .sa-wrap td,body.sa-inner .sa-wrap th,body.sa-inner .sa-wrap li,body.sa-inner .sa-wrap p,
body.sa-inner .sa-wrap dt,body.sa-inner .sa-wrap dd,body.sa-inner .sa-wrap label,body.sa-inner .sa-wrap span,body.sa-inner .sa-wrap div,
body.sa-inner .mbskin td,body.sa-inner .mbskin th,body.sa-inner .mbskin li,body.sa-inner .mbskin p,
body.sa-inner .mbskin dt,body.sa-inner .mbskin dd,body.sa-inner .mbskin label,body.sa-inner .mbskin span,body.sa-inner .mbskin div{ color:var(--ink-dim) }
body.sa-inner .sa-wrap a,body.sa-inner .mbskin a{ color:var(--ink) }
body.sa-inner .sa-wrap a:hover,body.sa-inner .mbskin a:hover{ color:var(--gold) }
body.sa-inner .sa-wrap h1,body.sa-inner .sa-wrap h2,body.sa-inner .sa-wrap h3,body.sa-inner .sa-wrap h4,
body.sa-inner .mbskin h1,body.sa-inner .mbskin h2,body.sa-inner .mbskin h3,body.sa-inner .mbskin h4{ color:var(--ink) }
body.sa-inner .sa-wrap strong,body.sa-inner .sa-wrap b,
body.sa-inner .mbskin strong,body.sa-inner .mbskin b{ color:var(--ink) }
body.sa-inner .sound_only,body.sa-inner .msg_sound_only{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

/* ═══════════════ 5. 큰 상자와 표 ═══════════════ */
.sa-wrap{ padding:calc(var(--head-h) + 34px) 0 80px; position:relative; z-index:1 }
.sa-wrap #container{
  padding:26px; border-radius:18px;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.sa-wrap #container_title{
  margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid var(--line);
  font-size:clamp(22px,2.6vw,30px); color:var(--ink); letter-spacing:-.02em;
}
body.sa-inner table{ width:100%; border-collapse:collapse }
body.sa-inner caption{ color:var(--ink-mute) }
body.sa-inner thead th{
  padding:11px 8px; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--ink-dim); font-weight:400; font-size:13px;
}
body.sa-inner tbody td{
  padding:11px 8px; border-bottom:1px solid rgba(255,236,200,.07); font-size:14px;
}

/* ═══════════════ 6. 입력칸·단추 ═══════════════ */
body.sa-inner input[type=text],body.sa-inner input[type=password],
body.sa-inner input[type=email],body.sa-inner input[type=tel],
body.sa-inner input[type=number],body.sa-inner input[type=search],
body.sa-inner input[type=url],body.sa-inner input[type=date],
body.sa-inner select,body.sa-inner textarea,body.sa-inner .frm_input{
  height:auto; padding:11px 12px; border-radius:9px;
  border:1px solid var(--line); color:var(--ink);
  font-family:inherit; font-size:14px; outline:none; text-shadow:none;
}
body.sa-inner input::placeholder,body.sa-inner textarea::placeholder{ color:var(--ink-mute) }
body.sa-inner select option{ background-color:var(--stone) !important; color:var(--ink) }
body.sa-inner input[type=checkbox],body.sa-inner input[type=radio]{
  width:auto; height:auto; padding:0; accent-color:var(--gold); vertical-align:middle;
}
body.sa-inner .btn,body.sa-inner .btn_submit,body.sa-inner .btn_cancel,
body.sa-inner .btn_b01,body.sa-inner .btn_b02,body.sa-inner .btn_b03,
body.sa-inner .btn_admin,body.sa-inner .btn_frmline,body.sa-inner .btn_close,
body.sa-inner input[type=submit],body.sa-inner button:not(.burger){
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:40px; padding:0 16px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); color:var(--ink);
  font-family:inherit; font-size:14px; line-height:1; white-space:nowrap;
  text-shadow:none;
}
body.sa-inner .btn_submit,body.sa-inner input[type=submit],body.sa-inner .btn_b01{
  border-color:rgba(255,200,97,.45); color:var(--gold);
}
body.sa-inner .btn:hover,body.sa-inner .btn_submit:hover,
body.sa-inner input[type=submit]:hover,body.sa-inner button:not(.burger):hover,
body.sa-inner .btn_b01:hover,body.sa-inner .btn_b02:hover{
  border-color:var(--gold); color:var(--gold);
}
body.sa-inner input[type=file]{ padding:7px; border:0; color:var(--ink-dim); font-size:13px }
body.sa-inner input[type=file]::file-selector-button{
  margin-right:10px; padding:7px 14px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background-color:var(--stone-2) !important;
  color:var(--ink); font-family:inherit; font-size:13px;
}
body.sa-inner .btn_bo_user,body.sa-inner .bo_fx ul,body.sa-inner .btn_bo_adm{
  display:flex; gap:6px; margin:0; padding:0; list-style:none;
}
body.sa-inner .pg_wrap{ margin-top:22px; text-align:center }
body.sa-inner .pg_page,body.sa-inner .pg_current{
  display:inline-block; min-width:34px; padding:8px 9px; margin:0 2px;
  border-radius:8px; border:1px solid var(--line); color:var(--ink-dim); font-size:13px;
}
body.sa-inner .pg_current{ border-color:var(--gold); color:var(--gold) }

/* ═══════════════ 7. 글읽기·댓글·글쓰기 ═══════════════ */
body.sa-inner #bo_v{ padding:0 }
body.sa-inner #bo_v_title{ padding-bottom:14px; border-bottom:1px solid var(--line) }
body.sa-inner #bo_v_title .bo_v_tit{ color:var(--ink); font-size:22px }
body.sa-inner #bo_v_info{ color:var(--ink-mute); font-size:13px }
body.sa-inner #bo_v_atc{ min-height:180px; padding:20px 2px }
body.sa-inner #bo_v_con{ color:var(--ink-dim); line-height:1.85 }
body.sa-inner #bo_v_con img,body.sa-inner #bo_v_atc img{ max-width:100%; height:auto }

body.sa-inner #bo_vc h2,body.sa-inner .bo_vc_hdr{
  padding:12px 14px; border-radius:11px; border:1px solid var(--line);
  color:var(--ink); font-size:15px;
}
body.sa-inner #bo_vc article{ padding:14px 2px; border-bottom:1px solid rgba(255,236,200,.07) }
body.sa-inner #wr_content{ min-height:110px }

body.sa-inner .file_wr{ display:flex; align-items:center; gap:8px; padding:7px 10px }
body.sa-inner .file_wr,body.sa-inner .write_div,
body.sa-inner .bo_w_link,body.sa-inner .bo_w_tit,body.sa-inner .bo_w_flie{
  border:1px solid var(--line); border-radius:9px;
}
body.sa-inner fieldset{ padding:14px; border-radius:11px; border:1px solid var(--line) }
body.sa-inner legend{ padding:0 8px; color:var(--ink-mute); font-size:12px }
body.sa-inner #captcha_key{ width:120px; text-align:center; letter-spacing:.2em }
body.sa-inner #captcha_info{ display:block; margin-top:8px; color:var(--ink-mute); font-size:12px }
body.sa-inner #captcha_img{ border-radius:8px; vertical-align:middle }

body.sa-inner .empty_table,body.sa-inner .empty_list,
body.sa-inner #bo_vc_empty,body.sa-inner .bo_vc_empty{
  padding:38px; text-align:center; color:var(--ink-mute);
}

/* ═══════════════ 8. 회원 쪽 (로그인·가입·비밀번호) ═══════════════ */
body.sa-inner .mbskin{
  max-width:460px; margin:0 auto; padding:calc(var(--head-h) + 20px) 18px 70px;
}
body.sa-inner .mbskin_box{
  position:relative; margin-top:96px; padding:30px 26px 26px;
  border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow);
}
/* 카드 윗변에 캐릭터가 걸터앉는다 */
body.sa-inner .mbskin_box::before{
  content:""; position:absolute; left:50%; bottom:100%;
  width:min(420px,96%); height:118px; transform:translateX(-50%);
  background-image:url("login-cast.webp");
  background-position:center bottom; background-size:contain; background-repeat:no-repeat;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.6));
  pointer-events:none;
}
body.sa-inner .mbskin h1{
  margin:0 0 20px; font-size:26px; color:var(--ink); text-align:center; letter-spacing:-.02em;
}
body.sa-inner .mb_log_cate{
  display:flex; margin:0 0 22px; border-radius:11px;
  border:1px solid var(--line); overflow:hidden;
}
body.sa-inner .mb_log_cate h2,body.sa-inner .mb_log_cate .join{
  flex:1; margin:0; padding:13px 0; text-align:center; font-size:15px; border:0;
}
body.sa-inner .mb_log_cate h2{ color:var(--gold) }
body.sa-inner .mb_log_cate .join{ color:var(--ink-dim) }
body.sa-inner .mb_log_cate .join:hover{ color:var(--gold) }
body.sa-inner #login_fs{ margin:0; padding:0; border:0 }
body.sa-inner #login_fs legend{ position:absolute; left:-9999px }
body.sa-inner #login_fs .frm_input{ width:100%; margin-bottom:10px }
body.sa-inner #login_fs .btn_submit{ width:100%; min-height:46px; font-size:15px; margin-top:6px }
body.sa-inner .login_if{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:16px; font-size:13px;
}
body.sa-inner .login_if label{ color:var(--ink-mute) }

/* 회원 쪽 위 로고 줄 (head.sub.php 가 넣는다) */
.sa-subtop{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--head-h);
  display:flex; align-items:center; padding:0 24px;
  background-color:rgba(14,11,9,.96) !important;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
.sa-subtop img{ height:46px; width:auto }

/* ═══════════════ 9. 쪽 배경 ═══════════════ */
body.sa-inner .page-bg{ opacity:.18; filter:saturate(.7) blur(3px) }
body.sa-inner .page-bg::after{
  background:linear-gradient(180deg,var(--bg) 0%,rgba(16,13,10,.72) 24%,rgba(16,13,10,.76) 72%,var(--bg) 100%) !important;
}

/* ═══════════════ 10. 좁은 화면 ═══════════════ */
@media (max-width:760px){
  .sa-wrap{ padding-top:calc(var(--head-h) + 20px) }
  .sa-wrap #container{ padding:18px 14px; border-radius:14px }
  body.sa-inner table{ font-size:13px }
  body.sa-inner .mbskin_box{ padding:24px 18px; margin-top:74px }
  body.sa-inner .mbskin_box::before{ height:92px }
}

/* ═══════════════ 11. 게시판 카드 = 종이 (2026-09-21) ═══════════════

   게시판 쪽은 어두운 판이 아니라 **연베이지 종이에 진한 브라운 글자**다.
   까닭이 둘이다 :

     · 에디터가 흰 바탕에 글을 쓴다. 읽는 쪽도 같아야 쓴 대로 보인다
     · 글쓴이가 넣은 색이 그대로 산다. 어두운 판이면 에디터가 심어 둔
       검은 글씨가 묻혀 안 보인다

   규칙을 하나씩 다시 적지 않는다. **카드 안에서만 토큰을 바꿔치기**하면
   위에 적어 둔 규칙들이 전부 따라온다.

   바깥(머리띠·푸터·배경)과 로그인·회원가입 카드는 그대로 어둡다.
   **게시판 카드(#container)만** 종이다. */

.sa-wrap #container.is-board{
  /* 종이 위에서 쓰는 색 — 머리띠 드롭다운이 쓰는 종이색과 같은 결 */
  --ink:#2e1b09;            /* 본문 글자 : 진한 브라운 */
  --ink-dim:#43300f;        /* 곁글자도 흐리지 않게. 종이 위에서는 옅으면 안 읽힌다 */
  --ink-mute:#6b5227;       /* 가장 옅은 것도 이 아래로는 안 내린다 */
  --line:rgba(120,90,50,.30);
  --stone:#fffaf0;          /* 입력칸 */
  --stone-2:#f0e2c6;        /* 단추·표 머리 */
  --gold:#a8631a;           /* 강조 : 종이 위에서는 짙은 호박색 */
  --gold-2:#8a4f12;
  --ember:#b23c12;
  --shadow:0 12px 30px rgba(0,0,0,.4);

  background-color:#fbf4e6 !important;
  border-color:rgba(120,90,50,.35);
  color:var(--ink);
}

/*  종이 위에서는 글자 그림자가 때처럼 보인다 */
.sa-wrap #container.is-board,
.sa-wrap #container.is-board *{ text-shadow:none }

/*  토큰이 안 걸리는 몇 곳만 손으로 */
.sa-wrap #container.is-board thead th,
.sa-wrap #container.is-board .tbl_head01 thead th,
.sa-wrap #container.is-board .tbl_frm01 th{ background-color:#f0e2c6 !important }
.sa-wrap #container.is-board tbody tr:hover td{ background-color:rgba(200,170,110,.18) !important }
.sa-wrap #container.is-board input[type=text],
.sa-wrap #container.is-board input[type=password],
.sa-wrap #container.is-board input[type=email],
.sa-wrap #container.is-board input[type=tel],
.sa-wrap #container.is-board input[type=number],
.sa-wrap #container.is-board input[type=search],
.sa-wrap #container.is-board input[type=url],
.sa-wrap #container.is-board input[type=date],
.sa-wrap #container.is-board select,
.sa-wrap #container.is-board textarea,
.sa-wrap #container.is-board .frm_input{ background-color:#fffaf0 !important }
.sa-wrap #container.is-board .btn,
.sa-wrap #container.is-board .btn_submit,
.sa-wrap #container.is-board .btn_cancel,
.sa-wrap #container.is-board .btn_b01,
.sa-wrap #container.is-board .btn_b02,
.sa-wrap #container.is-board .btn_b03,
.sa-wrap #container.is-board .btn_admin,
.sa-wrap #container.is-board .btn_frmline,
.sa-wrap #container.is-board input[type=submit],
.sa-wrap #container.is-board input[type=button],
.sa-wrap #container.is-board button:not(.burger),
.sa-wrap #container.is-board .pg_page,
.sa-wrap #container.is-board .pg_current{ background-color:#f0e2c6 !important }
.sa-wrap #container.is-board select option{ background-color:#fffaf0 !important; color:#3a2410 }

/*  으뜸 단추는 종이 위에서 도드라지게 */
.sa-wrap #container.is-board .btn_submit,
.sa-wrap #container.is-board input[type=submit],
.sa-wrap #container.is-board .btn_b01{
  background-color:#e8c789 !important; border-color:#c79a4a; color:#4a2c0c;
}
.sa-wrap #container.is-board .btn_submit:hover,
.sa-wrap #container.is-board input[type=submit]:hover,
.sa-wrap #container.is-board .btn_b01:hover{
  background-color:#f0d49f !important; border-color:#a8631a; color:#3a2410;
}
.sa-wrap #container.is-board .pg_current{ background-color:#e8c789 !important; color:#4a2c0c }

/*  자동등록방지 그림은 원래 흰 바탕이라 그대로 둔다 */
.sa-wrap #container.is-board #captcha_img{ background-color:#fff !important }