/* segment.css — 세그먼트 트랙 (서브탭·자격증 탭 공통 부품)
   2026-09-03 학습화면 정리 Phase 0 (docs/학습화면-디자인-정리-명세-2026-09.md §1-4)
   ─────────────────────────────────────────────────────────────────
   탭은 2종만 쓴다: 메인 탭 = 언더라인형(.tabs, 각 페이지 인라인) / 서브탭·자격증 탭 = 이 세그먼트 트랙.
   캡슐 버튼 + 그림자 + hover translateY 는 폐기.

   표준 클래스: .seg > .seg__item(.active)
   별칭(마크업 유지용): .sub-tabs > .sub-tab-button   ← cft / si1 / si2 의 문제풀기·학습분석 서브탭
   복제: wrong-note.css 의 .wrong-note-cert-tabs / .wn-sort 가 같은 값을 갖는다 — 여기 값을 바꾸면 같이 (docs/연계-관계.json AN)

   다크: 색은 전부 design-tokens 토큰(--seg-bg / --seg-active-bg / --color-text-*)이라 다크 규칙이 따로 없다.
   로드: cft.html · si1.html · si2.html (design-tokens.css 다음) */

.seg,
.sub-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--seg-bg, var(--color-bg-secondary, #f5f5f7));
  border-radius: 10px;
  overflow-x: auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;               /* 내용만큼, 넘치면 100% + 가로 스크롤 (줄바꿈 금지) */
  max-width: 100%;
  margin: 0 auto 24px;              /* 가운데 정렬 (오너 결정 2026-09-03 텔레그램). 넘치면 100% 폭 + 가로 스크롤 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar,
.sub-tabs::-webkit-scrollbar { display: none; }

.seg__item,
.sub-tab-button:not(.admin-only),
.tag-search-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;                 /* 트랙 패딩 3px 포함 44px 탭 영역 */
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary, #6e6e73);
  font-family: inherit;
  font-size: var(--fs-13, 13px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sub-tab-button::before { display: none; }

.seg__item:hover,
.sub-tab-button:hover,
.tag-search-link:hover {
  color: var(--color-text-primary, #1d1d1f);
}

.seg__item.active,
.sub-tab-button.active {
  background: var(--seg-active-bg, #ffffff);
  color: var(--color-text-primary, #1d1d1f);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}