@ihabdevteam/core 0.200.0 → 0.201.0

package/dist/ihabdevteam-core.d.ts

@@ -1626,7 +1626,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.200.0";
+export declare const CORE_VERSION = "0.201.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -2042,6 +2042,23 @@ export declare type DialogSize = 'sm' | 'md' | 'lg' | 'full';
  */
 declare type DifficultyLevel = 'random' | 'jong' | 'jung' | 'cho' | 'count';
 
+/** @public */
+export declare interface DiscardGuard {
+    /** `Popup` 의 `beforeClose` 로 넘긴다 — `false` 면 안 닫힌다 */
+    beforeClose: () => boolean;
+    /** 물음창. JSX 어디에 두든 된다(아래 글 참고) */
+    discardPopup: ReactNode;
+    /** **다음 한 번은 안 묻는다** — 저장이 끝나고 스스로 닫을 때 부른다 */
+    allowClose: () => void;
+}
+
+/** @public */
+export declare interface DiscardGuardLabels {
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+}
+
 /** @public */
 export declare function Divider({ orientation, label, className }: DividerProps): JSX.Element;
 
@@ -2980,6 +2997,34 @@ export declare function injectPassCardBgTheme(el: HTMLElement | null, theme: Pas
 /** theme 객체를 부모 요소에 CSS var로 주입 */
 export declare function injectPromoBannerBgTheme(el: HTMLElement | null, theme: PromoBannerBgTheme): void;
 
+/**
+ * **위 복구를 창에 매단다** — 듣는 자리 둘을 한 번에 달고, 떼는 함수를 돌려준다.
+ *
+ * 복구하는 일(`recoverFromSkew`)은 코어에 있었는데 **어디에 어떻게 매다는지**가 소비자마다
+ * 한 벌씩이었다(말귀 회원앱·어드민의 `main.tsx`, 글자까지 같았다 — 2026-09-27). 그 열몇 줄에
+ * 조용히 틀어지는 조각이 둘 있다:
+ *
+ * 1. **`error` 는 캡처 단계로 들어야 한다**(셋째 인자 `true`). `link`·`style` 의 `error` 는
+ *    **버블링하지 않아** 창까지 올라오지 않는다. 한쪽에서 그 `true` 를 빠뜨리면 그 앱만 CSS
+ *    청크 실패를 못 듣고, **화면은 뜨는데 스타일만 전부 빠진 채** 남는다(말귀 실제 QA 건 —
+ *    매니저 화면이 기본 스타일로 무너졌다). 스크립트는 멀쩡히 도니 오류도 안 난다.
+ * 2. **`vite:preloadError` 는 막아야(`preventDefault`)** Vite 헬퍼가 오류를 안 던진다.
+ *    막지 않으면 새로고침과 오류 화면이 함께 난다(이 파일 머리말).
+ *
+ * CSS 쪽은 `preventDefault` 를 하지 않는다 — 막을 기본 동작이 없고, 그 오류는 다른
+ * 듣는 이(오류 보고 등)에게도 그대로 가는 편이 맞다.
+ *
+ * ```ts
+ * // main.tsx — 한 줄이면 된다
+ * installSkewRecovery()
+ * ```
+ *
+ * 창이 없는 곳(SSR·시험)에서는 아무것도 안 달고 빈 함수를 돌려준다.
+ * @returns 떼는 함수. 앱 시작점에서는 뗄 일이 없지만, 시험이 뒷정리할 수 있어야 한다.
+ * @public
+ */
+export declare function installSkewRecovery(): () => void;
+
 /** @public 검색어가 초성으로만 이루어졌는지 (예: 'ㅎㅈ' → true, '한' → false) */
 export declare function isAllChoseong(search: string): boolean;
 
@@ -3005,6 +3050,13 @@ export declare function isManualOnlyType(typeKey: WordTrainingTypeKey): boolean;
  */
 export declare function isNetworkErrorMessage(msg: string | null | undefined): boolean;
 
+/**
+ * 연락처가 **사람에게 거는 번호**의 모양인가 — 대표번호(15xx~19xx)는 안 받는다.
+ * 규칙은 `PERSONAL_PHONE_REGEX`, 대표번호까지 받으려면 `isValidPhone`.
+ * @public
+ */
+export declare function isPersonalPhone(phone: string): boolean;
+
 /** @public */
 export declare function isSelectionCorrect({ payload, selected, choices, correctAnswers }: IsSelectionCorrectParams): boolean | undefined;
 
@@ -3015,6 +3067,39 @@ declare interface IsSelectionCorrectParams {
     correctAnswers?: unknown[];
 }
 
+/**
+ * **이 이벤트가 이 탭에 실제로 반영된 것인가.**
+ *
+ * 로그인을 탭마다 가르려고 `auth.storage` 를 `sessionStorage` 로 두어도, GoTrue 의
+ * `BroadcastChannel` 은 **저장소 종류와 무관하게** 세션 이벤트를 같은 브라우저의 모든 탭에
+ * 뿌린다(여러 탭을 맞추라고 만든 길이다). 그래서 받은 세션을 그대로 믿으면 **다른 탭에서
+ * 로그인한 세션이 이 탭 화면에 얹힌다** — 로그인된 것처럼 그려지는데 이 탭의 저장소는 비어
+ * 있어 API 호출은 전부 미인증으로 실패한다. 반대로 이 탭에 제 세션이 있는데 다른 탭의
+ * 로그아웃이 날아와 뒤섞이기도 한다. 말귀 어드민에서는 그렇게 얹히는 것이 `ROLE_ADMIN`
+ * 세션이다.
+ *
+ * 가르는 법은 하나다 — `getSession()` 으로 **이 탭 저장소를 다시 읽어** 받은 것과 맞대 본다.
+ * 그 한 줄과 여덟 줄짜리 까닭이 말귀 회원앱·어드민에 한 벌씩 있었다(2026-09-27).
+ *
+ * **로그아웃(세션 없음)은 늘 받는다.** 지울 것이 없다는 말은 어느 탭에서 왔든 참이고,
+ * 여기서 막으면 이 탭이 로그인된 채로 남는다 — 막는 것보다 나쁜 쪽이다.
+ *
+ * ```ts
+ * onAuthStateChange((event, 받은것) => {
+ *   getSession().then(({ data }) => {
+ *     const 이탭것 = data.session
+ *     if (!isSessionForThisTab(받은것, 이탭것)) return   // 다른 탭에서 온 것 — 무시
+ *     …이탭것 으로 상태를 맞춘다
+ *   })
+ * })
+ * ```
+ *
+ * @param 받은것 이벤트가 실어 온 세션(없을 수 있다)
+ * @param 이탭것 `getSession()` 이 이 탭 저장소에서 다시 읽은 세션
+ * @public
+ */
+export declare function isSessionForThisTab(받은것: TabSessionLike | null | undefined, 이탭것: TabSessionLike | null | undefined): boolean;
+
 /**
  * @public 문자열이 음절 패턴 DSL 문법인지 — 쉼표(,) 포함 여부로 판별한다.
  * 일반 단어 검색어엔 쉼표가 쓰이지 않으므로 충돌 없이 자동 분기할 수 있다.
@@ -3433,6 +3518,37 @@ export declare interface LineChartScales {
     };
 }
 
+/** @public */
+export declare interface ListControls {
+    /** 찾는 말. 무엇을 어떻게 거를지는 **부르는 쪽**이 정한다 — 이 훅은 그 말만 쥔다 */
+    query: string;
+    setQuery: (v: string) => void;
+    /** 고르개에 그대로 주는 글 */
+    pageSize: string;
+    setPageSize: (v: string) => void;
+    /** `usePagedList` 에 그대로 주는 수 — `Number(pageSize)` 가 못 읽히면 기본값이다 */
+    perPage: number;
+    page: number;
+    setPage: (n: number) => void;
+}
+
+/** @public */
+export declare interface ListControlsOptions {
+    /**
+     * 쪽크기 기본값. 글인 것은 고르개(`Dropdown`)가 글을 다루기 때문이다 — 숫자로 바꾸는 일은
+     * 이 훅이 한다(`perPage`). 안 주면 `'25'`.
+     */
+    defaultPageSize?: string;
+    /**
+     * 검색어·쪽크기 **말고 더** 바뀌면 첫 쪽으로 돌아가야 하는 것들 — 갈래(`type`) · 보기(`view`) 처럼
+     * 목록을 거르는 값이다. 검색어와 쪽크기는 이 훅이 스스로 넣으므로 **여기 또 적지 않는다.**
+     *
+     * 값은 글·수·참거짓만 받는다. 객체를 넣으면 `String()` 이 전부 `[object Object]` 로 만들어
+     * **무엇이 바뀌어도 안 바뀐 것이 되고, 그래도 아무 데서도 안 터진다** — 타입으로 막는다.
+     */
+    resetOn?: readonly ListResetValue[];
+}
+
 /** @public */
 export declare function ListenStep({ _stepIndex, _totalSteps, ...rest }: StepWrapperProps): JSX.Element;
 
@@ -3441,6 +3557,9 @@ export declare function ListPopup<T extends {
     id?: string | number;
 }>(props: PopupListProps<T>): JSX.Element;
 
+/** 첫 쪽으로 돌아갈 까닭을 잇는 값 — **글로 적을 수 있는 것**만 받는다(아래 `resetOn` 참고) @public */
+export declare type ListResetValue = string | number | boolean | null | undefined;
+
 /** @public */
 export declare function Loader(props: LoaderProps): JSX.Element;
 
@@ -4526,6 +4645,18 @@ export declare interface PaymentPlanTier {
 /** @public */
 export declare const pctToLevel: (pct: number) => number;
 
+/**
+ * **대표번호를 뺀 것만** 받는 자 — `PHONE_REGEX` 에서 대표번호 갈래를 뺀 것이다.
+ *
+ * 말귀 회원앱·어드민이 `isValidPhone(phone) && phone.startsWith('0')` 를 한 벌씩 들고
+ * 있었다(2026-09-27). 그 칸들은 **사람에게 거는 번호**를 받는 자리라 `1588-1234` 를
+ * 거절해 왔다 — 뜻은 맞는데 **`'0'` 으로 시작하는가**로 적혀 있었다. 그것이 지금 같은
+ * 뜻인 것은 `PHONE_REGEX` 의 비-0 갈래가 대표번호 하나뿐이라서일 뿐이고, 0 으로 시작하지
+ * 않는 대역이 하나 더 생기는 날 **두 앱이 조용히 그것을 받게 된다.** 뜻대로 적어 둔다.
+ * @public
+ */
+export declare const PERSONAL_PHONE_REGEX: RegExp;
+
 /**
  * 인물 소개 카드 — 원형 사진 위에 이름·직함, 아래에 경력 목록을 세로로 쌓는다.
  * 회사 소개의 운영진 섹션, 연구진 목록 등에 사용.
@@ -4553,23 +4684,6 @@ export declare interface PersonCardProps {
     className?: string;
 }
 
-/**
- * 연락처가 **`formatPhone` 이 끝까지 채워 낸 모양** 인가.
- *
- * 만드는 쪽(`formatPhone`)은 코어인데 받는 쪽(형식 검사)은 소비자마다 한 벌씩 두고 있었다 —
- * 말귀 회원앱·어드민에 같은 정규식이 한 벌씩 있었고, 둘이 같은지는 짝 시험이 지켰지만
- * **코어가 만든 모양과 맞는지는 아무도 안 쟀다.** 실제로 코어가 050X·0303(앞자리 네 자리)을
- * 받았을 때 그 두 벌도 손으로 함께 고쳐야 했다. 그래서 짝을 여기 둔다 — 아래 시험이
- * "formatPhone 이 끝까지 채운 값은 늘 통과한다" 를 못 박는다.
- *
- * `formatPhone` 은 **덜 채운 입력을 그대로 돌려준다**(`010-12`). 그래서 빈값 검사만으로는
- * 모자라고, 이 함수가 그 자리를 맡는다.
- *
- * 받는 꼴 — 휴대폰·지역번호(02·0NN)·050X 안심번호·0303 착신전환·**1588 등 대표번호**.
- * 대표번호는 `formatPhone` 이 `1588-1234` 로 만들어 내므로 여기서도 받는다
- * (0 으로 시작하는 것만 받던 소비자 정규식은 그 번호를 거절했다 — 코어가 만든 모양을 코어가 거절하는 꼴).
- * @public
- */
 export declare const PHONE_REGEX: RegExp;
 
 /**
@@ -7355,6 +7469,11 @@ export declare function tableTrends(records: readonly ScoreRecord[]): TableTrend
  */
 export declare function Tabs({ items, value, onChange, className, size }: TabsProps): JSX.Element;
 
+/** 이 자가 보는 것은 **이것뿐이다** — 세션의 나머지는 알 필요가 없다 @public */
+export declare interface TabSessionLike {
+    access_token: string;
+}
+
 /** @public */
 export declare interface TabsProps {
     items?: TabItem[];
@@ -9070,6 +9189,39 @@ export declare function useDeviceManagement(): {
     handleSelectFromList: (form: DeviceForm) => void;
 };
 
+/**
+ * **쓰던 것을 버리고 닫으려 할 때 한 번 더 묻는다.**
+ *
+ * 코어 0.128.0 부터 창은 어두운 바탕을 눌러도 닫힌다(사장님 지시 2026-09-14 "기본값으로").
+ * 긴 글을 받는 창에서 바깥을 한 번 잘못 누르면 쓰던 것이 통째로 사라진다 — 그 자리를 막는다.
+ *
+ * 말귀 회원앱과 어드민에 한 벌씩 있었고(2026-09-27) **어드민 쪽이 윗집합**이었다. 갈라져
+ * 있던 탓에 어드민에서 찾은 고침(`allowClose`)이 회원앱으로 건너오지 못했다 — 회원앱
+ * 고객 추가 창이 **저장을 끝내고도 "저장했는데 버릴까요?" 를 물었다.** 여기 한 벌로 둔다.
+ *
+ * **`allowClose` 가 그 고침이다.** 저장이 끝나고 창이 스스로 닫을 때(`closeWithAnimation`)도
+ * 그 길은 `beforeClose` 를 거치는데, 폼은 방금 채워 달라진 채라 "버릴까요" 가 뜬다. 저장에
+ * 성공한 직후 `allowClose()` 를 부르면 **다음 한 번만** 안 묻고 닫는다. 같은 틱에 닫으므로
+ * 상태가 아니라 ref 로 든다 — 상태로 들면 다시 그려지기 전에 닫혀 안 읽힌다.
+ *
+ * **물음창은 JSX 어디에 두든 된다.** 창은 `document.body` 로 옮겨 붙고(`createPortal`)
+ * 그 차례는 코드 자리가 아니라 **뜬 시각**으로 정해지므로, 나중에 뜨는 이 물음창이 늘 위다.
+ *
+ * 문구는 `labels` 로 바꾼다 — 안 주면 사전(`common.discardConfirm.*`)을 따르고, 사전이
+ * 없으면 한국어 기본값으로 그린다(번역을 안 쓰는 소비자도 그대로 읽힌다).
+ *
+ * ```tsx
+ * const { beforeClose, discardPopup, allowClose } = useDiscardGuard(달라졌나, 닫기)
+ * const 저장 = async () => { await 보내기(); allowClose(); closeWithAnimation() }
+ * return <Popup title={제목} beforeClose={beforeClose} …>{…}{discardPopup}</Popup>
+ * ```
+ *
+ * @param isDirty 지금 닫으면 잃을 것이 있는가
+ * @param onClose 버리기로 했을 때 실제로 닫는 일
+ * @public
+ */
+export declare function useDiscardGuard(isDirty: boolean, onClose: () => void, labels?: DiscardGuardLabels): DiscardGuard;
+
 /**
  * 현재 화면의 제목을 `document.title`에 반영한다 — `'<제목> · <앱 이름>'`.
  *
@@ -9159,6 +9311,42 @@ export declare function useHoverAnchor(): {
 /** @public */
 export declare function useI18n(): I18nContextValue;
 
+/**
+ * **목록 화면의 조작부 한 벌** — 찾는 말 · 쪽크기 · 쪽 번호, 그리고 **언제 첫 쪽으로 돌아가는가.**
+ *
+ * 화면 셋이 같은 다섯 줄을 손으로 엮고 있었다(어드민 문장 자료 · 어드민 낱말 자료 · 회원앱 낱말
+ * 관리 — 2026-09-27). `usePagedList` 를 코어로 올린 까닭이 한 겹 위에서 되풀이된 자리다.
+ *
+ * **이 훅이 막는 것은 조용히 틀어지는 쪽이다.** `usePageResetOnChange` 의 열쇠에서 한 조각만
+ * 빠뜨리면 — 이를테면 쪽크기 — 25에서 100으로 바꿔도 `page` 가 7에 머문다. 총 쪽수가 2로 줄어
+ * `usePagedList` 가 마지막 쪽으로 조이니 **2쪽이 뜨는데 사람은 1쪽을 본다고 믿는다.** 오류도
+ * 빈 화면도 아니고 **엉뚱한 쪽**이라 아무도 못 알아챈다. 그래서 검색어와 쪽크기는 부르는 쪽이
+ * 적는 것이 아니라 **이 훅이 스스로 넣는다.** 적지 않은 것은 빠뜨릴 수도 없다.
+ *
+ * 쪽크기 기본값(`'25'`)도 여기가 쥔다 — 세 화면에 `Number(pageSize) || 25` 가 한 벌씩 있었다.
+ * (코어 `Pagination` 에는 쪽크기 고르개가 없어 맞춰야 할 기본값이 따로 있지는 않다. 겹친 것은
+ * 화면 셋의 `25` 뿐이다.)
+ *
+ * **거르고 세우는 일은 안 맡는다.** 세 화면의 잣대가 서로 다르고(`묶음에서찾기` ·
+ * `searchAndRankWords` · 보기별 거르기 + 낱말 순위), 거르기는 화면이 아는 일이다. 무엇보다
+ * 그 일을 이 훅 안에 넣으면 **부르는 쪽의 `useMemo` 가 사라진다** — 낱말 자료 화면은 23,000개를
+ * 세우므로 매 그림마다 다시 세우게 된다.
+ *
+ * 그래서 두 걸음이다. 거르는 일이 가운데 있고, 그 자리가 곧 `useMemo` 가 설 자리다:
+ *
+ * ```tsx
+ * const 목록 = useListControls({ resetOn: [보기] })
+ * const 걸러낸것 = useMemo(() => 거르기(줄들, 목록.query, 보기), [줄들, 목록.query, 보기])
+ * const { pageItems, totalPages, curPage } = usePagedList(걸러낸것, 목록.perPage, 목록.page)
+ * ```
+ *
+ * 찾는 말을 이 훅이 쥐는 것은 **첫 쪽으로 돌아갈 까닭**이기 때문이다. 쥐고 있으니 열쇠에 넣는
+ * 일도 여기서 끝난다 — `목록.query` 는 위처럼 거를 때 그대로 쓴다.
+ *
+ * @public
+ */
+export declare function useListControls(opts?: ListControlsOptions): ListControls;
+
 /** @public */
 export declare function useMediaQuery(query: string): boolean;
 

package/dist/packages/core/src/components/Header.css

@@ -74,6 +74,45 @@
   background: rgba(255,255,255,0.25);
 }
 
+/* **막대는 옅은 흰색이다**(사장님 지시 2026-09-27) — 얹으면 짙어진다.
+
+   브랜드 색(`--color-main` → 얹으면 `--color-sub`)으로 한 번 가 봤다가 되돌렸다.
+   이 지면이 바로 그 두 색 사이를 지나가는 그라디언트라, **막대가 어딘가에서 지면과
+   같아진다** — 재 보니 main 은 레일 맨 위에서 1.06, sub 은 맨 아래에서 1.01 이었다.
+   게다가 둘이 엇갈려서 위쪽에서는 얹으면 잘 보이고 아래쪽에서는 얹으면 **덜** 보였다.
+   색을 고르는 것으로는 못 푸는 자리다 — 지면이 색을 갈아입으니까.
+
+   투명도로 푼다. 흰빛을 옅게 얹으면 지면이 무슨 색이든 **그만큼 밝아져** 어디서나
+   같은 만큼 떠오른다. 이 블록의 구분선(`rgba(255,255,255,0.25)`)이 쓰는 방식과 같다.
+
+   **재어 둔다 — 정하는 것은 사람이다**(RELEASE.md "색은 문을 두지 않는다").
+   220×518 레일에서 가장 나쁜 자리(지면이 가장 밝은 아래쪽)의 대비다:
+
+       alpha   0.25   0.4    0.5    0.6    0.75   0.9    1.0
+       대비    1.18   1.30   1.39   1.49   1.65   1.82   1.94
+
+   **흰빛으로는 3.0 에 못 간다** — 꽉 채운 흰색도 1.94 다. 아래쪽 지면(민트)이 이미 밝아서,
+   거기서 3.0 을 얻으려면 막대가 **어두워져야** 한다. 그러면 위쪽(파랑)에서 또 뒤집힌다.
+   지금 값(0.4 → 얹으면 0.75)은 그 안에서 고른 것이고, 브랜드 색과 달리 **어디서도 지면과
+   같아지지 않고 얹으면 늘 더 보인다**(가장 나쁜 자리에서도 1.30 → 1.65). */
+.header--manager .side-nav__scroll-thumb {
+  background: rgba(255, 255, 255, 0.4);
+}
+.header--manager .side-nav__scroll-thumb:hover,
+.header--manager .side-nav__scroll-thumb:active {
+  background: rgba(255, 255, 255, 0.75);
+}
+
+/* **못 쓰는 항목은 회색이 아니라 옅은 흰색이다.** 기본 꼴의 `--color-lightGray` 는
+   흰 지면에서 물러나 보이라고 고른 색인데, 이 지면에서는 푸른 회색이 그라디언트 위에
+   떠서 **글자는 희고 아이콘만 탁한** 꼴이 됐다(아이콘 규칙이 0,3,0 이라 매니저 규칙
+   0,2,0 을 이긴다 — 사장님 지적 2026-09-27). 물러나는 일은 줄에 이미 걸린
+   `opacity: 0.6` 이 한다. */
+.header--manager .side-nav__item.disabled,
+.header--manager .side-nav__item.disabled .side-nav__icon {
+  color: var(--color-deepWhite);
+}
+
 /* 메뉴 아이템 기본 */
 .header--manager .side-nav__item {
   color: var(--color-deepWhite);
@@ -126,140 +165,139 @@
   .header__bottom { display: none; }
 }
 
-/* Tablet: narrow left rail 60px */
+/* Tablet: 72px 접힌 레일 — 마우스를 얹거나 초점이 들어가면 220px 으로 펼쳐진다.
+
+   **펼친 꼴은 넓은 화면과 같아야 한다**(사장님 지시 2026-09-27). 그래서 이 블록은
+   "접힌 꼴만 덮고, 펼치면 아무것도 안 덮는다" 로 적는다 — 덮은 것을 하나하나 되돌리는
+   대신 **애초에 안 덮는다.**
+
+   예전에는 되돌리는 쪽이었다: 접힌 꼴 규칙마다 `:hover` 짝을 하나씩 두어 되돌렸다.
+   그러면 **짝을 빠뜨린 것이 조용히 남는다** — 실제로 넓은 화면과 여섯 군데가 달랐다
+   (실측 2026-09-27): 목록 여백 11 → 8, 항목 사이 12 → 10, 모서리 10 → 12,
+   이름표 `max-width` none → 200, 그리고 **하위 항목의 들여쓰기 30 → 16**. 마지막 것이
+   눈에 띄는 자리다 — 되돌리는 규칙(`padding: 0 16px`)이 하위 항목 규칙(0,1,0)보다 세서
+   들여쓰기가 통째로 사라졌고, 그 짝은 애초에 적힌 적이 없다.
+
+   안 덮으면 되돌릴 것도 없다. 새 규칙이 넓은 화면에 생겨도 펼친 레일이 저절로 따라간다. */
 @media (min-width: 768px) and (max-width: 1023px) {
   .header {
     width: 72px;
+    transition: width 180ms ease;
+    overflow: visible;
+  }
+  .header:hover,
+  .header:focus-within {
+    width: 220px; /* match desktop */
+  }
+  /* JS 가 접힌 채로 못 박으면(예: 화면을 옮긴 뒤) 호버해도 안 펼쳐진다 */
+  .header.header--force-collapsed,
+  .header.header--force-collapsed:hover,
+  .header.header--force-collapsed:focus-within {
+    width: 72px;
   }
+
   .header__branding { height: 80px; }
-  /* Collapsed: rounded square button (52x52) centered in 72px rail */
+
+  /* ── 두 꼴에 모두 — 움직임과 스크롤바 ─────────────────────────────────────
+     **접힌 레일에서는 스크롤바 자리를 비우지 않는다.** 72px 에서 양쪽 gutter(클래식
+     11px × 2)를 떼면 항목이 28px 로 짓눌려 24px 아이콘이 10px 삐져나간다(실측).
+     아이콘만 있는 좁은 레일에는 막대를 그릴 자리가 애초에 없다 — 막대는 숨기고
+     휠·터치·키보드 스크롤은 그대로 둔다. 넓은 화면도 막대를 숨기므로(제 막대를
+     따로 그린다) 이 줄은 두 꼴에 같다. */
   .header .side-nav__menu {
-    padding: 0 var(--spacing-xs);
     transition: padding 180ms ease;
-    /* **접힌 레일에서는 스크롤바 자리를 비우지 않는다.**
-       72px 에서 양쪽 gutter(클래식 11px × 2)를 떼면 항목이 28px 로 짓눌려 24px
-       아이콘이 10px 삐져나간다(실측). 아이콘만 있는 좁은 레일에는 스크롤바를 그릴
-       자리가 애초에 없다 — 막대는 숨기고 휠·터치·키보드 스크롤은 그대로 둔다.
-       좌우는 padding 만으로 같다(실측 8px 기준: 좌 9 / 우 9, 항목 52). */
     scrollbar-gutter: auto;
     scrollbar-width: none;
   }
   .header .side-nav__menu::-webkit-scrollbar { display: none; }
   .header .side-nav__item {
-    /* (52px item - 24px icon) / 2 = 14px to center icon when collapsed */
-    padding: 0 14px;
-    gap: 0;
-    border-radius: var(--radius-card);
-    /* **단추를 52 로 못 박고 가운데 세운다**(사장님 지시 2026-09-25). 여백만 8px 으로 낮추면
-       항목이 자리를 다 먹어 54 가 되고, 위 14px 셈이 어긋나 아이콘이 1px 오른쪽으로 밀린다.
-       52 로 두면 그 셈이 그대로 맞아 아이콘이 14 / 14 로 선다. */
-    width: 52px;
-    margin: 0 auto;
     transition: padding 180ms ease, gap 180ms ease, width 180ms ease;
   }
-
-  /* **발치도 가운데로.** 발치 줄은 좌우 여백이 없어(`padding: 0`) 단추 40px 이 왼쪽에 붙었고,
-     레일 가운데(37)보다 **5px 왼쪽**에 서서 위 아이콘들과 눈에 띄게 어긋났다(말귀 실측
-     2026-09-25 — 사장님이 보신 어긋남이 이것이다). 펼친 사이드바에서는 발치도 폭을 꽉 채우므로
-     여기서만 가운데로 세운다. */
-  .header .side-nav__footer {
-    align-items: center;
-  }
-
-  /* **짧은 구분선도 가운데로.** 그 선은 `margin: 4px var(--spacing-m)` 로 서는데, 명시 폭
-     (`--spacing-xl`, 24px)을 가진 플렉스 항목이라 `stretch` 가 안 먹고 **시작 모서리**로
-     떨어진다. 그래서 52px 목록 안에서 좌 16 자리에 서고 중심이 38 이 된다 — 레일 중심 36,
-     항목·아이콘 중심 36 인데 그 선만 **2px 오른쪽**이었다(실측 2026-09-26, 사장님이
-     "이 선이 태블릿일 때 가운데가 아니네" 로 짚으신 것이 이것이다). 가로도 넘친다 —
-     16 + 24 + 16 = 56 인데 목록은 52 라 오른쪽 여백 4px 이 잘린다.
-     `auto` 여백은 플렉스 항목을 남는 자리 가운데로 민다. 폭·높이·색은 그대로다. */
-  .header .side-nav__separator--short {
-    margin-left: auto;
-    margin-right: auto;
+  /* 이름표는 **접으면 자리까지 없앤다**(`max-width: 0`) — `visibility` 로만 숨기면
+     그만큼 자리를 먹어 아이콘이 가운데를 벗어난다. 그 값은 아래 접힌 꼴에 있다. */
+  .header .side-nav__label {
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: max-width 180ms ease, opacity 180ms ease, transform 180ms ease;
   }
 
-  .header:hover .side-nav__menu,
-  .header:focus-within .side-nav__menu {
+  /* ── 접힌 꼴만 ────────────────────────────────────────────────────────────
+     펼치면(`:hover`·`:focus-within`) 이 아래가 통째로 안 걸리고 넓은 화면 규칙이 그대로
+     산다. 못 박아 접어 둔 레일은 호버해도 안 펼쳐지므로 늘 걸린다 — 그래서 선택자가
+     둘씩이다. */
+  .header:not(:hover):not(:focus-within) .side-nav__menu,
+  .header--force-collapsed .side-nav__menu {
+    /* 좌우는 여백만으로 같다(실측 8px 기준: 좌 9 / 우 9, 항목 52) */
     padding: 0 var(--spacing-xs);
   }
 
-  .header:hover .side-nav__item,
-  .header:focus-within .side-nav__item {
-    padding: 0 16px;
-    gap: 10px;
-    /* 레일이 220px 로 펼쳐지는 동안에는 **폭 고정을 푼다** — 안 풀면 항목만 52px 로 남아
-       이름표가 설 자리가 없다(접힌 꼴의 가운데 맞춤이 펼친 꼴까지 따라오면 안 된다). */
-    width: 100%;
-    margin: 0;
+  .header:not(:hover):not(:focus-within) .side-nav__item,
+  .header--force-collapsed .side-nav__item {
+    /* (52px 항목 - 24px 아이콘) / 2 = 14px — 접힌 꼴에서 아이콘을 가운데 세운다 */
+    padding: 0 14px;
+    gap: 0;
+    border-radius: var(--radius-card);
+    /* **단추를 52 로 못 박고 가운데 세운다**(사장님 지시 2026-09-25). 여백만 8px 으로 낮추면
+       항목이 자리를 다 먹어 54 가 되고, 위 14px 셈이 어긋나 아이콘이 1px 오른쪽으로 밀린다. */
+    width: 52px;
+    margin: 0 auto;
+    /* 아래 배지의 기준 */
+    position: relative;
   }
 
-  /* 발치도 같다 — 펼쳐지면 줄이 폭을 꽉 채운다 */
-  .header:hover .side-nav__footer,
-  .header:focus-within .side-nav__footer {
-    align-items: stretch;
-  }
+  /* **배지는 단추 오른쪽 위로.** 인라인 배지는 이름표 뒤에 서는데, 접히면 이름표가 폭 0 이라
+     배지가 아이콘 바로 옆에 붙는다 — 단추(52)를 10px 넘어서고 통이 그 자리를 잘라, 동그라미가
+     반쯤 베인 채로 남았다(실측 2026-09-27: 단추 344~396, 배지 382~406, 통 안쪽 끝 397.
+     사장님이 짚으신 그림이 이것이다).
 
-  /* **펼쳐지면 가운데 맞춤을 푼다** — 16px 은 눈대중이 아니라 **아이콘 왼쪽 모서리와 줄을
-     맞추는 값**이다(220px 레일 실측: 목록 x=482 · 아이콘 x=498 · 선 x=498). 접힌 꼴의
-     가운데 맞춤이 펼친 꼴까지 따라오면 그 선만 목록 한복판(＋72px)으로 튄다. */
-  .header:hover .side-nav__separator--short,
-  .header:focus-within .side-nav__separator--short {
-    margin-left: var(--spacing-m);
-    margin-right: var(--spacing-m);
-  }
+     **모서리 값이 0 인 것은 `--top-right` 기본값(-6px)과 다르다** — BottomNav 와 같은 까닭이다.
+     통이 넘침을 잘라서(넘침 셈에 그 `hidden` 이 필요하다) 바깥으로 나간 6px 은 그대로 사라진다.
+     안쪽 모서리에 얹으면 52 안에 온전히 들어온다(28~52).
 
-  /* Hide label completely from layout when collapsed; fade in on hover */
-  .header .side-nav__label {
-    display: inline-block;
-    max-width: 0;
-    opacity: 0;
-    overflow: hidden;
-    transform: translateX(-6px);
-    transition: max-width 180ms ease, opacity 180ms ease, transform 180ms ease;
-    white-space: nowrap;
-    pointer-events: none;
-  }
-
-  .header {
-    width: 72px;
-    transition: width 180ms ease;
-    overflow: visible;
+     인라인 배지는 흰 테두리를 빼 두는데(흐름 안에 서니 가를 것이 없다), 아이콘 위에 얹히면
+     그 테두리가 있어야 갈린다 — 24px 배지의 테두리는 1px 이다. */
+  .header:not(:hover):not(:focus-within) .side-nav__item > .circle-badge,
+  .header--force-collapsed .side-nav__item > .circle-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    border: 1px solid var(--color-pureWhite);
   }
 
-  .header:hover,
-  .header:focus-within {
-    width: 220px; /* match desktop */
+  /* **발치도 가운데로.** 발치 줄은 좌우 여백이 없어 단추 40px 이 왼쪽에 붙었고, 레일
+     가운데(37)보다 5px 왼쪽에 서서 위 아이콘들과 눈에 띄게 어긋났다(말귀 실측 2026-09-25). */
+  .header:not(:hover):not(:focus-within) .side-nav__footer,
+  .header--force-collapsed .side-nav__footer {
+    align-items: center;
   }
 
-  .header:hover .side-nav__label,
-  .header:focus-within .side-nav__label {
-    max-width: 200px;
-    opacity: 1;
-    transform: translateX(0);
-    pointer-events: auto;
+  /* **짧은 구분선도 가운데로.** 그 선은 `margin: 4px var(--spacing-m)` 로 서는데, 명시 폭
+     (24px)을 가진 플렉스 항목이라 `stretch` 가 안 먹고 **시작 모서리**로 떨어진다. 그래서
+     52px 목록 안에서 중심이 38 이 됐다 — 레일·항목·아이콘 중심은 36 인데 그 선만 2px
+     오른쪽이었다(실측 2026-09-26). `auto` 여백이 남는 자리 가운데로 민다.
+     펼치면 이 규칙이 안 걸리고 16px 으로 돌아가는데, 그 16 은 눈대중이 아니라 **아이콘
+     왼쪽 모서리와 줄을 맞추는 값**이다(220px 레일 실측: 목록 482 · 아이콘 498 · 선 498). */
+  .header:not(:hover):not(:focus-within) .side-nav__separator--short,
+  .header--force-collapsed .side-nav__separator--short {
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  /* When JS forces collapsed state (e.g. after navigation), prevent hover from expanding.
-     !important 불필요 — 선택자 특이도(2클래스, :hover 변형은 3클래스)가 .header:hover(1클래스+가상클래스)보다
-     이미 높거나 동일 특이도에서 소스 순서상 뒤에 있어 자연스럽게 우선 적용됨. */
-  .header.header--force-collapsed {
-    width: 72px;
-  }
-  .header.header--force-collapsed .side-nav__label {
+  .header:not(:hover):not(:focus-within) .side-nav__label,
+  .header--force-collapsed .side-nav__label {
     max-width: 0;
     opacity: 0;
     transform: translateX(-6px);
     pointer-events: none;
   }
-  .header.header--force-collapsed:hover {
-    width: 72px;
-  }
-  /* 레일이 안 펼쳐지니 구분선도 가운데에 그대로 있어야 한다 */
-  .header.header--force-collapsed:hover .side-nav__separator--short,
-  .header.header--force-collapsed:focus-within .side-nav__separator--short {
-    margin-left: auto;
-    margin-right: auto;
-  }
+
+  /* 접힌 72px 레일에는 로고가 설 자리가 없다 — 심볼로 선다. 펼치면 넓은 화면과 같은
+     얼굴이 되어야 하므로(같은 220px 폭이다) 여기서만 바꾼다. */
+  .header:not(:hover):not(:focus-within) .brand-identity__image--symbol,
+  .header--force-collapsed .brand-identity__image--symbol { display: block; }
+  .header:not(:hover):not(:focus-within) .brand-identity__image--logo,
+  .header--force-collapsed .brand-identity__image--logo { display: none; }
 }
 
 /* Mobile: top header + bottom bar */
@@ -316,24 +354,7 @@
 
 @media (min-width: 768px) and (max-width: 1023px) {
   .brand-identity__root { height: 100px; }
-
-  /* 접힌 72px 레일에는 로고가 설 자리가 없다 — 심볼로 선다. */
-  .brand-identity__image--symbol { display: block; }
-  .brand-identity__image--logo { display: none; }
-
-  /* **펼치면 넓은 화면과 같은 얼굴이 된다.** 220px 으로 펼친 레일은 넓은 화면과 같은 폭이라,
-     거기서 심볼로 남으면 같은 레일이 같은 폭에서 다른 얼굴을 한다. */
-  .header:hover .brand-identity__image--symbol,
-  .header:focus-within .brand-identity__image--symbol { display: none; }
-  .header:hover .brand-identity__image--logo,
-  .header:focus-within .brand-identity__image--logo { display: block; }
-
-  /* **못 박아 접어 둔 레일은 호버해도 안 펼쳐진다**(`:hover { width: 72px }`) — 그때는 심볼 그대로다.
-     이 갈래가 없으면 72px 자리에 로고가 들어가 잘린다. */
-  .header.header--force-collapsed:hover .brand-identity__image--symbol,
-  .header.header--force-collapsed:focus-within .brand-identity__image--symbol { display: block; }
-  .header.header--force-collapsed:hover .brand-identity__image--logo,
-  .header.header--force-collapsed:focus-within .brand-identity__image--logo { display: none; }
+  /* 심볼이냐 로고냐는 **접혔느냐**로 갈린다 — 그 갈래는 위 레일 블록에 있다(한자리에 모아 둔다). */
 }
 
 @media (max-width: 767px) {