@charset "utf-8";

/* ==========================================================================
   공통 컴포넌트 — 2개 이상 페이지에서 공유하는 컴포넌트
   (GNB, footer, 버튼, 탭 등)
   ========================================================================== */

/* ==========================================================================
   페이지 공통 배경 (투자정보 / 미디어 / 고객지원 / 지속가능경영 / 상세 페이지)
   ========================================================================== */
.page-bg { background-repeat: no-repeat; background-position: center top; background-size: 100% auto; }
.page-bg--inv    { background-image: url("../images/inv-page-bg.png"); }
.page-bg--med    { background-image: url("../images/news-page-bg.png"); }
.page-bg--cus    { background-image: url("../images/cs-page-bg.png"); }
.page-bg--sus    { background-image: url("../images/sus-page-bg.png"); background-color: #f3f3f3; }
.page-bg--rec    { background-image: url("../images/rec-page-bg.jpg"); background-color: #f0f0f0; }
.page-bg--pro    { background-image: url("../images/product-page-bg.png"); }
.page-bg--detail { background-image: url("../images/detail-page-bg.png"); background-color: #f9f9f9; }

@media (max-width: 1024px) {
  .page-bg--inv,
  .page-bg--med,
  .page-bg--cus { background-size: auto; }
}

   /*******************************************
 * Font
 *******************************************/
/* English */
.f-en-d1-b { font-size: 140rem; line-height: 100%; font-family: var(--font-family-eng); text-transform: uppercase; font-weight: 700; }
.f-en-d1 { font-size: 120rem; line-height: 110%; font-family: var(--font-family-eng); text-transform: uppercase; font-weight: 700; }
.f-en-t1 { font-size: 96rem;  line-height: 110%; font-family: var(--font-family-eng); text-transform: uppercase; font-weight: var(--fw-semibold); }
.f-en-h1 { font-size: 80rem;  line-height: 110%; font-family: var(--font-family-eng); text-transform: uppercase; font-weight: var(--fw-semibold); }
.f-en-h2 { font-size: 64rem;  line-height: 110%; font-family: var(--font-family-eng); text-transform: uppercase; font-weight: var(--fw-semibold); }
.f-en-h3 { font-size: 44rem;  line-height: 110%; font-family: var(--font-family-eng); text-transform: uppercase; font-weight: var(--fw-semibold); }

/* Korean ─ Display */
.f-d1 { font-size: 140rem; line-height: 130%; font-weight: 700; }
.f-d2 { font-size: 96rem;  line-height: 130%; font-weight: 700; }
.f-d3 { font-size: 88rem;  line-height: 130%; font-weight: 700; }
.f-d4 { font-size: 80rem;  line-height: 130%; font-weight: 700; }
.f-d5 { font-size: 72rem;  line-height: 130%; font-weight: 700; }

/* Korean ─ Title */
.f-t1 { font-size: 80rem; line-height: 130%; font-weight: var(--fw-semibold); }

/* Korean ─ Heading */
.f-h1 { font-size: 64rem; line-height: 120%; font-weight: var(--fw-semibold); }
.f-h1-sb { font-size: 60rem; line-height: 120%; font-weight: var(--fw-semibold); }
.f-h2 { font-size: 48rem; line-height: 120%; font-weight: var(--fw-semibold); }
.f-h3-sb { font-size: 44rem; line-height: 120%; font-weight: var(--fw-semibold); }
.f-h3 { font-size: 40rem; line-height: 130%; font-weight: var(--fw-semibold); }
.f-h4 { font-size: 32rem; line-height: 130%; font-weight: var(--fw-semibold); }
.f-h5 { font-size: 24rem; line-height: 130%; font-weight: var(--fw-semibold); }
.f-h6 { font-size: 20rem; line-height: 130%; font-weight: var(--fw-semibold); }

/* Korean ─ Body */
.f-b1 { font-size: 24rem; line-height: 140%; }
.f-b1-med { font-size: 22rem; line-height: 140%; }
.f-b2 { font-size: 20rem; line-height: 150%; }
.f-b3 { font-size: 18rem; line-height: 160%; }
.f-b4 { font-size: 16rem; line-height: 160%; }
.f-b5 { font-size: 14rem; line-height: 150%; }
.f-b6 { font-size: 12rem; line-height: 150%; }

/* Caption */
.f-cap-md { font-size: 14rem; line-height: 150%; }
.f-cap-sm { font-size: 12rem; line-height: 150%; }

/* Button */
.f-btn-l { font-size: 18rem; line-height: 120%; font-weight: var(--fw-semibold); }
.f-btn-m { font-size: 16rem; line-height: 120%; font-weight: var(--fw-semibold); }
.f-btn-s { font-size: 14rem; line-height: 120%; font-weight: var(--fw-semibold); }

/* Weight */
.fw-400 { font-weight: var(--fw-regular); }
.fw-500 { font-weight: var(--fw-medium); }
.fw-600 { font-weight: var(--fw-semibold); }
.fw-700 { font-weight: var(--fw-bold); }

@media (max-width: 1024px) {
  /* English */
  .f-en-d1-b { font-size: 68rem; }
  .f-en-d1 { font-size: 60rem; }
  .f-en-t1 { font-size: 56rem; }
  .f-en-h1 { font-size: 48rem; }
  .f-en-h2 { font-size: 40rem; }
  .f-en-h3 { font-size: 32rem; }

  /* Korean ─ Display */
  .f-d1 { font-size: 60rem; }
  .f-d2 { font-size: 56rem; }
  .f-d3 { font-size: 52rem; }
  .f-d4 { font-size: 48rem; }
  .f-d5 { font-size: 44rem; }

  /* Korean ─ Title */
  .f-t1 { font-size: 48rem; }

  /* Korean ─ Heading */
  .f-h1 { font-size: 40rem; }
  .f-h1-sb { font-size: 40rem; } 
  .f-h2 { font-size: 36rem; }
  .f-h3-sb { font-size: 32rem; }
  .f-h3 { font-size: 32rem; }
  .f-h4 { font-size: 28rem; }
  .f-h5 { font-size: 22rem; }
  .f-h6 { font-size: 20rem; }

  /* Korean ─ Body (Body/Caption/Button은 PC=MO 동일하여 미디어쿼리 불필요) */
  .f-b1 { font-size: 22rem; }
  .f-b1-med { font-size: 20rem; }
  .f-b2 { font-size: 16rem; }
}

/* body 스크롤 잠금 */
body.scl-lock { overflow: hidden; }

.scroll-motion {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1s ease, transform .6s ease;
}
.scroll-motion.active {
  opacity: 1;
  transform: translateY(0);
}

.bg-white { background: var(--bg-white); }

.mo-only { display: none; }

@media (max-width: 1024px) {
  .pc-only { display: none; }
  .mo-only { display: block; }
}

/* --------------------------------------------------------------------------
   GNB 컨테이너
   -------------------------------------------------------------------------- */
.gnb {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-gnb);
  height: 120rem;
  background: transparent;
  color: var(--text-white); 
  transition:
    background var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
  overflow: visible;  
  will-change: transform;
}

.gnb.is-hidden {
  transform: translateY(-100%);
}

.gnb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1000);
  height: 100%;
  width:calc(100% - 40rem);
  max-width: 1840rem;
  margin: 0 auto;
}

.gnb::before {
  content: "";
  position: absolute;
  top: 120rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 0;
  background: var(--bg-white);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-slow),
    visibility var(--transition-slow),
    height var(--transition-slow);
  z-index: -1;
  box-shadow: 0 1rem 0 var(--line-low);
}

/* hover/open 시 전체 배경 노출 — 데스크톱에서만 동작 (모바일 햄버거 메뉴와 충돌 방지) */
@media (min-width: 1025px) {
  .gnb:has(.gnb__menu:hover)::before,
  .gnb:has(.gnb__menu:focus-within)::before,
  .gnb.is-open::before {
    height: 244rem;
    opacity: 1;
    visibility: visible;
    border-top: 1rem solid #E8E8E8;
  }
}

/* --------------------------------------------------------------------------
   로고
   -------------------------------------------------------------------------- */

.gnb__logo {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.gnb__logo-img {
  display: block;
  width: 105rem;
  height: auto;
  transition: opacity var(--transition-base);
}

.gnb__logo-img--light {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   주 메뉴 (1뎁스)
   -------------------------------------------------------------------------- */

.gnb__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.gnb__menu {
  display: flex;
  align-items: stretch;
}

.gnb__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 101rem;
  transition:
    flex var(--transition-slow),
    min-width var(--transition-slow);
  transition-delay: 0.3s;
}

.gnb__item:hover .gnb__link {
  color: var(--color-blue-700);
}

.gnb__link {
  position: relative;
  display: flex; 
  align-items: center;
  justify-content: center;
  height: 120rem;
  padding: 0 var(--sp-200);
  font-family: var(--font-family-kor);
  font-size: 18rem;
  font-weight: var(--fw-bold);
  line-height: 1.6;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--transition-base),
    background var(--transition-base);
}

.gnb__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3rem;
  background: var(--bd-info);
  opacity: 0;
  transition: opacity var(--transition-base);
}

/* --------------------------------------------------------------------------
   2뎁스 (서브메뉴)
   ──────────────────────────────────────────────────────────────────────────
   · 컬럼 너비 = 부모 .gnb__item 너비 (열린 상태에서 균등 분포된 컬럼)
   · 기본 배경 = transparent (메뉴 전체 흰 배경에 자연스럽게 얹힘)
   · 활성 컬럼(.gnb__item:hover) 만 옅은 파랑 배경
   -------------------------------------------------------------------------- */

.gnb__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-100);
  padding: 0 var(--sp-500);
  background: transparent;
  border-left: 1px solid transparent;
  transition:
    height var(--transition-slow),
    padding var(--transition-slow),
    background var(--transition-slow),
    border-color var(--transition-slow);
}

.gnb__item:first-child .gnb__submenu {
  border-left: unset;
}

.gnb__sublink {
  display: inline-block;
  font-family: var(--font-family-kor);
  font-size: 16rem;
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: var(--text-high);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-base);
}

.gnb__sublink:hover,
.gnb__sublink:focus-visible,
.gnb__sublink--active {
  color: var(--text-point);
  font-weight: var(--fw-semibold);
  outline: none;
}

.gnb__util {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-400);
}

.gnb__lang {
  position: relative;
  z-index: 1;
}

.gnb__lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8rem;
  min-width: 108rem;
  height: 40rem;
  padding: 10rem 12rem;
  font-family: var(--font-family-kor);
  font-size: 14rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--rd-100);
  cursor: pointer;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}

.gnb__lang-arrow {
  flex-shrink: 0;
  width: 16rem;
  height: 16rem;
  color: inherit;
  transition: transform var(--transition-base);
}

.gnb__lang-btn[aria-expanded="true"] .gnb__lang-arrow {
  transform: rotate(180deg);
}

.gnb__lang-options {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4rem 0;
  padding-top: 38rem;
  background: var(--bg-white);
  border: 1px solid var(--line-low);
  border-radius: var(--rd-100);
  opacity: 0;
  transform: translateY(0);
  pointer-events: none;
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.gnb__lang-btn[aria-expanded="true"] + .gnb__lang-options {
  opacity: 1;
  transform: translateY(1rem);
  pointer-events: auto;
}

.gnb__lang-option {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 6rem 12rem;
  font-family: var(--font-family-kor);
  font-size: 14rem;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--text-highest);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-base);
}

.gnb__lang-option:hover,
.gnb__lang-option:focus-visible,
.gnb__lang-option.is-selected {
  background: var(--bg-secondary-light-2);
  outline: none;
}

/* --------------------------------------------------------------------------
   모바일 햄버거 메뉴 버튼
   -------------------------------------------------------------------------- */
.gnb__menu-btn {
  display: none;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40rem;
  height: 40rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
}

.gnb__menu-btn-icon {
  display: block;
  width: 24rem;
  height: 24rem;
  transition: opacity var(--transition-base);
}

.gnb__menu-btn-icon--light,
.gnb__menu-btn-icon--close {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.gnb__menu-btn:hover,
.gnb__menu-btn:focus-visible {
  outline: none;
}

/* ==========================================================================
   GNB Theme — Dark (이미지·어두운 배경 페이지용, 기본값)
   ========================================================================== */

.gnb--theme-dark,
.gnb:not(.gnb--theme-light) {
  color: var(--text-white);
}

.gnb--theme-dark .gnb__logo-img--dark,
.gnb:not(.gnb--theme-light) .gnb__logo-img--dark {
  opacity: 1;
}

.gnb--theme-dark .gnb__logo-img--light,
.gnb:not(.gnb--theme-light) .gnb__logo-img--light {
  opacity: 0;
}

.gnb--theme-dark .gnb__lang-btn,
.gnb:not(.gnb--theme-light) .gnb__lang-btn {
  color: var(--text-white);
  background: var(--color-gray-900);
  border-color: var(--color-gray-900);
}

/* 검정 배경 버튼에서는 화살표를 흰색으로 반전 */
.gnb--theme-dark .gnb__lang-arrow,
.gnb:not(.gnb--theme-light) .gnb__lang-arrow {
  filter: brightness(0) invert(1);
}

.gnb--theme-dark .gnb__menu-btn-icon--dark,
.gnb:not(.gnb--theme-light) .gnb__menu-btn-icon--dark {
  opacity: 1;
}

.gnb--theme-dark .gnb__menu-btn-icon--light,
.gnb:not(.gnb--theme-light) .gnb__menu-btn-icon--light {
  opacity: 0;
}

/* ==========================================================================
   GNB Theme — Light (흰 배경 페이지용)
   ========================================================================== */

.gnb--theme-light {
  color: var(--text-highest);
}

.gnb--theme-light .gnb__logo-img--dark {
  opacity: 0;
}

.gnb--theme-light .gnb__logo-img--light {
  opacity: 1;
}

.gnb--theme-light .gnb__lang-btn {
  color: var(--text-highest);
  background: var(--bg-white);
  border-color: var(--color-gray-100);
}

/* 햄버거 아이콘: 라이트 테마 = 검정(--light) 노출 */
.gnb--theme-light .gnb__menu-btn-icon--dark { opacity: 0; }
.gnb--theme-light .gnb__menu-btn-icon--light { opacity: 1; }

/* ==========================================================================
   GNB Hover / Open — 어떤 테마든 흰 배경 + 검정 글자 + 2뎁스 펼침
   ──────────────────────────────────────────────────────────────────────────
   · 색/배경 전환 = 헤더 어디든(.gnb:hover) — 좌우 양옆/lang 버튼 위에서도 동작
   · 2뎁스 펼침/1뎁스 간격 확장 = .gnb__menu 영역 호버에서만 동작
   · 드롭다운 열림 중에는 흰 상태 유지 (검정 lang 버튼에서 dropdown 열리는 경우 방지)
   ========================================================================== */

/* 데스크톱에서만 동작 — 모바일 햄버거 메뉴의 아코디언 규칙을 specificity로 덮어쓰지 않도록 스코프 */
@media (min-width: 1025px) {
  /* 헤더 어느 영역이든 호버 시 — 흰 배경 + 검정 글자 (lang 버튼 포함)
     · 키보드 접근성: :focus-within 대신 :has(:focus-visible)을 사용해
       마우스 클릭으로 인한 focus 잔존(드롭다운 닫힌 뒤에도 흰 상태 유지) 방지 */
  .gnb:hover,
  .gnb:has(:focus-visible),
  .gnb:has(.gnb__lang-btn[aria-expanded="true"]),
  .gnb.is-open {
    background: var(--bg-white);
    color: var(--text-highest);
    box-shadow: 0 1px 0 var(--line-low);
  }

  .gnb:hover .gnb__logo-img--dark,
  .gnb:has(:focus-visible) .gnb__logo-img--dark,
  .gnb:has(.gnb__lang-btn[aria-expanded="true"]) .gnb__logo-img--dark,
  .gnb.is-open .gnb__logo-img--dark {
    opacity: 0;
  }

  .gnb:hover .gnb__logo-img--light,
  .gnb:has(:focus-visible) .gnb__logo-img--light,
  .gnb:has(.gnb__lang-btn[aria-expanded="true"]) .gnb__logo-img--light,
  .gnb.is-open .gnb__logo-img--light {
    opacity: 1;
  }

  .gnb:hover .gnb__lang-btn,
  .gnb:has(:focus-visible) .gnb__lang-btn,
  .gnb:has(.gnb__lang-btn[aria-expanded="true"]) .gnb__lang-btn,
  .gnb.is-open .gnb__lang-btn {
    color: var(--text-highest);
    background: var(--bg-white);
    border-color: var(--color-gray-100);
  }

  /* 흰 배경 상태에서는 화살표 반전 해제 */
  .gnb:hover .gnb__lang-arrow,
  .gnb:has(:focus-visible) .gnb__lang-arrow,
  .gnb:has(.gnb__lang-btn[aria-expanded="true"]) .gnb__lang-arrow,
  .gnb.is-open .gnb__lang-arrow {
    filter: none;
  }

  /* 메뉴 영역 호버 시 — 추가로 높이 확장 + 1뎁스 간격 확장 + 2뎁스 펼침 */
  .gnb:has(.gnb__menu:hover),
  .gnb:has(.gnb__menu:focus-within),
  .gnb.is-open {
    height: auto;
  }

  .gnb:has(.gnb__menu:hover) .gnb__menu,
  .gnb:has(.gnb__menu:focus-within) .gnb__menu,
  .gnb.is-open .gnb__menu {
    gap: 0;
  }

  .gnb:has(.gnb__menu:hover) .gnb__item,
  .gnb:has(.gnb__menu:focus-within) .gnb__item,
  .gnb.is-open .gnb__item {
    flex: 1;
    min-width: 146rem;
    transition-delay: 0s;
  }

  .gnb:has(.gnb__menu:hover) .gnb__submenu,
  .gnb:has(.gnb__menu:focus-within) .gnb__submenu,
  .gnb.is-open .gnb__submenu {
    height: 244rem;
    padding: var(--sp-600) var(--sp-500);
    border-left-color: var(--line-low);
  }

  .gnb__item:hover .gnb__submenu,
  .gnb__item:focus-within .gnb__submenu {
    background: var(--bg-secondary-light-1);
  }

  .gnb__item:hover .gnb__link::after,
  .gnb__item:focus-within .gnb__link::after {
    opacity: 1;
  }
}

/* ==========================================================================
   GNB Solid — 스크롤 업으로 재등장 시 (호버와 동일한 색/배경만 적용)
   ──────────────────────────────────────────────────────────────────────────
   · 배경·글자·로고·lang 버튼 색만 흰 배경 테마로 전환
   · 호버와 달리 2뎁스 펼침, 1뎁스 간격 확장(::before, submenu, item flex)은
     적용하지 않는다 → 닫힌 상태 그대로 색만 바뀐다
   ========================================================================== */

.gnb.is-solid {
  background: var(--bg-white);
  color: var(--text-highest);
  box-shadow: 0 1px 0 var(--line-low);
}

.gnb.is-solid .gnb__logo-img--dark {
  opacity: 0;
}

.gnb.is-solid .gnb__logo-img--light {
  opacity: 1;
}

.gnb.is-solid .gnb__lang-btn {
  color: var(--text-highest);
  background: var(--bg-white);
  border-color: var(--color-gray-100);
}

/* 솔리드 상태에서는 화살표 반전 해제 */
.gnb.is-solid .gnb__lang-arrow {
  filter: none;
}

/* 흰 배경 솔리드 상태에서는 햄버거 아이콘도 검정(--light)으로 전환 */
.gnb.is-solid .gnb__menu-btn-icon--dark { opacity: 0; }
.gnb.is-solid .gnb__menu-btn-icon--light { opacity: 1; }

/* ==========================================================================
   GNB 바깥 클릭 방지용 백드롭 (호버 영역 확장)
   2뎁스 열림 시, 메뉴 아래로 마우스가 가도 닫히지 않게 메뉴와 컨테이너의
   높이가 자동 확장되도록 처리. position: relative 자식이 height: auto 인 점을
   이용.
   ========================================================================== */

/* 반응형 — 모바일 (1024px 이하) : 햄버거 메뉴로 전환 */
@media (max-width: 1024px) {
  .gnb {
    height: 60rem;
  }
  .gnb__inner {
    width: 100%;
    max-width: none;
    padding: 0 20rem; 
  }
  .gnb__nav,
  .gnb__util {
    display: none;
  }
  .gnb__menu-btn {
    display: inline-flex;
  }
  .gnb__logo-img {
    width: 71.4rem;
    height: auto;
  }
  .gnb:hover,
  .gnb:focus-within,
  .gnb.is-open {
    height: 60rem;
  }
  .gnb:hover::before,
  .gnb:focus-within::before,
  .gnb.is-open::before {
    height: 0;
    opacity: 0;
    visibility: hidden;
    border-top: 0;
  }

  /* --------------------------------------------------------------------------
     모바일 메뉴 열림 상태 
     -------------------------------------------------------------------------- */
  .gnb.is-mobile-open {
    height: 100dvh;
    background: var(--bg-white);
    color: var(--text-highest);
    overflow: hidden;
  }
  .gnb.is-mobile-open .gnb__inner {
    height: 60rem;
    align-items: center;
  }
  .gnb.is-mobile-open .gnb__logo-img--dark { opacity: 0; }
  .gnb.is-mobile-open .gnb__logo-img--light { opacity: 1; }
  .gnb.is-mobile-open .gnb__menu-btn-icon--dark,
  .gnb.is-mobile-open .gnb__menu-btn-icon--light { opacity: 0; }
  .gnb.is-mobile-open .gnb__menu-btn-icon--close { opacity: 1; }
  @keyframes gnbMobileSlideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }

  .gnb.is-mobile-open .gnb__nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: absolute;
    top: 60rem;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 100rem; 
    background: var(--bg-white);
    -webkit-overflow-scrolling: touch;
    animation: gnbMobileSlideInRight 0.35s ease both;
  }
  .gnb.is-mobile-open .gnb__menu {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 0;
  }
  .gnb.is-mobile-open .gnb__item {
    flex: none;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    transition: none;
  }
  .gnb.is-mobile-open .gnb__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 72rem;
    padding: 0 20rem;
    font-size: 18rem;
    font-weight: var(--fw-semibold);
    color: var(--text-highest);
  }
  .gnb.is-mobile-open .gnb__link::after {
    display: none;
  }
  .gnb.is-mobile-open .gnb__link::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 20rem;
    width: 24rem;
    height: 24rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24rem 24rem no-repeat;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24rem 24rem no-repeat;
    transform: translateY(-50%);
    transition: transform var(--transition-base);
  }
  .gnb.is-mobile-open .gnb__item.is-mobile-open > .gnb__link {
    color: var(--primary-gb-blue);
  }
  .gnb.is-mobile-open .gnb__item.is-mobile-open > .gnb__link::before {
    transform: translateY(-50%) rotate(180deg);
  }
  .gnb.is-mobile-open .gnb__submenu {
    position: static;
    display: block;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding: 0;
    background: var(--bg-secondary-light-2);
    border: 0 solid transparent;
    border-top-width: 0;
    border-bottom-width: 0;
    transition:
      height var(--transition-base),
      padding var(--transition-base),
      border-color var(--transition-base);
  }
  .gnb.is-mobile-open .gnb__item.is-mobile-open > .gnb__submenu {
    height: auto;
    padding: 24rem 40rem;
    border-top: 1rem solid var(--line-blue);
    border-bottom: 1rem solid var(--line-blue);
  }
  .gnb.is-mobile-open .gnb__submenu li + li {
    margin-top: 12rem;
  }
  .gnb.is-mobile-open .gnb__sublink {
    display: inline-block;
    width: auto;
    padding: 0;
    font-size: 16rem;
    font-weight: var(--fw-medium);
    line-height: 1.6;
    color: var(--text-high);
    text-align: left;
    white-space: nowrap;
  }
  .gnb.is-mobile-open .gnb__sublink--active,
  .gnb.is-mobile-open .gnb__sublink:hover,
  .gnb.is-mobile-open .gnb__sublink:focus-visible {
    color: var(--primary-gb-blue);
    font-weight: var(--fw-semibold);
  }
  .gnb.is-mobile-open .gnb__util {
    display: inline-flex;
    position: absolute;
    right: 20rem;
    bottom: 60rem;
    z-index: 2;
    animation: gnbMobileSlideInRight 0.35s ease both;
  }
  .gnb.is-mobile-open .gnb__lang-btn {
    color: var(--text-highest);
    background: var(--bg-white);
    border-color: var(--line-low);
  }
  .gnb.is-mobile-open .gnb__lang-options {
    top: auto;
    bottom: 0;
    padding-top: 14rem;
    padding-bottom: 40rem; 
    transform: translateY(4rem);
  }
  .gnb.is-mobile-open .gnb__lang-btn[aria-expanded="true"] + .gnb__lang-options {
    transform: translateY(0);
  }
  body.is-gnb-mobile-open {
    overflow: hidden;
  }

    /* 검정 배경 버튼에서는 화살표를 흰색으로 반전 */
  .gnb--theme-dark .gnb__lang-arrow,
  .gnb:not(.gnb--theme-light) .gnb__lang-arrow {
    filter: unset;
  }
}


/* ==========================================================================
   Footer ─ 어느 페이지에서나 공통으로 사용하는 공통 푸터
   ========================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  background: url("../images/footer-bg.png") center / cover no-repeat;
  color: var(--text-white);
}

.footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "links info logo"
    "copy  copy copy";
  align-items: start;
  column-gap: 40rem;
  row-gap: 60rem;
  max-width: var(--max-width);
  min-height: 320rem;
  margin: 0 auto;
  padding: 60rem;
}

.footer__links {
  grid-area: links;
  display: flex;
  flex-direction: column;
  gap: 12rem;
}

.footer__link {
  font-family: var(--font-family-kor);
  font-size: 16rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--text-white);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--color-gb-blue-300);
  outline: none;
}

.footer__info {
  grid-area: info;
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin: 0;
  font-style: normal;
  font-family: var(--font-family-kor);
  font-size: 16rem;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--text-white);
  opacity: 0.5;
}

.footer__info-line {
  margin: 0;
}

.footer__info-cell + .footer__info-cell {
  margin-left: 24rem;
}

.footer__info a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__info a:hover,
.footer__info a:focus-visible {
  text-decoration: underline;
  outline: none;
}

.footer__logo {
  grid-area: logo;
  display: block;
  width: 126rem;
  height: 60rem;
  flex-shrink: 0;
}

.footer__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.footer__copyright {
  grid-area: copy;
  justify-self: center;
  align-self: end;
  margin: 0;
  font-family: var(--font-family-kor);
  font-size: 16rem;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--text-white);
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   반응형 — 모바일 (1024px 이하)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .footer {
    background: url(../images/footer-bg-mo.png) center / cover no-repeat;
  }
  .footer__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "links logo"
      "info  info"
      "copy  copy";
    column-gap: 20rem;
    row-gap: 60rem;
    min-height: 600rem;
    padding: 60rem var(--side-padding);
  }
  .footer__links {
    gap: 16rem;
  }
  .footer__info {
    justify-self: start;
  }
  .footer__logo {
    width: 105rem;
    height: 50rem;
  }
  .footer__copyright {
    justify-self: start;
  }
}

/* 소형 모바일 (500px 이하) — 전화/팩스를 줄바꿈 */
@media (max-width: 500px) {
  .footer__info-cell + .footer__info-cell {
    margin-left: 16rem;
  }
}

/* ==========================================================================
   버튼 
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-200);
  padding: 0 var(--pd-600);
  color: var(--text-highest);
  background: var(--bg-white);
  border: 1px solid transparent;
  border-radius: var(--rd-50);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.btn--h60 {
  height: 60rem;
  min-width: 100rem;
  padding: 0 var(--pd-800);
}

.btn--h52 {
  height: 52rem;
  min-width: 100rem;
  padding: 0 var(--pd-600);
}

.btn--h48 {
  height: 48rem;
  min-width: 100rem;
  padding: 0 var(--pd-600);
}

/* Type — Primary */
.btn--primary {
  color: var(--btn-text-white);
  background: var(--btn-default-primary);
  border-color: var(--btn-default-primary);
}

.btn--primary:hover,
.btn--primary:focus-visible,
.btn--primary.is-hover {
  background: var(--btn-hover-primary);
  border-color: var(--btn-hover-primary);
  outline: none;
}

.btn--primary:disabled,
.btn--primary[disabled] {
  color: var(--btn-text-disabled);
  background: var(--btn-disabled-primary);
  border-color: var(--btn-disabled-primary);
  cursor: not-allowed;
}

/* Type — Secondary */
.btn--secondary {
  color: var(--btn-text-white);
  background: var(--btn-default-secondary);
  border-color: var(--btn-default-secondary);
}

.btn--secondary:hover,
.btn--secondary:focus-visible,
.btn--secondary.is-hover {
  background: var(--btn-hover-secondary);
  border-color: var(--btn-hover-secondary);
  outline: none;
}

.btn--secondary:disabled,
.btn--secondary[disabled] {
  color: var(--btn-text-secondary-disabled);
  background: var(--btn-disabled-secondary);
  border-color: var(--btn-disabled-secondary);
  cursor: not-allowed;
}

/* Type — Outlined */
.btn--outlined {
  color: var(--btn-default-outline-stroke);
  background: var(--btn-default-outline-fill);
  border-color: var(--btn-default-outline-stroke);
}

.btn--outlined:hover,
.btn--outlined:focus-visible,
.btn--outlined.is-hover {
  background: var(--btn-hover-outline-fill);
  border-color: var(--btn-hover-outline-stroke);
  outline: none;
}

.btn--outlined:disabled,
.btn--outlined[disabled] {
  color: var(--btn-disabled-outline-stroke);
  background: var(--btn-disabled-outline-fill);
  border-color: var(--btn-disabled-outline-stroke);
  cursor: not-allowed;
}

/* Type — Ghost (어두운 배경 위에서 사용) */
.btn--ghost {
  color: var(--btn-text-white);
  background: transparent;
  border-color: var(--btn-default-ghost-stroke);
}

.btn--ghost:hover,
.btn--ghost:focus-visible,
.btn--ghost.is-hover {
  color: var(--btn-text-black);
  background: var(--btn-hover-ghost-fill);
  border-color: var(--btn-hover-ghost-fill);
  outline: none;
}

.btn--ghost:disabled,
.btn--ghost[disabled] {
  color: var(--btn-disabled-ghost-stroke);
  background: transparent;
  border-color: var(--btn-disabled-ghost-stroke);
  cursor: not-allowed;
}

/* 아이콘 (.btn__icon) — 사이즈는 모디파이어 또는 사용처에서 결정 */
.btn__icon {
  flex-shrink: 0;
  display: inline-block;
}

.btn__icon--20 {
  width: 20rem;
  height: 20rem;
}

.btn__icon--16 {
  width: 16rem;
  height: 16rem;
}

/* ==========================================================================
   텍스트-아이콘 버튼 (Text-Icon Button)
   ──────────────────────────────────────────────────────────────────────────
   배경/테두리 없이 텍스트 + 화살표 아이콘으로 구성된 버튼
   ========================================================================== */

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-100);
  padding: 0;
  font-family: var(--font-family-kor);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--text-highest);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.btn-text--lg { font-size: 18rem; }
.btn-text--md { font-size: 16rem; }
.btn-text--sm { font-size: 14rem; }

/* 타입 — Strong: 진한 색 (기본 강조) */
.btn-text--strong { color: var(--text-highest); }

/* 타입 — Default: 본문 색상 */
.btn-text--default { color: var(--text-high); }

/* 타입 — Disabled */
.btn-text--disabled {
  color: var(--text-lowest);
  cursor: not-allowed;
}

/* 타입 — Ghost: 흰색 (어두운 배경 위에서) */
.btn-text--ghost { color: var(--btn-text-white); }

.btn-text:hover:not(.btn-text--disabled),
.btn-text:focus-visible:not(.btn-text--disabled) {
  color: var(--btn-hover-primary);
  outline: none;
}

.btn-text__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

/* ==========================================================================
   외부 링크 버튼 (External Link)
   ──────────────────────────────────────────────────────────────────────────
   타입 : point / default / underline
   사이즈 : lg(18rem) / md(16rem) / sm(14rem)
   상태 : default / hover / pressed / visited / disabled
   ========================================================================== */

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-100);
  padding: 0;
  font-family: var(--font-family-kor);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.btn-link--lg { font-size: 18rem; }
.btn-link--md { font-size: 16rem; }
.btn-link--sm { font-size: 14rem; }

/* 타입 — Point (브랜드 컬러) */
.btn-link--point { color: var(--ext-link-point); }

/* 타입 — Default (본문 색상) */
.btn-link--default { color: var(--text-high); }

/* 타입 — Underline */
.btn-link--underline {
  color: var(--text-high);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 상태 — Hover */
.btn-link:hover,
.btn-link:focus-visible,
.btn-link.is-hover {
  color: var(--ext-link-hover);
  outline: none;
}

/* 상태 — Pressed */
.btn-link.is-pressed { color: var(--ext-link-pressed); }

/* 상태 — Visited */
.btn-link.is-visited,
.btn-link:visited { color: var(--ext-link-visited); }

/* 상태 — Disabled */
.btn-link.is-disabled,
.btn-link:disabled {
  color: var(--ext-link-disabled);
  cursor: not-allowed;
  text-decoration: none;
}

.btn-link__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

/* ==========================================================================
   인풋 (Input)
   ──────────────────────────────────────────────────────────────────────────
   조합:
     .input .input--{type} .input--{size}
       · type : (기본 outlined) / underlined / select / date / textarea
                / search / password / otp
       · size : lg (56rem) / md (48rem)
   상태: is-focused / is-active / is-error / is-unfilled
        / is-disabled / is-readonly
   ========================================================================== */

.input {
  display: flex;
  flex-direction: column;
  gap: var(--sp-100);
  min-width: 200rem;
}

.input__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-100);
  margin-bottom: var(--sp-200);
  font-family: var(--font-family-kor);
  font-size: 14rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--text-highest);
}

.input__required {
  color: var(--text-danger);
}

.input__field-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-200);
  position: relative;
  width: 100%;
  height: 48rem; /* 기본 = md */
  padding: 0 var(--pd-400);
  background: var(--bg-white);
  border: 1rem solid var(--bd-default);
  border-radius: var(--rd-50);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.input__field {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  font-family: var(--font-family-kor);
  font-size: 18rem;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--text-highest);
  background: transparent;
  border: none;
  outline: none;
}

.input__field::placeholder {
  color: var(--text-lowest);
}

.input__helptext {
  margin-top: var(--sp-100);
  font-family: var(--font-family-kor);
  font-size: 14rem;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--text-medium);
}

/* 사이즈 — LG (56rem) */
.input--lg .input__field-wrap {
  height: 56rem;
}

.input--lg .input__field {
  font-size: 18rem;
}

/* 사이즈 — MD (48rem, 명시) */
.input--md .input__field-wrap {
  height: 48rem;
}

/* 상태 — Focused / Active */
.input.is-focused .input__field-wrap,
.input.is-active .input__field-wrap,
.input:focus-within .input__field-wrap {
  border-color: var(--bd-focused);
}

/* 상태 — Error / Unfilled */
.input.is-error .input__field-wrap,
.input.is-unfilled .input__field-wrap {
  border-color: var(--bd-error);
}

.input.is-error .input__helptext {
  color: var(--text-danger);
}

/* 상태 — Disabled */
.input.is-disabled .input__field-wrap {
  background: var(--bg-primary-light-1);
  border-color: var(--bd-disabled);
}

.input.is-disabled .input__field,
.input .input__field:disabled {
  color: var(--text-lowest);
  cursor: not-allowed;
}

/* 상태 — ReadOnly */
.input.is-readonly .input__field-wrap {
  background: var(--bg-neutral-light-2);
  border-color: var(--bd-disabled);
}

/* 타입 — Underlined */
.input--underlined .input__field-wrap {
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1rem solid var(--bd-default);
  border-radius: 0;
}

.input--underlined.is-focused .input__field-wrap,
.input--underlined.is-active .input__field-wrap,
.input--underlined:focus-within .input__field-wrap {
  border-bottom-color: var(--bd-focused);
}

.input--underlined.is-error .input__field-wrap,
.input--underlined.is-unfilled .input__field-wrap {
  border-bottom-color: var(--bd-error);
}

.input--underlined.is-disabled .input__field-wrap,
.input--underlined.is-readonly .input__field-wrap {
  background: transparent;
  border-bottom-color: var(--bd-disabled);
}

/* 타입 — TextArea */
.input--textarea .input__field-wrap {
  height: auto;
  align-items: stretch;
  padding: var(--pd-400);
}

.input--textarea .input__field {
  min-height: 120rem;
  line-height: 1.6;
  resize: vertical;
}

/* 아이콘 (장식용 SVG) */
.input__icon {
  flex-shrink: 0;
  width: 16rem;
  height: 16rem;
  color: var(--ic-black);
}

.input__icon--search {
  width: 20rem;
  height: 20rem;
}

.input.is-disabled .input__icon,
.input.is-readonly .input__icon {
  color: var(--ic-disabled);
}

/* 아이콘 버튼 (캘린더/검색/비밀번호 표시 등) */
.input__icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24rem;
  height: 24rem;
  padding: 0;
  color: var(--ic-black);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.input__icon-btn:hover,
.input__icon-btn:focus-visible {
  color: var(--ext-link-hover);
  outline: none;
}

.input__icon-btn:disabled {
  color: var(--ic-disabled);
  cursor: not-allowed;
}

/* 클리어 버튼 (입력 내용 삭제) */
.input__clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18rem;
  height: 18rem;
  padding: 0;
  color: var(--bg-white);
  background: var(--text-lowest);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.input__clear:hover,
.input__clear:focus-visible {
  background: var(--text-medium);
  outline: none;
}

/* OTP 입력 — 한 글자씩 분리된 박스 */
.input--otp .input__field-wrap {
  gap: var(--sp-200);
  padding: 0;
  background: transparent;
  border: none;
}

.input--otp .input__field {
  width: 48rem;
  height: 56rem;
  padding: 0;
  text-align: center;
  font-size: 20rem;
  font-weight: var(--fw-semibold);
  background: var(--bg-white);
  border: 1px solid var(--bd-default);
  border-radius: var(--rd-50);
}

.input--otp.is-focused .input__field:focus,
.input--otp .input__field:focus {
  border-color: var(--bd-focused);
}

.input--otp.is-error .input__field {
  border-color: var(--bd-error);
}

/* 날짜 범위 분리자 (~) */
.input-date-separator {
  display: inline-flex;
  align-items: center;
  height: 56rem;
  padding: 0 var(--sp-100);
  color: var(--text-high);
  font-size: 16rem;
}

/* ==========================================================================
   유틸 — 스크린리더 전용 (실제 input 숨기고 label/icon으로 클릭 영역 제공)
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1rem;
  height: 1rem;
  padding: 0;
  margin: -1rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Select (Checkbox / Radio Button)
   ──────────────────────────────────────────────────────────────────────────
   조합:
     .select .select--{type} .select--{size}
       · type : checkbox | radio
       · size : lg(24rem 아이콘) / sm(20rem 아이콘) — 기본 lg
   텍스트 우선순위: .select__text--highest / --medium
   상태: .is-disabled / .is-readonly + :focus-visible (sr-only input)
   ========================================================================== */

.select {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-300); /* 12rem (icon ↔ text) */
  cursor: pointer;
  user-select: none;
}

.select.is-disabled,
.select.is-readonly {
  cursor: not-allowed;
}

.select__text {
  color: var(--text-highest);
}

.select__text--highest { color: var(--text-highest); }
.select__text--medium  { color: var(--text-medium); }

.select.is-disabled .select__text,
.select.is-readonly .select__text {
  color: var(--text-lowest);
}

/* sr-only 인풋에 포커스가 가면 icon 외곽선 강조 */
.select__input:focus-visible + .check-icon,
.select__input:focus-visible + .radio-icon {
  outline: 2px solid var(--bd-focused);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Check Icon (체크박스 아이콘)
   -------------------------------------------------------------------------- */

.check-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24rem;
  height: 24rem;
  color: var(--checkbox-unselected-fill); /* check stroke 색상 */
  background: var(--checkbox-unselected-fill);
  border: 1px solid var(--checkbox-unselected-border);
  border-radius: var(--rd-50);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.select--sm .check-icon {
  width: 20rem;
  height: 20rem;
}

/* State — Selected */
.check-icon--selected {
  color: var(--bg-white);
  background: var(--checkbox-selected-fill);
  border-color: var(--checkbox-selected-fill);
}

.check-icon--selected::before,
.check-icon--readonly::before {
  content: "";
  width: 55%;
  height: 38%;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 4l4 3 6-6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 4l4 3 6-6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* State — Unselected (기본값과 동일, 명시) */
.check-icon--unselected {
  color: var(--checkbox-unselected-fill);
  background: var(--checkbox-unselected-fill);
  border-color: var(--checkbox-unselected-border);
}

/* State — Disabled */
.check-icon--disabled {
  color: var(--checkbox-disabled-border);
  background: var(--checkbox-disabled-fill);
  border-color: var(--checkbox-disabled-border);
}

/* State — ReadOnly (선택된 상태이지만 변경 불가) */
.check-icon--readonly {
  color: var(--checkbox-disabled-border);
  background: var(--bg-primary-light-2);
  border-color: var(--checkbox-disabled-border);
}

/* --------------------------------------------------------------------------
   Radio Icon (라디오 버튼 아이콘)
   -------------------------------------------------------------------------- */

.radio-icon {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24rem;
  height: 24rem;
  background: var(--radio-unselected-fill);
  border: 1px solid var(--radio-unselected-border);
  border-radius: 50%;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.select--sm .radio-icon {
  width: 20rem;
  height: 20rem;
}

.radio-icon__inner {
  display: block;
  width: 8rem;
  height: 8rem;
  background: transparent;
  border-radius: 50%;
  transition: background var(--transition-fast);
}

.select--sm .radio-icon__inner {
  width: 6rem;
  height: 6rem;
}

/* State — Selected (On) */
.radio-icon--selected {
  background: var(--radio-selected-fill);
  border-color: var(--radio-selected-fill);
}

.radio-icon--selected .radio-icon__inner {
  background: var(--bg-white);
}

/* State — Unselected (Off) */
.radio-icon--unselected {
  background: var(--radio-unselected-fill);
  border-color: var(--radio-unselected-border);
}

/* State — Disabled */
.radio-icon--disabled {
  background: var(--radio-disabled-fill);
  border-color: var(--radio-disabled-border);
}

.radio-icon--disabled .radio-icon__inner {
  background: transparent;
}

/* State — ReadOnly */
.radio-icon--readonly {
  background: var(--bg-primary-light-2);
  border-color: var(--radio-disabled-border);
}

.radio-icon--readonly .radio-icon__inner {
  background: var(--radio-disabled-border);
}

/* ==========================================================================
   Selectbox (드롭다운 셀렉트박스)
   ──────────────────────────────────────────────────────────────────────────
   사이즈: lg(60rem) / md(48rem)
   상태: default / focused / active / complete / error / disabled / readonly
   ========================================================================== */

.selectbox {
  display: flex;
  flex-direction: column;
  gap: var(--sp-100);
  min-width: 200rem;
}

.selectbox__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-100);
  margin-bottom: var(--sp-200);
  font-family: var(--font-family-kor);
  font-size: 14rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--text-highest);
}

.selectbox__field-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-200);
  position: relative;
  width: 100%;
  height: 48rem; /* 기본 = md */
  border: 1px solid var(--bd-default);
  border-radius: var(--rd-50);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.selectbox__field {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 15rem 16rem;
  font-family: var(--font-family-kor);
  font-size: 20rem;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--text-highest);
  background: #fff url(../images/select-box-down-arrow-ico.svg) no-repeat right 12px center;
  border: none;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.selectbox__field option {
  padding: 30rem;
}

.selectbox__field option:disabled,
.selectbox__field option[value=""] {
  color: var(--text-lowest);
}

.selectbox__icon {
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  color: var(--ic-black);
  pointer-events: none;
}

.selectbox__helptext {
  margin-top: var(--sp-100);
  font-family: var(--font-family-kor);
  font-size: 14rem;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--text-medium);
}

/* 사이즈 — LG (60rem) */
.selectbox--lg .selectbox__field-wrap {
  height: 60rem;
}

.selectbox--lg .selectbox__field {
  font-size: 18rem;
}

/* 사이즈 — MD (48rem, 명시) */
.selectbox--md .selectbox__field-wrap {
  height: 48rem;
}

/* 상태 — Focused / Active */
.selectbox.is-focused .selectbox__field-wrap,
.selectbox.is-active .selectbox__field-wrap,
.selectbox:focus-within .selectbox__field-wrap {
  border-color: var(--bd-focused);
}

/* 상태 — Active일 때 chevron 위로 (펼침 표시) */
.selectbox.is-active .selectbox__icon {
  transform: rotate(180deg);
}

/* 상태 — Complete (값이 선택된 정상 상태) — 기본과 동일 */

/* 상태 — Error */
.selectbox.is-error .selectbox__field-wrap {
  border-color: var(--bd-error);
}

.selectbox.is-error .selectbox__helptext {
  color: var(--text-danger);
}

/* 상태 — Disabled */
.selectbox.is-disabled .selectbox__field-wrap {
  background: var(--bg-primary-light-1);
  border-color: var(--bd-disabled);
}

.selectbox.is-disabled .selectbox__field {
  color: var(--text-lowest);
  cursor: not-allowed;
}

.selectbox.is-disabled .selectbox__icon {
  color: var(--ic-disabled);
}

/* 상태 — ReadOnly */
.selectbox.is-readonly .selectbox__field-wrap {
  background: var(--bg-neutral-light-2);
  border-color: var(--bd-disabled);
}

.selectbox.is-readonly .selectbox__icon {
  color: var(--ic-disabled);
}

@media (max-width: 500px) {
  .select {
    align-items: flex-start;
  }
}


/* 검색결과 없음 */
.no-result {
  width: 100%; 
  height: 630rem;
  border: 1px solid var(--line-blue);
  background: var(--bg-white);
  margin-top: 80rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-result .txt-area {
  display: flex; 
  flex-direction: column;
  align-items: center;
  gap: 20rem;
}

@media (max-width: 500px) {
  .no-result {
    margin-top: 40rem;
  }
}

/* --------------------------------------------------------------------------
   페이지네이션 ─ 목록 페이지 공통 컴포넌트
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
  margin-top: 60rem;
}
.pagination__list {
  display: flex;
  align-items: center;
  gap: 8rem;
}
.pagination__num,
.pagination__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32rem;
  height: 32rem;
  padding: 0;
  font-weight: var(--fw-semibold);
  color: var(--text-high);
  background: transparent;
  border: 1rem solid transparent;
  border-radius: var(--rd-50);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.pagination__num:hover,
.pagination__nav:hover,
.pagination__num:focus-visible,
.pagination__nav:focus-visible {
  color: var(--text-highest);
  outline: none;
}
.pagination__num--active,
.pagination__num[aria-current="page"] {
  color: var(--text-point);
}
/* 생략 표시 '...' ─ 클릭 불가 */
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32rem;
  height: 32rem;
  color: var(--text-high);
  background: transparent;
  user-select: none;
}
.pagination__nav img {
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .pagination { margin-top: 48rem; }
  .pagination__num, .pagination__nav { width: 36rem; height: 36rem; }
}

@media (max-width: 600px) {
  .pagination__list .mo__num { display: none; }
}

/* --------------------------------------------------------------------------
   탑 버튼 — 서브 페이지 공통 (script.js 에서 동적 삽입, 메인 제외)
   -------------------------------------------------------------------------- */

.top-btn {
  position: fixed;
  right: 20rem;
  bottom: 20rem;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56rem;
  height: 56rem;
  background: var(--color-white);
  border: 1rem solid #cdd1d5;
  border-radius: 8rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.05), 0 4rem 4rem rgba(0, 0, 0, 0.08);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.top-btn::before {
  content: "";
  width: 24rem;
  height: 24rem;
  background: url("../images/top-btn-ico24.svg") center / contain no-repeat;
}

.top-btn--visible {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1024px) {
  .top-btn { width: 40rem; height: 40rem; }
  .top-btn::before { width: 17rem; height: 17rem; }
}