/********************************************* ====== 리스트페이지 관련 ====== *********************************************/
#ncontainer .nboard{display:grid;gap:14px}
#ncontainer .nboard__title{margin:2px 0 0;font-size:20px;font-weight:800;background:linear-gradient(90deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
#ncontainer .nboard__subtitle{margin:0;color:#6b7280;font-size:13px}

/* Toolbar */
#ncontainer .nboard__toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
#ncontainer .ntoolbar__left{display:flex;gap:8px;align-items:center;overflow:auto;padding-bottom:2px}
#ncontainer .ntoolbar__right{display:flex;gap:8px;align-items:center}
#ncontainer .nchip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;color:#374151;white-space:nowrap}
#ncontainer .nchip--on{border-color:transparent;background:linear-gradient(90deg,var(--g1),var(--g2));color:#fff}

#ncontainer .nbtn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
#ncontainer .nbtn:hover{border-color:var(--g1);color:var(--g1)}
#ncontainer .nbtn-primary{background:linear-gradient(90deg,var(--g1),var(--g2));border-color:transparent;color:#fff;box-shadow:var(--shadow)}
#ncontainer .nbtn-primary:hover{filter:brightness(.98);color:#ffffff;}
#ncontainer .nbtn-ghost{background:#fff;border:1px solid var(--line);color:#111}
#ncontainer .nbtn-group .nbtn{height:38px}
#ncontainer .nbtn.bigbt{min-width:80px;}


/* Filters/Search (UI only – 실제 검색은 아래 bo_sch_wrap 폼 사용) */
#ncontainer .nboard__filters{display:grid;grid-template-columns:1fr;gap:8px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow);padding:12px}
#ncontainer .nfilter-row{display:grid;grid-template-columns:1fr auto;gap:8px}
#ncontainer .nfilter-row .nsearch{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;padding:6px 8px}
#ncontainer .nfilter-row input[type="search"]{flex:1;border:0;outline:0}
.nfilter-row select{height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 10px}


/* Table List (desktop-first) */
#ncontainer .nboard__list{border:1px solid var(--line);border-radius:12px;background:#fff}
#ncontainer table.nbtbl{width:100%;border-collapse:separate;border-spacing:0}
#ncontainer .nbtbl th,#ncontainer .nbtbl td{padding:12px 10px;border-bottom:1px solid var(--line2);font-size:14px;vertical-align:middle}
#ncontainer .nbtbl thead th{position:sticky;top:0;background:#fff;font-weight:700;color:#374151;z-index:1}
#ncontainer .nbtbl tbody tr:hover{background:var(--soft)}
#ncontainer .c{text-align:center}
#ncontainer .r{text-align:right}
#ncontainer .nnotice-row{background:linear-gradient(90deg,rgba(99,102,241,.06),rgba(6,182,212,.06))}
#ncontainer .nnotice-mark{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px}
#ncontainer .ntitlecell{display:flex;align-items:center;gap:8px;min-width:0}
#ncontainer .ntitlecell .ntit{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#ncontainer .nbadge{display:inline-flex;align-items:center;justify-content:center;height:20px;min-width:20px;padding:0 6px;border-radius:999px;border:1px solid var(--line);font-size:12px}
#ncontainer .nbadge--cmt{border-color:transparent;background:linear-gradient(90deg,var(--g1),var(--g2));color:#fff}
#ncontainer .ncat{font-size:12px;color:#6366f1;border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap}

/* Cards (mobile) */
#ncontainer .nboard__cards{display:none}
#ncontainer .ncard-item{position:relative;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;display:grid;gap:8px}
#ncontainer .ncard-meta{display:flex;flex-wrap:wrap;gap:8px;color:#6b7280;font-size:12px}
#ncontainer .ncard-title{font-weight:700;display:flex;gap:8px;align-items:center}
#ncontainer .ncard-title .ntit{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ncontainer .ncard-item.nnotice{background:linear-gradient(180deg,rgba(99,102,241,.06),rgba(6,182,212,.06))}
#ncontainer .ncard-check{position:absolute;right:8px;top:8px}

/* Pagination (wrap gnuboard $write_pages) */
#ncontainer .nboard__pager{display:flex;justify-content:center}
#ncontainer .nboard__pager .pg{display:flex;gap:6px;flex-wrap:wrap}
#ncontainer .nboard__pager .pg_page,#ncontainer .nboard__pager .pg_current{min-width:36px;height:36px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;background:#fff;padding:0 10px}
#ncontainer .nboard__pager .pg_current{border-color:transparent;background:linear-gradient(90deg,var(--g1),var(--g2));color:#fff}

 .n-icon--search { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Responsive */
@media (max-width: 720px){
  #ncontainer .ntoolbar__right .nbtn{height:36px}
  #ncontainer .nboard__list{display:none}
  #ncontainer .nboard__cards{display:grid;gap:10px}
  #ncontainer .nfilter-row{grid-template-columns:1fr}
  #ncontainer .bo_vc_w_info .frm_input{width:100%;}
}


/****************************************** 작성 페이지 관련 **********************************************/

/* ==============================
   n-Write (충돌 방지를 위해 모두 n 스코프)
   - 기존 아이디/클래스/JS 동작은 변경하지 않음
   - 반응형/가독성/편의성 강화
   ============================== */
:root{
  --n-max: 1100px; --n-px: 16px; --n-gap: 14px;
  --n-line:#e5e7eb; --n-line2:#eef0f3; --n-soft:#f8fafc;
  --n-text:#0b1220; --n-muted:#6b7280;
  --n-g1:#6366f1; --n-g2:#06b6d4;
  --n-shadow:0 10px 28px rgba(15,23,42,.08);
}

.nrow{margin:10px 0;}


#bo_w.nwrite{color:var(--n-text)}
#bo_w.nwrite .nwrap{max-width:var(--n-max);margin:0 auto;padding:0;display:grid;gap:var(--n-gap)}
/*#bo_w.nwrite .nwrap{max-width:var(--n-max);margin:0 auto;padding:12px var(--n-px);display:grid;gap:var(--n-gap)}*/

#bo_w.nwrite .ncard{border:1px solid var(--n-line);border-radius:14px;background:#fff;box-shadow:var(--n-shadow);padding:16px;display:grid;gap:14px}
#bo_w.nwrite .nhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
#bo_w.nwrite .ntitle{margin:0;font-size:18px;font-weight:800;background:linear-gradient(90deg,var(--n-g1),var(--n-g2));-webkit-background-clip:text;background-clip:text;color:transparent}

#bo_w.nwrite .nrow{display:grid;gap:8px}
#bo_w.nwrite .ngrid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 720px){ #bo_w.nwrite .ngrid2{grid-template-columns:1fr} }

#bo_w.nwrite .nlabel{font-size:13px;color:var(--n-muted)}
#bo_w.nwrite .ninput,
#bo_w.nwrite select,
#bo_w.nwrite .wr_content textarea,
#bo_w.nwrite .frm_input{ /* 기존 input들과 공존 */
   width:100%; height:44px;border:1px solid var(--n-line);border-radius:12px;background:#fff;
  padding:0 12px;outline:0;transition:border-color .15s, box-shadow .15s;
}
#bo_w.nwrite .ninput:focus,
#bo_w.nwrite select:focus,
#bo_w.nwrite .wr_content textarea:focus,
#bo_w.nwrite .frm_input:focus{
  border-color:var(--n-g1); box-shadow:0 0 0 3px rgba(99,102,241,.16);
}
#bo_w.nwrite .ninput--lg{height:48px;font-size:16px;border-radius:14px}
#bo_w.nwrite .nselect{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9ca3af 50%),linear-gradient(135deg,#9ca3af 50%,transparent 50%);background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px;background-size:6px 6px; background-repeat:no-repeat}

#bo_w.nwrite .neditor{border:1px solid var(--n-line);border-radius:14px;background:#fff;padding:10px;margin-bottom:20px;}
#bo_w.nwrite .nhelp{margin:4px 0 8px;color:var(--n-muted);font-size:12px}
#bo_w.nwrite #char_count_wrap{margin-top:6px;text-align:right;color:var(--n-muted);font-size:12px}

#bo_w.nwrite .nopts{border:1px dashed var(--n-line2);border-radius:12px;padding:10px;background:#fff}
#bo_w.nwrite .nopts .bo_v_option{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
#bo_w.nwrite .nopts .bo_v_option .chk_box{margin:0}
#bo_w.nwrite .nopts .bo_v_option label{display:inline-flex;gap:6px;align-items:center}

#bo_w.nwrite .nfile{display:grid;gap:8px}
#bo_w.nwrite .nfile-row{display:flex;gap:10px;align-items:center}
#bo_w.nwrite .nfile-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--n-line);border-radius:12px;background:#fff}
#bo_w.nwrite .nfile input[type="file"]{flex:1;width:100%;border:1px dashed var(--n-line);border-radius:12px;padding:10px;height:auto}
#bo_w.nwrite .file_del{color:var(--n-muted);font-size:13px}

#bo_w.nwrite .nactions{display:flex;gap:8px;justify-content:flex-end}
#bo_w.nwrite .nbtn{display:inline-flex;align-items:center;justify-content:center;min-width:96px;height:44px;border-radius:12px;border:1px solid var(--n-line);background:#fff;padding:0 14px;cursor:pointer;text-decoration:none;transition:filter .15s,border-color .15s,color .15s}
#bo_w.nwrite .nbtn:hover{border-color:var(--n-g1);color:#ffffff;}
/*#bo_w.nwrite .nbtn:hover{border-color:var(--n-g1);color:var(--n-g1)}*/
#bo_w.nwrite .nbtn--primary{background:linear-gradient(90deg,var(--n-g1),var(--n-g2));border-color:transparent;color:#fff;box-shadow:var(--n-shadow)}
#bo_w.nwrite .nbtn--primary:hover{filter:brightness(.97)}
#bo_w.nwrite .nbtn--ghost{background:#fff;color:#111}
#bo_w.nwrite .nbtn--ghost:hover{color:#111}

#bo_w.nwrite #autosave_wrapper{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
#bo_w.nwrite #btn_autosave{height:50px;border:1px solid var(--n-line);border-radius:12px;background:#fff;padding:0 12px;cursor:pointer}
#bo_w.nwrite #btn_autosave:hover{border-color:var(--n-g1);color:var(--n-g1)}
#bo_w.nwrite #autosave_pop{border:1px solid var(--n-line);border-radius:12px;background:#fff;box-shadow:var(--n-shadow);padding:10px;margin-top:8px}

.bo_vc_w_info{width:100% !important;}
/* =========================================================
  글작성페이지 CAPTCHA (kcaptcha) – scoped & responsive override
   - 기존 마크업/스크립트 그대로, 스타일만 강제 적용
   - 작성 페이지(#bo_w #fwrite) 안에서만 영향
   ========================================================= */
#bo_w #fwrite #captcha.captcha{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:16px; padding:12px;
  background:#fff !important;
  border:1px solid #e5e7eb; border-radius:12px;
  box-sizing:border-box;
}
#bo_w #fwrite #captcha legend{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}

/* 이미지 */
#bo_w #fwrite #captcha_img{
  flex:0 0 120px; height:46px; line-height:25px;object-fit:cover;
  border:1px solid #e5e7eb; border-radius:10px; background:#fff;
}

/* 입력창 */
#bo_w #fwrite #captcha_key{
  flex:1 1 180px; min-width:160px;
  height:42px; padding:0 12px;
  border:1px solid #e5e7eb; border-radius:10px;
  outline:0; background:#fff;
  border-color:#93c5fd !important;           /* 연한 블루 테두리 */
  box-shadow:0 0 0 1px rgba(99,102,241,.18) !important; /* 은은한 글로우 */
  transition:border-color .2s, box-shadow .2s;
}

.btn_cke_sc{height:unset;padding:5px;}

/* 버튼 2개 */
#bo_w #fwrite #captcha_mp3,
#bo_w #fwrite #captcha_reload{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 12px;
  border:1px solid #e5e7eb; border-radius:10px;
  cursor:pointer; white-space:nowrap;
  line-height:1;
}
#bo_w #fwrite #captcha_mp3:hover,
#bo_w #fwrite #captcha_reload:hover{ border-color:#6366f1; color:#6366f1; }

/* 안내문 */
#bo_w #fwrite #captcha_info{
  flex:1 0 100%;
  font-size:12px; color:#6b7280; margin-top:2px;
}

/* 모바일: 이미지가 1행 전체, 나머지는 다음 줄로 */
@media (max-width:560px){
  #bo_w #fwrite #captcha_img{ flex:1 0 100%; height:56px; object-fit:contain;}
  #bo_w #fwrite #captcha_key{ flex:1 0 100%; }
}

/* 버튼/인풋 내부 텍스트 정렬 보정(브라우저 기본/테마 간섭 방지) */
#bo_w #fwrite #captcha_key,
#bo_w #fwrite #captcha_mp3,
#bo_w #fwrite #captcha_reload{ font:inherit; }

/* 주변 블록과 간격(여백이 너무 붙는 현상 방지) */
#bo_w #fwrite .write_div + #captcha.captcha{ margin-top:18px; }
#bo_w #fwrite #captcha.captcha + .btn_confirm{ margin-top:18px; }

#bo_vc .bo_vl_opt{min-width:30px !important;}


/** 글 보기페이지 캡챠 관련 시작 **/
/* =========================================================
   CAPTCHA (kcaptcha) – comment scope & responsive override
   - 댓글 영역(#bo_vc #fviewcomment) 안의 <fieldset id="captcha" class="_comment">
   - 기존 마크업/스크립트는 그대로, 스타일만 강제 적용
   ========================================================= */
#bo_v #fviewcomment #captcha._comment{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:60px; padding:12px;
  background:#fff !important;
  border:1px solid #e5e7eb; border-radius:12px;
  box-sizing:border-box;
}
#bo_v #fviewcomment #captcha._comment legend{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}

/* 이미지 */
#bo_v #fviewcomment #captcha_img{
  flex:0 0 120px; height:46px; object-fit:cover;
  border:1px solid #e5e7eb; border-radius:10px; background:#fff;
}

/* 입력창 */
#bo_v #fviewcomment #captcha_key{
  flex:1 1 180px; min-width:160px;
  height:42px; padding:0 12px;
  border:1px solid #e5e7eb; border-radius:10px;
  outline:0; background:#fff;
  border-color:#93c5fd !important;                 /* 연한 블루 테두리 */
  box-shadow:0 0 0 1px rgba(99,102,241,.18) !important; /* 은은한 글로우 */
  transition:border-color .2s, box-shadow .2s;
}

/* 버튼 2개 (a/button 둘 다 대응) */
#bo_v #fviewcomment #captcha_mp3,
#bo_v #fviewcomment #captcha_reload{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 12px;
  border:1px solid #e5e7eb; border-radius:10px;
  cursor:pointer; white-space:nowrap; line-height:1;
  text-decoration:none; color:inherit;
}
#bo_v #fviewcomment #captcha_mp3:hover,
#bo_v #fviewcomment #captcha_reload:hover{
  border-color:#6366f1; color:#6366f1;
}

/* 안내문 */
#bo_v #fviewcomment #captcha_info{
  flex:1 0 100%;
  font-size:12px; color:#6b7280; margin-top:2px;
}

/* 모바일: 이미지가 1행 전체, 나머지는 다음 줄로 */
@media (max-width:560px){
  #bo_v #fviewcomment #captcha_img{ flex:1 0 100%; height:56px; object-fit:contain; }
  #bo_v #fviewcomment #captcha_key{ flex:1 0 100%; }
}

/* 버튼/인풋 내부 텍스트 정렬 보정(브라우저 기본/테마 간섭 방지) */
#bo_v #fviewcomment #captcha_key,
#bo_v #fviewcomment #captcha_mp3,
#bo_v #fviewcomment #captcha_reload{ font:inherit; }

/* 주변 블록과 간격(붙는 현상 방지) */
#bo_v #fviewcomment .bo_vc_w .wr_content + #captcha._comment{ margin-top:18px; }
#bo_v #fviewcomment #captcha._comment + .btn_confirm{ margin-top:18px; }

/* (기존 보정 유지) */
#bo_v .bo_vl_opt{ min-width:30px !important; }





/********************** 보기페이지 관련 ****************************************/

  .nbtn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 14px;border:1px solid var(--line, #e5e7eb);border-radius:10px;background:#fff;line-height:1;cursor:pointer}
  .nbtn:hover{border-color:var(--g1, #6366f1);color:var(--g1, #6366f1)}
  .nbtn-primary{background:linear-gradient(90deg,var(--g1, #6366f1),var(--g2, #06b6d4));border-color:transparent;color:#fff;box-shadow:var(--shadow, 0 10px 26px rgba(15,23,42,.06))}
  .nbtn-primary:hover{filter:brightness(.98)}

/* ===== SNS 공유버튼: 아이콘+텍스트 한 줄 정렬(그누 기본 스타일 완전 오버라이드) ===== */
#bo_v_sns{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin:0 !important;
  padding:0 !important;
}
#bo_v_sns li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* 공통 버튼 리셋 + 정렬 */
#bo_v_sns li a{
  display:inline-flex !important;
  align-items:center !important;
  /*gap:8px !important;*/
  height:36px !important;
  padding:0 12px !important;
  border-radius:10px !important;
  border:1px solid var(--line, #e5e7eb) !important;
  box-shadow:none !important;

  width:auto !important;
  max-width:100% !important;

  background:#fff !important;
  background-image:none !important;
  background-position:0 0 !important;
  background-repeat:no-repeat !important;

  color:#111 !important;
  font-size:14px !important;
  line-height:1 !important;
  text-indent:0 !important;
  overflow:visible !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}

/* 아이콘 */
#bo_v_sns li a img{
  display:block !important;   /* baseline 여백 제거 */
  width:20px !important;
  height:20px !important;
}

/* 텍스트 */
#bo_v_sns li a span{
  display:inline-block !important;
  margin:0 !important;
}

/* 서비스별 컬러(원하면 유지/수정) */
#bo_v_sns li a.sns_f{
  background-color:#1877f2 !important;
  border-color:#1877f2 !important;
  color:#fff !important;
}
#bo_v_sns li a.sns_t{
  background-color:#1da1f2 !important;
  border-color:#1da1f2 !important;
  color:#fff !important;
}

/* hover 상태 */
#bo_v_sns li a:hover{
  filter:brightness(0.96) !important;
}

#bo_vc .bo_vl_opt{min-width:30px !important;}
#bo_v_share .btn{width:90px !important;}
#bo_v_title .bo_v_tit{font-size:1.2em !important;}
/*보기페이지 끝 */






/* 프로필(스마트뷰) 정렬 고정 */
.sv_wrap{display:inline-block !important; vertical-align:middle !important;}
.sv_wrap .sv a{width:130px !important;}

/* 링크 한 줄 정렬 */
.sv_wrap .sv_member{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  line-height:1.2 !important;
  vertical-align:middle !important;
  text-decoration:none !important;
}

/* 아바타 컨테이너(있을 때만 공간 차지) */
.sv_wrap .sv_member .profile_img{
  display:inline-flex !important;
  width:22px !important;
  height:22px !important;
  flex:0 0 22px !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:4px !important;           /* 원형 원하면 50% */
  background:#f3f4f6 !important;
}

/* 실제 이미지 사이즈 맞추기 */
.sv_wrap .sv_member .profile_img img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* 이미지 없을 때(관리자에서 비표시 등) span이 비면 자동 숨김 */
.sv_wrap .sv_member .profile_img:empty{
  display:none !important;
}

/* 말줄임(공간 좁을 때 깔끔하게) - 선택 사항 */
.sv_wrap .sv_member{max-width:100%;}
.sv_wrap .sv_member{white-space:nowrap;}