@charset "utf-8";
/* one-header.css — 헤더 / 메가메뉴 / 전체메뉴 / 모바일 메뉴 / 검색 모달
 *
 * 구조 (head.php)
 *   #one-hd            헤더. 기본 투명(비주얼 위) → .is-scrolled 배경 채움 → .is-mega-open 메가 열림
 *     .one-hd-inner      로고 / .one-gnb / .one-hd-util
 *     .one-gnb-list > .one-gnb-item > .one-gnb-link + .one-gnb-sub
 *                      1차 <li> 안에 2차 <ul> 을 두어 메가 열이 자동 정렬됩니다.
 *   #one-allmenu       PC 햄버거 전체메뉴 (전체화면)
 *   #one-mo-menu       모바일 메뉴 (전체화면 아코디언)
 *   .one-search-modal  사이트 검색
 *
 * 색은 아래 .one-hd / 패널 스코프의 지역 토큰으로 조정합니다.
 * (:root 는 팀 공통 common.css 소관이라 건드리지 않습니다)
 */

/* ============================
   헤더 공통 토큰
============================ */

.one-hd,
.one-allmenu,
.one-mo-menu,
.one-search-modal {
  --one-hd-h        : 90px;              /* 헤더 높이 (PC) */
  --one-hd-h-mo     : 56px;              /* 헤더 높이 (모바일) */
  --one-hd-pad-x    : 40px;              /* 좌우 여백 (PC) */
  --one-hd-bg       : #0d0d0d;           /* 패널·스크롤 시 배경 */
  --one-hd-txt      : #ffffff;           /* 1차 메뉴·로고 */
  --one-hd-txt-sub  : #b9b9b9;           /* 2차 메뉴 */
  --one-hd-line     : rgba(255, 255, 255, 0.25);
  --one-hd-ease     : cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 패널이 열려 있는 동안 배경 스크롤 잠금 */
html.one-scroll-lock,
html.one-scroll-lock body {
  overflow: hidden;
}

/* 스크롤바가 사라지면서 생기는 가로 밀림 보정.
   --one-sbw 는 잠그기 직전 head.php 가 실제 스크롤바 폭으로 넣습니다.
   패널(.one-allmenu/.one-mo-menu)은 inset:0 이라 보정 없이 전체 너비를 덮습니다. */
html.one-scroll-lock body,
html.one-scroll-lock .one-hd {
  box-sizing: border-box;
  padding-right: var(--one-sbw, 0px);
}

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


/* ============================
   헤더
============================ */

.one-hd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  color: var(--one-hd-txt);
  background: transparent;
  transition: background-color 0.35s var(--one-hd-ease);
}

/* 스크롤 시 / 메가 열렸을 때 배경 채움 */
.one-hd.is-scrolled,
.one-hd.is-mega-open {
  background-color: var(--one-hd-bg);
}

/* 메가가 열리면 헤더가 아래로 자라야 하므로 inner 에 고정 높이를 주지 않습니다.
   높이 밴드는 로고/유틸/GNB 링크가 각각 --one-hd-h 로 맞춥니다. */
.one-hd-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--one-gap-xl);
  padding: 0 var(--one-hd-pad-x);
}

/* 로고 */
.one-hd-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: var(--one-hd-h);
}

.one-hd-logo a {
  display: block;
  line-height: 0;
}

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

/* 로고 이미지가 없을 때의 워드마크 (head.php one_logo_tag) */
.one-logo-txt {
  display: block;
  color: var(--one-hd-txt);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.one-allmenu-logo .one-logo-txt { font-size: 28px; }
.one-mo-logo .one-logo-txt { font-size: 17px; }

/* 우측 유틸 */
.one-hd-util {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  height: var(--one-hd-h);
  gap: var(--one-gap-lg);
}

.one-hd-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: inherit;
}

.one-hd-user svg {
  width: 24px;
  height: 24px;
}

/* 햄버거 — 2줄 */
/* <button> 은 color 를 상속하지 않아(UA 기본색) currentColor 가 검정에 가까워집니다.
   배경이 채워져도 흰색을 유지해야 하므로 토큰으로 못박습니다. */
.one-hd-ham {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* 좌측 정렬 — 아래 줄이 짧아 보이도록 */
  justify-content: center;
  gap: 6px;
  width: 24px;
  height: 28px;
  padding: 0;
  color: var(--one-hd-txt);
  background: none;
  border: 0;
  cursor: pointer;
}

.one-hd-ham span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: width 0.3s var(--one-hd-ease);
}

/* 아래 줄은 짧게 — 호버하면 위 줄 길이까지 펴집니다 */
.one-hd-ham span:last-child {
  width: 60%;
}

.one-hd-ham:hover span:last-child,
.one-hd-ham:focus-visible span:last-child {
  width: 100%;
}


/* ============================
   GNB + 메가메뉴
   1차 <li> 가 곧 메가 열. 2차는 평소 숨김 → .is-mega-open 에서 펼침
============================ */

.one-gnb {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.one-gnb-list {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 3.4vw, 64px);
}

.one-gnb-item {
  position: relative;
  text-align: center;
}

.one-gnb-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--one-hd-h);
  padding: 0 2px;
  color: var(--one-hd-txt);
  font-size: 17px;
  font-weight: 600;
  line-height: var(--one-lh-lg);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s var(--one-hd-ease);
}

/* 현재 페이지 1차 메뉴 — 밑줄 */
.one-gnb-item.is-current > .one-gnb-link,
.one-gnb-item:hover > .one-gnb-link {
  border-bottom-color: currentColor;
}

/* 2차 — 메가 열 */
.one-gnb-sub {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s var(--one-hd-ease), opacity 0.25s var(--one-hd-ease),
              padding-top 0.4s var(--one-hd-ease);
}

.one-hd.is-mega-open .one-gnb-sub {
  max-height: 60vh;
  opacity: 1;
  padding-top: var(--one-gap-xl);
}

.one-gnb-sub > li + li {
  margin-top: var(--one-gap-lg);
}

.one-gnb-sub a {
  display: block;
  color: var(--one-hd-txt-sub);
  font-size: 15px;
  line-height: var(--one-lh-lg);
  white-space: nowrap;
  transition: color 0.2s var(--one-hd-ease);
}

.one-gnb-sub a:hover,
.one-gnb-sub .is-current > a {
  color: var(--one-hd-txt);
}

/* 메가 하단 여백 — 열렸을 때만 */
.one-mega-bg {
  height: 0;
  transition: height 0.4s var(--one-hd-ease);
}

.one-hd.is-mega-open .one-mega-bg {
  height: var(--one-space-s);
}

.one-gnb-empty {
  color: var(--one-hd-txt-sub);
  font-size: var(--one-caption);
}

.one-gnb-empty a {
  color: var(--one-hd-txt);
  text-decoration: underline;
}


/* ============================
   PC 전체메뉴 (햄버거)
============================ */

.one-allmenu {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--one-hd-bg);
  color: var(--one-hd-txt);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity 0.35s var(--one-hd-ease), visibility 0.35s var(--one-hd-ease);
}

.one-allmenu.is-open {
  opacity: 1;
  visibility: visible;
}

.one-allmenu-inner {
  width: 100%;
  max-width: var(--one-layout-lg);
  margin: 0 auto;
  padding: clamp(60px, 12vh, 140px) var(--one-hd-pad-x) var(--one-space-lg);
}

.one-allmenu-head {
  margin-bottom: clamp(48px, 9vh, 110px);
}

.one-allmenu-logo img {
  display: block;
  width: auto;
  max-height: 34px;
}

/* 열 — 1차 제목 + 구분선 + 2차 */
.one-allmenu-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--one-space-r) var(--one-gap-xl);
}

.one-allmenu-tit {
  display: block;
  padding-bottom: var(--one-gap-xl);
  color: var(--one-hd-txt);
  font-size: var(--one-p-tit);
  font-weight: 600;
  line-height: var(--one-lh-lg);
  border-bottom: 1px solid var(--one-hd-line);
}

.one-allmenu-sub {
  padding-top: var(--one-space-s);
}

.one-allmenu-sub > li + li {
  margin-top: var(--one-gap-lg);
}

.one-allmenu-sub a {
  display: block;
  color: var(--one-hd-txt-sub);
  font-size: var(--one-caption);
  line-height: var(--one-lh-lg);
  transition: color 0.2s var(--one-hd-ease);
}

.one-allmenu-sub a:hover {
  color: var(--one-hd-txt);
}

/* 하단 — 회원 링크·검색 */
.one-allmenu-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--one-gap-xl);
  margin-top: var(--one-space-lg);
  padding-top: var(--one-space-s);
  border-top: 1px solid var(--one-hd-line);
}

.one-allmenu-foot a,
.one-allmenu-search {
  padding: 0;
  color: var(--one-hd-txt-sub);
  font-size: var(--one-caption);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s var(--one-hd-ease);
}

.one-allmenu-foot a:hover,
.one-allmenu-search:hover {
  color: var(--one-hd-txt);
}

/* 닫기 X */
.one-allmenu-close,
.one-mo-close,
.one-search-close {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--one-hd-txt);
  background: none;
  border: 0;
  cursor: pointer;
}

.one-allmenu-close {
  position: fixed;
  top: calc((var(--one-hd-h) - 28px) / 2);
  right: var(--one-hd-pad-x);
  z-index: 1;
  color: var(--one-hd-txt);
}

.one-allmenu-close::before,
.one-allmenu-close::after,
.one-mo-close::before,
.one-mo-close::after,
.one-search-close::before,
.one-search-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: currentColor;
}

.one-allmenu-close::before,
.one-mo-close::before,
.one-search-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.one-allmenu-close::after,
.one-mo-close::after,
.one-search-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* ============================
   모바일 메뉴
============================ */

.one-mo-menu {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  background: var(--one-hd-bg);
  color: var(--one-hd-txt);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--one-hd-ease), visibility 0.3s var(--one-hd-ease);
}

.one-mo-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.one-mo-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--one-hd-h-mo);
  padding: 0 var(--one-space-safe);
}

.one-mo-logo img {
  display: block;
  width: auto;
  max-height: 22px;
}

.one-mo-util {
  display: flex;
  align-items: center;
  gap: var(--one-gap-r);
  color: var(--one-hd-txt);
}

.one-mo-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--one-space-safe) var(--one-space-r);
}

.one-mo-item {
  border-bottom: 1px solid var(--one-hd-line);
}

/* 1차 — 제목 + 화살표 */
.one-mo-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--one-gap-r);
  width: 100%;
  padding: var(--one-gap-xl) 0;
  color: var(--one-hd-txt);
  font-size: 15px;
  font-weight: 600;
  line-height: var(--one-lh-lg);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.one-mo-arrow {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--one-hd-ease);
}

.one-mo-item.is-open .one-mo-arrow {
  transform: translateY(2px) rotate(-135deg);
}

/* 2차 — 아코디언
   grid-template-rows: 0fr 은 "첫 번째 행"만 접습니다.
   <li> 를 직접 넣으면 2번째부터 auto 행이 되어 늘 펼쳐진 채로 보입니다.
   그래서 .one-mo-sub 의 자식은 .one-mo-sublist 하나뿐이어야 합니다.
   (마크업: head.php one_menu_mobile) */
.one-mo-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--one-hd-ease);
}

.one-mo-item.is-open > .one-mo-sub {
  grid-template-rows: 1fr;
}

.one-mo-sublist {
  min-height: 0;
  overflow: hidden;
}

.one-mo-sublist > li:first-child > a {
  padding-top: 0;
}

.one-mo-sublist > li:last-child > a {
  padding-bottom: var(--one-gap-xl);
}

.one-mo-sub a {
  display: block;
  padding: var(--one-gap-sm) 0;
  color: var(--one-hd-txt-sub);
  font-size: 14px;
  line-height: var(--one-lh-lg);
}

/* grid-template-rows 미지원 브라우저 폴백 */
@supports not (grid-template-rows: 0fr) {
  .one-mo-sub { display: none; }
  .one-mo-item.is-open > .one-mo-sub { display: block; }
  .one-mo-sublist { overflow: visible; }
}


/* ============================
   검색 모달
============================ */

.one-search-modal {
  position: fixed;
  inset: 0;
  z-index: 410;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--one-hd-ease), visibility 0.3s var(--one-hd-ease);
}

.one-search-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.one-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.one-search-dialog {
  position: relative;
  width: 100%;
  max-width: 680px;
  padding: var(--one-space-r) var(--one-space-safe);
  color: var(--one-hd-txt);
}

.one-search-close {
  position: absolute;
  top: 0;
  right: var(--one-space-safe);
  color: currentColor;
}

.one-search-title {
  margin-bottom: var(--one-space-s);
  font-size: var(--one-hd3);
  font-weight: 600;
  line-height: var(--one-lh-lg);
  text-align: center;
}

.one-search-form {
  display: flex;
  align-items: center;
  gap: var(--one-gap-r);
  border-bottom: 1px solid var(--one-hd-line);
}

.one-search-input {
  flex: 1 1 auto;
  height: 54px;
  padding: 0;
  color: var(--one-hd-txt);
  font-size: var(--one-body);
  background: none;
  border: 0;
}

.one-search-input::placeholder {
  color: var(--one-hd-txt-sub);
}

.one-search-input:focus {
  outline: none;
}

.one-search-submit {
  flex: 0 0 auto;
  padding: 0 var(--one-gap-r);
  color: var(--one-hd-txt);
  font-size: var(--one-caption);
  background: none;
  border: 0;
  cursor: pointer;
}


/* ============================
   반응형 — 태블릿 이하 (1024px)
   GNB·메가·PC 전체메뉴를 숨기고 모바일 메뉴로 전환
============================ */

@media all and (max-width: 1024px) {
  .one-hd-inner {
    align-items: center;
    padding: 0 var(--one-space-safe);
  }

  .one-hd-logo,
  .one-hd-util {
    height: var(--one-hd-h-mo);
  }

  .one-gnb,
  .one-mega-bg,
  .one-allmenu {
    display: none;
  }

  .one-hd-logo img {
    max-height: 22px;
  }

  .one-hd-util {
    gap: var(--one-gap-r);
  }

  /* 모바일에서는 헤더 배경을 항상 채웁니다 (시안 기준) */
  .one-hd {
    background-color: var(--one-hd-bg);
  }
}

@media all and (max-width: 639px) {
  .one-search-title {
    font-size: var(--one-p-tit);
  }
}


/* ============================
   다른 영역과의 관계
============================ */

/* 패널(전체메뉴·모바일메뉴·검색)이 열려 있는 동안 플로팅 퀵메뉴 숨김
   — 퀵메뉴 z-index(900)가 패널(400)보다 높아 겹칩니다 */
html.one-scroll-lock #one-quick-menu,
html.one-scroll-lock #one-quick-menu-mobile {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 헤더는 fixed 입니다.
   메인(.one-main-body)과 서브(.one-sub-visual)는 각자 상단 여백이 있어 그대로 두고,
   둘 다 없는 페이지만 헤더 높이만큼 밀어 줍니다. */
body:not(:has(.one-sub-visual)):not(:has(.one-main-body)) #wrapper {
  padding-top: var(--one-hd-h, 90px);
}

@media all and (max-width: 1024px) {
  body:not(:has(.one-sub-visual)):not(:has(.one-main-body)) #wrapper {
    padding-top: var(--one-hd-h-mo, 56px);
  }
}