@korioinc/next-core 2.0.47 → 2.0.48

package/dist/components/locale-switcher/index.js

@@ -53,5 +53,5 @@ export default function LocaleSwitcher({ languages } = {}) {
     if (!currentLanguage) {
         return null;
     }
-    return (_jsxs(Menu, { as: 'div', className: 'relative', children: [_jsx(MenuButton, { className: 'border-glass-strong bg-glass hover:bg-glass-tinted relative inline-flex h-9 w-9 items-center justify-center rounded-md border transition-colors', children: currentLanguage.flag }), _jsx(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95', children: _jsx(MenuItems, { anchor: 'bottom end', className: 'glass-tinted glass-backdrop border-glass-strong z-100 w-48 rounded-md border ring-1 ring-black/5 [--anchor-gap:4px] focus:outline-none', children: _jsx("div", { className: 'py-1', children: availableLanguages.map((language) => (_jsx(MenuItem, { children: _jsxs("button", { onClick: () => changeLanguage(language.code), className: 'data-[focus]:bg-glass-tinted text-foreground group flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors', children: [language.flag, _jsx("span", { className: 'whitespace-nowrap', children: language.name }), currentLocale === language.code && (_jsx("svg", { className: 'ml-auto h-4 w-4', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', children: _jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M5 13l4 4L19 7' }) }))] }) }, language.code))) }) }) })] }));
+    return (_jsxs(Menu, { as: 'div', className: 'relative', children: [_jsx(MenuButton, { className: 'glass-border-subtle bg-glass-surface hover:bg-glass-surface-interactive relative inline-flex h-9 w-9 items-center justify-center rounded-md border transition-colors', children: currentLanguage.flag }), _jsx(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95', children: _jsx(MenuItems, { anchor: 'bottom end', className: 'glass glass-surface-subtle glass-backdrop-sm glass-shadow-sm glass-border-strong z-100 w-48 rounded-md border ring-1 ring-black/5 [--anchor-gap:8px] focus:outline-none', children: _jsx("div", { className: 'py-1', children: availableLanguages.map((language) => (_jsx(MenuItem, { children: _jsxs("button", { onClick: () => changeLanguage(language.code), className: 'data-[focus]:bg-glass-surface-interactive text-foreground group flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors', children: [language.flag, _jsx("span", { className: 'whitespace-nowrap', children: language.name }), currentLocale === language.code && (_jsx("svg", { className: 'ml-auto h-4 w-4', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', children: _jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M5 13l4 4L19 7' }) }))] }) }, language.code))) }) }) })] }));
 }

package/dist/components/theme-switcher/index.js

@@ -38,8 +38,8 @@ const ThemeSwitcher = () => {
         setTheme(nextTheme);
     };
     if (!mounted) {
-        return (_jsx("button", { className: 'border-glass-strong bg-glass relative inline-flex h-9 w-9 items-center justify-center rounded-md border opacity-0', "aria-hidden": 'true', children: _jsx("div", { className: 'h-5 w-5' }) }));
+        return (_jsx("button", { className: 'glass-border-subtle bg-glass-surface relative inline-flex h-9 w-9 items-center justify-center rounded-md border opacity-0', "aria-hidden": 'true', children: _jsx("div", { className: 'h-5 w-5' }) }));
     }
-    return (_jsxs("button", { onClick: toggleTheme, className: `border-glass-strong bg-glass hover:bg-glass-tinted relative inline-flex h-9 w-9 items-center justify-center rounded-md border ${canAnimateColors ? 'transition-colors' : ''}`, "aria-label": `Switch theme (current: ${currentThemeLabel})`, title: `Theme: ${currentThemeLabel} (click to change)`, children: [_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: `absolute h-5 w-5 transition-all ${currentTheme === 'light' ? 'scale-100 rotate-0 opacity-100' : 'scale-0 rotate-90 opacity-0'}`, children: [_jsx("circle", { cx: '12', cy: '12', r: '5' }), _jsx("line", { x1: '12', y1: '1', x2: '12', y2: '3' }), _jsx("line", { x1: '12', y1: '21', x2: '12', y2: '23' }), _jsx("line", { x1: '4.22', y1: '4.22', x2: '5.64', y2: '5.64' }), _jsx("line", { x1: '18.36', y1: '18.36', x2: '19.78', y2: '19.78' }), _jsx("line", { x1: '1', y1: '12', x2: '3', y2: '12' }), _jsx("line", { x1: '21', y1: '12', x2: '23', y2: '12' }), _jsx("line", { x1: '4.22', y1: '19.78', x2: '5.64', y2: '18.36' }), _jsx("line", { x1: '18.36', y1: '5.64', x2: '19.78', y2: '4.22' })] }), _jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: `absolute h-5 w-5 transition-all ${currentTheme === 'dark' ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'}`, children: _jsx("path", { d: 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' }) }), _jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: `absolute h-5 w-5 transition-all ${currentTheme === 'system' ? 'scale-100 rotate-0 opacity-100' : 'scale-0 rotate-90 opacity-0'}`, children: [_jsx("rect", { x: '3', y: '4', width: '18', height: '12', rx: '2' }), _jsx("line", { x1: '8', y1: '20', x2: '16', y2: '20' }), _jsx("line", { x1: '12', y1: '16', x2: '12', y2: '20' })] })] }));
+    return (_jsxs("button", { onClick: toggleTheme, className: `glass-border-subtle bg-glass-surface hover:bg-glass-surface-interactive relative inline-flex h-9 w-9 items-center justify-center rounded-md border ${canAnimateColors ? 'transition-colors' : ''}`, "aria-label": `Switch theme (current: ${currentThemeLabel})`, title: `Theme: ${currentThemeLabel} (click to change)`, children: [_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: `absolute h-5 w-5 transition-all ${currentTheme === 'light' ? 'scale-100 rotate-0 opacity-100' : 'scale-0 rotate-90 opacity-0'}`, children: [_jsx("circle", { cx: '12', cy: '12', r: '5' }), _jsx("line", { x1: '12', y1: '1', x2: '12', y2: '3' }), _jsx("line", { x1: '12', y1: '21', x2: '12', y2: '23' }), _jsx("line", { x1: '4.22', y1: '4.22', x2: '5.64', y2: '5.64' }), _jsx("line", { x1: '18.36', y1: '18.36', x2: '19.78', y2: '19.78' }), _jsx("line", { x1: '1', y1: '12', x2: '3', y2: '12' }), _jsx("line", { x1: '21', y1: '12', x2: '23', y2: '12' }), _jsx("line", { x1: '4.22', y1: '19.78', x2: '5.64', y2: '18.36' }), _jsx("line", { x1: '18.36', y1: '5.64', x2: '19.78', y2: '4.22' })] }), _jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: `absolute h-5 w-5 transition-all ${currentTheme === 'dark' ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'}`, children: _jsx("path", { d: 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' }) }), _jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: `absolute h-5 w-5 transition-all ${currentTheme === 'system' ? 'scale-100 rotate-0 opacity-100' : 'scale-0 rotate-90 opacity-0'}`, children: [_jsx("rect", { x: '3', y: '4', width: '18', height: '12', rx: '2' }), _jsx("line", { x1: '8', y1: '20', x2: '16', y2: '20' }), _jsx("line", { x1: '12', y1: '16', x2: '12', y2: '20' })] })] }));
 };
 export default ThemeSwitcher;

package/dist/components/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAcpD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,YAAY,+BA2DlE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAa5C,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,YAAY,+BAsClE"}

package/dist/components/tooltip/index.js

@@ -1,40 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import { FloatingPortal, arrow, autoUpdate, flip, offset, shift, useFloating, useHover, useInteractions, } from '@floating-ui/react';
+import { useState } from 'react';
+import { FloatingPortal, autoUpdate, flip, offset, shift, useFloating, useHover, useInteractions, } from '@floating-ui/react';
 export default function Tooltip({ children, content }) {
     const [isOpen, setIsOpen] = useState(false);
-    const arrowRef = useRef(null);
-    const { refs, floatingStyles, context, middlewareData, placement } = useFloating({
+    const { refs, floatingStyles, context } = useFloating({
         open: isOpen,
         onOpenChange: setIsOpen,
         placement: 'top',
         strategy: 'fixed',
         middleware: [
-            offset(10),
+            offset(6),
             flip({
                 fallbackAxisSideDirection: 'start',
                 crossAxis: false,
             }),
             shift({ padding: 8 }),
-            arrow({ element: arrowRef }),
         ],
         whileElementsMounted: autoUpdate,
     });
     const hover = useHover(context);
     const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
-    // Determine which side the arrow should be on based on placement
-    const staticSide = {
-        top: 'bottom',
-        right: 'left',
-        bottom: 'top',
-        left: 'right',
-    }[placement.split('-')[0]];
-    return (_jsxs("div", { ref: refs.setReference, ...getReferenceProps(), className: 'inline-block', children: [children, isOpen && (_jsx(FloatingPortal, { children: _jsxs("div", { ref: refs.setFloating, style: floatingStyles, className: 'z-100 rounded bg-black px-2 py-1 text-sm text-white shadow-md dark:bg-white dark:text-black', ...getFloatingProps(), children: [content, _jsx("div", { ref: arrowRef, className: 'absolute h-2 w-2 rotate-45 bg-black dark:bg-white', style: {
-                                left: middlewareData.arrow?.x != null ? `${middlewareData.arrow.x}px` : '',
-                                top: middlewareData.arrow?.y != null ? `${middlewareData.arrow.y}px` : '',
-                                right: '',
-                                bottom: '',
-                                [staticSide]: '-4px',
-                            } })] }) }))] }));
+    return (_jsxs("div", { ref: refs.setReference, ...getReferenceProps(), className: 'inline-block', children: [children, isOpen && (_jsx(FloatingPortal, { children: _jsx("div", { ref: refs.setFloating, style: floatingStyles, className: 'glass glass-surface-strong glass-texture-subtle glass-border-strong glass-backdrop-lg glass-shadow-lg text-foreground z-100 rounded-lg px-3 py-2 text-sm font-medium', ...getFloatingProps(), children: content }) }))] }));
 }

package/dist/styles/AGENTS.md

@@ -1,183 +1,354 @@
-# Glass 토큰/유틸 역할 정리 (modal 사용 기준 + globals.css 기반)
+# Glass Token 기본 컴포넌트 가이드
 
-이 문서는 **모달에서 실제 사용한 조합**과 `packages/core/src/styles/globals.css`의 정의를 확인한 뒤, glass 관련 토큰/유틸리티의 역할과 사용 기준을 정리한 것입니다.
+이 디렉터리의 `globals.css`는 패키지 소비 프로젝트에서도 적용되는 glass UI
+토큰의 원본입니다. 컴포넌트 className을 작성할 때는 여기 정의된 glass token
+family를 조합하고, 소비 프로젝트에서 임의 glass 스타일을 새로 만들지
+않습니다.
 
-## 1) 모달 사용 기준 (참조: `/apps/web/src/app/[locale]/modal/_components/modal.tsx`)
-- **오버레이**: `glass` (배경을 얇게 덮고 유리감만 부여)
-- **모달 패널**: `glass-tinted glass-backdrop border-glass-strong`
-- **모달 내부 컨테이너**: `border-glass-strong` + `bg-white/60`(다크는 `dark:bg-slate-900/80`) + `backdrop-blur` 계열
-- **입력/버튼**: `glass border-glass-strong` + hover 시 `hover:bg-glass-tinted`
+## 목표
 
-## 2) globals.css 정의 기반 역할 요약
+- 기본 컴포넌트가 light/dark 모드에서 같은 역할과 밀도를 갖게 만든다.
+- 큰 화면 영역이 과하게 하얗게 뜨지 않도록 넓은 표면에는 낮은 surface를 쓴다.
+- `rgba`, 임의 `backdrop-blur`, 임의 shadow, arbitrary `[box-shadow]` 대신
+  glass token class를 조합한다.
 
-### 2.1 토큰(커스텀 프로퍼티)
-`--glass*` 계열은 라이트/다크 각각 별도 값이 있으며, 공통적으로 다음 역할을 가집니다.
-- `--glass`: 유리 레이어 기본 색 (투명도 포함)
-- `--glass-tinted`: 유리의 색 농도 강화 버전
-- `--glass-glow`: 유리의 발광 느낌을 위한 색
-- `--glass-surface`: 실제 표면 색(배경 그라데이션 밑바탕)
-- `--glass-surface-tinted`: 표면 색의 틴트 버전
-- `--glass-border`: 유리 테두리 강도
-- `--glass-border-subtle`: 유리 테두리 약한 버전
-- `--glass-shine`: 유리 하이라이트
-- `--glass-shine-subtle`: 유리 하이라이트 약한 버전
-- `--glass-shadow-color`: 유리 그림자 컬러
-- `--glass-shadow-ambient`: 유리 앰비언트 그림자
-- `--glass-blur`: 백드롭 블러 강도 (기본 8px)
+## Glass Token Family
 
-### 2.2 유틸리티(클래스)
-globals.css 내 `@utility` 정의 기준
+실제 glass token class는 아래 family로만 작성한다.
 
-#### `glass`
-- **역할**: 기본 유리 표면. 그라데이션 + 그림자 + 내부 하이라이트 포함.
-- **대상**: 카드, 패널, 버튼, 인풋 등 “표면” 요소.
+```text
+glass [glass-surface-*] [glass-texture*] [glass-border*] [glass-backdrop-*] [glass-shadow-*]
+```
 
-#### `glass-tinted`
-- **역할**: `glass`와 동일 효과 + 틴트된 표면(`--glass-surface-tinted`).
-- **대상**: 모달 패널, 강조 카드.
+- `glass`: 기본 유리 표면을 만든다.
+- `glass-surface-*`: 표면의 밝기와 투명도를 고른다. `subtle`, `medium`,
+  `strong`, `selected`, `disabled`가 있다.
+- `glass-texture*`: 빛 하이라이트만 얹는다. 표면, 경계, blur를 만들지 않는다.
+- `glass-border*`: 경계, 상단 하이라이트, 안쪽 윤곽선을 만든다. 기본값,
+  `faint`, `subtle`, `medium`, `strong`이 있다.
+- `glass-backdrop-*`: 뒤 배경 blur/saturate 단계만 정한다. `sm`, `md`, `lg`가
+  있다.
+- `glass-shadow-*`: elevation만 정한다. `sm`, `md`, `lg`가 있다.
 
-#### `glass-glow`
-- **역할**: `glass`와 동일 효과 + 발광 표면(`--glass-surface-glow`).
-- **대상**: 강조 배지, 강조 카드.
+`hover:`, `focus-visible:`, `disabled:`, `rounded-*`, `p-*`, `h-*`, `w-*`,
+`text-*`, `flex`, `grid`는 glass token이 아니라 Tailwind 보조 유틸리티다.
+토큰 조합을 정한 뒤 필요한 상태, 크기, 레이아웃 유틸리티를 붙인다.
 
-#### `glass-backdrop`
-- **역할**: 배경 블러 + 채도 증가.
-- **대상**: 모달 패널, 오버레이 같이 **뒤 배경이 비쳐야 하는 영역**.
+`bg-glass-surface-interactive`, `bg-glass-surface-selected`는 `@theme`에 노출된
+color utility다. hover/focus/selected 배경을 맞출 때 쓰지만,
+`glass-surface-*` utility family와 같은 것으로 설명하지 않는다.
 
-#### `glass-overlay`
-- **역할**: 기존 `bg-*` 색상을 유지한 채 유리 질감만 얹는다.
-- **대상**: 색상 버튼/배지/태그 같이 `bg-*`가 있는 요소.
+## Surface 선택 기준
 
-#### `border-glass-soft`
-- **역할**: 은은한 유리 테두리 + 내부 얕은 하이라이트.
-- **대상**: 보조 카드, 내부 블록.
+- 넓은 section, form panel, summary panel:
+  `glass glass-border glass-backdrop-md glass-shadow-md`
+- 반복 카드, 리스트 row, 낮은 우선순위 block:
+  `glass glass-surface-subtle glass-border-subtle glass-backdrop-sm glass-shadow-sm`
+- 버튼 묶음, toolbar, segmented control:
+  `glass glass-surface-medium glass-border-medium glass-backdrop-md glass-shadow-md`
+- 선택된 tab, segmented item, selected pill:
+  `glass glass-surface-selected glass-texture-subtle glass-border-subtle glass-shadow-sm`
+- 비활성 입력 또는 잠긴 값:
+  `glass glass-surface-disabled glass-border-subtle glass-backdrop-sm glass-shadow-sm`
 
-#### `border-glass-strong`
-- **역할**: 더 선명한 유리 테두리 + 내부 하이라이트.
-- **대상**: 모달 패널, 버튼, 입력처럼 **경계가 분명해야 하는 요소**.
+`glass-surface-medium`은 작은 control group에는 맞지만, page shell이나 넓은
+카드에 반복하면 light mode에서 허옇게 뜬다. 넓은 면적은 기본 `glass` 또는
+`glass-surface-subtle`부터 시작한다.
 
-## 3) 사용 규칙 (짧은 체크리스트)
-- 유리 표면에는 `border-glass-*`를 **필요할 때만** 붙여 경계를 잡는다.
-- 블러가 필요한 곳에만 `glass-backdrop`을 붙인다.
-- 강조 패널에는 `glass-tinted`, 일반 카드에는 `glass`가 기본.
-- 다크 모드에서는 텍스트/placeholder 대비를 추가로 보정한다 (`dark:*`).
-- **색상 버튼/배지**는 `bg-*` + `glass-overlay` 조합을 기본으로 사용한다.
+## 기본 className 조합
 
-## 4) 적용 예시 (모달/입력/버튼)
+### Panel
 
-### 4.1 모달 오버레이
 ```tsx
-<div className="glass fixed inset-0" />
+<section className='glass glass-border glass-backdrop-md glass-shadow-md rounded-xl p-4 sm:p-5'>...</section>
 ```
-- **의도**: 배경을 얇게 덮고 유리감만 부여.
 
-### 4.2 모달 패널
+폼 영역, 검색 영역, 요약 영역의 기본 표면이다. 페이지 안에서 큰 면적을
+차지하면 `glass-surface-medium`을 추가하지 않는다.
+
+### Subtle Card
+
 ```tsx
-<Dialog.Panel className="glass-tinted glass-backdrop border-glass-strong rounded-2xl border p-8 shadow-2xl">
+<article className='glass glass-surface-subtle glass-border-subtle glass-backdrop-sm glass-shadow-sm rounded-xl p-4'>
   ...
-</Dialog.Panel>
+</article>
 ```
-- **의도**: 패널 자체는 틴트 유리 + 배경 블러 + 강한 경계.
 
-### 4.3 모달 내부 컨테이너(본문 영역)
+반복 카드, 보조 정보, 리스트 row, skeleton의 기본 표면이다. 같은 화면에 여러
+개 반복될 때는 이 조합을 우선한다.
+
+### List Row
+
 ```tsx
-<div className="rounded-2xl border border-white/40 bg-white/60 p-6 backdrop-blur-xl dark:border-slate-700/70 dark:bg-slate-900/80">
-  ...
+<div className='glass glass-surface-subtle glass-border-subtle glass-backdrop-sm glass-shadow-sm flex items-center justify-between gap-3 rounded-lg p-3'>
+  <span className='text-sm font-medium'>Item</span>
+  <span className='text-muted-foreground text-xs'>Meta</span>
 </div>
 ```
-- **의도**: 내부 콘텐츠는 더 밝게, 다크 모드 대비 보정.
 
-### 4.4 입력 필드
+리스트 안의 개별 행은 card보다 낮은 radius와 padding을 쓴다. 선택 여부는
+row 전체 색을 과하게 올리기보다 badge나 selected surface를 보조로 쓴다.
+
+### Button
+
 ```tsx
-<input
-  className="glass border-glass-strong rounded-lg border px-3 py-2 text-sm shadow-sm
-             focus-visible:ring-2 focus-visible:ring-slate-900/20
-             dark:placeholder:text-slate-400 dark:focus-visible:ring-white/20"
-/>
+<button className='glass glass-surface-medium glass-border-medium glass-backdrop-md glass-shadow-md text-foreground hover:bg-glass-surface-interactive focus-visible:ring-ring/50 inline-flex h-10 items-center justify-center rounded-lg px-4 text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:outline-none'>
+  Button
+</button>
 ```
-- **의도**: 유리 표면 + 강한 경계 + 포커스 링 보정.
 
-### 4.5 버튼
+일반 버튼은 control surface라서 `surface-medium`을 쓸 수 있다. 같은 화면에서
+버튼이 많이 반복되면 `surface-subtle`로 낮춘다.
+
+### Primary Button
+
 ```tsx
-<button className="glass border-glass-strong hover:bg-glass-tinted rounded-lg px-5 py-2 text-sm">
-  ...
+<button className='glass-texture-subtle glass-border-strong bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring/50 inline-flex h-10 items-center justify-center rounded-lg border px-4 text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:outline-none'>
+  Save
 </button>
 ```
-- **의도**: 기본은 glass, hover에서 tinted로 강조.
 
-### 4.6 색상 버튼 (glass-overlay)
+primary는 `bg-primary`가 표면 역할을 한다. `glass-surface-*`를 추가하지 않고
+texture와 strong border만 얹는다.
+
+### Destructive Button
+
 ```tsx
-<button className="glass-overlay bg-emerald-400 text-slate-900 rounded-lg px-5 py-2 text-sm">
-  ...
+<button className='glass glass-texture glass-border-medium glass-backdrop-sm glass-shadow-sm bg-destructive/20 text-destructive hover:bg-destructive/30 focus-visible:ring-destructive/40 inline-flex h-10 items-center justify-center rounded-lg px-4 text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:outline-none'>
+  Delete
+</button>
+```
+
+삭제, 취소, 위험 동작은 의미 색상 배경과 텍스트를 유지한다. glass는 질감,
+경계, elevation만 보강한다.
+
+### Disabled Button
+
+```tsx
+<button
+  disabled
+  className='glass glass-surface-subtle glass-border-subtle glass-backdrop-sm glass-shadow-sm text-muted-foreground inline-flex h-10 items-center justify-center rounded-lg px-4 text-sm font-semibold opacity-60 disabled:cursor-not-allowed'>
+  Disabled
 </button>
 ```
-- **의도**: `bg-*`를 유지하면서 glass 질감만 얹는다.
 
-### 4.7 탭 선택 상태 (glass-overlay)
+disabled 상태는 hover/focus 효과를 늘리지 않는다. 잠긴 값이나 비활성 입력은
+`surface-disabled`를 쓴다.
+
+### Icon Button
+
+```tsx
+<button
+  type='button'
+  aria-label='Edit'
+  className='glass glass-surface-subtle glass-border-subtle glass-backdrop-sm glass-shadow-sm text-foreground hover:bg-glass-surface-interactive focus-visible:ring-ring/50 inline-flex size-10 items-center justify-center rounded-lg transition-colors focus-visible:ring-2 focus-visible:outline-none'>
+  <Icon className='size-5' aria-hidden='true' />
+</button>
+```
+
+아이콘 버튼은 `aria-label`을 필수로 둔다. size는 `size-10`을 기본으로 해서
+일반 `h-10` 버튼과 높이를 맞춘다.
+
+### Segmented Control
+
 ```tsx
-<div className="flex gap-2">
-  <button className="glass border-glass-strong text-foreground rounded-full px-4 py-2 text-sm">
-    콘텐츠 작성
+<div
+  role='tablist'
+  aria-label='Density'
+  className='glass glass-surface-medium glass-border-medium glass-backdrop-md glass-shadow-md inline-flex rounded-lg p-1'>
+  <button
+    type='button'
+    role='tab'
+    aria-selected='true'
+    className='glass glass-surface-selected glass-texture-subtle glass-border-subtle glass-shadow-sm text-foreground rounded-md px-3 py-1.5 text-sm font-semibold'>
+    Compact
   </button>
-  <button className="glass-overlay bg-slate-900 text-white rounded-full px-4 py-2 text-sm shadow-md">
-    렌더링 미리보기 (선택됨)
+  <button
+    type='button'
+    role='tab'
+    aria-selected='false'
+    className='text-muted-foreground hover:bg-glass-surface-interactive focus-visible:ring-ring/50 rounded-md px-3 py-1.5 text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:outline-none'>
+    Comfort
   </button>
 </div>
 ```
-- **의도**: 탭 선택 상태에서 `bg-*`를 유지한 채 glass 질감을 추가한다.
 
-### 4.8 기본 Solid 버튼 (non-glass)
+group 표면은 `surface-medium`, 활성 항목은 `surface-selected`로 분리한다.
+비활성 항목에는 glass를 중복 적용하지 않는다.
+
+### Input
+
 ```tsx
-<button className="bg-primary hover:bg-primary text-primary-foreground rounded-lg px-5 py-2 text-sm font-semibold shadow-lg transition">
-  ...
-</button>
+<input
+  className='glass glass-surface-subtle glass-border-subtle glass-backdrop-sm glass-shadow-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:bg-glass-surface-selected focus-visible:ring-ring/50 h-10 w-full rounded-lg px-3 text-sm transition-colors outline-none focus-visible:ring-2'
+  placeholder='Search'
+/>
 ```
-- **의도**: 가장 기본적인 CTA 버튼. glass가 필요 없을 때 사용.
 
-### 4.9 알림/에러 메시지 (glass + 컬러 배경)
+기본 입력은 `surface-subtle`로 낮춘다. 버튼과 나란히 놓이는 검색/필터 입력은
+`h-10`, 테이블이나 인라인 편집 입력은 `h-9`를 쓴다.
+
+### Search Input
+
 ```tsx
-<div className="glass border-glass-strong rounded-2xl border border-rose-200/80 bg-rose-50/70 px-4 py-3 text-sm text-rose-600 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-200">
-  ...
+<div className='glass glass-surface-subtle glass-border-subtle glass-backdrop-sm glass-shadow-sm focus-within:bg-glass-surface-selected focus-within:ring-ring/50 flex h-10 w-full items-center gap-2 rounded-lg px-3 transition-colors focus-within:ring-2'>
+  <Icon className='text-muted-foreground size-4 shrink-0' aria-hidden='true' />
+  <input className='placeholder:text-muted-foreground/70 min-w-0 flex-1 bg-transparent text-sm outline-none' />
 </div>
 ```
-- **의도**: 유리 표면 위에 컬러 배경을 얹어 메시지 톤을 유지한다.
 
-## 5) 적용 순서 가이드
-1. **표면 선택**: `glass` 또는 `glass-tinted`
-2. **경계 부여**: `border-glass-strong` 또는 `border-glass-soft`
-3. **배경 블러 필요 여부**: 필요하면 `glass-backdrop`
-4. **다크 보정**: `dark:*`로 텍스트/placeholder 대비 조정
+아이콘이 들어간 검색 입력은 wrapper가 glass 표면을 담당하고, 내부 input은
+`bg-transparent`로 둔다.
 
-## 6) 추가 예시 (카드/리스트/배지)
+### Error Input
 
-### 6.1 기본 카드
 ```tsx
-<div className="glass border-glass-soft rounded-2xl p-6 shadow-md">
-  ...
+<input
+  aria-invalid='true'
+  aria-describedby='field-error'
+  className='glass glass-backdrop-md glass-shadow-md border-destructive text-foreground focus-visible:ring-destructive/30 h-10 w-full rounded-lg border px-3 text-sm outline-none focus-visible:ring-2'
+/>
+```
+
+오류 입력은 glass border 단계보다 `border-destructive`와 오류 focus ring을
+우선한다. 오류 메시지는 `aria-describedby`로 연결한다.
+
+### Disabled Input
+
+```tsx
+<input
+  disabled
+  readOnly
+  className='glass glass-surface-disabled glass-border-subtle glass-backdrop-sm glass-shadow-sm text-foreground/45 placeholder:text-foreground/35 dark:text-foreground/40 dark:placeholder:text-foreground/30 h-10 w-full cursor-not-allowed rounded-lg px-3 text-sm font-medium disabled:opacity-100'
+/>
+```
+
+비활성 입력은 opacity만 낮추지 말고 `surface-disabled`를 쓴다. 값이 잠긴
+상태라면 `readOnly` 여부도 함께 명확히 한다.
+
+### Textarea
+
+```tsx
+<textarea className='glass glass-surface-subtle glass-border-subtle glass-backdrop-sm glass-shadow-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:bg-glass-surface-selected focus-visible:ring-ring/50 min-h-28 w-full resize-y rounded-lg px-3 py-2.5 text-sm transition-colors outline-none focus-visible:ring-2' />
+```
+
+textarea도 input과 같은 표면 규칙을 따른다. placeholder만 label처럼 쓰지
+않고, 실제 label 또는 `aria-label`을 제공한다.
+
+### Checkbox Row
+
+```tsx
+<label className='glass glass-surface-subtle glass-border-subtle glass-backdrop-sm glass-shadow-sm flex items-center gap-3 rounded-lg p-3 text-sm'>
+  <input type='checkbox' className='text-primary size-4 rounded' />
+  <span>
+    <span className='block font-medium'>Compressed mode</span>
+    <span className='text-muted-foreground block text-xs'>Use in dense panels.</span>
+  </span>
+</label>
+```
+
+checkbox 자체는 표준 form control을 유지하고, 설명이 필요한 선택지만 row에
+glass 표면을 준다.
+
+### Status Message
+
+```tsx
+<div
+  role='status'
+  className='glass glass-surface-medium glass-border-medium glass-backdrop-md glass-shadow-md rounded-lg p-4 text-sm'>
+  <p className='font-semibold'>Saved</p>
+  <p className='text-muted-foreground mt-1'>Changes were applied.</p>
 </div>
 ```
-- **의도**: 보조 영역에 은은한 유리감.
 
-### 6.2 강조 카드 (CTA)
+일반 상태 메시지는 텍스트 의미를 우선한다. 성공, 안내, 저장 완료처럼 짧게
+노출되는 상태에 쓴다.
+
+### Error Message
+
 ```tsx
-<div className="glass-tinted border-glass-strong rounded-2xl p-6 shadow-xl">
-  ...
+<div
+  role='alert'
+  className='glass-texture border-destructive/50 bg-destructive/10 text-destructive rounded-lg border p-4 text-sm'>
+  <p className='font-semibold'>Error</p>
+  <p className='mt-1'>Required token is missing.</p>
 </div>
 ```
-- **의도**: 시선이 가야 하는 블록에 강한 대비.
 
-### 6.3 리스트 아이템
+오류 표면은 의미 색상 배경과 경계를 우선한다. `glass-surface-medium`으로
+오류를 덮지 않는다.
+
+### Badge
+
 ```tsx
-<li className="glass border-glass-strong rounded-lg p-3 shadow">
-  ...
-</li>
+<span className='glass glass-texture-subtle glass-border-subtle glass-backdrop-sm bg-muted/45 text-muted-foreground inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold'>
+  Draft
+</span>
 ```
-- **의도**: 반복 항목에 동일한 유리 표면 제공.
 
-### 6.4 배지/태그
 ```tsx
-<span className="glass border-glass-strong rounded-full px-3 py-1 text-xs font-semibold">
-  NEW
+<span className='glass glass-texture glass-border-subtle glass-backdrop-sm inline-flex items-center rounded-full border bg-emerald-500/20 px-3 py-1 text-xs font-semibold text-emerald-950 dark:text-emerald-50'>
+  Active
 </span>
 ```
-- **의도**: 작은 요소에도 유리감 유지.
+
+neutral badge는 muted 배경을 쓰고, semantic badge는 의미 색상과 light/dark
+텍스트 대비를 함께 지정한다.
+
+### Skeleton
+
+```tsx
+<div className='glass glass-surface-subtle glass-border-subtle glass-backdrop-sm glass-shadow-sm w-full space-y-3 rounded-xl p-4 motion-safe:animate-pulse motion-reduce:animate-none'>
+  <div className='bg-muted/70 h-3 w-3/5 rounded-full' />
+  <div className='bg-muted/50 h-3 rounded-full' />
+  <div className='bg-muted/40 h-3 w-4/5 rounded-full' />
+</div>
+```
+
+skeleton은 낮은 표면과 muted block만 쓴다. motion은 `motion-reduce` 대응을
+항상 같이 둔다.
+
+### Empty State
+
+```tsx
+<div className='glass glass-border glass-backdrop-md glass-shadow-sm text-muted-foreground flex min-h-32 flex-col items-center justify-center rounded-xl p-4 text-center'>
+  <p className='text-foreground text-sm font-semibold'>No results</p>
+  <p className='mt-1 text-xs'>Adjust your filters.</p>
+</div>
+```
+
+empty state는 정보 밀도가 낮으므로 기본 `glass`와 낮은 shadow를 쓴다. 가능한
+다음 행동을 짧은 문장으로 알려준다.
+
+## 작성 규칙
+
+- 먼저 요소 역할에 맞는 glass token 조합을 고른다.
+- 넓은 표면에는 `surface-medium`을 기본값으로 넣지 않는다.
+- `glass-texture*`만으로 표면을 만들었다고 가정하지 않는다.
+- semantic 상태는 `bg-primary`, `bg-destructive`, `bg-emerald-*`,
+  `bg-amber-*`, `bg-sky-*`, `bg-rose-*` 같은 의미 색상을 유지한다.
+- 모든 nested child를 glass card로 만들지 않는다. 역할이 없는 중첩은 spacing,
+  divider, typography로 해결한다.
+
+## 금지 패턴
+
+- `bg-background/45`, `ring-border/15`, 임의 `shadow-sm`, 임의
+  `backdrop-blur-*`, arbitrary `[box-shadow]`, inline `rgba()`로 glass를 새로
+  만들지 않는다.
+- 기본 className 조합에서 `glass-surface-strong`, `glass-border-strong`,
+  `glass-backdrop-lg`, `glass-shadow-lg`를 일반 카드나 패널에 쓰지 않는다.
+- 동일 화면에서 버튼, 입력, badge의 radius와 높이를 제각각 만들지 않는다.
+- placeholder만 label처럼 쓰지 않는다.
+
+## Accessibility
+
+- interactive element는 `focus-visible:ring-2 focus-visible:outline-none`와
+  적절한 `focus-visible:ring-*`를 유지한다.
+- icon-only button은 `aria-label`을 제공하고, 장식 icon에는 `aria-hidden`을
+  둔다.
+- input/textarea는 label, `aria-label`, `aria-describedby`, error message를
+  상황에 맞게 연결한다.
+- 비활성 상태는 `disabled:cursor-not-allowed`, `disabled:opacity-*`,
+  `surface-disabled` 중 역할에 맞는 조합을 쓴다.
+- reduced transparency, high contrast, forced colors fallback은
+  `globals.css`가 담당한다. 컴포넌트에서 custom media query로 우회하지 않는다.