@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Serif+KR:wght@400;700&display=swap";
:root{--amber-400:#fbbf24;--amber-500:#f59e0b;--amber-600:#d97706;--coral-400:#ff7a7a;--coral-500:#ff6b6b;--purple-400:#a78bfa;--purple-500:#7c3aed;--teal-400:#2dd4bf;--rose-400:#fb7185;--bg-primary:#fff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#94a3b8;--border-primary:#e2e8f0;--border-secondary:#f1f5f9;--slate-800:#1e293b;--slate-850:#172033;--slate-900:#0f172a;--slate-950:#020617;--glass-bg:#00000008;--glass-bg-strong:#0000000f;--glass-border:#00000014;--glass-border-strong:#0000001f;--glass-blur:blur(24px);--glass-blur-heavy:blur(40px);--gradient-primary:linear-gradient(135deg,var(--coral-500)0%,var(--amber-500)50%,var(--amber-400)100%);--gradient-accent:linear-gradient(135deg,var(--purple-500)0%,var(--coral-500)100%);--gradient-warm:linear-gradient(135deg,var(--amber-400)0%,var(--coral-400)100%);--gradient-cool:linear-gradient(135deg,var(--teal-400)0%,var(--purple-400)100%);--gradient-dark:linear-gradient(180deg,var(--bg-primary)0%,var(--bg-secondary)100%);--gradient-hero:linear-gradient(135deg,#ff6b6b14 0%,#fbbf240d 50%,#7c3aed0a 100%);--gradient-surface:linear-gradient(180deg,#00000005 0%,#00000003 100%);--shadow-sm:0 2px 8px #0000000f;--shadow-md:0 4px 20px #00000014;--shadow-lg:0 8px 40px #0000001a;--shadow-glow-amber:0 4px 30px #fbbf2433;--shadow-glow-coral:0 4px 30px #ff6b6b33;--shadow-glow-purple:0 4px 30px #7c3aed33;--nav-bg:#ffffffd9;--nav-text:#0006;--nav-active:var(--coral-500);--font-sans:"Pretendard","Inter",-apple-system,BlinkMacSystemFont,sans-serif;--font-display:"Outfit",var(--font-sans);--font-serif:"Noto Serif KR",Georgia,serif;--safe-top:env(safe-area-inset-top,20px);--safe-bottom:env(safe-area-inset-bottom,20px);--ease-out-expo:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--transition-fast:.15s var(--ease-out-expo);--transition-normal:.3s var(--ease-out-expo);--transition-slow:.5s var(--ease-out-expo);--transition-bounce:.6s var(--ease-spring)}[data-theme=dark]{--bg-primary:#0f172a;--bg-secondary:#020617;--bg-tertiary:#1e293b;--text-primary:#fff;--text-secondary:#ffffffb3;--text-tertiary:#fff6;--border-primary:#ffffff14;--border-secondary:#ffffff0a;--glass-bg:#ffffff0a;--glass-bg-strong:#ffffff14;--glass-border:#ffffff14;--glass-border-strong:#ffffff26;--gradient-dark:linear-gradient(180deg,var(--slate-900)0%,var(--slate-950)100%);--gradient-hero:linear-gradient(135deg,#ff6b6b26 0%,#fbbf241a 50%,#7c3aed14 100%);--gradient-surface:linear-gradient(180deg,#ffffff0f 0%,#ffffff05 100%);--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 20px #0006;--shadow-lg:0 8px 40px #00000080;--shadow-glow-amber:0 4px 30px #fbbf2459;--shadow-glow-coral:0 4px 30px #ff6b6b4d;--shadow-glow-purple:0 4px 30px #7c3aed4d;--nav-bg:#020617d9;--nav-text:#fff6;--nav-active:var(--coral-500)}body{font-family:var(--font-sans);background:var(--gradient-dark);color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);transition:all var(--transition-normal);border-radius:24px}.glass-card:hover{background:var(--glass-bg-strong);border-color:var(--glass-border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}.glass-card-strong{background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur-heavy);border:1px solid var(--glass-border-strong);border-radius:28px}.glass-surface{background:var(--gradient-surface);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border)}.btn-primary{background:var(--gradient-primary);color:var(--slate-950);box-shadow:var(--shadow-glow-coral);transition:all var(--transition-normal);font-weight:700;font-family:var(--font-display);letter-spacing:-.01em;border:none;border-radius:16px;padding:16px 32px;position:relative;overflow:hidden}.btn-primary:before{content:"";opacity:0;transition:opacity var(--transition-fast);background:linear-gradient(135deg,#fff3 0%,#0000 50%);position:absolute;inset:0}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 40px #ff6b6b73}.btn-primary:hover:before{opacity:1}.btn-primary:active{transform:scale(.97)}.btn-secondary{background:var(--glass-bg-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:#fff;border:1px solid var(--glass-border-strong);transition:all var(--transition-normal);border-radius:16px;padding:16px 28px;font-weight:600}.btn-secondary:hover{background:#ffffff1f;border-color:#ffffff40}.btn-icon{background:var(--glass-bg-strong);width:48px;height:48px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);transition:all var(--transition-normal);color:#fffc;border-radius:16px;justify-content:center;align-items:center;display:flex}.btn-icon:hover{background:#ffffff26;transform:scale(1.05)}.btn-icon:active{transform:scale(.92)}.bottom-nav{padding:8px 20px calc(var(--safe-bottom) + 8px);background:var(--nav-bg);-webkit-backdrop-filter:var(--glass-blur-heavy);border-top:1px solid var(--glass-border);z-index:100;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.nav-item{color:var(--nav-text);transition:all var(--transition-normal);border-radius:20px;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;display:flex;position:relative}.nav-item.active{color:var(--coral-500)}.nav-item.active:after{content:"";background:var(--coral-500);border-radius:50%;width:4px;height:4px;position:absolute;bottom:2px}.fab{bottom:calc(84px + var(--safe-bottom));background:var(--gradient-primary);width:64px;height:64px;box-shadow:var(--shadow-glow-coral);transition:all var(--transition-bounce);z-index:100;border-radius:50%;justify-content:center;align-items:center;display:flex;position:fixed;right:24px}.fab:hover{transform:scale(1.1)rotate(90deg);box-shadow:0 8px 40px #ff6b6b80}.fab:active{transform:scale(.95)}.blog-card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);transition:all var(--transition-normal);border-radius:24px;overflow:hidden}.blog-card:hover{box-shadow:var(--shadow-lg);border-color:#ff6b6b40;transform:translateY(-4px)}.blog-card-image{object-fit:cover;width:100%;height:200px}.blog-card-content{padding:20px 24px 24px}.blog-card-title{font-family:var(--font-display);letter-spacing:-.02em;margin-bottom:8px;font-size:18px;font-weight:700;line-height:1.4}.blog-card-date{color:#ffffff73;font-size:13px}.style-card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);cursor:pointer;transition:all var(--transition-normal);border:2px solid #0000;border-radius:24px;padding:24px;position:relative;overflow:hidden}.style-card:before{content:"";background:var(--gradient-primary);opacity:0;height:3px;transition:opacity var(--transition-normal);position:absolute;top:0;left:0;right:0}.style-card:hover{background:#ffffff14}.style-card.selected{border-color:var(--coral-500);background:#ff6b6b14;box-shadow:0 0 30px #ff6b6b26}.style-card.selected:before{opacity:1}.gradient-text{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-text-cool{background:var(--gradient-cool);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.shutter-btn{width:84px;height:84px;transition:all var(--transition-fast);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.shutter-btn:before{content:"";background:var(--gradient-warm);-webkit-mask-composite:xor;border-radius:50%;padding:4px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.shutter-btn-inner{width:68px;height:68px;transition:all var(--transition-fast);background:#fff;border-radius:50%}.shutter-btn:active .shutter-btn-inner{background:#f1f5f9;transform:scale(.85)}.recording-indicator{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ff6b6bd9;border-radius:24px;align-items:center;gap:8px;padding:8px 18px;font-size:13px;font-weight:600;display:flex}.recording-dot{background:#fff;border-radius:50%;width:8px;height:8px;animation:1.2s ease-in-out infinite pulse}.floating-bar{-webkit-backdrop-filter:var(--glass-blur-heavy);border:1px solid var(--glass-border-strong);z-index:100;box-shadow:var(--shadow-lg);background:#0f172ad9;border-radius:24px;padding:16px 20px;position:fixed;bottom:24px;left:16px;right:16px}.custom-slider{appearance:none;background:#ffffff14;border-radius:3px;outline:none;width:100%;height:6px}.custom-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;width:22px;height:22px;transition:box-shadow var(--transition-fast);background:#fff;border-radius:50%;box-shadow:0 2px 8px #0000004d,0 0 0 4px #ff6b6b33}.custom-slider::-webkit-slider-thumb:hover{box-shadow:0 2px 12px #0006,0 0 0 6px #ff6b6b4d}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes gradientFlow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes glow-pulse{0%,to{box-shadow:0 0 24px #ff6b6b4d}50%{box-shadow:0 0 48px #ff6b6b80}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-100%)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}@keyframes success-check{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}.animate-fade-in-up{animation:fadeInUp .6s var(--ease-out-expo)forwards}.animate-fade-in{animation:fadeIn .4s var(--ease-out-expo)forwards}.animate-scale-in{animation:scaleIn .5s var(--ease-spring)forwards}.animate-slide-right{animation:slideInRight .5s var(--ease-out-expo)forwards}.animate-float{animation:3s ease-in-out infinite float}.animate-glow{animation:2s ease-in-out infinite glow-pulse}.animate-gradient{background-size:200% 200%;animation:4s infinite gradientFlow}.stagger-children>*{opacity:0;animation:fadeInUp .5s var(--ease-out-expo)forwards}.stagger-children>:first-child{animation-delay:0s}.stagger-children>:nth-child(2){animation-delay:80ms}.stagger-children>:nth-child(3){animation-delay:.16s}.stagger-children>:nth-child(4){animation-delay:.24s}.stagger-children>:nth-child(5){animation-delay:.32s}.stagger-children>:nth-child(6){animation-delay:.4s}.spinner{border:3px solid #ff6b6b26;border-top-color:var(--coral-500);border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin}.safe-top{padding-top:var(--safe-top)}.safe-bottom{padding-bottom:var(--safe-bottom)}@media (max-width:380px){.blog-card-title{font-size:16px}.style-card{padding:18px}}@media (min-width:768px){.blog-card-image{height:240px}}.drop-zone{border:2px dashed var(--glass-border);cursor:pointer;border-radius:1rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.drop-zone:hover{border-color:var(--amber-400);background:#f59e0b0d!important}@media (min-width:768px){.drop-zone{padding:2rem}.bottom-nav{border-radius:1rem 1rem 0 0;max-width:480px;left:50%;transform:translate(-50%)}}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}