/* header.css v2026-01-26
   - Header fixed 100px (+divider 1px)
   - GNB width 592 fixed
   - Mega fixed(top 90px) + clip-path open/close
   - Desktop Sitemap (>=1280): open when .site-header.is-open
   - Sitemap: open animation 200ms (close = instant)
*/

:root{
  --header-h:100px;
  --header-divider:0px;

  --frame-max-w:1280px;
  --frame-pad-x:40px;
  --frame-pad-y:10px;

  --container-max-w:1200px;
  --container-h:80px;
  --col-gap:40px;
  --side-col:181px;

  --gnb-w:592px;
  --gnb-col-w:88px;
  --gnb-gap:80px;

  --right-gap:40px;

  --cta-h:47px;

  --burger-w:27px;
  --burger-h:26px;
  --burger-pad-y:9.5px;

  --cta-dur:400ms;
  --cta-ease:ease-in-out;

  --mega-top:90px;
  --mega-h:306px;
  --mega-pad-top:60px;
  --mega-pad-bot:40px;

  --mega-dur:200ms;
  --mega-ease-in:cubic-bezier(0.16,1,0.3,1);
  --mega-ease-out:cubic-bezier(0.7,0,0.84,0);

  --sitemap-h:779px;
  --sitemap-title-top:90px;
  --sitemap-title-h:60px;

  --sitemap-panel-top:160px;
  --sitemap-panel-w:1200px;
  --sitemap-panel-h:619px;
  --sitemap-panel-pad-y:80px;
  --sitemap-panel-pad-x:160px;

  --sitemap-col-w:190px;
  --sitemap-gap:40px;

  --sitemap-dur:200ms;
  --sitemap-ease:cubic-bezier(0.16,1,0.3,1); /* “천천히 들어오고…” 느낌 */
}

html{scrollbar-gutter:stable;}
html,body{margin:0;padding:0;}
*,*::before,*::after{box-sizing:border-box;}

body{padding-top:calc(var(--header-h) + var(--header-divider));}

/* ===== Header shell ===== */
.site-header{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:var(--header-h);
  background:#fff;
  z-index:1000;
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.05);
}

.header-frame{
  width:100%;
  max-width:var(--frame-max-w);
  height:100%;
  margin:0 auto;
  padding:var(--frame-pad-y) var(--frame-pad-x);
}

.header-container{
  width:100%;
  max-width:var(--container-max-w);
  height:var(--container-h);
  margin:0 auto;
  display:grid;
  grid-template-columns:var(--side-col) 1fr var(--side-col);
  column-gap:var(--col-gap);
  align-items:center;
}

/* Left */
.header-logo{
  width:var(--side-col);
  height:var(--container-h);
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  text-decoration:none;
}
.header-logo-img{
  width:40px;
  height:35px;
  display:block;
  object-fit:contain;
}

/* Center */
.header-gnb-wrap{
  height:var(--container-h);
  width:var(--gnb-w);
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:center;
  position:relative;
}

.header-gnb{
  width:100%;
  height:24px;
  display:grid;
  grid-template-columns:repeat(4,var(--gnb-col-w));
  column-gap:var(--gnb-gap);
  align-items:center;
  justify-items:center;
}

.gnb-link{
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
}
/* ✅ GNB hover와 active를 동일 스타일로 */
.header-gnb .gnb-link:hover,
.header-gnb .gnb-link.is-active {
  color: var(--c-orange, #ED7011);
}
.gnb-link:focus-visible{
  outline:2px solid rgba(6,27,75,0.35);
  outline-offset:4px;
  border-radius:6px;
}

/* Right */
.header-right{
  width:var(--side-col);
  height:var(--container-h);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--right-gap);
  justify-self:end;
}

/* CTA */
.header-cta{display:inline-flex;align-items:center;text-decoration:none;}
.header-cta-svg{height:var(--cta-h);width:auto;display:block;}
.header-cta .cta-bg{transition:fill var(--cta-dur) var(--cta-ease);}
.header-cta .cta-arrow{
  transition:transform var(--cta-dur) var(--cta-ease);
  transform:translateY(0);
  transform-box:fill-box;
  transform-origin:center;
}
.header-cta:hover .cta-bg{fill:#ED7011;}
.header-cta:hover .cta-arrow{transform:translateY(-7px);}
.header-cta:focus-visible{
  outline:2px solid rgba(6,27,75,0.35);
  outline-offset:4px;
  border-radius:999px;
}

/* Burger */
.header-burger{
  width:var(--burger-w);
  height:var(--cta-h);
  padding:var(--burger-pad-y) 0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.header-burger .burger-icon{
  width:var(--burger-w);
  height:var(--burger-h);
  display:block;
}
.header-burger .burger-icon--close{display:none;}
.site-header.is-open .header-burger .burger-icon--menu{display:none;}
.site-header.is-open .header-burger .burger-icon--close{display:block;}
.header-burger:focus-visible{
  outline:2px solid rgba(6,27,75,0.35);
  outline-offset:4px;
  border-radius:8px;
}

/* ===== Mega ===== */
.header-mega{
  position:fixed;
  left:0;
  top:var(--mega-top);
  width:100%;
  height:var(--mega-h);
  background:#fff;
  z-index:1001;
  padding-top:var(--mega-pad-top);
  padding-bottom:var(--mega-pad-bot);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  clip-path:inset(0 0 100% 0);
  overflow:hidden;

  will-change:opacity,clip-path;
  transition:opacity var(--mega-dur) ease, clip-path var(--mega-dur) ease;
}

/* hover 열림 (원하면 유지) */
.header-gnb-wrap:hover .header-mega{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  clip-path:inset(0 0 0 0);
}

/* sitemap 오픈 상태에서는 mega 무조건 숨김 */
.site-header.is-open .header-mega{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* JS 제어 */
.header-gnb-wrap.is-mega-open .header-mega{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  clip-path:inset(0 0 0 0);
}

@keyframes megaIn{
  from{opacity:0;clip-path:inset(0 0 100% 0);}
  to{opacity:1;clip-path:inset(0 0 0 0);}
}
@keyframes megaOut{
  from{opacity:1;clip-path:inset(0 0 0 0);}
  to{opacity:0;clip-path:inset(0 0 100% 0);}
}

.header-gnb-wrap.is-mega-opening .header-mega{
  visibility:visible;
  pointer-events:auto;
  animation:megaIn var(--mega-dur) var(--mega-ease-in) both;
  transition:none;
}
.header-gnb-wrap.is-mega-closing .header-mega{
  visibility:visible;
  pointer-events:none;
  animation:megaOut var(--mega-dur) var(--mega-ease-out) both;
  transition:none;
}

@media (prefers-reduced-motion: reduce){
  .header-mega,
  .header-gnb-wrap.is-mega-opening .header-mega,
  .header-gnb-wrap.is-mega-closing .header-mega{
    transition:none;
    animation:none;
  }
}

.header-mega-frame{
  max-width:var(--frame-max-w);
  margin:0 auto;
  padding:0 var(--frame-pad-x);
}
.header-mega-grid{
  width:var(--gnb-w);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,var(--gnb-col-w));
  column-gap:var(--gnb-gap);
  align-items:start;
  justify-items:center;
}
.mega-col{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:40px;
  align-items:center;
}
.mega-link{
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
  text-align:center;
}
.mega-link:hover{color:#ED7011;}

/* 모바일 네비: 기본 숨김 */
.header-mobile-nav{display:none;}

/* ===== Mobile (<800px) ===== */
@media (max-width:799px){
  :root{
    --header-h:95px;
    --frame-pad-x:20px;
    --frame-pad-y:0px;
  }

  body{padding-top:calc(var(--header-h) + var(--header-divider));}

  .site-header{border-radius:0;}

  .header-frame{max-width:none;}
  .header-container{
    max-width:none;
    height:var(--header-h);
    grid-template-columns:auto 1fr auto;
    column-gap:0;
  }

  /* 로고: 왼쪽 20px (frame-pad-x로 처리됨) */
  .header-logo{
    width:auto;
    height:var(--header-h);
    justify-self:start;
  }

  /* GNB, CTA 숨김 */
  .header-gnb-wrap{display:none;}
  .header-cta{display:none;}

  /* 햄버거: 25x20, 오른쪽 20px (frame-pad-x로 처리됨) */
  .header-right{
    width:auto;
    justify-self:end;
    gap:0;
  }
  .header-burger{
    width:25px;
    height:auto;
    padding:0;
  }
  .header-burger .burger-icon{
    width:25px;
    height:20px;
  }

  /* 메가메뉴, 데스크탑 사이트맵 숨김 */
  .header-mega{display:none;}
  .header-sitemap{display:none !important;}

  /* ── Mobile Dropdown Nav ── */
  .header-mobile-nav{
    display:flex;
    position:absolute;
    top:var(--header-h);
    left:0;
    width:100%;
    background:#fff;
    padding:8px 20px 32px;
    flex-direction:column;
    gap:50px;
    border-bottom:1px solid rgba(165,171,175,0.5);
    border-radius:0;
    z-index:999;
    clip-path:inset(0 0 100% 0);
    visibility:hidden;
    transition:clip-path 400ms cubic-bezier(0.16,1,0.3,1), visibility 400ms ease;
  }
  .site-header.is-open .header-mobile-nav{
    clip-path:inset(0 0 0 0);
    visibility:visible;
  }

  /* 내용: 펼침 완료 후 페이드인 */
  .header-mobile-nav .mobile-nav-list,
  .header-mobile-nav .mobile-nav-cta{
    opacity:0;
    transition:opacity 200ms ease 0ms;
  }
  .site-header.is-open .header-mobile-nav .mobile-nav-list,
  .site-header.is-open .header-mobile-nav .mobile-nav-cta{
    opacity:1;
    transition:opacity 250ms ease 200ms;
  }

  /* 네비 리스트 */
  .mobile-nav-list{
    display:flex;
    flex-direction:column;
    gap:0;
  }

  /* 각 링크 아이템: 335x84 (좌우 패딩 20 빼면 width 자동) */
  .mobile-nav-link{
    display:flex;
    align-items:center;
    text-decoration:none;
    width:335px;
    max-width:100%;
    height:84px;
    -webkit-tap-highlight-color:transparent;
  }

  /* 각 아이템 (서브메뉴 있음) */
  .mobile-nav-item{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    width:335px;
    max-width:100%;
    height:auto;
    min-height:84px;
    position:relative;
    border-top:1px solid rgba(165,171,175,0.5);
  }
  .mobile-nav-item:first-child{
    border-top:none;
  }
  .mobile-nav-item .mobile-nav-link{
    flex:1;
    height:84px;
  }

  /* 펼침 화살표: 19x19 히트영역, 아이콘 13.06x7.13, 오른쪽 끝 */
  .mobile-nav-arrow{
    position:absolute;
    right:0;
    top:0;
    width:19px;
    height:84px;
    border:0;
    background:transparent;
    cursor:pointer;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform 300ms ease;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-nav-arrow svg{
    width:13.06px;
    height:7.13px;
  }
  .mobile-nav-arrow[aria-expanded="true"]{
    transform:rotate(180deg);
  }

  /* 서브메뉴 */
  .mobile-nav-sub{
    width:100%;
    display:none;
    flex-direction:column;
    gap:30px;
    padding:0 0 30px;
  }
  .mobile-nav-sub.is-open{
    display:flex;
  }
  .mobile-nav-sub-link{
    text-decoration:none;
    line-height:1;
    color:var(--c-g2,#605D5C);
    display:flex;
    align-items:flex-start;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-nav-sub-link:hover{color:var(--c-orange,#ED7011);}

  /* 서브메뉴 열렸을 때: 해당 아이템과 다음 아이템 사이 border 숨김 */
  .mobile-nav-item:has(.mobile-nav-sub.is-open){
    border-bottom:none;
  }
  .mobile-nav-item:has(.mobile-nav-sub.is-open) + .mobile-nav-item{
    border-top:none;
  }

  /* CTA 버튼: 데스크탑 SVG 재사용, 오른쪽 정렬 */
  .mobile-nav-cta{
    display:inline-flex;
    align-items:center;
    align-self:flex-end;
    text-decoration:none;
  }
  .mobile-nav-cta .header-cta-svg{
    height:47px;
    width:auto;
    display:block;
  }
  .mobile-nav-cta .cta-bg{transition:fill var(--cta-dur) var(--cta-ease);}
  .mobile-nav-cta .cta-arrow{
    transition:transform var(--cta-dur) var(--cta-ease);
    transform:translateY(0);
    transform-box:fill-box;
    transform-origin:center;
  }
  .mobile-nav-cta:hover .cta-bg{fill:#ED7011;}
  .mobile-nav-cta:hover .cta-arrow{transform:translateY(-7px);}
}

/* ===== Tablet (800-1279) ===== */
@media (max-width:1279px) and (min-width:800px){
  .header-cta{display:none;}
  .header-frame{max-width:none;}
  .header-container{
    max-width:none;
    grid-template-columns:1fr var(--gnb-w) 1fr;
    column-gap:0;
  }
  .header-logo{width:auto;justify-self:start;}
  .header-right{width:auto;justify-self:end;gap:0;}
  .header-gnb-wrap{justify-self:center;}
  .header-mega-frame{max-width:none;}
}

/* ===== Desktop Sitemap (>=1280) ===== */
.header-sitemap{display:none;}

@keyframes sitemapIn{
  from{opacity:0; transform:translateY(-14px);}
  to{opacity:1; transform:translateY(0);}
}

@media (min-width:1280px){
  .site-header.is-open{
    height:var(--sitemap-h);
    border-bottom:0;
  }
  .site-header.is-open .header-frame{display:none;}

  .header-sitemap{
    display:block;
    position:fixed;
    top:0; left:0;
    width:100%;
    height:var(--sitemap-h);
    background:#fff;
    z-index:2000;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-14px);
  }

  /* ✅ 열림: 애니메이션은 “열릴 때만” (닫힘은 즉시) */
  .site-header.is-open .header-sitemap{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .site-header.is-sitemap-opening .header-sitemap{
    animation:sitemapIn var(--sitemap-dur) var(--sitemap-ease) both;
  }

  .sitemap-frame{
    max-width:var(--frame-max-w);
    margin:0 auto;
    padding:var(--frame-pad-y) var(--frame-pad-x);
    position:relative;
    z-index:3;
  }

  .sitemap-topbar{
    max-width:var(--container-max-w);
    height:var(--container-h);
    margin:0 auto;
    display:grid;
    grid-template-columns:var(--side-col) 1fr var(--side-col);
    align-items:center;
  }
  .sitemap-spacer{width:var(--side-col);height:var(--container-h);}

  .sitemap-close{
    justify-self:end;
    width:var(--burger-w);
    height:var(--cta-h);
    padding:var(--burger-pad-y) 0;
    border:0;
    background:transparent;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    outline:none;
  }
  .sitemap-close:focus-visible{
    outline:2px solid rgba(6,27,75,0.35);
    outline-offset:4px;
    border-radius:8px;
  }
  .sitemap-close-icon{width:var(--burger-w);height:var(--burger-h);display:block;}

  .sitemap-topline{
    position:absolute;
    top:var(--sitemap-title-top);
    left:0;
    width:100%;
    height:var(--sitemap-title-h);
    z-index:2;
  }
  .sitemap-topline-inner{
    max-width:var(--container-max-w);
    height:100%;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    padding:0 var(--frame-pad-x);
  }
  .sitemap-dklogo{width:40px;height:35px;display:block;object-fit:contain;}
  .sitemap-hanja{width:250px;height:40px;display:block;object-fit:contain;}

  .sitemap-panel{
    position:absolute;
    top:var(--sitemap-panel-top);
    left:50%;
    transform:translateX(-50%);
    width:var(--sitemap-panel-w);
    height:var(--sitemap-panel-h);
    padding:var(--sitemap-panel-pad-y) var(--sitemap-panel-pad-x);
    z-index:2;
  }

  .sitemap-grid{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:repeat(4,var(--sitemap-col-w));
    column-gap:var(--sitemap-gap);
    align-items:start;
    align-content:start;
  }

  .sitemap-card{
    width:var(--sitemap-col-w);
    background:#fff;
    border:0;
    overflow:hidden;
    display:grid;
  }

  .sitemap-accent{background:var(--c-orange,#ED7011);width:100%;}
  .sitemap-divider{background:rgba(6,27,75,0.18);width:100%;}

  .sitemap-card-title{
    display:flex;
    align-items:center;
    padding:0 24px;
    text-decoration:none;
  }
  .sitemap-card-title--link:hover{color:var(--c-orange,#ED7011);}
  .sitemap-card-title--link:focus-visible{
    outline:2px solid rgba(6,27,75,0.35);
    outline-offset:-2px;
  }

  .sitemap-row{
    width:100%;
    display:flex;
    align-items:center;
    padding:0 24px;
    text-decoration:none;
    line-height:1;
    border:0;
    cursor:pointer;
  }
  .sitemap-row--sub{padding-left:34px;}
  .sitemap-row:hover{color:var(--c-orange,#ED7011);}
  .sitemap-row:focus-visible{
    outline:2px solid rgba(6,27,75,0.35);
    outline-offset:-2px;
  }

  /* Row heights */
  .sitemap-card--col1{grid-template-rows:4px 76px 2px 65px 59px 59px 45px 59px 45px 45px;}
  .sitemap-card--col2{grid-template-rows:4px 76px 2px 65px 59px 59px 45px 45px;}
  .sitemap-card--col3{grid-template-rows:4px 76px 2px 65px 45px 59px 45px;}
  .sitemap-card--col4{grid-template-rows:4px 76px 2px 65px 59px 59px;}
}