@charset "utf-8";

/* =============================================
   성희롱고충상담 게시판 스킨 - 디자인 시스템 적용
   ============================================= */

/* === 안내 박스 === */
.counsel-info-box {
  background: hsl(280, 30%, 96%);
  border: 1px solid hsl(280, 20%, 90%);
  border-left: 4px solid hsl(280, 50%, 30%);
  border-radius: 0.5rem;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
}
.counsel-info-box .b1 {
  font-weight: 700;
  color: hsl(280, 50%, 30%);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.counsel-info-box .c3 {
  color: hsl(280, 50%, 30%);
}
.counsel-info-box .con-list1 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.counsel-info-box .con-list1 li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.9rem;
  line-height: 1.8;
  color: hsl(280, 15%, 45%);
}
.counsel-info-box .con-list1 li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: hsl(280, 50%, 30%);
}

/* === 섹션 제목 === */
.objHeading_h2,
._objHeading h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: hsl(280, 50%, 22%);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid hsl(280, 50%, 30%);
  margin-top: 2.5rem;
  margin-bottom: 0;
}

/* === 테이블 폼 === */
.con2-table {
  margin-bottom: 1rem;
}
.con2-table table {
  width: 100%;
  border-collapse: collapse;
}
.con2-table th {
  background: hsl(280, 30%, 96%);
  font-weight: 600;
  color: hsl(280, 50%, 22%);
  padding: 0.875rem 1.25rem;
  border: 1px solid hsl(280, 20%, 90%);
  text-align: left;
  font-size: 0.9375rem;
  white-space: nowrap;
  vertical-align: middle;
}
.con2-table td {
  padding: 0.875rem 1.25rem;
  border: 1px solid hsl(280, 20%, 90%);
  font-size: 0.9375rem;
  vertical-align: middle;
}
.con2-table thead th {
  background: hsl(280, 50%, 22%);
  color: #fff;
  text-align: center;
  font-weight: 600;
}
.con2-table tbody td.c-align {
  text-align: center;
}

/* === Input 스타일 재정의 === */
#bo_w input[type="text"],
#bo_w input[type="password"],
#bo_w textarea,
section#bo_w input[type="text"] {
  width: auto;
  height: 42px !important;
  padding: 0 0.75rem !important;
  border: 1px solid hsl(280, 20%, 90%) !important;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  font-family: 'Noto Sans KR', sans-serif;
  text-indent: 0;
  transition: border-color 0.2s;
  background: #fff;
  color: #333;
}
#bo_w input[type="text"]:focus,
#bo_w textarea:focus {
  outline: none;
  border-color: hsl(280, 50%, 30%) !important;
  box-shadow: 0 0 0 3px hsla(280, 50%, 30%, 0.1);
}
#bo_w select {
  height: 42px !important;
  min-width: 80px;
  padding: 0 2rem 0 0.75rem;
  border: 1px solid hsl(280, 20%, 90%);
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  font-family: 'Noto Sans KR', sans-serif;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.5rem center / 1rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
#bo_w select:focus {
  outline: none;
  border-color: hsl(280, 50%, 30%);
}

/* === 라디오 버튼 === */
#bo_w input[type="radio"] {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: none !important;
  margin-right: 0.25rem;
  vertical-align: middle;
  accent-color: hsl(280, 50%, 30%);
}
#bo_w label {
  font-size: 0.9375rem;
  margin-right: 1rem;
  cursor: pointer;
  vertical-align: middle;
}

/* === 개인정보 동의 영역 === */
.wrap-login {
  margin-top: 1rem;
}
.wrap-login .privacy {
  margin-bottom: 1rem;
}
.wrap-login .agree {
  background: hsl(280, 30%, 96%);
  border: 1px solid hsl(280, 20%, 90%);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
}
.wrap-login .agree p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: hsl(280, 15%, 45%);
  margin-bottom: 0.5rem;
}
.wrap-login .agree p:last-child {
  margin-bottom: 0;
}
.wrap-login .agree .c2 {
  color: hsl(0, 84%, 50%);
  font-weight: 500;
}

/* 체크박스 */
.write_div .bo_v_option {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.write_div .bo_v_option .chk_box label {
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.selec_chk {
  position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; z-index: -1;
}
.chk_box { position: relative; }
.chk_box input[type="checkbox"] + label span {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid hsl(280, 20%, 80%);
  border-radius: 4px;
  background: #fff;
  transition: all 0.2s;
  vertical-align: middle;
}
.chk_box input[type="checkbox"]:checked + label span {
  background: hsl(280, 50%, 30%);
  border-color: hsl(280, 50%, 30%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

/* === 버튼 === */
.board-button.view {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.small-btn-box {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.samll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  text-decoration: none;
}
.samll-btn.color1 {
  background: hsl(280, 50%, 30%);
  color: #fff;
}
.samll-btn.color1:hover {
  background: hsl(280, 50%, 22%);
}
.samll-btn.color3 {
  background: hsl(280, 30%, 96%);
  color: hsl(280, 50%, 25%);
  border: 1px solid hsl(280, 20%, 90%);
}
.samll-btn.color3:hover {
  background: hsl(280, 20%, 90%);
}

/* === 검색 영역 (목록) === */
.board-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: hsl(280, 30%, 96%);
  border-radius: 0.5rem;
  border: 1px solid hsl(280, 20%, 90%);
}
.util-search {
  font-size: 0.9375rem;
  color: hsl(280, 15%, 45%);
}
.util-search strong {
  color: hsl(280, 50%, 30%);
  font-weight: 700;
}
.form-search fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.form-search legend {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
.tbl-search {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.tbl-search .box-sel select {
  height: 40px;
  min-width: 120px;
  padding: 0 2rem 0 0.75rem;
  border: 1px solid hsl(280, 20%, 90%);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-family: 'Noto Sans KR', sans-serif;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.5rem center / 1rem;
  -webkit-appearance: none;
  appearance: none;
}
.tbl-search .box-search {
  display: flex;
  gap: 0;
}
.tbl-search .box-search input[type="text"] {
  height: 40px !important;
  padding: 0 0.75rem !important;
  border: 1px solid hsl(280, 20%, 90%) !important;
  border-right: none !important;
  border-radius: 0.375rem 0 0 0.375rem;
  font-size: 0.875rem;
  width: 180px;
  text-indent: 0;
}
.tbl-search .box-search input[type="submit"] {
  height: 40px;
  padding: 0 1rem;
  background: hsl(280, 50%, 30%);
  color: #fff;
  border: 1px solid hsl(280, 50%, 30%);
  border-radius: 0 0.375rem 0.375rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
}
.tbl-search .box-search input[type="submit"]:hover {
  background: hsl(280, 50%, 22%);
}

/* === 목록 테이블 === */
.scroll-table {
  overflow-x: auto;
}
.board-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.board-table thead {
  background: hsl(280, 50%, 22%);
}
.board-table thead th {
  padding: 0.875rem 0.75rem;
  color: #fff;
  font-weight: 600;
  text-align: center;
  font-size: 0.875rem;
  white-space: nowrap;
  border: none;
}
.board-table tbody tr {
  border-bottom: 1px solid hsl(280, 20%, 90%);
  transition: background 0.15s;
}
.board-table tbody tr:hover {
  background: hsl(280, 30%, 98%);
}
.board-table tbody tr.notice {
  background: hsla(45, 93%, 47%, 0.06);
}
.board-table tbody td {
  padding: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  color: hsl(280, 15%, 35%);
  vertical-align: middle;
}
.board-table .td-subject {
  text-align: left;
  max-width: 0;
}
.board-table .td-subject a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #222;
}
.board-table .td-subject a:hover strong {
  color: hsl(280, 50%, 30%);
}
.board-table .td-subject .new {
  display: inline-block;
  background: hsl(280, 50%, 30%);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 0.375rem;
  vertical-align: middle;
}
.board-table .td-num span {
  font-size: 0.8125rem;
}
.board-table .col-check { width: 40px; }
.board-table .col-num { width: 70px; }
.board-table .col-write { width: 100px; }
.board-table .col-date { width: 100px; }
.board-table .col-acess { width: 70px; }
.board-table .col-file { width: 60px; }
.board-table .col-subject { width: auto; }

/* 첨부파일 아이콘 */
.td-file .file-y {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: hsl(280, 30%, 96%);
  border-radius: 4px;
  margin: 0 auto;
}
.td-file .file-y span {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(280, 50%, 30%);
}

/* 페이지네이션 */
.pg_wrap {
  text-align: center;
  margin: 2rem 0;
}
.pg_wrap .pg {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.pg_wrap .pg a,
.pg_wrap .pg .pg_current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: all 0.2s;
}
.pg_wrap .pg a {
  color: hsl(280, 15%, 45%);
  border: 1px solid hsl(280, 20%, 90%);
  background: #fff;
}
.pg_wrap .pg a:hover {
  background: hsl(280, 30%, 96%);
  border-color: hsl(280, 50%, 30%);
  color: hsl(280, 50%, 30%);
}
.pg_wrap .pg .pg_current {
  background: hsl(280, 50%, 30%);
  color: #fff;
  font-weight: 700;
  border: 1px solid hsl(280, 50%, 30%);
}

/* === 상세보기 (view) === */
.board-view-info {
  margin-bottom: 2rem;
}
.view-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: hsl(280, 50%, 22%);
  line-height: 1.5;
  margin-bottom: 1rem;
  word-break: keep-all;
}
.view-detail {
  border-top: 1px solid hsl(280, 20%, 90%);
  border-bottom: 1px solid hsl(280, 20%, 90%);
  padding: 0.75rem 0;
}
.view-util {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.view-util dl {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.8125rem;
}
.view-util dt {
  color: hsl(280, 15%, 55%);
  font-weight: 500;
}
.view-util dd {
  color: hsl(280, 15%, 35%);
  font-weight: 600;
}

/* 첨부파일 */
.view-file {
  background: hsl(280, 30%, 96%);
  border: 1px solid hsl(280, 20%, 90%);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.view-file .row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.view-file .title {
  font-weight: 600;
  color: hsl(280, 50%, 22%);
  font-size: 0.875rem;
  white-space: nowrap;
  padding-top: 2px;
}
.view-file ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.view-file li {
  margin-bottom: 0.25rem;
}
.view-file a {
  font-size: 0.875rem;
  color: hsl(280, 50%, 30%);
  transition: color 0.2s;
}
.view-file a:hover {
  color: hsl(280, 50%, 22%);
  text-decoration: underline;
}

/* 본문 */
.view-con {
  padding: 2rem 0;
  min-height: 200px;
  line-height: 1.9;
  font-size: 1rem;
  color: #333;
  word-break: keep-all;
}
.view-con img {
  max-width: 100%;
  height: auto;
}

/* 이전/다음글 */
.view-navi {
  border-top: 1px solid hsl(280, 20%, 90%);
  margin-bottom: 1.5rem;
}
.view-navi .row {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(280, 20%, 90%);
  gap: 1rem;
}
.view-navi .title {
  font-weight: 600;
  font-size: 0.8125rem;
  color: hsl(280, 50%, 22%);
  white-space: nowrap;
  min-width: 50px;
}
.view-navi .insert a {
  font-size: 0.875rem;
  color: hsl(280, 15%, 35%);
}
.view-navi .insert a:hover {
  color: hsl(280, 50%, 30%);
}

/* 버튼 영역 */
.btn-control {
  margin-bottom: 0.5rem;
  text-align: center;
}
.btn-deco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-deco.color1 {
  background: hsl(280, 50%, 30%);
  color: #fff;
}
.btn-deco.color1:hover {
  background: hsl(280, 50%, 22%);
}

/* === 댓글 === */
.cmt_btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(280, 50%, 22%);
  border: none;
  background: none;
  cursor: pointer;
}
#bo_vc {
  margin-bottom: 2rem;
}
#bo_vc h2 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
#bo_vc article {
  padding: 1rem 0;
  border-bottom: 1px solid hsl(280, 20%, 90%);
  display: flex;
  gap: 0.75rem;
  position: relative;
}
#bo_vc .pf_img img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
#bo_vc .cm_wrap {
  flex: 1;
}
#bo_vc header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  margin-bottom: 0.375rem;
}
#bo_vc header h2 {
  display: none;
}
#bo_vc .bo_vc_hdinfo {
  color: hsl(280, 15%, 55%);
  font-size: 0.75rem;
}
#bo_vc .cmt_contents p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #333;
  margin: 0;
}
#bo_vc #bo_vc_empty {
  text-align: center;
  padding: 2rem;
  color: hsl(280, 15%, 55%);
  font-size: 0.9375rem;
}

/* 댓글 옵션 */
.bo_vl_opt {
  position: absolute;
  top: 1rem;
  right: 0;
}
.btn_cm_opt {
  background: none;
  border: 1px solid hsl(280, 20%, 90%);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.8125rem;
}
.bo_vc_act {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid hsl(280, 20%, 90%);
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px hsla(280, 50%, 30%, 0.1);
  z-index: 10;
  min-width: 80px;
  list-style: none;
  padding: 4px 0;
  margin: 0;
}
.bo_vc_act li a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #333;
  white-space: nowrap;
}
.bo_vc_act li a:hover {
  background: hsl(280, 30%, 96%);
  color: hsl(280, 50%, 30%);
}

/* 댓글 쓰기 */
#bo_vc_w {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid hsl(280, 50%, 30%);
}
#bo_vc_w h2 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
#bo_vc_w textarea {
  width: 100% !important;
  min-height: 100px;
  padding: 0.75rem !important;
  border: 1px solid hsl(280, 20%, 90%) !important;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-family: 'Noto Sans KR', sans-serif;
  resize: vertical;
  text-indent: 0;
}
#bo_vc_w textarea:focus {
  outline: none;
  border-color: hsl(280, 50%, 30%) !important;
  box-shadow: 0 0 0 3px hsla(280, 50%, 30%, 0.1);
}
.bo_vc_w_wr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.bo_vc_w_info {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.bo_vc_w_info input[type="text"],
.bo_vc_w_info input[type="password"] {
  height: 38px !important;
  padding: 0 0.75rem !important;
  border: 1px solid hsl(280, 20%, 90%) !important;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  width: 120px;
  text-indent: 0;
}
.btn_confirm {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.btn_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  background: hsl(280, 50%, 30%);
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn_submit:hover {
  background: hsl(280, 50%, 22%);
}
.secret_cm label {
  font-size: 0.8125rem;
}

/* 글자수 카운터 */
#char_cnt {
  display: block;
  text-align: right;
  font-size: 0.8125rem;
  color: hsl(280, 15%, 55%);
  margin-bottom: 0.25rem;
}

/* 안내 텍스트 */
.pop-notice {
  background: hsl(280, 30%, 96%);
  border: 1px solid hsl(280, 20%, 90%);
  border-left: 4px solid hsl(280, 50%, 30%);
  border-radius: 0.5rem;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
}
.pop-notice .b1 {
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}
.pop-notice .c3 {
  color: hsl(280, 50%, 30%);
}
.pop-notice .txt {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: hsl(280, 15%, 35%);
}
.pop-notice .con-list1 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pop-notice .con-list1 li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.875rem;
  line-height: 1.8;
  color: hsl(280, 15%, 45%);
}
.pop-notice .con-list1 li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: hsl(280, 50%, 30%);
}

/* Wrapper */
._fnctWrap {
  max-width: 100%;
}
._contentBuilder {
  max-width: 100%;
}

/* 유틸리티 */
.mt30 { margin-top: 1.5rem; }
.mt50 { margin-top: 2.5rem; }
.mb20 { margin-bottom: 1rem; }
.mb50 { margin-bottom: 2.5rem; }
.ml20 { margin-left: 1rem; }
.hidden, .sound_only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* === 카테고리 === */
#bo_cate {
  margin-bottom: 1.5rem;
}
#bo_cate h2 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
#bo_cate_ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
#bo_cate_ul li a {
  display: inline-block;
  padding: 0.375rem 1rem;
  border: 1px solid hsl(280, 20%, 90%);
  border-radius: 2rem;
  font-size: 0.8125rem;
  color: hsl(280, 15%, 45%);
  transition: all 0.2s;
}
#bo_cate_ul li a:hover,
#bo_cate_ul li a.on {
  background: hsl(280, 50%, 30%);
  color: #fff;
  border-color: hsl(280, 50%, 30%);
}

/* === 반응형 === */
@media (max-width: 767px) {
  .board-search {
    flex-direction: column;
    align-items: stretch;
  }
  .tbl-search {
    flex-direction: column;
  }
  .tbl-search .box-search input[type="text"] {
    width: 100%;
  }
  .board-table .col-date,
  .board-table .col-acess,
  .board-table .col-file,
  .board-table .th-date,
  .board-table .th-acess,
  .board-table .th-file,
  .board-table .td-date,
  .board-table .td-access,
  .board-table .td-file {
    display: none;
  }
  .con2-table th {
    display: block;
    width: 100%;
    border-bottom: none;
  }
  .con2-table td {
    display: block;
    width: 100%;
  }
  .view-util {
    flex-direction: column;
    gap: 0.5rem;
  }
  #bo_vc article {
    flex-direction: column;
  }
}