@j-solution/components 1.7.0 → 1.9.0

package/assets/styles/themes.css

@@ -1,444 +1,444 @@
-/* tweakcn 테마 정의 */
-
-/* Default 테마 (기본) - :root에도 적용하여 기본값 제공 */
-:root,
-.theme-default {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
-}
-
-.theme-default.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 212.7 26.8% 83.9%;
-}
-
-/* Slate 테마 */
-.theme-slate {
-  --background: 0 0% 100%;
-  --foreground: 222.2 47.4% 11.2%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 47.4% 11.2%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 47.4% 11.2%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 47.4% 11.2%;
-}
-
-.theme-slate.dark {
-  --background: 222.2 47.4% 11.2%;
-  --foreground: 210 40% 98%;
-  --card: 222.2 47.4% 11.2%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222.2 47.4% 11.2%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 212.7 26.8% 83.9%;
-}
-
-/* Rose 테마 */
-.theme-rose {
-  --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
-  --primary: 346.8 77.2% 49.8%;
-  --primary-foreground: 355.7 100% 97.3%;
-  --secondary: 240 4.8% 95.9%;
-  --secondary-foreground: 240 5.9% 10%;
-  --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
-  --accent: 240 4.8% 95.9%;
-  --accent-foreground: 240 5.9% 10%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 240 5.9% 90%;
-  --input: 240 5.9% 90%;
-  --ring: 346.8 77.2% 49.8%;
-}
-
-.theme-rose.dark {
-  --background: 20 14.3% 4.1%;
-  --foreground: 0 0% 95%;
-  --card: 24 9.8% 10%;
-  --card-foreground: 0 0% 95%;
-  --popover: 0 0% 9%;
-  --popover-foreground: 0 0% 95%;
-  --primary: 346.8 77.2% 49.8%;
-  --primary-foreground: 355.7 100% 97.3%;
-  --secondary: 240 3.7% 15.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 15%;
-  --muted-foreground: 240 5% 64.9%;
-  --accent: 12 6.5% 15.1%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 85.7% 97.3%;
-  --border: 240 3.7% 15.9%;
-  --input: 240 3.7% 15.9%;
-  --ring: 346.8 77.2% 49.8%;
-}
-
-/* Blue 테마 */
-.theme-blue {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --primary: 221.2 83.2% 53.3%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 221.2 83.2% 53.3%;
-}
-
-.theme-blue.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 217.2 91.2% 59.8%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 224.3 76.3% 94.9%;
-}
-
-/* Green 테마 */
-.theme-green {
-  --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
-  --primary: 142.1 76.2% 36.3%;
-  --primary-foreground: 355.7 100% 97.3%;
-  --secondary: 240 4.8% 95.9%;
-  --secondary-foreground: 240 5.9% 10%;
-  --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
-  --accent: 240 4.8% 95.9%;
-  --accent-foreground: 240 5.9% 10%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 240 5.9% 90%;
-  --input: 240 5.9% 90%;
-  --ring: 142.1 76.2% 36.3%;
-}
-
-.theme-green.dark {
-  --background: 20 14.3% 4.1%;
-  --foreground: 0 0% 95%;
-  --card: 24 9.8% 10%;
-  --card-foreground: 0 0% 95%;
-  --popover: 0 0% 9%;
-  --popover-foreground: 0 0% 95%;
-  --primary: 142.1 70.6% 45.3%;
-  --primary-foreground: 144.9 80.4% 10%;
-  --secondary: 240 3.7% 15.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 15%;
-  --muted-foreground: 240 5% 64.9%;
-  --accent: 12 6.5% 15.1%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 85.7% 97.3%;
-  --border: 240 3.7% 15.9%;
-  --input: 240 3.7% 15.9%;
-  --ring: 142.4 71.8% 29.2%;
-}
-
-/* ============================================
-   커스텀 테마 예시 (Custom Theme Examples)
-   ============================================
-   
-   아래는 커스텀 테마를 추가하는 방법의 예시입니다.
-   tweakcn에서 생성한 테마를 이 형식으로 변환하여 추가할 수 있습니다.
-   
-   사용 방법:
-   1. tweakcn (https://tweakcn.com)에서 원하는 테마 생성
-   2. 생성된 CSS 변수를 아래 형식으로 변환
-   3. .theme-{name} 클래스로 추가
-   4. 라이트/다크 모드 모두 정의
-   5. 코드 수정 없이 자동으로 JHeader의 테마 선택기에 표시됨
-   
-   주의사항:
-   - .theme-default 클래스는 반드시 포함되어야 합니다 (이미 위에 정의됨)
-   - 테마 이름은 영문, 숫자, 하이픈, 언더스코어만 사용 가능
-   ============================================ */
-
-/* 커스텀 테마 예시 1: Purple 테마 */
-.theme-purple {
-  --background: 0 0% 100%;
-  --foreground: 280 8.9% 10%;
-  --card: 0 0% 100%;
-  --card-foreground: 280 8.9% 10%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 280 8.9% 10%;
-  --primary: 280 91% 65%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 280 4.8% 95.9%;
-  --secondary-foreground: 280 5.9% 10%;
-  --muted: 280 4.8% 95.9%;
-  --muted-foreground: 280 3.8% 46.1%;
-  --accent: 280 4.8% 95.9%;
-  --accent-foreground: 280 5.9% 10%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 280 5.9% 90%;
-  --input: 280 5.9% 90%;
-  --ring: 280 91% 65%;
-}
-
-.theme-purple.dark {
-  --background: 280 10% 3.9%;
-  --foreground: 0 0% 95%;
-  --card: 280 10% 5%;
-  --card-foreground: 0 0% 95%;
-  --popover: 280 10% 3.9%;
-  --popover-foreground: 0 0% 95%;
-  --primary: 280 91% 65%;
-  --primary-foreground: 280 10% 3.9%;
-  --secondary: 280 3.7% 15.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 280 3.7% 15.9%;
-  --muted-foreground: 280 5% 64.9%;
-  --accent: 280 3.7% 15.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 85.7% 97.3%;
-  --border: 280 3.7% 15.9%;
-  --input: 280 3.7% 15.9%;
-  --ring: 280 91% 65%;
-}
-
-/* 커스텀 테마 예시 2: Orange 테마 */
-.theme-orange {
-  --background: 0 0% 100%;
-  --foreground: 20 14.3% 4.1%;
-  --card: 0 0% 100%;
-  --card-foreground: 20 14.3% 4.1%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 20 14.3% 4.1%;
-  --primary: 24.6 95% 53.1%;
-  --primary-foreground: 60 9.1% 97.8%;
-  --secondary: 60 4.8% 95.9%;
-  --secondary-foreground: 20 5.9% 10%;
-  --muted: 60 4.8% 95.9%;
-  --muted-foreground: 25 5.3% 44.7%;
-  --accent: 60 4.8% 95.9%;
-  --accent-foreground: 20 5.9% 10%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 60 9.1% 97.8%;
-  --border: 20 5.9% 90%;
-  --input: 20 5.9% 90%;
-  --ring: 24.6 95% 53.1%;
-}
-
-.theme-orange.dark {
-  --background: 20 14.3% 4.1%;
-  --foreground: 60 9.1% 97.8%;
-  --card: 20 14.3% 4.1%;
-  --card-foreground: 60 9.1% 97.8%;
-  --popover: 20 14.3% 4.1%;
-  --popover-foreground: 60 9.1% 97.8%;
-  --primary: 20.5 90.2% 48.2%;
-  --primary-foreground: 60 9.1% 97.8%;
-  --secondary: 12 6.5% 15.1%;
-  --secondary-foreground: 60 9.1% 97.8%;
-  --muted: 12 6.5% 15.1%;
-  --muted-foreground: 24 5.4% 63.9%;
-  --accent: 12 6.5% 15.1%;
-  --accent-foreground: 60 9.1% 97.8%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 60 9.1% 97.8%;
-  --border: 12 6.5% 15.1%;
-  --input: 12 6.5% 15.1%;
-  --ring: 20.5 90.2% 48.2%;
-}
-
-.theme-vescrow {
-  --background: 270 50% 99.2157%;
-  --foreground: 277.5000 44.4444% 3.5294%;
-  --card: 0 0% 100%;
-  --card-foreground: 277.5000 44.4444% 3.5294%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 277.5000 44.4444% 3.5294%;
-  --primary: 240 93.8144% 19.0196%;
-  --primary-foreground: 0 0% 100%;
-  --secondary: 220.0000 87.0968% 93.9216%;
-  --secondary-foreground: 220 98.1308% 41.9608%;
-  --muted: 270 13.3333% 94.1176%;
-  --muted-foreground: 270.0000 6.0606% 38.8235%;
-  --accent: 233.0769 100.0000% 94.9020%;
-  --accent-foreground: 220 98.1308% 41.9608%;
-  --destructive: 346.8367 77.1654% 49.8039%;
-  --destructive-foreground: 0 0% 100%;
-  --border: 277.5000 15.3846% 89.8039%;
-  --input: 277.5000 15.3846% 89.8039%;
-  --ring: 219.8969 100% 61.9608%;
-  --chart-1: 220 98.1308% 41.9608%;
-  --chart-2: 258.3117 89.5349% 66.2745%;
-  --chart-3: 292.1893 84.0796% 60.5882%;
-  --chart-4: 349.7238 89.1626% 60.1961%;
-  --chart-5: 24.5815 94.9791% 53.1373%;
-  --sidebar: 220.0000 87.0968% 93.9216%;
-  --sidebar-foreground: 217.8947 93.4426% 11.9608%;
-  --sidebar-primary: 270 50% 99.2157%;
-  --sidebar-primary-foreground: 226.6667 44.2623% 11.9608%;
-  --sidebar-accent: 235.5000 43.4783% 18.0392%;
-  --sidebar-accent-foreground: 0 0% 100%;
-  --sidebar-border: 241.5000 43.4783% 18.0392%;
-  --sidebar-ring: 236.3636 58.5799% 33.1373%;
-  --font-sans: Bricolage Grotesque, ui-sans-serif, sans-serif, system-ui;
-  --font-serif: Georgia, serif;
-  --font-mono: JetBrains Mono, monospace;
-  --radius: 1.25rem;
-  --shadow-x: 0px;
-  --shadow-y: 4px;
-  --shadow-blur: 10px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.1;
-  --shadow-color: 0, 0, 0;
-  --shadow-2xs: 0px 4px 10px 0px hsl(0, 0, 0 / 0.05);
-  --shadow-xs: 0px 4px 10px 0px hsl(0, 0, 0 / 0.05);
-  --shadow-sm: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 1px 2px -1px hsl(0, 0, 0 / 0.10);
-  --shadow: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 1px 2px -1px hsl(0, 0, 0 / 0.10);
-  --shadow-md: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 2px 4px -1px hsl(0, 0, 0 / 0.10);
-  --shadow-lg: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 4px 6px -1px hsl(0, 0, 0 / 0.10);
-  --shadow-xl: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 8px 10px -1px hsl(0, 0, 0 / 0.10);
-  --shadow-2xl: 0px 4px 10px 0px hsl(0, 0, 0 / 0.25);
-  --tracking-normal: -0.01em;
-  --spacing: 0.25rem;
-}
-
-.theme-vescrow.dark {
-  --background: 222.8571 63.6364% 2.1569%;
-  --foreground: 270 50% 99.2157%;
-  --card: 221.5385 52.0000% 4.9020%;
-  --card-foreground: 270 50% 99.2157%;
-  --popover: 226.1538 52.0000% 4.9020%;
-  --popover-foreground: 270 50% 99.2157%;
-  --primary: 227.9221 83.6957% 36.0784%;
-  --primary-foreground: 0 0% 100%;
-  --secondary: 226.6667 44.2623% 11.9608%;
-  --secondary-foreground: 270 50% 99.2157%;
-  --muted: 229.0909 47.8261% 9.0196%;
-  --muted-foreground: 240 7.9365% 62.9412%;
-  --accent: 232.5000 43.4783% 18.0392%;
-  --accent-foreground: 270 50% 99.2157%;
-  --destructive: 346.8000 63.2911% 30.9804%;
-  --destructive-foreground: 0 0% 100%;
-  --border: 241.5000 43.4783% 18.0392%;
-  --input: 229.5000 43.4783% 18.0392%;
-  --ring: 238.1818 58.5799% 33.1373%;
-  --chart-1: 230.1316 90.4762% 67.0588%;
-  --chart-2: 28.8889 83.5052% 61.9608%;
-  --chart-3: 349.7238 89.1626% 60.1961%;
-  --chart-4: 24.5815 94.9791% 53.1373%;
-  --chart-5: 238.1818 58.5799% 33.1373%;
-  --sidebar: 228 50% 7.8431%;
-  --sidebar-foreground: 235.5556 12.0000% 55.8824%;
-  --sidebar-primary: 270 50% 99.2157%;
-  --sidebar-primary-foreground: 231 50% 7.8431%;
-  --sidebar-accent: 235.5556 44.2623% 11.9608%;
-  --sidebar-accent-foreground: 270 50% 99.2157%;
-  --sidebar-border: 237.7778 44.2623% 11.9608%;
-  --sidebar-ring: 236.3636 58.5799% 33.1373%;
-  --font-sans: Bricolage Grotesque, ui-sans-serif, sans-serif, system-ui;
-  --font-serif: Georgia, serif;
-  --font-mono: JetBrains Mono, monospace;
-  --radius: 1.25rem;
-  --shadow-x: 0px;
-  --shadow-y: 10px;
-  --shadow-blur: 20px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.5;
-  --shadow-color: 0, 0, 0;
-  --shadow-2xs: 0px 10px 20px 0px hsl(0, 0, 0 / 0.25);
-  --shadow-xs: 0px 10px 20px 0px hsl(0, 0, 0 / 0.25);
-  --shadow-sm: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 1px 2px -1px hsl(0, 0, 0 / 0.50);
-  --shadow: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 1px 2px -1px hsl(0, 0, 0 / 0.50);
-  --shadow-md: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 2px 4px -1px hsl(0, 0, 0 / 0.50);
-  --shadow-lg: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 4px 6px -1px hsl(0, 0, 0 / 0.50);
-  --shadow-xl: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 8px 10px -1px hsl(0, 0, 0 / 0.50);
-  --shadow-2xl: 0px 10px 20px 0px hsl(0, 0, 0 / 1.25);
+/* tweakcn 테마 정의 */
+
+/* Default 테마 (기본) - :root에도 적용하여 기본값 제공 */
+:root,
+.theme-default {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+}
+
+.theme-default.dark {
+  --background: 222 47% 11%;
+  --foreground: 210 40% 98%;
+  --card: 222 47% 14%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222 47% 14%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217 91% 60%;
+  --primary-foreground: 222 47% 11%;
+  --secondary: 217 32% 17%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217 32% 17%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 217 32% 17%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217 32% 17%;
+  --input: 217 32% 17%;
+  --ring: 217 91% 60%;
+}
+
+/* Slate 테마 */
+.theme-slate {
+  --background: 0 0% 100%;
+  --foreground: 222.2 47.4% 11.2%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 47.4% 11.2%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 47.4% 11.2%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 47.4% 11.2%;
+}
+
+.theme-slate.dark {
+  --background: 222.2 47.4% 11.2%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 47.4% 11.2%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 47.4% 11.2%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
+}
+
+/* Rose 테마 */
+.theme-rose {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 346.8 77.2% 49.8%;
+  --primary-foreground: 355.7 100% 97.3%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 346.8 77.2% 49.8%;
+}
+
+.theme-rose.dark {
+  --background: 20 14.3% 4.1%;
+  --foreground: 0 0% 95%;
+  --card: 24 9.8% 10%;
+  --card-foreground: 0 0% 95%;
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+  --primary: 346.8 77.2% 49.8%;
+  --primary-foreground: 355.7 100% 97.3%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 346.8 77.2% 49.8%;
+}
+
+/* Blue 테마 */
+.theme-blue {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+}
+
+.theme-blue.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 224.3 76.3% 94.9%;
+}
+
+/* Green 테마 */
+.theme-green {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 142.1 76.2% 36.3%;
+  --primary-foreground: 355.7 100% 97.3%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 142.1 76.2% 36.3%;
+}
+
+.theme-green.dark {
+  --background: 20 14.3% 4.1%;
+  --foreground: 0 0% 95%;
+  --card: 24 9.8% 10%;
+  --card-foreground: 0 0% 95%;
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+  --primary: 142.1 70.6% 45.3%;
+  --primary-foreground: 144.9 80.4% 10%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 142.4 71.8% 29.2%;
+}
+
+/* ============================================
+   커스텀 테마 예시 (Custom Theme Examples)
+   ============================================
+   
+   아래는 커스텀 테마를 추가하는 방법의 예시입니다.
+   tweakcn에서 생성한 테마를 이 형식으로 변환하여 추가할 수 있습니다.
+   
+   사용 방법:
+   1. tweakcn (https://tweakcn.com)에서 원하는 테마 생성
+   2. 생성된 CSS 변수를 아래 형식으로 변환
+   3. .theme-{name} 클래스로 추가
+   4. 라이트/다크 모드 모두 정의
+   5. 코드 수정 없이 자동으로 JHeader의 테마 선택기에 표시됨
+   
+   주의사항:
+   - .theme-default 클래스는 반드시 포함되어야 합니다 (이미 위에 정의됨)
+   - 테마 이름은 영문, 숫자, 하이픈, 언더스코어만 사용 가능
+   ============================================ */
+
+/* 커스텀 테마 예시 1: Purple 테마 */
+.theme-purple {
+  --background: 0 0% 100%;
+  --foreground: 280 8.9% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 280 8.9% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 280 8.9% 10%;
+  --primary: 280 91% 65%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 280 4.8% 95.9%;
+  --secondary-foreground: 280 5.9% 10%;
+  --muted: 280 4.8% 95.9%;
+  --muted-foreground: 280 3.8% 46.1%;
+  --accent: 280 4.8% 95.9%;
+  --accent-foreground: 280 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 280 5.9% 90%;
+  --input: 280 5.9% 90%;
+  --ring: 280 91% 65%;
+}
+
+.theme-purple.dark {
+  --background: 280 10% 3.9%;
+  --foreground: 0 0% 95%;
+  --card: 280 10% 5%;
+  --card-foreground: 0 0% 95%;
+  --popover: 280 10% 3.9%;
+  --popover-foreground: 0 0% 95%;
+  --primary: 280 91% 65%;
+  --primary-foreground: 280 10% 3.9%;
+  --secondary: 280 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 280 3.7% 15.9%;
+  --muted-foreground: 280 5% 64.9%;
+  --accent: 280 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+  --border: 280 3.7% 15.9%;
+  --input: 280 3.7% 15.9%;
+  --ring: 280 91% 65%;
+}
+
+/* 커스텀 테마 예시 2: Orange 테마 */
+.theme-orange {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+  --primary: 24.6 95% 53.1%;
+  --primary-foreground: 60 9.1% 97.8%;
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 20 5.9% 10%;
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 20 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+  --ring: 24.6 95% 53.1%;
+}
+
+.theme-orange.dark {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+  --primary: 20.5 90.2% 48.2%;
+  --primary-foreground: 60 9.1% 97.8%;
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+  --ring: 20.5 90.2% 48.2%;
+}
+
+.theme-vescrow {
+  --background: 270 50% 99.2157%;
+  --foreground: 277.5000 44.4444% 3.5294%;
+  --card: 0 0% 100%;
+  --card-foreground: 277.5000 44.4444% 3.5294%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 277.5000 44.4444% 3.5294%;
+  --primary: 240 93.8144% 19.0196%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 220.0000 87.0968% 93.9216%;
+  --secondary-foreground: 220 98.1308% 41.9608%;
+  --muted: 270 13.3333% 94.1176%;
+  --muted-foreground: 270.0000 6.0606% 38.8235%;
+  --accent: 233.0769 100.0000% 94.9020%;
+  --accent-foreground: 220 98.1308% 41.9608%;
+  --destructive: 346.8367 77.1654% 49.8039%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 277.5000 15.3846% 89.8039%;
+  --input: 277.5000 15.3846% 89.8039%;
+  --ring: 219.8969 100% 61.9608%;
+  --chart-1: 220 98.1308% 41.9608%;
+  --chart-2: 258.3117 89.5349% 66.2745%;
+  --chart-3: 292.1893 84.0796% 60.5882%;
+  --chart-4: 349.7238 89.1626% 60.1961%;
+  --chart-5: 24.5815 94.9791% 53.1373%;
+  --sidebar: 220.0000 87.0968% 93.9216%;
+  --sidebar-foreground: 217.8947 93.4426% 11.9608%;
+  --sidebar-primary: 270 50% 99.2157%;
+  --sidebar-primary-foreground: 226.6667 44.2623% 11.9608%;
+  --sidebar-accent: 235.5000 43.4783% 18.0392%;
+  --sidebar-accent-foreground: 0 0% 100%;
+  --sidebar-border: 241.5000 43.4783% 18.0392%;
+  --sidebar-ring: 236.3636 58.5799% 33.1373%;
+  --font-sans: Bricolage Grotesque, ui-sans-serif, sans-serif, system-ui;
+  --font-serif: Georgia, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 1.25rem;
+  --shadow-x: 0px;
+  --shadow-y: 4px;
+  --shadow-blur: 10px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.1;
+  --shadow-color: 0, 0, 0;
+  --shadow-2xs: 0px 4px 10px 0px hsl(0, 0, 0 / 0.05);
+  --shadow-xs: 0px 4px 10px 0px hsl(0, 0, 0 / 0.05);
+  --shadow-sm: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 1px 2px -1px hsl(0, 0, 0 / 0.10);
+  --shadow: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 1px 2px -1px hsl(0, 0, 0 / 0.10);
+  --shadow-md: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 2px 4px -1px hsl(0, 0, 0 / 0.10);
+  --shadow-lg: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 4px 6px -1px hsl(0, 0, 0 / 0.10);
+  --shadow-xl: 0px 4px 10px 0px hsl(0, 0, 0 / 0.10), 0px 8px 10px -1px hsl(0, 0, 0 / 0.10);
+  --shadow-2xl: 0px 4px 10px 0px hsl(0, 0, 0 / 0.25);
+  --tracking-normal: -0.01em;
+  --spacing: 0.25rem;
+}
+
+.theme-vescrow.dark {
+  --background: 222.8571 63.6364% 2.1569%;
+  --foreground: 270 50% 99.2157%;
+  --card: 221.5385 52.0000% 4.9020%;
+  --card-foreground: 270 50% 99.2157%;
+  --popover: 226.1538 52.0000% 4.9020%;
+  --popover-foreground: 270 50% 99.2157%;
+  --primary: 227.9221 83.6957% 36.0784%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 226.6667 44.2623% 11.9608%;
+  --secondary-foreground: 270 50% 99.2157%;
+  --muted: 229.0909 47.8261% 9.0196%;
+  --muted-foreground: 240 7.9365% 62.9412%;
+  --accent: 232.5000 43.4783% 18.0392%;
+  --accent-foreground: 270 50% 99.2157%;
+  --destructive: 346.8000 63.2911% 30.9804%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 241.5000 43.4783% 18.0392%;
+  --input: 229.5000 43.4783% 18.0392%;
+  --ring: 238.1818 58.5799% 33.1373%;
+  --chart-1: 230.1316 90.4762% 67.0588%;
+  --chart-2: 28.8889 83.5052% 61.9608%;
+  --chart-3: 349.7238 89.1626% 60.1961%;
+  --chart-4: 24.5815 94.9791% 53.1373%;
+  --chart-5: 238.1818 58.5799% 33.1373%;
+  --sidebar: 228 50% 7.8431%;
+  --sidebar-foreground: 235.5556 12.0000% 55.8824%;
+  --sidebar-primary: 270 50% 99.2157%;
+  --sidebar-primary-foreground: 231 50% 7.8431%;
+  --sidebar-accent: 235.5556 44.2623% 11.9608%;
+  --sidebar-accent-foreground: 270 50% 99.2157%;
+  --sidebar-border: 237.7778 44.2623% 11.9608%;
+  --sidebar-ring: 236.3636 58.5799% 33.1373%;
+  --font-sans: Bricolage Grotesque, ui-sans-serif, sans-serif, system-ui;
+  --font-serif: Georgia, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 1.25rem;
+  --shadow-x: 0px;
+  --shadow-y: 10px;
+  --shadow-blur: 20px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.5;
+  --shadow-color: 0, 0, 0;
+  --shadow-2xs: 0px 10px 20px 0px hsl(0, 0, 0 / 0.25);
+  --shadow-xs: 0px 10px 20px 0px hsl(0, 0, 0 / 0.25);
+  --shadow-sm: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 1px 2px -1px hsl(0, 0, 0 / 0.50);
+  --shadow: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 1px 2px -1px hsl(0, 0, 0 / 0.50);
+  --shadow-md: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 2px 4px -1px hsl(0, 0, 0 / 0.50);
+  --shadow-lg: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 4px 6px -1px hsl(0, 0, 0 / 0.50);
+  --shadow-xl: 0px 10px 20px 0px hsl(0, 0, 0 / 0.50), 0px 8px 10px -1px hsl(0, 0, 0 / 0.50);
+  --shadow-2xl: 0px 10px 20px 0px hsl(0, 0, 0 / 1.25);
 }