@charset "UTF-8";

#content_wrap {
  padding-bottom: 0% !important;
}

/* 레거시 admin 드롭다운(ul.admin_head) 전용 스타일 삭제 —
   마크업이 프로젝트 어디에도 없고(0건), element 셀렉터라 신규 nav.header_menu > ul > li > a
   를 덮어써 메뉴에 빨간 3px 테두리·uppercase·float 이 걸리고 있었다. */

/* ═══════════════ 헤더 치수 토큰 ═══════════════
   ★ 헤더 높이(--hd-h)를 바꾸면 .insert 숨김 델타(--hd-hide)가 자동으로 따라간다.
     델타는 헤더 높이만으로 부족하다 — 게시판 위젯이 헤더 아래로 빠져나와 있어
     그 간격·버튼높이·그림자까지 빼야 관리자 화면에서 버튼이 안 남는다. */
:root {
  --hd-h: calc(var(--px) * 90);
  --hd-boards-gap: calc(var(--px) * 12);
  --hd-boards-btn-h: calc(var(--px) * 36);
  --hd-boards-shadow: calc(var(--px) * 12);
  --hd-hide: calc(var(--hd-h) + var(--hd-boards-gap) + var(--hd-boards-btn-h) + var(--hd-boards-shadow));
}

@media screen and (max-width: 599px) {
  :root {
    --hd-h: 15vw;
    --hd-boards-gap: 3vw;
    --hd-boards-btn-h: 8vw;
    --hd-boards-shadow: 3vw;
  }
}

/* 사이트 헤더는 .header 로만 잡는다 — header{} 는 본문의 시맨틱 <header> 까지 잡아 스크롤 시 fixed 로 날린다 */
.header.drop {
  position: fixed;
}

.header.insert {
  --hd-boards-top: calc(var(--hd-hide) + var(--px) * 12);
  position: fixed;
  top: calc(-1 * var(--hd-hide));
}

/* ═══════════════════════ HEADER (기본 형태) ═══════════════════════
   구조: header.header > a.header_logo + nav.header_menu(.header_panel + ul > li > a + ul.header_sub_list) + a.header_call
   상태: 기본 = 흰 바탕 · .header_over = 히어로 위 투명 · .header_open = 메뉴 호버(메가패널 노출 · 메뉴 간격 확대)
   ═══════════════════════════════════════════════════════════════ */
.header img {
  width: 100%;
}

.header {
  /* 상태별 스킨은 변수만 갈아끼운다 — 기본값이 흰 바탕이라 모바일은 상태 클래스 없이 흰 바탕이다 */
  --hd-bg: var(--bg-color);
  --hd-fg: var(--tertiary);
  --hd-menu-gap: calc(var(--px) * 62);
  --hd-logo-light: 0;
  --hd-logo-dark: 1;
  --hd-call-bg: var(--primary);
  --hd-call-line: var(--primary);
  --hd-call-fg: var(--tertiary);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--hd-h);
  padding: 0 calc(var(--px) * 116) 0 calc(var(--px) * 112);
  letter-spacing: -0.04vw;
  background-color: var(--hd-bg);
  transition-duration: 0.3s;
  transition-property: top, background-color;
}

.header.header_over {
  --hd-bg: transparent;
  --hd-fg: var(--bg-color);
  --hd-logo-light: 1;
  --hd-logo-dark: 0;
  --hd-call-bg: transparent;
  --hd-call-line: var(--bg-color);
  --hd-call-fg: var(--bg-color);
}

.header.header_open {
  --hd-menu-gap: calc(var(--px) * 72);
}

.header_logo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: start;
  margin-top: calc(var(--px) * 15);
  width: calc(var(--px) * 175);
  aspect-ratio: 175 / 45;
}

.header_logo_light,
.header_logo_dark {
  transition: opacity 0.3s;
}

.header_logo_light {
  opacity: var(--hd-logo-light);
}

.header_logo_dark {
  position: absolute;
  left: 0;
  top: 0;
  opacity: var(--hd-logo-dark);
}

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

.header_menu_list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--hd-menu-gap);
  transition: gap 0.3s;
}

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

.header_menu_1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--hd-h);
  padding-top: calc(var(--px) * 10);
  font-size: var(--bodyM);
  font-weight: 500;
  color: var(--hd-fg);
  white-space: nowrap;
  transition: color 0.3s;
}

/* 호버 밑줄 — 헤더 하단에 붙는 라임 바 */
.header_menu_1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--px) * 5);
  background-color: var(--primary);
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.header_menu_item:hover .header_menu_1::after,
.header_menu_item.is-current .header_menu_1::after {
  transform: scaleX(1);
}

/* 메가패널 흰 판 — 메뉴 컬럼 뒤에 깔린다. 닫힘은 opacity/visibility (display 로 끄면 transition 이 안 걸린다) */
.header_panel {
  position: absolute;
  left: 0;
  right: calc(var(--px) * 5);
  top: calc(100% + var(--px) * 12);
  margin-inline: auto;
  width: calc(var(--px) * 990);
  height: calc(var(--px) * 207);
  background-color: var(--bg-color);
  border-radius: calc(var(--px) * 30);
  box-shadow: 0 calc(var(--px) * 10) calc(var(--px) * 30) rgb(0 0 0 / 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s, visibility 0.25s;
}

/* 헤더 바닥과 판 사이 12px 틈 — 포인터가 이 틈을 지날 때 호버가 끊기지 않게 판이 받아준다 */
.header_panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--px) * 12);
}

.header_sub_list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--px) * 26);
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s, visibility 0.25s;
}

/* 열림 — js/header.js 가 .header 에 .header_open 토글 */
.header.header_open .header_panel,
.header.header_open .header_sub_list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.header_sub_link {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-width: calc(var(--px) * 114);
  height: calc(var(--px) * 33);
  padding: 0 calc(var(--px) * 20);
  font-size: calc(var(--px) * 16);
  font-weight: 400;
  color: color-mix(in srgb, var(--tertiary) 85%, var(--bg-color));
  white-space: nowrap;
  border-radius: 50vw;
  transition: background-color 0.2s, color 0.2s;
}

.header_sub_link:hover {
  color: var(--tertiary);
  background-color: var(--primary);
}

/* 우측 전화 CTA — 투명 상태 = 흰 외곽선 알약 · 흰 바탕 상태 = 라임 알약 */
.header_call {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  justify-self: end;
  gap: calc(var(--px) * 10);
  margin-top: calc(var(--px) * 9);
  box-sizing: border-box;
  height: calc(var(--px) * 47);
  padding: 0 calc(var(--px) * 19) 0 calc(var(--px) * 16);
  color: var(--hd-call-fg);
  background-color: var(--hd-call-bg);
  border: 1px solid var(--hd-call-line);
  border-radius: 50vw;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

@media (hover: hover) {
  .header_call:hover {
    --hd-call-bg: var(--primary);
    --hd-call-line: var(--primary);
    --hd-call-fg: var(--bg-color);
  }
}

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

.header_call_num {
  font-size: calc(var(--px) * 19);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

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

/* ═══════════════ 게시판 바로가기 (레벨 10 이상 전용) ═══════════════
   마크업은 theme/design/template/header/index.html 의 header 안 — g5_board 를 읽어 자동 생성.
   .header 자식 absolute — 헤더가 .insert/.drop 으로 상하 이동할 때 같이 따라간다.
   ★ 폰트: Pretendard 는 글로벌 section{} 으로만 카스케이드되는데 이 위젯은 section 밖이라
     상속을 못 받는다 → 여기서 직접 지정한다. */
/* vweb 어드민 컬러 — 이 위젯 전용이라 전역 :root 가 아니라 여기 스코프에 둔다 */
.hd_boards {
  --adminH-text: #ffffff;
  --adminH-text--hover: #3235cd;
  --adminH-bgColor: rgba(50, 53, 205, 0.8);
  --adminH-bgColor--hover: rgba(255, 255, 255, 0.8);
  --adminH-outline: rgba(50, 53, 205, 0.3);
  --adminH-danger: #d92c2c;
  --vWebColor: #3235cd;
  /* 닫힘 상태에도 .hd_boards_list 가 흐름에 남아 박스가 세로로 길다 — 컨테이너는 히트테스트에서 뺀다 */
  pointer-events: none;
  position: absolute;
  right: calc(var(--px) * 24);
  top: var(--hd-boards-top, calc(100% + var(--hd-boards-gap)));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  letter-spacing: -0.02vw;
  transition: top 0.3s;
}

.hd_boards_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 8);
  box-sizing: border-box;
  height: var(--hd-boards-btn-h);
  padding: 0 calc(var(--px) * 15);
  font-family: inherit;
  font-size: calc(var(--px) * 14);
  font-weight: 700;
  color: var(--adminH-text);
  white-space: nowrap;
  background-color: var(--adminH-bgColor);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: calc(var(--px) * 18);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hd_boards_btn:hover,
.hd_boards.is_open .hd_boards_btn {
  color: var(--adminH-text--hover);
  background-color: var(--adminH-bgColor--hover);
  box-shadow: 0 0 0 1px var(--adminH-outline);
  transform: translateY(-1px);
}

/* adm 알약 — 버튼 반전(hover·열림) 시 배경/글씨도 같이 뒤집힌다 */
.hd_boards_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: calc(var(--px) * 18);
  padding: 0 calc(var(--px) * 7);
  font-size: calc(var(--px) * 11);
  font-weight: 700;
  line-height: 1;
  color: var(--vWebColor);
  text-transform: uppercase;
  background-color: #ffffff;
  border-radius: 50vw;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hd_boards_btn:hover .hd_boards_badge,
.hd_boards.is_open .hd_boards_badge {
  color: var(--adminH-text);
  background-color: var(--vWebColor);
}

/* 셰브론 — 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);
}

/* 목록 래퍼 — 닫히면 높이 0 이라 뒤에 붙는 수정모드 버튼(js/site_text_editor.js)이 버튼 바로 아래 온다.
   열리면 목록 실측 높이(--hd-drop-h, js/header.js)로 목록과 같은 시간·곡선으로 펴진다 */
.hd_boards_drop {
  height: 0;
  min-height: 0;
  transition: height 0.22s cubic-bezier(0.22, 1, 0.36, 1) 0.14s; /* 닫힘 — 목록이 거의 사라진 뒤 버튼이 올라온다 */
}

.hd_boards.is_open .hd_boards_drop {
  height: var(--hd-drop-h, auto);
  transition-delay: 0s;
}

/* 닫힘 상태 — 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: var(--adminH-bgColor--hover);
  backdrop-filter: blur(6px);
  border: 1px solid var(--adminH-outline);
  border-radius: calc(var(--px) * 12);
  box-shadow: 0 8px 24px rgba(50, 53, 205, 0.18);
  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: var(--vWebColor);
  white-space: nowrap;
  border-radius: calc(var(--px) * 8);
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.hd_boards_link:hover {
  color: var(--adminH-text);
  background-color: var(--vWebColor);
  box-shadow: 0 0 0 1px var(--adminH-outline);
}

/* 대시보드 · 로그아웃 — 게시판 목록과 성격이 달라 구분선으로 떼고 한 줄에 3:1 로 나눈다 */
.hd_boards_foot {
  gap: calc(var(--px) * 4);
  margin-top: calc(var(--px) * 5);
  padding-top: calc(var(--px) * 5);
  border-top: 1px solid var(--adminH-outline);
}

/* 로그아웃이 고정폭이라 대시보드는 남은 폭을 전부 받는다. min-width:auto(=min-content)를 안 풀면 텍스트 폭이 하한이 되고, 가운데 정렬이라 좌우 padding 도 필요 없다 */
.hd_boards_link--adm {
  flex: 1;
  justify-content: center;
  min-width: 0;
  padding: 0;
  font-weight: 700;
}

/* 아이콘만 있는 칸이라 정사각형이어야 한다 — width:100%(공통 .hd_boards_link)를 풀어야 aspect-ratio 가 산다 */
.hd_boards_link--out {
  flex: 0 0 auto;
  justify-content: center;
  width: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
}

/* 로그아웃만 위험 동작이라 hover 를 목록(파랑)과 다른 붉은색으로 뗀다 */
.hd_boards_link--out:hover {
  background-color: var(--adminH-danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--adminH-danger) 35%, transparent);
}

/* 나가는 방향이 오른쪽을 향해야 로그아웃으로 읽힌다 */
.hd_boards_link--out svg {
  width: calc(var(--px) * 16);
  height: calc(var(--px) * 16);
  transform: scaleX(-1);
}

@media screen and (max-width: 599px) {
  .hd_boards {
    right: 4vw;
  }
  .hd_boards_btn {
    gap: 1.6vw;
    padding: 0 3.4vw;
    font-size: 3.2vw;
    border-radius: 4vw;
  }
  .hd_boards_badge {
    height: 4.4vw;
    padding: 0 1.6vw;
    font-size: 2.5vw;
  }
  .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;
  }
  .hd_boards_link--adm {
    margin-top: 1vw;
    border-radius: 0 0 2vw 2vw;
  }
}


/* ═══════════════ 모바일 헤더 — 로고 · 전화 아이콘 · 햄버거 + 오른쪽 드로어 ═══════════════ */
@media screen and (max-width: 599px) {
  .pc-mobile {
    display: none !important;
  }
  .mobile-pc {
    display: flex !important;
  }

  /* 높이는 위 :root 의 --hd-h 가 모바일 값으로 재정의돼 자동으로 따라온다 · 배경은 기본 스킨(--hd-bg) 그대로 */
  .header {
    display: flex;
    justify-content: flex-start;
    gap: 2.1333vw;
    padding: 0 4.2667vw 0 5.3333vw;
  }

  .header_logo {
    margin-top: 0;
    width: 28vw;
  }

  /* 전화 CTA — 모바일은 번호(.pc-inline)를 접고 아이콘 원형 버튼만 남긴다 */
  .header_call {
    justify-content: center;
    gap: 0;
    margin-top: 0;
    margin-left: auto;
    width: 9.6vw;
    height: 9.6vw;
    padding: 0;
  }

  .header_call_icon {
    width: 4.8vw;
  }

  /* 햄버거 — 드로어보다 DOM 뒤 + relative 라 열린 드로어 위에 그려진다 */
  .hamburger {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 9.6vw;
    height: 9.6vw;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .hamburger-menu {
    position: relative;
    display: block;
    width: 6.4vw;
    height: 4.2667vw;
  }

  .hamburger .line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--hd-fg);
    transform-origin: center;
    transition: top 0.3s, bottom 0.3s, transform 0.3s, opacity 0.3s, background-color 0.3s;
  }

  .top-reverse {
    top: 0;
  }

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

  .bot-reverse {
    bottom: 0;
  }

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

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

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

  .hamburger .line_change {
    background-color: var(--bg-color);
  }

  /* 모바일 메뉴 = 오른쪽에서 밀려 들어오는 드로어. 열림 상태는 .header_menu_drop (js/header.js) */
  .header_menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    width: 64vw;
    padding: 21.3333vw 6.4vw 8.5333vw;
    overflow-y: auto;
    background-color: var(--tertiary);
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.3s, visibility 0.3s;
  }

  .header_menu.header_menu_drop {
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

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

  .header_menu_item {
    justify-content: flex-start;
    border-bottom: 1px solid color-mix(in srgb, var(--bg-color) 12%, transparent);
  }

  .header_menu_1 {
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 4.2667vw 0;
    font-size: var(--headM);
    color: var(--bg-color);
  }

  .header_menu_1:active,
  .header_menu_item.is-current .header_menu_1 {
    color: var(--primary);
  }

  /* PC 호버 밑줄 — 드로어엔 호버가 없고 탭 후 :hover 잔상만 남는다 */
  .header_menu_1::after {
    content: none;
  }

  /* 드로어 뒤 딤 — .header(z-index:9999) 밖에 두어 헤더·드로어보다 한 층 아래로 깔린다 */
  .header_dim {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background-color: rgb(0 0 0 / 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, backdrop-filter 0.3s;
  }

  .header_dim.is_open {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(4px);
  }
  /* ※ TOP 버튼(.top_btn*) 모바일 값은 PC 정의 뒤 @media 에 둔다 — PC 정의가 이 미디어쿼리보다 아래라 여기 쓰면 덮어써진다 */
}

#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 하단. 모바일 값이 필요하면 이 파일 PC 정의 뒤 @media 에 둔다 */
.top_btn {
  position: fixed;
  right: calc(var(--px) * 42);
  bottom: calc(var(--px) * 42);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(var(--px) * 2);
  width: calc(var(--px) * 64);
  aspect-ratio: 1;
  color: #ffffff;
  background-color: var(--tertiary);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 50%;
  box-shadow: 0 calc(var(--px) * 8) calc(var(--px) * 24) color-mix(in srgb, var(--tertiary) 25%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--px) * 12));
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, color 0.3s, background-color 0.3s;
}

/* 스크롤 300px 이후 header.js 가 붙인다 */
.top_btn.is-show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.top_btn:hover {
  color: var(--tertiary);
  background-color: var(--primary);
}

.top_btn_icon {
  width: calc(var(--px) * 20);
  aspect-ratio: 1;
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s, transform 0.3s;
}

.top_btn:hover .top_btn_icon {
  stroke: currentColor;
  transform: translateY(calc(var(--px) * -2));
}

.top_btn_txt {
  font-size: calc(var(--px) * 12);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

@media (max-width: 599px) {
  .top_btn {
    right: 4.2667vw;
    bottom: 4.2667vw;
    gap: 0.5333vw;
    width: 12.8vw;
    transform: translateY(2.6667vw);
  }

  .top_btn_icon {
    width: 4.2667vw;
  }

  .top_btn_txt {
    font-size: 2.6667vw;
  }
}