/* ==========================================================================
   page_content.css — 서브페이지(page_content/*.php) 공통 부품
   --------------------------------------------------------------------------
   각 페이지 안의 <style> 은 그 페이지 고유의 배치만 담당하고,
   여기서는 모든 서브페이지가 공유하는 타이포그래피 · 카드 · CTA 를 잡습니다.
   포인트는 주홍(--brand) 한 가지, 모서리는 각지게.
   ========================================================================== */

/* ── 타이포그래피 ────────────────────────────────────────── */
.sub_content .content h3 {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--text-color);
  margin-bottom: 1.6rem;
}

.sub_content .content h4 {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text-color);
  margin-bottom: 0.8rem;
}

/* ── 콘텐츠 내부 소제목 (.page_title) ─────────────────────
   서브페이지 머리(.sub_content > .page_title)와 구분해, 본문 중간에
   놓이는 소제목은 실선 없이 왼쪽 정렬 한 줄로만 둡니다. */
.sub_content .content .page_title {
  margin-bottom: 3.2rem;
}

.sub_content .content .page_title h3 {
  display: block;
  gap: 0;
  padding: 0;
  white-space: normal;
  text-align: left;
  margin-bottom: 0.8rem;
}

.sub_content .content .page_title h3::after {
  display: none;
}

.sub_content .content .page_title h3 strong {
  font-family: inherit;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.sub_content .content .page_title > p {
  margin: 0;
  font-size: 1.8rem;
  color: var(--text-color-sub);
}

/* ── 라벨 : 소제목 위에 놓는 작은 영문/숫자 표시 ─────────── */
.sub_content .content .lb {
  display: block;
  margin-bottom: 1.2rem;

  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--brand);
}

/* ── 공통 카드 : 옅은 면 + 둥근 모서리, 호버 시 주홍 테두리 ──
   흰 바탕에 흰 카드 + 실선만 두면 너무 메마르게 보여서,
   면을 한 톤 내리고 모서리를 둥글게 둡니다. */
.sub_content .content .card {
  padding: 4rem 3.2rem;
  background: var(--secondary-color);
  border: 1px solid transparent;
  border-radius: 1.8rem;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.sub_content .content .card:hover {
  background: var(--white-color);
  border-color: var(--brand);
  box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.06);
}

/* ── 공통 CTA 버튼 ───────────────────────────────────────── */
.cta_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 5.6rem;
  padding: 0 4rem;
  border-radius: 999px;

  background: var(--brand);
  color: var(--white-color);

  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s;
}

.cta_btn:hover {
  background: var(--brand-dark);
  color: var(--white-color);
}

/* 외곽선 변형 */
.cta_btn.line {
  background: transparent;
  border: 1px solid var(--text-color);
  color: var(--text-color);
}

.cta_btn.line:hover {
  background: var(--text-color);
  color: var(--white-color);
}

/* ── 공통 CTA 블록 : 페이지 끝의 상담 유도 띠 ───────────────
   먹색 판을 흰 본문 위에 그대로 얹으면 너무 딱딱해 보여서,
   옅은 면에 둥근 모서리로 눕히고 위쪽에 주홍 실선 한 줄만 둡니다. */
.sub_content .content .page_cta {
  margin-top: 8rem;
  padding: 6.4rem 4rem;

  background: var(--secondary-color);
  border-radius: 2.4rem;
  color: var(--text-color);
  text-align: center;
}

.sub_content .content .page_cta > p {
  margin-bottom: 2.8rem;

  font-family: var(--font-serif);
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--text-color);
}

.sub_content .content .page_cta .btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* 옅은 띠 위에서는 외곽선 버튼도 진한 선으로 */
.sub_content .content .page_cta .cta_btn.line {
  border-color: var(--text-color);
  color: var(--text-color);
}

.sub_content .content .page_cta .cta_btn.line:hover {
  background: var(--text-color);
  color: var(--white-color);
}

/* ── 표 : 창업 비용 등 ───────────────────────────────────── */
.sub_content .content .tbl {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--line-strong);
}

.sub_content .content .tbl th,
.sub_content .content .tbl td {
  padding: 1.8rem 1.6rem;
  border-bottom: 1px solid var(--line-color);

  font-size: 1.7rem;
  line-height: 1.6;
  text-align: left;
}

.sub_content .content .tbl th {
  width: 24%;
  font-weight: 500;
  color: var(--text-color);
  background: var(--lightgray-color);
}

.sub_content .content .tbl td {
  color: var(--text-color-sub);
}

.sub_content .content .tbl .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
}

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sub_content .content h3,
  .sub_content .content .page_title h3 strong {
    font-size: 2.4rem;
  }
}

@media (max-width: 768px) {
  .sub_content .content h3,
  .sub_content .content .page_title h3 strong {
    font-size: 2.2rem;
  }

  .sub_content .content h4 {
    font-size: 2.1rem;
  }

  .sub_content .content .card {
    padding: 3.2rem 2.4rem;
    border-radius: 1.4rem;
  }

  .sub_content .content .page_cta {
    margin-top: 5.6rem;
    padding: 4.8rem 2.4rem;
    border-radius: 1.8rem;
  }

  .sub_content .content .page_cta > p {
    font-size: 3.6rem;
  }

  .cta_btn {
    height: 5rem;
    padding: 0 2.8rem;
    font-size: 1.6rem;
  }

  .sub_content .content .tbl th,
  .sub_content .content .tbl td {
    padding: 1.4rem 1.2rem;
    font-size: 1.6rem;
  }

  .sub_content .content .tbl th {
    width: 32%;
  }
}

/* 게시판 아이콘 버튼 줄 : 검색 · 글쓰기 · 목록 · 관리
   --------------------------------------------------------------------------
   스킨 기본값은 float 에 칸 너비 40px 고정인데, 테마의 .btn 은 알약 모양이라
   좌우 2.4rem · 위아래 1.3rem 여백이 붙습니다. 그래서 버튼이 칸을 넘쳐
   오른쪽으로 삐져나오고, 높이도 글 개수 줄과 어긋났습니다.
   줄을 flex 로 바꿔 세로 가운데를 맞추고 아이콘 버튼은 정사각으로 잡습니다.

   마우스를 올렸을 때 깔리던 회색 바탕과 테두리는 쓰지 않습니다.
   아이콘 색이 바뀌므로 반응은 그대로 보입니다.

   같은 ul 을 목록 위(#bo_btn_top) · 목록 아래(.bo_fx) · 본문 아래(.bo_v_com)
   에서 함께 쓰므로 한 벌로 세 자리를 모두 맞춥니다. */
#content .sub_content #bo_btn_top {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

/* float 를 걷어내면 이 clearfix 는 빈 칸만 차지합니다 */
#content .sub_content #bo_btn_top::after {
  display: none;
}

#content .sub_content #bo_list_total {
  float: none;
  line-height: 1.5;
}

#content .sub_content .btn_bo_user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  float: none;
}

#content .sub_content #bo_btn_top .btn_bo_user {
  margin-left: auto;
}

#content .sub_content .btn_bo_user > li {
  float: none;
  width: auto;
  margin: 0;
  text-align: left;
  background: transparent;
}

/* 아이콘만 있는 버튼이라 글자용 여백 대신 정사각으로 잡습니다 */
#content .sub_content .btn_bo_user > li > .btn,
#content .sub_content .btn_bo_user > li > .btn_b01,
#content .sub_content .btn_bo_user > li > .btn_admin,
#content .sub_content .btn_bo_user > li > .btn_bo_sch,
#content .sub_content .btn_bo_user > li > .btn_more_opt {
  width: 3.4rem;
  height: 3.4rem;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text-color-sub);
}

#content .sub_content .btn_bo_user > li > .btn svg,
#content .sub_content .btn_bo_user > li > .btn i {
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1.8rem;
}

#content .sub_content .btn_bo_user > li > .btn:hover,
#content .sub_content .btn_bo_user > li > .btn:focus-visible,
#content .sub_content .btn_bo_user > li > .btn_b01:hover,
#content .sub_content .btn_bo_user > li > .btn_admin:hover,
#content .sub_content .btn_bo_user > li > .btn_bo_sch:hover,
#content .sub_content .btn_bo_user > li > .btn_more_opt:hover {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--point-color);
}



/* ==========================================================================
   게시판 검색 팝업 · 아이콘 버튼
   --------------------------------------------------------------------------
   검색 팝업
     예전 : 각진 흰 상자. 입력칸은 테두리만 있고, 돋보기는 칸 밖 아래로 떨어져 있었습니다.
     지금 : 모서리를 둥글리고 제목 줄을 두었습니다. 입력칸에는 옅은 배경을 깔고,
            돋보기는 칸 안 오른쪽에 넣어 높이를 맞췄습니다.

   글쓰기 · 취소 · 더보기 버튼
     예전 : 배경을 두 겹(요소 배경 = 강조색, ::before = 기본색) 깔았는데
            둥근 정도가 서로 달라 가장자리에 강조색 테두리가 비쳤습니다.
            아이콘도 4.8rem 원판이라 알약의 둥근 모서리와 겹쳤습니다.
     지금 : 배경 한 겹. 아이콘은 글자 옆 1.8rem.
            색은 mask 로 글자색을 따라가므로 filter: invert() 가 필요 없습니다.
   ========================================================================== */

/* ── 검색 팝업 ── */
.sub_content .bo_sch_bg {
  width: 100%;
  height: 100%;
  background: rgba(17, 22, 28, 0.55);
}

.sub_content .bo_sch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(46rem, calc(100vw - 4rem));
  min-width: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;

  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white-color);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-align: left;
}

/* 제목 줄 */
.sub_content .bo_sch h3 {
  display: block;
  margin: 0;
  padding: 1.8rem 5.6rem 1.8rem 2.4rem;
  border-bottom: 1px solid var(--line-color);
  background: var(--lightgray-color);

  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--headline-color);
  text-align: left;
}

.sub_content .bo_sch form {
  display: block;
  padding: 2.4rem;
}

/* 검색 대상 고르기 : 화살표는 테마 아이콘으로 그립니다 */
.sub_content .bo_sch select {
  width: 100%;
  height: 4.8rem;
  padding: 0 4.4rem 0 1.6rem;

  border: 1px solid var(--line-color);
  border-radius: var(--radius-sm);
  background-color: var(--lightgray-color);
  background-image: url(../lib/icon/chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 1.4rem center;
  background-size: 1.6rem 1.6rem;
  box-shadow: none;

  font-family: inherit;
  font-size: 1.7rem;
  color: var(--headline-color);
  cursor: pointer;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.sub_content .bo_sch select:focus {
  outline: 0;
  border-color: var(--point-color);
}

/* 검색어 칸 : 입력칸과 돋보기를 한 줄에 */
.sub_content .bo_sch .sch_bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  width: 100%;
  margin-top: 1.2rem;
  padding: 0.6rem 0.6rem 0.6rem 1.6rem;

  border: 1px solid var(--line-color);
  border-radius: var(--radius-sm);
  background: var(--lightgray-color);
  box-shadow: none;
  transition: border-color 0.2s;
}

.sub_content .bo_sch .sch_bar:focus-within {
  border-color: var(--point-color);
}

.sub_content .bo_sch .sch_input {
  flex: 1 1 auto;
  float: none;
  width: auto;
  min-width: 0;
  height: 3.6rem;
  padding: 0;

  border: 0;
  background: none;

  font-family: inherit;
  font-size: 1.7rem;
  color: var(--headline-color);
}

.sub_content .bo_sch .sch_input:focus {
  outline: 0;
}

.sub_content .bo_sch .sch_btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  float: none;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;

  border: 0;
  border-radius: var(--radius-xs);
  background: var(--point-color);
  color: var(--point-on);
  cursor: pointer;
  transition: background-color 0.2s;
}

.sub_content .bo_sch .sch_btn svg {
  width: 1.8rem;
  height: 1.8rem;
}

.sub_content .bo_sch .sch_btn i {
  font-size: 1.7rem;
}

.sub_content .bo_sch .sch_btn:hover {
  background: var(--headline-color);
}

/* 닫기 : 제목 줄 오른쪽에 맞춥니다 */
.sub_content .bo_sch .bo_sch_cls {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;

  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-color-sub);
  font-size: 1.7rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.sub_content .bo_sch .bo_sch_cls svg {
  width: 1.8rem;
  height: 1.8rem;
}

.sub_content .bo_sch .bo_sch_cls:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--headline-color);
}

/* ── 글쓰기 · 취소 · 더보기 버튼 ── */
.icon_btn,
.icon_btn_write,
.icon_btn_cancel {
  position: relative;
  z-index: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;

  height: 4.8rem;
  padding: 0 2.8rem;
  overflow: visible;

  border: 0;
  border-radius: var(--radius-pill);

  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}

/* 배경을 덮던 두 번째 겹을 걷어냅니다 */
.icon_btn::before,
.icon_btn_write::before,
.icon_btn_cancel::before {
  content: none;
}

/* 아이콘 : 글자 옆에 나란히. 색은 글자색을 따라갑니다 */
.icon_btn::after,
.icon_btn_write::after,
.icon_btn_cancel::after {
  content: "";
  position: static;
  flex: 0 0 auto;

  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0;
  filter: none;

  background-color: currentColor;
  background-image: none;

  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* 글쓰기 · 취소는 아이콘이 글자 앞에 옵니다 */
.icon_btn_write::after,
.icon_btn_cancel::after {
  order: -1;
}

.icon_btn::after {
  -webkit-mask-image: url(../lib/icon/arrow-right.svg);
          mask-image: url(../lib/icon/arrow-right.svg);
}

.icon_btn_write::after {
  -webkit-mask-image: url(../lib/icon/edit-3.svg);
          mask-image: url(../lib/icon/edit-3.svg);
}

.icon_btn_cancel::after {
  -webkit-mask-image: url(../lib/icon/x.svg);
          mask-image: url(../lib/icon/x.svg);
}

.icon_btn,
.icon_btn_write {
  background-color: var(--primary-color);
  color: var(--white-color);
}

.icon_btn:hover,
.icon_btn_write:hover {
  background-color: var(--point-color);
  color: var(--point-on);
}

/* 취소는 물러나 보이게 : 옅은 회색 */
.icon_btn_cancel {
  background-color: var(--lightgray-color);
  color: var(--headline-color);
}

.icon_btn_cancel:hover {
  background-color: var(--line-color);
  color: var(--headline-color);
}


/* ==========================================================================
   게시판 아이콘 버튼 : 어디에 놓여도 같게
   --------------------------------------------------------------------------
   위의 정리 규칙은 #content .sub_content 안에서만 걸립니다.
   같은 ul.btn_bo_user 를 쇼핑몰 · 1:1문의 · 회원 페이지에서도 쓰는데,
   그쪽에는 그 껍데기가 없어 그누보드 기본 알약 테두리가 그대로 보입니다.
   껍데기를 따지지 않는 규칙을 한 벌 더 깔아 둡니다.
   (본문 안에서는 위 규칙이 특이도가 높아 그대로 이깁니다)
   ========================================================================== */
.btn_bo_user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  float: none;
}

.btn_bo_user > li {
  float: none;
  width: auto;
  margin: 0;
  text-align: left;
  background: transparent;
}

.btn_bo_user > li > .btn,
.btn_bo_user > li > .btn_b01,
.btn_bo_user > li > .btn_admin,
.btn_bo_user > li > .btn_bo_sch,
.btn_bo_user > li > .btn_more_opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3.4rem;
  height: 3.4rem;
  min-width: 0;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text-color-sub);
}

.btn_bo_user > li > .btn svg,
.btn_bo_user > li > .btn i {
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1.8rem;
}

.btn_bo_user > li > .btn:hover,
.btn_bo_user > li > .btn:focus-visible,
.btn_bo_user > li > .btn_b01:hover,
.btn_bo_user > li > .btn_admin:hover,
.btn_bo_user > li > .btn_bo_sch:hover,
.btn_bo_user > li > .btn_more_opt:hover {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--point-color);
}


/* ==========================================================================
   본문 표 — page_content 의 class="table" · class="tables"
   --------------------------------------------------------------------------
   표에 공통 모양이 없어 그동안 브라우저 기본(줄도 여백도 없는 상태)으로
   나왔습니다. 페이지에서 따로 꾸며 둔 표(#페이지이름 .xx_table)는 그대로
   두고, 꾸미지 않은 표만 이 한 벌을 입습니다. 아래는 전부 클래스 규칙이라
   페이지의 #ID 규칙이 언제나 이깁니다.

     · 세로줄 없이 가로줄만 — 글이 많은 표에서 눈이 덜 피로합니다
     · 머리줄(thead)은 작은 글씨, 왼쪽 첫 칸(th)은 굵게
     · 좁은 화면에서는 감싸개(.table_responsive · .r_table)가 옆으로 밀립니다

   칸 여백 · 글자 크기만 바꾸시면 표 전체가 함께 따라옵니다.
   ========================================================================== */
.sub_content .content .table,
.sub_content .content .tables {
  width: 100%;
  min-width: 56rem;
  border-collapse: collapse;
  border-top: 1px solid var(--headline-color);
}

.sub_content .content .table th,
.sub_content .content .table td,
.sub_content .content .tables th,
.sub_content .content .tables td {
  padding: 1.8rem 1.6rem;
  border-bottom: 1px solid var(--line-color);

  font-size: var(--fs-body, 1.6rem);
  line-height: 1.7;
  text-align: left;
  vertical-align: top;
}

/* 머리줄 — 값보다 한 단계 작고 옅게 */
.sub_content .content .table thead th,
.sub_content .content .tables thead th {
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;

  font-size: var(--fs-sm, 1.4rem);
  font-weight: 600;
  color: var(--muted-color);
}

/* 왼쪽 첫 칸 — 그 줄이 무엇을 말하는지 */
.sub_content .content .table tbody th,
.sub_content .content .tables tbody th {
  font-weight: 700;
  color: var(--headline-color);
}

/* 표 제목(caption) — 가운데로 떠 있어 글줄과 어긋났습니다.
   왼쪽으로 맞추고 표와 조금 띄웁니다. */
.sub_content .content .table caption,
.sub_content .content .tables caption {
  padding-bottom: 0.8rem;

  font-size: var(--fs-sm, 1.4rem);
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
  color: var(--muted-color);
}

/* 표 위아래 여백 — 바로 위 글줄과 붙어 답답해 보였습니다 */
.sub_content .content .table_responsive,
.sub_content .content .r_table {
  margin: 1.6rem 0 2.4rem;
}

/* 개인정보처리방침의 표는 감싸개에 가로 스크롤이 없었습니다 */
.sub_content .content .r_table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .sub_content .content .table th,
  .sub_content .content .table td,
  .sub_content .content .tables th,
  .sub_content .content .tables td {
    padding: 1.4rem 1.2rem;
  }
}