@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;
  top: -5vw;
}

/* 모바일 드롭다운 딤 — PC 에는 존재하지 않는다 (레이아웃 영향 0) */
.header_dim {
  display: none;
}

/* ═══════════════════════ 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) * 90);
  letter-spacing: -0.04vw;
  /* 헤더는 <section> 밖이라 style.css 의 section{font-family:"Pretendard Variable"} 을
     못 받고 그누보드 default.css 의 body{font-family:"Malgun Gothic"} 으로 떨어진다.
     시안 PSD 는 Pretendard(맛KET 레이어 fontFamily="Pretendard-Bold") 이므로 여기서 직접 잡는다.
     ★ 자간(-0.05vw)은 이 폰트 전제다 — 폰트를 바꾸면 자간도 같이 다시 잡아야 한다
       (Malgun 한글 advance 18px(1em) vs Pretendard 15.56px(0.864em)). */
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  background-color: #ffffff;
  transition-duration: 0.3s;
  transition-property: top;
}

.header_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-left: 5.9%;
  width: calc(var(--px) * 116);
  aspect-ratio: 116 / 32;
}

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

.header_menu_list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.4vw;
}

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

.header_menu_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  color: #000000;
  /* 시안 PSD tracking -50 = -0.05em (18px 기준 -0.9px) */
  letter-spacing: -0.05vw;
  white-space: nowrap;
}

/* "맛KET" 만 시안 자간이 다르다(실측 45px) → 자간만 되돌린다.
   ★ 색·굵기는 여기서 손대지 않는다 — 메뉴 하나만 미리 물들여 두면
     항상 활성처럼 보여 지금 보는 섹션을 가리키는 .remote_on 과 구분이 안 된다.
     파란색은 자기 섹션(con03)에 도달했을 때만 붙는다 */
.header_menu_point {
  letter-spacing: -0.04vw;
}

.header_menu_1:hover,
.header_menu_1.remote_on {
  font-weight: 600;
  color: var(--color-point);
}

/* 우측 CTA — 파란 알약 + 흰 전화 아이콘 + 흰 대표번호 */
.header_call {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 0.2vw;
  margin-left: 13.4%;
  width: calc(var(--px) * 173);
  height: calc(var(--px) * 40);
  background-color: var(--color-point);
  border-radius: 50vw;
}

.header_call_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 18);
  aspect-ratio: 18 / 17;
}

.header_call_txt {
  font-family: "Paperlogy";
  font-weight: 700;
  font-size: calc(var(--px) * 22);
  color: #ffffff;
  white-space: nowrap;
}

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

/* ═══════════════ 게시판 바로가기 (레벨 10 이상 전용) ═══════════════
   마크업은 theme/design/template/header/index.html — g5_board 를 읽어 자동 생성.
   헤더(.header height calc(--px*90)) 바로 아래 우측에 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.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 커스텀 끝------------------- */
@media screen and (max-width: 599px) {
  .pc-mobile {
    display: none !important;
  }
  .mobile-pc {
    display: flex !important;
  }
  .pc-inline {
    display: none !important;
  }
  /* PC 의 헤더 숨김/복귀 애니메이션은 모바일에서 끈다.
     ★ header.insert(top:-5vw) 는 전역 룰(특이도 0,1,1)이라 모바일 .header(0,1,0) 의
       top:0 를 이긴다 — PC 폭에서 리사이즈로 넘어오면 헤더가 5vw 올라간 채 굳고,
       드롭다운은 top:15vw 고정이라 그만큼 헤더와 벌어진다 → 여기서 같이 0 으로 되돌린다 */
  header.drop,
  header.insert {
    position: fixed;
    top: 0;
    animation: none;
    transition: none;
  }
  .hamburger {
    position: absolute;
    top: 50%;
    right: 5vw;
    transform: translateY(-50%);
  }
  .hamburger-menu {
    width: 8vw;
    height: 4.5vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* 헤더 배경(흰색) 위 대비색. 가운데 한 줄만 브랜드 컬러 포인트(#line-mid) */
  div.line {
    background: #111111;
    width: 100%;
    height: 2px;
    border-radius: 0px;
    position: absolute;
    left: 0;
    transition: all 0.3s;
    transform-origin: center;
    margin: 0 !important;
  }
  /* ID(1,0,0) 라 div.line(0,0,1) 을 이긴다 */
  #line-mid {
    background: var(--color-point);
  }
  .top-reverse {
    top: 0%;
  }
  .mid-reverse {
    top: 50%;
    transform: translateY(-50%);
  }
  .bot-reverse {
    bottom: 0%;
  }
  /* ★ background-color 를 다시 지정하지 않는다 — 드롭다운이 헤더 '아래'로 펼쳐져
     X 는 여전히 흰 헤더 바 위에 남는다. 흰색으로 바꾸면 안 보인다 */
  .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 커스텀 시작------------------- */
  /* ★ .header(클래스) 가 header(엘리먼트)보다 우선이라, PC 의 height:calc(--px*80)
     이 모바일에서 그대로 남아 헤더가 찌부된다 → 클래스로 다시 잡는다 */
  .header {
    position: fixed;
    left: 0;
    top: 0;
    height: 15vw;
    font-size: 4.5vw;
    /* ★ transform 을 다시 걸지 말 것 — none 이 아닌 transform 은 position:fixed 자식의
       포함블록이 되어 .header_menu 의 top:15vw 가 뷰포트가 아닌 헤더 기준으로 바뀜다.
       (측면 드로어 시절의 translateX 잔재라 지금은 하는 일이 없어 제거했다) */
  }

  /* 플레이북 권장 28~32vw. 비율 116/32(3.625) → 28vw 는 세로 7.7vw 로
     헤더 15vw 안에 여유 있게 들어간다 */
  .header_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28vw;
    aspect-ratio: 116 / 32;
    margin-left: 5vw;
  }

  /* 전화 CTA 숨김 — 대표번호는 하단 퀵바(.quick_tel)가 상시 노출한다.
     좁은 폭에서 로고·CTA·햄버거 셋을 15vw 바에 욱여넣으면 전부 작아져 다 안 읽힌다 */
  .header_call {
    display: none;
  }

  /* 모바일 메뉴 = 헤더 아래로 펼쳐지는 드롭다운(위→아래 슬라이드).
     열림 상태는 .header_menu_drop (js/header.js 햄버거 토글).
     ★ right:-100% 로 밀어넣던 측면 드로어에서 바꿨다 — 화면 밖 100vh 패널을
       통째로 움직여야 해 리페인트가 크고, 헤더와 따로 놓인 판이라 소속감도 약하다.
       max-height + opacity 는 헤더 밑단에 붙어 내려오므로 둘이 한 덩어리로 읽힌다 */
  .header_menu {
    position: fixed;
    top: 15vw;                /* = 헤더 높이. 헤더 바로 밑에서 시작한다 */
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    margin-left: 0;
    padding: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    /* 닫힘 상태 */
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: #ffffff;
    /* 헤더도 흰색이라 경계가 사라진다 → 상단 선 + 약한 그림자로 분리한다 */
    border-top: 1px solid #e6e8ef;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    transition: max-height 0.35s ease, opacity 0.25s ease;
  }

  /* 펼침. 항목이 화면 높이를 넘으면 overflow:hidden 에 잘리므로 여기서 스크롤을 열어준다 */
  .header_menu.header_menu_drop {
    max-height: calc(100vh - 15vw);
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

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

  /* 항목 사이 얇은 구분선 — 마지막은 드롭다운 밑선과 겹쳐서 지운다 */
  .header_menu_item {
    display: block;
    border-bottom: 1px solid #eef0f5;
  }

  .header_menu_item:last-child {
    border-bottom: 0;
  }

  /* 패딩으로 터치 타깃을 확보한다 — 4.5vw × 2 + 글자 높이 = 48px 이상 */
  .header_menu_1 {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    padding: 4.5vw 6vw;
    font-size: 4.2vw;
    font-weight: 600;
    color: #1a1a22;
  }

  /* PC 호버색이 모바일까지 새면 탭한 항목이 계속 물들어 remote_on 과 헷갈린다 → 기본색 유지.
     ★ 아래 :active/.remote_on 보다 반드시 먼저 와야 한다 — 특이도가 0,2,0 으로 같아 순서로 갈린다 */
  .header_menu_1:hover {
    color: #1a1a22;
    font-weight: 600;
  }

  /* 탭하는 순간 + 지금 보고 있는 섹션(remote_on) = 브랜드 컬러 배경 + 흰 글자 */
  .header_menu_1:active,
  .header_menu_1.remote_on {
    color: #ffffff;
    background-color: var(--color-point);
  }

  /* 드롭다운 딤 — 헤더(9999)가 스택 컨텍스트라 header 밖 형제로 둬야 헤더·드롭다운만 선명하게 남는다.
     display 토글 금지(트랜지션 안 걸림) → opacity + pointer-events 로만 껐다 켠다 */
  .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 커스텀 끝------------------- */
}

#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;
  }
}