@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;
  /* .header 는 position:fixed 라 흐름에서 빠진다 → 그 높이만큼 본문을 내려야
     시안(헤더 흰 띠 y0~99, main 시작 y100)과 맞는다. 값은 .header height 와 동일. */
  padding-top: calc(var(--px) * 100);
}

/* 레거시 admin 드롭다운(ul.admin_head) 전용 스타일 삭제 —
   마크업이 프로젝트 어디에도 없고(0건), element 셀렉터라 헤더 안 링크를 덮어쓰고 있었다. */

header img {
  width: 100%;
}

header.drop {
  position: fixed;
}

header.insert {
  position: fixed;
  /* 헤더 높이 100 / 1905 * 100 = 5.2493 → 헤더가 완전히 화면 밖으로 나가는 값 */
  top: -5.3vw;
}

/* ═══════════════════════ HEADER ═══════════════════════
   구조: header.header > a.header_logo > img
   시안(psd/한빛컴퍼니.jpg y0~99)에 GNB·전화CTA·햄버거가 없어 로고 1개만 둔다.
   padding-top 7 = 시안 로고가 바 정중앙보다 3.5px 아래에 있어서 (P/2 = 3.5)
   plan: .planning/header/plan.md
   ═══════════════════════════════════════════════════════ */
.header img {
  width: 100%;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 100);
  /* Pretendard 는 style.css 의 section{} 으로만 카스케이드된다 — 이 요소는 section 밖이라
     상속을 못 받고 그누보드 default.css 의 맑은고딕으로 떨어진다 → 여기서 직접 지정 */
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  letter-spacing: -0.04vw;
  background-color: #ffffff;
  /* 아래 섹션과 겹칠 때 경계가 서도록 — 시안 outerGlow(#000 5.88%) 와 같은 톤, 방향만 아래로 */
  box-shadow: 0 calc(var(--px) * 4) calc(var(--px) * 16) rgba(0, 0, 0, 0.08);
  transition-duration: 0.3s;
  transition-property: top;
}

.header_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 74);
  aspect-ratio: 74 / 43;
}

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

/* ═══════════════ 게시판 바로가기 (레벨 10 이상 전용) ═══════════════
   마크업은 theme/design/template/header/index.html — g5_board 를 읽어 자동 생성.
   헤더(.header height calc(--px*100)) 바로 아래 우측에 fixed. z-index 는 헤더보다 1 낮게.
   ★ 폰트: Pretendard 는 글로벌 section{} 으로만 카스케이드되는데 이 위젯은 section 밖이라
     상속을 못 받는다 → 여기서 직접 지정한다. */
.hd_boards {
  position: fixed;
  right: calc(var(--px) * 24);
  top: calc(var(--px) * 114);
  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;
  }
  header.drop {
    position: fixed;
    animation: none;
    transition: none;
  }
  /* -------------------header 커스텀 시작------------------- */
  /* ★ .header(클래스) 가 header(엘리먼트)보다 우선이라, PC 의 height 가
     모바일에서 그대로 남아 헤더가 찌부된다 → 클래스로 다시 잡는다 */
  .header {
    position: fixed;
    left: 0;
    top: 0;
    justify-content: center;
    align-items: center;
    height: 15vw;
    padding-top: 1vw;
    font-size: 4.5vw;
    background: #fff;
    transform: translateX(0);
    width: 100%;
    box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.08);
    transition: none;
  }

  /* PC 스크롤 숨김 클래스가 붙은 채 모바일로 전환돼도 15vw 헤더를 상단에 고정한다. */
  header.header.insert,
  header.header.drop {
    top: 0;
    transition: none;
  }

  /* 모바일 헤더 높이(15vw) 만큼 본문 오프셋 — PC 값(--px*100) 을 덮는다 */
  #content_wrap {
    padding-top: 15vw;
  }

  .header_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12vw;
    aspect-ratio: 74 / 43;
  }
  /* ※ TOP 버튼(.top_btn*) 모바일 값은 파일 맨 끝 미디어쿼리에 둔다 —
     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";
}

/* ═══════════════════════ TOP 버튼 (fixed · z-index = .header 와 동일 9999) ═══════════════════════
   마크업은 theme/design/template/header/index.html 하단. 모바일 값은 이 파일 맨 끝 미디어쿼리
   시안: 하단 상담바(.contact_service) 우측 끝의 진한핑크 블록 — 바와 같은 높이 80.
   사용자 지시에 따라 바 높이와 같은 80×80 정사각형
   plan: .planning/quick/plan.md */
.top_btn {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 80);
  height: calc(var(--px) * 80);
  padding-left: 0;
  background-color: #C5006B;
  /* .contact_service 와 같은 값 — 바 그림자가 우측 끝에서 끊기지 않게 */
  box-shadow: 0 calc(var(--px) * -4) calc(var(--px) * 16) rgba(0, 0, 0, 0.08);
}

.top_btn img {
  width: 100%;
}

.top_btn_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 20);
  aspect-ratio: 20 / 25;
}

/* ── 모바일 (파일 끝 단일 블록 — PC 정의보다 뒤여야 이긴다) ── */
@media screen and (max-width: 599px) {
  .main_small_title {
    font-size: 3.1vw;
    line-height: 4.7vw;
  }

  /* 모바일 퀵바는 입력 기능만 남긴다 — TOP 버튼은 모바일_퀵바.md 정본에 따라 숨김. */
  .top_btn {
    display: none;
  }
}