gyeol 0.1.4 → 0.1.5

package/README.md

@@ -18,8 +18,8 @@ npm install gyeol
 
 ```html
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;500;700;800&family=IBM+Plex+Sans+KR:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gyeol@0.1.3/gyeol.css">
-<!-- 또는 unpkg: <link rel="stylesheet" href="https://unpkg.com/gyeol@0.1.3/gyeol.css"> -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gyeol@0.1.4/gyeol.css">
+<!-- 또는 unpkg: <link rel="stylesheet" href="https://unpkg.com/gyeol@0.1.4/gyeol.css"> -->
 
 <html data-palette="meok" data-theme="dark">
 <body class="gy">
@@ -34,8 +34,8 @@ CDN은 jsDelivr와 unpkg 중 하나를 쓰면 돼요. 버전을 빼고 `gyeol/gy
 
 | CDN | 주소 |
 | --- | --- |
-| jsDelivr | `https://cdn.jsdelivr.net/npm/gyeol@0.1.3/gyeol.css` |
-| unpkg | `https://unpkg.com/gyeol@0.1.3/gyeol.css` |
+| jsDelivr | `https://cdn.jsdelivr.net/npm/gyeol@0.1.4/gyeol.css` |
+| unpkg | `https://unpkg.com/gyeol@0.1.4/gyeol.css` |
 
 번들러(Vite, Next.js 등)를 쓰면 CSS를 이렇게 불러와요.
 

package/gyeol.css

@@ -1,151 +1,151 @@
-/*!
- * 결 gyeol — layered-paper design system
- * 사용법: <html data-palette="meok" data-theme="dark">
- *   data-palette: meok | jjok | cheongja | songhwa | yeonji | jaju |
- *                 chija | hwangto | oksaek | haneul | odi           (기본 meok)
- *   data-theme:   dark | light | system                              (기본 dark)
- * 화면 일부만 다른 팔레트·테마로: <section data-palette="yeonji" data-theme="light"> (0.1.2+)
- * 모든 컴포넌트 클래스는 gy- 접두사를 써서 다른 CSS와 충돌하지 않아요.
- * 글꼴: https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;500;700;800&family=IBM+Plex+Sans+KR:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap
- */
-
-/* ---------- tokens ---------- */
-:root{
-  --h:255; --c:.012; --ah:265; --ac:.14;   /* 기본 팔레트: 먹 + 쪽빛 강조 */
-  --f-display: "Hahmlet", "Nanum Myeongjo", "Apple SD Gothic Neo", serif;
-  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
-  --f-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;
-
-  --pun-1:4px; --pun-2:8px; --pun-3:12px; --pun-4:16px; --pun-6:24px; --pun-8:32px; --pun-12:48px; --pun-16:64px;
-  --r-1:6px; --r-2:12px; --r-3:20px; --r-4:28px; --r-pill:999px;
-  --ease-bleed: cubic-bezier(.2,.7,.2,1);
-  --t-1:120ms; --t-2:220ms; --t-3:420ms;
-
-}
-/* 색 토큰: 루트와, 팔레트·테마를 따로 지정한 모든 요소에서 다시 계산돼요 */
-:root, [data-palette], [data-theme]{
-  --bg:      oklch(96.5% calc(var(--c)*.12) var(--h));
-  --bg-2:    oklch(92.5% calc(var(--c)*.22) var(--h));
-  --ink:     oklch(23% calc(var(--c)*.35) var(--h));
-  --ink-2:   oklch(43% calc(var(--c)*.25) var(--h));
-  --ink-3:   oklch(50% calc(var(--c)*.18) var(--h));
-  --line:    oklch(84% calc(var(--c)*.22) var(--h));
-  --paper:   oklch(99.2% calc(var(--c)*.05) var(--h));
-  --accent:  oklch(49% var(--ac) var(--ah));
-  --accent-soft: oklch(90% calc(var(--ac)*.45) var(--ah));
-  --on-accent: oklch(99% 0 0);
-  --stain:   oklch(80% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
-  --ok: oklch(50% .13 150); --warn: oklch(54% .13 65); --err: oklch(52% .19 25);
-  --shadow: 0 1px 0 oklch(100% 0 0 / .7) inset, 0 18px 40px -22px oklch(25% .06 var(--h) / .35), 0 2px 6px -2px oklch(25% .04 var(--h) / .12);
-  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 0'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 -.42'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
-  --grain-o: .4;
-
-  color-scheme: light;
-}
-@media (prefers-color-scheme: dark){ :root[data-theme="system"], :root[data-theme="system"] [data-palette]:not([data-theme]):not([data-theme="light"] *){
-  --bg: oklch(17% calc(var(--c)*.22) var(--h)); --bg-2: oklch(21% calc(var(--c)*.3) var(--h));
-  --ink: oklch(95% calc(var(--c)*.08) var(--h)); --ink-2: oklch(79% calc(var(--c)*.15) var(--h)); --ink-3: oklch(70% calc(var(--c)*.15) var(--h));
-  --line: oklch(33% calc(var(--c)*.25) var(--h)); --paper: oklch(29% calc(var(--c)*.25) var(--h));
-  --accent: oklch(76% var(--ac) var(--ah)); --accent-soft: oklch(33% calc(var(--ac)*.55) var(--ah)); --on-accent: oklch(18% .03 var(--ah));
-  --stain: oklch(48% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
-  --ok: oklch(74% .14 150); --warn: oklch(80% .13 75); --err: oklch(72% .16 25);
-  --shadow: 0 1px 0 oklch(100% 0 0 / .07) inset, 0 20px 44px -20px oklch(5% .02 var(--h) / .7), 0 2px 6px -2px oklch(5% 0 0 / .4);
-  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 -.4'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
-  --grain-o: .35; color-scheme: dark;
-}}
-:root:not([data-theme="light"]):not([data-theme="system"]), [data-theme="dark"],
-:root:not([data-theme="light"]):not([data-theme="system"]) [data-palette]:not([data-theme]):not([data-theme="light"] *){
-  --bg: oklch(17% calc(var(--c)*.22) var(--h)); --bg-2: oklch(21% calc(var(--c)*.3) var(--h));
-  --ink: oklch(95% calc(var(--c)*.08) var(--h)); --ink-2: oklch(79% calc(var(--c)*.15) var(--h)); --ink-3: oklch(70% calc(var(--c)*.15) var(--h));
-  --line: oklch(33% calc(var(--c)*.25) var(--h)); --paper: oklch(29% calc(var(--c)*.25) var(--h));
-  --accent: oklch(76% var(--ac) var(--ah)); --accent-soft: oklch(33% calc(var(--ac)*.55) var(--ah)); --on-accent: oklch(18% .03 var(--ah));
-  --stain: oklch(48% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
-  --ok: oklch(74% .14 150); --warn: oklch(80% .13 75); --err: oklch(72% .16 25);
-  --shadow: 0 1px 0 oklch(100% 0 0 / .07) inset, 0 20px 44px -20px oklch(5% .02 var(--h) / .7), 0 2px 6px -2px oklch(5% 0 0 / .4);
-  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 -.4'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
-  --grain-o: .35; color-scheme: dark;
-}
-[data-palette="meok"]    {--h:255;--c:.012;--ah:265;--ac:.14}
-[data-palette="jjok"]    {--h:265;--c:.14; --ah:265;--ac:.14}
-[data-palette="cheongja"]{--h:178;--c:.075;--ah:178;--ac:.075}
-[data-palette="songhwa"] {--h:98; --c:.12; --ah:98; --ac:.12}
-[data-palette="yeonji"]  {--h:16; --c:.16; --ah:16; --ac:.16}
-[data-palette="jaju"]    {--h:330;--c:.13; --ah:330;--ac:.13}
-[data-palette="chija"]    {--h:70;--c:0.14;--ah:70;--ac:0.14}
-[data-palette="hwangto"]  {--h:48;--c:.065;--ah:48;--ac:.065}
-[data-palette="oksaek"]   {--h:195;--c:0.08;--ah:195;--ac:0.08}
-[data-palette="haneul"]   {--h:235;--c:0.11;--ah:235;--ac:0.11}
-[data-palette="odi"]      {--h:300;--c:0.12;--ah:300;--ac:0.12}
-/* 화면 일부에 팔레트·테마를 따로 지정하면 글자색도 그 범위의 먹색을 따라가요 */
-:where([data-palette], [data-theme]):not(:root){color:var(--ink)}
-
-/* ---------- base (opt-in: add class="gy" to <body>) ---------- */
-.gy{margin:0;color:var(--ink);background:var(--bg);font:400 16px/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
-.gy :focus-visible{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 7px color-mix(in oklch, var(--accent) 22%, transparent)}
-
-/* ---------- material: 겹 ---------- */
-.gy-gyeop{position:relative;isolation:isolate;background:color-mix(in oklch, var(--paper) var(--thick,74%), transparent);-webkit-backdrop-filter:blur(var(--blur,14px)) saturate(1.2);backdrop-filter:blur(var(--blur,14px)) saturate(1.2);border:1px solid color-mix(in oklch, var(--paper) 50%, var(--line));border-radius:var(--r-3);box-shadow:var(--shadow)}
-.gy-gyeop::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grain);opacity:var(--grain-o);pointer-events:none;z-index:-1}
-.gy-hol{--thick:46%;--blur:6px}
-.gy-du {--thick:72%;--blur:14px}
-.gy-se {--thick:90%;--blur:24px}
-
-/* ---------- button ---------- */
-.gy-btn{--bg-b:var(--accent);--fg-b:var(--on-accent);appearance:none;border:0;cursor:pointer;font:600 15px/1 var(--f-body);color:var(--fg-b);background:var(--bg-b);padding:13px 20px;border-radius:var(--r-2);display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:transform var(--t-1) var(--ease-bleed), box-shadow var(--t-3) var(--ease-bleed)}
-.gy-btn:hover{box-shadow:0 0 0 1px var(--bg-b), 0 6px 22px -4px color-mix(in oklch, var(--bg-b) 60%, transparent)}
-.gy-btn:active{transform:translateY(1px) scale(.985)}
-.gy-btn--ink{--bg-b:var(--ink);--fg-b:var(--bg)}
-.gy-btn--paper{--fg-b:var(--ink);background:color-mix(in oklch, var(--paper) 74%, transparent);border:1px solid var(--line);backdrop-filter:blur(12px)}
-.gy-btn--paper:hover{box-shadow:0 6px 22px -8px color-mix(in oklch, var(--ink) 40%, transparent)}
-.gy-btn--ghost{--fg-b:var(--accent);background:transparent}
-.gy-btn--ghost:hover{background:color-mix(in oklch, var(--accent) 10%, transparent);box-shadow:none}
-.gy-btn--danger{--bg-b:var(--err);--fg-b:oklch(99% 0 0)}
-.gy-btn--sm{padding:9px 14px;font-size:14px;border-radius:10px}
-.gy-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
-
-/* ---------- switch: <button class="gy-switch" role="switch" aria-checked="true"> ---------- */
-.gy-switch{appearance:none;border:0;cursor:pointer;width:50px;height:30px;border-radius:var(--r-pill);background:var(--line);position:relative;transition:background var(--t-2) var(--ease-bleed);flex:none}
-.gy-switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--paper);box-shadow:0 2px 6px oklch(0% 0 0 / .25);transition:transform var(--t-2) var(--ease-bleed)}
-.gy-switch[aria-checked="true"]{background:var(--accent)}
-.gy-switch[aria-checked="true"]::after{transform:translateX(20px);background:oklch(99% 0 0)}
-
-/* ---------- segmented: buttons with aria-pressed ---------- */
-.gy-seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:color-mix(in oklch, var(--ink) 7%, transparent);gap:2px}
-.gy-seg button{appearance:none;border:0;background:transparent;color:var(--ink-2);font:500 14px/1 var(--f-body);padding:8px 14px;border-radius:var(--r-pill);cursor:pointer}
-.gy-seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px oklch(0% 0 0 / .14)}
-
-/* ---------- chip ---------- */
-.gy-chip{appearance:none;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-2);font:500 14px/1 var(--f-body);padding:8px 13px;border-radius:var(--r-pill)}
-.gy-chip[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent;color:var(--ink)}
-
-/* ---------- field ---------- */
-.gy-field{display:flex;flex-direction:column;gap:6px}
-.gy-field label{font-size:13px;font-weight:500;color:var(--ink-2)}
-.gy-field input,.gy-field textarea,.gy-field select{font:400 15px var(--f-body);color:var(--ink);background:color-mix(in oklch, var(--paper) 80%, transparent);border:1px solid var(--line);border-radius:var(--r-2);padding:11px 13px;transition:border-color var(--t-2), box-shadow var(--t-3) var(--ease-bleed)}
-.gy-field :is(input,textarea,select):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in oklch, var(--accent) 18%, transparent), 0 0 18px 2px color-mix(in oklch, var(--accent) 22%, transparent)}
-.gy-field small{font-size:13px;color:var(--ink-3)}
-.gy-field--error :is(input,textarea,select){border-color:var(--err)}
-.gy-field--error small{color:var(--err)}
-
-/* ---------- checkbox: <label class="gy-check"><input type="checkbox"> 텍스트</label> ---------- */
-.gy-check{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer}
-.gy-check input{appearance:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--ink-3);display:grid;place-items:center;margin:0;cursor:pointer}
-.gy-check input:checked{background:var(--accent);border-color:var(--accent)}
-.gy-check input:checked::after{content:"";width:9px;height:5px;border:2px solid var(--on-accent);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
-
-/* ---------- badge ---------- */
-.gy-badge{font:600 12px/1 var(--f-body);padding:7px 11px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px;color:var(--accent);background:color-mix(in oklch, var(--accent) 13%, transparent)}
-.gy-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
-.gy-badge--ok{color:var(--ok);background:color-mix(in oklch, var(--ok) 14%, transparent)}
-.gy-badge--warn{color:var(--warn);background:color-mix(in oklch, var(--warn) 16%, transparent)}
-.gy-badge--err{color:var(--err);background:color-mix(in oklch, var(--err) 14%, transparent)}
-
-/* ---------- progress: <div class="gy-progress" style="--p:60%"><i></i></div> ---------- */
-.gy-progress{height:8px;border-radius:var(--r-pill);background:color-mix(in oklch, var(--ink) 9%, transparent);overflow:hidden}
-.gy-progress > i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg, color-mix(in oklch, var(--accent) 50%, transparent), var(--accent))}
-
-/* ---------- toast / tooltip ---------- */
-.gy-toast{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:14.5px}
-.gy-tooltip{font-size:13px;padding:7px 11px;border-radius:10px;background:var(--ink);color:var(--bg)}
-
-@media (prefers-reduced-motion: reduce){.gy *,.gy *::before,.gy *::after{transition:none!important;animation:none!important}}
+/*!
+ * 결 gyeol — layered-paper design system
+ * 사용법: <html data-palette="meok" data-theme="dark">
+ *   data-palette: meok | jjok | cheongja | songhwa | yeonji | jaju |
+ *                 chija | hwangto | oksaek | haneul | odi           (기본 meok)
+ *   data-theme:   dark | light | system                              (기본 dark)
+ * 화면 일부만 다른 팔레트·테마로: <section data-palette="yeonji" data-theme="light"> (0.1.2+)
+ * 모든 컴포넌트 클래스는 gy- 접두사를 써서 다른 CSS와 충돌하지 않아요.
+ * 글꼴: https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;500;700;800&family=IBM+Plex+Sans+KR:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap
+ */
+
+/* ---------- tokens ---------- */
+:root{
+  --h:255; --c:.012; --ah:265; --ac:.14; --ad:0%;   /* 기본 팔레트: 먹 + 쪽빛 강조 */
+  --f-display: "Hahmlet", "Nanum Myeongjo", "Apple SD Gothic Neo", serif;
+  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
+  --f-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;
+
+  --pun-1:4px; --pun-2:8px; --pun-3:12px; --pun-4:16px; --pun-6:24px; --pun-8:32px; --pun-12:48px; --pun-16:64px;
+  --r-1:6px; --r-2:12px; --r-3:20px; --r-4:28px; --r-pill:999px;
+  --ease-bleed: cubic-bezier(.2,.7,.2,1);
+  --t-1:120ms; --t-2:220ms; --t-3:420ms;
+
+}
+/* 색 토큰: 루트와, 팔레트·테마를 따로 지정한 모든 요소에서 다시 계산돼요 */
+:root, [data-palette], [data-theme]{
+  --bg:      oklch(96.5% calc(var(--c)*.12) var(--h));
+  --bg-2:    oklch(92.5% calc(var(--c)*.22) var(--h));
+  --ink:     oklch(23% calc(var(--c)*.35) var(--h));
+  --ink-2:   oklch(43% calc(var(--c)*.25) var(--h));
+  --ink-3:   oklch(50% calc(var(--c)*.18) var(--h));
+  --line:    oklch(84% calc(var(--c)*.22) var(--h));
+  --paper:   oklch(99.2% calc(var(--c)*.05) var(--h));
+  --accent:  oklch(calc(49% + var(--ad)) var(--ac) var(--ah));
+  --accent-soft: oklch(90% calc(var(--ac)*.45) var(--ah));
+  --on-accent: oklch(99% 0 0);
+  --stain:   oklch(80% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
+  --ok: oklch(50% .13 150); --warn: oklch(54% .13 65); --err: oklch(52% .19 25);
+  --shadow: 0 1px 0 oklch(100% 0 0 / .7) inset, 0 18px 40px -22px oklch(25% .06 var(--h) / .35), 0 2px 6px -2px oklch(25% .04 var(--h) / .12);
+  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 0'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 -.42'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
+  --grain-o: .4;
+
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark){ :root[data-theme="system"], :root[data-theme="system"] [data-palette]:not([data-theme]):not([data-theme="light"] *){
+  --bg: oklch(17% calc(var(--c)*.22) var(--h)); --bg-2: oklch(21% calc(var(--c)*.3) var(--h));
+  --ink: oklch(95% calc(var(--c)*.08) var(--h)); --ink-2: oklch(79% calc(var(--c)*.15) var(--h)); --ink-3: oklch(70% calc(var(--c)*.15) var(--h));
+  --line: oklch(33% calc(var(--c)*.25) var(--h)); --paper: oklch(29% calc(var(--c)*.25) var(--h));
+  --accent: oklch(calc(76% + var(--ad)) var(--ac) var(--ah)); --accent-soft: oklch(33% calc(var(--ac)*.55) var(--ah)); --on-accent: oklch(18% .03 var(--ah));
+  --stain: oklch(48% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
+  --ok: oklch(74% .14 150); --warn: oklch(80% .13 75); --err: oklch(72% .16 25);
+  --shadow: 0 1px 0 oklch(100% 0 0 / .07) inset, 0 20px 44px -20px oklch(5% .02 var(--h) / .7), 0 2px 6px -2px oklch(5% 0 0 / .4);
+  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 -.4'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
+  --grain-o: .35; color-scheme: dark;
+}}
+:root:not([data-theme="light"]):not([data-theme="system"]), [data-theme="dark"],
+:root:not([data-theme="light"]):not([data-theme="system"]) [data-palette]:not([data-theme]):not([data-theme="light"] *){
+  --bg: oklch(17% calc(var(--c)*.22) var(--h)); --bg-2: oklch(21% calc(var(--c)*.3) var(--h));
+  --ink: oklch(95% calc(var(--c)*.08) var(--h)); --ink-2: oklch(79% calc(var(--c)*.15) var(--h)); --ink-3: oklch(70% calc(var(--c)*.15) var(--h));
+  --line: oklch(33% calc(var(--c)*.25) var(--h)); --paper: oklch(29% calc(var(--c)*.25) var(--h));
+  --accent: oklch(calc(76% + var(--ad)) var(--ac) var(--ah)); --accent-soft: oklch(33% calc(var(--ac)*.55) var(--ah)); --on-accent: oklch(18% .03 var(--ah));
+  --stain: oklch(48% calc(var(--c)*.9 + .03) calc(var(--h) + 70));
+  --ok: oklch(74% .14 150); --warn: oklch(80% .13 75); --err: oklch(72% .16 25);
+  --shadow: 0 1px 0 oklch(100% 0 0 / .07) inset, 0 20px 44px -20px oklch(5% .02 var(--h) / .7), 0 2px 6px -2px oklch(5% 0 0 / .4);
+  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/></filter><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 -.4'/></filter><rect width='100%' height='100%' filter='url(%23a)'/><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
+  --grain-o: .35; color-scheme: dark;
+}
+[data-palette="meok"]    {--h:255;--c:.012;--ah:265;--ac:.14;--ad:0%}
+[data-palette="jjok"]    {--h:265;--c:.14; --ah:265;--ac:.14;--ad:0%}
+[data-palette="cheongja"]{--h:178;--c:.08;--ah:178;--ac:.08;--ad:4%}
+[data-palette="songhwa"] {--h:98; --c:.12; --ah:98; --ac:.12;--ad:0%}
+[data-palette="yeonji"]  {--h:16; --c:.16; --ah:16; --ac:.16;--ad:0%}
+[data-palette="jaju"]    {--h:330;--c:.13; --ah:330;--ac:.13;--ad:0%}
+[data-palette="chija"]    {--h:70;--c:0.14;--ah:70;--ac:0.14;--ad:0%}
+[data-palette="hwangto"]  {--h:48;--c:.065;--ah:48;--ac:.065;--ad:0%}
+[data-palette="oksaek"]   {--h:195;--c:.10;--ah:195;--ac:.10;--ad:-5%}
+[data-palette="haneul"]   {--h:235;--c:0.11;--ah:235;--ac:0.11;--ad:0%}
+[data-palette="odi"]      {--h:300;--c:0.12;--ah:300;--ac:0.12;--ad:0%}
+/* 화면 일부에 팔레트·테마를 따로 지정하면 글자색도 그 범위의 먹색을 따라가요 */
+:where([data-palette], [data-theme]):not(:root){color:var(--ink)}
+
+/* ---------- base (opt-in: add class="gy" to <body>) ---------- */
+.gy{margin:0;color:var(--ink);background:var(--bg);font:400 16px/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
+.gy :focus-visible{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 7px color-mix(in oklch, var(--accent) 22%, transparent)}
+
+/* ---------- material: 겹 ---------- */
+.gy-gyeop{position:relative;isolation:isolate;background:color-mix(in oklch, var(--paper) var(--thick,74%), transparent);-webkit-backdrop-filter:blur(var(--blur,14px)) saturate(1.2);backdrop-filter:blur(var(--blur,14px)) saturate(1.2);border:1px solid color-mix(in oklch, var(--paper) 50%, var(--line));border-radius:var(--r-3);box-shadow:var(--shadow)}
+.gy-gyeop::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grain);opacity:var(--grain-o);pointer-events:none;z-index:-1}
+.gy-hol{--thick:46%;--blur:6px}
+.gy-du {--thick:72%;--blur:14px}
+.gy-se {--thick:90%;--blur:24px}
+
+/* ---------- button ---------- */
+.gy-btn{--bg-b:var(--accent);--fg-b:var(--on-accent);appearance:none;border:0;cursor:pointer;font:600 15px/1 var(--f-body);color:var(--fg-b);background:var(--bg-b);padding:13px 20px;border-radius:var(--r-2);display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:transform var(--t-1) var(--ease-bleed), box-shadow var(--t-3) var(--ease-bleed)}
+.gy-btn:hover{box-shadow:0 0 0 1px var(--bg-b), 0 6px 22px -4px color-mix(in oklch, var(--bg-b) 60%, transparent)}
+.gy-btn:active{transform:translateY(1px) scale(.985)}
+.gy-btn--ink{--bg-b:var(--ink);--fg-b:var(--bg)}
+.gy-btn--paper{--fg-b:var(--ink);background:color-mix(in oklch, var(--paper) 74%, transparent);border:1px solid var(--line);backdrop-filter:blur(12px)}
+.gy-btn--paper:hover{box-shadow:0 6px 22px -8px color-mix(in oklch, var(--ink) 40%, transparent)}
+.gy-btn--ghost{--fg-b:var(--accent);background:transparent}
+.gy-btn--ghost:hover{background:color-mix(in oklch, var(--accent) 10%, transparent);box-shadow:none}
+.gy-btn--danger{--bg-b:var(--err);--fg-b:oklch(99% 0 0)}
+.gy-btn--sm{padding:9px 14px;font-size:14px;border-radius:10px}
+.gy-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
+
+/* ---------- switch: <button class="gy-switch" role="switch" aria-checked="true"> ---------- */
+.gy-switch{appearance:none;border:0;cursor:pointer;width:50px;height:30px;border-radius:var(--r-pill);background:var(--line);position:relative;transition:background var(--t-2) var(--ease-bleed);flex:none}
+.gy-switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--paper);box-shadow:0 2px 6px oklch(0% 0 0 / .25);transition:transform var(--t-2) var(--ease-bleed)}
+.gy-switch[aria-checked="true"]{background:var(--accent)}
+.gy-switch[aria-checked="true"]::after{transform:translateX(20px);background:oklch(99% 0 0)}
+
+/* ---------- segmented: buttons with aria-pressed ---------- */
+.gy-seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:color-mix(in oklch, var(--ink) 7%, transparent);gap:2px}
+.gy-seg button{appearance:none;border:0;background:transparent;color:var(--ink-2);font:500 14px/1 var(--f-body);padding:8px 14px;border-radius:var(--r-pill);cursor:pointer}
+.gy-seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px oklch(0% 0 0 / .14)}
+
+/* ---------- chip ---------- */
+.gy-chip{appearance:none;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-2);font:500 14px/1 var(--f-body);padding:8px 13px;border-radius:var(--r-pill)}
+.gy-chip[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent;color:var(--ink)}
+
+/* ---------- field ---------- */
+.gy-field{display:flex;flex-direction:column;gap:6px}
+.gy-field label{font-size:13px;font-weight:500;color:var(--ink-2)}
+.gy-field input,.gy-field textarea,.gy-field select{font:400 15px var(--f-body);color:var(--ink);background:color-mix(in oklch, var(--paper) 80%, transparent);border:1px solid var(--line);border-radius:var(--r-2);padding:11px 13px;transition:border-color var(--t-2), box-shadow var(--t-3) var(--ease-bleed)}
+.gy-field :is(input,textarea,select):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in oklch, var(--accent) 18%, transparent), 0 0 18px 2px color-mix(in oklch, var(--accent) 22%, transparent)}
+.gy-field small{font-size:13px;color:var(--ink-3)}
+.gy-field--error :is(input,textarea,select){border-color:var(--err)}
+.gy-field--error small{color:var(--err)}
+
+/* ---------- checkbox: <label class="gy-check"><input type="checkbox"> 텍스트</label> ---------- */
+.gy-check{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer}
+.gy-check input{appearance:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--ink-3);display:grid;place-items:center;margin:0;cursor:pointer}
+.gy-check input:checked{background:var(--accent);border-color:var(--accent)}
+.gy-check input:checked::after{content:"";width:9px;height:5px;border:2px solid var(--on-accent);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
+
+/* ---------- badge ---------- */
+.gy-badge{font:600 12px/1 var(--f-body);padding:7px 11px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px;color:var(--accent);background:color-mix(in oklch, var(--accent) 13%, transparent)}
+.gy-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
+.gy-badge--ok{color:var(--ok);background:color-mix(in oklch, var(--ok) 14%, transparent)}
+.gy-badge--warn{color:var(--warn);background:color-mix(in oklch, var(--warn) 16%, transparent)}
+.gy-badge--err{color:var(--err);background:color-mix(in oklch, var(--err) 14%, transparent)}
+
+/* ---------- progress: <div class="gy-progress" style="--p:60%"><i></i></div> ---------- */
+.gy-progress{height:8px;border-radius:var(--r-pill);background:color-mix(in oklch, var(--ink) 9%, transparent);overflow:hidden}
+.gy-progress > i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg, color-mix(in oklch, var(--accent) 50%, transparent), var(--accent))}
+
+/* ---------- toast / tooltip ---------- */
+.gy-toast{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:14.5px}
+.gy-tooltip{font-size:13px;padding:7px 11px;border-radius:10px;background:var(--ink);color:var(--bg)}
+
+@media (prefers-reduced-motion: reduce){.gy *,.gy *::before,.gy *::after{transition:none!important;animation:none!important}}

package/index.mjs

@@ -254,11 +254,11 @@ const tokens = {
           },
           "ink": {
             "$type": "color",
-            "$value": "#0e211d"
+            "$value": "#0d211d"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#455350"
+            "$value": "#445450"
           },
           "ink-3": {
             "$type": "color",
@@ -266,7 +266,7 @@ const tokens = {
           },
           "line": {
             "$type": "color",
-            "$value": "#c0ceca"
+            "$value": "#bfceca"
           },
           "paper": {
             "$type": "color",
@@ -274,11 +274,11 @@ const tokens = {
           },
           "accent": {
             "$type": "color",
-            "$value": "#256e60"
+            "$value": "#2c7b6c"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#c7e6de"
+            "$value": "#c6e6de"
           },
           "on-accent": {
             "$type": "color",
@@ -286,7 +286,7 @@ const tokens = {
           },
           "stain": {
             "$type": "color",
-            "$value": "#8bc4fa"
+            "$value": "#88c4fd"
           },
           "ok": {
             "$type": "color",
@@ -308,7 +308,7 @@ const tokens = {
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#0c1c18"
+            "$value": "#0b1c18"
           },
           "ink": {
             "$type": "color",
@@ -324,7 +324,7 @@ const tokens = {
           },
           "line": {
             "$type": "color",
-            "$value": "#2b3935"
+            "$value": "#2a3935"
           },
           "paper": {
             "$type": "color",
@@ -332,11 +332,11 @@ const tokens = {
           },
           "accent": {
             "$type": "color",
-            "$value": "#7bc1b1"
+            "$value": "#83cfbe"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#1b3c35"
+            "$value": "#193d35"
           },
           "on-accent": {
             "$type": "color",
@@ -344,7 +344,7 @@ const tokens = {
           },
           "stain": {
             "$type": "color",
-            "$value": "#2a6192"
+            "$value": "#276194"
           },
           "ok": {
             "$type": "color",
@@ -960,39 +960,39 @@ const tokens = {
         "light": {
           "bg": {
             "$type": "color",
-            "$value": "#edf6f5"
+            "$value": "#ebf6f6"
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#daeaea"
+            "$value": "#d6ebeb"
           },
           "ink": {
             "$type": "color",
-            "$value": "#0b2121"
+            "$value": "#042222"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#435353"
+            "$value": "#405454"
           },
           "ink-3": {
             "$type": "color",
-            "$value": "#5a6666"
+            "$value": "#586766"
           },
           "line": {
             "$type": "color",
-            "$value": "#becece"
+            "$value": "#bbcfcf"
           },
           "paper": {
             "$type": "color",
-            "$value": "#f9fdfd"
+            "$value": "#f9fefd"
           },
           "accent": {
             "$type": "color",
-            "$value": "#0f6e6e"
+            "$value": "#006364"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#c4e6e5"
+            "$value": "#bce8e7"
           },
           "on-accent": {
             "$type": "color",
@@ -1000,7 +1000,7 @@ const tokens = {
           },
           "stain": {
             "$type": "color",
-            "$value": "#9ebdff"
+            "$value": "#98bcff"
           },
           "ok": {
             "$type": "color",
@@ -1018,39 +1018,39 @@ const tokens = {
         "dark": {
           "bg": {
             "$type": "color",
-            "$value": "#061212"
+            "$value": "#041212"
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#0a1c1c"
+            "$value": "#051d1d"
           },
           "ink": {
             "$type": "color",
-            "$value": "#eaf0f0"
+            "$value": "#e9f0f0"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#b2bdbd"
+            "$value": "#b0bebd"
           },
           "ink-3": {
             "$type": "color",
-            "$value": "#96a1a1"
+            "$value": "#94a1a1"
           },
           "line": {
             "$type": "color",
-            "$value": "#293938"
+            "$value": "#263a39"
           },
           "paper": {
             "$type": "color",
-            "$value": "#202f2e"
+            "$value": "#1c2f2f"
           },
           "accent": {
             "$type": "color",
-            "$value": "#70c1c1"
+            "$value": "#45b5b5"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#153c3c"
+            "$value": "#033e3e"
           },
           "on-accent": {
             "$type": "color",
@@ -1058,7 +1058,7 @@ const tokens = {
           },
           "stain": {
             "$type": "color",
-            "$value": "#415b97"
+            "$value": "#3c5aa1"
           },
           "ok": {
             "$type": "color",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyeol",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "결 gyeol — 한지를 겹겹이 올리는 디자인 시스템. CSS, Tailwind preset, DTCG design tokens.",
   "license": "MIT",
   "repository": {

package/tokens.json

@@ -253,11 +253,11 @@
           },
           "ink": {
             "$type": "color",
-            "$value": "#0e211d"
+            "$value": "#0d211d"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#455350"
+            "$value": "#445450"
           },
           "ink-3": {
             "$type": "color",
@@ -265,7 +265,7 @@
           },
           "line": {
             "$type": "color",
-            "$value": "#c0ceca"
+            "$value": "#bfceca"
           },
           "paper": {
             "$type": "color",
@@ -273,11 +273,11 @@
           },
           "accent": {
             "$type": "color",
-            "$value": "#256e60"
+            "$value": "#2c7b6c"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#c7e6de"
+            "$value": "#c6e6de"
           },
           "on-accent": {
             "$type": "color",
@@ -285,7 +285,7 @@
           },
           "stain": {
             "$type": "color",
-            "$value": "#8bc4fa"
+            "$value": "#88c4fd"
           },
           "ok": {
             "$type": "color",
@@ -307,7 +307,7 @@
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#0c1c18"
+            "$value": "#0b1c18"
           },
           "ink": {
             "$type": "color",
@@ -323,7 +323,7 @@
           },
           "line": {
             "$type": "color",
-            "$value": "#2b3935"
+            "$value": "#2a3935"
           },
           "paper": {
             "$type": "color",
@@ -331,11 +331,11 @@
           },
           "accent": {
             "$type": "color",
-            "$value": "#7bc1b1"
+            "$value": "#83cfbe"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#1b3c35"
+            "$value": "#193d35"
           },
           "on-accent": {
             "$type": "color",
@@ -343,7 +343,7 @@
           },
           "stain": {
             "$type": "color",
-            "$value": "#2a6192"
+            "$value": "#276194"
           },
           "ok": {
             "$type": "color",
@@ -959,39 +959,39 @@
         "light": {
           "bg": {
             "$type": "color",
-            "$value": "#edf6f5"
+            "$value": "#ebf6f6"
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#daeaea"
+            "$value": "#d6ebeb"
           },
           "ink": {
             "$type": "color",
-            "$value": "#0b2121"
+            "$value": "#042222"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#435353"
+            "$value": "#405454"
           },
           "ink-3": {
             "$type": "color",
-            "$value": "#5a6666"
+            "$value": "#586766"
           },
           "line": {
             "$type": "color",
-            "$value": "#becece"
+            "$value": "#bbcfcf"
           },
           "paper": {
             "$type": "color",
-            "$value": "#f9fdfd"
+            "$value": "#f9fefd"
           },
           "accent": {
             "$type": "color",
-            "$value": "#0f6e6e"
+            "$value": "#006364"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#c4e6e5"
+            "$value": "#bce8e7"
           },
           "on-accent": {
             "$type": "color",
@@ -999,7 +999,7 @@
           },
           "stain": {
             "$type": "color",
-            "$value": "#9ebdff"
+            "$value": "#98bcff"
           },
           "ok": {
             "$type": "color",
@@ -1017,39 +1017,39 @@
         "dark": {
           "bg": {
             "$type": "color",
-            "$value": "#061212"
+            "$value": "#041212"
           },
           "bg-2": {
             "$type": "color",
-            "$value": "#0a1c1c"
+            "$value": "#051d1d"
           },
           "ink": {
             "$type": "color",
-            "$value": "#eaf0f0"
+            "$value": "#e9f0f0"
           },
           "ink-2": {
             "$type": "color",
-            "$value": "#b2bdbd"
+            "$value": "#b0bebd"
           },
           "ink-3": {
             "$type": "color",
-            "$value": "#96a1a1"
+            "$value": "#94a1a1"
           },
           "line": {
             "$type": "color",
-            "$value": "#293938"
+            "$value": "#263a39"
           },
           "paper": {
             "$type": "color",
-            "$value": "#202f2e"
+            "$value": "#1c2f2f"
           },
           "accent": {
             "$type": "color",
-            "$value": "#70c1c1"
+            "$value": "#45b5b5"
           },
           "accent-soft": {
             "$type": "color",
-            "$value": "#153c3c"
+            "$value": "#033e3e"
           },
           "on-accent": {
             "$type": "color",
@@ -1057,7 +1057,7 @@
           },
           "stain": {
             "$type": "color",
-            "$value": "#415b97"
+            "$value": "#3c5aa1"
           },
           "ok": {
             "$type": "color",