/* ══════════════════════════════════════════════════════════════
   About 소메뉴 탭 — GNB 바로 아래 한 줄 (2026-09-18 확정)

   생김새 — 시안 u1~u5 를 견준 뒤 하늘님이 조합해 정함:
     · 11px · 자간 .16em · 간격 44px                       ← u3
     · 현재 항목 굵기 500 진한 먹색 / 나머지 300 옅은 먹색  ← u5
     · 밑줄은 글씨 바로 아래 1px, 활성 항목에만. 가로 회색선(머리카락선) 없음
   모션 — 시안 m1~m5 중 **m1 차례로 나타남** 확정:
     · 로드 시 항목이 왼쪽부터 0.06초 간격으로 6px 떠오르며 나타난다

   마크업은 about-lab.js 가 GNB 에서 읽어 만든다.
   견주고 버린 판(자리 5안·생김새 5안·밑줄 5안·모션 5안)은
   html/docs/검수-2026-09-18/수정전-백업/butler-about-lab-* 에 있다.
   ══════════════════════════════════════════════════════════════ */
.bal-bar{
  position:relative; z-index:70;
  display:flex; justify-content:center; align-items:center;
  min-height:46px; padding:0 var(--gutter, 24px);
  background:#FBFAF8;
  font-family:'Noto Sans','Noto Sans KR',sans-serif; font-size:11px; letter-spacing:.16em; line-height:1;
}
.bal-tabs{ display:flex; align-items:center; gap:44px; margin:0; padding:0; }
.bal-tabs a{
  position:relative; padding:18px 0;
  color:rgba(17,17,17,.5); font-weight:300; text-decoration:none; white-space:nowrap;
  transition:color .2s ease;
  /* 차례로 나타남 — --i 는 about-lab.js 가 항목마다 넣는다(0,1,2…) */
  animation:balRise .5s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i, 0) * 60ms);
}
@keyframes balRise{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.bal-tabs a:hover{ color:#111; }
.bal-tabs a.on{ color:#111; font-weight:500; }
/* 밑줄 — 글씨 바로 아래, 활성 항목에만 */
.bal-tabs a.on::after{
  content:''; position:absolute; left:0; right:0; bottom:12px; height:1px; background:#111;
}

/* ── 모바일 — 가로로 흘려 스크롤 ── */
@media (max-width:767px){
  .bal-bar{ justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .bal-bar::-webkit-scrollbar{ display:none; }
  .bal-tabs{ gap:26px; }
  /* 자간 0 (2026-09-19 하늘님 지시).
     ⚠ 데스크톱은 .16em 그대로다. 넓은 화면에서는 자간이 벌어져야 한 줄이 헐겁게 읽히는데,
       폰에서는 같은 자간이 항목 하나를 필요 이상으로 길게 만들어 가로 스크롤을 늘린다. */
  .bal-bar{ letter-spacing:0; }
  .bal-tabs a{ letter-spacing:0; }
}

/* 감속 모드에서는 움직이지 않는다 — 확정된 생김새만 남는다 */
@media (prefers-reduced-motion: reduce){
  .bal-tabs a{ animation:none !important; transition:none !important; }
}

/* ══════════════════════════════════════════════════════════════
   좌우 여백 정렬 — 2026-09-28 검수
   좁은 화면에서 탭 줄이 본문보다 15px 더 안쪽에서 시작했다.
   `--gutter` 는 clamp 최솟값이 39px 이라 폰에서도 39px 로 굳는다 —
   넓은 화면용 값이다. 폰에서는 본문과 같은 24px 을 쓴다.
   (넓은 화면은 탭이 가운데정렬이라 이 여백이 눈에 보이지 않아 그대로 둔다.)
   ══════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .bal-bar{padding:0 24px;}
}