@ihabdevteam/core 0.196.0 → 0.198.0

package/CHANGELOG.md

@@ -7,6 +7,77 @@ All notable changes to this project will be documented in this file.
 > 적은 글이라, 지금 이름으로 고쳐 놓으면 그 시절에 그 이름으로 받은 사람이
 > 제 이야기를 못 찾는다.
 
+## 0.198.0
+
+### 고침 — **사이드바가 220px 이 아니라 222px 로 서 있었다** (`Header`)
+
+`.header` 만 `box-sizing: content-box` 였다. 첫 복사 때부터 있었고 까닭이 적혀 있지 않았다 —
+저장소의 전역 규칙은 `border-box` 다. 그래서 `width: 220px` 에 좌우 테두리 1px 이 **더해져**
+실제로는 222px 로 섰다. 220 폭 상자에 넣으면 오른쪽 2px 이 잘려 나가 **항목이 좌 14 / 우 10 으로
+기울었다**(놀이터 실측 2026-09-25).
+
+**소비자 화면이 2px 움직인다.** 본문을 사이드바 폭(220)만큼 띄워 두었다면 그동안 2px 겹쳐 있었고,
+이제 그 겹침이 사라진다. 접힌 레일도 74 → 72 가 된다.
+
+### 바뀜 — 사이드바 좌우 여백과 **떠 있는 스크롤 막대**
+
+사장님과 화면을 보며 맞췄다(2026-09-25). 결론만 적으면:
+
+- **좌우 여백 12px, 항목은 가운데.** 패딩은 `calc(var(--spacing-s) - 1px)` 다 — 투명 테두리 1px 을
+  빼야 보이는 틈이 12 가 된다.
+- **스크롤바 자리를 예약하지 않는다**(`scrollbar-gutter` 를 걷었다). 예약하면 그 11px 이 오른쪽에만
+  붙어 항목이 밀리고, 그 값은 환경마다 다르다(클래식 11 · macOS 오버레이 0).
+- **네이티브 막대는 안 그린다**(`scrollbar-width: none`). 그리면 넘치는 순간 11px 을 가져가
+  오른쪽만 23 이 된다(실측). 자리를 예약하든 안 하든 **막대가 보이는 한 가운데는 안 지켜진다.**
+- 대신 **코어가 막대를 직접 그린다** — 폭 **6px**, 오른쪽 여백 한가운데, 넘칠 때만, 자리를 안 먹는다.
+  얹으면 짙어지고 **잡아 끌면 통이 따라 구른다**(손에 잡히게 그려 놓고 안 잡히면 거짓말이다).
+  겨누는 자리는 보이지 않는 여백으로 좌우 4px 씩 넓혔다 — 보이는 굵기는 6px 그대로.
+  `sticky` 한 겹(높이 0)이 구르는 통 안에서 제자리를 지키므로 막대가 보이는 자리에 뜬다.
+
+**네이티브 막대의 폭은 정할 수 없다.** 전역 `* { scrollbar-width: thin }` 이 걸려 있어 Chrome 은
+`::-webkit-scrollbar` 의 폭을 안 본다 — 이 저장소가 적어 둔 6px·4px 들은 **아무 일도 안 하고 있었다**
+(실측: thin 11 · auto 15 · none 0). 직접 그려서야 6px 이 실제로 6px 이 됐다.
+
+### 놀이터 — SideNav 페이지
+
+절 셋(좌우 여백과 스크롤바 자리 · 스크롤은 한 통에서 · 접힌 72px 레일)을 더하고, **지금 이 화면을
+재서 보여 주는 칸**을 넣었다(기계마다 값이 달라 "적힌 수" 로는 확인이 안 된다). 데모는 `SideNav` 만
+세우던 것을 **진짜 `Header`** 로 바꿨다 — 로고 자리가 Header 몫임이 그래야 보인다.
+
+문단 속 목록과 링크 색도 맞췄다. 목록만 본문(회색)이 아닌 검정이었고, 링크에는 규칙이 아예 없어
+**브라우저 기본 파랑(#0000ee)** 이 나오고 있었다.
+
+## 0.197.0
+
+### 바뀜 — 접힌 72px 레일도 **8px**, 단추는 **가운데**
+
+사장님 지시(2026-09-25). `Header.css` 의 접힌 레일 여백(`0 10px`, 호버 규칙까지 둘)을
+`0 var(--spacing-xs)` 로 낮추고, 항목을 **52px 로 못 박아 `margin: 0 auto`** 로 세웠다.
+
+여백만 낮추면 항목이 자리를 다 먹어 54 가 되고, `padding: 0 14px` 로 아이콘을 가운데 두던 셈이
+어긋나 **아이콘이 1px 오른쪽으로 밀린다.** 52 로 두면 그 셈이 그대로 맞는다 — 실측(768px):
+레일 가운데 312 · 항목 가운데 **312** · 아이콘 좌 **14** / 우 **14**.
+
+**펼쳐질 때는 폭 고정을 푼다.** 이 레일은 `:hover`·`:focus-within` 에서 220px 로 펼쳐지는데,
+고정을 안 풀면 항목만 52px 로 남아 이름표가 설 자리가 없다. 실측(펼친 뒤): 레일 222 · 항목 202 ·
+이름표 136. 발치도 같이 되돌린다.
+
+### 고침 — 접힌 레일에서 **발치 단추가 5px 왼쪽에 섰다**
+
+발치 줄(터미널·종·톱니·물음표·사람)은 좌우 여백이 없어 40px 단추가 왼쪽에 붙었고, 레일 가운데보다
+5px 왼쪽에 서서 위 아이콘들과 눈에 띄게 어긋났다(말귀 실측 — 사장님이 보신 어긋남이 이것이다).
+접힌 레일에서만 가운데로 세운다. 실측: 발치 단추 가운데 **312**(레일 가운데와 같다).
+
+### 고침 — `align-items: left` 는 **CSS 에 없는 값**이다
+
+`.side-nav__footer` 가 그렇게 적혀 있었다. 브라우저가 버리고 기본값(stretch)으로 그려 와서 겉으로는
+멀쩡했지만, 다음 사람이 "여기는 왼쪽 맞춤" 으로 읽고 흉내 낼 글이었다. 뜻은 그대로 두고 값을 제
+이름(`stretch`)으로 적는다 — 보이는 것은 안 바뀐다.
+
+**남은 것 하나**: 접힌 레일에서 **읽지 않음 배지가 달린 항목**은 아직 1px 넘친다(배지 14px 이
+아이콘 24 + 좌우 여백 28 과 함께 52 안에 안 들어간다). 배지를 아이콘 모서리로 겹칠지·접힌 레일에서
+숨길지는 **보이는 꼴을 정하는 일**이라 따로 여쭌다.
+
 ## 0.196.0
 
 ### 바뀜 — `SideNav` 좌우 여백 **12px → 8px**, 수 대신 토큰