디자인시스템 파일의 tab(391:4433)을 다시 보니 fill lg가 낱개 탭이 아니라 세그먼트
컨트롤이었다. 목록이 테두리·둥근 모서리·흰 바탕을 갖고 항목이 그 안에 갇힌다.
`overflow: clip`이 있어야 끝 칸의 채운 색이 둥근 모서리를 넘지 않는다.
칸 사이 구분선은 고르지 않은 칸이 자기 오른쪽에 그린다 — 고른 칸은 색이 바뀌어 경계가
이미 보이므로 선을 두지 않는다(시안 그대로). 어느 칸이 골라져도 선이 맞아떨어진다.
fill md는 낱개 알약이 맞아 그대로 둔다.
고른 탭에 hover·pressed가 걸리던 것도 고쳤다. 규칙 특이도가 0,5,0이라 고름 규칙(0,2,0)을
이겨서, 고른 탭에 마우스를 올리면 남색·파란 밑줄이 옅은 파랑으로 덮였다.
검증: 목록 테두리 1px #cdd1d5 · 모서리 12px · clip · 흰 바탕, 구분선이 고르지 않은
칸에만 붙는 것을 확인. hover 규칙이 고른 탭 6개 어디에도 걸리지 않는다.
Co-Authored-By: Claude Opus 5
관리자페이지 파일(QsFVFFUKGH68xAPVkF3SJ9)의 tab(391:4497)·tab-item(391:4431)을
FoxTab / FoxTabItem 둘로 옮겼다. 계열(line·fill) × 크기(lg·md) × 상태 다섯이 모두
시안에 있다.
크기가 배치를 정한다. lg는 탭이 폭을 고르게 나눠 갖고 목록 전체에 옅은 밑줄이 깔리며,
md는 글자만큼만 차지하고 8px 간격으로 선다. 아래 여백도 크기마다 다르다.
계열·크기 수식어는 항목이 아니라 묶음에만 붙인다 — 항목이 홀로 쓰이는 자리가 없어
`.fox-tab--line .fox-tab-item`으로 내려받는 편이 단순하다. 탭은 탭 안에 들어가지 않으므로
후손 선택자가 새는 문제도 없다.
line 계열은 기본 상태에도 투명한 1px 밑줄을 둔다(시안 그대로) — 고름으로 바뀔 때 글자가
밀리지 않으려면 자리를 미리 잡아야 한다. 고른 탭의 4px 밑줄은 목록의 1px 선 위로
끌어올려 겹치는 자리에서 굵은 선이 이기게 했다.
키보드는 ARIA 탭 규약을 따른다 — 좌우 화살표·Home·End로 옮기고 탭키는 고른 탭에만
닿으며, 잠긴 탭은 건너뛴다. 항목이 href를 가지면 주소가 바뀌는 이동이라 보고 로
내며 탭 역할을 붙이지 않는다.
검증: 여백·글자·색·모서리·마크업 23항목이 시안과 일치. 화살표 이동이 양끝에서 감기고
잠긴 탭을 건너뛰는 것을 확인했다. sass 550규칙 · tsc · eslint 통과.
Co-Authored-By: Claude Opus 5
