@charset "UTF-8";

/* 헤더 높이 — ★ 헤더 높이는 여기(--hd-h)에서만 바꾼다.
   .header 와 .hd_boards(게시판 바로가기) 가 같이 이 값을 읽는다. .header { height } 를 직접
   고치면 바로가기가 헤더 높이를 따라오지 못해 헤더 밑에 깔린다(실제로 어화락·국밥생각에서
   헤더만 키워서 바로가기가 가려졌다). */
:root {
  --hd-h: calc(var(--px) * 86);
}

@media screen and (max-width: 599px) {
  :root {
    --hd-h: 15vw;
  }
}

#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{})를 쓰지 않는다 — 본문에서 시맨틱하게 쓴 <header> 까지 잡힌다.
   섹션 안에 <header> 를 하나 넣었을 뿐인데 스크롤 시 position:fixed·top:-5vw 가 걸려
   요소가 화면 밖으로 날아가는 사고가 여기서 났다. 사이트 헤더는 항상 .header 로만 잡는다.
   (js/header.js 의 $(".header") 와 짝이다 — 한쪽만 바꾸면 drop/insert 가 안 걸린다) */
.header.drop {
  position: fixed;
}

.header.insert {
  position: fixed;
  top: -5vw;
}

/* ═══════════════════════ HEADER (기본 형태) ═══════════════════════
   구조: header.header > a.header_logo + nav.header_menu > ul > li > a + .hamburger
   프로젝트마다 바꾸는 값 = 로고 이미지 자연사이즈(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: var(--hd-h); /* ★ 값은 :root --hd-h 에서 바꾼다 */
  font-family: "Pretendard Variable", Pretendard, sans-serif; /* section 밖이라 광역 카스케이드를 못 받는다 (.hd_boards 와 같은 사유) */
  letter-spacing: -0.04vw;
  background-color: #1d1a19;
  border-bottom: 1px solid #4a4847;
  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) * 153);
  aspect-ratio: 153 / 41;
}

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

.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 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  letter-spacing: -0.05vw;
  color: #ffffff;
  white-space: nowrap;
  transition: font-weight 0.3s, color 0.3s;
}

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

/* 헤더 메뉴 Fade 이동 가림막 — 헤더(9999)·퀵바(2000)보다 위, 팝업/로더보다 아래. 색 = 헤더 배경 */
.header_transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #1d1a19;
  opacity: 0;
}

.header_transition[hidden] {
  display: none;
}

/* 모바일 드로어 딤 — PC 에는 존재하지 않는다. 모바일 미디어쿼리에서만 켠다 */
.header_dim {
  display: none;
}

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

/* ═══════════════ 게시판 바로가기 (레벨 10 이상 전용) ═══════════════
   마크업은 theme/design/template/header/index.html — g5_board 를 읽어 자동 생성.
   헤더 바로 아래 우측에 fixed. top 은 헤더 높이(--hd-h) + 여백 24 로 계산해서, 헤더를 키워도
   따라 내려간다(고정값으로 두면 헤더가 커진 프로젝트에서 헤더에 가려진다).
   z-index 는 헤더보다 1 낮게 — 겹치는 상황이 오면 헤더가 이긴다.
   ★ 폰트: Pretendard 는 글로벌 section{} 으로만 카스케이드되는데 이 위젯은 section 밖이라
     상속을 못 받는다 → 여기서 직접 지정한다. */
.hd_boards {
  position: fixed;
  right: calc(var(--px) * 24);
  top: calc(var(--hd-h) + var(--px) * 24);
  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 이 안 걸리므로 opacity/visibility 로 감춘다.
   ★ 단, 반드시 position:absolute 로 **흐름에서도 빼야 한다.** 시각만 감추면 접힌 상태에서도
     리스트 높이만큼 .hd_boards 박스가 남아(실측 178×238) 그 아래 콘텐츠의 클릭을 먹는다.
     리스트에 pointer-events:none 이 있어도 컨테이너에는 없어서 컨테이너가 받는다.
     부모 .hd_boards 가 position:fixed 라 그게 containing block 이 된다. */
.hd_boards_list {
  position: absolute;
  top: 100%;
  right: 0;
  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;
}

/* 관리자페이지 — 목록 맨 위에 고정. 구분선은 별도 요소 없이 이 링크의 border-bottom 으로 낸다
   (요소를 하나 더 넣으면 flex 항목이 늘어 목록 여백 계산이 흐트러진다) */
.hd_boards_adm {
  font-weight: 700;
  border-bottom: 1px solid #e5e6ec;
  border-radius: calc(var(--px) * 8) calc(var(--px) * 8) 0 0;
}

@media screen and (max-width: 599px) {
  .hd_boards {
    right: 4vw;
    top: calc(var(--hd-h) + 5vw);
  }
  .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;
  }
  /* -------------------header 커스텀 시작-------------------
     모바일 헤더 = 로고(좌) · 햄버거(우). 높이는 :root --hd-h(15vw) 하나로 PC 규칙을 그대로 따른다.
     햄버거를 누르면 헤더 아래로 드롭다운이 슬라이드로 펼쳐지고(.header_menu_drop), 뒤 콘텐츠는 딤+블러(.header_dim).
     ★ .header 에 transform 을 두지 말 것 — 자식 .header_menu(fixed)의 기준이 뷰포트에서 헤더로 바뀌어 드롭다운 위치가 틀어진다. */
  .header {
    transition: none;
  }

  .header_logo {
    width: 30vw;
    margin-left: 5vw;
  }

  /* 햄버거 — 헤더 flex 흐름에서 세로 가운데. 터치 영역은 ::before 로 확장(44px 이상) */
  .hamburger {
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 5vw;
  }

  .hamburger-menu {
    position: relative;
    width: 7vw;
    height: 4vw;
    cursor: pointer;
  }

  .hamburger-menu::before {
    content: "";
    position: absolute;
    top: -4vw;
    right: -5vw;
    bottom: -4vw;
    left: -5vw;
  }

  .hamburger-menu .line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ffffff;
    transition: all 0.3s ease;
    transform-origin: center;
  }

  /* 가운데 라인만 포인트색 */
  .hamburger-menu .line.mid-reverse {
    background: var(--color-point);
  }

  .top-reverse {
    top: 0;
  }

  .mid-reverse {
    top: 50%;
    transform: translateY(-50%);
  }

  .bot-reverse {
    bottom: 0;
  }

  /* 열림 = 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);
  }

  /* 드롭다운 — 헤더 바로 아래에 fixed, max-height 로 위→아래 슬라이드. 닫힘 상태는 visibility 까지 꺼서 탭 포커스가 안 들어가게 한다 */
  .header_menu {
    position: fixed;
    top: var(--hd-h);
    left: 0;
    right: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
    max-height: 0;
    overflow: hidden;
    background-color: #1d1a19;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s;
  }

  /* 펼침 — 항목이 화면보다 많으면 안에서 스크롤 */
  .header_menu.header_menu_drop {
    max-height: calc(100vh - var(--hd-h));
    max-height: calc(100dvh - var(--hd-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 3vw 6vw rgba(0, 0, 0, 0.35);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0s;
  }

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

  .header_menu_item {
    justify-content: flex-start;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* 항목 높이 = 4.2vw*1.4 + 4.5vw*2 ≈ 14.9vw (터치 영역 ≥ 44px) */
  .header_menu_1 {
    justify-content: flex-start;
    width: 100%;
    padding: 4.5vw 6vw;
    font-size: 4.2vw;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    transition: background-color 0.2s, color 0.2s;
  }

  /* 모바일엔 실제 호버가 없고, 스크롤 스파이(.remote_on)가 첫 항목을 미리 칠해 두는 것도 막는다.
     → 항목은 기본색을 유지하고 탭한 항목만 강조(아래 :active) */
  .header_menu_1:hover,
  .header_menu_1.remote_on {
    font-weight: 600;
    color: #ffffff;
  }

  /* 탭한 항목만 포인트색 배경 — 포인트(#eccc79)가 밝아서 글자는 헤더색으로 */
  .header_menu_1:active {
    background-color: var(--color-point);
    color: #1d1a19;
  }

  /* 드롭다운이 열리면 뒤 콘텐츠만 어둡게+블러. display 를 토글하지 않고 opacity/pointer-events 로만 껐다 켠다(트랜지션) */
  .header_dim {
    position: fixed;
    top: 0;
    left: 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;
  }
}