@charset "utf-8";

/* 게시판 목록 */
#bo_cate {
  margin: 25px 0;
}
#bo_cate h2 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#bo_cate ul {
  zoom: 1;
}
#bo_cate ul:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#bo_cate li {
  display: inline-block;
  padding: 2px;
}
#bo_cate a {
  display: block;
  line-height: 28px;
  padding: 5px 15px;
  border-radius: 30px;
  border: 1px solid #d6e9ff;
  color: #6794d3;
}
#bo_cate a:focus,
#bo_cate a:hover,
#bo_cate a:active {
  text-decoration: none;
  background: #3a8afd;
  color: #fff;
}
#bo_cate #bo_cate_on {
  z-index: 2;
  background: #3a8afd;
  color: #fff;
  font-weight: bold;
  border: 1px solid #3a8afd;
  -webkit-box-shadow: inset 0 2px 5px rgb(33, 135, 202);
  -moz-box-shadow: inset 0 2px 5px rgb(33, 135, 202);
  box-shadow: inset 0 2px 5px rgb(33, 135, 202);
}
.td_subject img {
  margin-left: 3px;
}

.selec_chk {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  outline: 0;
  z-index: -1;
  overflow: hidden;
}
.chk_box {
  position: relative;
}
.chk_box input[type="checkbox"] + label {
  position: relative;
  padding-left: 20px;
  color: #676e70;
  vertical-align: baseline;
}
.chk_box input[type="checkbox"] + label:hover {
  color: #2172f8;
}
.chk_box input[type="checkbox"] + label span {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 15px;
  height: 15px;
  display: block;
  background: #fff;
  border: 1px solid #d0d4df;
  border-radius: 3px;
}
.write_div .chk_box input[type="checkbox"] + label,
.bo_vc_w .chk_box input[type="checkbox"] + label {
  padding-left: 20px;
}
.write_div .chk_box input[type="checkbox"] + label span,
.bo_vc_w .chk_box input[type="checkbox"] + label span {
  position: absolute;
  top: 2px;
  left: 0;
  width: 15px;
  height: 15px;
  display: block;
  margin: 0;
  background: #fff;
  border: 1px solid #d0d4df;
  border-radius: 3px;
}
.chk_box input[type="checkbox"]:checked + label {
  color: #000;
}
.chk_box input[type="checkbox"]:checked + label span {
  background: url(./img/chk.png) no-repeat 50% 50% #3a8afd;
  border-color: #1471f6;
  border-radius: 3px;
}
.all_chk.chk_box input[type="checkbox"] + label span {
  top: 0;
  left: 0;
}

/* 갤러리 목록 */
#bo_gall h2 {
  margin: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

/* ─────────────────────────────────────────
   [GRID 전환] 갤러리 UL을 그리드로 전환
   - 기존 flex/float 기반 여백(-10px) 제거
   - 열 자동: auto-fill + minmax
────────────────────────────────────────── */
#bo_gall #gall_ul {
  margin: 30px 0 0; /* ← 기존 -10px 좌우 여백 제거 */
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 40px 30px;
  /* masonry 느낌이 살짝 나게 밀집 배치 (선택) */
  grid-auto-flow: row dense;
}

/* col-gn-* 퍼센트폭/float 무력화 (충돌 방지) */
.gall_row .col-gn-0,
.gall_row .col-gn-1,
.gall_row .col-gn-2,
.gall_row .col-gn-3,
.gall_row .col-gn-4,
.gall_row .col-gn-5,
.gall_row .col-gn-6,
.gall_row .col-gn-7,
.gall_row .col-gn-8,
.gall_row .col-gn-9,
.gall_row .col-gn-10 {
  width: auto !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#bo_gall #gall_ul:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#bo_gall .gall_li {
}
#bo_gall .gall_li .gall_chk {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
  z-index: 1;
}
/* ─────────────────────────────────────────
   [카드 베이스] 그림자 + 라운드 + overflow clip
   - hover 시 살짝 떠오르고 그림자 강화
────────────────────────────────────────── */
#bo_gall .gall_box {
  position: relative;
  margin: 0; /* 기존 margin-bottom은 gap으로 대체 */
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
  will-change: transform;
}

#bo_gall .gall_box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ===== 이미지 확대 효과 ===== */
/* (1) 썸네일 래퍼가 있는 경우 */
#bo_gall .gall_box .gall_thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3; /* 필요 없으면 주석처리 가능 */
}

/* (2) 래퍼가 없고 .gall_con 안에 바로 img가 있는 경우도 커버 */
#bo_gall .gall_box .gall_con img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 0.5s ease; /* 부드러운 확대 */
  transform-origin: 50% 50%;
}

/* 호버 시 이미지 확대 (둘 중 해당되는 구조에 적용) */
#bo_gall .gall_box:hover .gall_thumb img,
#bo_gall .gall_box:hover .gall_con img {
  transform: scale(1.06);
}

/* ===== 텍스트/메타의 등장 애니메이션(살짝 올라오며 나타남) ===== */
#bo_gall .gall_box .gall_con {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

#bo_gall .gall_box:hover .gall_con {
  transform: translateY(-2px);
  opacity: 1;
}

/* 제목 한 줄 말줄임 (원하면) */
#bo_gall .gall_box .gall_tit,
#bo_gall .gall_box .gall_con .title {
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 보조정보淡하게 */
#bo_gall .gall_box .gall_info {
  color: #6b7280;
  font-size: 0.8rem;
}

/* ===== 포커스 접근성: 키보드 포커스 시도 동일 효과 ===== */
#bo_gall .gall_box:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12),
    0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* ===== 모션 최소화 환경 배려 ===== */
@media (prefers-reduced-motion: reduce) {
  #bo_gall .gall_box,
  #bo_gall .gall_box .gall_con img,
  #bo_gall .gall_box .gall_con {
    transition: none !important;
  }
}

#bo_gall .gall_con {
  flex: 1 1 auto;
}

/* 모바일 최소폭 조정(선택) */
@media (max-width: 768px) {
  #bo_gall #gall_ul {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
@media (max-width: 480px) {
  #bo_gall #gall_ul {
    grid-template-columns: 1fr;
  }
}




#bo_gall .gall_now .gall_text_href a {
  color: #ff3061;
}

#bo_gall .gall_href a:link,
#bo_gall .gall_href a:focus,
#bo_gall .gall_href a:hover {
  text-decoration: none;
}

/* 공통 썸네일 박스 */
#bo_gall .gall_img {
  border-bottom: 1px solid #eee;
  text-align: center;
  overflow: hidden;
  position: relative;
  /* aspect-ratio: 4/3;  */ /* 필요시 주석 해제 */
}
#bo_gall .gall_img img,
#bo_gall .gall_img video {
  display: block;
  width: 100%;
  height: auto !important;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.5s ease;
}
#bo_gall .gall_box:hover .gall_img img,
#bo_gall .gall_box:hover .gall_img video {
  transform: scale(1.06);
}

/* 비율 고정 + 자르기(옵션) — 카드 라인 맞추고 싶을 때 */
#bo_gall .gall_img--cover {
  aspect-ratio: 16/9;
}
#bo_gall .gall_img--cover img {
  height: 100% !important;
  object-fit: cover;
}

#bo_gall .gall_img a,
#bo_gall .gall_img .no_image,
#bo_gall .gall_img .is_notice {
  display: block;
}
#bo_gall .gall_img img,
#bo_gall .gall_img video {
  max-width: 100%;
  height: auto !important;
}
#bo_gall .gall_img span {
  display: inline-block;
  background: #eaeaea;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.25em;
  color: #777;
}

#bo_gall .gall_text_href {
  margin: 10px 0;
}
#bo_gall .gall_text_href a {
  font-weight: bold;
}
#bo_gall .gall_text_href img {
  margin: 0 0 0 4px;
}
#bo_gall .bo_tit {
  display: block;
  line-height: 30px;
  font-weight: bold;
  color: #000;
  font-size: 1.2em;
  text-align: center;
}
#bo_gall .bo_tit .cnt_cmt {
  background: #e9eff5;
  color: #3a8afd;
  font-size: 11px;
  height: 16px;
  line-height: 16px;
  padding: 0 5px;
  border-radius: 3px;
  vertical-align: middle;
}

#bo_gall .bo_cnt {
  color: #acacac;
  line-height: 18px;
}
#bo_gall .profile_img img {
  border-radius: 50%;
}
#bo_gall .bo_tit .fa-download {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background: #e89f31;
  color: #fff;
  text-align: center;
  font-size: 10px;
  border-radius: 2px;
  margin-right: 2px;
  vertical-align: middle;
}
#bo_gall .bo_tit .fa-link {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background: #ad68d8;
  color: #fff;
  text-align: center;
  font-size: 10px;
  border-radius: 2px;
  margin-right: 2px;
  vertical-align: middle;
  font-weight: normal;
}
#bo_gall .bo_tit .fa-link {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background: #ad68d8;
  color: #fff;
  text-align: center;
  font-size: 10px;
  border-radius: 2px;
  margin-right: 2px;
  vertical-align: middle;
  margin-right: 2px;
}
#bo_gall .bo_tit .new_icon {
  display: inline-block;
  width: 16px;
  line-height: 16px;
  font-size: 0.825em;
  color: #23db79;
  background: #b9ffda;
  text-align: center;
  border-radius: 2px;
  margin-left: 2px;
  font-weight: bold;
  vertical-align: baseline;
}
#bo_gall .bo_tit .hot_icon {
  display: inline-block;
  width: 16px;
  line-height: 16px;
  font-size: 0.833em;
  color: #fff;
  background: #e52955;
  text-align: center;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 2px;
}
#bo_gall .bo_tit .fa-lock {
  display: inline-block;
  line-height: 16px;
  color: #999;
  text-align: center;
  vertical-align: middle;
}

#bo_gall .gall_info {
  line-height: 1.5em;
  line-height: 20px;
  text-align: center;
}
#bo_gall .gall_info strong {
  display: inline-block;
  margin: 0;
}
#bo_gall .gall_info i {
  font-size: 12px;
}
#bo_gall .gall_info .gall_date,
#bo_gall .gall_info .gall_view {
  display: inline-block;
  margin-left: 10px;
  color: #777;
}

#bo_gall .gall_option {
  position: absolute;
  top: 10px;
  right: 10px;
}
#bo_gall .gall_option strong {
  background: #fff;
  padding: 5px 10px;
  border-radius: 30px;
  -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
}

/* 게시판 목록 공통 */
.bo_fx:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
.bo_fx ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#bo_list_total {
  float: left;
  line-height: 34px;
  font-size: 0.92em;
  color: #4e546f;
}

.btn_bo_user {
  float: right;
  margin: 0;
  padding: 0;
  list-style: none;
}
.btn_bo_user li {
  float: left;
  width: 40px;
  text-align: center;
  margin-left: 5px;
  background: #fff;
}
.btn_bo_user > li {
  position: relative;
}
.btn_bo_adm {
  float: left;
}
.btn_bo_adm li {
  float: left;
  margin-right: 5px;
}
.btn_bo_adm input {
  padding: 0 8px;
  border: 0;
  background: #d4d4d4;
  color: #666;
  text-decoration: none;
  vertical-align: middle;
}
.bo_notice td {
  background: #fff6fa !important;
  border-bottom: 1px solid #f8e6ee;
}
.bo_notice td a {
  font-weight: bold;
}
.bo_notice .notice_icon {
  display: inline-block;
  line-height: 25px;
  border-radius: 5px;
  font-weight: bold;
  color: #f9267f;
}

.more_opt {
  display: none;
  position: absolute;
  top: 45px;
  right: 0;
  background: #fff;
  border: 1px solid #b8bfc4;
  z-index: 999;
}
.more_opt:before {
  content: "";
  position: absolute;
  top: -8px;
  right: 13px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 8px 6px;
  border-color: transparent transparent #b8bfc4 transparent;
}
.more_opt:after {
  content: "";
  position: absolute;
  top: -6px;
  right: 13px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 8px 6px;
  border-color: transparent transparent #fff transparent;
}
.more_opt li {
  border-bottom: 1px solid #f1f1f1;
  padding: 10px;
  float: inherit;
  width: 90px;
  margin: 0;
  color: #6b757c;
  text-align: left;
}
.more_opt li:last-child {
  border-bottom: 0;
}
.more_opt li button,
.more_opt li a {
  width: 100%;
  border: 0;
  background: #fff;
  color: #6b757c;
}
.more_opt li:hover a,
.more_opt li:hover button {
  color: #000;
}
.more_opt li i {
  float: right;
  line-height: 20px;
}

.td_num strong {
  color: #000;
}
.bo_cate_link {
  display: inline-block;
  background: #e2eaf6;
  color: #3a8afd;
  font-weight: normal !important;
  height: 20px;
  line-height: 10px;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 0.95em;
} /* 글제목줄 분류스타일 */
.bo_cate_link:hover {
  text-decoration: none;
}
#bo_list .bo_tit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#bo_list .bo_tit_link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bo_list .bo_icons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
}

.bo_current {
  color: #e8180c;
}
#bo_list .profile_img {
  display: inline-block;
  margin-right: 5px;
}
#bo_list .profile_img img {
  border-radius: 50%;
}
#bo_list .bo_icons {
  display: inline-flex;
  gap: 4px;
  margin-left: 5px;
  vertical-align: middle;
}

#bo_list .bo_icons i {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  border-radius: 3px;
  background: #f5f5f5;
  color: #666;
  transition: all 0.2s ease-in-out;
}

/* 각각의 상태별 강조 색상 */
#bo_list .bo_icons .text-new {
  background: #dbfbe4;
  color: #23b36b;
}

#bo_list .bo_icons .text-hot {
  background: #ffe2e2;
  color: #f14444;
}

#bo_list .bo_icons .text-file {
  background: #fff5cc;
  color: #b78d00;
}

#bo_list .bo_icons .text-link {
  background: #e5edff;
  color: #446fe0;
}

/* 마우스 오버 효과 (선택사항) */
#bo_list .bo_icons i:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* 1) 팝업 래퍼: 화면 전체 fixed → 일반 흐름으로 */
.bo_sch_wrap {
  display: block; /* 항상 표시 */
  position: static; /* fixed 제거 */
  width: auto;
  height: auto;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  background: transparent; /* 배경 제거 */
}

/* 2) 검색 폼 컨테이너: 중앙 팝업 → 상단 카드형 */
.bo_sch {
  position: static; /* absolute + 50% 중앙 정렬 제거 */
  top: auto;
  left: auto;
  transform: none;
  background: #fff;
  box-shadow: none;
  width: 100%;
  max-width: var(--layout-width, 1100px);
  margin: 50px auto; /* 상/하 여백 */

  font-family: var(--font-main), sans-serif;
  display: flex;
  gap: 5px;
  justify-content: center;
}

/* 3) 어두운 오버레이는 불필요 → 제거 */
.bo_sch_bg {
  display: none;
  background: transparent;
  width: 0;
  height: 0;
}

/* 4) 폼 내부 레이아웃 정리(가로 정렬), 닫기 버튼 숨김 */
.bo_sch h3 {
  /* 보이게 쓰고 싶으면 이 블록 삭제 */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  font-family: inherit;
}
.bo_sch legend {
  /* 시각적으로 숨김(접근성 유지) */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.bo_sch .bo_sch_cls {
  display: none;
} /* 닫기(X) 버튼 숨김 */

.bo_sch form {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  max-width: 600px;
  font-size: 1em;
}

.bo_sch select {
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
}

.bo_sch .sch_bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  border: 0;
  box-shadow: none;
  width: 100%;
  font-family: inherit;
}

.bo_sch .sch_input {
  flex: 1 1 auto;
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0 12px;
  background: #fff;
  font-family: inherit;
}

.bo_sch .sch_btn {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--btn-bd);
  border-radius: 6px;
  background: var(--color-main);
  color: #fff;
  line-height: 40px;
}

/* 5) 반응형: 모바일에서는 세로 스택 */
@media (max-width: 768px) {
  .bo_sch {
    margin: 12px auto;
    border-radius: 6px;
  }
  .bo_sch form {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 20px 0;
  }
  .bo_sch .sch_bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .bo_sch .sch_input {
    width: 100%;
  }
  .bo_sch select {
    height: 38px;
  }
  .bo_sch .sch_btn {
    height: 38px;
    line-height: 38px;
  }
}

/* 게시판 쓰기 */
#char_count_desc {
  display: block;
  margin: 0 0 5px;
  padding: 0;
}
#char_count_wrap {
  margin: 5px 0 0;
  text-align: right;
}
#char_count {
  font-weight: bold;
}

#autosave_wrapper {
  position: relative;
}
#autosave_pop {
  display: none;
  z-index: 10;
  position: absolute !important;
  top: 34px;
  right: 0;
  width: 350px;
  height: auto !important;
  height: 180px;
  max-height: 180px;
  border: 1px solid #565656;
  background: #fff;
  -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
}
#autosave_pop:before {
  content: "";
  position: absolute;
  top: -8px;
  right: 45px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 8px 6px;
  border-color: transparent transparent #000 transparent;
}
#autosave_pop:after {
  content: "";
  position: absolute;
  top: -7px;
  right: 45px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 8px 6px;
  border-color: transparent transparent #fff transparent;
}
html.no-overflowscrolling #autosave_pop {
  height: auto;
  max-height: 10000px !important;
} /* overflow 미지원 기기 대응 */
#autosave_pop strong {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#autosave_pop div {
  text-align: center;
  margin: 0 !important;
}
#autosave_pop button {
  margin: 0;
  padding: 0;
  border: 0;
}
#autosave_pop ul {
  padding: 15px;
  border-top: 1px solid #e9e9e9;
  list-style: none;
  overflow-y: scroll;
  height: 130px;
  border-bottom: 1px solid #e8e8e8;
}
#autosave_pop li {
  padding: 8px 5px;
  border-bottom: 1px solid #fff;
  background: #eee;
  zoom: 1;
}
#autosave_pop li:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#autosave_pop a {
  display: block;
  float: left;
}
#autosave_pop span {
  display: block;
  float: right;
  font-size: 0.92em;
  font-style: italic;
  color: #999;
}
.autosave_close {
  cursor: pointer;
  width: 100%;
  height: 30px;
  background: none;
  color: #888;
  font-weight: bold;
  font-size: 0.92em;
}
.autosave_close:hover {
  background: #f3f3f3;
  color: #3597d9;
}
.autosave_content {
  display: none;
}
.autosave_del {
  background: url(./img/close_btn.png) no-repeat 50% 50%;
  text-indent: -999px;
  overflow: hidden;
  height: 20px;
  width: 20px;
}

/* 게시판 읽기 */
#bo_v {
  margin-bottom: 20px;
  background: #fff;
  box-sizing: border-box;
}

#bo_v_table {
  position: absolute;
  top: 0;
  right: 16px;
  margin: 0;
  padding: 0 5px;
  height: 25px;
  background: #ff3061;
  color: #fff;
  font-weight: bold;
  line-height: 2.2em;
}

#bo_v_title {
    
      padding: 14px 20px;
    border: 1px solid var(--view-bd, #e5e7eb);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
    margin-top: 30px;
}
#bo_v_title .bo_v_cate {
  background: #e2eaf6;
  color: #3a8afd;
  padding: 0 10px;
  border-radius: 10px;
}
#bo_v_title .bo_v_tit {
  display: block;
  font-size: 1.2em;
  word-break: keep-all;
  font-family: var(--font-main);
  text-align: center;
}

#bo_v_info {
  margin-top: 14px;
  color: #666;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 14px 20px;
  border: 1px solid var(--view-bd, #e5e7eb);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
}
#bo_v_info h2 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

#bo_v_info .profile_info {
  display: flex;
    color: #666;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px;
}
#bo_v_info .profile_info .pf_img {

  margin-right: 10px;
}
#bo_v_info .profile_info .pf_img img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
#bo_v_info .profile_info .profile_info_ct {
  padding: 5px 0;
  flex: 1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 1.1em;
  align-items: center;
}
#bo_v_info .profile_info .profile_info_ct .pf_meta {
display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#bo_v_info strong {
  display: inline-block;
  font-weight: normal;
}
#bo_v_info .sv_member,
#bo_v_info .sv_guest,
#bo_v_info .member,
#bo_v_info .guest {
  font-weight: bold;
}
#bo_v_info .profile_img {
  display: none;
}
#bo_v_info .sv_member {
  color: #000;
}
#bo_v_info .if_date {
  margin: 0;
  color: #888;
}

#bo_v_file h2 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#bo_v_file li {
  padding: 15px;
  position: relative;
  margin: 10px 0;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 5px 0px hsl(232, 36%, 96%);
  -moz-box-shadow: 1px 1px 5px 0px hsl(232, 36%, 96%);
  box-shadow: 1px 1px 5px 0px hsl(232, 36%, 96%);
}
#bo_v_file li i {
  float: left;
  color: #b2b2b2;
  font-size: 2.35em;
  margin-right: 20px;
}
#bo_v_file a {
  float: left;
  display: block;
  text-decoration: none;
  word-wrap: break-word;
  color: #000;
}
#bo_v_file a:focus,
#bo_v_file li:hover a,
#bo_v_file a:active {
  text-decoration: underline;
  color: #3a8afd;
}
#bo_v_file img {
  float: left;
  margin: 0 10px 0 0;
}
#bo_v_file .bo_v_file_cnt {
  color: #b2b2b2;
  font-size: 0.92em;
}
#bo_v_file li:hover {
  border-color: #bed4f4;
  color: #bed4f4;
}
#bo_v_file li:hover i {
  color: #3a8afd;
}
#bo_v_file li:hover .bo_v_file_cnt {
  color: #99c2fc;
}

#bo_v_link h2 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#bo_v_file ul {
  margin: 0;
  list-style: none;
}
#bo_v_link li {
  padding: 15px;
  position: relative;
  margin: 10px 0;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 5px 0px hsl(232, 36%, 96%);
  -moz-box-shadow: 1px 1px 5px 0px hsl(232, 36%, 96%);
  box-shadow: 1px 1px 5px 0px hsl(232, 36%, 96%);
}
#bo_v_link li i {
  float: left;
  color: #b2b2b2;
  font-size: 2.35em;
  margin-right: 20px;
}
#bo_v_link a {
  float: left;
  display: block;
  text-decoration: none;
  word-wrap: break-word;
  color: #000;
}
#bo_v_link a:focus,
#bo_v_link li:hover a,
#bo_v_link a:active {
  text-decoration: underline;
  color: #3a8afd;
}
#bo_v_link .bo_v_link_cnt {
  color: #b2b2b2;
  font-size: 0.92em;
}
#bo_v_link li:hover {
  border-color: #bed4f4;
  color: #bed4f4;
}
#bo_v_link li:hover i {
  color: #3a8afd;
}
#bo_v_link li:hover .bo_v_link_cnt {
  color: #99c2fc;
}

#bo_v_top {
  zoom: 1;
  flex: 1 0 auto;
}
#bo_v_top:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#bo_v_top h2 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#bo_v_top ul {
  padding: 0;
  list-style: none;
  word-break: break-all;
}

#bo_v_bot {
  zoom: 1;
}
#bo_v_bot:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#bo_v_bot h2 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#bo_v_bot ul {
  padding: 0;
  list-style: none;
}

.bo_v_com > li {
  position: relative;
  float: left;
  margin-left: 5px;
}

.bo_v_nb {
  position: relative;
  margin: 20px 0;
  position: relative;
  clear: both;
  text-align: left;
  font-size: 1.2em;
}
.bo_v_nb:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
.bo_v_nb li {
  border-top: 1px solid #f1f1f1;
  padding: 13px;
}
.bo_v_nb li:last-child {
  border-bottom: 1px solid #f1f1f1;
}
.bo_v_nb li:hover {
  background: #f6f6f6;
}
.bo_v_nb li i {
  font-size: 13px;
  color: #b3b3b3;
}
.bo_v_nb li .nb_tit {
  display: inline-block;
  padding-right: 20px;
  color: #b3b3b3;
}
.bo_v_nb li .nb_date {
  float: right;
  color: #b3b3b3;
}

#bo_v_atc {
  min-height: 200px;
  height: auto !important;
  height: 200px;
}
#bo_v_atc_title {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

#bo_v_img {
  width: 100%;
  overflow: hidden;
  zoom: 1;
}
#bo_v_img:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#bo_v_img a.view_image {
  display: block;
}
#bo_v_img img {
  margin-bottom: 20px;
  max-width: 100%;
  height: auto;
}

#bo_v_con {
  margin: 10px 0 30px;
  width: 100%;
  line-height: 1.7em;
  min-height: 200px;
  word-break: break-all;
  overflow: hidden;
}
#bo_v_con a {
  color: #000;
  text-decoration: underline;
}
#bo_v_con img {
  max-width: 100%;
  height: auto;
}

#bo_v_act {
  margin-bottom: 30px;
  text-align: center;
}
#bo_v_act .bo_v_act_gng {
  position: relative;
}
#bo_v_act a {
  margin-right: 5px;
  vertical-align: middle;
  color: #4a5158;
}
#bo_v_act a:hover {
  background-color: #fff;
  color: #ff484f;
  border-color: #ff484f;
}
#bo_v_act i {
  font-size: 1.4em;
  margin-right: 5px;
}
#bo_v_act_good,
#bo_v_act_nogood {
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
  z-index: 9999;
  padding: 10px 0;
  width: 165px;
  background: #ff3061;
  color: #fff;
  text-align: center;
}
#bo_v_act .bo_v_good {
  display: inline-block;
  border: 1px solid #dedede;
  width: 70px;
  line-height: 46px;
  border-radius: 30px;
}
#bo_v_act .bo_v_nogood {
  display: inline-block;
  border: 1px solid #dedede;
  width: 70px;
  line-height: 46px;
  border-radius: 30px;
}

#bo_v_sns {
  padding: 0;
  list-style: none;
  zoom: 1;
  float: left;
  display: inline-block;
}
#bo_v_sns:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#bo_v_sns li {
  float: left;
  width: 135px;
  margin-right: 5px;
  text-align: left;
}
#bo_v_sns li a {
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  font-size: 0.95em;
}
#bo_v_sns li img {
  vertical-align: middle;
  margin-right: 5px;
}
#bo_v_sns li .sns_f {
  display: block;
  background: #3b5997;
}
#bo_v_sns li .sns_t {
  display: block;
  background: #09aeee;
}
#bo_v_sns li .sns_g {
  display: block;
  background: #ea4026;
}
#bo_v_sns li .sns_k {
  display: block;
  background: #fbe300;
}

#bo_v_share {
  position: relative;
  padding: 20px 0;
}
#bo_v_share:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#bo_v_share .btn {
  padding: 0 10px;
  color: #555;
  font-weight: normal;
  font-size: 1em;
  width: 80px;
  line-height: 35px;
  height: 35px;
  border-color: #d5d5d5;
  border-radius: 5px;
}
#bo_v_share .btn:hover {
  background: #fff;
}
#bo_v_share .btn i {
  margin-right: 5px;
  color: #4b5259;
  vertical-align: middle;
}

/* 게시판 댓글 */
.cmt_btn {
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  font-weight: bold;
  margin: 30px 0 0px;
  padding: 0 0 15px;
  font-family: var(--font-main);
}
.cmt_btn span.total {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  font-size: 1em;
  color: #3a8afd;
}
.cmt_btn span.cmt_more {
  float: right;
  display: inline-block;
  width: 15px;
  height: 10px;
  background: url(./img/btn_cmt.png) no-repeat right 2px;
  margin-top: 5px;
}
.cmt_btn_op span.cmt_more {
  background-position: right -8px;
}
.cmt_btn b {
  font-size: 1.2em;
  color: #000;
}
.cmt_btn span.total:after {
  position: absolute;
  bottom: -17px;
  left: 0;
  display: inline-block;
  background: #3a8afd;
  content: "";
  width: 100%;
  height: 2px;
}
#bo_vc {
}
#bo_vc h2 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#bo_vc article {
  margin: 20px 0;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}
#bo_vc article:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#bo_vc article .profile_img img {
  border-radius: 50%;
}
#bo_vc article .pf_img {
  float: left;
  margin-right: 10px;
}
#bo_vc article .pf_img img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
#bo_vc article .cm_wrap {
  float: left;
  max-width: 870px;
  width: 90%;
}
#bo_vc header {
  position: relative;
  width: 100%;
}
#bo_vc header:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#bo_vc header .profile_img {
  display: none;
}
#bo_vc header .icon_reply {
  position: absolute;
  top: 15px;
  left: -20px;
}
#bo_vc .member,
#bo_vc .guest,
#bo_vc .sv_member,
#bo_vc .sv_guest {
  font-weight: bold;
}
.bo_vc_hdinfo {
  color: #777;
}
#bo_vc h1 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
#bo_vc .cmt_contents {
  line-height: 1.8em;
  padding: 0 0 20px;
}
#bo_vc p a {
  text-decoration: underline;
}
#bo_vc p a.s_cmt {
  text-decoration: underline;
  color: #ed6479;
}
#bo_vc_empty {
  margin: 0;
  padding: 80px 0 !important;
  color: #777;
  text-align: center;
}
#bo_vc #bo_vc_winfo {
  float: left;
}
#bo_vc .bo_vl_opt {
  position: absolute;
  top: 0;
  right: 0;
}

.bo_vc_act {
  display: none;
  position: absolute;
  right: 0;
  top: 40px;
  width: 58px;
  text-align: right;
  border: 1px solid #b8bfc4;
  margin: 0;
  list-style: none;
  background: #fff;
  zoom: 1;
  z-index: 9999;
}
.bo_vc_act:before {
  content: "";
  position: absolute;
  top: -8px;
  right: 5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 8px 6px;
  border-color: transparent transparent #b8bfc4 transparent;
}
.bo_vc_act:after {
  content: "";
  position: absolute;
  top: -6px;
  right: 5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 8px 6px;
  border-color: transparent transparent #fff transparent;
}
.bo_vc_act li {
  border-bottom: 1px solid #f0f0f0;
}
.bo_vc_act li:last-child {
  border-bottom: 0;
}
.bo_vc_act li a {
  display: inline-block;
  padding: 10px 15px;
}
.bo_vc_act li a:hover {
  color: #3a8afd;
}

.bo_vc_w {
  position: relative;
  margin: 10px 0;
  display: block;
}
.bo_vc_w:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
.bo_vc_w h2 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.bo_vc_w #char_cnt {
  display: block;
  margin: 0 0 5px;
}
.bo_vc_w textarea {
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
  vertical-align: middle;
  border-radius: 3px;
  padding: 5px;
  width: 100%;
  height: 120px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
#wr_secret {
}
.bo_vc_w_info {
  margin: 10px 0;
  float: left;
}
.bo_vc_w_info:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
.bo_vc_w_info .frm_input {
  float: left;
  margin-right: 5px;
}
.bo_vc_w_info #captcha {
  padding-top: 10px;
  display: block;
  clear: both;
}
.bo_vc_w .btn_confirm {
  clear: both;
  margin-top: 10px;
}
.bo_vc_w .btn_confirm label {
  display: inline-block;
  margin-right: 10px;
  border-radius: 3px;
  font-size: 1.5em;
  text-align: center;
}
.bo_vc_w .btn_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--btn-h, 38px);
    line-height: var(--btn-h, 38px);
    padding: 0 14px;
    border-radius: var(--btn-r, 9999px);
    border: 1px solid var(--btn-bd, #d0d6df);
    font-weight: 700;
    font-size: 14px;
    box-shadow: var(--btn-shadow, 0 1px 2px rgba(0, 0, 0, .08));
    text-decoration: none;
    cursor: pointer;
    transition: .15s;
}
.bo_vc_w .btn_confirm .secret_cm label {
  font-size: 1em !important;
}
.bo_vc_w_wr:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
.secret_cm {
  display: inline-block;
  float: left;
}

#bo_vc_send_sns {
  display: inline-block;
  float: left;
}
#bo_vc_sns {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  zoom: 1;
}
#bo_vc_sns:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#bo_vc_sns li {
  float: left;
  margin: 0 5px 0 0;
}
#bo_vc_sns .sns_li_f {
  border-radius: 3px;
  background: #3a589b;
  height: 40px;
  line-height: 40px;
  padding: 0 0 0 10px;
}
#bo_vc_sns .sns_li_t {
  border-radius: 3px;
  background: #00aced;
  height: 40px;
  line-height: 40px;
  padding: 0 0 0 10px;
}
#bo_vc_sns .sns_li_off {
  background: #bbb;
}
#bo_vc_sns a {
  display: inline-block;
  padding: 0 15px 0 5px;
}
#bo_vc_sns input {
  margin: 0 5px 0 0;
}

/*글쓰기*/
#bo_w .bo_v_option li {
  display: inline-block;
  float: left;
  text-align: left;
  margin: 0 5px 0 0;
}
#bo_w .bo_v_option li label {
  vertical-align: baseline;
}
#bo_w .bo_v_option .chk_box input[type="checkbox"] + label span {
  margin-left: 0;
  margin-right: 5px;
}
#bo_w .write_div {
  margin: 10px 0;
  position: relative;
}
#bo_w .write_div:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#bo_w .bo_w_info:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
#bo_w .bo_w_info .frm_input {
  float: left;
  margin-bottom: 1%;
}
#bo_w #wr_password,
#bo_w #wr_homepage {
  margin-left: 1%;
}
#bo_w .wr_content.smarteditor2 iframe {
  background: #fff;
}
#bo_w .bo_w_tit {
  position: relative;
}
#bo_w .bo_w_tit .frm_input {
}
#bo_w .bo_w_tit #btn_autosave {
  position: absolute;
  top: 5px;
  right: 5px;
  line-height: 30px;
  height: 30px;
}
#bo_w .bo_w_link label {
  position: absolute;
  top: 1px;
  left: 1px;
  border-radius: 3px 0 0 3px;
  height: 38px;
  line-height: 38px;
  width: 40px;
  font-size: 1.2em;
  text-align: center;
  color: #b2b2b2;
}
#bo_w .bo_w_link .frm_input {
  padding-left: 50px;
}
#bo_w .bo_w_flie .lb_icon {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 3px 0 0 3px;
  height: 38px;
  line-height: 38px;
  width: 40px;
  font-size: 1.2em;
  text-align: center;
  color: #b2b2b2;
}
#bo_w .bo_w_flie .frm_file {
  padding-left: 50px;
}
#bo_w .bo_w_flie .file_wr {
  position: relative;
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
  vertical-align: middle;
  border-radius: 3px;
  padding: 5px;
  height: 40px;
  margin: 0;
}
#bo_w .bo_w_flie .frm_input {
  margin: 10px 0 0;
}
#bo_w .bo_w_flie .file_del {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.92em;
  color: #7d7d7d;
}
#bo_w .bo_w_select select {
  border: 1px solid #d0d3db;
  width: 100%;
  height: 40px;
  border-radius: 3px;
}
#bo_w .btn_submit {
  padding: 0 20px;
  font-size: 1.167em;
}
#bo_w .btn_cancel {
  border-radius: 3px;
  font-size: 1.167em;
}

/* 컨테이너 폭을 그대로 따르되, 펼친 책(양면) 비율에 맞춤 */
.ebook-embed {
  width: 100%;
  aspect-ratio: 1.414 / 1; /* √2 : 1  → 높이/너비 ≈ 70.71% */
  overflow: hidden;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* iframe 꽉 채우기 */
.ebook-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 모바일은 단면(세로) 비율로 전환 */
@media (max-width: 768px) {
  .ebook-embed {
    aspect-ratio: 1 / 1.414; /* 1 : √2 → 높이/너비 ≈ 141.4% */
    border-radius: 0; /* 모바일에서는 둥근 모서리 제거(선택) */
  }
}

/* ============================
   본문(#bo_v_con) 카드화 & 타이포
============================ */
#bo_v_con {

  margin: 14px 0 20px;
  font-size: 15px;
  line-height: 1.8;
      padding: 14px 20px;
    border: 1px solid var(--view-bd, #e5e7eb);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
}
#bo_v_con p {
  margin: 0 0 12px;
}
#bo_v_con a {
  color: var(--color-main, #3a8afd);
  text-decoration: underline;
}
#bo_v_con img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 첨부/링크 카드 간격 미세 조정(있으면) */
#bo_v_file li,
#bo_v_link li {
  border-radius: 12px;
}

/* =========================================================
   LIST 상단 버튼줄 — view(.bo_v_com)와 동일한 룩&필
   대상: .btn_bo_user a.btn_b01 / a.btn_b02 / a.btn_admin
   + 아이콘 숨기고 글자(= .sound_only)를 표시
========================================================= */


/* 0) 컨테이너: 가로 나열 / 우측 정렬 */
.btn_bo_user {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: var(--font-main, sans-serif); /* 부모 폰트 상속 */
  float: none; /* 기존 float 해제 */
  gap: 0.5rem;
}
.flex_column {
  display: flex;
  flex-direction: column;
}
.flex {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.btn_bo_user div {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 0.5rem;
}
.btn_bo_user div > li {
  float: none; /* 기존 float 해제 */
  width: auto; /* 아이콘폭(40px) 제거 */
  margin: 0;
  padding: 0;
  background: transparent; /* 배경 제거 */
  position: relative;
}
.btn_bo_user li {
  float: none; /* 기존 float 해제 */
  width: auto; /* 아이콘폭(40px) 제거 */
  margin: 0;
  padding: 0;
  background: transparent; /* 배경 제거 */
  position: relative;
}




/* 원래 시각장애인용 텍스트(.sound_only)를 시각화 */
.btn_bo_user .sound_only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border: 0 !important;
}

/* 3) '더보기(옵션)' 버튼도 텍스트 버튼처럼 보이게 */
.btn_bo_user .btn_more_opt {
  /* 이미 .btn_b01 클래스가 붙어 있어도 OK, 없으면 아래 스타일 부여 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h, 38px);
  line-height: var(--btn-h, 38px);
  padding: 0 var(--btn-px, 14px);
  border-radius: var(--btn-r, 10px);
  border: 1px solid var(--btn-bd, #d0d3db);
  background: var(--btn-bg, #fff);
  color: var(--btn-fg, #374151);
  font-weight: 600;
  font-size: 14px;
}

/* 4) 옵션 드롭다운 위치/레이어 개선 */
.btn_bo_user .more_opt {
  right: 0;
  top: calc(100% + 8px);
  display: none; /* 토글은 기존 JS 사용 */
  min-width: 160px;
}
.btn_bo_user .more_opt li {
  width: 100%;
}
.btn_bo_user .more_opt li button,
.btn_bo_user .more_opt li a {
  text-align: left;
  padding: 10px 12px;
  font-size: 13.5px;
}

#bo_btn_top {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px) {
  #bo_btn_top {
    gap: 20px;
    flex-direction: column;
  }
  #bo_v_info {
    flex-direction: column;
    gap: 20px;
  }
  .bo_v_nb {
  font-size: 1em;
}
}


/* ============ 버튼 아이콘화 ============ */




/* 라벨 텍스트 */
.btn__label{ display:inline; }

/* 반응형: 좁은 화면에서는 아이콘만 보이게 */
@media (max-width: 640px){
  #bo_v_title .bo_v_tit {
  font-size: 1em;
}
}

/* 툴팁 느낌을 주고 싶다면 title 속성 사용(별도 JS 불필요) */
/* =========================================
   프로그램 카드(목록) 확장 스타일
   - 구조: .gall_box 안에 .prog_head + .gall_img + .gall_con
========================================= */

/* 상단 제목/분류 영역 - 가운데 정렬 */
#bo_gall .prog_head {
  padding: 10px 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* 가운데 정렬 */
  gap: 6px;
  background: transparent; /* 헤더 전체에 색 안 깔리게 */
}

/* 분류 뱃지: 가운데 알약 모양 */
#bo_gall .prog_cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  margin: 0 auto 4px;    /* 가운데 정렬 */
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: #e2eaf6;
  color: #3a8afd;
}

/* 제목: 가운데 정렬 */
#bo_gall .prog_title {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 15px;
}

#bo_gall .prog_title a {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  text-decoration: none;
  line-height: 1.4;
  text-align: center;     /* 혹시 몰라 한 번 더 */
}

#bo_gall .prog_title a:hover {
  color: var(--color-main, #3a8afd);
}



/* 하단 메타 정보 (지구/교당, 주기/요일, 시간, 장소) */
#bo_gall .prog_meta {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: #4b5563;
}

#bo_gall .prog_meta-row {
  display: flex;
  gap: 6px;
  margin-top: 2px;
  font-size: 15px;
}

#bo_gall .prog_meta-row:first-child {
  margin-top: 0;
}

#bo_gall .prog_meta-row dt {
  flex: 0 0 70px;
  font-weight: 600;
  color: #6b7280;
}

#bo_gall .prog_meta-row dd {
  margin: 0;
  flex: 1 1 auto;
}

/* 모바일에서 라벨 폭 조금 줄이기 */
@media (max-width: 640px) {
  #bo_gall .prog_meta-row dt {
    flex-basis: 100px;
  }
}


/* 전체선택 체크 영역 */
#bo_gall .gall_allchk {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 10px 0;
    padding-right: 4px;
    font-size: 14px;
    color: #4b5563;
}

#bo_gall .gall_allchk label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

#bo_gall .gall_allchk input[type=checkbox] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}


.day-buttons{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.day-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px;
  border:1px solid #ddd; border-radius:10px;
  cursor:pointer; user-select:none;
  background:#fff;
  flex: 1 0 auto;
}
.day-btn.is-on{
  border-color:var(--color-main);
  background:var(--color-sub-2);
  font-weight:700;
}
.day-btn span{ line-height:1; }
/* PC: (라벨+필드) 2세트가 한 줄에 오도록 4열 */
.bo_w_meta{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 5fr) minmax(0, 1fr) minmax(0, 5fr);
  gap: 12px;
  margin: 12px 0;
  align-items: center;
}

/* 라벨은 그리드 안에서 정렬 */
.bo_w_meta > label{
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
}

/* 입력 요소들이 grid cell 꽉 차게 */
.bo_w_meta .frm_input,
.bo_w_meta .time-field{
  width: 100%;
}

/* 모바일: (라벨+필드) 1세트만 한 줄에 오도록 2열 */
@media (max-width: 768px){
  .bo_w_meta{
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }
}

.time-input{
  font-size: 14px;
  padding: 8px 10px;
}

/* PC에서 스핀 버튼(▲▼) 숨기고 싶다면 */
@media (hover: hover){
  .time-input::-webkit-calendar-picker-indicator{
    opacity: 0.6;
  }
}

/* 프로그램 정보 카드 */
.program_info{
  margin-top:14px;
  padding:14px 20px;
  border:1px solid var(--view-bd,#e5e7eb);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
}

/* 3*2 그리드 */
.program_info .bo_v_option{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.program_info .bo_v_option > li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;

  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f9fafb;
  min-width:0;
}

.program_info strong{
  color:#6b7280;
  font-weight:700;
  white-space:nowrap;
}

.program_info span{
  color:#111827;
  font-weight:600;
  text-align:right;
  overflow-wrap:anywhere;
  min-width:0;
}

/* 모바일: 1*6 */
@media (max-width:640px){
  .program_info{ padding:12px 14px; border-radius:12px; }
  .program_info .bo_v_option{ grid-template-columns:1fr; }
  .program_info span{ text-align:left; }
}


/* 세로로 그룹(위/아래) 쌓기 */
.btn_bo_user.flex_column{
  display:flex;
  flex-direction:column;
  gap: 1em; /* 위/아래 그룹 간격 */
}

/* 각 그룹 안의 버튼은 가로 정렬 */
.btn_bo_user .btn_row{
  display:flex;
  justify-content:flex-end;
  gap: .5rem;
  margin:0;
  padding:0;
  list-style:none;
}

/* 그룹 li 기본값 정리 */
.btn_bo_user .btn_group{
  margin:0;
  padding:0;
  list-style:none;
}

/* 버튼 li 정리 (기존 float 무력화) */
.btn_bo_user .btn_row > li{
  float:none;
  width:auto;
  margin:0;
  padding:0;
  background:transparent;
}

/* 교당 카드 헤더(썸네일 + 타이틀) */
.temple_head{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

.temple_thumb{
  width:64px;
  height:64px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--view-bd,#e5e7eb);
  background:#f3f4f6;
  flex:0 0 auto;
}
.temple_thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.temple_head_txt{ min-width:0; }
.temple_title{ font-size:16px; font-weight:800; color:#111827; }
.temple_sub{ margin-top:2px; font-size:13px; color:#6b7280; }

/* 주소/연락처: 1/2 + 1/2 */
.temple_meta{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.temple_meta > li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f9fafb;
  min-width:0;
}

.temple_meta strong{
  font-size:12px;
  color:#6b7280;
  font-weight:700;
  white-space:nowrap;
}
.temple_meta span{
  font-size:14px;
  color:#111827;
  font-weight:600;
  text-align:right;
  overflow-wrap:anywhere;
  min-width:0;
}

/* 액션 버튼: 1/4씩 */
.temple_actions{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}

.temple_actions .btn{
  width:100%;
  justify-content:center; /* 버튼 내부 가운데 정렬(네 btn 스타일에 따라 필요) */
}

.temple_actions .is-disabled{
  opacity:.45;
  pointer-events:none;
}

/* 모바일 */
@media (max-width: 640px){
  .temple_meta{ grid-template-columns:1fr; }        /* 1*2 -> 1*2(세로) */
  .temple_meta span{ text-align:left; }

  .temple_actions{ grid-template-columns:repeat(2, minmax(0,1fr)); } /* 1/4 대신 2열 */
}

/* 필터바 기본 */
.list-filterbar{
  display: flex;
  flex-wrap: wrap;           /* ✅ 줄바꿈 허용 */
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* 기본: 셀렉트/버튼 크기 */
.list-filterbar .frm_input,
.list-filterbar .btn_frmline{
  height: 40px;
  border-radius: 10px;
}

/* 데스크톱: 내용 크기대로 */
@media (min-width: 768px){
  .list-filterbar .frm_input{ width: auto; min-width: 120px; }
  .list-filterbar .btn_frmline{ white-space: nowrap; }
}

/* 모바일: 2열 그리드처럼 보이게 */
@media (max-width: 767px){
  .list-filterbar{
    gap: 8px;
  }

  /* 셀렉트는 2개씩 줄 맞춤 */
  .list-filterbar .frm_input{
    flex: 1 1 calc(50% - 4px);   /* ✅ 2칸 */
    min-width: 0;                /* ✅ overflow 방지 */
  }

  /* 초기화 버튼은 한 줄 전체(아래로) */
  .list-filterbar .btn_frmline{
    flex: 1 1 100%;
    width: 100%;
    white-space: nowrap;
  }
}

@media (min-width: 768px){
  .list-filterbar #fltReset{ margin-left: auto; }
}



/* =========================
   교당 카드: 좌(사진) / 우(정보) flex
   ========================= */
.temple_card__wrap{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.temple_card__media{
  flex: 0 0 25%;
  max-width: 25%;
  aspect-ratio: 4 / 3;
  border:1px solid var(--view-bd,#e5e7eb);
  border-radius:14px;
  overflow:hidden;
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
}

.temple_card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 기본이미지는 안 잘리게, 적당한 여백으로 */
.temple_card__media img.is-noimage{
  width:auto;
  height:auto;
  max-width:70%;
  max-height:70%;
  object-fit:contain;
  opacity:.75;
}

@media (max-width: 640px){
  .temple_card__media{
    flex: 0 0 auto;
    max-width:100%;
    width:100%;
    aspect-ratio:16 / 9;
  }
}

.temple_card__body{
  flex: 1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  
}

.temple_card__title{
  font-weight:800;
  color:#111827;
}

/* 공통 박스(정보/주소) */
.temple_card__item,
.temple_card__addr{
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f9fafb;
  min-width:0;
}

.temple_card__item{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.temple_card__addr{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.temple_card__item strong,
.temple_card__addr strong{
  flex:0 0 auto;
  color:#6b7280;
  font-weight:700;
  white-space:nowrap;
}

.temple_card__item span{
  color:#111827;
  font-weight:600;
  text-align:right;
  overflow-wrap:anywhere;
  min-width:0;
}

.temple_card__addr span{
  flex:1 1 auto;
  min-width:0;
  color:#111827;
  font-weight:600;
  overflow-wrap:anywhere;
}

/* ✅ 우측 레이아웃: 6칸 그리드
   - 반(1/2) = 3칸
   - 1/3 = 2칸
   - 전체 = 6칸
*/
.temple_card__grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:10px;
  height: 100%;
}

/* 너비 규칙(HTML에서 class로 지정) */
.temple_card__grid .is-half  { grid-column: span 3; }
.temple_card__grid .is-third { grid-column: span 2; }
.temple_card__grid .is-full  { grid-column: 1 / -1; }

/* 버튼은 셀 폭을 꽉 채우게 */
.temple_card__btn{
  width:100%;
  justify-content:center;
}

.only-mobile{ display:none !important; }

/* 모바일: 세로 스택 + 전화버튼 노출 */
@media (max-width: 640px){
  .temple_card__wrap{
    flex-direction:column;
  }
  .temple_card__media,
  .temple_card__body{
    flex: 0 0 auto;
  }

  /* 모바일은 한 줄(세로)로 */
  .temple_card__grid{
    grid-template-columns: 1fr;
  }
  .temple_card__grid .is-half,
  .temple_card__grid .is-third,
  .temple_card__grid .is-full{
    grid-column: 1 / -1;
  }

  .only-mobile{ display:inline-flex !important; }
  .temple_card__item, .temple_card__addr{
    flex-direction:column;
  }
}


.temple_card a.btn-kakao:hover{
  background: #FEE500;
  border-color: #FEE500;
  color: #3A1D1D;
}
.temple_card a.btn-kakao:hover i{
  color: #3A1D1D;
}


.temple_card a.btn-naver:hover{
  background: #03C75A;
  border-color: #03C75A;
  color: #ffffff;
}
.temple_card a.btn-naver:hover i{
  color: #ffffff;
}

.temple_card a.btn-call:hover{
  background: #15803d;
  border-color: #16a34a;
  color: #ffffff;
}
.temple_card a.btn-call:hover i{
  color: #ffffff;
}

/* 썸네일 커버 강제(비율 다른 이미지도 카드에 꽉 채우기) */
#bo_gall .gall_img--cover { aspect-ratio: 16 / 9; overflow: hidden; }
#bo_gall .gall_img--cover a { display:block; width:100%; height:100%; }
#bo_gall .gall_img--cover img {
  width:100%;
  height:100% !important;   /* ← height:auto!important를 이기기 위해 필수 */
  object-fit: cover;
  object-position: center;
}


/* 교당 이미지 Swiper */
.temple_card__media .swiper {
  width: 100%;
  height: 100%;
}

.temple_card__media .swiper-slide {
  width: 100%;
  height: 100%;
}

.temple_card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* pagination/버튼이 너무 튀면 */
.temple_card__media .swiper-pagination-bullets { bottom: 6px; }
.temple_card__media .swiper-button-prev,
.temple_card__media .swiper-button-next {
  transform: scale(.8);
}

/* 기본 점 색상 */
.templeSwiper .swiper-pagination-bullet {
  background: rgba(255,255,255,.6); /* 비활성 */
  opacity: 1;
}

/* 활성화된 점 */
.templeSwiper .swiper-pagination-bullet-active {
  background: var(--color-main, #3a8afd); /* 브랜드 색 */
}

/* 버튼 전체 */
.templeSwiper .swiper-button-prev,
.templeSwiper .swiper-button-next {
  color: #fff;                  /* 아이콘 색 */
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,.45);  /* 반투명 배경 */
  border-radius: 50%;
}

/* hover */
.templeSwiper .swiper-button-prev:hover,
.templeSwiper .swiper-button-next:hover {
  background: var(--color-main, #3a8afd);
}

/* 아이콘 크기 */
.templeSwiper .swiper-button-prev::after,
.templeSwiper .swiper-button-next::after {
  font-size: 16px;
  font-weight: 700;
}

@media (max-width: 640px){
  .templeSwiper .swiper-button-prev,
  .templeSwiper .swiper-button-next {
    display: none;
  }
}

#ca_name option:last-child { display:none; }

#monthlyWeekBox{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

#monthlyWeek, #monthlyDow{
  flex:1 0 48%;
}

/* =========================================
   program list table
   - list.skin 전용 테이블 스타일
========================================= */

#bo_list{
  color: var(--color-text);
  font-family: var(--font-main), sans-serif;
}

/* 상단 총 개수 */
#bo_list_total{
  float: none;
  line-height: 1.5;
  font-size: 14px;
  color: var(--color-table-muted);
}

/* 테이블 래퍼 */
#bo_list .tbl_wrap{
  width: 100%;
  overflow-x: auto;
  margin-top: 16px;
  border: 1px solid var(--color-table-border);
  border-radius: 18px;
  background: var(--color-bg);
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}

/* 테이블 본체 */
#bo_list table{
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--color-bg);
}

/* 캡션 숨김 */
#bo_list caption{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 헤더 */
#bo_list thead th{
  padding: 15px 14px;
  border-bottom: 1px solid var(--color-table-border);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-table-main) 72%, white 28%) 0%,
    color-mix(in srgb, var(--color-sub-2) 78%, white 22%) 100%
  );
  color: var(--color-sub-1);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

#bo_list thead th a{
  color: inherit;
  text-decoration: none;
}

#bo_list thead th a:hover{
  color: var(--color-main);
}

/* 본문 */
#bo_list tbody td{
  padding: 15px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-table-border) 55%, white 45%);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  vertical-align: middle;
}

#bo_list tbody tr:hover td{
  background: color-mix(in srgb, var(--color-table-hover) 45%, white 55%);
}

#bo_list tbody tr:last-child td{
  border-bottom: 0;
}

/* 공지행 */
#bo_list .bo_notice td{
  background: color-mix(in srgb, var(--color-table-accent) 45%, white 55%) !important;
}

#bo_list .bo_notice .td_subject .bo_tit_link{
  color: var(--color-notice);
  font-weight: 800;
}

/* 빈 데이터 */
#bo_list .empty_table{
  padding: 56px 20px;
  text-align: center;
  color: var(--color-muted);
  font-size: 14px;
}

/* 번호 */
#bo_list .td_num{
  width: 72px;
  color: var(--color-table-muted);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* 체크박스 */
#bo_list th.all_chk,
#bo_list .td_chk{
  width: 54px;
  text-align: center;
}

/* 제목 */
#bo_list .td_subject{
  text-align: left;
}

#bo_list .td_subject .bo_tit{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#bo_list .td_subject .bo_tit_link{
  display: inline-block;
  max-width: 100%;
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bo_list .td_subject .bo_tit_link:hover{
  color: var(--color-main);
}

#bo_list .td_subject .cnt_cmt{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-main) 15%, white 85%);
  color: var(--color-main-hover);
  font-size: 11px;
  font-weight: 700;
}

/* 운영교당 */
#bo_list .td_temple{
  color: var(--color-sub-1);
  font-weight: 600;
}

/* 일정 */
#bo_list .td_day{
  color: #4b5563;
  word-break: keep-all;
}

/* 시간 */
#bo_list .td_time{
  color: var(--color-main-hover);
  font-weight: 700;
  white-space: nowrap;
}

/* 추천/비추천 */
#bo_list .td_numsmall{
  color: var(--color-table-muted);
  font-size: 13px;
}

/* 필터 + 목록 간격 */
#programFilterForm{
  margin-bottom: 18px;
}

/* 필터 바 */
#program-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--color-table-border);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-sub-2) 75%, white 25%) 0%,
    var(--color-bg) 100%
  );
  box-shadow: 0 8px 22px rgba(0,0,0,.04);
}

#program-filters select{
  min-width: 140px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--color-table-border);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main), sans-serif;
  font-size: 14px;
}

#program-filters .sch_btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--color-main);
  background: var(--color-main);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: .18s ease;
}

#program-filters .sch_btn:hover{
  background: var(--color-main-hover);
  border-color: var(--color-main-hover);
  color: #fff;
}

/* 검색폼도 테이블 톤과 맞춤 */
#bo_list fieldset.bo_sch{
  margin: 28px auto;
}

#bo_list fieldset.bo_sch form{
  max-width: 760px;
}

#bo_list fieldset.bo_sch .sch_bar{
  padding: 0;
}

/* 상단 버튼 영역 */
#bo_btn_top{
  margin: 18px 0 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

/* 모바일 */
@media (max-width: 768px){
  #bo_btn_top{
    flex-direction: column;
    align-items: stretch;
  }

  #bo_list .tbl_wrap{
    border-radius: 14px;
  }

  #bo_list table{
    min-width: 680px;
  }

  #bo_list thead th,
  #bo_list tbody td{
    padding: 13px 10px;
    font-size: 13px;
  }

  #program-filters{
    padding: 14px;
    gap: 8px;
  }

  #program-filters select{
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  #program-filters .sch_btn{
    flex: 1 1 calc(50% - 4px);
  }
}

@media (max-width: 640px){
  #bo_list .td_num{
    width: 58px;
  }

  #bo_list .td_subject .bo_tit_link{
    font-size: 13px;
  }

  #bo_list .td_temple,
  #bo_list .td_day,
  #bo_list .td_time{
    font-size: 13px;
  }
}

/* =========================================
   list category
   - 필터 아래 카테고리 탭
========================================= */
#bo_cate{
  margin: 18px 0 14px;
  padding: 16px 18px;
  border: 1px solid var(--color-table-border);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-sub-2) 70%, white 30%) 0%,
    var(--color-bg) 100%
  );
  box-shadow: 0 8px 22px rgba(0,0,0,.04);
}

#bo_cate h2{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#bo_cate ul{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#bo_cate li{
  display: block;
  padding: 0;
  margin: 0;
}

#bo_cate a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--color-table-border);
  background: var(--color-bg);
  color: var(--color-sub-1);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: .18s ease;
  white-space: nowrap;
}

#bo_cate a:hover,
#bo_cate a:focus,
#bo_cate a:active{
  background: color-mix(in srgb, var(--color-main) 12%, white 88%);
  border-color: color-mix(in srgb, var(--color-main) 55%, white 45%);
  color: var(--color-main-hover);
  text-decoration: none;
}

/* 활성 탭 */
#bo_cate #bo_cate_on{
  background: var(--color-main);
  border-color: var(--color-main);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(200,154,6,.22);
}

/* 모바일 */
@media (max-width: 768px){
  #bo_cate{
    margin: 14px 0 12px;
    padding: 14px;
    border-radius: 14px;
  }

  #bo_cate ul{
    gap: 6px;
  }

  #bo_cate a{
    min-height: 36px;
    padding: 0 13px;
    font-size: 13px;
  }
}

#bo_list .td_num{
  color: var(--color-table-muted);
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}

#bo_list .td_temple,
#bo_list .td_day,
#bo_list .td_time{
  white-space: nowrap;
}

#bo_list tbody tr.is-clickable-row{
  cursor:pointer;
}

#bo_list tbody tr.is-clickable-row:hover td {
  background: color-mix(in srgb, var(--color-table-hover) 45%, white 55%);
}

#bo_v_title .bo_v_cate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  margin-bottom: 8px;
  border: 1px solid var(--color-table-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-sub-2) 78%, white 22%);
  color: var(--color-main-hover);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

/* =========================================
   write head
========================================= */
.program-write-head {
  margin: 20px 0;
  padding: 20px 24px;
  border: 1px solid var(--color-table-border);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-sub-2) 78%, white 22%) 0%,
      var(--color-bg) 100%
    );
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}

.program-write-head h3 {
  margin: 0 0 8px;
  color: var(--color-sub-1);
  font-family: var(--font-title), sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.program-write-head p {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-main), sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

/* 왼쪽 포인트 라인 강조 */
.program-write-head {
  position: relative;
  overflow: hidden;
}

.program-write-head::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  bottom: 20px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(
    180deg,
    var(--color-main) 0%,
    var(--color-main-hover) 100%
  );
}

/* 내부 텍스트가 라인과 너무 붙지 않게 */
.program-write-head h3,
.program-write-head p {
  padding-left: 8px;
}

@media (max-width: 768px) {
  .program-write-head {
    padding: 16px 18px;
    border-radius: 14px;
    margin-bottom: 16px;
  }

  .program-write-head::before {
    top: 16px;
    bottom: 16px;
  }

  .program-write-head h3 {
    font-size: 20px;
  }

  .program-write-head p {
    font-size: 13px;
    line-height: 1.6;
  }
}

#bo_v_title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 64px;
  padding: 14px 20px;
  border: 1px solid var(--view-bd, #e5e7eb);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
  margin-top: 30px;
}

#bo_v_title .bo_v_cate {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--color-table-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-sub-2) 78%, white 22%);
  color: var(--color-main-hover);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

#bo_v_title .bo_v_tit {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 160px);
  text-align: center;
  font-size: 1.2em;
  font-family: var(--font-main);
  word-break: keep-all;
  line-height: 1.4;
}