@charset "utf-8";
@import url(normalize.css);
@font-face { font-family: 'Pretendard'; font-weight: 100; font-display: swap; src: local('Pretendard Thin'), url('../fonts/Pretendard-Thin.woff2') format('woff2'), url('../fonts/Pretendard-Thin.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 200; font-display: swap; src: local('Pretendard ExtraLight'), url('../fonts/Pretendard-ExtraLight.woff2') format('woff2'), url('../fonts/Pretendard-ExtraLight.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 300; font-display: swap; src: local('Pretendard Light'), url('../fonts/Pretendard-Light.woff2') format('woff2'), url('../fonts/Pretendard-Light.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url('../fonts/Pretendard-Regular.woff2') format('woff2'), url('../fonts/Pretendard-Regular.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url('../fonts/Pretendard-Medium.woff2') format('woff2'), url('../fonts/Pretendard-Medium.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), url('../fonts/Pretendard-SemiBold.woff2') format('woff2'), url('../fonts/Pretendard-SemiBold.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url('../fonts/Pretendard-Bold.woff2') format('woff2'), url('../fonts/Pretendard-Bold.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 800; font-display: swap; src: local('Pretendard ExtraBold'), url('../fonts/Pretendard-ExtraBold.woff2') format('woff2'), url('../fonts/Pretendard-ExtraBold.woff') format('woff'); }
@font-face { font-family: 'Pretendard'; font-weight: 900; font-display: swap; src: local('Pretendard Black'), url('../fonts/Pretendard-Black.woff2') format('woff2'), url('../fonts/Pretendard-Black.woff') format('woff'); }

/* 디자인 토큰 */
:root {
  /* 폰트 */
  --font-family: 'Pretendard', Arial, sans-serif;
  --title-font-family: 'Pretendard', Arial, sans-serif;
  --letter-spacing: -0.025em;

  /* 폰트 크기 */
  --fs-42: 42px;
  --fs-32: 32px;
  --fs-26: 26px;
  --fs-24: 24px;
  --fs-20: 20px;
  --fs-18: 18px;
  --fs-16: 16px;
  --fs-14: 14px;

  /* 의미형 폰트 크기 */
  --font-size-page-title: var(--fs-42);
  --font-size-section-heading: var(--fs-32);
  --font-size-ui: var(--fs-18);
  --font-size-body: var(--fs-16);

  /* 하위 호환 폰트 크기 */
  --font-size: var(--font-size-body);
  --font-size-title: var(--font-size-page-title);
  --font-size-section: var(--font-size-section-heading);
  --font-size-sm: var(--font-size-ui);
  --font-size-xs: var(--font-size-body);
  --font-size-lg: var(--fs-24);

  /* 레이아웃 (--inner-max-width = 콘텐츠 영역 1400px, .inner 박스는 좌우 패딩 포함해 더 넓음) */
  --inner-width: 100%;
  --inner-max-width: 1400px;
  --inner-padding-x: 24px;
  --inner-outer-max-width: calc(var(--inner-max-width) + 2 * var(--inner-padding-x));

  /* GNB (헤더·본문 동일: 뷰포트에서 inner 좌우 패딩 제외한 콘텐츠 폭) */
  --layout-content-available: min(var(--inner-max-width), max(0px, 100vw - 2 * var(--inner-padding-x)));
  --gnb-scale: calc(var(--layout-content-available) / var(--inner-max-width));
  --header-height: 102px;
  --header-pad-left: var(--inner-padding-x);
  --header-pad-right: var(--inner-padding-x);
  --gnb-header-base-width: var(--inner-max-width);
  --gnb-header-current-width: var(--layout-content-available);
  --gnb-header-scale: calc(var(--gnb-header-current-width) / var(--gnb-header-base-width));
  --gnb-logo-area-width: clamp(220px, calc(364px * var(--gnb-header-scale)), 364px);
  --gnb-nav-right-gap: clamp(40px, 4vw, 60px);

  /* 색상 */
  --primary-color: #005891;
  --btn-primary-hover: #0082cf;
  --btn-accent-color: #0082cf;
  --btn-accent-hover: #0073b7;
  --light-color: #fff;
  --dark-color: #333;
  --font-color: #000000;
  --gray-color: #f3f6f9;
  --gray-100: #f5f5f5;
  --gray-200: #e8e8e8;
  --footer-bg: #1a2b3c;
  --footer-text: #cccccc;
  --font-sec-color: #333;
  --font-muted: #999999;
  --background-color: #fff;

  /* 효과 */
  --shadow-float: 0 4px 14px rgba(0, 0, 0, 0.12);
  --radius-sm: 0;
  --quick-menu-top: calc(var(--header-height) + 100px);
  /* 밑줄과 글자 사이 간격 (상속, text-decoration: underline 에만 시각적 효과) */
  --text-underline-offset: 0.2em;
}

/* 기본 요소 */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
*, *::before, *::after { box-sizing: inherit; }
a { color: inherit; text-decoration: none; }
body { margin: 0; font-family: var(--font-family); color: var(--font-color); font-size: var(--font-size); line-height: 1.5; font-weight: 400; letter-spacing: var(--letter-spacing); min-width: 320px; background-color: var(--background-color); word-break: keep-all; overflow-wrap: break-word; text-underline-offset: var(--text-underline-offset); }
button { font-family: inherit; padding: 0; border: 0; background: none; cursor: pointer; }
img { max-width: 100%; height: auto; vertical-align: top; }
map area { cursor: pointer; }
b, strong { font-weight: 700; }

/* 레이아웃
 * PC: .inner 콘텐츠 영역 = 1400px (--inner-max-width, 좌우 패딩 24px씩 제외)
 * GNB: 로고 이미지 좌측 끝 ~ 햄버거 우측 끝 = 1400px
 * 푸터: 로고 이미지 좌측 끝 ~ 패밀리 셀렉트 우측 끝 = 1400px */
.inner { width: var(--inner-width); max-width: var(--inner-outer-max-width); margin-left: auto; margin-right: auto; padding-left: var(--inner-padding-x); padding-right: var(--inner-padding-x); }

/* 타이포 */
.page-title { font-family: var(--title-font-family); font-size: var(--font-size-page-title); font-weight: 700; line-height: 1.25; color: var(--font-color); margin: 0 0 23px; }
.section-title { font-size: var(--font-size-section-heading); font-weight: 700; line-height: 1.3; margin: 0 0 0.75rem; color: var(--font-color); }

/* 브레드크럼 */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em 0.5em; margin: 0; padding: 0; list-style: none; font-size: var(--fs-16); color: var(--light-color); }
.breadcrumb a { color: inherit; opacity: 0.95; }
.breadcrumb__sep { opacity: 0.7; user-select: none; }

/* 페이지네이션 (목록 공통) */
.site-pagination { --site-pagination-icon-gap: 0; --site-pagination-block-gap: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--site-pagination-block-gap); margin: 40px 0 0; padding: 0; }
.site-pagination__pair { display: inline-flex; align-items: center; gap: var(--site-pagination-icon-gap); }
.site-pagination__ctrl { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 40px; padding: 4px; line-height: 0; }
.site-pagination__ctrl img { display: block; width: auto; height: auto; max-height: 24px; }
.site-pagination__pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 4px; margin: 0; padding: 0 8px; list-style: none; }
.site-pagination__num { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; padding: 4px 6px; font-size: var(--font-size-body); font-weight: 500; color: var(--font-color); text-decoration: none; }
.site-pagination__num.is-current { font-weight: 700; color: var(--primary-color); text-decoration: underline; pointer-events: none; }

@media (max-width: 768px) {
  .site-pagination { --site-pagination-block-gap: 10px; margin-top: 36px; gap: var(--site-pagination-block-gap); }
  .site-pagination__ctrl { min-width: 26px; min-height: 34px; padding: 2px; }
  .site-pagination__ctrl img { max-height: 20px; }
  .site-pagination__pages { gap: 4px 2px; padding: 0 4px; }
  .site-pagination__num { min-width: 1.65rem; padding: 2px 4px; font-size: var(--fs-16); }
}

/* 헤더 */
.site-header { position: relative; z-index: 50; background-color: var(--light-color); border-bottom: none; }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: #999999; z-index: 70; pointer-events: none; }
/* 헤더·메가메뉴: .inner 와 동일 max-width·좌우 패딩(본문 1번 여백과 정렬) */
.site-header__bar { display: flex; align-items: center; justify-content: flex-start; gap: 0; width: 100%; min-height: var(--header-height); }
.site-header__logo { flex: 0 0 220px; flex: 0 0 var(--gnb-logo-area-width); display: flex; justify-content: flex-start; align-items: center; min-width: 0; }
.site-header__logo-link { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 48px; font-weight: 800; font-size: var(--font-size-ui); color: var(--font-color); }
.site-header__logo-img { display: block; height: 45px; width: auto; }
.site-header__logo--eng .site-header__logo-img { height: 36px; }
.site-header__nav { flex: 1; display: flex; justify-content: flex-start; min-width: 0; padding-right: 40px; padding-right: var(--gnb-nav-right-gap); overflow: visible; }
.site-header__menu { display: flex; flex-wrap: nowrap; justify-content: flex-start; row-gap: 8px; column-gap: 24px; column-gap: clamp(24px, calc(60px * var(--gnb-scale)), 60px); margin: 0; padding: 0; list-style: none; }
.site-header__menu-item { position: relative; flex: 0 0 auto; }
.site-header__menu a, .site-header__menu-link { display: block; padding: 42px 0; font-size: var(--font-size-ui); font-weight: 700; color: var(--font-color); line-height: 1; white-space: nowrap; position: relative; transition: color 0.2s ease; }
.site-header__menu a.is-active, .site-header__menu a[aria-current='page'], .site-header__menu-link.is-active, .site-header__menu-link[aria-current='page'] { font-weight: 700; }
.site-header__menu a.is-active::after, .site-header__menu a[aria-current='page']::after, .site-header__menu-link.is-active::after, .site-header__menu-link[aria-current='page']::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background-color: #005891; border-radius: 0; opacity: 1; transition: opacity 0.3s ease 0.35s; }
.site-header.mega-open .site-header__menu a.is-active::after, .site-header.mega-open .site-header__menu a[aria-current='page']::after, .site-header.mega-open .site-header__menu-link.is-active::after, .site-header.mega-open .site-header__menu-link[aria-current='page']::after { opacity: 0; transition: opacity 0.18s ease 0s; }
.site-header__menu-item:hover .site-header__menu-link, .site-header__menu-item:focus-within .site-header__menu-link { color: var(--primary-color); }
.site-header__menu-link::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background-color: var(--primary-color); border-radius: 0; transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease; pointer-events: none; }
.site-header__menu-item:hover .site-header__menu-link::before, .site-header__menu-item:focus-within .site-header__menu-link::before { transform: scaleX(1); }
.site-header__menu-item.is-mega-active .site-header__menu-link { color: var(--primary-color); }
.site-header__menu-item.is-mega-active .site-header__menu-link::before { transform: scaleX(1); }
html.is-edge-legacy-gnb .site-header__menu { column-gap: 0; }
html.is-edge-legacy-gnb .site-header__logo { flex-basis: 200px; }
html.is-edge-legacy-gnb .site-header__menu-item { flex: 0 0 auto; }
html.is-edge-legacy-gnb .site-header__nav { padding-left: 120px; }
html.is-edge-legacy-gnb .site-header__menu-item + .site-header__menu-item { margin-left: 60px; }
.site-header__utils { display: flex; flex-shrink: 0; align-items: center; gap: 20px; margin-left: auto; }
.site-header__lang { display: flex; align-items: center; gap: 10px; font-size: var(--fs-16); font-weight: 500; color: var(--font-muted); }
.site-header__lang a { color: #999999; }
.site-header__lang a:not(.is-current) { font-weight: 400; }
.site-header__lang a.is-current { font-weight: 700; color: var(--font-color); }
.site-header__lang a.is-current[lang='ko'] { color: #000000; }
.site-header__drawer-btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 22px; height: 17px; padding: 0; border-radius: var(--radius-sm); }
.site-header__drawer-btn-icon { display: block; width: 22px; height: 17px; max-width: none; }
.site-header__drawer-btn:focus-visible { background-color: var(--gray-100); }

/* GNB 메가 메뉴 */
.site-header__mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin: 0; padding: 0; min-height: 316px; background-color: #ffffff; border-bottom: 1px solid #cccccc; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s; }
.site-header.mega-open .site-header__mega { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0s; }
.site-header.mega-open .site-header__mega-panel:not([hidden]) { pointer-events: auto; }
.site-header__mega-inner { position: relative; padding-top: 0; padding-bottom: 32px; min-height: inherit; }
.site-header__mega-panel { position: absolute; top: 0; left: var(--mega-panel-left, 0px); margin: 0; padding-top: 28px; }
.site-header__mega-panel:not([hidden]) { animation: site-header-mega-panel-in 0.22s cubic-bezier(0.33, 1, 0.68, 1) both; }
@keyframes site-header-mega-panel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.site-header__mega-list { margin: 0; padding: 0; list-style: none; }
.site-header__mega-list li + li { margin-top: 10px; }
.site-header__mega-list a { display: inline-block; padding: 2px 0; font-size: 18px; font-weight: 500; line-height: 1.45; color: #000000; text-decoration: none; white-space: nowrap; transition: color 0.2s ease, font-weight 0.2s ease; }
.site-header__mega-list a:hover, .site-header__mega-list a:focus-visible { color: #005891; font-weight: 700; text-decoration: underline; }

/* 전체 메뉴 드로어 */
.site-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; }
.site-drawer.is-open { visibility: visible; pointer-events: auto; }
.site-drawer__backdrop { position: absolute; inset: 0; z-index: 1; background-color: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.3s ease; }
.site-drawer.is-open .site-drawer__backdrop { opacity: 1; }
.site-drawer__panel { position: relative; z-index: 2; width: 100%; background-color: #005891; transform: translateY(-24px); opacity: 0; transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.32s ease; }
.site-drawer.is-open .site-drawer__panel { transform: translateY(0); opacity: 1; }
.site-drawer__bar { background-color: #005891; border-bottom: 1px solid #999999; }
.site-drawer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 0; min-height: var(--header-height); }
.site-drawer__bar-inner .site-drawer__logo { flex: 0 0 var(--gnb-logo-area-width); }
.site-drawer__logo { display: inline-flex; align-items: center; }
.site-drawer__logo-link { display: inline-flex; align-items: center; }
.site-drawer__logo-img { display: block; height: 45px; width: auto; }
html[lang="en"] .site-drawer__logo-img { height: 36px; }
.site-drawer__utils { display: none; }
.site-drawer__close { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 19px; height: 19px; padding: 0; background: transparent; border: 0; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; }
.site-drawer__close-icon--mo { display: none; }
.site-drawer__close-icon--pc { display: block; width: 19px; height: 19px; max-width: none; }
.site-drawer__close:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.site-drawer__body { height: 870px; background-color: #005891; background-image: url('/resources/images/common/all_menu_bg.png'); background-repeat: no-repeat; background-position: center; background-size: cover; }
.site-drawer__inner { height: 100%; display: flex; align-items: flex-start; padding-left: max( var(--header-pad-left), calc( var( --site-drawer-menu-base, calc(var(--header-pad-left) + var(--gnb-logo-area-width)) ) + (146px * var(--gnb-header-scale) * var(--gnb-header-scale)) ) ); }
.site-drawer__nav { width: 100%; padding-top: 96px; padding-bottom: 80px; }
.site-drawer__menu { display: grid; grid-template-columns: repeat(3, 360px); column-gap: 0; row-gap: 80px; margin: 0; padding: 0; list-style: none; }
.site-drawer__col { margin: 0; padding: 0; list-style: none; }
.site-drawer__cat { margin: 0 0 22px; font-size: 24px; font-weight: 700; line-height: 1.2; color: #ffffff; }
.site-drawer__cat-btn { display: block; width: 100%; font: inherit; font-weight: inherit; line-height: inherit; color: inherit; text-align: left; }
.site-drawer__sublist { margin: 0; padding: 0; list-style: none; }
.site-drawer__sublist li + li { margin-top: 14px; }
.site-drawer__sublist a { display: inline-block; font-size: 18px; font-weight: 300; line-height: 1.4; color: #ffffff; text-decoration: none; transition: font-weight 0.2s ease; }
.site-drawer__sublist a:hover, .site-drawer__sublist a:focus-visible { color: #ffffff; font-weight: 700; text-decoration: underline; }

/* Edge 131 이하: 전체 메뉴 드로어 좌측 여백 폴백 (PC만)
 * --edge-drawer-base-left    : 기본 좌측 여백 (calc 실패 시에도 적용되는 기준값)
 * --edge-drawer-shrink-factor: 창이 좁아질 때 줄어드는 비율 (0.2~0.4 권장)
 * --edge-drawer-offset-tune  : 미세 조정 (양수=오른쪽, 음수=왼쪽) */
@media (min-width: 769px) {
  html.is-edge-legacy-gnb {
    --edge-drawer-base-left: 294px;
    --edge-drawer-shrink-factor: 0.3;
    --edge-drawer-offset-tune: 0px;
  }
  html.is-edge-legacy-gnb .site-drawer__bar-inner .site-drawer__logo {
    flex: 0 0 220px;
    flex: 0 0 clamp(220px, calc(364px * min(1, (100vw - 48px) / 1400px)), 364px);
  }
  html.is-edge-legacy-gnb .site-drawer__inner {
    padding-left: var(--edge-drawer-base-left);
    padding-left: calc(
      var(--edge-drawer-base-left)
      - max(0px, (1448px - 100vw) * var(--edge-drawer-shrink-factor))
      + var(--edge-drawer-offset-tune)
    );
  }
}

/* PC·태블릿: 전체 메뉴 — 뷰포트보다 내용이 길면 본문만 스크롤 */
@media (min-width: 769px) {
  .site-drawer__panel { display: flex; flex-direction: column; max-height: 100vh; overflow: hidden; }
  .site-drawer__bar { flex-shrink: 0; }
  .site-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(870px, calc(100vh - var(--header-height)));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
  }
  .site-drawer__body::-webkit-scrollbar { width: 6px; }
  .site-drawer__body::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.32); border-radius: 3px; }
  .site-drawer__body::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.48); }
  .site-drawer__body::-webkit-scrollbar-track { background-color: transparent; }
}

/* 서브 히어로 */
.sub-hero { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; min-height: 281px; padding: 56px 16px; text-align: center; color: var(--light-color); background-size: cover; background-position: center; }
.sub-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: var(--inner-outer-max-width); margin: 0 auto; padding-left: var(--inner-padding-x); padding-right: var(--inner-padding-x); text-align: center; }
.sub-hero__title { margin: 0 0 14px; font-size: 48px; font-weight: 700; line-height: 1.2; text-align: center; }
.sub-hero .breadcrumb { justify-content: center; font-size: var(--fs-14); color: rgba(255, 255, 255, 0.92); }

/* 푸터 */
.site-footer { height: 170px; color: var(--footer-text); background-color: var(--footer-bg); font-size: var(--fs-14); line-height: 1.55; }
.site-footer a:focus-visible { color: var(--light-color); }
.site-footer__inner { display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; padding-top: 32px; gap: 109px; }
.site-footer__brand { flex: 0 0 auto; line-height: 1; margin-top: 3px; }
.site-footer__brand-img { display: block; width: auto; height: auto; max-width: 100%; }
.site-footer__info { flex: 1 1 auto; min-width: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 15px; margin: 0 0 11px; padding: 0; list-style: none; }
.site-footer__links a { color: var(--light-color); }
.site-footer__links .is-em { font-weight: 700; }
.site-footer__links-sep { color: #999999; font-weight: 300; user-select: none; }
.site-footer__addr { margin: 0 0 3px; color: var(--footer-text); }
.site-footer__copy { margin: 0; font-size: var(--fs-14); color: var(--footer-text); }
/* GNB 햄버거 우측과 동일 수직선(1400px 그리드 우측 끝) */
.site-footer__family { flex: 0 0 auto; margin-top: 3px; margin-left: auto; }
.site-footer__family-trigger { position: relative; box-sizing: border-box; width: 240px; height: 46px; padding: 0 36px 0 16px; font-family: inherit; font-size: var(--fs-14); color: var(--light-color); text-align: left; cursor: pointer; background-color: #364855; border: 0; border-radius: 0; }
.site-footer__family-trigger::after { content: ""; position: absolute; top: 50%; right: 18px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--light-color); transform: translateY(-50%); }

/* 패밀리 사이트 드롭다운 */
.family-dropdown { position: relative; z-index: 200; }
.family-dropdown__panel { position: absolute; left: 0; bottom: calc(100% + 8px); width: 240px; max-height: 360px; overflow-y: auto; padding: 0; background-color: #364855; color: #ffffff; border: 0; box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.2); z-index: 200; }
.family-dropdown__panel[hidden] { display: none; }
.family-dropdown__panel { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; }
.family-dropdown__panel::-webkit-scrollbar { width: 8px; }
.family-dropdown__panel::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.35); border-radius: 4px; }
.family-dropdown__panel::-webkit-scrollbar-track { background-color: transparent; }
.family-dropdown__list { margin: 0; padding: 0; list-style: none; }
.family-dropdown__item--holding { margin-bottom: 0; }
.family-dropdown__item--holding > a { display: block; box-sizing: border-box; padding: 10px 16px; font-size: var(--fs-14); font-weight: 400; color: #ffffff; text-decoration: none; line-height: 1.5; transition: background-color 0.2s ease; }
.family-dropdown__item--holding > a:hover, .family-dropdown__item--holding > a:focus-visible { background-color: #005891; color: #ffffff; }
.family-dropdown__group { margin-top: 0; }
.family-dropdown__group:first-child { margin-top: 0; }
.family-dropdown__title { margin: 0; padding: 14px 16px 4px; font-size: var(--fs-14); font-weight: 700; line-height: 1.5; color: #ffffff; }
.family-dropdown__title::before { content: "["; }
.family-dropdown__title::after { content: "]"; }
.family-dropdown__group + .family-dropdown__group .family-dropdown__title { padding-top: 18px; }
.family-dropdown__sub { margin: 0; padding: 0 0 4px; list-style: none; }
.family-dropdown__sub > li { margin-bottom: 0; }
.family-dropdown__sub > li:last-child { margin-bottom: 0; }
.family-dropdown__sub a { display: block; box-sizing: border-box; padding: 6px 16px 6px 32px; font-size: var(--fs-14); font-weight: 400; color: #ffffff; text-decoration: none; line-height: 1.5; transition: background-color 0.2s ease; }
.family-dropdown__sub a:hover, .family-dropdown__sub a:focus-visible { background-color: #005891; color: #ffffff; }
.site-footer__family-trigger[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg); }

/* 플로팅 탑 버튼 */
.fab-top { position: fixed; right: max(var(--inner-padding-x), calc(50% - var(--inner-max-width) / 2)); bottom: var(--fab-bottom, 32px); z-index: 100; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; color: var(--light-color); background-color: #1c2b36; border-radius: 0; box-shadow: var(--shadow-float); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease, background-color 0.2s, transform 0.2s; }
.fab-top__icon { display: block; }
.fab-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.fab-top:active { transform: scale(0.96); }

/* 우측 퀵메뉴 */
.quick-menu { --quick-menu-panel-w: 138px; --quick-menu-panel-h: 259px; --quick-menu-toggle-w: 30px; --quick-menu-toggle-h: 50px; --quick-menu-line-inset: 20px; --quick-menu-line-inset-left: var(--quick-menu-line-inset); --quick-menu-line-inset-right: var(--quick-menu-line-inset); --quick-menu-item-gap: 22px; --quick-menu-radius: 7px; --quick-menu-bg: rgba(0, 0, 0, 0.8); --quick-menu-link-font-size: 14px; --quick-menu-link-line-height: 1.35; position: fixed; top: var(--quick-menu-top); right: 0; z-index: 90; height: var(--quick-menu-panel-h); overflow: visible; }
.quick-menu__inner { position: absolute; top: 0; right: 0; display: flex; flex-direction: row; align-items: flex-start; gap: 0; isolation: isolate; transform: translate3d(0, 0, 0); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.quick-menu__inner::before { content: ""; position: absolute; top: 0; left: 0; z-index: 0; width: var(--quick-menu-toggle-w); height: var(--quick-menu-toggle-h); background-color: var(--quick-menu-bg); border-top-left-radius: var(--quick-menu-radius); border-bottom-left-radius: var(--quick-menu-radius); pointer-events: none; }
.quick-menu__inner::after { content: ""; position: absolute; top: 0; left: var(--quick-menu-toggle-w); z-index: 0; width: var(--quick-menu-panel-w); height: var(--quick-menu-panel-h); background-color: var(--quick-menu-bg); border-bottom-left-radius: var(--quick-menu-radius); pointer-events: none; }
.quick-menu:not(.is-open) .quick-menu__inner { transform: translate3d(var(--quick-menu-panel-w), 0, 0); }
.quick-menu__panel { box-sizing: border-box; position: relative; z-index: 1; flex: 0 0 var(--quick-menu-panel-w); width: var(--quick-menu-panel-w); height: var(--quick-menu-panel-h); overflow: hidden; background-color: transparent; pointer-events: auto; }
.quick-menu:not(.is-open) .quick-menu__panel { pointer-events: none; }
.quick-menu__list { display: flex; flex-direction: column; justify-content: center; gap: var(--quick-menu-item-gap); height: 100%; margin: 0; padding: 0; list-style: none; }
.quick-menu__item { position: relative; flex: 0 0 auto; }
.quick-menu__item + .quick-menu__item::before { content: ""; position: absolute; top: calc(var(--quick-menu-item-gap) / -2); left: var(--quick-menu-line-inset-left); right: var(--quick-menu-line-inset-right); height: 1px; background-color: #555556; pointer-events: none; }
.quick-menu__link { display: block; box-sizing: border-box; width: 100%; padding: 0 var(--quick-menu-line-inset-right) 0 var(--quick-menu-line-inset-left); font-size: var(--quick-menu-link-font-size); font-weight: 500; line-height: var(--quick-menu-link-line-height); letter-spacing: -0.02em; color: #ffffff; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: color 0.2s ease; }
.quick-menu__link:hover, .quick-menu__link:focus-visible { color: #0082cf; font-weight: 500; text-shadow: 0 0 0.5px currentColor; }
.quick-menu__link:focus-visible { outline: 2px solid #0082cf; outline-offset: -2px; }
.quick-menu__toggle { box-sizing: border-box; position: relative; z-index: 1; flex: 0 0 var(--quick-menu-toggle-w); display: inline-flex; align-items: center; justify-content: center; width: var(--quick-menu-toggle-w); height: var(--quick-menu-toggle-h); color: #ffffff; background-color: transparent; pointer-events: auto; }
.quick-menu__toggle:focus-visible { outline: 2px solid #076ead; outline-offset: 2px; }
.quick-menu__toggle-icon { display: block; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.quick-menu:not(.is-open) .quick-menu__toggle-icon { transform: rotate(180deg); }
/* 영문 퀵메뉴(5항목) — 패널·폰트·좌측 여백 국문과 분리 조정 */
.quick-menu.quick-menu--eng { --quick-menu-panel-h: 219px; --quick-menu-line-inset-left: 10px; --quick-menu-line-inset-right: 0; --quick-menu-link-font-size: 14px; --quick-menu-link-line-height: 1.35; }
.quick-menu.quick-menu--eng .quick-menu__list { width: max-content; max-width: 100%; }
.quick-menu.quick-menu--eng .quick-menu__item { width: 100%; }
.quick-menu.quick-menu--eng .quick-menu__link { width: auto; padding-right: 0; white-space: nowrap; }
.quick-menu.quick-menu--eng .quick-menu__item + .quick-menu__item::before { right: 0; }

@media (min-width: 769px) {
  .quick-menu.quick-menu--eng { --quick-menu-panel-w: 168px; }
}

/* 이메일 무단수집거부 팝업 */
.email-reject-layer { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.email-reject-layer[hidden] { display: none !important; }
.email-reject-layer__dim { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background-color: rgba(0, 0, 0, 0.55); cursor: pointer; }
.email-reject-popup { position: relative; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; width: 900px; max-width: calc(100% - 48px); height: 326px; max-height: calc(100vh - 48px); overflow: hidden; background-color: #ffffff; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); }
.email-reject-popup__head { position: relative; flex: 0 0 68px; display: flex; align-items: center; justify-content: center; height: 68px; padding: 0 56px; background-color: #005891; }
.email-reject-popup__title { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.35; letter-spacing: -0.025em; color: #ffffff; text-align: center; }
.email-reject-popup__close { position: absolute; top: 50%; right: 18px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; background: transparent; color: #ffffff; cursor: pointer; transform: translateY(-50%); }
.email-reject-popup__close:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.email-reject-popup__body { box-sizing: border-box; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: 0 40px; text-align: center; }
.email-reject-popup__text { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.65; letter-spacing: -0.025em; color: #000000; word-break: keep-all; }
.email-reject-popup__text strong { font-weight: 700; }
.email-reject-popup__text-mobile { display: none; }
.email-reject-popup__date { margin: 24px 0 0; font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.025em; color: #000000; }
body.is-email-reject-open { overflow: hidden; }

/* 접근성 유틸 */
caption { width: 1px; height: 1px; margin: -1px; position: absolute; border: none; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.hidden { width: 1px; height: 1px; margin: -1px; position: absolute; border: none; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip_nav a { position: absolute; top: -100px; width: 100%; background-color: #000; color: #fff; transition: top 0.3s; height: 30px; line-height: 30px; z-index: 9999; text-align: center; }
.skip_nav a:focus { top: 0; }

/* 미디어 쿼리 */
@media (prefers-reduced-motion: reduce) {
  .quick-menu__inner, .quick-menu__toggle-icon { transition: none; }
  .site-header__mega-panel:not([hidden]) { animation: none; }
}
@media (max-width: 1024px) {
  .site-drawer__menu { grid-template-columns: repeat(3, 1fr); column-gap: 30px; row-gap: 60px; }
}
@media (max-width: 930px) {
  .site-footer { height: auto; padding: 43px 0 55px; text-align: center; }
  .site-footer__inner { flex-direction: column; align-items: center; height: auto; min-height: 0; padding-top: 0; gap: 26px; }
  .site-footer__brand { display: none; }
  .site-footer__info { width: 100%; flex: 0 0 auto; }
  .site-footer__links { justify-content: center; margin-bottom: 23px; }
  .site-footer__addr { margin-bottom: 4px; }
  .site-footer__family { width: 240px; margin-top: 0; margin-left: 0; }
  .site-footer__family-trigger { width: 240px; }
}
/* PC·태블릿(769+): 전체 메뉴 닫기 — utils 안 X만 표시 (모바일은 KO|EN+닫기) */
@media (min-width: 769px) {
  .site-drawer__bar .site-drawer__utils { display: flex; flex-shrink: 0; align-items: center; margin-left: auto; margin-right: 0; }
  .site-drawer__bar .site-drawer__lang { display: none; }
  .site-drawer__close,
  .site-drawer__close-icon--pc { width: 19px; height: 19px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .site-header { overflow: visible; }
  .site-header__bar { justify-content: flex-start; overflow: hidden; }
  .site-header__nav { flex: 1 1 auto; min-width: 0; max-height: var(--header-height); padding-right: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .site-header__nav::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }
  .site-header__logo { flex-basis: 130px; }
  .site-header__logo--eng {flex-basis: 190px; }
  .site-header__utils { flex-shrink: 0; }
}
@media (max-width: 768px) { 
  .site-header__bar { min-height: 72px; }
  .quick-menu { --quick-menu-top: calc(72px + 50px); --quick-menu-panel-w: 119px; --quick-menu-panel-h: 220px; --quick-menu-toggle-w: 26px; --quick-menu-toggle-h: 44px; --quick-menu-item-gap: 18px; --quick-menu-link-font-size: 12px; --quick-menu-link-line-height: 1.35; }
  .quick-menu__inner::before, .quick-menu__inner::after { content: none; }
  .quick-menu__inner { width: calc(var(--quick-menu-toggle-w) + var(--quick-menu-panel-w)); height: var(--quick-menu-panel-h); background-color: var(--quick-menu-bg); -webkit-clip-path: path('M 7 0 H 145 V 220 H 33 A 7 7 0 0 1 26 213 V 44 H 7 A 7 7 0 0 1 0 37 V 7 A 7 7 0 0 1 7 0 Z'); clip-path: path('M 7 0 H 145 V 220 H 33 A 7 7 0 0 1 26 213 V 44 H 7 A 7 7 0 0 1 0 37 V 7 A 7 7 0 0 1 7 0 Z'); }
  .quick-menu__toggle, .quick-menu__panel { background-color: transparent; margin-left: 0; border-radius: 0; }
  .quick-menu__link { padding-right: 0; }
  .quick-menu__toggle-icon { width: 8px; height: 13px; }
  .quick-menu.quick-menu--eng { --quick-menu-panel-w: 126px; --quick-menu-panel-h: 186px; --quick-menu-line-inset-left: 10px; --quick-menu-line-inset-right: 0; --quick-menu-link-font-size: 11px; --quick-menu-link-line-height: 1.35; }
  .quick-menu.quick-menu--eng .quick-menu__inner { -webkit-clip-path: path('M 7 0 H 161 V 186 H 33 A 7 7 0 0 1 26 179 V 44 H 7 A 7 7 0 0 1 0 37 V 7 A 7 7 0 0 1 7 0 Z'); clip-path: path('M 7 0 H 161 V 186 H 33 A 7 7 0 0 1 26 179 V 44 H 7 A 7 7 0 0 1 0 37 V 7 A 7 7 0 0 1 7 0 Z'); }
  .site-header__drawer-btn,
  .site-header__drawer-btn-icon { width: 28px; height: 22px; }
  .site-header__drawer-btn-icon { content: url('/resources/images/common/all_menu_mo.png'); }
  .site-header__mega { display: none !important; }
  .site-drawer__panel { display: flex; flex-direction: column; height: 100vh; max-height: 100vh; min-height: 100vh; background-color: #ffffff; transform: none; opacity: 1; transition: none; overflow: hidden; }
  .site-header__bar { min-height: 72px; }
  .site-drawer__bar { position: relative; flex-shrink: 0; height: 72px; background-color: #ffffff; border-bottom: 1px solid #005891; box-sizing: border-box; }
  .site-drawer__bar-inner { display: flex; align-items: center; justify-content: flex-start; height: 100%; min-height: 0; }
  .site-header__logo, .site-drawer__bar-inner .site-drawer__logo { flex: 0 0 auto; }
  .site-header__logo-link, .site-drawer__logo-link { min-height: 48px; }
  .site-header__logo-img,
  .site-drawer__logo-img { content: url('/resources/images/common/logo_mo.png'); height: 38px; transform: translateY(1px); }
  .site-header__logo--eng .site-header__logo-img,
  html[lang="en"] .site-drawer__logo-img { content: url('/resources/images/common/logo_mo_eng.png'); height: 36px; transform: translateY(1px); }
  /* 헤더와 동일: [KO|EN + 28×22 버튼] 한 덩어리 */
  .site-header__utils,
  .site-drawer__utils { display: flex; flex-shrink: 0; align-items: center; gap: 20px; margin-left: auto; margin-right: 0; }
  .site-drawer__lang { display: flex; align-items: center; gap: 10px; font-size: var(--fs-16); font-weight: 500; color: #999999; }
  .site-drawer__lang a { color: #999999; }
  .site-drawer__lang a.is-current { font-weight: 700; color: #000000; }
  .site-drawer__lang a[lang='en'] { font-weight: 400; }
  /* 닫기 버튼 박스 = 햄버거(28×22) 동일 → KO|EN 위치 유지 */
  .site-header__drawer-btn,
  .site-drawer__close { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 22px; padding: 0; }
  .site-drawer__close { color: #005891; }
  .site-drawer__close-icon--pc { display: none; }
  .site-drawer__close { overflow: hidden; }
  .site-drawer__close-icon--mo { display: block; width: 28px; height: 22px; max-width: none; object-fit: contain; object-position: center; }
  .site-drawer__close:focus-visible { outline: 2px solid #005891; outline-offset: 2px; }
  .site-drawer__body { flex: 1 1 auto; min-height: 0; height: auto; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); scrollbar-width: thin; scrollbar-color: rgba(0, 88, 145, 0.28) transparent; background-size: cover; }
  .site-drawer__body::-webkit-scrollbar { width: 5px; }
  .site-drawer__body::-webkit-scrollbar-thumb { background-color: rgba(0, 88, 145, 0.28); border-radius: 3px; }
  .site-drawer__body::-webkit-scrollbar-track { background-color: transparent; }
  .site-drawer__body { background-image: none; background-color: #ffffff; }
  .site-drawer__inner { display: block; padding-left: 0; padding-right: 0; padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
  .site-drawer__nav { padding-top: 0; padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px)); }
  .site-drawer__menu { display: block; margin: 0; padding: 0; }
  .site-drawer__col { border-bottom: 1px solid #cccccc; }
  .site-drawer__cat { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #000000; text-align: center; }
  .site-drawer__cat-btn { min-height: 76px; padding: 0 24px; color: inherit; text-align: center; transition: none; -webkit-tap-highlight-color: transparent; }
  .site-drawer__col.is-open .site-drawer__cat-btn { color: #ffffff; background-color: #005891; }
  .site-drawer__sublist { display: block; max-height: 0; overflow: hidden; padding: 0 24px; background-color: #eeeeee; text-align: center; opacity: 0; visibility: hidden; transition: max-height 0.28s ease, padding 0.28s ease, opacity 0.2s ease, visibility 0s linear 0.28s; }
  .site-drawer__col.is-open .site-drawer__sublist { max-height: 520px; padding: 50px 24px 60px; opacity: 1; visibility: visible; transition: max-height 0.32s ease, padding 0.32s ease, opacity 0.2s ease; }
  .site-drawer:not(.is-open) .site-drawer__sublist { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; visibility: hidden; }
  .site-drawer__sublist li + li { margin-top: 35px; }
  .site-drawer__sublist a { font-size: 20px; font-weight: 400; line-height: 1.25; color: #333333; }
  .site-drawer__sublist a:hover, .site-drawer__sublist a:focus-visible { color: #005891; font-weight: 700; }
  .site-header__nav { display: none; }
  .family-dropdown__panel { width: 240px; text-align: left; }
  /* 서브 비주얼 — 모바일(768px 이하): 높이 280px·배경 center(cover 상·하단 잘림 방지) */
  .sub-hero { min-height: 280px; padding: 56px 16px; background-position: center center; }
  .sub-hero__inner { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
  .sub-hero__title { margin-bottom: 8px; font-size: 32px; line-height: 1.2; }
  .sub-hero .breadcrumb { justify-content: center; gap: 0.2em 0.45em; font-size: 13px; line-height: 1.35; }
  .sub-hero .breadcrumb__sep { font-size: 0; line-height: 0; opacity: 1; }
  .sub-hero .breadcrumb__sep::before { content: "<"; font-size: 13px; line-height: 1; opacity: 0.7; }
  .email-reject-layer { padding: 24px 20px; }
  .email-reject-popup { width: 100%; max-width: 100%; height: auto; max-height: calc(100vh - 48px); overflow-y: auto; }
  .email-reject-popup__head { flex: 0 0 auto; height: auto; min-height: 56px; padding: 16px 48px; }
  .email-reject-popup__title { font-size: 20px; line-height: 1.4; }
  .email-reject-popup__close { right: 14px; width: 30px; height: 30px; }
  .email-reject-popup__body { flex: 0 0 auto; justify-content: flex-start; padding: 36px 20px 32px; }
  .email-reject-popup__text { font-size: 18px; line-height: 1.75; }
  .email-reject-popup__text-pc { display: none; }
  .email-reject-popup__text-mobile { display: block; }
  .email-reject-popup__date { margin-top: 28px; font-size: 18px; }
}

@media (max-width: 480px) {
  html[lang="en"] .site-footer__addr,
  html[lang="en"] .site-footer__copy { font-size: 12px; }
}

@media (max-width: 380px) {
  .site-footer__addr { font-size: 12px; }
  .site-footer__copy { font-size: 12px; }
}