/* header.css — 고정 헤더 + GNB (원본 common.css 헤더 블록 재작성) */
.header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-h); background: transparent; z-index: 10; }
.header .header-inner { max-width: 1800px; width: 95%; height: 100%; margin: 0 auto; position: relative; }
.header .logo { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); width: 100px; height: 45px; z-index: 3; display: block; }
.header .logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }

.header .gnb { position: absolute; top: 0; display: flex; justify-content: center; width: 100%; height: 100%; overflow: hidden; z-index: 2; }
.header .gnb::before { content: ''; display: none; position: absolute; top: 100px; left: 0; width: 100%; height: 1px; background: #ddd; }
.header .gnb .depth1 { display: flex; }
.header .gnb .depth1 > li { width: 10.2em; }
.header .gnb .depth1 > li > a {
  padding: 15px 30px; position: relative; height: var(--header-h); display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 500; white-space: nowrap;
}
.header .gnb .depth2 { position: relative; padding: 20px 0 40px; }
.header .gnb .depth2::before {
  content: ''; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 0%; height: 2px; background: var(--accent-color); transition: 0.2s;
}
.header .gnb .depth2 > li > a { display: block; text-align: center; font-size: 16px; font-weight: 400; padding: 10px 15px; }
.header .gnb .close { display: none; position: fixed; top: 30px; right: 2.5%; width: 40px; height: 40px; }

.header-right { position: absolute; top: 50%; right: 5%; transform: translateY(-50%); z-index: 3; }
.header-contact { z-index: 2; }
.header-contact a {
  background: rgba(0,0,0,.7); color: #fff; font-size: 14px; font-weight: 500; width: 110px; height: 35px;
  display: flex; align-items: center; justify-content: center; border-radius: 35px; transition: background 0.2s;
}
.ico-arrow-link { width: 16px; height: 16px; background: url(/assets/img/ico-arrow-link.svg) no-repeat center/auto 100%; display: inline-block; margin-left: 6px; }
.header .hamburger { display: none; position: absolute; top: 50%; right: 2.5%; transform: translateY(-50%); width: 32px; height: 33px; z-index: 9; }
.header .hamburger a { overflow: hidden; display: block; position: relative; width: 100%; height: 100%; }
.header .hamburger .bar { position: absolute; left: 0; width: 100%; height: 2px; background: #111; border-radius: 2px; transition: 0.25s; }
.header .hamburger .bar:nth-child(1) { top: 22%; }
.header .hamburger .bar:nth-child(2) { top: 50%; }
.header .hamburger .bar:nth-child(3) { top: 78%; }

/* GNB 활성 페이지 표시 */
.header .depth1 > li.is-active > a { color: var(--accent-color); }

/* GNB 펼침 패널(호버/모바일 메뉴) — 원본과 동일하게 흰 배경 */
[data-header-gnb="opened"] .gnb { background: #fff; }

/* 테마 상태 */
[data-header-theme="transparent"] { color: #fff; }
.logo .logo-light { display: none; }
[data-header-theme="transparent"] .logo .logo-dark { display: none; }
[data-header-theme="transparent"] .logo .logo-light { display: block; }
[data-header-theme="transparent"] .hamburger .bar { background: #fff; }
[data-header-theme="light"], [data-header-sticky="true"] { color: #111; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
[data-header-sticky="true"] .logo img, [data-header-theme="light"] .logo img { filter: none; }
[data-header-sticky="true"] .hamburger .bar, [data-header-theme="light"] .hamburger .bar { background: #111; }
[data-hamburger="opened"] { color: #111; }
[data-hamburger="opened"] .gnb { background: #fff; }
[data-hamburger="opened"] .logo img { filter: none; }
[data-hamburger="opened"] .hamburger .bar:nth-child(1) { top: 50%; transform: rotate(45deg); }
[data-hamburger="opened"] .hamburger .bar:nth-child(2) { opacity: 0; }
[data-hamburger="opened"] .hamburger .bar:nth-child(3) { top: 50%; transform: rotate(-45deg); }

@media (hover: hover) and (pointer: fine) {
  .header .gnb .depth2:hover::before { width: 100%; }
  .header .gnb .depth2 > li > a:hover { color: var(--accent-color); }
  .header-contact a:hover { background: #000; }
  .header .depth1 > li > a:hover { color: var(--accent-color); }
}

@media screen and (max-width: 1400px) {
  .header .gnb .depth1 > li { width: 9em; }
}
@media screen and (max-width: 1240px) {
  .header .gnb { overflow-y: auto; }
  .header .gnb a { padding: 20px 0; }
  .header .gnb .nav { width: 90%; margin: 0 auto; }
  .header .hamburger { display: block; }
  .header .gnb { position: fixed; top: 0; right: -100%; width: 100%; height: 100svh; justify-content: flex-end; transition: right 0.5s; }
  .header .gnb a { position: relative; }
  .header .gnb .depth1 { flex-direction: column; padding-top: 92px; overflow-y: auto; }
  .header .gnb .depth1 > li { width: 100%; border-bottom: 1px solid #ddd; }
  .header .gnb .depth1 > li > a { text-align: left; padding: 20px 0; height: fit-content; font-size: 20px; justify-content: flex-start; }
  .header .gnb .depth1 > li.is-active > a { color: inherit; }
  .header .gnb .depth2 > li > a { text-align: left; }
  .header .gnb .depth1 > li > a::after {
    content: ''; display: block; width: 14px; height: 8px; background: url(/assets/img/ico-drop-dark.svg) no-repeat center/auto 100%;
    position: absolute; right: 5%; top: 50%; transform: translateY(-50%); transition: transform 0.25s;
  }
  .header .gnb .depth1 > li > a[aria-expanded="true"]::after { transform: translateY(-50%) scaleY(-1); }
  .header .gnb .depth2 { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; padding: 0; }
  .header .gnb .depth2 li:last-child > a { padding-bottom: 40px; }
}
@media screen and (max-width: 1024px) {
  .header .hamburger { padding: 0 6px; width: 40px; height: 40px; }
}
@media screen and (max-width: 767px) {
  .header { height: 80px; }
  .header .logo { width: 72px; height: 32px; left: 5%; }
  .header .hamburger { right: 5%; }
  .header .gnb .depth1 > li > a { font-size: 16px; }
  .header .gnb .depth2 > li > a { font-size: 14px; padding: 10px 0; }
  .header .gnb .depth2 li:last-child > a { padding-bottom: 20px; }
  .header-contact { display: none; }
}

/* 모바일 메뉴 슬라이드인 — 미디어 블록보다 뒤에 두어 right:-100%를 덮어씀 */
.header[data-hamburger="opened"] .gnb { right: 0; }