@ihabdevteam/core 0.8.0

package/dist/packages/core/src/styles.css

@@ -0,0 +1,144 @@
+/* ══════════════════════════════════════════════════════════
+   styles.css — @ihabdevteam/core 전역 스타일
+
+   디자인 토큰(CSS 변수)은 tokens.css로 분리했다. 토큰만 필요한 소비자가
+   React 런타임·i18n 초기화 없이 쓸 수 있도록 한 것이며, 정의는 여전히 한 곳
+   (tokens.css)에만 있다 — 여기서는 @import로 끌어와 기존 소비 방식을 그대로 유지한다.
+══════════════════════════════════════════════════════════ */
+
+/* @import는 CSS 규격상 다른 규칙보다 앞서야 하므로 파일 최상단에 둔다. */
+@import './tokens.css';
+
+/* 여기 `@import './app/Page/Page.css'` 가 있었다 — 페이지 레이아웃(.page 여백·최대폭)과
+   공통 모달을 전역으로 보장하려는 것이었다. 각 페이지가 Page.css 를 직접 import 하게
+   두면, 프로덕션이 CSS 를 컴포넌트 청크로 쪼개는 탓에 import 를 빠뜨린 페이지가 그
+   라우트로 **직접 진입**했을 때 padding:0 · max-width:none 으로 렌더됐다(개발 모드는
+   CSS 를 인라인 주입해 증상이 안 보여, 배포 후에야 드러나는 유형이었다).
+
+   app/ 이 앱 저장소로 가면서 그 보장도 함께 옮겼다 — speechear-v2 의 진입점(src/main.tsx)
+   이 `./app/Page/Page.css` 를 한 번 들인다. 여기 남겨 두면 디자인시스템이 앱 화면 CSS 를
+   품게 되어 패키지를 떼어 낼 수가 없다. */
+
+/* ── 터치 기기 hover 고착 방지 ──────────────────────────────── */
+/* button/a 등 인터랙티브 요소에만 제한적으로 적용 */
+@media (hover: none) {
+  button:hover,
+  a:hover,
+  [role="button"]:hover {
+    opacity: 1;
+  }
+}
+
+/* ── 전역 기본 스타일 ───────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-family);
+  color: var(--color-black);
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+/* button/input/select은 브라우저 기본으로 font 상속 안 함 → 명시적 상속 */
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+}
+
+/* ── 타이포그래피 헬퍼 (전역) ────────────────────────────── */
+/* 값은 전부 tokens.css의 --text-* 변수에서 온다(반응형·글자 크기 스케일 포함).
+   여기서는 "어떤 변수를 쓰는지"만 정의한다 — 수치를 바꾸려면 tokens.css를 고친다. */
+
+/* Heading — margin은 0 기본, 필요 시 컴포넌트에서 override */
+.h0, .h0b { font-size: var(--text-h0-size); line-height: var(--text-h0-line); letter-spacing: var(--text-h0-spacing); margin: 0; }
+.h1, .h1b { font-size: var(--text-h1-size); line-height: var(--text-h1-line); letter-spacing: var(--text-h1-spacing); margin: 0; }
+.h2, .h2b { font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-spacing); margin: 0; }
+.h3, .h3b { font-size: var(--text-h3-size); line-height: var(--text-h3-line); letter-spacing: var(--text-h3-spacing); margin: 0; }
+.h4, .h4b { font-size: var(--text-h4-size); line-height: var(--text-h4-line); letter-spacing: var(--text-h4-spacing); margin: 0; }
+.h5, .h5b { font-size: var(--text-h5-size); line-height: var(--text-h5-line); letter-spacing: var(--text-h5-spacing); margin: 0; }
+
+/* Weight */
+.h0  { font-weight: var(--text-h0-weight); }
+.h1  { font-weight: var(--text-h1-weight); }
+.h2  { font-weight: var(--text-h2-weight); }
+.h3  { font-weight: var(--text-h3-weight); }
+.h4  { font-weight: var(--text-h4-weight); }
+.h5  { font-weight: var(--text-h5-weight); }
+.h0b { font-weight: var(--text-h0-weight-bold); }
+.h1b { font-weight: var(--text-h1-weight-bold); }
+.h2b { font-weight: var(--text-h2-weight-bold); }
+.h3b { font-weight: var(--text-h3-weight-bold); }
+.h4b { font-weight: var(--text-h4-weight-bold); }
+.h5b { font-weight: var(--text-h5-weight-bold); }
+
+/* Body — weight 명시 */
+.body-1,  .body-1b { font-size: var(--text-body-1-size); line-height: var(--text-body-1-line); margin: 0; font-weight: var(--text-body-1-weight); }
+.body-2,  .body-2b { font-size: var(--text-body-2-size); line-height: var(--text-body-2-line); margin: 0; font-weight: var(--text-body-2-weight); }
+.body-3,  .body-3b { font-size: var(--text-body-3-size); line-height: var(--text-body-3-line); margin: 0; font-weight: var(--text-body-3-weight); }
+
+.body-1b { font-weight: var(--text-body-1-weight-bold); }
+.body-2b { font-weight: var(--text-body-2-weight-bold); }
+.body-3b { font-weight: var(--text-body-3-weight-bold); }
+
+/* Button / Caption — button에 weight 추가, caption과 크기 차별화 */
+.button-1 { font-size: var(--text-button-1-size); line-height: var(--text-button-1-line); font-weight: var(--text-button-1-weight); margin: 0; }
+.button-2 { font-size: var(--text-button-2-size); line-height: var(--text-button-2-line); font-weight: var(--text-button-2-weight); margin: 0; }
+.caption-1, .caption-1b { font-size: var(--text-caption-1-size); line-height: var(--text-caption-1-line); font-weight: var(--text-caption-1-weight); margin: 0; }
+.caption-2, .caption-2b { font-size: var(--text-caption-2-size); line-height: var(--text-caption-2-line); font-weight: var(--text-caption-2-weight); margin: 0; }
+/* b 계열 — 크기·행간은 같고 굵기만 다르다(body-*b와 동일한 규칙) */
+.caption-1b { font-weight: var(--text-caption-1-weight-bold); }
+.caption-2b { font-weight: var(--text-caption-2-weight-bold); }
+
+/* ── 전역 스크롤바 ──────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: var(--color-darkWhite);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--color-lightGray); }
+* { scrollbar-width: thin; scrollbar-color: var(--color-darkWhite) transparent; }
+
+/* ── 전역 애니메이션 키프레임 ────────────────────────────── */
+@keyframes sub-to-main {
+  0%   { background-color: var(--color-sub); }
+  100% { background-color: var(--color-main); }
+}
+
+/* ── 유틸리티 ───────────────────────────────────────────── */
+.safearea { width: 100%; max-width: var(--container-page); margin: 0 auto; }
+
+/* ── .ihabdevteam-core-scope (playground/DesignSystem 격리용) ──── */
+/* 변수는 :root 에 이미 정의돼 있으므로 여기서 재정의 불필요 */
+.ihabdevteam-core-scope {
+  font-family: var(--font-family);
+  color: var(--color-black);
+  white-space: normal;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+/* 전역 키보드 포커스 링 베이스 — 컴포넌트가 자체 focus 스타일(클래스 선택자, 더 높은 특이성)을
+   정의하면 그쪽이 이기고, 없는 요소에만 이 기본 링이 적용된다(가시성 확보용 최소 베이스). */
+:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* 전역 모션 최소화 — 모션 민감/광과민 사용자 배려(OS '동작 줄이기' 설정 존중).
+   애니메이션·트랜지션을 거의 즉시로 줄이되, 부드러운 스크롤 같은 필수 동작은 유지한다. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/dist/packages/core/src/tokens.css

@@ -0,0 +1,407 @@
+/* ══════════════════════════════════════════════════════════
+   tokens.css — @ihabdevteam/core 디자인 토큰 (CSS 변수 전용)
+
+   이 파일은 **부작용이 없다** — CSS 변수 선언과 테마 오버라이드만 담는다.
+   컴포넌트 스타일·전역 리셋·유틸리티 클래스는 styles.css에 있다.
+
+   소비 방법
+   ─────────
+   1) 이 패키지의 컴포넌트를 함께 쓸 때:  import '@ihabdevteam/core/styles.css'
+      (styles.css가 이 파일을 @import 하므로 따로 불러올 필요 없다)
+   2) 토큰만 필요할 때(다른 프레임워크·Next.js 서버 컴포넌트 등):
+      import '@ihabdevteam/core/tokens.css'
+      React 런타임도, i18n 초기화도 끌려오지 않는다.
+
+   ⚠️ 빌드 주의 — dist/ihabdevteam-core.css(전체 스타일)는 postcss-prefix-selector가
+   `:root`를 `.ihabdevteam-core-scope`로 바꿔 스코프를 가둔다. 반면 이 파일만 따로 빌드한
+   dist/ihabdevteam-core-tokens.css는 프리픽스 없이 `:root`에 그대로 둔다 — 외부 소비자가
+   자기 앱 전역에서 토큰을 쓸 수 있어야 하기 때문이다.
+══════════════════════════════════════════════════════════ */
+
+:root {
+  /* 브라우저 기본 UI(달력 팝업·시간 스피너·스크롤바·자동완성)의 명암을 테마와 맞춘다.
+     선언이 없으면 브라우저는 항상 라이트로 그린다 — 다크 모드에서 방문 일시 입력
+     (VisitsPage의 datetime-local)의 달력이 흰 배경으로 떠 혼자 튄다. */
+  color-scheme: light;
+
+  /* ── 브랜드 입력 변수 ──────────────────────────────────────
+     소비자가 덮어쓰는 지점. 이 두 개만 바꾸면 main/sub 본색과 알파 변형이 따라온다.
+     light/soft/deep/dark 파생색은 기계적 계산이 아니라 손으로 고른 색이라 자동 유도하지
+     않는다 — 필요하면 아래 --brand-*Main / --brand-*Sub 를 각각 덮어쓴다.
+
+     ⚠️ 반드시 :root(또는 --color-* 를 함께 재선언하는 요소)에서 덮어쓸 것.
+     `--color-main: var(--brand-main)` 은 :root에서 이미 값이 확정되므로, 중첩된
+     하위 요소에만 --brand-main 을 걸면 반영되지 않는다(하위는 확정된 값을 상속받는다).
+     예) :root { --brand-main: #211f9f; --brand-lightMain: #d3d2ee; … } */
+  --brand-main: #499cdf;
+  --brand-sub: #4dcdc0;
+
+  /* 브랜드 컬러 */
+
+  --color-lightMain: var(--brand-lightMain, #d2e2ef);
+  --color-softMain: var(--brand-softMain, #8bbce4);
+  --color-main: var(--brand-main);
+  /* 알파 변형은 본색에서 유도 — --brand-main만 바꿔도 함께 따라온다 */
+  --color-main-a10: color-mix(in srgb, var(--color-main) 10%, transparent);
+  /* TrainingStorePage의 배지 hover 배경이 참조하는데 정의가 없었다 */
+  --color-main-a20: color-mix(in srgb, var(--color-main) 20%, transparent);
+  --color-deepMain: var(--brand-deepMain, #418ecd);
+  --color-darkMain: var(--brand-darkMain, #1e5a8f);
+
+  --color-lightSub: var(--brand-lightSub, #d5ecea);
+  --color-softSub: var(--brand-softSub, #92ddd5);
+  --color-sub: var(--brand-sub);
+  --color-sub-a10: color-mix(in srgb, var(--color-sub) 10%, transparent);
+  --color-deepSub: var(--brand-deepSub, #45bbaf);
+  --color-darkSub: var(--brand-darkSub, #257e76);
+
+  --color-infoLink: #2f7fd1;
+  --color-uiAccent: #32bbae;
+  --color-success: #2fae9e;
+  --color-warn: #e6b94e;
+  --color-warn-a10: #e6b94e1a;
+  --color-error: #d9534f;
+  --color-error-a10: #d9534f1a;
+  --color-like: #e06b68;
+  --color-disabled: #bfc7d1;
+
+  /* 기본 컬러 */
+  --color-pureWhite: #ffffff;
+
+  --color-white: #fbfdff;
+  --color-white-a10: #fbfdff1a;
+  --color-white-a30: #fbfdff4d;
+  /* Button의 transparent-white 변형 부제가 참조하는데 정의가 없었다 */
+  --color-white-a60: #fbfdff99;
+  --color-white-a80: #fbfdffcc;
+  --color-deepWhite: #f8fafc;
+  --color-darkWhite: #eef2f6;
+
+  --color-whiteLine: #dde3ec;
+
+  --color-lightGray: #96a4b8;
+  --color-lightGray-a10: #96a4b81a;
+  --color-lightGray-a80: #96a4b8cc;
+  --color-softGray: #7b8ca3;
+  --color-gray: #64748b;
+  --color-gray-a10: #64748b1a;
+  /* Button.css가 참조하는데 정의가 없어 무효값이 되던 토큰 — 부제 색이 상속으로 흘렀다 */
+  --color-gray-a60: #64748b99;
+  --color-gray-a80: #64748bcc;
+  --color-deepGray: #546170;
+  --color-darkGray: #434d56;
+  --color-darkGray-a10: #434d561a;
+  --color-lightBlack: #32393f;
+  --color-softBlack: #222528;
+  --color-black: #111111;
+
+  --color-pureBlack: #000000;
+
+  --color-popupBlock: rgba(16, 24, 32, 0.6);
+
+  /* ── 시맨틱 색 별칭 (역할 기반) ───────────────────────────
+     --color-black/white 계열은 "밝기 이름"이라 다크 모드에서 이름과 실제 색이 뒤집힌다
+     (다크에서 --color-black은 #f0f2f5, 즉 밝은 색). 새로 쓰는 코드는 아래 역할 이름을
+     쓰면 테마와 무관하게 의미가 유지된다. 값은 기존 토큰을 가리키므로 다크 모드
+     재정의가 그대로 따라온다. */
+  --color-text-primary: var(--color-black);
+  --color-text-secondary: var(--color-gray);
+  --color-text-muted: var(--color-lightGray);
+  --color-text-on-brand: var(--color-pureWhite);
+  --color-surface: var(--color-white);
+  --color-surface-raised: var(--color-deepWhite);
+  --color-surface-sunken: var(--color-darkWhite);
+  --color-border: var(--color-whiteLine);
+  --color-overlay: var(--color-popupBlock);
+
+  /* 그림자 */
+  --shadow-popup: 20px 20px 20px rgba(0, 0, 0, 0.05);
+  --shadow-tooltip: 8px 8px 8px rgba(0, 0, 0, 0.05);
+  --shadow-button: 4px 4px 4px rgba(0, 0, 0, 0.05);
+  --shadow-menu: 20px 20px 20px rgba(0, 0, 0, 0.05);
+  --shadow-card: 2px 2px 8px rgba(0, 0, 0, 0.06);
+  --shadow-dropdown: 8px 8px 24px rgba(0, 0, 0, 0.06);
+  --shadow-panel: 4px 4px 20px rgba(0, 0, 0, 0.06);
+
+  /* 폰트 */
+  /* 'Pretendard Variable'이 맨 앞에 와야 한다 — 앱이 로드하는 웹폰트
+     (pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css)가 선언하는
+     패밀리 이름이 'Pretendard Variable'이라, 이 이름이 없으면 웹폰트가 매칭되지 않고
+     시스템 폰트로 폴백된다. 로컬에 Pretendard를 설치한 개발 기기에서는 두 번째 후보로
+     매칭돼 정상처럼 보여, 일반 사용자에게만 다른 폰트가 나가는 형태가 된다.
+     두 번째 'Pretendard'는 정적(static) 빌드를 쓰거나 로컬 설치된 경우의 후보다. */
+  --font-family: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
+
+  /* ── 타입 스케일 ──────────────────────────────────────────
+     클래스(.h0~.h5 / .body-* / .button-* / .caption-*)는 styles.css에 있고 값은 전부
+     여기서 온다. 아래 반응형·글자 크기 스케일 블록이 같은 변수를 재정의하므로,
+     다른 프레임워크(Tailwind @theme 등)에서도 이 변수만 읽으면 동일한 스케일을 얻는다.
+     `-weight`는 기본, `-weight-bold`는 클래스명에 b가 붙은 변형(.h0b, .body-1b …)이다. */
+  --text-h0-size: 40px;   --text-h0-line: 52px;   --text-h0-spacing: -1px;     --text-h0-weight: 700; --text-h0-weight-bold: 800;
+  --text-h1-size: 32px;   --text-h1-line: 44px;   --text-h1-spacing: -0.5px;   --text-h1-weight: 700; --text-h1-weight-bold: 800;
+  --text-h2-size: 24px;   --text-h2-line: 34px;   --text-h2-spacing: -0.25px;  --text-h2-weight: 500; --text-h2-weight-bold: 600;
+  --text-h3-size: 20px;   --text-h3-line: 30px;   --text-h3-spacing: normal;   --text-h3-weight: 500; --text-h3-weight-bold: 600;
+  --text-h4-size: 17px;   --text-h4-line: 26px;   --text-h4-spacing: normal;   --text-h4-weight: 500; --text-h4-weight-bold: 600;
+  --text-h5-size: 15px;   --text-h5-line: 23px;   --text-h5-spacing: normal;   --text-h5-weight: 500; --text-h5-weight-bold: 600;
+
+  --text-body-1-size: 18px; --text-body-1-line: 28px; --text-body-1-weight: 400; --text-body-1-weight-bold: 600;
+  --text-body-2-size: 16px; --text-body-2-line: 26px; --text-body-2-weight: 400; --text-body-2-weight-bold: 600;
+  --text-body-3-size: 14px; --text-body-3-line: 22px; --text-body-3-weight: 400; --text-body-3-weight-bold: 600;
+
+  --text-button-1-size: 14px; --text-button-1-line: 20px; --text-button-1-weight: 500;
+  --text-button-2-size: 13px; --text-button-2-line: 18px; --text-button-2-weight: 400;
+
+  --text-caption-1-size: 12px; --text-caption-1-line: 17px; --text-caption-1-weight: 400; --text-caption-1-weight-bold: 600;
+  --text-caption-2-size: 11px; --text-caption-2-line: 15px; --text-caption-2-weight: 400; --text-caption-2-weight-bold: 600;
+
+  /* 스페이싱 스케일 */
+  --spacing-xs:      8px;
+  --spacing-s:      12px;
+  --spacing-m:      16px;
+  --spacing-l:      20px;
+  --spacing-xl:     24px;
+
+  /* 레이아웃 스페이싱 (반응형 오버라이드 있음) */
+  --spacing-page:    60px;   /* 페이지 외곽 여백 */
+  --spacing-content: 20px;   /* 컴포넌트 내부 콘텐츠 여백 */
+
+  /* 콘텐츠 최대폭 — --spacing-page(바깥 여백)와 짝이 되는 안쪽 한계.
+     .page와 .safearea가 쓰는 값과 같다. 더 좁은 사이트는 이 변수만 덮어쓰면 된다. */
+  --container-page: 1920px;
+
+  /* 하위 호환 — 기존 코드가 교체되면 제거 예정 */
+  --margin-page:    var(--spacing-page);
+  --margin-content: var(--spacing-content);
+
+  /* ── 모션 ─────────────────────────────────────────────────
+     hover·transition 시간을 매번 임의로 정하지 않도록 한 벌만 둔다.
+     `prefers-reduced-motion: reduce`일 때 전역으로 거의 0으로 줄이는 처리는
+     styles.css에 이미 있다(여기 값과 무관하게 동작). */
+  --duration-fast: 120ms;
+  --duration-base: 200ms;
+  --duration-slow: 320ms;
+  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ── 브레이크포인트 ───────────────────────────────────────
+     ⚠️ CSS 미디어쿼리는 var()를 받지 못한다 — 이 변수는 미디어쿼리에 직접 쓸 수 없고,
+     JS·Tailwind(@theme)·컨테이너 쿼리 등 "값을 읽어가는" 소비자를 위한 단일 출처다.
+     이 패키지 안의 미디어쿼리는 같은 수치를 리터럴로 유지한다(아래 오버라이드 블록). */
+  --bp-tablet: 768px;
+  --bp-desktop: 1024px;
+
+  /* 보더 라디우스 — 값 오름차순 스케일.
+     네이밍 부채: `--radius-sm`(8)과 `--radius-s`(10)가 두 컨벤션을 혼용한다(사용처 100+라 rename은 breaking → 별도 정리).
+     `card`/`dialog`는 의미 토큰이며 dialog는 스케일 토큰을 참조해 중복을 제거했다. */
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-s: 10px;
+  --radius-card: 12px;
+  --radius-m: 20px;
+  --radius-l: 40px;
+  /* 알약 모양(완전 둥근 모서리). TrainingCard·스토어 배지가 참조하는데 정의가 없어
+     border-radius 선언이 통째로 무효가 되고 각진 사각형으로 렌더됐다. */
+  --radius-full: 999px;
+  --radius-dialog: var(--radius-m); /* 20px — radius-m과 동일. 의미 별칭 */
+
+  /* ── z-index ──────────────────────────────────────────────
+   * 모든 z-index는 이 토큰을 사용. 매직 넘버 금지.
+   */
+  --z-base: 0;
+  --z-content: 1;
+  --z-dropdown: 200;
+  --z-sticky: 500;
+  --z-nav: 1000;
+  --z-sidebar: 1100;
+  --z-overlay: 2000;
+  --z-page-popup: 2100;  /* 훈련 팝업 전체화면 */
+  /* 플로팅 버튼(버그신고 FAB 등) — page-popup 위에 떠서 훈련 중에도 쓸 수 있어야 하지만,
+     modal 아래여야 한다. modal보다 높으면 팝업의 주 CTA(완료·다음 문제)를 덮어 클릭을 가로챈다. */
+  --z-fab: 2150;
+  --z-modal: 2200;       /* createPortal 이후 page-popup 위에 렌더링되어야 함 */
+  /* 키보드 포커스 링 — 가시성 충분한 불투명 브랜드색(기존 알파 10% outline은 거의 안 보였음) */
+  --focus-ring: var(--color-main);
+  --z-popover: 2300;
+  --z-tooltip: 3000;
+  --z-alert: 3100;
+  --z-toast: 3200;
+}
+
+/* ── 반응형 토큰 오버라이드 ─────────────────────────────── */
+@media (min-width: 768px) and (max-width: 1023px) {
+  :root {
+    --spacing-page:    40px;
+    --spacing-content: 15px;
+
+    --text-h0-size: 32px; --text-h0-line: 44px; --text-h0-spacing: -0.75px;
+    --text-h1-size: 28px; --text-h1-line: 40px; --text-h1-spacing: -0.4px;
+    --text-h2-size: 22px; --text-h2-line: 32px; --text-h2-spacing: -0.2px;
+    --text-h3-size: 18px; --text-h3-line: 28px;
+    --text-h4-size: 16px; --text-h4-line: 24px;
+    --text-h5-size: 14px; --text-h5-line: 21px;  /* 15→14: h5↔body-2 충돌 해소 */
+    --text-body-1-size: 17px; --text-body-1-line: 27px;  /* 16→17: h4(16px)와 분리 */
+    --text-body-2-size: 15px; --text-body-2-line: 24px;
+    --text-body-3-size: 14px; --text-body-3-line: 22px;
+  }
+}
+
+@media (max-width: 767px) {
+  :root {
+    --spacing-page:    20px;
+    --spacing-content: 10px;
+
+    /* h1=24 / h2=20 / h3=17 — 각 4→3px 계층 확보 */
+    --text-h0-size: 28px; --text-h0-line: 38px; --text-h0-spacing: -0.5px;
+    --text-h1-size: 24px; --text-h1-line: 34px; --text-h1-spacing: -0.3px;
+    --text-h2-size: 20px; --text-h2-line: 29px; --text-h2-spacing: -0.2px;  /* 22→20: h1과 4px 확보 */
+    --text-h3-size: 17px; --text-h3-line: 26px;
+    --text-h4-size: 15px; --text-h4-line: 23px;
+    --text-h5-size: 13px; --text-h5-line: 20px;
+    --text-body-1-size: 17px; --text-body-1-line: 27px;  /* 16→17: h4(15px)와 분리 */
+    --text-body-2-size: 15px; --text-body-2-line: 23px;
+    --text-body-3-size: 13px; --text-body-3-line: 21px;
+  }
+}
+
+/* ── 글자 크기 스케일 (data-font-scale) ─────────────────── */
+/* medium은 기본값이므로 override 없음                        */
+/* +1: ×1.125  +2: ×1.25  +3: ×1.375                       */
+/* html 요소에 붙으므로(:root와 같은 요소) 특이도가 같다 —
+   반드시 위 미디어쿼리 블록보다 뒤에 와야 글자 크기 설정이 이긴다. */
+
+[data-font-scale="large1"] {
+  --text-h4-size: 19px; --text-h4-line: 29px;
+  --text-h5-size: 17px; --text-h5-line: 26px;
+  --text-body-1-size: 20px; --text-body-1-line: 31px;
+  --text-body-2-size: 18px; --text-body-2-line: 28px;
+  --text-body-3-size: 16px; --text-body-3-line: 25px;
+  --text-button-1-size: 16px; --text-button-1-line: 23px;
+  --text-button-2-size: 15px; --text-button-2-line: 21px;
+  --text-caption-1-size: 14px; --text-caption-1-line: 20px;
+  --text-caption-2-size: 12px; --text-caption-2-line: 17px;
+}
+
+[data-font-scale="large2"] {
+  --text-h4-size: 21px; --text-h4-line: 32px;
+  --text-h5-size: 19px; --text-h5-line: 29px;
+  --text-body-1-size: 23px; --text-body-1-line: 36px;
+  --text-body-2-size: 20px; --text-body-2-line: 31px;
+  --text-body-3-size: 18px; --text-body-3-line: 28px;
+  --text-button-1-size: 18px; --text-button-1-line: 26px;
+  --text-button-2-size: 16px; --text-button-2-line: 23px;
+  --text-caption-1-size: 15px; --text-caption-1-line: 21px;
+  --text-caption-2-size: 14px; --text-caption-2-line: 19px;
+}
+
+[data-font-scale="large3"] {
+  --text-h4-size: 23px; --text-h4-line: 35px;
+  --text-h5-size: 21px; --text-h5-line: 32px;
+  --text-body-1-size: 25px; --text-body-1-line: 39px;
+  --text-body-2-size: 22px; --text-body-2-line: 34px;
+  --text-body-3-size: 19px; --text-body-3-line: 30px;
+  --text-button-1-size: 19px; --text-button-1-line: 27px;
+  --text-button-2-size: 18px; --text-button-2-line: 26px;
+  --text-caption-1-size: 17px; --text-caption-1-line: 24px;
+  --text-caption-2-size: 15px; --text-caption-2-line: 21px;
+}
+
+/* ── 다크 모드 ────────────────────────────────────────────────────────── */
+/* 수동 설정: data-theme="dark" */
+[data-theme="dark"] {
+  color-scheme: dark;
+  /* Surface & Background */
+  --color-white:       #1e2227;
+  --color-deepWhite:   #252a30;
+  --color-darkWhite:   #2d3238;
+  --color-whiteLine:   rgba(255, 255, 255, 0.08);
+  --color-black:       #f0f2f5;
+  --color-softBlack:   #dde1e7;
+  --color-lightBlack:  #cbd1da;
+  --color-darkGray:    #b8c0cc;
+  --color-deepGray:    #a1aab7;
+  --color-gray:        #8b95a1;
+  --color-softGray:    #737f90;
+  --color-lightGray:   #60697a;
+  --color-pureWhite:   #0f1215;
+  --color-pureBlack:   #f0f2f5;
+  /* 회색 계열은 전부 뒤집는데 비활성색만 빠져 있었다 — 라이트용 밝은 회색이
+     어두운 배경에서는 오히려 도드라져, 못 누르는 버튼이 누를 수 있는 버튼보다
+     눈에 띄었다(1/1 쪽에서 멈춘 페이지 화살표). 라이트에서의 흐림 정도
+     (배경 대비 1.67)를 다크 배경 #1e2227 기준으로 맞춘 값이다. */
+  --color-disabled:    #3f4650;
+}
+
+/* 자동(OS 설정): data-theme="auto" 또는 속성 없음 */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) {
+  color-scheme: dark;
+  /* Surface & Background */
+  --color-white:       #1e2227;
+  --color-deepWhite:   #252a30;
+  --color-darkWhite:   #2d3238;
+  --color-whiteLine:   rgba(255, 255, 255, 0.08);
+  --color-black:       #f0f2f5;
+  --color-softBlack:   #dde1e7;
+  --color-lightBlack:  #cbd1da;
+  --color-darkGray:    #b8c0cc;
+  --color-deepGray:    #a1aab7;
+  --color-gray:        #8b95a1;
+  --color-softGray:    #737f90;
+  --color-lightGray:   #60697a;
+  --color-pureWhite:   #0f1215;
+  --color-pureBlack:   #f0f2f5;
+  /* 회색 계열은 전부 뒤집는데 비활성색만 빠져 있었다 — 라이트용 밝은 회색이
+     어두운 배경에서는 오히려 도드라져, 못 누르는 버튼이 누를 수 있는 버튼보다
+     눈에 띄었다(1/1 쪽에서 멈춘 페이지 화살표). 라이트에서의 흐림 정도
+     (배경 대비 1.67)를 다크 배경 #1e2227 기준으로 맞춘 값이다. */
+  --color-disabled:    #3f4650;
+  }
+  [data-theme="auto"] {
+  color-scheme: dark;
+  /* Surface & Background */
+  --color-white:       #1e2227;
+  --color-deepWhite:   #252a30;
+  --color-darkWhite:   #2d3238;
+  --color-whiteLine:   rgba(255, 255, 255, 0.08);
+  --color-black:       #f0f2f5;
+  --color-softBlack:   #dde1e7;
+  --color-lightBlack:  #cbd1da;
+  --color-darkGray:    #b8c0cc;
+  --color-deepGray:    #a1aab7;
+  --color-gray:        #8b95a1;
+  --color-softGray:    #737f90;
+  --color-lightGray:   #60697a;
+  --color-pureWhite:   #0f1215;
+  --color-pureBlack:   #f0f2f5;
+  /* 회색 계열은 전부 뒤집는데 비활성색만 빠져 있었다 — 라이트용 밝은 회색이
+     어두운 배경에서는 오히려 도드라져, 못 누르는 버튼이 누를 수 있는 버튼보다
+     눈에 띄었다(1/1 쪽에서 멈춘 페이지 화살표). 라이트에서의 흐림 정도
+     (배경 대비 1.67)를 다크 배경 #1e2227 기준으로 맞춘 값이다. */
+  --color-disabled:    #3f4650;
+  }
+}
+
+/* ── 라이트 모드 강제 (다크 모드 무효화) ─────────────────────────────────── */
+/* 위 다크 모드 블록이 재정의하는 모든 --color-* 변수를 :root의 라이트 기본값으로
+   다시 고정한다. 사용자/OS의 다크 모드 설정과 무관하게 항상 라이트로 보여야 하는
+   화면(랜딩 페이지, 로그인 팝업 등)의 루트 요소에 이 클래스를 붙여 사용한다.
+   portal로 document.body에 직접 렌더되는 요소(Popup 등)는 조상 스코프의 CSS
+   변수를 상속받지 못하므로, 이런 요소는 반드시 자기 자신에게 이 클래스를 붙여야 한다. */
+.force-light-scheme {
+  color-scheme: light;
+  --color-pureWhite:  #ffffff;
+  --color-white:      #fbfdff;
+  --color-deepWhite:  #f8fafc;
+  --color-darkWhite:  #eef2f6;
+  --color-whiteLine:  #dde3ec;
+  --color-lightGray:  #96a4b8;
+  --color-softGray:   #7b8ca3;
+  --color-gray:       #64748b;
+  --color-deepGray:   #546170;
+  --color-darkGray:   #434d56;
+  --color-lightBlack: #32393f;
+  --color-softBlack:  #222528;
+  --color-black:      #111111;
+  --color-pureBlack:  #000000;
+  --color-disabled:   #bfc7d1;
+}

package/dist/packages/core/src/types/audio.d.ts

@@ -0,0 +1,11 @@
+/** 스피커 방향 위치 정보 */
+export interface SpeakerPos {
+    id: string;
+    label: string;
+    /** SVG 좌표계 각도 (0°=오른쪽, 270°=정면/위) */
+    angleDeg: number;
+    /** 검사 기준 각도 (0°=정면, -=왼쪽, +=오른쪽) */
+    deg: number;
+    /** 동심원 링 번호 (1=가장 안쪽, 기본값 1) */
+    row?: number;
+}

package/dist/packages/core/src/types/audio.js

@@ -0,0 +1 @@
+export {};

package/dist/packages/core/src/types/device.d.ts

@@ -0,0 +1,10 @@
+export type DeviceForm = {
+    wornYear: string;
+    wornMonth: string;
+    wornDay: string;
+    direction: string;
+    device: string;
+    brand: string;
+    fitType: string;
+    productName: string;
+};

package/dist/packages/core/src/types/device.js

@@ -0,0 +1 @@
+export {};

package/dist/packages/core/src/types/filterPanel.d.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+/**
+ * FilterPanel의 allOption('전체'/'무관') 버튼이 onSelect로 방출하는 값.
+ * 표시 라벨(allLabel)은 로케일에 따라 번역되지만 방출 값은 항상 이 리터럴이므로,
+ * 소비처의 "전체 클릭" 판정은 t('common.all')이 아니라 반드시 이 상수와 비교해야 한다
+ * (t 비교는 en 로케일에서 'All' ≠ '전체'가 되어 해제 대신 쓰레기 필터 값이 들어간다).
+ * @public
+ */
+export declare const FILTER_ALL_VALUE = "\uC804\uCCB4";
+/** @public */
+export interface FilterPanelItem {
+    value: string;
+    disabled?: boolean;
+    labels?: string[];
+    tooltip?: string;
+    /** 지정하면 tooltip(한 줄 텍스트) 대신 제목+목록 형태의 설명 툴팁을 보여준다 */
+    descriptionTooltip?: {
+        title?: string;
+        items: string[];
+    };
+    displayLabel?: string;
+    /** 버튼 모양 강제 지정(기본은 Button 기본값을 따름) — 예: 'pill'로 "고정된 값" 등을 시각적으로 구분 */
+    shape?: 'rounded' | 'pill';
+}
+/** @public */
+export interface FilterPanelSection {
+    label: string;
+    displayLabel?: string;
+    /** 이 섹션 앞에 표시할 그룹 헤더. 지정 시 가로 배치에서 줄바꿈을 만들어 하위 섹션들을 묶는다. */
+    groupLabel?: string;
+    /** 그룹 헤더 우측에 표시할 액션(예: 보기 모드 토글). groupLabel과 함께 지정. */
+    groupAction?: ReactNode;
+    /**
+     * 섹션 내부 배치.
+     * - 'stack'(기본): 라벨을 위에 두고 아이템을 아래에 배치
+     * - 'row': 라벨을 왼쪽에 두고 아이템을 오른쪽에 가로로 배치 (한 줄 차지)
+     */
+    layout?: 'stack' | 'row';
+    /**
+     * 버튼형 아이템의 모양 강제 지정. 미지정 시 값 길이로 자동 판정(한 글자=dot).
+     * - 'bar': 텍스트 라벨용 막대 버튼
+     * - 'dot': 단일 자모용 원형 버튼
+     */
+    itemType?: 'dot' | 'bar';
+    /** 가로 배치에서 이 섹션을 한 줄 전체(자체 줄)로 배치 — 인라인 흐름에서 분리 */
+    block?: boolean;
+    labelAction?: ReactNode;
+    items?: (FilterPanelItem | string)[];
+    groups?: (FilterPanelItem | string)[][];
+    /** 'note': 선택 불가능한 안내 텍스트 섹션 — content를 그대로 렌더링한다(예: 입력 구문 사용법). */
+    type?: 'input' | 'note';
+    /** type: 'note' 전용 — 섹션 본문에 표시할 내용. */
+    content?: ReactNode;
+    placeholder?: string;
+    /** type: 'input' 전용 — 입력값 형식 오류 메시지(있으면 TextField 하단에 에러로 표시). */
+    error?: string;
+    multiple?: boolean;
+    display?: 'button' | 'segmented' | 'dropdown';
+    allOption?: boolean;
+    allLabel?: string;
+    /** allOption 버튼("모두"/"전체" 등)을 비활성화한다 — 형제 선택에 의해 이 섹션 전체가 강제될 때 사용 */
+    allOptionDisabled?: boolean;
+}

package/dist/packages/core/src/types/filterPanel.js

@@ -0,0 +1,8 @@
+/**
+ * FilterPanel의 allOption('전체'/'무관') 버튼이 onSelect로 방출하는 값.
+ * 표시 라벨(allLabel)은 로케일에 따라 번역되지만 방출 값은 항상 이 리터럴이므로,
+ * 소비처의 "전체 클릭" 판정은 t('common.all')이 아니라 반드시 이 상수와 비교해야 한다
+ * (t 비교는 en 로케일에서 'All' ≠ '전체'가 되어 해제 대신 쓰레기 필터 값이 들어간다).
+ * @public
+ */
+export const FILTER_ALL_VALUE = '전체';

package/dist/packages/core/src/types/geometry.d.ts

@@ -0,0 +1,14 @@
+/**
+ * DOMRect와 호환되는 경량 사각형 인터페이스입니다.
+ * DOMRect를 직접 사용할 수 없는 환경(테스트, SSR 등)에서 사용합니다.
+ *
+ * @public
+ */
+export interface AnchorRectLike {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}