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

/* ═══════════════════════ HEADER ═══════════════════════
   구조: header.header > a.header_logo + nav.header_menu > ul > li > a
         + a.header_shop + button.header_bgm + audio + .hamburger
   ═════════════════════════════════════════════════════ */
.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) * 93);
  /* 시안 실측: 콘텐츠 중심이 바 중앙(46.5)이 아니라 53.5 — 7px 아래 */
  padding-top: calc(var(--px) * 14);
  /* ★ <section> 밖이라 Pretendard 광역 카스케이드를 못 받는다.
     빠지면 default.css 의 body{Malgun Gothic} 으로 폴백돼 메뉴 폭이 전부 넓어진다 */
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  letter-spacing: -0.04vw;
  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.8793%;  /* 시안 x=120 − center-crop 8 */
  width: calc(var(--px) * 210);
  aspect-ratio: 210 / 37;
}

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

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

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

.header_menu_1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--px) * 18);
  font-weight: 600;
  color: #151515;
  white-space: nowrap;
  transition: color 0.3s;
}

/* 호버 — 굵기 700 + 우상단 빨간 점(시안 Ellipse 1, 9x9 @563,37).
   시안의 "1억 매출 신화" 가 굵고 점이 붙은 건 호버 상태를 그려둔 것이라
   특정 메뉴 고정이 아니라 전 메뉴 공통 호버로 구현한다. */
.header_menu_1:hover {
  font-weight: 700;
}

.header_menu_1::after {
  position: absolute;
  right: calc(var(--px) * -8);
  top: calc(var(--px) * -6);
  content: "";
  width: calc(var(--px) * 9);
  height: calc(var(--px) * 9);
  border-radius: 50%;
  background-color: #f33c1d;
  opacity: 0;
  transition: opacity 0.3s;
}

.header_menu_1:hover::after {
  opacity: 1;
}

/* 우측 CTA — 온라인몰(빨강 pill) */
.header_shop {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-left: 5.6063%;  /* 시안 실측 x=1492 */
  width: calc(var(--px) * 139);
  height: calc(var(--px) * 41);
  border-radius: 50vw;
  font-size: calc(var(--px) * 17);
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  background-color: var(--color-point);
}

/* 우측 CTA — 주제가 재생 토글(흰 pill + 테두리) */
.header_bgm {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  /* 시안 실측: 온라인몰 버튼과 4px 떨어져 있다 (PSD 도형 bbox 는 서로 붙어 있으나 실제 그려진 건 4px 간격) */
  margin-left: calc(var(--px) * 4);
  gap: 0.3vw;
  width: calc(var(--px) * 157);
  height: calc(var(--px) * 42);
  box-sizing: border-box;
  border: 1px solid #eae8df;
  border-radius: 50vw;
  font-size: calc(var(--px) * 17);
  font-weight: 500;
  color: var(--color-point);
  white-space: nowrap;
  background-color: #ffffff;
  cursor: pointer;
}

.header_bgm_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--px) * 14);
}

/* 재생 중에는 ▶ 대신 일시정지 표시 */
.header_bgm[aria-pressed="true"] .header_bgm_icon {
  font-size: calc(var(--px) * 17);
}

.header_bgm_audio {
  display: none;
}

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

/* ═══════════════ 게시판 바로가기 (레벨 10 이상 전용) ═══════════════
   마크업은 theme/design/template/header/index.html — g5_board 를 읽어 자동 생성.
   헤더(.header height calc(--px*93)) 바로 아래 우측에 fixed. z-index 는 헤더보다 1 낮게.
   열림 토글은 js/header.js 의 .hd_boards_btn 클릭 → .hd_boards.is_open */
.hd_boards {
  position: fixed;
  right: calc(var(--px) * 20);
  top: calc(var(--px) * 103);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}

.hd_boards_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--px) * 8) calc(var(--px) * 14);
  border: 1px solid #dddddd;
  border-radius: calc(var(--px) * 6);
  font-size: calc(var(--px) * 14);
  color: #151515;
  white-space: nowrap;
  background-color: #ffffff;
  cursor: pointer;
}

.hd_boards_list {
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 0.3vw;
  padding: calc(var(--px) * 8) 0;
  border: 1px solid #dddddd;
  border-radius: calc(var(--px) * 6);
  background-color: #ffffff;
}

.hd_boards.is_open .hd_boards_list {
  display: flex;
}

.hd_boards_link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: calc(var(--px) * 6) calc(var(--px) * 16);
  font-size: calc(var(--px) * 14);
  color: #151515;
  white-space: nowrap;
}

.hd_boards_link:hover {
  background-color: #f5f5f5;
}

/* ═══════════════ 게시판 바로가기 end ═══════════════ */

/* ═══════════════ 햄버거 (모바일 전용 · .mobile-pc 로 PC 숨김) ═══════════════
   마크업: .hamburger > .hamburger-menu > #line-top / #line-mid / #line-bot (.line)
   토글: js/header.js 가 .line 에 init(닫힘) ↔ on(열림) 을 갈아끼운다.
   @keyframes line-* 는 css/common.css 에 있다 — 여기서 재정의하지 말 것. */
.hamburger {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 7vw;
  height: 7vw;
  cursor: pointer;
}

.line {
  /* 부모 .hamburger-menu(7vw) 보다 3줄 합계(2px+margin ×3)가 커서
     flex 기본 shrink 가 높이를 0 으로 눌러버렸다 → 선이 아예 안 보였다 */
  flex-shrink: 0;
  width: 7vw;
  height: 2px;
  margin: 0.7vw 0;
  background-color: #151515;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

/* 열림 — 위/아래 선이 모여 X, 가운데 선은 사라진다 */
.line.on#line-top {
  animation-name: line-top, line-top-rotate;
}

.line.on#line-mid {
  animation-name: line-mid;
}

.line.on#line-bot {
  animation-name: line-bot, line-bot-rotate;
}

/* 닫힘 — 역방향. init 은 최초 렌더에서도 붙어 있으므로 애니메이션이 튀지 않게 둔다 */
.line.init#line-top {
  animation-name: line-top-rotate-reverse, line-top-reverse;
}

.line.init#line-mid {
  animation-name: line-mid-reverse;
}

.line.init#line-bot {
  animation-name: line-bot-rotate-reverse, line-bot-reverse;
}


@media screen and (max-width: 599px) {
  /* -------------------header 커스텀 시작------------------- */
  .header {
    height: 16vw;
  }

  .header_logo {
    width: 32vw;
    aspect-ratio: 210 / 37;
    margin-left: 5vw;
  }

  /* 우측 CTA 2종 — 모바일은 드로어 안으로 넣지 않고 숨긴다(햄버거가 우측을 차지) */
  .header_shop,
  .header_bgm {
    display: none;
  }

  .hd_boards {
    display: none;
  }


  /* 모바일 메뉴 = 오른쪽에서 밀려 들어오는 드로어. 열림 상태는 .header_menu_drop (js/header.js) */
  .header_menu {
    position: fixed !important;
    right: -100%;
    pointer-events: none;
    padding: 24vw 6vw 0 10vw;
    width: 62%;
    box-sizing: border-box;
    transition: all 0.3s;
    clear: both;
    background-color: #000000;
    /* 드로어 배경 이미지가 필요하면 아래 3줄을 프로젝트 이미지로 살린다
    background-image: url(/images/{드로어배경}.jpg);
    background-size: cover;
    background-position: center; */
    color: #fff;
    height: 100vh;
    flex-wrap: nowrap;
    gap: 5.5vw;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    top: 0%;
    margin-left: 0;
  }

  .header_menu_list {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5.5vw;
  }

  .header_menu.header_menu_drop {
    top: 0%;
    pointer-events: initial !important;
    opacity: 1;
    right: 0;
  }

  .header_menu_1 {
    height: auto;
    font-size: 4.4vw;
    color: #fff;
    font-weight: 500;
  }

  /* PC 호버색이 드로어 배경과 겹쳐 글자가 묻힌다.
     모바일엔 실제 호버가 없고 탭 후 :hover 가 남는 게 전부라 기본색을 유지한다. */
  .header_menu_1:hover {
    color: #fff;
  }
  /* ※ TOP 버튼(.top_btn*) 모바일 값은 이 파일 맨 아래 @media 에 있다 —
     PC 정의가 이 미디어쿼리보다 아래라 여기 쓰면 덮어써지기 때문이다 */
  /* -------------------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;
  }
}

/* ═══════════════════════ TOP 버튼 (fixed · z-index = .header 와 동일 9999) ═══════════════════════
   마크업은 theme/design/template/header/index.html 하단. 모바일 값은 css/mobile_style.css */
.top_btn {
  position: fixed;
  /* 시안 원본 실측: pill = PSD x1840~1873 · y26342~26404 → 34×63
     (PSD 도형 bbox 37×66 은 실제 그려진 것보다 크다) */
  right: calc(var(--px) * 39);
  bottom: calc(var(--px) * 54);
  z-index: 9999;
  display: flex;
  justify-content: center;
  /* 화살표가 pill 정중앙이 아니라 아래쪽에 붙어 있다 — 위 33px / 아래 11px */
  align-items: flex-end;
  box-sizing: border-box;
  width: calc(var(--px) * 34);
  height: calc(var(--px) * 63);
  padding-bottom: calc(var(--px) * 11);
  border-radius: calc(var(--px) * 17);
  background-color: #151515;
}

.top_btn img {
  width: 100%;
}

.top_btn_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 17);
  aspect-ratio: 17 / 20;
  transition: transform 0.3s ease;
}

/* 호버하면 화살표가 pill 안에서 위로 올라간다 (유저 지시).
   화살표 위 여백이 32px(=63 − padding 11 − 높이 20)이라 14px 까지만 올려
   pill 밖으로 안 빠져나가게 한다. */
.top_btn:hover .top_btn_img {
  transform: translateY(calc(var(--px) * -14));
}

/* ═══════════════════════════════════════════════════════════════
   TOP 버튼 모바일 — 반드시 위 PC 정의(.top_btn) *뒤* 에 온다.
   파일 상단 @media 에 쓰면 아래 PC 정의에 덮어써진다(그 자리 주석 참조).
   PC 는 34×63 pill(radius 17 = 폭의 절반). 모바일도 같은 비율로 키운다.
   ═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 599px) {
  .top_btn {
    right: 3.4vw;
    bottom: 31vw;            /* 퀵바(약 29vw) 위로 띄운다 */
    width: 9vw;
    height: 16.7vw;
    padding-bottom: 2.9vw;
    border-radius: 4.5vw;    /* = 폭의 절반 (세로로 긴 pill) */
  }

  .top_btn_img {
    width: 4.5vw;
  }

  /* ── 햄버거 (모바일) ──
     ★ common.css 의 @keyframes line-top/-bot 은 ±13px 를 하드코딩해 X 를 만든다.
       그런데 실제 줄 간격은 margin 에서 나오는 값(0.7vw ≈ 2.6px → 간격 7.25px)이라
       13px 을 이동하면 두 팔이 서로를 지나쳐 '<' 모양이 된다.
       → 이동거리로 만들지 않고 **좌표(컨테이너 세로중앙)** 로 만든다.
         줄 3개를 항상 절대배치해 두고 transform 만 바꾸므로 간격을 어떻게 조절해도 X 가 안 틀어지고,
         열기/닫기 모두 transition 으로 부드럽게 간다.
     ※ 이 방식에서 닫힘 줄 간격을 조절하는 값은 .line 의 margin 이 아니라 아래 ±1.93vw 다. */
  .hamburger-menu {
    position: relative;
  }

  #line-top,
  #line-mid,
  #line-bot {
    position: absolute;
    left: 0;
    top: 50%;
    margin: 0;
    animation: none !important;
    transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.2s ease;
  }

  #line-top {
    transform: translateY(-50%) translateY(-1.93vw);
  }

  #line-mid {
    transform: translateY(-50%);
  }

  #line-bot {
    transform: translateY(-50%) translateY(1.93vw);
  }

  /* 열림 = X. 검정 드로어(#000) 위에 겹치므로 흰색으로 바꾼다(.line 기본색 #151515 는 묻힌다) */
  .line.on {
    background-color: #ffffff;
  }

  .line.on#line-top {
    transform: translateY(-50%) rotate(45deg);
  }

  .line.on#line-mid {
    opacity: 0;
  }

  .line.on#line-bot {
    transform: translateY(-50%) rotate(-45deg);
  }
}