/*
  header-footer.css
  공통 헤더·푸터 컴포넌트 스타일. tokens.css 다음에 로드한다.
  색상·간격·라운드는 전부 tokens.css 변수를 참조하며 이 파일에서 새 값을 만들지 않는다.
*/

/* 스킵 링크 */
.skip-link{
  position: absolute;
  top: -120px;
  left: 12px;
  z-index: 100;
  background: var(--wood);
  color: var(--white);
  padding: 12px 18px;
  border-radius: var(--r);
  font-weight: 700;
  text-decoration: none;
  transition: top .18s ease-out;
}
.skip-link:focus{ top: 12px; }

/* ==========================================================================
   헤더
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--card);
}
.site-header__inner{
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header.is-scrolled{ box-shadow: var(--sh-1); }

.site-logo{
  flex: none;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.site-nav{ display: none; }

.site-header__cta{ display: none; }
.site-header__cta-mobile{
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
}

.site-header__menu-btn{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 767.98px){
  .site-nav.is-open{
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--line-2);
    box-shadow: var(--sh-2);
    padding: 8px 20px 20px;
  }
  .site-nav.is-open .site-nav__list{
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-nav.is-open .site-nav__list a{
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 12px;
    border-radius: var(--r);
    font-weight: 600;
    font-size: 16px;
    color: var(--ink-2);
    text-decoration: none;
  }
  .site-nav.is-open .site-nav__list a:active,
  .site-nav.is-open .site-nav__list a[aria-current="page"]{
    color: var(--wood);
    background: var(--wood-soft);
  }
}

@media (min-width: 768px){
  .site-nav{ display: block; }
  .site-header__menu-btn{ display: none; }

  .site-nav__list{
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-nav__list > li{ position: relative; }

  .site-nav__list a,
  .site-nav__list summary{
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 14px;
    border-radius: var(--r);
    font-weight: 600;
    font-size: 16px;
    color: var(--ink-2);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
  }
  .site-nav__list summary::-webkit-details-marker{ display: none; }
  .site-nav__list summary::marker{ content: ""; }

  .site-nav__list a:hover,
  .site-nav__list a:active,
  .site-nav__list a[aria-current="page"],
  .site-nav__list summary:hover{
    color: var(--wood);
    background: var(--wood-soft);
  }

  .site-nav__dropdown > details{ position: relative; }
  .site-nav__submenu{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-2);
  }
  .site-nav__submenu a{ height: 44px; padding: 0 12px; }

  .chev{ flex: none; transition: transform .18s ease-out; }
  details[open] > summary .chev{ transform: rotate(180deg); }

  .site-header__cta{
    display: inline-flex;
    min-height: 44px;
    padding: 0 22px;
    font-size: 15px;
  }
  .site-header__cta-mobile{ display: none; }
}

/* ==========================================================================
   푸터
   ========================================================================== */
.site-footer{
  background: var(--wood-deep);
  color: hsl(30 25% 92%);
}

.site-footer__inner{
  padding-block: 20px;
}

.site-footer__biz{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
}
.site-footer__biz span{
  font-size: 13px;
  line-height: 1.6;
  color: hsl(30 18% 82%);
  white-space: nowrap;
  padding-right: 16px;
  border-right: 1px solid hsl(30 15% 40%);
}
.site-footer__biz span:last-child{
  padding-right: 0;
  border-right: 0;
}
.site-footer__biz a{
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__bottom{ border-top: 1px solid hsl(24 28% 28%); }
.site-footer__bottom p{
  max-width: none;
  margin: 0;
  padding-block: 20px;
  font-size: 13px;
  color: hsl(30 12% 66%);
}

/* ==========================================================================
   모바일 하단 고정 CTA 바
   ========================================================================== */
body{ padding-bottom: 76px; }
@media (min-width: 768px){ body{ padding-bottom: 0; } }

.mobile-cta-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  gap: 8px;
  height: 64px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  transition: transform .18s ease-out;
}
.mobile-cta-bar.is-hidden{ transform: translateY(100%); }

.mobile-cta-bar__btn{
  flex: 1;
  gap: 8px;
  padding: 0 12px;
  font-size: 15px;
}
.mobile-cta-bar__btn svg{ flex: none; }

@media (min-width: 768px){
  .mobile-cta-bar{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .mobile-cta-bar,
  .chev,
  .skip-link{ transition: none !important; }
}