@charset "UTF-8";

#bo_v > header {
  display: none;
}

#content_wrap {
  padding-bottom: 3%;
}

#bo_v_title .bo_v_tit {
  display: block;
  font-size: 17px;
  margin: 5px 0 0;
  word-break: break-all;
  font-weight: 500;
  letter-spacing: -1px;
  font-family: "pretendard Variable" !important;
}

.board_title {
  font-family: "pretendard Variable";
}

#bo_v > header {
  display: block;
  position: relative;
  background: transparent;
  font-size: unset;
  padding: unset;
  border-bottom: 1px solid black;
  font-family: "pretendard Variable";
}

#content_wrap {
  padding-bottom: 0% !important;
}

/* 레거시 admin 드롭다운(ul.admin_head) 전용 스타일 삭제 —
   마크업이 프로젝트 어디에도 없고(0건), element 셀렉터라 신규 nav.header_nav > ul > li > a
   를 덮어써 메뉴에 빨간 3px 테두리·uppercase·float 이 걸리고 있었다. */

header img {
  width: 100%;
}

header.drop {
  position: fixed;
}

/* 반전 헤더 높이(h100)만큼 올린다 — -5vw(≈96)면 아래 띠가 남는다 */
header.insert {
  position: fixed;
  top: calc(var(--px) * -100);
}

/* ═══════════════════════ HEADER (진미막창) ═══════════════════════
   시안: .planning/visual/진미막창_홈페이지/header_visual.png (1905×162)
   수치 근거: .planning/header/plan.md — 전부 시안 PNG 픽셀 실측.

   구조: header.header > div.header_top(상단바 h99 + 하단 1px 구분선)
                       > a.header_logo(흰 패널 254×163 · absolute · 캔버스 정중앙)
   배경은 투명이다 — 뒤로 메인비주얼이 비친다. 스크롤(.header_change)하면 흰 배경 + 먹색 글자로 반전.
   ═══════════════════════════════════════════════════════════════ */
.header img {
  width: 100%;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 162);
  letter-spacing: -0.04vw;
  background-color: transparent;
  transition-duration: 0.3s;
  transition-property: top, height, background-color;
}

/* 상단 바 — 콘텐츠 h99(content-box) + border 1px = 구분선이 시안 y99 에 온다.
   모바일에선 이 블록이 우측 드로어가 된다 (파일 하단 미디어쿼리) */
.header_top {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 99);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: border-color 0.3s;
}

.header_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
}

.header_nav_left {
  margin-left: 17.7428%;
}

.header_nav_right {
  margin-left: 18.7777%;
}

.header_menu_list {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 2.6vw;
}

/* 우측 그룹만 간격이 좁다 (실측 좌 54/52/48 · 우 42/44 — 디자이너 눈대중 배치의 그룹 평균) */
.header_menu_list_right {
  gap: 2vw;
}

/* height:100% = 빨간 활성바(::after)를 상단 바 하단(구분선 바로 위)에 붙이기 위한 기준면 */
.header_menu_item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* 활성 바 — 시안 실측 x320~416 / y86~98. 글자(w60)보다 좌우로 18.5px 씩 넓다(블리드) */
.header_menu_item::after {
  content: "";
  position: absolute;
  left: calc(var(--px) * -18.5);
  right: calc(var(--px) * -18.5);
  bottom: 0;
  height: calc(var(--px) * 13);
  background-color: var(--color-point);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.header_menu_item:hover::after,
.header_menu_item.remote_on::after {
  transform: scaleX(1);
}

.header_menu_1 {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "SfHambakneun", sans-serif;
  font-size: calc(var(--px) * 22);
  color: #ffffff;
  letter-spacing: -0.0115vw;
  white-space: nowrap;
  transition: color 0.3s;
}

/* 전화 CTA — 파란 원 아이콘 + 번호 이미지(SDMokdan 유료폰트라 이미지로 뺐다) */
.header_call {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-left: 3.3501%;
  gap: 0.4vw;
}

/* padding 만으로 29px 아이콘을 54px 정원으로 키운다 (높이 고정값 불필요) */
.header_call_icon {
  padding: calc(var(--px) * 12.5);
  background-color: #184795;
  border-radius: 50%;
}

.header_call_icon_img {
  width: calc(var(--px) * 29);
  aspect-ratio: 29 / 29;
}

.header_call_num {
  position: relative;
  width: calc(var(--px) * 204);
  aspect-ratio: 204 / 38;
}

.header_call_num_w {
  transition: opacity 0.3s;
}

/* 먹색 버전 — 좌표를 주지 않고 부모 flex center 의 static position 에 겹친다 */
.header_call_num_dark {
  opacity: 0;
  transition: opacity 0.3s;
}

/* 로고 흰 패널 — left 를 주지 않는다. .header 의 align-items:center 가 가로 중앙을 잡는다
   (실측 중심 952 ≒ 캔버스 중심 952.5). 높이는 padding + 이미지로 자연히 163 이 된다.
   box-shadow 3겹 = PSD outside stroke 3겹(1px #000 / 5px #fefefe / 8px #000).
   spread 누적이라 렌더는 검정1 → 흰4 → 검정3 으로 시안과 일치한다. */
.header_logo {
  position: absolute;
  top: calc(var(--px) * -1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--px) * 23) calc(var(--px) * 41) calc(var(--px) * 27);
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #000000, 0 0 0 5px #fefefe, 0 0 0 8px #000000;
  transition: padding 0.3s, box-shadow 0.3s;
}

.header_logo_img {
  width: calc(var(--px) * 172);
  aspect-ratio: 172 / 113;
  transition: width 0.3s;
}

/* ── 스크롤 반전 — js/header.js 가 scrollY>0 에 .header_change 를 붙인다 ── */
/* 반전 상태는 상단 바(99 + 구분선 1) 높이로 줄여 섹션을 덜 가린다. 모바일은 파일 하단 미디어쿼리가 되돌린다 */
.header_change {
  height: calc(var(--px) * 100);
  background-color: #ffffff;
}

/* 로고 패널도 102/172 동비율로 줄인다 — padding 14/24/16 → 150×97 이라 h100 안에 든다.
   흰 헤더 위에선 3겹 테두리(box-shadow)를 뺀다 */
.header_change .header_logo {
  padding: calc(var(--px) * 14) calc(var(--px) * 24) calc(var(--px) * 16);
  box-shadow: none;
}

.header_change .header_logo_img {
  width: calc(var(--px) * 102);
}

.header_change .header_top {
  border-color: rgba(35, 24, 21, 0.12);
}

.header_change .header_menu_1 {
  color: var(--color-ink);
}

.header_change .header_call_num_w {
  opacity: 0;
}

.header_change .header_call_num_dark {
  opacity: 1;
}

/* ═══════════════════════ HEADER end ═══════════════════════ */

/* ═══════════════ 게시판 바로가기 (레벨 10 이상 전용) ═══════════════
   마크업은 theme/design/template/header/index.html — g5_board 를 읽어 자동 생성.
   헤더(.header height calc(--px*80)) 바로 아래 우측에 fixed. z-index 는 헤더보다 1 낮게.
   ★ 폰트: Pretendard 는 글로벌 section{} 으로만 카스케이드되는데 이 위젯은 section 밖이라
     상속을 못 받는다 → 여기서 직접 지정한다. */
.hd_boards {
  position: fixed;
  right: calc(var(--px) * 24);
  top: calc(var(--px) * 92);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  letter-spacing: -0.02vw;
}

.hd_boards_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 8);
  box-sizing: border-box;
  height: calc(var(--px) * 36);
  padding: 0 calc(var(--px) * 15);
  font-family: inherit;
  font-size: calc(var(--px) * 14);
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  background-color: rgba(17, 17, 17, 0.88);
  border: 0;
  border-radius: calc(var(--px) * 18);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hd_boards_btn:hover {
  background-color: #111111;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.26);
  transform: translateY(-1px);
}

/* 셰브론 — border 2변을 돌려 만든 ∨ (열리면 ∧ 로 회전) */
.hd_boards_btn::after {
  content: "";
  width: calc(var(--px) * 7);
  height: calc(var(--px) * 7);
  margin-top: calc(var(--px) * -3);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.hd_boards.is_open .hd_boards_btn::after {
  margin-top: calc(var(--px) * 3);
  transform: rotate(-135deg);
}

/* 닫힘 상태 — display 로 껐다 켜면 transition 이 안 걸리므로 흐름에는 남기고 시각만 감춘다 */
.hd_boards_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  margin-top: calc(var(--px) * 8);
  min-width: calc(var(--px) * 178);
  padding: calc(var(--px) * 6);
  background-color: #ffffff;
  border: 1px solid #ececf2;
  border-radius: calc(var(--px) * 12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(var(--px) * -8)) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s;
}

/* 열림 — js/header.js 가 .hd_boards 에 .is_open 토글 */
.hd_boards.is_open .hd_boards_list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.hd_boards_link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height: calc(var(--px) * 36);
  padding: 0 calc(var(--px) * 12);
  font-size: calc(var(--px) * 14);
  font-weight: 500;
  color: #2b2b33;
  white-space: nowrap;
  border-radius: calc(var(--px) * 8);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.hd_boards_link:hover {
  color: #111111;
  background-color: #f3f4f8;
}

@media screen and (max-width: 599px) {
  .hd_boards {
    right: 4vw;
    top: 18vw;
  }
  .hd_boards_btn {
    gap: 1.6vw;
    height: 8vw;
    padding: 0 3.4vw;
    font-size: 3.3vw;
    border-radius: 4vw;
  }
  .hd_boards_btn::after {
    width: 1.6vw;
    height: 1.6vw;
    margin-top: -0.7vw;
  }
  .hd_boards.is_open .hd_boards_btn::after {
    margin-top: 0.7vw;
  }
  .hd_boards_list {
    margin-top: 1.8vw;
    min-width: 40vw;
    padding: 1.4vw;
    border-radius: 2.8vw;
  }
  .hd_boards_link {
    height: 8.4vw;
    padding: 0 2.8vw;
    font-size: 3.3vw;
    border-radius: 2vw;
  }
}

/* 모바일 드로어 딜 — PC 에는 존재하지 않는다 (아래 미디어쿼리에서만 켜진다) */
.header_dim {
  display: none;
}


/* -------------------header 커스텀 끝------------------- */
@media screen and (max-width: 599px) {
  .pc-mobile {
    display: none !important;
  }
  .mobile-pc {
    display: flex !important;
  }
  .pc-inline {
    display: none !important;
  }
  header.drop {
    position: fixed;
    animation: none;
    transition: none;
  }
  .menu-hide {
    display: none !important;
  }
  .menu-show {
    display: flex !important;
  }
  .hamburger {
    position: absolute;
    top: 50%;
    right: 5vw;
    transform: translateY(-50%);
  }
  .hamburger-menu {
    width: 7vw;
    height: 4vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div.line {
    background: var(--color-ink);
    width: 100%;
    height: 2px;
    border-radius: 0px;
    transition: all 0.3s;
    transform-origin: center;
    position: absolute;
    left: 0;
  }
  #line-mid {
    background-color: var(--color-point);
    top: 50%;
    transform: translateY(-50%);
  }

  /* 반전 상태(흰 배경)에선 먹색. 아래 .line_change(드로어 열림)가 뒤에 와서 X 는 흰색을 유지한다 */
  .header_change .line {
    background-color: var(--color-ink);
  }
  .top-reverse {
    top: 0%;
  }
  .bot-reverse {
    bottom: 0%;
  }
  .line_change.top-reverse {
    top: 50%;
    transform: translate(0, -50%) rotate(45deg);
    background-color: var(--color-ink);
  }
  .line_change.mid-reverse {
    opacity: 0;
  }
  .line_change.bot-reverse {
    bottom: 50%;
    transform: translate(0, 50%) rotate(-45deg);
    background-color: var(--color-ink);
  }
  /* -------------------header 커스텀 시작------------------- */
  /* 사용자 모바일 규격: 15vw 헤더 + 상단 드롭다운. */
  .header {
    position: fixed;
    left: 0;
    top: 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 15vw;
    background-color: #ffffff;
    transition: none;
  }

  .header_logo,
  .header_change .header_logo {
    top: 50%;
    left: 4vw;
    transform: translateY(-50%);
    padding: 0;
    margin: 0;
    box-shadow: none;
    transition: none;
  }

  .header_logo_img,
  .header_change .header_logo_img {
    width: 18.2655vw;
    transition: none;
  }

  /* .header_top_drop 토글을 그대로 사용하는 위→아래 드롭다운. */
  .header_top {
    position: fixed;
    right: 0;
    left: 0;
    top: 15vw;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    max-height: 0;
    padding: 0;
    background-color: #ffffff;
    border-bottom: 0;
    border-top: 1px solid rgba(35, 24, 21, 0.12);
    box-shadow: 0 4px 8px rgba(35, 24, 21, 0.12);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0.35s;
  }

  .header_top_drop {
    max-height: calc(100dvh - 15vw);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* 드로어 딜 — 헤더(9999)·드로어 바로 아래 층. backdrop-filter 는 자기보다
     아래에 그려진 것만 흐리게 하므로 헤더·드로어는 따로 처리 없이 선명하게 남는다.
     display 를 토글하지 않는다 — 토글하면 트랜지션이 안 걸린다 */
  .header_dim {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9997;
    display: block;
    background-color: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .header_dim.on {
    opacity: 1;
    pointer-events: auto;
  }

  .header_nav_left,
  .header_nav_right {
    margin-left: 0;
  }

  .header_nav {
    align-items: stretch;
    height: auto;
    width: 100%;
  }

  .header_menu_list,
  .header_menu_list_right {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: auto;
    width: 100%;
    gap: 0;
  }

  .header_nav_right {
    margin-top: 0;
  }

  .header_menu_item {
    height: auto;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(35, 24, 21, 0.12);
  }

  /* 세로 드로어에선 하단 활성 바가 의미 없다 */
  .header_menu_item::after {
    display: none;
  }

  .header_menu_1,
  .header_change .header_menu_1 {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    padding: 4.5vw 6vw;
    font-size: 4.2vw;
    font-weight: 600;
    color: var(--color-ink);
  }

  .header_call {
    display: none;
  }
  .header_menu_1:hover,
  .header_menu_1:active,
  .header_change .header_menu_1:hover,
  .header_change .header_menu_1:active {
    background-color: var(--color-point);
    color: #ffffff;
  }
  /* -------------------header 커스텀 끝------------------- */
}

#bo_v_title .bo_v_tit {
  display: block;
  font-size: 17px;
  margin: 5px 0 0;
  word-break: break-all;
  font-weight: 700;
  letter-spacing: -1px;
  font-family: "pretendard Variable" !important;
}

.board_title {
  font-weight: 700;
  font-family: "pretendard Variable";
}

#bo_w .bo_w_tit .frm_input {
  padding-right: 0px !important;
}

#bo_v > header {
  display: block;
  position: relative;
  background: transparent;
  font-size: unset;
  padding: unset;
  border-bottom: 1px solid black;
  font-family: "pretendard Variable";
  font-weight: 900;
}

#bo_v_con {
  margin: 30px 0 30px;
  width: 100%;
  line-height: 1.7em;
  min-height: 200px;
  word-break: break-all;
  overflow: hidden;
  font-size: 1.3em;
  font-family: "pretendard Variable";
}

@media screen and (max-width: 599px) {
  .main_small_title {
    font-size: 3.3vw;
    line-height: 4.7vw;
  }
}