@charset "utf-8";

/* ============================================================
   서브 페이지 공통 — 하위 메뉴 탭
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  node 2048:1476 · 2048:1365

   정보센터 아래 네 페이지가 같은 줄을 쓴다.
   현재 항목만 코발트 굵게, 그 아래 90 × 3 밑줄이 깔린다.

   쓰는 법
     <link rel="stylesheet" href="../css/page-tabs.css">
     <nav class="sub-tabs" aria-label="정보센터 메뉴">
       <a class="sub-tabs__link" href="…" aria-current="page">E-브로셔</a>
       …
     </nav>
   ============================================================ */

.sub-tabs {
  display: flex;
  justify-content: center;
  gap: calc(45 * var(--u));
  margin-top: calc(70 * var(--u));    /* 시안 히어로 아래 94 */
}

.sub-tabs__link {
  position: relative;
  padding-bottom: calc(12 * var(--u));
  font-size: calc(23 * var(--u));
  line-height: 1.52;                  /* 시안 35/23 */
  letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--sub-tabs-ink, #222);
  text-decoration: none;
  transition: color .25s ease;
}
.sub-tabs__link:hover,
.sub-tabs__link:focus-visible { color: var(--sub-tabs-point, #135a9c); }

.sub-tabs__link[aria-current="page"] {
  font-weight: 700;
  color: var(--sub-tabs-point, #135a9c);
}
/* 시안 Line 46 — 90 × 3 #135a9c. 폭은 글자에 맞춰 늘어난다 */
.sub-tabs__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  min-width: calc(90 * var(--u));
  height: calc(3 * var(--u));
  transform: translateX(-50%);
  background: var(--sub-tabs-point, #135a9c);
}

/* 좁은 화면 — 네 개가 한 줄에 안 들어간다. 가로로 넘겨서 본다 */
@media (max-width: 768px) {
  .sub-tabs {
    justify-content: flex-start;
    gap: calc(20 * var(--u));
    margin-top: var(--sp-block);       /* 히어로 → 서브탭 (히어로 아래 14 와 겹친다) */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sub-tabs::-webkit-scrollbar { display: none; }
  .sub-tabs__link {
    flex: none;
    padding-bottom: calc(8 * var(--u));
    font-size: calc(15 * var(--u));
  }
  .sub-tabs__link[aria-current="page"]::after { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sub-tabs__link { transition: none; }
}