/* ============================================================
   게시판 버튼 공용 규격 — 글쓰기 · 목록 · 글 상세 · 댓글
   [2026-09-20 지시] 자리마다 크기가 달랐던 것을 아래 변수 한 벌로 묶는다.
   버튼 크기를 바꿀 일이 생기면 이 변수만 고친다 — 아래 규칙들은 전부 이 값을 읽는다.
   · 색은 var(--c-primary) = 어드민 사이트설정(css-2/bg_sub.php)과 연동. 하드코딩하지 않는다.
   · 로드는 theme/design/head.sub.php 의 게시판 블록 한 곳이다.
   · 스킨 style.css 5벌은 건드리지 않는다 — 선택자 특이도로 이 파일이 이긴다.
     스킨이 `.sub_btns{...!important}` 로 칠하는 자리만 배경·글자색에만 !important 를 사용한다.
   ============================================================ */
:root{
  --bbtn-h:46px;          /* 버튼 높이 — 글쓰기·목록·글 상세·댓글 전부 같다 */
  --bbtn-w:150px;         /* 글자 버튼의 고정 폭 */
  --bbtn-r:10px;          /* 모서리 */
  --bbtn-fs:15px;         /* 글자 크기 */
  --bbtn-line:#e3e8f0;    /* 보조 버튼 테두리 */
  --bbtn-ink:#4a5568;     /* 보조 버튼 글자 */
  --bfile-h:48px;         /* 첨부 칸 높이 — 게시판 5개 전부 */
  --bfile-ic:44px;        /* 첨부 칸 왼쪽 아이콘 자리 폭 */
  --bfile-btn:34px;       /* 파일선택 버튼 높이 */
}

/* ── 공통 모양 — 주 동작(메인색)과 보조(흰 배경)만 다르다 ── */
#bo_w .btn_confirm .btn_submit,
#bo_w .btn_confirm input.btn_submit,
#bo_w .btn_confirm button.btn_submit,
#bo_w .btn_confirm .btn_cancel,
.btn_bo_user_btm .btn, .btn_bo_user_btm_v .btn,
.btn_bo_user_btm .btn_b01, .btn_bo_user_btm_v .btn_b01,
.btn_bo_user_btm_v .btn_v_01 a, .btn_v_01 a,
.bo_vc_w .btn_submit{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  flex:0 0 auto;width:var(--bbtn-w);height:var(--bbtn-h);padding:0;
  border-radius:var(--bbtn-r);
  font-family:inherit;font-size:var(--bbtn-fs);font-weight:700;letter-spacing:-.01em;
  text-decoration:none;vertical-align:middle;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,border-color .16s ease,color .16s ease;
}

/* ── 주 동작 — 작성완료 · 작성하기 · 댓글등록 ── */
#bo_w .btn_confirm .btn_submit,
#bo_w .btn_confirm input.btn_submit,
#bo_w .btn_confirm button.btn_submit,
.bo_vc_w .btn_submit,
.btn_bo_user_btm [title="작성"], .btn_bo_user_btm_v [title="작성"],
.btn_bo_user_btm [title="작성하기"], .btn_bo_user_btm_v [title="작성하기"],
.btn_bo_user_btm [title="등록"], .btn_bo_user_btm_v [title="등록"]{
  background:var(--c-primary,#253D67) !important;background-color:var(--c-primary,#253D67) !important;
  color:#fff !important;border:1px solid var(--c-primary,#253D67);
  box-shadow:0 2px 6px -2px rgba(10,35,64,.30);
}
#bo_w .btn_confirm .btn_submit:hover,
#bo_w .btn_confirm input.btn_submit:hover,
#bo_w .btn_confirm button.btn_submit:hover,
.bo_vc_w .btn_submit:hover,
.btn_bo_user_btm [title="작성"]:hover, .btn_bo_user_btm_v [title="작성"]:hover,
.btn_bo_user_btm [title="작성하기"]:hover, .btn_bo_user_btm_v [title="작성하기"]:hover,
.btn_bo_user_btm [title="등록"]:hover, .btn_bo_user_btm_v [title="등록"]:hover{
  background-image:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22));
  transform:translateY(2px);box-shadow:0 3px 8px -6px rgba(10,35,64,.4);
}
#bo_w .btn_confirm .btn_submit:active,.bo_vc_w .btn_submit:active{transform:translateY(3px)}

/* ── 보조 — 취소 · 목록 · 답변 · 삭제 · 목록보기 ── */
#bo_w .btn_confirm .btn_cancel,
.btn_bo_user_btm .btn_b01, .btn_bo_user_btm_v .btn_b01,
.btn_bo_user_btm_v .btn_v_01 a, .btn_v_01 a{
  background:#fff !important;background-color:#fff !important;
  color:var(--bbtn-ink) !important;border:1px solid var(--bbtn-line);
}
#bo_w .btn_confirm .btn_cancel:hover,
.btn_bo_user_btm .btn_b01:hover, .btn_bo_user_btm_v .btn_b01:hover, .btn_v_01 a:hover{
  color:#111c2e !important;border-color:#c3cddb;
}
/* 웹진 스킨(basic_blog)은 `.btn_v_01 a`·`.btn_list_01 a` 에 !important 로
   글자 14px·모서리 4px·줄높이 35px 를 강제한다(style.css:538·606). 그 세 속성만 되돌린다.
   같은 클래스가 적용되는 갤러리·공지에는 이미 같은 값이라 달라지는 것이 없다. */
.btn_v_01 a, .btn_list_01 a{
  font-size:var(--bbtn-fs) !important;border-radius:var(--bbtn-r) !important;
  line-height:1 !important;font-weight:700 !important;padding:0 !important;
}

/* 아이콘은 버튼 높이를 따른다 — 스킨이 줄높이를 태그에 직접 적어 두었다 */
.btn_bo_user .btn i, .btn_bo_user_btm .btn i, .btn_bo_user_btm_v .btn i, .btn_v_01 a i{
  line-height:1 !important;vertical-align:middle;font-size:13px;
}

/* ── 잠금(동의 전 · 전송 중) ── */
#bo_w .btn_confirm .btn_submit.is-off,
#bo_w .btn_confirm .btn_submit:disabled,
#bo_w .btn_confirm .btn_submit.is-off:hover,
#bo_w .btn_confirm .btn_submit:disabled:hover{
  background:#c8d1dd !important;background-color:#c8d1dd !important;background-image:none;
  border-color:#c8d1dd;box-shadow:none;cursor:not-allowed;transform:translateY(0);
}

/* ── 줄 배치 ── */
#bo_w .btn_confirm,
#bo_w .btn_confirm.write_div{
  display:flex;gap:10px;align-items:center;justify-content:center;   /* 가운데 */
  margin:22px 0 0;padding:0;border:0;
}
.btn_bo_user_btm{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.btn_bo_user_btm li{display:block;float:none}
/* 글 상세 줄의 자리(오른쪽·위로 당김)는 스킨 그대로 두고 모양만 맞춘다 */
.btn_bo_user_btm_v li{display:inline-block;margin-left:6px}
/* 목록·글 상세 위쪽 줄은 아이콘 전용이라 정사각으로 둔다 */
.btn_bo_user .btn, .btn_bo_user .btn_b01{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--bbtn-h);height:var(--bbtn-h);padding:0;border-radius:var(--bbtn-r);
  background:#fff !important;color:var(--bbtn-ink) !important;border:1px solid var(--bbtn-line);
  font-size:14px;text-decoration:none;
}
.btn_bo_user .btn_b01:hover{color:#111c2e !important;border-color:#c3cddb}

/* ── 댓글 — 비밀글 라벨은 본문 크기로 ── */
.bo_vc_w .btn_confirm{
  display:flex;gap:10px;align-items:center;justify-content:flex-end;clear:both;margin-top:12px;
}
.bo_vc_w .btn_confirm label{
  display:inline-flex;align-items:center;margin:0;
  font-size:14px !important;font-weight:600;color:var(--bbtn-ink);text-align:left;
}
.bo_vc_w .btn_confirm .chk_box{margin-right:auto}
.bo_vc_w .btn_confirm .secret_cm label{font-size:14px !important}

/* ── 좁은 폭 — 폭을 꽉 채우고, 글쓰기는 작성완료를 위로 ── */
@media (max-width:640px){
  #bo_w .btn_confirm,
  #bo_w .btn_confirm.write_div{flex-direction:column-reverse}
  #bo_w .btn_confirm .btn_submit,
  #bo_w .btn_confirm .btn_cancel,
  .bo_vc_w .btn_submit,
  .btn_bo_user_btm .btn_b01{width:100%}
}

/* ============================================================
   첨부파일 칸 — 입력칸과 같은 모양으로 (2026-09-20 지시 「첨부파일도 포함」)
   · 스킨마다 회색 박스(#f3f3f3 · 40px)와 흰 박스(50px)로 달랐던 것을 한 규격으로 맞춘다.
   · 게시판 5개 전부가 이 규격을 따른다 — 공지·갤러리·웹진·온라인문의·제품.
     온라인문의(form.jn-form)도 포함한다. 그 폼은 항목을 격자로 놓으므로 아래 한 줄로 해제한다.
     제품은 마크업이 달라(.writeskin) 아래 제품 절에 같은 값을 읽는 규칙을 따로 둔다.
   ============================================================ */
/* 온라인문의는 항목을 130px 격자로 놓는다(write-jn.css) — 첨부 칸만 그 격자에서 뺀다 */
#bo_w .bo_w_flie, #bo_w .bo_w_flie .file_wr{display:block}
#bo_w .bo_w_flie .file_wr{
  position:relative;height:var(--bfile-h);padding:5px;margin:0;
  background:none;border:1px solid var(--bbtn-line);border-radius:var(--bbtn-r);   /* 배경색 없음 (2026-09-20 지시) */
}
#bo_w .bo_w_flie .lb_icon{
  position:absolute;top:0;left:0;width:var(--bfile-ic);height:var(--bbtn-h);line-height:var(--bbtn-h);
  border-radius:var(--bbtn-r) 0 0 var(--bbtn-r);background:none;
  text-align:center;font-size:1.05em;color:#8b97a8;
}
#bo_w .bo_w_flie .frm_file{
  padding-left:calc(var(--bfile-ic) + 10px);margin:0;height:36px;font-size:14px;color:var(--bbtn-ink);
  background:none;   /* 스킨의 .w_inputs 회색 띠를 없앤다 — 제품 칸과 같은 흰 박스가 된다 */
}
#bo_w .bo_w_flie .frm_input{margin:10px 0 0}
/* 첨부 칸 아이콘을 5개 게시판에서 하나로 — 스킨마다 폴더(fa-folder-open)와
   다운로드(fa-download · xi-download)로 갈려 있었다. 마크업은 그대로 두고 글리프만 맞춘다.
   Font Awesome 5 는 다섯 페이지 전부에 로드된다(2026-09-20 확인). */
#bo_w .bo_w_flie .lb_icon i, .writeskin .item .box label i{
  font-family:"Font Awesome 5 Free" !important;font-weight:900;font-style:normal;
}
#bo_w .bo_w_flie .lb_icon i::before, .writeskin .item .box label i::before{content:"\f07c"}
#bo_w .bo_w_flie .file_del{
  position:absolute;top:14px;right:12px;font-size:.92em;color:#7d7d7d;
}

/* 파일 선택 버튼 — 브라우저 기본 버튼을 취소 버튼과 같은 모양으로 (2026-09-20 지시) */
#bo_w .bo_w_flie .frm_file::file-selector-button,
#bo_w .bo_w_flie .frm_file::-webkit-file-upload-button{
  height:var(--bfile-btn);margin:0 12px 0 0;padding:0 16px;
  background:none;color:var(--bbtn-ink);border:1px solid #d7deea;border-radius:8px;
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
}
#bo_w .bo_w_flie .frm_file::file-selector-button:hover{border-color:#c3cddb;color:#111c2e}

/* ============================================================
   제품 게시판 — 마크업이 다르다(버튼 줄은 .control 안, 첨부 칸은 .writeskin 안)
   [2026-09-20 지시] 갤러리는 다른 스킨과 같은 클래스라 위 규칙에 이미 들어온다.
   제품만 클래스가 `.bt` · `.bt_b01`(보조) · `.bt_b02`(주) · `.bt_adm`·`.bt_list`(관리자용)이어서
   여기 한 절을 더 둔다. 크기는 위와 같은 변수를 읽는다.
   🔴 버튼 줄의 컨테이너는 `.control` 이다 — 목록·상세 둘 다 그 안이고 `.viewskin` 밖이다.
      `.viewskin .button .bt` 로 적으면 상세의 수정·삭제·목록으로가 옛 모양으로 남는다(2026-09-20 실측).
   ============================================================ */
.control .button .bt{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:var(--bbtn-w);height:var(--bbtn-h);padding:0;line-height:1;
  border-radius:var(--bbtn-r);
  font-family:inherit;font-size:var(--bbtn-fs);font-weight:700;letter-spacing:-.01em;
  text-decoration:none;vertical-align:middle;cursor:pointer;
  background:#fff !important;color:var(--bbtn-ink) !important;border:1px solid var(--bbtn-line);
  transition:transform .2s ease,box-shadow .2s ease,border-color .16s ease,color .16s ease;
}
.control .button .bt:hover{
  color:#111c2e !important;border-color:#c3cddb;
}
/* 주 동작 — 등록하기 · 작성완료 */
.control .button .bt_b02{
  background:var(--c-primary,#253D67) !important;color:#fff !important;
  border-color:var(--c-primary,#253D67);box-shadow:0 2px 6px -2px rgba(10,35,64,.30);
}
.control .button .bt_b02:hover{
  background-image:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22));
  transform:translateY(2px);box-shadow:0 3px 8px -6px rgba(10,35,64,.4);
}
.control .button{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (max-width:640px){
  .control .button .bt{width:100%}
}

/* 체크박스가 든 버튼(전체선택) — 라벨 글자만 12px 로 작았다 */
.control .button .bt label{margin:0;line-height:1;font-size:var(--bbtn-fs);font-weight:700;cursor:pointer}
.control .button .bt input[type="checkbox"]{width:14px;height:14px;margin:0 7px 0 0;vertical-align:middle}

/* ── 제품의 첨부(이미지 등록) 칸 — 위 첨부 절과 같은 변수를 읽는다 ──
   마크업이 `.item > .box > label + input[type=file]` 이라 선택자만 따로 둔다.
   라벨의 「이미지첨부」 글자는 감춘다 — 다른 게시판 넷은 아이콘만 노출된다. */
.writeskin .item .box{
  display:flex;align-items:center;
  height:var(--bfile-h);padding:5px;
  background:none;border:1px solid var(--bbtn-line);border-radius:var(--bbtn-r);
}
.writeskin .item:has(.del) .box{border-radius:var(--bbtn-r) var(--bbtn-r) 0 0}
.writeskin .item .box label{
  float:none;flex:0 0 auto;width:var(--bfile-ic);min-width:0;
  height:var(--bbtn-h);line-height:var(--bbtn-h);margin:0;
  text-align:center;font-size:0;color:#8b97a8;cursor:pointer;
}
.writeskin .item .box label i{position:static;top:0;font-size:19px;line-height:inherit}
.writeskin .item .box input[type="file"]{
  float:none;flex:1 1 auto;width:auto;height:36px;margin:0;padding:0;
  font-size:14px;color:var(--bbtn-ink);border:0;
}
.writeskin .item .box input[type="file"]::file-selector-button,
.writeskin .item .box input[type="file"]::-webkit-file-upload-button{
  height:var(--bfile-btn);margin:0 12px 0 0;padding:0 16px;
  background:none;color:var(--bbtn-ink);border:1px solid #d7deea;border-radius:8px;
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
}
.writeskin .item .box input[type="file"]::file-selector-button:hover{border-color:#c3cddb;color:#111c2e}
/* 파일 설명칸(게시판 설정에서 켠 경우에만 해당) */
.writeskin .item .box input.t_txt{
  float:none;flex:1 1 40%;width:auto;height:var(--bfile-btn);margin:0 0 0 8px;padding:0 10px;
  font-size:13.5px;color:var(--bbtn-ink);border:1px solid var(--bbtn-line);border-radius:8px;
}
/* 첨부 삭제 줄 — 박스 아래에 같은 테두리로 이어진다 */
.writeskin .item .del{
  padding:0 12px;background:none;
  border:1px solid var(--bbtn-line);border-top:0;border-radius:0 0 var(--bbtn-r) var(--bbtn-r);
}
.writeskin .item .del label[id="del"]{font-size:13.5px;color:#7d7d7d}

/* ── 갤러리 목록 하단 줄 — 컨테이너가 `.list_btns` 다 ──
   [2026-09-20] 공지·웹진은 `.btn_bo_user_btm` 이라 위 규칙에 들어오지만 갤러리만 이 줄이 적용된다.
   스킨의 `.btn_list_01 a`(회색 #aaa · 35px · 모서리 4px)가 그대로 적용돼 혼자 달랐다.
   관리자 버튼 둘은 글자 없이 아이콘만 있는 마크업(0x0 이라 노출되지 않았다)이라
   `title` 값을 글자로 노출한다 — 스킨 마크업은 고치지 않는다. */
.list_btns{display:flex;gap:8px;justify-content:flex-end;align-items:center;float:none}
.list_btns .btn_list_01{display:block;margin:0;padding:0;list-style:none}
.list_btns .btn_b01, .list_btns .bbs_adm_btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:var(--bbtn-w);height:var(--bbtn-h);padding:0;line-height:1;
  border-radius:var(--bbtn-r);
  font-family:inherit;font-size:var(--bbtn-fs);font-weight:700;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  background:#fff !important;color:var(--bbtn-ink) !important;border:1px solid var(--bbtn-line);
  transition:transform .2s ease,box-shadow .2s ease,border-color .16s ease,color .16s ease;
}
.list_btns .btn_b01:hover, .list_btns .bbs_adm_btn:hover{color:#111c2e !important;border-color:#c3cddb}
.list_btns .bbs_adm_btn img{display:none}
.list_btns .bbs_adm_btn::after{content:attr(title)}
@media (max-width:640px){
  .list_btns{flex-wrap:wrap}
  .list_btns .btn_list_01, .list_btns .btn_b01, .list_btns .bbs_adm_btn{width:100%}
}