홈 주제 탭 — 배포본 실측
출처: https://hyeonworks.com (frontend 2b2f443) — 2026-09-04, Playwright 로 getComputedStyle
재현: 홈에서 개발자도구 콘솔에 아래를 붙여 넣으면 같은 값이 나온다.

  const s = document.querySelector('.home-comparison');
  [...s.querySelectorAll('.home-topic-tabs button')].map(b => {
    const cs = getComputedStyle(b);
    return { text: b.textContent, selected: b.getAttribute('aria-selected'),
             fontSize: cs.fontSize, fontWeight: cs.fontWeight,
             color: cs.color, background: cs.backgroundColor,
             pseudoAfter: getComputedStyle(b, '::after').content };
  });

======================================================================
[탭]

  고른 탭   "OAuth/OIDC 인증 경계"   aria-selected=true
    font-size      14px          ← 2단계에서는 30px 이었다
    font-weight    560           ← 2단계에서는 650
    color          rgb(23,24,27)      (--ink)
    background     rgb(231,231,227)   ← 알약. 색만으로는 「진한 글자」로 읽힌다
    border-radius  17px
    ::after        none          ← 파란 밑줄 제거 확인

  안 고른 탭 "JPA 피드 조회 성능"    aria-selected=false
    color          rgb(108,111,118)   (--faint)
    background     rgba(0,0,0,0)      투명

[묶음의 결속 — 「글자만 떠 있다」를 고친 부분]

  .home-topic-panel  border-top     1px rgb(200,203,207)   (--line-strong)
  .home-comparison ul border-top    0px                    ← 윗선을 패널로 옮겼다
  탭 줄 아래 ~ 패널 위 간격          0px                    ← 탭이 그 선에 바로 얹힌다

  선이 목록에 있으면 축 이름 줄만 선 위로 밀려 나가 탭과 한 덩어리처럼 보이고,
  정작 목록은 저 혼자 시작한다. 그 상태가 home-topic-tabs-2.png 다.

[왼쪽 끝 정렬 — 알약의 좌우 여백(13px)만큼 줄을 당겼다]

  첫 탭 글자      x = 261
  축 이름 「구조」  x = 261
  첫 행 「SPA」    x = 263

[구역 전체 높이]  529px
