@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_menu > ul > li > a
   를 덮어써 메뉴에 빨간 3px 테두리·uppercase·float 이 걸리고 있었다. */

header img {
  width: 100%;
}

header.drop {
  position: fixed;
}

header.insert {
  position: fixed;
  /* .header 높이(143px = 7.5vw) 전체를 밀어 올려야 완전히 숨는다 */
  top: -7.5vw;
}

/* ═══════════════════════ HEADER (기본 형태) ═══════════════════════
   구조: header.header > a.header_logo + nav.header_menu > ul > li > a + a.header_call + .hamburger
   프로젝트마다 바꾸는 값 = 로고/CTA 이미지 자연사이즈(width·aspect-ratio),
   메뉴 사이 간격(gap), 좌우 배치 여백(margin-left), 헤더 높이.
   ═══════════════════════════════════════════════════════════════ */
.header img {
  width: 100%;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 143);
  /* 크롭 143 안에서 콘텐츠 시각중심(65.5)을 맞추는 보정 — 단순 center 면 6px 내려간다 */
  padding-bottom: calc(var(--px) * 12);
  letter-spacing: -0.04vw;
  /* ★ Pretendard 는 글로벌 section{} 으로만 카스케이드되는데 헤더는 section 밖이라
     body 의 맑은고딕(default.css)을 물려받는다 → 여기서 직접 지정한다. */
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  background-color: #ffffff;
  transition-duration: 0.3s;
  transition-property: top, height, padding-bottom, box-shadow;
}

/* 스크롤 상태 — js/header.js 가 scrollY > 0 이면 붙인다 (PC 로직만 있음).
   시안 143 은 최상단 기준이라, 스크롤 중엔 60px 버튼 위아래 20px 만 남기고 그림자로 본문과 분리한다 */
.header_change {
  height: calc(var(--px) * 100);
  padding-bottom: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.header_logo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-left: 5.9318%;
  width: calc(var(--px) * 132);
  aspect-ratio: 132 / 47;
}

/* 웹페이지 다크모드(강제 변환)에선 흰 헤더 바가 어둡게 뒤집히는데 로고 PNG 는 그대로라 어두운 로고가 바에 묻힌다 →
   로고 뒤에 안 뒤집히는 흰 판(common.css --plate-white)을 로고보다 조금 크게 깐다. 밝은 화면에선 흰 바 위라 안 보인다.
   판은 흐름 요소인 img 뒤로 가야 해서 z-index -1 — .header(fixed + z-index)·드로어(fixed + z-index)가 스택 컨텍스트라 바 배경 위·로고 아래에 놓인다. */
.header_logo::before,
.header_drawer_logo::before {
  content: "";
  position: absolute;
  inset: -12% -7%;
  z-index: -1;
  border-radius: calc(var(--px) * 10);
  background-image: var(--plate-white);
  background-size: 100% 100%;
}

.header_menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-left: 11.4961%;
}

.header_menu_list {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 시안 간격 81.25 → 4.3vw(81.9px). 렌더 실측 시작점 오차 ≤2.3px */
  gap: 4.3vw;
}

.header_menu_item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header_menu_1 {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  color: #000000;
  white-space: nowrap;
  transition: font-weight 0.3s, color 0.3s;
}

.header_menu_1.remote_on {
  font-weight: 700;
  color: var(--color-point);
}

/* 터치 기기는 탭한 뒤 :hover 가 손을 떼도 그대로 남는다 → 마지막에 누른 메뉴가 현재 섹션(remote_on)보다
   더 강조돼 보여 엉뚱한 항목이 활성처럼 읽힌다. 마우스가 달린 기기에서만 건다.
   데스크탑은 hover:hover 에 항상 매칭되므로 PC 렌더는 그대로다. */
@media (hover: hover) {
  .header_menu_1:hover {
    font-weight: 700;
    color: var(--color-point);
  }
}

/* 유튜브 채널 버튼 2개 — .header_menu 안의 flex 형제 (PC 는 메뉴 오른쪽, 모바일은 드로어 하단) */
.header_yt {
  flex-shrink: 0;
  margin-left: calc(var(--px) * 86);
  gap: calc(var(--px) * 2);
}

.header_yt_link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(var(--px) * 123);
  height: calc(var(--px) * 60);
  background-color: #ffffff;
  border: 1px solid #cde4ed;
  border-radius: calc(var(--px) * 12);
}

.header_yt_img01 {
  width: calc(var(--px) * 89);
  aspect-ratio: 89 / 42;
}

.header_yt_img02 {
  width: calc(var(--px) * 102);
  aspect-ratio: 102 / 49;
}

/* 우측 CTA — 가맹문의 전화 pill. 좌 여백 113 : 우 여백 112 대칭이라 오른쪽 기준으로 고정한다 */
.header_call {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 5.8793%;
  gap: 0.3vw;
  width: calc(var(--px) * 123);
  height: calc(var(--px) * 60);
  background-color: var(--color-point);
  border-radius: calc(var(--px) * 12);
}

.header_call_label {
  font-size: calc(var(--px) * 15);
  font-weight: 500;
  line-height: 0.7vw;
  color: #ffffff;
  letter-spacing: -0.04vw;
}

.header_call_num {
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 18);
  font-weight: 800;
  line-height: 0.8vw;
  color: #ffffff;
  letter-spacing: -0.03vw;
}

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

/* ═══════════════ 게시판 바로가기 (레벨 10 이상 전용) ═══════════════
   마크업은 theme/design/template/header/index.html — g5_board 를 읽어 자동 생성.
   헤더(.header height calc(--px*143)) 바로 아래 우측에 fixed. z-index 는 헤더보다 1 낮게.
   ★ 폰트: Pretendard 는 글로벌 section{} 으로만 카스케이드되는데 이 위젯은 section 밖이라
     상속을 못 받는다 → 여기서 직접 지정한다. */
.hd_boards {
  position: fixed;
  right: calc(var(--px) * 24);
  top: calc(var(--px) * 155);
  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.2vw;
    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.2vw;
    border-radius: 2vw;
  }
}


/* -------------------header 커스텀 끝------------------- */

/* 모바일 드롭다운 딤 — PC 에는 존재하지 않는다 (마크업은 </header> 뒤 형제) */
.header_drawer,
.header_close,
.header_dim {
  display: none;
}

@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;
  }
  /* -------------------header 커스텀 시작------------------- */
  /* ★ .header(클래스) 가 header(엘리먼트)보다 우선이라, PC 의 height 가
     모바일에서 그대로 남아 헤더가 찌부된다 → 클래스로 다시 잡는다.
     ★ transform 은 쓰지 않는다 — none 이 아니면 .header 가 fixed 자식
     (.header_menu)의 containing block 이 되어 화면 전체를 못 덮는다 */
  .header {
    position: fixed;
    left: 0;
    top: 0;
    justify-content: flex-start;
    align-items: center;
    height: 15vw;
    padding-bottom: 0;
    background: #fff;
    width: 100%;
    /* 본문 상단도 흰 배경이라 경계가 안 보인다 → 기본 상태부터 그림자로 띄운다.
       (PC 는 최상단에 그림자 없음 + 스크롤 시 .header_change 가 붙는 게 시안 의도라 건드리지 않는다) */
    box-shadow: 0 2px 12px rgba(7, 35, 70, 0.1);
  }

  .header_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25vw;
    aspect-ratio: 132 / 47;
    margin-left: 5vw;
  }

  .header_logo::before,
  .header_drawer_logo::before {
    border-radius: 2.4vw;
  }

  /* 모바일 전화 CTA는 하단 바로 문의와 드로어 상단 전화 버튼에서 제공한다. */
  .header_call_label {
    font-size: 3.4vw;
    line-height: 3.4vw;
  }

  .header_call_num {
    font-size: 4.6vw;
    line-height: 4vw;
  }

  /* 햄버거는 메뉴를 열고, 패널 안의 별도 X 버튼으로 닫는다. */
  .hamburger {
    position: absolute;
    top: 50%;
    right: 5vw;
    transform: translateY(-50%);
  }

  .hamburger-menu {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7vw;
    height: 4vw;
  }

  div.line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    margin: 0 !important;
    border-radius: 0;
    background: var(--color-navy);
    transform-origin: center;
    transition: transform var(--transition-ui) var(--ease-ui), opacity var(--transition-ui) var(--ease-ui), top var(--transition-ui) var(--ease-ui), bottom var(--transition-ui) var(--ease-ui);
  }

  .top-reverse {
    top: 0;
  }

  /* 가운데 한 줄만 브랜드 포인트.
     ★ div. 를 붙여야 한다 — 위 div.line(0,1,1) 이 .mid-reverse(0,1,0) 보다 특이도가 높아
     클래스만으로 쓰면 background 가 navy 로 남는다 */
  div.mid-reverse {
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-point);
  }

  .bot-reverse {
    bottom: 0;
  }

  .line_change.top-reverse {
    top: 50%;
    transform: translate(0, -50%) rotate(45deg);
  }

  .line_change.mid-reverse {
    opacity: 0;
  }

  .line_change.bot-reverse {
    bottom: 50%;
    transform: translate(0, 50%) rotate(-45deg);
  }

  /* 드로어 딤 — 열림 상태는 .header_dim_on (js/header.js) */
  .header_dim {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
    z-index: 9997;
    display: block;
    background-color: rgba(0, 0, 0, 0.53);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-panel) var(--ease-ui), visibility var(--transition-panel);
  }

  .header_dim.header_dim_on {
    opacity: 1;
    visibility: visible;
  }

  /* 모바일 메뉴 = 오른쪽에서 밀려 들어오는 드로어. 열림 상태는 .header_menu_drop (js/header.js) */
  .header_menu {
    position: fixed !important;
    z-index: 2;
    right: -100%;
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 17.8vw 0 8vw;
    width: 95.4vw;
    box-sizing: border-box;
    transition: right var(--transition-panel) var(--ease-ui), visibility var(--transition-panel);
    clear: both;
    background-color: #ffffff;
    color: #000000;
    height: 100dvh;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    top: 0%;
    margin-left: 0;
  }

  .header_close {
    display: flex;
    position: absolute;
    top: 2.9vw;
    right: 3.9%;
    justify-content: center;
    align-items: center;
    width: 10.3vw;
    height: 10.3vw;
    box-sizing: border-box;
    padding: 0;
    line-height: 1;
    color: #000000;
    background-color: #efefef;
    border-radius: 50%;
  }

  .header_close_icon {
    display: block;
    flex-shrink: 0;
    width: 4.5vw;
    height: 4.5vw;
  }

  /* 드로어 자체 상단 — 로고 + 가맹문의 pill */
  .header_drawer {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-left: 14.8%;
  }

  .header_drawer_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 27vw;
    aspect-ratio: 132 / 47;
    margin-bottom: 1vw;
    position: relative;
  }

  .header_drawer_call {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 33vw;
    height: 13.5vw;
    gap: 0.9vw;
    margin-left: 8.9vw;
    background-color: var(--color-point);
    border-radius: 3.4vw;
  }

  .header_menu_list {
    flex-direction: column;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-top: 4.6vw;
    gap: 0;
    border-top: 1px solid #0c0c0c;
    border-bottom: 1px solid #0c0c0c;
  }

  .header_menu_item {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    height: 13.2vw;
    box-sizing: border-box;
    padding-left: 14.8%;
    border-bottom: 1px solid rgba(135, 135, 135, 0.2);
    transition: background-color var(--transition-ui) var(--ease-ui);
  }

  .header_menu_item.remote_on {
    background-color: #e8f8fc;
  }

  .header_menu.header_menu_drop {
    top: 0%;
    visibility: visible;
    opacity: 1;
    right: 0;
  }

  .header_menu_1 {
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    font-size: 4.3vw;
    color: #000000;
    font-weight: 500;
  }

  /* 드로어의 활성 항목은 배경(.header_menu_item.remote_on)으로만 표시하고 글자는 검정 유지 */
  .header_menu_1.remote_on {
    color: #000000;
    font-weight: 500;
  }

  .header_yt {
    flex-shrink: 0;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    margin-top: 9.2vw;
    margin-left: 0;
    padding-left: 12%;
    gap: 2vw;
  }

  .header_yt_link {
    width: 35.6vw;
    height: 21.6vw;
    border-radius: 3.4vw;
  }

  .header_yt_img01 {
    width: 27.9vw;
  }

  .header_yt_img02 {
    width: 31.3vw;
  }
  .header.menu-open { background: transparent; box-shadow: none; }
  /* 드로어가 열려 있는 동안 바 로고는 드로어 뒤로 숨는데, 로고 판은 드로어 왼쪽 끝 밖으로 조금 삐져나온다 → 열려 있는 동안은 판을 끈다 */
  .header.menu-open .header_logo::before {
    display: none;
  }
  /* -------------------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.1vw;
    line-height: 4.7vw;
  }
}