@charset "utf-8";

/* =============================================
   CSS 변수
   ============================================= */
:root {
  --hd-main-color: var(--main-color);
  --hd-nav-height: 84px;          /* 단일 헤더 바 높이 기준 */
  --hd-mega-bg: #2d1a2e;
  --hd-mega-text: #fff;
  --hd-mega-sub-text: rgba(255,255,255,0.65);
  --hd-mega-hover: rgba(255,255,255,0.10);
  --hd-mega-accent: #e8a0d8;
  --hd-mega-active-col: rgba(255,255,255,0.06);
  --hd-transition: 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   반응형 유틸리티
   ============================================= */
.pc_v { display: block; }
.mo_v { display: none;  }

/* =============================================
   공통
   ============================================= */
.one-container { min-height: 80vh; }

/* 헤더: 모든 페이지에서 콘텐츠(히어로/서브 배너) 위에 투명 오버레이 */
.one-hd-con {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background-color: transparent;
  z-index: 500;
}
.one-hd-con img { width: 100%; height: auto; }

/* =============================================
   PC 헤더 — 1단 통합 바 (로고 | 내비 | 유틸)
   ============================================= */
.one-hd-bar {
  position: relative;                 /* 메가패널 기준점 */
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ececec;
  z-index: 501;
  transition: background-color var(--hd-transition), border-color var(--hd-transition);
}

/* 홈 & 상단(비고정) 상태 = 완전 투명 + 흰 구분선 */
.one-hd-bar:not(.fixed) {
  background-color: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.28);
}

/* 스크롤 시 상단 고정 → 항상 흰 배경 바로 전환 (JS가 .fixed 토글) */
.one-hd-bar.fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
  border-bottom: 1px solid #ececec;
  box-shadow: 0 2px 20px rgba(0,0,0,0.10);
  animation: oneSlideDown 0.3s ease forwards;
}

@keyframes oneSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* 바 내부 3분할 레이아웃 */
.one-hd-inner {
  max-width: 1280px;
  margin: 0 auto;
  min-height: var(--hd-nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 14px 16px;
}

/* ── 로고 (좌) ── */
.one-hd-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.one-hd-logo a { display: inline-flex; align-items: center; }

.one-hd-logo img {
  width: 112px;
  height: auto;
  display: block;
}

/* 로고 이미지 상태별 스왑
   ─ 기본(서브페이지 / 스크롤 고정) : 컬러 로고 노출
   ─ 홈 상단(투명 오버레이)          : 흰색 로고 노출          */
.one-hd-logo .logo-light { display: none; }
.one-hd-logo .logo-dark  { display: block; }

.one-hd-bar:not(.fixed) .one-hd-logo .logo-light { display: block; }
.one-hd-bar:not(.fixed) .one-hd-logo .logo-dark  { display: none; }

.one-hd-bar.fixed .one-hd-logo img {
  filter: invert(1);
  opacity: .9;
}

/* ── 내비게이션 (중앙) ── */
.one-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.one-nav-inner {
  width: 100%;
  display: flex;
  justify-content: center;
}
.one-nav-inner .menu-main_nav-container,
.one-nav-inner > nav {
  width: 100%;
  margin: 0;
}

.one-nav-inner .one-main-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 40px);
  margin: 0; padding: 0;
  list-style: none;
}

/* 1단 li */
.one-nav-inner .one-main-menu > .menu-item {
  position: static;
  display: flex;
  align-items: center;
}

/* 1단 링크 (기본 = 어두운 글씨: 서브페이지 / 고정 상태) */
.one-nav-inner .one-main-menu > .menu-item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 2px;
  font-size: 16px;
  font-weight: 400;
  color: var(--txt-base);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color var(--hd-transition);
}

/* 언더라인 인디케이터 */
.one-nav-inner .one-main-menu > .menu-item > a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background-color: var(--hd-main-color);
  transform: translateX(-50%);
  transition: width var(--hd-transition), background-color var(--hd-transition);
  border-radius: 2px 2px 0 0;
}

.one-nav-inner .one-main-menu > .menu-item:hover > a,
.one-nav-inner .one-main-menu > .menu-item.is-mega-active > a,
.one-nav-inner .one-main-menu > .menu-item.current-menu-parent > a,
.one-nav-inner .one-main-menu > .menu-item.current-menu-item > a {
  color: var(--hd-main-color);
}

.one-nav-inner .one-main-menu > .menu-item:hover > a::after,
.one-nav-inner .one-main-menu > .menu-item.is-mega-active > a::after,
.one-nav-inner .one-main-menu > .menu-item.current-menu-parent > a::after,
.one-nav-inner .one-main-menu > .menu-item.current-menu-item > a::after {
  width: 100%;
}

/* 홈 투명 상태: 메뉴 = 흰 글씨 / 흰 언더라인 */
.one-hd-bar:not(.fixed) .one-nav-inner .one-main-menu > .menu-item > a,
.one-hd-bar:not(.fixed) .one-nav-inner .one-main-menu > .menu-item:hover > a,
.one-hd-bar:not(.fixed) .one-nav-inner .one-main-menu > .menu-item.is-mega-active > a,
.one-hd-bar:not(.fixed) .one-nav-inner .one-main-menu > .menu-item.current-menu-parent > a,
.one-hd-bar:not(.fixed) .one-nav-inner .one-main-menu > .menu-item.current-menu-item > a { color: #fff; }
.one-hd-bar:not(.fixed) .one-nav-inner .one-main-menu > .menu-item > a::after { background-color: #fff; }


/* ▼ Astra 드롭다운 화살표 / 토글 완전 제거 */
.one-nav-inner .one-main-menu .sub-menu-toggle,
.one-nav-inner .one-main-menu .dropdown-icon,
.one-nav-inner .one-main-menu > .menu-item > a > span[class*="arrow"],
.one-nav-inner .one-main-menu > .menu-item > a > span[class*="toggle"],
.one-nav-inner .one-main-menu > .menu-item > a > .ast-menu-toggle {
  display: none !important;
}
.menu-main_nav-container .ast-menu-toggle {
  display: none;
}

/* WordPress가 생성한 sub-menu 원본 – 완전 숨김 (JS가 재조립) */
.one-nav-inner .one-main-menu > .menu-item > .sub-menu {
  display: none !important;
}

/* ── 유틸: 언어 + 전화 (우) ── */
.one-hd-util {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.one-hd-lang {
  display: flex;
  align-items: center;
  gap: 8px;
}
.one-hd-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: auto;
  border-radius: 3px;
  overflow: hidden;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.one-hd-lang a img { width: 100%; height: 100%; object-fit: cover; }

.one-hd-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hd-main-color);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.one-hd-tel .tel-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hd-main-color);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.one-hd-tel .tel-ico .ti { font-size: 15px; color: #fff; }

/* =============================================
   PC – 풀와이드 메가패널 (JS로 생성·제어)
   ============================================= */
#one-mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: var(--hd-mega-bg);
  box-shadow: 0 24px 48px rgba(0,0,0,0.28);

  /* 닫힘 상태 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--hd-transition),
    transform var(--hd-transition),
    visibility 0s linear 0.26s;

  pointer-events: none;
}

#one-mega-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--hd-transition),
    transform var(--hd-transition),
    visibility 0s linear 0s;
  pointer-events: auto;
}

/* 패널 내부 레이아웃 */
.one-mega-inner {
  display: flex;
  align-items: flex-start;
  max-width: 1200px;
  width: 88%;
  margin: 0 auto;
  padding: 36px 0 32px;
  gap: 0;
}

.one-mega-col {
  flex: 1;
  padding: 0 20px;
  border-right: 1px solid rgba(255,255,255,0.07);
  transition: background-color var(--hd-transition);
  border-radius: 6px;
}
.one-mega-col:last-child { border-right: none; }
.one-mega-col.is-active { background-color: var(--hd-mega-active-col); }
.one-mega-col-title { display: none; }

.one-mega-col ul { list-style: none; margin: 0; padding: 0; }
.one-mega-col ul li { margin-bottom: 2px; }
.one-mega-col ul li a {
  display: block;
  padding: 8px 10px;
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--hd-mega-sub-text);
  text-decoration: none;
  border-radius: 5px;
  white-space: nowrap;
  transition:
    background-color var(--hd-transition),
    color var(--hd-transition),
    padding-left var(--hd-transition);
  line-height: var(--lh-normal);
  text-align: center;
}
.one-mega-col ul li a:hover {
  background-color: var(--hd-mega-hover);
  color: #fff;
  padding-left: 14px;
}

.one-mega-col--solo a.one-mega-solo-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  border-radius: 6px;
  transition: background-color var(--hd-transition), color var(--hd-transition);
}
.one-mega-col--solo a.one-mega-solo-link:hover {
  background-color: var(--hd-mega-hover);
  color: #fff;
}

/* =============================================
   메가메뉴 딤 오버레이
   ============================================= */
.one-mega-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.40);
  z-index: 499;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hd-transition), visibility 0s linear 0.26s;
  pointer-events: none;
}
.one-mega-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--hd-transition), visibility 0s linear 0s;
}

/* =============================================
   모바일 헤더 – 바
   ============================================= */
.one-mo-hd {
  /* 최상단: 히어로 위 투명 오버레이 */
  background-color: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.28);
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 200;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 스크롤 시(.is-active): 흰 배경 바로 전환 */
.one-mo-hd.is-active {
  background-color: #fff;
  border-bottom-color: #e8e8e8;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.one-mo-hd-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 64px;
}

.one-mo-hd-lf,
.one-mo-hd-rg {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
}
.one-mo-hd-lf { justify-content: flex-start; }
.one-mo-hd-rg { justify-content: flex-end; }

.one-mo-tel-btn {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: #00000040;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--hd-transition);
}
.one-mo-hd.is-active .one-mo-tel-btn { background: var(--hd-main-color);}
.one-mo-tel-btn:hover { background: var(--main-color); }
.one-mo-tel-btn .ti { font-size: 18px; color: #fff; }
.one-mo-tel-btn img { width: 20px; height: 20px; object-fit: contain; }

.one-mo-hd-ct { flex: 1; display: flex; justify-content: center; }
.one-mo-hd-logo { line-height: 1; }
.one-mo-hd-logo a,
.one-mo-hd-logo img { display: block; max-height: 34px; width: auto; }

/* 로고 스왑 — 최상단: 흰 로고(sticky-off) / 스크롤 시: 컬러 로고(sticky-on) */
.one-mo-hd-logo .sticky-on  { display: none; }
.one-mo-hd-logo .sticky-off { display: block; width: 100%;}
.one-mo-hd.is-active .one-mo-hd-logo .sticky-on  { display: block; }
.one-mo-hd.is-active .one-mo-hd-logo .sticky-off { display: none; }

/* 햄버거 버튼 */
.one-mo-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 10;
  border-radius: 50%;
  background: #00000040;
}
.one-mo-hd.is-active .one-mo-menu-btn {    background: var(--main-color);}
.one-mo-menu-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
  transition: background-color 0.2s ease;
}
.one-mo-menu-icon::before,
.one-mo-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
  transition: transform 0.25s ease, top 0.25s ease, opacity 0.2s ease;
}
.one-mo-menu-icon::before { top: -6px; }
.one-mo-menu-icon::after  { top: 6px; }

.one-mo-bar {
  display: block;
  width: 18px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  transform-origin: center;
}
.one-mo-bar--top { top: 5px; }
.one-mo-bar--mid { top: 11px; }
.one-mo-bar--btm { top: 17px; }

.one-mo-menu-btn[aria-expanded="true"] .one-mo-menu-icon,
.one-mo-menu-btn.is-active .one-mo-menu-icon { background-color: transparent; }
.one-mo-menu-btn[aria-expanded="true"] .one-mo-menu-icon::before,
.one-mo-menu-btn.is-active .one-mo-menu-icon::before { top: 0; transform: rotate(45deg); }
.one-mo-menu-btn[aria-expanded="true"] .one-mo-menu-icon::after,
.one-mo-menu-btn.is-active .one-mo-menu-icon::after  { top: 0; transform: rotate(-45deg); }

/* =============================================
   모바일 – 풀다운 패널
   ============================================= */
.one-mo-nav {
  position: absolute;
  top: 100%; left: 0; width: 100%;
  overflow-y: auto; max-height: 0;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: #fff;
  border-top: 2px solid #ffffff6b;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.one-mo-hd.is-active .one-mo-nav  { border-color: var(--hd-main-color);}
.one-mo-nav .ast-menu-toggle { display: none; }
.one-mo-nav.is-open { max-height: var(--one-mo-nav-h, 80vh); }

.one-mo-menu { list-style: none; margin: 0; padding: 0; }
.one-mo-menu > .menu-item { border-bottom: 1px solid #f0f0f0; }
.one-mo-menu > .menu-item:last-child { border-bottom: none; }

.one-mo-menu > .menu-item > .one-mo-item-wrap {
  display: flex; align-items: center; justify-content: space-between;
}
.one-mo-menu > .menu-item > a,
.one-mo-menu > .menu-item > .one-mo-item-wrap > a {
  flex: 1; display: block;
  padding: 15px 20px;
  font-size: 15px; font-weight: 600; color: var(--txt-base);
  text-decoration: none;
  transition: color 0.15s ease;
  letter-spacing: -0.01em;
}

.one-mo-accordion-btn {
  flex: 0 0 48px;
  display: flex; align-items: center; justify-content: center;
  height: 50px; background: none; border: none;
  cursor: pointer; color: var(--txt-light);
  transition: color 0.15s ease; padding: 0;
}
.one-mo-accordion-btn::after {
  content: "";
  display: block; width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s ease;
}
.one-mo-accordion-btn.is-open { color: var(--hd-main-color); }
.one-mo-accordion-btn.is-open::after { transform: rotate(-135deg) translateY(-2px); }

.one-mo-menu > .menu-item > a:hover,
.one-mo-menu > .menu-item.current-menu-item > a,
.one-mo-menu > .menu-item.current-menu-parent > a { color: var(--hd-main-color); }

.one-mo-menu .sub-menu {
  list-style: none; margin: 0; padding: 0;
  overflow: hidden; max-height: 0;
  transition: max-height 0.3s ease;
  background-color: #faf7fa;
}
.one-mo-menu .sub-menu.is-open { max-height: 600px; }
.one-mo-menu .sub-menu > .menu-item { border-top: 1px solid #efe8ef; }
.one-mo-menu .sub-menu > .menu-item > a {
  display: block;
  padding: 12px 20px 12px 32px;
  font-size: 14px; color: #555;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  position: relative;
}
.one-mo-menu .sub-menu > .menu-item > a::before {
  content: "·";
  position: absolute; left: 20px;
  color: var(--hd-main-color);
  font-size: 16px; line-height: 1;
  top: 50%; transform: translateY(-50%);
}
.one-mo-menu .sub-menu > .menu-item > a:hover {
  background-color: #f0e8f0;
  color: var(--hd-main-color);
}

/* =============================================
   태블릿 이하 (≤ 1024px)
   ============================================= */
@media all and (max-width: 1024px) {
  .pc_v { display: none !important; }
  .mo_v { display: block; }
  .one-mega-overlay,
  #one-mega-panel { display: none !important; }
  /* 모바일은 별도 고정 흰 헤더(.one-mo-hd) 사용 — PC 오버레이 규칙 무효화 */
  .one-hd-con { position: static; background-color: transparent; }
  .one-container { padding-top: 0px; }
}

/* =============================================
   모바일 (≤ 639px)
   ============================================= */
@media all and (max-width: 639px) {
  .one-mo-hd-bar { height: 58px; }
.one-mo-hd-logo img {
    max-height: 40px;
    margin-top: -4px;
}

}