/* ════════════════════════════════════════════════════════════
   마음사랑 정신건강의학과 — 그누보드 브리지 CSS
   ─ 그누보드 게시판 페이지를 홈페이지 디자인 시스템과 통일
   ─ /assets/css/style.css 다음에 로드 (덮어쓰기 우선)
   김팀장 작성 · 2026-05
   ════════════════════════════════════════════════════════════ */

/* ─── 1. 그누보드 페이지 main 영역 ─── */
.ms-gnu-main {
  /* 본문 자체를 1200px max-width로 가운데 정렬 (홈페이지와 동일) */
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--sp-12)) var(--sp-6) var(--sp-20);
  min-height: 60vh;
  box-sizing: border-box;
}
/* 게시판 자식 요소들이 풀폭을 가져도 부모(1200px)에 의해 자동 제한됨
   inline style="width:..." 무효화 */
.ms-gnu-main #bo_v,
.ms-gnu-main #bo_list,
.ms-gnu-main #bo_list_total,
.ms-gnu-main #bo_w,
.ms-gnu-main #bo_cate,
.ms-gnu-main #bo_sch,
.ms-gnu-main #bo_vc,
.ms-gnu-main #bo_v_atc,
.ms-gnu-main #bo_v_nb {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}
/* 페이지 배경은 body가 담당 */
body {
  background: var(--bg-page);
}

/* 로그인 메시지 바 */
.ms-gnu-login-msg {
  background: var(--sage-50) !important;
  color: var(--sage-700) !important;
  padding: 10px 16px !important;
  border-radius: var(--r-md) !important;
  font-size: var(--fs-sm) !important;
  margin-bottom: var(--sp-6) !important;
  text-align: center;
}
.ms-gnu-login-msg a {
  color: var(--sage-700) !important;
  font-weight: 600;
  margin-left: 8px;
}

/* ─── 2. 그누보드 게시판 제목 영역 (board_head) ─── */
#bo_cate, .bo_cate {
  padding: var(--sp-8) 0 var(--sp-4) !important;
  border: 0 !important;
  background: transparent !important;
}
#bo_cate h2, .bo_cate h2 {
  font-size: var(--fs-3xl) !important;
  color: var(--text-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}

/* ─── 3. 게시판 목록 (list) 카드화 ─── */
#bo_list {
  background: var(--white);
  border: 1px solid rgba(31,45,61,0.06);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 0 !important;
}
#bo_list .tbl_wrap {
  margin: 0 !important;
}
#bo_list table {
  margin: 0 !important;
  border: 0 !important;
}
#bo_list th {
  background: var(--bg-soft) !important;
  color: var(--text-heading) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  padding: 16px 12px !important;
  border-bottom: 1px solid var(--border) !important;
}
#bo_list td {
  padding: 16px 12px !important;
  font-size: var(--fs-base) !important;
  color: var(--gray-700) !important;
  border-bottom: 1px solid var(--gray-50) !important;
  transition: background var(--t-fast);
}
#bo_list tr:hover td {
  background: var(--sage-50) !important;
}
#bo_list .bo_tit a {
  color: var(--text-heading) !important;
  font-weight: 500;
}
#bo_list .bo_tit a:hover {
  color: var(--sage-700) !important;
}

/* 분류 칩 */
#bo_list .bo_cate_link {
  display: inline-block;
  padding: 3px 10px;
  background: var(--sage-100);
  color: var(--sage-700) !important;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  margin-right: 6px;
}

/* 페이지네이션 */
.pg_wrap {
  text-align: center;
  margin: var(--sp-8) 0 !important;
}
.pg_wrap .pg_page, .pg_wrap .pg_current {
  display: inline-block;
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  padding: 0 12px;
  margin: 0 3px !important;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none !important;
}
.pg_wrap .pg_page {
  background: var(--white);
  color: var(--gray-700) !important;
  border: 1px solid var(--border);
  transition: all var(--t-fast);
}
.pg_wrap .pg_page:hover {
  background: var(--sage-50);
  border-color: var(--sage-300);
  color: var(--sage-700) !important;
}
.pg_wrap .pg_current {
  background: var(--sage-500);
  color: var(--white) !important;
  border: 1px solid var(--sage-500);
}

/* 게시판 검색 영역 */
#bo_sch {
  margin-top: var(--sp-6) !important;
  padding: var(--sp-4) !important;
  background: var(--bg-soft);
  border-radius: var(--r-md);
}

/* ─── 4. 게시물 상세 (view) 카드화 ─── */
#bo_v {
  background: var(--white) !important;
  border: 1px solid rgba(31,45,61,0.06) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-card) !important;
  padding: var(--sp-10) !important;
  margin: 0 !important;
}
#bo_v_title {
  font-size: clamp(1.5rem, 3vw, var(--fs-3xl)) !important;
  color: var(--text-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.35 !important;
  padding: 0 0 var(--sp-4) !important;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-6) !important;
}
#bo_v_title .bo_v_cate {
  display: inline-block;
  padding: 4px 12px;
  background: var(--sage-100);
  color: var(--sage-700);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-right: var(--sp-2);
  vertical-align: middle;
}
#bo_v_info {
  padding: var(--sp-4) 0 !important;
  border: 0 !important;
  color: var(--text-muted) !important;
  font-size: var(--fs-sm) !important;
  margin-bottom: var(--sp-6);
}
#bo_v_info .profile_info {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
#bo_v_info .pf_img img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
}

/* 본문 영역 */
#bo_v_atc {
  padding: var(--sp-6) 0 !important;
  min-height: 200px;
  border: 0 !important;
}
#bo_v_con {
  font-size: var(--fs-lg) !important;
  line-height: var(--lh-relaxed) !important;
  color: var(--text-body) !important;
  word-break: keep-all;
}
#bo_v_con h2 {
  font-size: var(--fs-2xl);
  color: var(--text-heading);
  margin: var(--sp-10) 0 var(--sp-4);
  letter-spacing: -0.02em;
}
#bo_v_con h3 {
  font-size: var(--fs-xl);
  color: var(--text-heading);
  margin: var(--sp-8) 0 var(--sp-3);
}
#bo_v_con h4 {
  font-size: var(--fs-lg);
  color: var(--sage-700);
  margin: var(--sp-6) 0 var(--sp-2);
}
#bo_v_con p {
  margin-bottom: var(--sp-4);
}
#bo_v_con ul, #bo_v_con ol {
  margin: var(--sp-4) 0;
  padding-left: var(--sp-6);
}
#bo_v_con li {
  margin-bottom: var(--sp-2);
}
#bo_v_con strong {
  color: var(--text-heading);
  font-weight: 600;
}
#bo_v_con blockquote {
  margin: var(--sp-8) 0;
  padding: var(--sp-6) var(--sp-8);
  background: var(--bg-soft);
  border-left: 3px solid var(--sage-500);
  border-radius: var(--r-md);
  color: var(--text-heading);
  font-style: italic;
}
#bo_v_con img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  margin: var(--sp-6) 0;
}
#bo_v_con .post-meta {
  margin-top: var(--sp-10);
  padding: var(--sp-4) var(--sp-6);
  background: var(--sage-50);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--sage-700);
  text-align: center;
}

/* 첨부파일·링크 영역 */
#bo_v_file, #bo_v_link {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  margin: var(--sp-6) 0 !important;
}

/* 이전·다음 글 */
#bo_v_nb {
  margin: var(--sp-8) 0 !important;
  background: var(--bg-soft) !important;
  border-radius: var(--r-md);
  padding: 0 !important;
}
#bo_v_nb ul {
  border: 0 !important;
}
#bo_v_nb li {
  padding: var(--sp-3) var(--sp-5) !important;
  border-bottom: 1px solid var(--border) !important;
}
#bo_v_nb li:last-child {
  border-bottom: 0 !important;
}

/* 버튼 (목록·답변·글쓰기 등) */
.btn_b01, .btn_b02, .btn_b03 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 16px !important;
  border-radius: var(--r-sm) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
  color: var(--text-heading) !important;
  text-decoration: none !important;
  transition: all var(--t-fast);
}
.btn_b01:hover, .btn_b02:hover, .btn_b03:hover {
  background: var(--sage-50) !important;
  border-color: var(--sage-300) !important;
  color: var(--sage-700) !important;
}
.btn_admin {
  background: var(--navy-800) !important;
  color: var(--white) !important;
  border-color: var(--navy-800) !important;
}
.btn_submit {
  background: var(--sage-500) !important;
  color: var(--white) !important;
  border-color: var(--sage-500) !important;
  padding: 12px 24px !important;
}
.btn_submit:hover {
  background: var(--sage-600) !important;
  border-color: var(--sage-600) !important;
}
.btn_cancel {
  background: var(--white) !important;
  color: var(--gray-700) !important;
}

/* 댓글 영역 */
#bo_vc {
  margin-top: var(--sp-10) !important;
}
#bo_vc h2 {
  font-size: var(--fs-xl) !important;
  color: var(--text-heading);
  margin-bottom: var(--sp-4);
}
#bo_vc article {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5) !important;
  margin-bottom: var(--sp-3) !important;
}
#bo_vc .cmt_contents {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* ─── 5. 글쓰기 폼 (write) ─── */
#bo_w {
  background: var(--white);
  border: 1px solid rgba(31,45,61,0.06);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-10);
}
#bo_w label {
  font-size: var(--fs-sm);
  color: var(--text-heading);
  font-weight: 500;
}
#bo_w input[type="text"],
#bo_w input[type="password"],
#bo_w textarea,
#bo_w select {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 14px !important;
  font-size: var(--fs-base) !important;
  font-family: var(--font-sans) !important;
  background: var(--white) !important;
  transition: border-color var(--t-fast);
}
#bo_w input[type="text"]:focus,
#bo_w input[type="password"]:focus,
#bo_w textarea:focus {
  outline: none;
  border-color: var(--sage-500) !important;
  box-shadow: 0 0 0 3px rgba(123,160,152,0.15);
}

/* ─── 6. 브레드크럼 (view.skin.php에서 추가됨) ─── */
.ms-breadcrumb {
  max-width: var(--container);
  margin: 0 auto var(--sp-4);
  padding: var(--sp-4) var(--sp-6) 0 !important;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.ms-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.ms-breadcrumb a:hover {
  color: var(--sage-600);
}

/* ─── 7. 모바일 ─── */
@media (max-width: 900px) {
  .ms-gnu-main {
    padding-top: calc(var(--header-h) + var(--sp-6));
    padding-bottom: var(--sp-12);
  }
  .ms-gnu-main > * {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
  #bo_v {
    padding: var(--sp-6) var(--sp-4) !important;
  }
  #bo_v_title {
    font-size: var(--fs-2xl) !important;
  }
  #bo_v_con {
    font-size: var(--fs-base) !important;
  }
}
@media (max-width: 412px) {
  .ms-gnu-main {
    padding-top: calc(var(--header-h) + var(--sp-4));
  }
  .ms-gnu-main > * {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }
  #bo_v {
    padding: var(--sp-5) var(--sp-3) !important;
    border-radius: var(--r-md) !important;
  }
}

/* ─── 8. 그누보드 기본 CSS 충돌 보호 ─── */

/* 그누보드 기본 헤더·푸터·사이드바 모두 숨김 — 우리 헤더/푸터/메뉴만 사용 */
#hd, #ft, #aside, #aside_wr,
.at_default, .at_member,
#hd_pop, #tnb,
#aside_visit, #aside_login {
  display: none !important;
}

/* 그누보드 wrapper·container 풀폭 + 투명 (우리 ms-gnu-main이 가운데 정렬 처리) */
#wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
#container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  float: none !important;
  display: block !important;
}
#container_wr {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: transparent !important;
  border: 0 !important;
}
#wrapper:after,
#container:after,
#container_wr:after {
  content: none !important;
  display: none !important;
  clear: none !important;
}

/* 로그인 알림바 (있을 때만 — 헤더 바로 아래 풀폭) */
.ms-gnu-login-bar {
  position: relative;
  background: var(--sage-50);
  border-bottom: 1px solid var(--sage-100);
  padding: 8px 0;
  font-size: var(--fs-sm);
  color: var(--sage-700);
  text-align: center;
  z-index: 90;
  margin-top: var(--header-h);
  margin-bottom: calc(-1 * var(--header-h));   /* main의 padding-top 보정 */
}
.ms-gnu-login-bar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
}
.ms-gnu-login-bar a {
  color: var(--sage-700);
  font-weight: 600;
  padding: 4px 12px;
  background: var(--white);
  border: 1px solid var(--sage-200);
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
}
.ms-gnu-login-bar a:hover {
  background: var(--sage-500);
  color: var(--white);
  border-color: var(--sage-500);
}

/* hd_login_msg 그누보드 기본 위치 무효 — 위 알림바로 대체 */
#hd_login_msg {
  position: static !important;
  float: none !important;
  width: auto !important;
  max-width: var(--container) !important;
  margin: 0 auto !important;
  background: transparent !important;
}