app.py

import gradio as gr

# ============================================================
# 🎨 18가지 비주얼 스타일 Gradio 데모 (최종 통합)
# ============================================================
# 원래 13개: Pop Art, Glassmorphism, Neumorphism, Claymorphism,
#           Aurora, Liquid Metal, Paper Cut, Holographic,
#           Frosted Crystal, Soft Neon, CRT Terminal, Origami, Bioluminescence
# 추가 5개: Ink Wash, Soap Bubble, Chalkboard, Pixel Art, Candy Pop
# ============================================================

# ============================================================
# 각 스타일별 CSS 코드 및 설정값 정의
# ============================================================

STYLE_CODES = {
    "POP_ART": """
/* ═══════════════════════════════════════════════════════════
   🦸 POP ART / COMIC 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --pop-red: #FF6B6B;
    --pop-yellow: #FFE66D;
    --pop-cyan: #4ECDC4;
    --pop-blue: #45B7D1;
    --pop-black: #000000;
    --pop-white: #FFFFFF;
}

/* 📍 벤데이 도트 패턴 배경 */
.popart-container {
    background: 
        radial-gradient(circle at 20% 20%, var(--pop-yellow) 2px, transparent 2px),
        radial-gradient(circle at 80% 40%, var(--pop-red) 2px, transparent 2px),
        radial-gradient(circle at 40% 80%, var(--pop-cyan) 2px, transparent 2px),
        var(--pop-white);
    background-size: 30px 30px, 40px 40px, 35px 35px, 100% 100%;
}

/* 🔲 굵은 윤곽선 박스 */
.comic-box {
    border: 4px solid var(--pop-black);
    box-shadow: 6px 6px 0 var(--pop-black);
    background: var(--pop-yellow);
}

/* 💬 말풍선 스타일 */
.speech-bubble {
    position: relative;
    background: var(--pop-white);
    border: 3px solid var(--pop-black);
    border-radius: 20px;
    padding: 15px;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 30px;
    border: 10px solid transparent;
    border-top-color: var(--pop-black);
}

/* ✨ 효과음 텍스트 */
.comic-effect {
    font-family: 'Bangers', cursive;
    font-size: 3rem;
    color: var(--pop-red);
    text-shadow: 
        4px 4px 0 var(--pop-black),
        -2px -2px 0 var(--pop-yellow);
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* 🎯 버튼 호버 효과 */
.comic-button {
    transition: all 0.1s ease;
}

.comic-button:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 var(--pop-black);
}

/* 📊 핵심 설정값 */
/*
 * 테두리: 4px solid black
 * 그림자: 6px 6px 0 (하드 쉐도우)
 * 도트 크기: 2px
 * 도트 간격: 30-40px
 * 폰트: Bangers (Google Fonts)
 * 호버: translate(3px, 3px)
 */
""",

    "GLASSMORPHISM": """
/* ═══════════════════════════════════════════════════════════
   🪟 GLASSMORPHISM 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --glass-bg-start: #667eea;
    --glass-bg-mid: #764ba2;
    --glass-bg-end: #f093fb;
    --glass-white: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.3);
}

/* 🌈 그라데이션 배경 */
.glass-container {
    background: linear-gradient(
        135deg,
        var(--glass-bg-start) 0%,
        var(--glass-bg-mid) 50%,
        var(--glass-bg-end) 100%
    );
}

/* 🔲 유리 효과 카드 */
.glass-card {
    background: var(--glass-white);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ✨ 유리 버튼 */
.glass-button {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    color: #fff;
    padding: 15px 50px;
    transition: all 0.3s ease;
}

.glass-button:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 💡 빛 반사 효과 */
.glass-highlight {
    position: relative;
}

.glass-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.2) 0%,
        transparent 100%
    );
    border-radius: 20px 20px 0 0;
    pointer-events: none;
}

/* 📊 핵심 설정값 */
/*
 * 블러: backdrop-filter: blur(20px)
 * 투명도: rgba(255,255,255, 0.15-0.25)
 * 테두리: 1px solid rgba(255,255,255,0.3)
 * 라운드: border-radius: 20px
 * 그림자: 0 8px 32px rgba(0,0,0,0.1)
 */
""",

    "NEUMORPHISM": """
/* ═══════════════════════════════════════════════════════════
   🔘 NEUMORPHISM 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --neu-bg: #e0e5ec;
    --neu-shadow-dark: #b8bec5;
    --neu-shadow-light: #ffffff;
    --neu-text: #6d7b8d;
    --neu-text-dark: #5a6677;
}

/* 📦 기본 배경 */
.neu-container {
    background: var(--neu-bg);
}

/* 🔲 볼록 효과 (Raised) */
.neu-raised {
    background: var(--neu-bg);
    border-radius: 20px;
    box-shadow: 
        8px 8px 16px var(--neu-shadow-dark),
        -8px -8px 16px var(--neu-shadow-light);
}

/* 🔳 오목 효과 (Inset/Pressed) */
.neu-inset {
    background: var(--neu-bg);
    border-radius: 15px;
    box-shadow: 
        inset 6px 6px 12px var(--neu-shadow-dark),
        inset -6px -6px 12px var(--neu-shadow-light);
}

/* 🔘 버튼 스타일 */
.neu-button {
    background: var(--neu-bg);
    border: none;
    border-radius: 50px;
    padding: 18px 50px;
    color: var(--neu-text);
    font-weight: 700;
    box-shadow: 
        8px 8px 16px var(--neu-shadow-dark),
        -8px -8px 16px var(--neu-shadow-light);
    transition: all 0.2s ease;
}

.neu-button:hover {
    box-shadow: 
        4px 4px 8px var(--neu-shadow-dark),
        -4px -4px 8px var(--neu-shadow-light);
}

.neu-button:active {
    box-shadow: 
        inset 4px 4px 8px var(--neu-shadow-dark),
        inset -4px -4px 8px var(--neu-shadow-light);
}

/* 📝 텍스트 스타일 */
.neu-text {
    color: var(--neu-text);
    text-shadow: 
        2px 2px 4px var(--neu-shadow-light),
        -1px -1px 3px rgba(0,0,0,0.1);
}

/* 📊 핵심 설정값 */
/*
 * 베이스 색상: #e0e5ec
 * 어두운 그림자: #b8bec5
 * 밝은 그림자: #ffffff
 * 그림자 거리: 8px (볼록), 6px (오목)
 * 블러: 16px (볼록), 12px (오목)
 * 라운드: 15-50px
 */
""",

    "CLAYMORPHISM": """
/* ═══════════════════════════════════════════════════════════
   🧸 CLAYMORPHISM 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --clay-bg-start: #ffecd2;
    --clay-bg-end: #fcb69f;
    --clay-surface: #f8b595;
    --clay-shadow: rgba(180, 100, 60, 0.4);
    --clay-highlight: rgba(255, 255, 255, 0.7);
    --clay-text: #7f3300;
}

/* 🎨 그라데이션 배경 */
.clay-container {
    background: linear-gradient(
        145deg,
        var(--clay-bg-start) 0%,
        var(--clay-bg-end) 100%
    );
}

/* 🔲 클레이 카드 (3D 점토 느낌) */
.clay-card {
    background: var(--clay-surface);
    border: none;
    border-radius: 30px;
    box-shadow: 
        12px 12px 24px var(--clay-shadow),
        -8px -8px 20px var(--clay-highlight),
        inset 2px 2px 6px rgba(255, 255, 255, 0.6),
        inset -2px -2px 6px rgba(180, 100, 60, 0.2);
}

/* 🔘 클레이 버튼 */
.clay-button {
    background: linear-gradient(145deg, #ff9a6c, #e07b4c);
    border: none;
    border-radius: 50px;
    padding: 18px 55px;
    color: #fff;
    font-weight: 600;
    box-shadow: 
        10px 10px 20px var(--clay-shadow),
        -6px -6px 15px var(--clay-highlight),
        inset 2px 2px 4px rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
}

.clay-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        14px 14px 28px var(--clay-shadow),
        -8px -8px 20px var(--clay-highlight),
        inset 2px 2px 4px rgba(255, 255, 255, 0.4);
}

/* 📊 핵심 설정값 */
/*
 * 베이스: 따뜻한 파스텔 (피치, 코랄)
 * 라운드: 30-50px (더 둥글게)
 * 외부 그림자: 12px 거리, 24px 블러
 * 내부 하이라이트: inset 2px 2px
 * 호버: scale(1.02) 추가
 */
""",

    "AURORA": """
/* ═══════════════════════════════════════════════════════════
   🌌 AURORA BOREALIS 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --aurora-green: rgba(0, 255, 150, 0.3);
    --aurora-purple: rgba(100, 0, 255, 0.25);
    --aurora-cyan: rgba(0, 200, 255, 0.3);
    --aurora-pink: rgba(255, 0, 150, 0.15);
    --aurora-bg: #0a0a20;
}

/* 🌌 배경 */
.aurora-container {
    background: linear-gradient(
        180deg,
        #0a0a20 0%,
        #1a0a30 50%,
        #0a1a25 100%
    );
    position: relative;
    overflow: hidden;
}

/* 🌈 오로라 효과 레이어 */
.aurora-layer {
    position: absolute;
    top: 0;
    left: -50%;
    right: -50%;
    bottom: 50%;
    background: 
        radial-gradient(ellipse at 30% 80%, var(--aurora-green) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 70%, var(--aurora-purple) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 85%, var(--aurora-cyan) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 60%, var(--aurora-pink) 0%, transparent 40%);
    filter: blur(40px);
    animation: aurora-flow 8s ease-in-out infinite;
}

@keyframes aurora-flow {
    0%, 100% { 
        transform: translateX(0) translateY(0) scale(1); 
    }
    25% { 
        transform: translateX(5%) translateY(-5%) scale(1.05); 
    }
    50% { 
        transform: translateX(-3%) translateY(3%) scale(0.98); 
    }
    75% { 
        transform: translateX(3%) translateY(-3%) scale(1.02); 
    }
}

/* ✨ 텍스트 그라데이션 */
.aurora-text {
    background: linear-gradient(
        90deg,
        #00ff88, #00ccff, #cc00ff, #00ff88
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: aurora-text-flow 6s linear infinite;
}

@keyframes aurora-text-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* 📊 핵심 설정값 */
/*
 * 배경: #0a0a20 (딥 네이비)
 * 오로라 블러: 40px
 * 색상: 그린, 시안, 퍼플, 핑크
 * 애니메이션: 8초 주기 흐름
 * 텍스트: 그라데이션 애니메이션
 */
""",

    "LIQUID_METAL": """
/* ═══════════════════════════════════════════════════════════
   🪞 LIQUID METAL 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --metal-dark: #2c3e50;
    --metal-bg: #1a1a2e;
    --metal-silver-1: #c0c0c0;
    --metal-silver-2: #f8f8f8;
    --metal-silver-3: #a0a0a0;
}

/* 🔲 메탈 배경 */
.metal-container {
    background: linear-gradient(
        135deg,
        var(--metal-dark) 0%,
        var(--metal-bg) 50%,
        var(--metal-dark) 100%
    );
}

/* ✨ 메탈 텍스트 */
.metal-text {
    background: linear-gradient(
        135deg, 
        #c0c0c0 0%, 
        #f8f8f8 20%, 
        #a0a0a0 40%, 
        #f0f0f0 60%, 
        #c0c0c0 80%,
        #e0e0e0 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: metal-shine 4s linear infinite;
}

@keyframes metal-shine {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 🔘 메탈 버튼 */
.metal-button {
    background: linear-gradient(
        135deg, 
        #707080 0%, 
        #b0b0c0 25%, 
        #606070 50%, 
        #c0c0d0 75%, 
        #707080 100%
    );
    background-size: 200% 200%;
    border: 2px solid rgba(200, 200, 220, 0.5);
    color: #1a1a2a;
    animation: metal-shine 3s linear infinite;
}

/* 📊 핵심 설정값 */
/*
 * 베이스: #1a1a2e (다크)
 * 메탈: #c0c0c0 ~ #f8f8f8 그라데이션
 * 애니메이션: 3-4초 shine 효과
 * 테두리: 메탈릭 실버
 */
""",

    "PAPER_CUT": """
/* ═══════════════════════════════════════════════════════════
   📄 PAPER CUT / LAYERED 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --paper-bg: #f5f5f0;
    --paper-white: #ffffff;
    --paper-cream: #f8f8f5;
    --paper-shadow: rgba(0, 0, 0, 0.08);
    --paper-text: #5d4e37;
    --paper-border: #e0ddd5;
}

/* 📜 배경 */
.paper-container {
    background: linear-gradient(
        180deg,
        var(--paper-bg) 0%,
        #ebebdf 100%
    );
}

/* 📄 레이어드 카드 */
.paper-card {
    background: var(--paper-white);
    border-radius: 4px;
    position: relative;
    box-shadow: 
        0 1px 1px var(--paper-shadow),
        0 2px 2px var(--paper-shadow),
        0 4px 4px var(--paper-shadow),
        0 8px 8px var(--paper-shadow),
        0 16px 16px var(--paper-shadow);
}

/* 📑 겹친 종이 효과 */
.paper-stack::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 8px;
    right: 8px;
    height: 100%;
    background: #f8f8f5;
    border-radius: 4px;
    z-index: -1;
    box-shadow: 0 2px 4px var(--paper-shadow);
}

.paper-stack::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 14px;
    right: 14px;
    height: 100%;
    background: #f0f0eb;
    border-radius: 4px;
    z-index: -2;
}

/* 📊 핵심 설정값 */
/*
 * 베이스: #f5f5f0 (크림 화이트)
 * 그림자: 다단계 (1px, 2px, 4px, 8px, 16px)
 * 레이어 간격: 8px, 14px
 * 라운드: 4px (작은 값)
 */
""",

    "HOLOGRAPHIC": """
/* ═══════════════════════════════════════════════════════════
   🌈 HOLOGRAPHIC IRIDESCENT 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --holo-pink: #ff0080;
    --holo-orange: #ff8c00;
    --holo-yellow: #ffff00;
    --holo-green: #00ff80;
    --holo-cyan: #00ffff;
    --holo-blue: #0080ff;
    --holo-purple: #8000ff;
}

/* 🌌 배경 */
.holo-container {
    background: linear-gradient(
        135deg,
        #1a1a2e 0%,
        #16213e 100%
    );
    position: relative;
    overflow: hidden;
}

/* 🌈 회전 무지개 배경 */
.holo-bg-rotate::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: conic-gradient(
        from 0deg,
        var(--holo-pink), 
        var(--holo-orange), 
        var(--holo-yellow), 
        var(--holo-green), 
        var(--holo-cyan), 
        var(--holo-blue),
        var(--holo-purple), 
        var(--holo-pink)
    );
    opacity: 0.15;
    animation: holo-rotate 10s linear infinite;
}

@keyframes holo-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ✨ 홀로그래픽 텍스트 */
.holo-text {
    background: linear-gradient(
        90deg,
        var(--holo-pink), var(--holo-orange), var(--holo-yellow), 
        var(--holo-green), var(--holo-cyan), var(--holo-purple), var(--holo-pink)
    );
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: holo-shift 5s linear infinite;
}

@keyframes holo-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* 📊 핵심 설정값 */
/*
 * 배경: conic-gradient (원형 무지개)
 * 회전: 10초 주기
 * 텍스트: 400% 이동 애니메이션
 * 투명도: 0.15 (배경), 1.0 (텍스트)
 */
""",

    "FROSTED_CRYSTAL": """
/* ═══════════════════════════════════════════════════════════
   ❄️ FROSTED CRYSTAL 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --frost-bg-top: #e8f4fc;
    --frost-bg-mid: #c5dff8;
    --frost-bg-bottom: #a8d4f0;
    --frost-white: rgba(255, 255, 255, 0.4);
    --frost-border: rgba(255, 255, 255, 0.6);
    --frost-text: #4a7c9b;
    --frost-glow: rgba(200, 230, 255, 0.3);
}

/* ❄️ 배경 */
.frost-container {
    background: linear-gradient(
        180deg,
        var(--frost-bg-top) 0%,
        var(--frost-bg-mid) 50%,
        var(--frost-bg-bottom) 100%
    );
}

/* 🔲 프로스트 카드 */
.frost-card {
    background: var(--frost-white);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--frost-border);
    border-radius: 20px;
    box-shadow: 
        inset 0 0 30px rgba(255, 255, 255, 0.5),
        0 8px 32px rgba(100, 150, 200, 0.2);
}

/* 🔘 프로스트 버튼 */
.frost-button {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    color: var(--frost-text);
    box-shadow: 
        0 8px 32px rgba(100, 150, 200, 0.3),
        inset 0 2px 10px rgba(255, 255, 255, 0.8);
}

/* 📊 핵심 설정값 */
/*
 * 블러: blur(20px) saturate(180%)
 * 배경: rgba(255,255,255,0.4-0.6)
 * 내부 글로우: inset 0 0 30px
 * 색상: 차가운 블루 계열
 */
""",

    "SOFT_NEON": """
/* ═══════════════════════════════════════════════════════════
   💡 SOFT NEON GLOW 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --neon-pink: #ffb6c1;
    --neon-mint: #98fb98;
    --neon-lavender: #dda0dd;
    --neon-aqua: #b0e0e6;
    --neon-bg: #1a1a2e;
}

/* 🌙 배경 */
.softneon-container {
    background: linear-gradient(
        135deg,
        var(--neon-bg) 0%,
        #0f0f1a 100%
    );
}

/* ✨ 소프트 글로우 텍스트 */
.softneon-text {
    color: var(--neon-pink);
    text-shadow: 
        0 0 10px rgba(255, 182, 193, 0.5),
        0 0 20px rgba(255, 182, 193, 0.3),
        0 0 40px rgba(255, 182, 193, 0.2);
}

/* 🔲 소프트 네온 카드 */
.softneon-card {
    background: rgba(255, 182, 193, 0.08);
    border: 1px solid rgba(255, 182, 193, 0.2);
    border-radius: 20px;
    box-shadow: 
        0 0 20px rgba(255, 182, 193, 0.1),
        inset 0 0 20px rgba(255, 182, 193, 0.05);
}

/* 🔘 소프트 네온 버튼 */
.softneon-button {
    background: rgba(30, 30, 50, 0.8);
    border: 2px solid rgba(221, 160, 221, 0.5);
    border-radius: 50px;
    color: var(--neon-lavender);
    box-shadow: 
        0 0 20px rgba(221, 160, 221, 0.2),
        0 0 40px rgba(221, 160, 221, 0.1);
    transition: all 0.4s ease;
}

.softneon-button:hover {
    box-shadow: 
        0 0 30px rgba(221, 160, 221, 0.4),
        0 0 60px rgba(221, 160, 221, 0.2),
        0 0 90px rgba(221, 160, 221, 0.1);
}

/* 📊 핵심 설정값 */
/*
 * 글로우 단계: 10px, 20px, 40px
 * 투명도: 0.5, 0.3, 0.2 (점점 감소)
 * 색상: 파스텔 네온 (핑크, 민트, 라벤더)
 * 호버: 글로우 강도 2배
 */
""",

    "CRT_TERMINAL": """
/* ═══════════════════════════════════════════════════════════
   🖥️ RETRO CRT TERMINAL 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --crt-bg: #0a0a0a;
    --crt-green: #33ff33;
    --crt-green-dark: #00aa00;
    --crt-amber: #ffb000;
    --crt-scanline: rgba(0, 0, 0, 0.3);
}

/* 🖥️ CRT 배경 */
.crt-container {
    background: var(--crt-bg);
    position: relative;
}

/* 📺 스캔라인 오버레이 */
.crt-scanlines::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        var(--crt-scanline) 2px,
        var(--crt-scanline) 4px
    );
    pointer-events: none;
}

/* 🔲 비네트 효과 */
.crt-vignette::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(0,0,0,0.4) 100%
    );
    pointer-events: none;
}

/* ✨ 인광 텍스트 */
.crt-text {
    font-family: 'VT323', monospace;
    color: var(--crt-green);
    text-shadow: 
        0 0 5px var(--crt-green),
        0 0 10px var(--crt-green),
        0 0 20px var(--crt-green),
        0 0 40px var(--crt-green-dark);
    animation: crt-flicker 0.1s infinite;
}

@keyframes crt-flicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 0.95; }
    94% { opacity: 1; }
    97% { opacity: 0.9; }
}

/* 📊 핵심 설정값 */
/*
 * 배경: #0a0a0a (순수 블랙)
 * 인광색: #33ff33 (그린) 또는 #ffb000 (앰버)
 * 스캔라인: 2px 간격
 * 글로우: 4단계 (5px, 10px, 20px, 40px)
 * 플리커: 0.1초 간격
 */
""",

    "ORIGAMI": """
/* ═══════════════════════════════════════════════════════════
   🦢 ORIGAMI / GEOMETRIC FOLD 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --origami-bg: #f0f0f0;
    --origami-light: #ffffff;
    --origami-mid: #f8f8f8;
    --origami-dark: #e8e8e8;
    --origami-darker: #d0d0d0;
    --origami-text: #4a4a5a;
}

/* 📐 배경 */
.origami-container {
    background: linear-gradient(
        135deg,
        var(--origami-bg) 0%,
        var(--origami-dark) 100%
    );
}

/* 🔺 접힌 카드 */
.origami-card {
    background: linear-gradient(
        135deg,
        var(--origami-light) 0%,
        var(--origami-mid) 50%,
        var(--origami-dark) 50%,
        var(--origami-darker) 100%
    );
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - 20px), 
        calc(100% - 20px) 100%, 
        0 100%
    );
    box-shadow: 
        4px 4px 0 rgba(0,0,0,0.1),
        8px 8px 0 rgba(0,0,0,0.05);
}

/* 🔷 기하학 버튼 */
.origami-button {
    background: linear-gradient(
        135deg,
        #5a5a6a 0%,
        #4a4a5a 50%,
        #3a3a4a 50%,
        #2a2a3a 100%
    );
    clip-path: polygon(
        15px 0, 
        100% 0, 
        100% calc(100% - 15px), 
        calc(100% - 15px) 100%, 
        0 100%, 
        0 15px
    );
    color: #fff;
}

/* 📊 핵심 설정값 */
/*
 * 그라데이션: 50%에서 색상 분리 (접힌 효과)
 * clip-path: polygon()으로 모서리 컷
 * 그림자: 하드 쉐도우 (4px, 8px)
 * 색상: 접힌 면 명암 차이
 */
""",

    "BIOLUMINESCENCE": """
/* ═══════════════════════════════════════════════════════════
   🦑 BIOLUMINESCENCE 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --bio-bg: #000810;
    --bio-cyan: rgba(0, 255, 200, 0.3);
    --bio-blue: rgba(100, 200, 255, 0.2);
    --bio-purple: rgba(150, 100, 255, 0.2);
    --bio-text-cyan: #00ffc8;
    --bio-text-blue: #a0e0ff;
}

/* 🌊 심해 배경 */
.bio-container {
    background: linear-gradient(
        180deg,
        var(--bio-bg) 0%,
        #001020 50%,
        #000815 100%
    );
    position: relative;
}

/* 🔮 발광 오브 */
.bio-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    animation: bio-float 6s ease-in-out infinite;
}

.bio-orb-cyan {
    background: radial-gradient(
        ellipse,
        var(--bio-cyan) 0%,
        transparent 70%
    );
}

@keyframes bio-float {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    50% { 
        transform: translate(30px, -20px) scale(1.2);
        opacity: 1;
    }
}

/* ✨ 발광 텍스트 */
.bio-text {
    color: var(--bio-text-cyan);
    text-shadow: 
        0 0 10px rgba(0, 255, 200, 0.7),
        0 0 20px rgba(0, 255, 200, 0.5),
        0 0 40px rgba(0, 255, 200, 0.3);
    animation: bio-pulse 3s ease-in-out infinite;
}

@keyframes bio-pulse {
    0%, 100% { 
        text-shadow: 
            0 0 10px rgba(0,255,200,0.7), 
            0 0 20px rgba(0,255,200,0.5);
    }
    50% { 
        text-shadow: 
            0 0 20px rgba(0,255,200,0.9), 
            0 0 40px rgba(0,255,200,0.7), 
            0 0 60px rgba(0,255,200,0.4);
    }
}

/* 📊 핵심 설정값 */
/*
 * 배경: #000810 (거의 블랙)
 * 발광색: 시안, 블루, 퍼플
 * 오브 블러: 30px
 * 펄스: 3초 주기
 * 플로트: 6초 주기
 */
""",

    "INK_WASH": """
/* ═══════════════════════════════════════════════════════════
   🖌️ INK WASH / SUMI-E (수묵화) 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --ink-black: #1a1a1a;
    --ink-dark: #2d2d2d;
    --ink-medium: #5a5a5a;
    --ink-light: #8a8a8a;
    --ink-wash: #b5b5b5;
    --paper-cream: #f5f2e8;
    --paper-warm: #ebe6d6;
    --accent-vermillion: #c73e1d;
    --accent-gold: #b8860b;
}

/* 📜 한지 배경 */
.ink-container {
    background: 
        radial-gradient(ellipse at 20% 10%, 
            rgba(26, 26, 26, 0.15) 0%, 
            transparent 50%),
        radial-gradient(ellipse at 80% 90%, 
            rgba(45, 45, 45, 0.1) 0%, 
            transparent 40%),
        var(--paper-cream);
}

/* 🖌️ 붓터치 보더 */
.ink-border {
    border: none;
    border-left: 4px solid var(--ink-black);
    border-image: linear-gradient(
        to bottom,
        transparent 0%,
        var(--ink-black) 10%,
        var(--ink-dark) 50%,
        var(--ink-medium) 80%,
        transparent 100%
    ) 1;
}

/* 💧 먹물 번짐 애니메이션 */
@keyframes ink-spread {
    0% { filter: blur(0px); opacity: 0.8; }
    50% { filter: blur(8px); opacity: 0.4; }
    100% { filter: blur(4px); opacity: 0.6; }
}

/* 🔴 낙관 스타일 */
.ink-stamp {
    background: var(--accent-vermillion);
    color: var(--paper-cream);
    padding: 8px 12px;
    border-radius: 4px;
}

/* 📊 핵심 설정값 */
/*
 * 여백 비율: 콘텐츠 40% / 여백 60%
 * 그라데이션 블러: 4-8px
 * 폰트: Noto Serif KR
 * 색상: 흑백 모노톤 + 주홍 악센트
 */
""",

    "SOAP_BUBBLE": """
/* ═══════════════════════════════════════════════════════════
   🫧 SOAP BUBBLE (비눗방울) 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --bubble-pink: rgba(255, 150, 200, 0.3);
    --bubble-cyan: rgba(100, 255, 255, 0.3);
    --bubble-yellow: rgba(255, 255, 150, 0.3);
    --bubble-purple: rgba(200, 150, 255, 0.3);
    --bubble-green: rgba(150, 255, 200, 0.3);
    --surface-shine: rgba(255, 255, 255, 0.8);
}

/* 🌈 배경 */
.bubble-container {
    background: linear-gradient(
        135deg,
        #e8f4ff 0%,
        #f5e8ff 50%,
        #e8fff4 100%
    );
}

/* 🫧 비눗방울 */
.bubble {
    border-radius: 50%;
    background: conic-gradient(
        from 0deg at 30% 30%,
        var(--bubble-pink),
        var(--bubble-cyan),
        var(--bubble-yellow),
        var(--bubble-purple),
        var(--bubble-green),
        var(--bubble-pink)
    );
    opacity: 0.8;
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        inset 10px 10px 30px var(--surface-shine),
        0 10px 40px rgba(100, 150, 255, 0.2);
}

/* 🌊 떠다니는 애니메이션 */
@keyframes bubble-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.02); }
}

/* 🎨 색상 시프트 */
@keyframes iridescent-shift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* 📊 핵심 설정값 */
/*
 * 형태: border-radius: 50%
 * 색상: conic-gradient (무지개)
 * 블러: backdrop-filter: blur(2px)
 * 애니메이션: 6초 float, 10초 hue-rotate
 */
""",

    "CHALKBOARD": """
/* ═══════════════════════════════════════════════════════════
   📝 CHALKBOARD (칠판) 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --board-green: #2a4a2a;
    --board-dark: #1e3a1e;
    --chalk-white: #f0f0e8;
    --chalk-yellow: #f5e6a3;
    --chalk-pink: #f0a0a0;
    --wood-frame: #5c4033;
}

/* 📗 칠판 배경 */
.chalk-container {
    background: linear-gradient(180deg, 
        var(--board-dark) 0%, 
        var(--board-green) 50%, 
        var(--board-dark) 100%);
    border: 15px solid var(--wood-frame);
    box-shadow: 
        inset 0 0 50px rgba(0,0,0,0.4),
        0 10px 30px rgba(0,0,0,0.3);
}

/* ✏️ 분필 텍스트 */
.chalk-text {
    font-family: 'Gaegu', cursive;
    color: var(--chalk-white);
    text-shadow:
        0 0 5px rgba(240, 240, 232, 0.8),
        0 0 10px rgba(240, 240, 232, 0.4);
}

/* 📊 핵심 설정값 */
/*
 * 칠판: #2a4a2a (다크 그린)
 * 분필: #f0f0e8 (크림 화이트)
 * 프레임: #5c4033, 15px 두께
 * 폰트: Gaegu (손글씨)
 */
""",

    "PIXEL_ART": """
/* ═══════════════════════════════════════════════════════════
   👾 PIXEL ART (픽셀아트) 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 16색 팔레트 */
:root {
    --pixel-black: #000000;
    --pixel-dark-blue: #1d2b53;
    --pixel-purple: #7e2553;
    --pixel-dark-green: #008751;
    --pixel-brown: #ab5236;
    --pixel-dark-gray: #5f574f;
    --pixel-light-gray: #c2c3c7;
    --pixel-white: #fff1e8;
    --pixel-red: #ff004d;
    --pixel-orange: #ffa300;
    --pixel-yellow: #ffec27;
    --pixel-green: #00e436;
    --pixel-blue: #29adff;
    --pixel-indigo: #83769c;
    --pixel-pink: #ff77a8;
    --pixel-peach: #ffccaa;
}

/* 🎮 픽셀 배경 */
.pixel-container {
    background-color: var(--pixel-dark-blue);
    image-rendering: pixelated;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 4px 4px;
}

/* 🔲 픽셀 박스 */
.pixel-box {
    border: 4px solid var(--pixel-black);
    box-shadow: 4px 4px 0 var(--pixel-black);
}

/* 📝 픽셀 폰트 */
.pixel-text {
    font-family: 'Press Start 2P', monospace;
    text-shadow: 2px 2px 0 var(--pixel-black);
}

/* 📊 핵심 설정값 */
/*
 * 렌더링: image-rendering: pixelated
 * 그리드: 4px 단위
 * 팔레트: 16색 제한
 * 그림자: 하드 쉐도우 (blur 없음)
 * 폰트: Press Start 2P
 */
""",

    "CANDY_POP": """
/* ═══════════════════════════════════════════════════════════
   🍬 CANDY POP (캔디팝) 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --candy-pink: #ff9ec4;
    --candy-mint: #98e8c1;
    --candy-lavender: #c4b5fd;
    --candy-peach: #ffc09f;
    --candy-yellow: #fcf6bd;
    --candy-blue: #a0e7e5;
    --candy-coral: #ff8fab;
}

/* 🍭 캔디 배경 */
.candy-container {
    background: linear-gradient(
        135deg,
        var(--candy-pink) 0%,
        var(--candy-lavender) 25%,
        var(--candy-blue) 50%,
        var(--candy-mint) 75%,
        var(--candy-yellow) 100%
    );
    background-size: 400% 400%;
    animation: candy-gradient 10s ease infinite;
}

@keyframes candy-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 🔮 캔디 버튼 */
.candy-button {
    background: linear-gradient(145deg, var(--candy-pink), var(--candy-coral));
    border-radius: 50px;
    box-shadow:
        inset 0 -8px 20px rgba(0,0,0,0.1),
        inset 0 8px 20px rgba(255,255,255,0.6),
        0 15px 35px rgba(255, 158, 196, 0.4);
}

/* ✨ 광택 하이라이트 */
.candy-shine::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 15%;
    width: 70%;
    height: 30%;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.8) 0%,
        transparent 100%
    );
    border-radius: 50%;
}

/* 📊 핵심 설정값 */
/*
 * 색상: 고채도 파스텔 (70-90%)
 * 라운드: 25-50px
 * 광택: inset shadow (위 밝음, 아래 어두움)
 * 하이라이트: 30% 높이 상단
 * 애니메이션: 10초 gradient shift
 */
"""
}

# ============================================================
# CSS 스타일 정의
# ============================================================

MAIN_CSS = """
/* ========== 폰트 임포트 ========== */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Poppins:wght@300;400;600&family=Nunito:wght@400;700&family=Quicksand:wght@400;600;700&family=Orbitron:wght@400;700&family=Share+Tech+Mono&family=VT323&family=Rajdhani:wght@400;600;700&family=Fredoka:wght@400;500;600&family=Noto+Serif+KR:wght@400;700&family=Gaegu:wght@400;700&family=Press+Start+2P&display=swap');

/* ========== 공통 ========== */
.gradio-container { max-width: 100% !important; }
.code-output textarea {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    white-space: pre !important;
}

/* ========== 1. POP ART ========== */
#tab-popart {
    background: radial-gradient(circle at 20% 20%, #FFE66D 2px, transparent 2px),
                radial-gradient(circle at 80% 40%, #FF6B6B 2px, transparent 2px),
                radial-gradient(circle at 40% 80%, #4ECDC4 2px, transparent 2px), #FFF !important;
    background-size: 30px 30px, 40px 40px, 35px 35px, 100% 100%;
    padding: 30px !important;
    border: 5px solid #000 !important;
}
#tab-popart .style-title { font-family: 'Bangers', cursive !important; font-size: 2.8rem !important; color: #FF6B6B !important; text-shadow: 4px 4px 0 #000, -2px -2px 0 #FFE66D !important; }
#tab-popart .style-desc { background: #FFE66D !important; border: 4px solid #000 !important; padding: 15px !important; box-shadow: 6px 6px 0 #000 !important; }
#tab-popart .input-box textarea { border: 4px solid #000 !important; background: #FFF !important; box-shadow: 5px 5px 0 #FF6B6B !important; }
#tab-popart .generate-btn { background: #FF6B6B !important; border: 4px solid #000 !important; color: #FFF !important; font-family: 'Bangers', cursive !important; font-size: 1.4rem !important; box-shadow: 6px 6px 0 #000 !important; }
#tab-popart .generate-btn:hover { transform: translate(3px, 3px) !important; box-shadow: 3px 3px 0 #000 !important; }
#tab-popart .code-output { border: 4px solid #000 !important; background: #4ECDC4 !important; box-shadow: 6px 6px 0 #000 !important; }
#tab-popart .code-output textarea { color: #000 !important; background: transparent !important; }

/* ========== 2. GLASSMORPHISM ========== */
#tab-glass {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
    padding: 30px !important;
}
#tab-glass .style-title { font-family: 'Poppins', sans-serif !important; font-size: 2.5rem !important; font-weight: 300 !important; color: #fff !important; }
#tab-glass .style-desc { background: rgba(255,255,255,0.15) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 20px !important; padding: 20px !important; color: #fff !important; }
#tab-glass .input-box textarea { background: rgba(255,255,255,0.2) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 15px !important; color: #fff !important; }
#tab-glass .generate-btn { background: rgba(255,255,255,0.25) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255,255,255,0.4) !important; border-radius: 50px !important; color: #fff !important; }
#tab-glass .generate-btn:hover { background: rgba(255,255,255,0.35) !important; transform: translateY(-3px) !important; }
#tab-glass .code-output { background: rgba(255,255,255,0.15) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 20px !important; }
#tab-glass .code-output textarea { color: #fff !important; background: transparent !important; }

/* ========== 3. NEUMORPHISM ========== */
#tab-neumorph {
    background: #e0e5ec !important;
    padding: 35px !important;
}
#tab-neumorph .style-title { font-family: 'Nunito', sans-serif !important; font-size: 2.5rem !important; font-weight: 700 !important; color: #6d7b8d !important; text-shadow: 2px 2px 4px #fff, -1px -1px 3px rgba(0,0,0,0.1) !important; }
#tab-neumorph .style-desc { background: #e0e5ec !important; border-radius: 20px !important; padding: 20px !important; color: #6d7b8d !important; box-shadow: 8px 8px 16px #b8bec5, -8px -8px 16px #fff !important; }
#tab-neumorph .input-box textarea { background: #e0e5ec !important; border: none !important; border-radius: 15px !important; color: #5a6677 !important; box-shadow: inset 6px 6px 12px #b8bec5, inset -6px -6px 12px #fff !important; }
#tab-neumorph .generate-btn { background: #e0e5ec !important; border: none !important; border-radius: 50px !important; color: #6d7b8d !important; font-weight: 700 !important; box-shadow: 8px 8px 16px #b8bec5, -8px -8px 16px #fff !important; }
#tab-neumorph .generate-btn:hover { box-shadow: 4px 4px 8px #b8bec5, -4px -4px 8px #fff !important; }
#tab-neumorph .code-output { background: #e0e5ec !important; border-radius: 20px !important; box-shadow: 8px 8px 16px #b8bec5, -8px -8px 16px #fff !important; }
#tab-neumorph .code-output textarea { color: #5a6677 !important; background: transparent !important; }

/* ========== 4. CLAYMORPHISM ========== */
#tab-clay {
    background: linear-gradient(145deg, #ffecd2 0%, #fcb69f 100%) !important;
    padding: 35px !important;
}
#tab-clay .style-title { font-family: 'Fredoka', sans-serif !important; font-size: 2.6rem !important; font-weight: 600 !important; color: #d35400 !important; }
#tab-clay .style-desc { background: #f8b595 !important; border-radius: 30px !important; padding: 25px !important; color: #7f3300 !important; box-shadow: 12px 12px 24px rgba(180,100,60,0.4), -8px -8px 20px rgba(255,255,255,0.7), inset 2px 2px 6px rgba(255,255,255,0.6) !important; }
#tab-clay .input-box textarea { background: #ffe4d4 !important; border: none !important; border-radius: 25px !important; color: #7f3300 !important; box-shadow: inset 8px 8px 16px rgba(180,100,60,0.2), inset -8px -8px 16px rgba(255,255,255,0.9) !important; }
#tab-clay .generate-btn { background: linear-gradient(145deg, #ff9a6c, #e07b4c) !important; border: none !important; border-radius: 50px !important; color: #fff !important; font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important; box-shadow: 10px 10px 20px rgba(180,100,60,0.4), -6px -6px 15px rgba(255,255,255,0.6) !important; }
#tab-clay .generate-btn:hover { transform: translateY(-3px) scale(1.02) !important; }
#tab-clay .code-output { background: #ffd9c4 !important; border-radius: 30px !important; box-shadow: 12px 12px 24px rgba(180,100,60,0.35), -8px -8px 20px rgba(255,255,255,0.8) !important; }
#tab-clay .code-output textarea { color: #7f3300 !important; background: transparent !important; }

/* ========== 5. AURORA ========== */
#tab-aurora {
    background: linear-gradient(180deg, #0a0a20 0%, #1a0a30 50%, #0a1a25 100%) !important;
    padding: 30px !important;
    position: relative;
    overflow: hidden;
}
#tab-aurora::before {
    content: '';
    position: absolute;
    top: 0; left: -50%; right: -50%; bottom: 50%;
    background: radial-gradient(ellipse at 30% 80%, rgba(0,255,150,0.3) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 70%, rgba(100,0,255,0.25) 0%, transparent 45%),
                radial-gradient(ellipse at 70% 85%, rgba(0,200,255,0.3) 0%, transparent 50%);
    filter: blur(40px);
    animation: aurora-flow 8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes aurora-flow {
    0%, 100% { transform: translateX(0) translateY(0) scale(1); }
    50% { transform: translateX(-3%) translateY(3%) scale(1.05); }
}
#tab-aurora .style-title { font-family: 'Quicksand', sans-serif !important; font-size: 2.5rem !important; background: linear-gradient(90deg, #00ff88, #00ccff, #cc00ff, #00ff88) !important; background-size: 300% 100% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: aurora-text 6s linear infinite; position: relative; z-index: 10; }
@keyframes aurora-text { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
#tab-aurora .style-desc { background: rgba(0,255,150,0.08) !important; border: 1px solid rgba(0,255,150,0.3) !important; border-radius: 20px !important; padding: 20px !important; color: #a0ffcc !important; position: relative; z-index: 10; }
#tab-aurora .input-box textarea { background: rgba(10,20,30,0.8) !important; border: 1px solid rgba(0,200,255,0.3) !important; border-radius: 15px !important; color: #c0ffee !important; position: relative; z-index: 10; }
#tab-aurora .generate-btn { background: linear-gradient(135deg, rgba(0,255,150,0.3), rgba(0,200,255,0.3), rgba(200,0,255,0.3)) !important; border: 1px solid rgba(0,255,150,0.4) !important; border-radius: 30px !important; color: #fff !important; position: relative; z-index: 10; }
#tab-aurora .code-output { background: rgba(10,20,30,0.8) !important; border: 1px solid rgba(100,0,255,0.3) !important; border-radius: 20px !important; position: relative; z-index: 10; }
#tab-aurora .code-output textarea { color: #c0ffee !important; background: transparent !important; }

/* ========== 6. LIQUID METAL ========== */
#tab-metal {
    background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 50%, #2c3e50 100%) !important;
    padding: 30px !important;
}
#tab-metal .style-title { font-family: 'Orbitron', sans-serif !important; font-size: 2.3rem !important; background: linear-gradient(135deg, #c0c0c0 0%, #f8f8f8 20%, #a0a0a0 40%, #f0f0f0 60%, #c0c0c0 80%) !important; background-size: 200% 200% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: metal-shine 4s linear infinite; }
@keyframes metal-shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
#tab-metal .style-desc { background: linear-gradient(145deg, #3a3a4a, #2a2a3a) !important; border: 1px solid rgba(192,192,192,0.3) !important; border-radius: 15px !important; padding: 20px !important; color: #c0c0c0 !important; }
#tab-metal .input-box textarea { background: linear-gradient(145deg, #1a1a2a, #2a2a3a) !important; border: 1px solid rgba(192,192,192,0.2) !important; border-radius: 10px !important; color: #e0e0e0 !important; }
#tab-metal .generate-btn { background: linear-gradient(135deg, #707080 0%, #b0b0c0 25%, #606070 50%, #c0c0d0 75%, #707080 100%) !important; background-size: 200% 200% !important; border: 2px solid rgba(200,200,220,0.5) !important; border-radius: 10px !important; color: #1a1a2a !important; font-family: 'Orbitron', sans-serif !important; animation: metal-shine 3s linear infinite; }
#tab-metal .code-output { background: linear-gradient(145deg, #2a2a3a, #1a1a2a) !important; border: 1px solid rgba(192,192,192,0.2) !important; border-radius: 15px !important; }
#tab-metal .code-output textarea { color: #c0c0c0 !important; background: transparent !important; }

/* ========== 7. PAPER CUT ========== */
#tab-paper {
    background: linear-gradient(180deg, #f5f5f0 0%, #ebebdf 100%) !important;
    padding: 30px !important;
}
#tab-paper .style-title { font-family: 'Quicksand', sans-serif !important; font-size: 2.5rem !important; font-weight: 700 !important; color: #5d4e37 !important; }
#tab-paper .style-desc { background: #fff !important; border-radius: 4px !important; padding: 20px 25px !important; color: #5d4e37 !important; box-shadow: 0 1px 1px rgba(0,0,0,0.06), 0 2px 2px rgba(0,0,0,0.06), 0 4px 4px rgba(0,0,0,0.06), 0 8px 8px rgba(0,0,0,0.06), 0 16px 16px rgba(0,0,0,0.06) !important; }
#tab-paper .input-box textarea { background: #fff !important; border: 1px solid #e0ddd5 !important; border-radius: 4px !important; color: #5d4e37 !important; }
#tab-paper .generate-btn { background: #fff !important; border: 2px solid #5d4e37 !important; border-radius: 4px !important; color: #5d4e37 !important; font-weight: 700 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.08) !important; }
#tab-paper .generate-btn:hover { transform: translateY(-4px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1) !important; }
#tab-paper .code-output { background: #fff !important; border: 1px solid #e0ddd5 !important; border-radius: 4px !important; box-shadow: 0 1px 1px rgba(0,0,0,0.05), 0 2px 2px rgba(0,0,0,0.05), 0 4px 4px rgba(0,0,0,0.05), 0 8px 8px rgba(0,0,0,0.05) !important; }
#tab-paper .code-output textarea { color: #5d4e37 !important; background: transparent !important; }

/* ========== 8. HOLOGRAPHIC ========== */
#tab-holo {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    padding: 30px !important;
    position: relative;
    overflow: hidden;
}
#tab-holo::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; right: -50%; bottom: -50%;
    background: conic-gradient(from 0deg, #ff0080, #ff8c00, #ffff00, #00ff80, #00ffff, #0080ff, #8000ff, #ff0080);
    opacity: 0.15;
    animation: holo-rotate 10s linear infinite;
    pointer-events: none;
}
@keyframes holo-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#tab-holo .style-title { font-family: 'Rajdhani', sans-serif !important; font-size: 2.6rem !important; background: linear-gradient(90deg, #ff0080, #ff8c00, #ffff00, #00ff80, #00ffff, #8000ff, #ff0080) !important; background-size: 400% 100% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: holo-shift 5s linear infinite; position: relative; z-index: 10; }
@keyframes holo-shift { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } }
#tab-holo .style-desc { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 15px !important; padding: 20px !important; color: #e0e0ff !important; position: relative; z-index: 10; }
#tab-holo .input-box textarea { background: rgba(20,20,40,0.8) !important; border: 1px solid rgba(255,140,0,0.3) !important; border-radius: 10px !important; color: #fff !important; position: relative; z-index: 10; }
#tab-holo .generate-btn { background: linear-gradient(135deg, rgba(255,0,128,0.6), rgba(255,140,0,0.6), rgba(0,255,128,0.6), rgba(0,255,255,0.6), rgba(128,0,255,0.6)) !important; background-size: 300% 300% !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 30px !important; color: #fff !important; animation: holo-btn 6s ease infinite; position: relative; z-index: 10; }
@keyframes holo-btn { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
#tab-holo .code-output { background: rgba(20,20,40,0.8) !important; border: 1px solid rgba(128,0,255,0.3) !important; border-radius: 15px !important; position: relative; z-index: 10; }
#tab-holo .code-output textarea { color: #e0e0ff !important; background: transparent !important; }

/* ========== 9. FROSTED CRYSTAL ========== */
#tab-frost {
    background: linear-gradient(180deg, #e8f4fc 0%, #c5dff8 50%, #a8d4f0 100%) !important;
    padding: 30px !important;
}
#tab-frost .style-title { font-family: 'Quicksand', sans-serif !important; font-size: 2.5rem !important; font-weight: 700 !important; color: #4a7c9b !important; text-shadow: 0 2px 4px rgba(255,255,255,0.8) !important; }
#tab-frost .style-desc { background: rgba(255,255,255,0.4) !important; backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(255,255,255,0.6) !important; border-radius: 20px !important; padding: 20px !important; color: #3a6a8a !important; box-shadow: inset 0 0 30px rgba(255,255,255,0.5), 0 8px 32px rgba(100,150,200,0.2) !important; }
#tab-frost .input-box textarea { background: rgba(255,255,255,0.5) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255,255,255,0.7) !important; border-radius: 15px !important; color: #2a5a7a !important; }
#tab-frost .generate-btn { background: rgba(255,255,255,0.6) !important; backdrop-filter: blur(15px) !important; border: 2px solid rgba(255,255,255,0.8) !important; border-radius: 50px !important; color: #3a6a8a !important; font-weight: 700 !important; }
#tab-frost .generate-btn:hover { background: rgba(255,255,255,0.8) !important; transform: translateY(-3px) !important; }
#tab-frost .code-output { background: rgba(255,255,255,0.4) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.6) !important; border-radius: 20px !important; }
#tab-frost .code-output textarea { color: #2a5a7a !important; background: transparent !important; }

/* ========== 10. SOFT NEON ========== */
#tab-softneon {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%) !important;
    padding: 30px !important;
}
#tab-softneon .style-title { font-family: 'Quicksand', sans-serif !important; font-size: 2.5rem !important; color: #ffb6c1 !important; text-shadow: 0 0 10px rgba(255,182,193,0.5), 0 0 20px rgba(255,182,193,0.3), 0 0 40px rgba(255,182,193,0.2) !important; }
#tab-softneon .style-desc { background: rgba(255,182,193,0.08) !important; border: 1px solid rgba(255,182,193,0.2) !important; border-radius: 20px !important; padding: 20px !important; color: #e6d0d5 !important; box-shadow: 0 0 20px rgba(255,182,193,0.1), inset 0 0 20px rgba(255,182,193,0.05) !important; }
#tab-softneon .input-box textarea { background: rgba(20,20,35,0.9) !important; border: 1px solid rgba(176,224,230,0.3) !important; border-radius: 15px !important; color: #b0e0e6 !important; }
#tab-softneon .generate-btn { background: rgba(30,30,50,0.8) !important; border: 2px solid rgba(221,160,221,0.5) !important; border-radius: 50px !important; color: #dda0dd !important; box-shadow: 0 0 20px rgba(221,160,221,0.2), 0 0 40px rgba(221,160,221,0.1) !important; }
#tab-softneon .generate-btn:hover { box-shadow: 0 0 30px rgba(221,160,221,0.4), 0 0 60px rgba(221,160,221,0.2) !important; }
#tab-softneon .code-output { background: rgba(20,20,35,0.9) !important; border: 1px solid rgba(152,251,152,0.2) !important; border-radius: 20px !important; }
#tab-softneon .code-output textarea { color: #98fb98 !important; background: transparent !important; }

/* ========== 11. CRT TERMINAL ========== */
#tab-crt {
    background: #0a0a0a !important;
    padding: 30px !important;
    position: relative;
}
#tab-crt::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px);
    pointer-events: none;
    z-index: 1;
}
#tab-crt::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 2;
}
#tab-crt .style-title { font-family: 'VT323', monospace !important; font-size: 2.8rem !important; color: #33ff33 !important; text-shadow: 0 0 5px #33ff33, 0 0 10px #33ff33, 0 0 20px #33ff33 !important; position: relative; z-index: 10; animation: crt-flicker 0.1s infinite; }
@keyframes crt-flicker { 0%, 100% { opacity: 1; } 92% { opacity: 0.95; } 97% { opacity: 0.9; } }
#tab-crt .style-desc { background: rgba(0,50,0,0.3) !important; border: 1px solid #33ff33 !important; padding: 20px !important; color: #33ff33 !important; font-family: 'VT323', monospace !important; font-size: 1.2rem !important; position: relative; z-index: 10; }
#tab-crt .input-box textarea { background: rgba(0,20,0,0.8) !important; border: 1px solid #33ff33 !important; color: #33ff33 !important; font-family: 'VT323', monospace !important; font-size: 1.1rem !important; position: relative; z-index: 10; }
#tab-crt .generate-btn { background: #0a0a0a !important; border: 2px solid #33ff33 !important; color: #33ff33 !important; font-family: 'VT323', monospace !important; font-size: 1.3rem !important; position: relative; z-index: 10; }
#tab-crt .generate-btn:hover { background: #33ff33 !important; color: #0a0a0a !important; }
#tab-crt .code-output { background: rgba(0,20,0,0.8) !important; border: 1px solid #33ff33 !important; position: relative; z-index: 10; }
#tab-crt .code-output textarea { color: #33ff33 !important; background: transparent !important; font-family: 'VT323', monospace !important; text-shadow: 0 0 5px #33ff33 !important; }

/* ========== 12. ORIGAMI ========== */
#tab-origami {
    background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%) !important;
    padding: 30px !important;
}
#tab-origami .style-title { font-family: 'Rajdhani', sans-serif !important; font-size: 2.5rem !important; font-weight: 700 !important; color: #4a4a5a !important; letter-spacing: 5px !important; }
#tab-origami .style-desc { background: linear-gradient(135deg, #fff 0%, #f8f8f8 50%, #f0f0f0 50%, #e8e8e8 100%) !important; padding: 25px !important; color: #4a4a5a !important; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%) !important; box-shadow: 4px 4px 0 rgba(0,0,0,0.1), 8px 8px 0 rgba(0,0,0,0.05) !important; }
#tab-origami .input-box textarea { background: #fff !important; border: 2px solid #d0d0d8 !important; color: #4a4a5a !important; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%) !important; }
#tab-origami .generate-btn { background: linear-gradient(135deg, #5a5a6a 0%, #4a4a5a 50%, #3a3a4a 50%, #2a2a3a 100%) !important; color: #fff !important; font-family: 'Rajdhani', sans-serif !important; font-weight: 700 !important; clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px) !important; box-shadow: 4px 4px 0 rgba(0,0,0,0.2) !important; }
#tab-origami .generate-btn:hover { transform: translate(-2px, -2px) !important; box-shadow: 8px 8px 0 rgba(0,0,0,0.15) !important; }
#tab-origami .code-output { background: linear-gradient(135deg, #fff 0%, #f8f8f8 50%, #f4f4f4 50%, #f0f0f0 100%) !important; clip-path: polygon(0 0, 100% 0, 100% 100%, 15px 100%, 0 calc(100% - 15px)) !important; box-shadow: 3px 3px 0 rgba(0,0,0,0.08), 6px 6px 0 rgba(0,0,0,0.04) !important; }
#tab-origami .code-output textarea { color: #4a4a5a !important; background: transparent !important; }

/* ========== 13. BIOLUMINESCENCE ========== */
#tab-bio {
    background: linear-gradient(180deg, #000810 0%, #001020 50%, #000815 100%) !important;
    padding: 30px !important;
    position: relative;
    overflow: hidden;
}
#tab-bio::before {
    content: '';
    position: absolute;
    top: 20%; left: 10%;
    width: 150px; height: 150px;
    background: radial-gradient(ellipse, rgba(0,255,200,0.2) 0%, transparent 70%);
    filter: blur(30px);
    animation: bio-float-1 6s ease-in-out infinite;
    pointer-events: none;
}
#tab-bio::after {
    content: '';
    position: absolute;
    bottom: 30%; right: 15%;
    width: 120px; height: 120px;
    background: radial-gradient(ellipse, rgba(100,200,255,0.2) 0%, transparent 70%);
    filter: blur(25px);
    animation: bio-float-2 8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes bio-float-1 { 0%, 100% { transform: translate(0,0) scale(1); opacity: 0.6; } 50% { transform: translate(30px,-20px) scale(1.2); opacity: 1; } }
@keyframes bio-float-2 { 0%, 100% { transform: translate(0,0) scale(1); opacity: 0.5; } 50% { transform: translate(-20px,30px) scale(1.1); opacity: 0.9; } }
#tab-bio .style-title { font-family: 'Quicksand', sans-serif !important; font-size: 2.5rem !important; color: #00ffc8 !important; text-shadow: 0 0 10px rgba(0,255,200,0.7), 0 0 20px rgba(0,255,200,0.5), 0 0 40px rgba(0,255,200,0.3) !important; animation: bio-pulse 3s ease-in-out infinite; position: relative; z-index: 10; }
@keyframes bio-pulse { 0%, 100% { text-shadow: 0 0 10px rgba(0,255,200,0.7), 0 0 20px rgba(0,255,200,0.5); } 50% { text-shadow: 0 0 20px rgba(0,255,200,0.9), 0 0 40px rgba(0,255,200,0.7), 0 0 60px rgba(0,255,200,0.4); } }
#tab-bio .style-desc { background: rgba(0,255,200,0.05) !important; border: 1px solid rgba(0,255,200,0.2) !important; border-radius: 30px !important; padding: 20px !important; color: #80ffdc !important; position: relative; z-index: 10; }
#tab-bio .input-box textarea { background: rgba(0,20,30,0.8) !important; border: 1px solid rgba(100,200,255,0.3) !important; border-radius: 20px !important; color: #a0e0ff !important; position: relative; z-index: 10; }
#tab-bio .generate-btn { background: rgba(0,30,40,0.8) !important; border: 2px solid rgba(0,255,200,0.4) !important; border-radius: 50px !important; color: #00ffc8 !important; box-shadow: 0 0 20px rgba(0,255,200,0.2), 0 0 40px rgba(0,255,200,0.1) !important; animation: bio-btn-glow 3s ease-in-out infinite; position: relative; z-index: 10; }
@keyframes bio-btn-glow { 0%, 100% { box-shadow: 0 0 20px rgba(0,255,200,0.2), 0 0 40px rgba(0,255,200,0.1); } 50% { box-shadow: 0 0 30px rgba(0,255,200,0.4), 0 0 60px rgba(0,255,200,0.2); } }
#tab-bio .code-output { background: rgba(0,20,30,0.8) !important; border: 1px solid rgba(150,100,255,0.2) !important; border-radius: 25px !important; position: relative; z-index: 10; }
#tab-bio .code-output textarea { color: #c0a0ff !important; background: transparent !important; }

/* ========== 14. INK WASH ========== */
#tab-ink {
    background: radial-gradient(ellipse at 20% 10%, rgba(26,26,26,0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 90%, rgba(45,45,45,0.1) 0%, transparent 40%),
                #f5f2e8 !important;
    padding: 40px !important;
}
#tab-ink .style-title { font-family: 'Noto Serif KR', serif !important; font-size: 2.5rem !important; color: #1a1a1a !important; letter-spacing: 8px !important; border-bottom: 3px solid #1a1a1a !important; padding-bottom: 10px !important; display: inline-block !important; }
#tab-ink .style-desc { background: transparent !important; border-left: 4px solid #1a1a1a !important; padding: 15px 20px !important; color: #2d2d2d !important; font-family: 'Noto Serif KR', serif !important; }
#tab-ink .input-box textarea { background: rgba(255,255,255,0.7) !important; border: none !important; border-bottom: 2px solid #5a5a5a !important; border-radius: 0 !important; color: #1a1a1a !important; }
#tab-ink .generate-btn { background: #1a1a1a !important; border: none !important; border-radius: 0 !important; color: #f5f2e8 !important; font-family: 'Noto Serif KR', serif !important; letter-spacing: 5px !important; }
#tab-ink .generate-btn:hover { background: #c73e1d !important; }
#tab-ink .code-output { background: rgba(255,255,255,0.6) !important; border-left: 3px solid #8a8a8a !important; border-radius: 0 !important; }
#tab-ink .code-output textarea { color: #2d2d2d !important; background: transparent !important; }

/* ========== 15. SOAP BUBBLE ========== */
#tab-bubble {
    background: linear-gradient(135deg, #e8f4ff 0%, #f5e8ff 50%, #e8fff4 100%) !important;
    padding: 35px !important;
}
#tab-bubble .style-title { font-family: 'Quicksand', sans-serif !important; font-size: 2.5rem !important; background: linear-gradient(90deg, #ff9ec4, #a0e7e5, #c4b5fd, #ff9ec4) !important; background-size: 300% 100% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: bubble-text 5s linear infinite; }
@keyframes bubble-text { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
#tab-bubble .style-desc { background: conic-gradient(from 0deg at 30% 30%, rgba(255,150,200,0.3), rgba(100,255,255,0.3), rgba(255,255,150,0.3), rgba(200,150,255,0.3), rgba(150,255,200,0.3), rgba(255,150,200,0.3)) !important; border: 1px solid rgba(255,255,255,0.5) !important; border-radius: 50px !important; padding: 25px 30px !important; color: #5a5a7a !important; backdrop-filter: blur(5px) !important; box-shadow: inset 10px 10px 30px rgba(255,255,255,0.8), 0 10px 40px rgba(150,180,255,0.2) !important; }
#tab-bubble .input-box textarea { background: rgba(255,255,255,0.5) !important; border: 1px solid rgba(200,180,255,0.5) !important; border-radius: 25px !important; color: #4a4a6a !important; backdrop-filter: blur(5px) !important; }
#tab-bubble .generate-btn { background: conic-gradient(from 0deg, rgba(255,150,200,0.6), rgba(100,255,255,0.6), rgba(255,255,150,0.6), rgba(200,150,255,0.6), rgba(255,150,200,0.6)) !important; border: 1px solid rgba(255,255,255,0.6) !important; border-radius: 50px !important; color: #4a4a6a !important; box-shadow: inset 5px 5px 20px rgba(255,255,255,0.7), 0 10px 30px rgba(180,150,255,0.3) !important; animation: bubble-rotate 8s linear infinite; }
@keyframes bubble-rotate { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
#tab-bubble .generate-btn:hover { transform: scale(1.05) translateY(-3px) !important; }
#tab-bubble .code-output { background: rgba(255,255,255,0.4) !important; border: 1px solid rgba(200,180,255,0.4) !important; border-radius: 30px !important; backdrop-filter: blur(5px) !important; }
#tab-bubble .code-output textarea { color: #4a4a6a !important; background: transparent !important; }

/* ========== 16. CHALKBOARD ========== */
#tab-chalk {
    background: linear-gradient(180deg, #1e3a1e 0%, #2a4a2a 50%, #1e3a1e 100%) !important;
    padding: 20px !important;
    border: 15px solid #5c4033 !important;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.3) !important;
}
#tab-chalk .style-title { font-family: 'Gaegu', cursive !important; font-size: 2.8rem !important; color: #f0f0e8 !important; text-shadow: 0 0 10px rgba(240,240,232,0.5), 2px 2px 4px rgba(0,0,0,0.3) !important; }
#tab-chalk .style-desc { background: transparent !important; border: 2px dashed rgba(240,240,232,0.5) !important; padding: 15px 20px !important; color: #f0f0e8 !important; font-family: 'Gaegu', cursive !important; font-size: 1.2rem !important; }
#tab-chalk .input-box textarea { background: rgba(30,58,30,0.5) !important; border: 2px solid rgba(240,240,232,0.4) !important; color: #f0f0e8 !important; font-family: 'Gaegu', cursive !important; font-size: 1.1rem !important; }
#tab-chalk .generate-btn { background: transparent !important; border: 3px solid #f0f0e8 !important; color: #f0f0e8 !important; font-family: 'Gaegu', cursive !important; font-size: 1.3rem !important; }
#tab-chalk .generate-btn:hover { background: rgba(240,240,232,0.15) !important; }
#tab-chalk .code-output { background: rgba(30,58,30,0.4) !important; border: 2px solid rgba(240,240,232,0.3) !important; }
#tab-chalk .code-output textarea { color: #f5e6a3 !important; background: transparent !important; font-family: 'Gaegu', cursive !important; text-shadow: 0 0 5px rgba(245,230,163,0.4) !important; }

/* ========== 17. PIXEL ART ========== */
#tab-pixel {
    background: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
                #1d2b53 !important;
    background-size: 4px 4px, 4px 4px, 100% 100%;
    padding: 30px !important;
    image-rendering: pixelated;
}
#tab-pixel .style-title { font-family: 'Press Start 2P', monospace !important; font-size: 1.6rem !important; color: #ffec27 !important; text-shadow: 4px 4px 0 #000 !important; }
#tab-pixel .style-desc { background: #c2c3c7 !important; border: 4px solid #000 !important; padding: 15px !important; color: #1d2b53 !important; font-family: 'Press Start 2P', monospace !important; font-size: 0.65rem !important; line-height: 1.8 !important; box-shadow: 4px 4px 0 #000 !important; }
#tab-pixel .input-box textarea { background: #fff1e8 !important; border: 4px solid #000 !important; color: #1d2b53 !important; font-family: 'Press Start 2P', monospace !important; font-size: 0.7rem !important; box-shadow: 4px 4px 0 #5f574f !important; }
#tab-pixel .generate-btn { background: #ff004d !important; border: 4px solid #000 !important; color: #fff1e8 !important; font-family: 'Press Start 2P', monospace !important; font-size: 0.75rem !important; box-shadow: inset -4px -4px 0 #7e2553, inset 4px 4px 0 #ff77a8, 4px 4px 0 #000 !important; }
#tab-pixel .generate-btn:hover { transform: translate(2px, 2px) !important; box-shadow: inset 4px 4px 0 #7e2553, inset -4px -4px 0 #ff77a8, 2px 2px 0 #000 !important; }
#tab-pixel .code-output { background: #fff1e8 !important; border: 4px solid #000 !important; box-shadow: 4px 4px 0 #5f574f !important; }
#tab-pixel .code-output textarea { color: #1d2b53 !important; background: transparent !important; font-family: 'Press Start 2P', monospace !important; font-size: 0.55rem !important; line-height: 1.5 !important; }

/* ========== 18. CANDY POP ========== */
#tab-candy {
    background: linear-gradient(135deg, #ff9ec4 0%, #c4b5fd 25%, #a0e7e5 50%, #98e8c1 75%, #fcf6bd 100%) !important;
    background-size: 400% 400% !important;
    animation: candy-bg 10s ease infinite;
    padding: 35px !important;
}
@keyframes candy-bg { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
#tab-candy .style-title { font-family: 'Fredoka', cursive !important; font-size: 2.8rem !important; color: #fff !important; text-shadow: 3px 3px 0 #ff8fab, 6px 6px 0 rgba(0,0,0,0.1) !important; }
#tab-candy .style-desc { background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,220,230,0.9)) !important; border-radius: 30px !important; padding: 20px 25px !important; color: #ff6b8a !important; font-family: 'Quicksand', sans-serif !important; font-weight: 600 !important; box-shadow: inset 0 -6px 15px rgba(0,0,0,0.08), inset 0 6px 15px rgba(255,255,255,0.9), 0 10px 30px rgba(255,143,171,0.3) !important; }
#tab-candy .input-box textarea { background: rgba(255,255,255,0.9) !important; border: 3px solid #ffc09f !important; border-radius: 20px !important; color: #ff6b8a !important; font-family: 'Quicksand', sans-serif !important; }
#tab-candy .generate-btn { background: linear-gradient(145deg, #ff9ec4, #ff6b8a) !important; border: none !important; border-radius: 50px !important; color: #fff !important; font-family: 'Fredoka', cursive !important; font-size: 1.2rem !important; box-shadow: inset 0 -5px 15px rgba(0,0,0,0.15), inset 0 5px 15px rgba(255,255,255,0.4), 0 10px 30px rgba(255,107,138,0.4) !important; }
#tab-candy .generate-btn:hover { transform: translateY(-5px) scale(1.03) !important; }
#tab-candy .code-output { background: rgba(255,255,255,0.9) !important; border: 3px solid #a0e7e5 !important; border-radius: 25px !important; }
#tab-candy .code-output textarea { color: #5a8a88 !important; background: transparent !important; }

/* ========== 탭 스타일 ========== */
.tabs { background: transparent !important; }
.tab-nav {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    border-radius: 15px 15px 0 0 !important;
    padding: 10px !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}
.tab-nav button {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    color: #a0a0c0 !important;
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    transition: all 0.3s !important;
}
.tab-nav button:hover { background: rgba(255,255,255,0.15) !important; color: #fff !important; }
.tab-nav button.selected { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; border-color: transparent !important; color: #fff !important; }
"""

# ============================================================
# 출력 함수
# ============================================================

def show_style_code(style_key):
    return STYLE_CODES.get(style_key, "스타일 코드를 찾을 수 없습니다.")

# ============================================================
# 탭 생성 함수
# ============================================================

def create_style_tab(tab_id, style_name, style_emoji, style_desc, style_key):
    with gr.Column(elem_id=tab_id):
        gr.HTML(f'<h1 class="style-title">{style_emoji} {style_name}</h1>')
        gr.HTML(f'<div class="style-desc">{style_desc}</div>')
        gr.Markdown("")
        with gr.Row():
            with gr.Column(scale=1):
                prompt = gr.Textbox(label="", placeholder=f"{style_name} 스타일 체험...", lines=3, elem_classes=["input-box"])
                btn = gr.Button(f"📜 CSS 코드 보기", elem_classes=["generate-btn"])
            with gr.Column(scale=2):
                output = gr.Textbox(label="", value=STYLE_CODES.get(style_key, ""), lines=20, elem_classes=["code-output"], interactive=False)
        btn.click(fn=lambda: show_style_code(style_key), inputs=[], outputs=[output])

# ============================================================
# 메인 앱
# ============================================================

with gr.Blocks(css=MAIN_CSS, title="🎨 18 Visual Styles Gallery", theme=gr.themes.Base()) as demo:
    
    gr.HTML("""
    <div style="text-align:center; padding: 25px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); border-radius: 20px; margin-bottom: 20px;">
        <h1 style="font-size: 2.5rem; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #00d4ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
            🎨 18 Visual Styles Gallery
        </h1>
        <p style="color: #a0a0c0; margin-top: 10px;">원래 13개 + 신규 5개 스타일 | CSS 코드 포함</p>
    </div>
    """)
    
    with gr.Tabs():
        # 원래 13개
        with gr.Tab("🦸 Pop Art"):
            create_style_tab("tab-popart", "POP ART / COMIC", "💥", "만화풍 스타일! 벤데이 도트, 굵은 윤곽선, 원색의 강렬한 비주얼.", "POP_ART")
        with gr.Tab("🪟 Glass"):
            create_style_tab("tab-glass", "GLASSMORPHISM", "✨", "투명한 유리처럼 반투명하고 부드러운 UI. 블러 효과와 은은한 빛 반사.", "GLASSMORPHISM")
        with gr.Tab("🔘 Neumorph"):
            create_style_tab("tab-neumorph", "NEUMORPHISM", "🎛️", "부드러운 볼록/오목 효과. 실제 버튼을 누르는 듯한 촉각적 경험.", "NEUMORPHISM")
        with gr.Tab("🧸 Clay"):
            create_style_tab("tab-clay", "CLAYMORPHISM", "🎨", "점토처럼 부풀어 오른 3D 느낌! Neumorphism의 진화 버전.", "CLAYMORPHISM")
        with gr.Tab("🌌 Aurora"):
            create_style_tab("tab-aurora", "AURORA BOREALIS", "🌈", "북극 오로라처럼 유동적으로 흐르는 빛의 커튼.", "AURORA")
        with gr.Tab("🪞 Metal"):
            create_style_tab("tab-metal", "LIQUID METAL", "⚙️", "수은처럼 흐르는 액체 금속. 메탈릭 반사와 미래적 질감.", "LIQUID_METAL")
        with gr.Tab("📄 Paper"):
            create_style_tab("tab-paper", "PAPER CUT", "✂️", "종이를 오려 겹쳐놓은 입체 효과. 따뜻한 핸드메이드 감성.", "PAPER_CUT")
        with gr.Tab("🌈 Holo"):
            create_style_tab("tab-holo", "HOLOGRAPHIC", "💎", "보는 각도에 따라 색이 변하는 홀로그램. 무지개빛 효과.", "HOLOGRAPHIC")
        with gr.Tab("❄️ Frost"):
            create_style_tab("tab-frost", "FROSTED CRYSTAL", "🧊", "얼음과 서리가 낀 유리창. 차갑고 깨끗한 크리스탈 효과.", "FROSTED_CRYSTAL")
        with gr.Tab("💡 Soft Neon"):
            create_style_tab("tab-softneon", "SOFT NEON", "🌙", "은은한 네온 발광. 파스텔 네온의 몽환적 분위기.", "SOFT_NEON")
        with gr.Tab("🖥️ CRT"):
            create_style_tab("tab-crt", "CRT TERMINAL", "📟", "80년대 구형 모니터. 스캔라인과 인광 잔상 효과.", "CRT_TERMINAL")
        with gr.Tab("🦢 Origami"):
            create_style_tab("tab-origami", "ORIGAMI", "📐", "종이접기처럼 접힌 면의 명암. 기하학적 아름다움.", "ORIGAMI")
        with gr.Tab("🦑 Bio"):
            create_style_tab("tab-bio", "BIOLUMINESCENCE", "🌊", "심해 생물처럼 어둠 속 자체 발광. 신비로운 생명의 빛.", "BIOLUMINESCENCE")
        
        # 신규 5개
        with gr.Tab("🖌️ Ink"):
            create_style_tab("tab-ink", "INK WASH / SUMI-E", "墨", "동양 수묵화의 여백과 번짐의 미학. 붓터치와 깊이감.", "INK_WASH")
        with gr.Tab("🫧 Bubble"):
            create_style_tab("tab-bubble", "SOAP BUBBLE", "🌈", "비눗방울 막의 무지개빛 반사. 환상적인 색채의 향연.", "SOAP_BUBBLE")
        with gr.Tab("📝 Chalk"):
            create_style_tab("tab-chalk", "CHALKBOARD", "✏️", "학교 칠판과 분필의 향수. 손글씨 느낌의 따뜻한 감성.", "CHALKBOARD")
        with gr.Tab("👾 Pixel"):
            create_style_tab("tab-pixel", "PIXEL ART", "🎮", "8비트 레트로 게임의 도트 그래픽. 클래식한 매력.", "PIXEL_ART")
        with gr.Tab("🍬 Candy"):
            create_style_tab("tab-candy", "CANDY POP", "🍭", "달콤한 사탕처럼 반짝이는 팝 컬러. 통통 튀는 에너지.", "CANDY_POP")

if __name__ == "__main__":
    demo.launch()