/* subnav.css
   - Sub Nav (4분할)
   - 기본: G2
   - Hover: Black + underline(2px)
   - Active: Black + underline + active_point.svg(16x8)
   - Divider: 아래 1px만
*/

/* =========================
   Tokens (Sub Nav)
========================= */
:root{
  --subnav-h: 80px;
  --subnav-divider: rgba(165,171,175,.35);

  --subnav-underline-h: 2px;
  --subnav-underline-dur: 200ms;
  --subnav-underline-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --subnav-point-w: 16px;
  --subnav-point-h: 8px;
}

/* 바깥 배경(브라우저 전체 폭) */
.sub-nav{
  width: 100%;
  background: #fff;
  border-bottom: 1px solid var(--subnav-divider);
}

/* ✅ 1280 기준 영역 */
.sub-nav__inner{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  height: var(--subnav-h);
  display: flex;
  align-items: stretch;
}

/* ✅ N등분 (링크 개수만큼 자동) */
.sub-nav__menu{
  width: 100%;
  display: grid;
  grid-auto-flow: column;      /* 아이템을 가로로 쌓음 */
  grid-auto-columns: 1fr;      /* 각 아이템 = 1fr */
  align-items: stretch;
}

/* 링크(전체 칸 클릭되게) */
.sub-nav__link{
  position: relative;
  width: 100%;
  height: 100%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  /* ✅ 기본은 G2 */
  color: var(--c-g2, #605D5C);

  transition: color 160ms ease;
}

/* 라벨(텍스트) */
.sub-nav__label{
  display: inline-block;
  line-height: 1;
}

/* ✅ 밑줄(가운데서 퍼짐) */
.sub-nav__link::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;

  width: 0; /* 기본: 없음 */
  height: var(--subnav-underline-h);

  transform: translateX(-50%);
  background: var(--c-orange, #ED7011);

  transition: width var(--subnav-underline-dur) var(--subnav-underline-ease);
}

/* Hover: 글자 검정 + 밑줄 펼침 */
.sub-nav__link:hover{
  color: #000;
}
.sub-nav__link:hover::after{
  width: 100%;
}

/* Active: 글자 검정 + 밑줄 고정(항상 100%) */
.sub-nav__link.is-active{
  color: #000;
}
.sub-nav__link.is-active::after{
  width: 100%;
}

/* ✅ Active point (반원 SVG) */
.sub-nav__point{
  position: absolute;
  left: 50%;
  bottom: var(--subnav-underline-h); /* 밑줄 바로 위 */

  width: var(--subnav-point-w);
  height: var(--subnav-point-h);

  transform: translateX(-50%);

  background: url("/img/active_point.svg") no-repeat center / contain;
  display: block;

  opacity: 0; /* 기본 숨김 */
  pointer-events: none;
}
.sub-nav__link.is-active .sub-nav__point{
  opacity: 1;
}

/* 접근성 포커스 */
.sub-nav__link:focus-visible{
  outline: 2px solid rgba(6, 27, 75, 0.35);
  outline-offset: -2px;
  border-radius: 8px;
}