@layer components{.btn,.btn-base{--btn-bg:var(--color-primary-600);--btn-bg-hover:var(--color-primary-700);--btn-text-color:var(--color-text-inverse);background:var(--btn-bg);color:var(--btn-text-color);border:none;border-radius:var(--radius-lg);padding:var(--space-3) var(--space-6);font-weight:var(--font-weight-medium);font-size:var(--font-size-base);cursor:pointer;transition:background-color 0.15s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);position:relative;min-height:44px;line-height:var(--line-height-normal);white-space:nowrap}@media (hover:hover){.btn:hover,.btn-base:hover,a.btn:hover{background:var(--btn-bg-hover);color:var(--btn-text-color)}}.btn:active,.btn-base:active,a.btn:active{opacity:0.9}.btn--primary{--btn-bg:var(--color-primary-600);--btn-bg-hover:var(--color-primary-700);--btn-text-color:var(--color-text-inverse)}.btn--secondary{--btn-bg:var(--color-gray-100);--btn-bg-hover:var(--color-gray-200);--btn-text-color:var(--color-text-primary)}.btn--accent{--btn-bg:var(--korean-teal);--btn-bg-hover:#00a67f;--btn-text-color:var(--color-text-inverse)}.btn--danger{--btn-bg:var(--color-error-600);--btn-bg-hover:var(--color-error-700);--btn-text-color:var(--color-text-inverse)}.btn--success{--btn-bg:var(--color-success-600);--btn-bg-hover:var(--color-success-700);--btn-text-color:var(--color-text-inverse)}.btn--warning{--btn-bg:var(--color-warning-600);--btn-bg-hover:var(--color-warning-700);--btn-text-color:var(--color-text-inverse)}.btn--outline-secondary{background:transparent;border:1px solid var(--color-gray-300);color:var(--color-text-primary)}@media (hover:hover){.btn--outline-secondary:hover{background:var(--color-gray-100)}}.btn--outline-info{background:transparent;border:1px solid var(--color-info-600);color:var(--color-info-600)}@media (hover:hover){.btn--outline-info:hover{background:var(--color-info-50)}}.btn--small{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);min-height:36px}.btn--large{padding:var(--space-4) var(--space-8);font-size:var(--font-size-lg);min-height:52px;font-weight:var(--font-weight-semibold)}.btn--full-width{width:100%;justify-content:center}.btn--disabled,.btn:disabled,button:disabled{opacity:0.5;cursor:not-allowed}.btn__icon{display:inline-flex;align-items:center}.btn__text{display:inline}.btn--ghost,.btn--glass,.btn--glass-primary,.btn--glass-accent{background:transparent;border:1px solid var(--color-border-light);color:var(--color-text-primary)}@media (hover:hover){.btn--ghost:hover,.btn--glass:hover,.btn--glass-primary:hover,.btn--glass-accent:hover{background:var(--color-gray-50);border-color:var(--color-border-medium)}}.btn__loading{display:inline-flex;align-items:center}.btn__loading--hidden{display:none}button:disabled,.btn:disabled{opacity:0.5;cursor:not-allowed}button.is-loading,.btn.is-loading,button.loading,.btn.loading{cursor:wait;opacity:0.7}.btn__loading-dots,.btn-loading-dots{display:inline-flex;align-items:center;justify-content:center;gap:0.15em;margin-left:0.5em}.btn__loading-dot,.btn-loading-dots span{display:inline-block;width:0.35em;height:0.35em;border-radius:50%;background-color:currentColor;opacity:0.4;animation:btn-loading-dots 1s ease-in-out infinite}.btn__loading-dot:nth-child(2),.btn-loading-dots span:nth-child(2){animation-delay:0.15s}.btn__loading-dot:nth-child(3),.btn-loading-dots span:nth-child(3){animation-delay:0.3s}@keyframes btn-loading-dots{0%,100%{opacity:0.4}50%{opacity:1}}@media (hover:hover){button.is-loading:hover,.btn.is-loading:hover,button.loading:hover,.btn.loading:hover{cursor:wait}}button:disabled.is-loading,.btn:disabled.is-loading,button:disabled.loading,.btn:disabled.loading{opacity:0.7}}/** * Dashboard Layout Styles - Strict BEM Methodology * Modern,responsive design with proper CSS architecture */ @layer components{.dashboard-layout__container{display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:100vh;gap:0}.dashboard-layout__skip-link{position:absolute;left:-9999px;top:auto;width:var(--space-1);height:var(--space-1);overflow:hidden}.dashboard-layout__skip-link:focus{left:var(--space-lg);top:var(--space-lg);width:auto;height:auto;background:var(--color-primary-500);color:var(--color-text-inverse);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);z-index:var(--z-tooltip)}.dashboard-layout__main{padding:0 var(--space-2xl) var(--space-2xl);background:var(--color-bg-secondary);overflow-y:auto;position:relative;contain:layout style paint;transform:translateZ(0);-webkit-overflow-scrolling:touch;content-visibility:auto}@media (prefers-reduced-motion:reduce){.user-dashboard-sidebar,.dashboard-layout__mobile-overlay,.dashboard-layout__mobile-menu-btn,.dashboard-layout__hamburger,.user-dashboard-nav a{transition:none}}.dashboard-layout__mobile-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--glass-bg-subtle);backdrop-filter:blur(8px);z-index:var(--z-modal-backdrop);opacity:0;visibility:hidden;pointer-events:none;transform:translateZ(0);transition:opacity 280ms cubic-bezier(0.22,1,0.36,1)}.dashboard-layout__mobile-overlay--show,.dashboard-layout__mobile-overlay.show{opacity:1;visibility:visible;pointer-events:auto}.dashboard-layout__mobile-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0}.dashboard-layout__mobile-user-info{display:flex;align-items:center;gap:var(--space-2)}.dashboard-layout__mobile-user-email{font-size:var(--font-size-sm);color:var(--color-text-secondary)}@media (max-width:1024px){.page-header.page-header--app-header{display:none !important}.dashboard-layout__container{grid-template-columns:1fr;grid-template-rows:auto 1fr;transition:all var(--transition-base)}.dashboard-layout__main{padding:0 var(--space-6) var(--space-6)}.dashboard-layout__mobile-overlay{background:rgba(0,0,0,0.5);backdrop-filter:none;-webkit-backdrop-filter:none}.user-dashboard-sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width-mobile);height:100vh;z-index:var(--z-modal);transform:translateX(-100%) translateZ(0);transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;border-right:none;box-shadow:var(--glass-shadow-strong);padding:var(--space-3) 0;background:var(--glass-optimized-bg);backdrop-filter:none;-webkit-overflow-scrolling:touch;contain:layout style paint}.user-dashboard-sidebar.mobile-open{transform:translateX(0) translateZ(0)}.dashboard-layout__mobile-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-md) var(--space-lg);background:rgba(255,255,255,0.95);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,0.1);margin:0 0 var(--space-6) 0;box-shadow:var(--glass-base-shadow);position:relative;overflow:hidden;contain:layout style paint}.dashboard-layout__mobile-menu-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:0;border-radius:var(--radius-md);transition:var(--glass-base-transition);gap:4px}@media (hover:hover){.dashboard-layout__mobile-menu-btn:hover{background:var(--glass-hover-bg)}}.dashboard-layout__hamburger{width:20px;height:2px;background:var(--color-text-primary);border-radius:1px;transition:all 0.3s ease;transform-origin:center}.dashboard-layout__mobile-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0;padding:0;flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.dashboard-layout__mobile-user-info{display:flex;align-items:center}.dashboard-layout__mobile-user-email{font-size:var(--font-size-xs);color:var(--color-text-muted);max-width:var(--space-30);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-desktop-header{display:none}}@media (max-width:900px){.dashboard-layout__main{padding:0 var(--space-5) var(--space-5)}}@media (max-width:768px){.dashboard-layout__container{grid-template-columns:1fr;grid-template-rows:auto 1fr}.dashboard-layout__main{padding:0 var(--space-4) var(--space-4);background:var(--color-bg-primary);margin-left:0}@media (min-width:1025px){.dashboard-layout__mobile-overlay{display:none}}.dashboard-layout__mobile-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-md) var(--space-lg);background:rgba(255,255,255,0.95);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,0.1);margin:0 0 var(--space-6) 0;box-shadow:var(--glass-base-shadow);position:relative;overflow:hidden;contain:layout style paint}.dashboard-desktop-header{display:none}.dashboard-layout__mobile-menu-btn{display:flex;flex-direction:column;gap:var(--space-1);background:var(--glass-bg-subtle);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(255,255,255,0.2);cursor:pointer;padding:var(--space-2);border-radius:var(--radius-md);transition:var(--glass-base-transition);box-shadow:var(--glass-base-shadow)}@media (hover:hover){.dashboard-layout__mobile-menu-btn:hover{background:var(--glass-hover-bg);transform:translateY(-1px);box-shadow:var(--glass-hover-shadow)}}.dashboard-layout__hamburger{width:var(--space-5);height:var(--space-1);background:var(--color-text-primary);border-radius:var(--space-1);transition:transform var(--transition-slow),opacity var(--transition-slow)}.dashboard-layout__mobile-menu-btn--open .dashboard-layout__hamburger:nth-child(1){transform:translateY(var(--space-1_5)) rotate(45deg)}.dashboard-layout__mobile-menu-btn--open .dashboard-layout__hamburger:nth-child(2){opacity:0}.dashboard-layout__mobile-menu-btn--open .dashboard-layout__hamburger:nth-child(3){transform:translateY(calc(-1 * var(--space-1_5))) rotate(-45deg)}.dashboard-layout__mobile-menu-btn:focus-visible,.quick-access-item:focus-visible{outline:2px solid var(--color-primary-600);outline-offset:2px}.dashboard-layout__mobile-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0;padding:0;flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.dashboard-layout__mobile-title--no-margin{margin-bottom:0}.dashboard-layout__mobile-header .dashboard-layout__mobile-title{margin-bottom:0}.dashboard-layout__mobile-user-info{display:flex;align-items:center}.dashboard-layout__mobile-user-email{font-size:var(--font-size-xs);color:var(--color-text-muted);max-width:var(--space-30);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media (max-width:480px){.dashboard-layout__mobile-user-info{display:none}.dashboard-layout__mobile-header{justify-content:flex-start}.dashboard-layout__mobile-title{text-align:left;padding-left:var(--space-3)}}.dashboard-layout__sidebar-footer{padding:var(--space-xl) var(--space-lg) var(--space-2xl);border-top:1px solid var(--color-border-light);margin-top:auto}.user-dashboard-sidebar>div:last-child{padding:var(--space-xl) var(--space-lg) var(--space-2xl);border-top:1px solid var(--color-border-light);margin-top:auto}.dashboard-layout__logout-btn-mobile{margin-bottom:var(--space-lg)}.dashboard-main-grid,.dashboard-main__grid{display:flex;flex-direction:column;gap:var(--space-xl)}.form-group{margin-bottom:var(--space-6)}.form-group label{font-size:var(--font-size-base);margin-bottom:var(--space-2)}.form-group input,.form-group select,.form-group textarea{min-height:44px;font-size:var(--font-size-base);padding:var(--space-3)}}/* All dashboard content styles have been moved to their respective component files:* - Stats:components/dashboard-stats.css * - Grid:components/dashboard-content-cards.css * - Content cards:components/dashboard-content-cards.css * - Activity list:components/dashboard-activity.css */ .quick-actions{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4)}.admin-nav-section{margin:var(--space-xl) var(--space-md) 0;padding:var(--space-lg) 0 0;border-top:2px solid var(--color-border-light);position:relative}.admin-nav-section::before{content:'';position:absolute;top:-2px;left:0;width:60px;height:2px;background:var(--gradient-border-accent)}.admin-nav-title{margin:0 0 var(--space-md) 0;color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:0 var(--space-lg)}@media (min-width:1025px){.dashboard-layout__mobile-header{display:none;margin:0}.dashboard-desktop-header{display:flex}.page-header--app-header{margin-top:0}.dashboard-layout__main{overflow-x:visible;overflow-y:auto}}}/** * Home Page Styles - Minimalist Modern 2025 Korean Design * Strict BEM Methodology with borderless aesthetic,gradient backgrounds,and generous whitespace * Embraces open,airy design with full-width sections and subtle visual hierarchy */ .home{min-height:100vh;background:linear-gradient(180deg,var(--color-bg-secondary) 0%,var(--color-bg-primary) 50%,var(--color-bg-secondary) 100%);padding:0;position:relative;overflow-x:hidden}.home::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 15% 15%,rgba(108,92,231,0.04) 0%,transparent 35%),radial-gradient(circle at 85% 85%,rgba(0,184,148,0.03) 0%,transparent 35%),radial-gradient(circle at 50% 50%,rgba(0,184,148,0.01) 0%,transparent 50%);pointer-events:none;z-index:0;animation:subtlePulse 8s ease-in-out infinite}.home-hero{position:relative;z-index:1;padding:var(--space-24) var(--space-8) var(--space-20);text-align:center;background:linear-gradient(135deg,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.5) 100%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin:var(--space-8);border-radius:var(--radius-2xl);overflow:hidden;box-shadow:0 8px 32px rgba(0,184,148,0.1),0 0 0 1px rgba(255,255,255,0.5) inset}.home-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 0%,var(--korean-teal) 15%,var(--color-primary-500) 50%,var(--korean-teal) 85%,transparent 100%);opacity:0.8;animation:shimmer 3s ease-in-out infinite}.home-hero::after{content:'';position:absolute;top:-100px;right:-150px;width:500px;height:500px;background:radial-gradient(circle at 100% 0%,rgba(0,184,148,0.08) 0%,transparent 65%);pointer-events:none;animation:float 6s ease-in-out infinite}.home-hero__badge{display:inline-block;padding:var(--space-3) var(--space-6);background:linear-gradient(135deg,var(--korean-teal),var(--color-primary-500));color:var(--color-text-inverse);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);letter-spacing:0.8px;margin-bottom:var(--space-8);box-shadow:0 4px 16px rgba(0,184,148,0.3),0 0 0 1px rgba(255,255,255,0.1) inset;animation:fadeInDown 0.6s ease-out,badgePulse 2.5s ease-in-out infinite;text-transform:uppercase;position:relative;transition:transform var(--transition-slow),box-shadow var(--transition-slow),background var(--transition-slow)}@media (hover:hover){.home-hero__badge:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,184,148,0.4),0 0 0 1px rgba(255,255,255,0.2) inset}}.home-hero__title{font-size:clamp(2.5rem,7vw,4.5rem);font-weight:800;letter-spacing:-0.03em;background:linear-gradient(135deg,var(--color-primary-700) 0%,var(--color-primary-500) 30%,var(--korean-teal) 70%,var(--color-primary-500) 100%);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 var(--space-10) 0;animation:gradientShift 6s ease-in-out infinite;position:relative;line-height:1.1;text-shadow:0 2px 20px rgba(0,184,148,0.1)}.home-hero__title::before{content:'🌍';position:absolute;left:-5.5rem;top:50%;transform:translateY(-50%);font-size:clamp(var(--font-size-xl),3vw,var(--font-size-3xl));opacity:0.5;animation:pulse 3s ease-in-out infinite,gentleFloat 4s ease-in-out infinite;filter:drop-shadow(0 2px 8px rgba(0,184,148,0.2))}.home-hero__subtitle{font-size:clamp(var(--font-size-lg),2.5vw,var(--font-size-xl));letter-spacing:-0.01em;animation:fadeInUp 0.8s ease-out 0.2s backwards}.home-hero__actions{animation:fadeInUp 1s ease-out 0.4s backwards}.home-hero__actions .btn--accent{background:linear-gradient(135deg,var(--korean-teal) 0%,var(--color-primary-500) 100%);box-shadow:0 4px 20px rgba(0,184,148,0.3),0 0 0 1px rgba(255,255,255,0.1) inset;font-weight:var(--font-weight-bold);letter-spacing:-0.01em}@media (hover:hover){.home-hero__actions .btn--accent:hover{background:linear-gradient(135deg,#00a67f 0%,var(--color-primary-600) 100%);box-shadow:0 6px 28px rgba(0,184,148,0.4),0 0 0 1px rgba(255,255,255,0.2) inset;transform:translateY(-3px)}}.home-hero__actions .btn--secondary{background:rgba(108,92,231,0.1);backdrop-filter:blur(8px);color:var(--color-primary-600);box-shadow:0 4px 16px rgba(108,92,231,0.15),0 0 0 1px rgba(108,92,231,0.2) inset;font-weight:var(--font-weight-bold);letter-spacing:-0.01em}@media (hover:hover){.home-hero__actions .btn--secondary:hover{background:rgba(108,92,231,0.15);color:var(--color-primary-700);box-shadow:0 6px 24px rgba(108,92,231,0.25),0 0 0 1px rgba(108,92,231,0.3) inset;transform:translateY(-3px)}}.home-hero__hint{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin:0;font-weight:500;animation:fadeInUp 1.2s ease-out 0.6s backwards;padding:var(--space-3) var(--space-5);background:rgba(0,184,148,0.04);border-radius:var(--radius-lg);display:inline-block}.home-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-8);padding:var(--space-20) var(--space-8) var(--space-24);max-width:1400px;margin:0 auto;background:transparent;position:relative;z-index:1}.home-stats__card{background:linear-gradient(135deg,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.3) 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-2xl);padding:var(--space-12) var(--space-8);min-height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden;transition:all var(--transition-slow);box-shadow:0 4px 12px rgba(0,0,0,0.04),0 0 0 1px rgba(255,255,255,0.5) inset}.home-stats__card::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%) scaleX(0);width:100%;height:3px;background:linear-gradient(90deg,transparent 0%,var(--korean-teal) 25%,var(--color-primary-500) 75%,transparent 100%);transition:transform var(--transition-slow)}.home-stats__card::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:300px;height:300px;background:radial-gradient(circle,rgba(0,184,148,0.08) 0%,transparent 70%);transition:transform var(--transition-slow);pointer-events:none}@media (hover:hover){.home-stats__card:hover{background:linear-gradient(135deg,rgba(0,184,148,0.12) 0%,rgba(108,92,231,0.06) 100%);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transform:translateY(-8px) scale(1.02);box-shadow:0 16px 36px rgba(0,184,148,0.15),0 0 0 1px rgba(255,255,255,0.8) inset}.home-stats__card:hover::before{transform:translateX(-50%) scaleX(0.75)}.home-stats__card:hover::after{transform:translate(-50%,-50%) scale(1)}.home-stats__card:hover .home-stats__icon{transform:scale(1.1) rotate(5deg)}}.home-stats__icon{font-size:clamp(3rem,5vw,4rem);margin-bottom:var(--space-6);display:block;filter:drop-shadow(0 2px 8px rgba(0,184,148,0.15));transition:transform var(--transition-slow)}.home-stats__number{font-size:clamp(var(--font-size-lg),2vw,var(--font-size-2xl))}.home-welcome{background:linear-gradient(180deg,var(--color-bg-primary) 0%,rgba(0,184,148,0.02) 100%);padding:var(--space-20) var(--space-8);margin:0;position:relative;overflow:hidden;transition:transform 0.3s ease,opacity 0.3s ease,background 0.3s ease}.home-welcome::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--color-primary-500) 25%,var(--korean-teal) 50%,var(--color-primary-500) 75%,transparent 100%)}.home-welcome::after{content:'';position:absolute;top:0;right:-150px;width:500px;height:500px;background:radial-gradient(circle at 100% 0%,rgba(0,184,148,0.06) 0%,transparent 60%);pointer-events:none}.home-welcome__header{position:relative;max-width:1200px;margin-left:auto;margin-right:auto}.home-welcome__title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;letter-spacing:-0.01em;color:var(--color-text-primary);margin:0;background:linear-gradient(135deg,var(--color-primary-600),var(--korean-teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.home-welcome__meta{background:linear-gradient(135deg,rgba(0,184,148,0.06) 0%,rgba(108,92,231,0.04) 100%);line-height:1.5;position:relative;max-width:1200px;margin-left:auto;margin-right:auto}.home-welcome__actions{max-width:1200px;margin-left:auto;margin-right:auto}.home-welcome__actions--split{grid-template-columns:auto auto;justify-content:center;gap:var(--space-6)}.home-welcome__actions--right{justify-content:flex-end}.home-welcome__action-card{background:linear-gradient(135deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.4) 100%);backdrop-filter:blur(8px);border-radius:var(--radius-xl);padding:var(--space-10) var(--space-7);text-align:center;transition:transform var(--transition-slow),box-shadow var(--transition-slow),background var(--transition-slow);text-decoration:none;color:var(--color-text-primary);position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.04),0 0 0 1px rgba(255,255,255,0.6) inset;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px}.home-welcome__action-card::before{content:'';position:absolute;bottom:0;left:50%;width:0;height:3px;background:linear-gradient(90deg,var(--korean-teal),var(--color-primary-500),var(--korean-teal));transform:translateX(-50%);transition:width var(--transition-slow);border-radius:var(--radius-full)}.home-welcome__action-card::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(255,255,255,0.2) 0%,transparent 70%);border-radius:var(--radius-full);transform:translate(-50%,-50%);transition:transform var(--transition-slow),box-shadow var(--transition-slow),background var(--transition-slow)}@media (hover:hover){.home-welcome__action-card:hover{background:linear-gradient(135deg,var(--color-primary-500) 0%,var(--korean-teal) 100%);color:var(--color-text-inverse);transform:translateY(-8px) scale(1.04);box-shadow:0 16px 36px rgba(0,184,148,0.25),0 0 0 1px rgba(255,255,255,0.2) inset}.home-welcome__action-card:hover::before{width:75%}.home-welcome__action-card:hover::after{width:300px;height:300px}.home-welcome__action-card:hover .home-welcome__action-icon{transform:scale(1.25) rotate(10deg);filter:drop-shadow(0 6px 12px rgba(255,255,255,0.4))}.home-welcome__action-card:hover .home-welcome__action-title{font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.1)}}.home-welcome__action-icon{font-size:var(--font-size-4xl);margin-bottom:var(--space-5);display:block;transition:transform var(--transition-slow),box-shadow var(--transition-slow),background var(--transition-slow);filter:drop-shadow(0 2px 6px rgba(0,0,0,0.1));line-height:1}.home-welcome__action-title{font-weight:600;margin:0;font-size:var(--font-size-base);letter-spacing:-0.01em;line-height:1.4}.home-features{background:linear-gradient(135deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.4) 100%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:var(--space-24) var(--space-8);margin:var(--space-8);border-radius:var(--radius-2xl);position:relative;z-index:1;box-shadow:0 8px 32px rgba(108,92,231,0.08),0 0 0 1px rgba(255,255,255,0.5) inset}.home-features__title{font-size:clamp(2rem,5vw,2.75rem);font-weight:700;letter-spacing:-0.01em;background:linear-gradient(135deg,var(--color-primary-600),var(--korean-teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 var(--space-6) 0;line-height:1.2}.home-features__item{background:linear-gradient(135deg,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.3) 100%);backdrop-filter:blur(8px);border-radius:var(--radius-2xl);padding:var(--space-12) var(--space-8);transition:transform var(--transition-slow),box-shadow var(--transition-slow),background var(--transition-slow);text-align:center;position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.04),0 0 0 1px rgba(255,255,255,0.5) inset}.home-features__item::before{content:'';position:absolute;bottom:0;left:50%;width:0;height:3px;background:linear-gradient(90deg,var(--korean-teal),var(--color-primary-500),var(--korean-teal));transform:translateX(-50%);transition:width var(--transition-slow);border-radius:var(--radius-full)}.home-features__item::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 0%,rgba(0,184,148,0.06) 0%,transparent 70%);opacity:0;transition:opacity var(--transition-slow)}@media (hover:hover){.home-features__item:hover{background:linear-gradient(135deg,rgba(0,184,148,0.12) 0%,rgba(108,92,231,0.06) 100%);transform:translateY(-8px) scale(1.02);box-shadow:0 16px 36px rgba(0,184,148,0.15),0 0 0 1px rgba(255,255,255,0.8) inset}.home-features__item:hover::before{width:70%}.home-features__item:hover::after{opacity:1}.home-features__item:hover .home-features__icon{transform:scale(1.2) rotate(8deg);filter:drop-shadow(0 6px 16px rgba(0,184,148,0.25))}}.home-features__icon{font-size:clamp(var(--font-size-3xl),4vw,var(--font-size-4xl));margin-bottom:var(--space-6);display:block;transition:transform var(--transition-slow),box-shadow var(--transition-slow),background var(--transition-slow);filter:drop-shadow(0 3px 8px rgba(0,0,0,0.08));line-height:1}.home-features__item-title{font-weight:700;color:var(--color-text-primary);margin:0 0 var(--space-3) 0;font-size:var(--font-size-lg);letter-spacing:-0.005em}.home-features__item-description{color:var(--color-text-secondary);margin:0;font-size:var(--font-size-sm);line-height:1.5;font-weight:500}.home-cta{background:linear-gradient(180deg,var(--color-bg-primary) 0%,rgba(0,184,148,0.02) 100%);padding:var(--space-20) var(--space-8);text-align:center;color:var(--color-text-primary);margin-bottom:0;position:relative;overflow:hidden}.home-cta::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(108,92,231,0.03) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(0,184,148,0.03) 0%,transparent 50%);pointer-events:none}.home-cta::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--color-primary-500) 25%,var(--korean-teal) 50%,var(--color-primary-500) 75%,transparent 100%);z-index:1}@media (hover:hover){.home-cta:hover{background:linear-gradient(180deg,rgba(0,184,148,0.03) 0%,rgba(0,184,148,0.01) 100%)}}.home-cta__title{font-size:clamp(1.875rem,4vw,2.5rem);font-weight:700;margin:0 0 var(--space-6) 0;letter-spacing:-0.01em;background:linear-gradient(135deg,var(--korean-teal) 0%,var(--color-primary-500) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;line-height:1.2}.home-cta__description{margin:0 0 var(--space-10) 0;color:var(--color-text-secondary);font-size:var(--font-size-base);max-width:700px;margin-left:auto;margin-right:auto;font-weight:500;line-height:1.6;position:relative}.home-cta__actions{display:flex;gap:var(--space-5);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-8)}.home-cta__hint{display:inline-flex;align-items:center;gap:var(--space-2);background:rgba(0,184,148,0.06);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:500}.home-cta__hint-text{font-size:var(--font-size-sm)}.home-cta__hint-icon{opacity:0.9}.home-cta__admin-info{background:rgba(0,184,148,0.04);border-radius:var(--radius-md);padding:var(--space-5);text-align:center;margin-top:var(--space-8)}.home-cta__admin-info small{color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:500}.home-stories{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-8);margin-bottom:var(--space-12)}.home-stories__card{background:linear-gradient(135deg,rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.1) 100%);backdrop-filter:blur(8px);border-radius:var(--radius-lg);padding:var(--space-8);transition:transform 0.3s ease,opacity 0.3s ease,background 0.3s ease;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.03)}.home-stories__card::before{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:linear-gradient(90deg,var(--korean-teal),var(--color-primary-500));transform:translateX(-50%);transition:width var(--transition-slow)}@media (hover:hover){.home-stories__card:hover{background:linear-gradient(135deg,rgba(0,184,148,0.08) 0%,rgba(108,92,231,0.04) 100%);transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,184,148,0.12)}.home-stories__card:hover::before{width:60%}}.home-stories__header{margin-bottom:var(--space-5)}.home-stories__title{margin:0 0 var(--space-3) 0;font-size:var(--font-size-lg);color:var(--color-text-primary);line-height:1.3;font-weight:700}.home-stories__meta{display:flex;gap:var(--space-3);flex-wrap:wrap}.home-stories__badge{display:inline-flex;align-items:center;padding:var(--space-1_5) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;line-height:1}.home-stories__badge--language{background:linear-gradient(135deg,var(--korean-teal),var(--color-primary-500));color:var(--color-text-inverse)}.home-stories__badge--level{background:rgba(108,92,231,0.1);color:var(--color-primary-600)}.home-stories__preview{color:var(--color-text-secondary);line-height:1.5;margin-bottom:var(--space-5);font-size:var(--font-size-sm);font-weight:500}.home-stories__actions{display:flex;gap:var(--space-3);margin-bottom:var(--space-4)}.home-stories__date{color:var(--color-text-muted);font-size:var(--font-size-xs);text-align:right;font-weight:500}@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg)}50%{transform:translateY(-12px) rotate(3deg)}}@keyframes gentleFloat{0%,100%{transform:translateY(-50%) translateX(0px)}50%{transform:translateY(-50%) translateX(4px)}}@keyframes pulse{0%,100%{opacity:0.5;transform:scale(1)}50%{opacity:0.8;transform:scale(1.08)}}@keyframes badgePulse{0%,100%{box-shadow:0 4px 16px rgba(0,184,148,0.3),0 0 0 1px rgba(255,255,255,0.1) inset}50%{box-shadow:0 6px 24px rgba(0,184,148,0.4),0 0 0 1px rgba(255,255,255,0.2) inset}}@keyframes shimmer{0%,100%{opacity:0.6}50%{opacity:1}}@keyframes subtlePulse{0%,100%{opacity:1}50%{opacity:0.8}}@media (max-width:768px){.home{padding:0}.home-hero{padding:var(--space-14) var(--space-6)}.home-hero::after{width:400px;height:400px;right:-100px}.home-hero__badge{font-size:var(--font-size-xs);padding:var(--space-2) var(--space-5);margin-bottom:var(--space-5)}.home-hero__title{font-size:var(--font-size-2xl);margin-bottom:var(--space-5)}.home-hero__title::before{left:-3rem;font-size:var(--font-size-lg)}.home-hero__subtitle{font-size:var(--font-size-base);margin-bottom:var(--space-8)}.home-hero__actions{flex-direction:column;gap:var(--space-3);width:100%;max-width:none;margin:0 0 var(--space-6)}.home-features{padding:var(--space-16) var(--space-6)}.home-features__header{margin-bottom:var(--space-12)}.home-features__title{font-size:var(--font-size-2xl);margin-bottom:var(--space-3)}.home-features__grid{grid-template-columns:1fr;gap:var(--space-6)}.home-features__item{padding:var(--space-8) var(--space-6)}.home-stats{grid-template-columns:repeat(2,1fr);gap:var(--space-5);padding:var(--space-12) var(--space-6) var(--space-16)}.home-stats__card{padding:var(--space-8) var(--space-6);min-height:160px}.home-welcome{margin:0;padding:var(--space-12) var(--space-6)}.home-welcome::after{width:400px;height:400px;right:-100px}.home-welcome__header{margin-bottom:var(--space-6);flex-direction:column;text-align:center}.home-welcome__title{font-size:var(--font-size-xl)}.home-welcome__meta{font-size:var(--font-size-sm);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-8)}.home-welcome__actions{grid-template-columns:1fr;gap:var(--space-4)}.home-welcome__actions--split{grid-template-columns:1fr}.home-welcome__action-card{padding:var(--space-8) var(--space-5)}.home-welcome__action-icon{font-size:var(--font-size-2xl)}.home-welcome__action-title{font-size:var(--font-size-sm)}.home-stories{grid-template-columns:1fr;gap:var(--space-6)}.home-stories__card{padding:var(--space-6)}.home-stories__title{font-size:var(--font-size-base)}.home-stories__actions{flex-direction:column}.home-cta{padding:var(--space-12) var(--space-6)}.home-cta__title{font-size:var(--font-size-xl);margin-bottom:var(--space-5)}.home-cta__description{font-size:var(--font-size-sm);margin-bottom:var(--space-8)}.home-cta__actions{flex-direction:column;gap:var(--space-3)}}@media (max-width:480px){.home-hero{padding:var(--space-12) var(--space-4)}.home-stats{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-10) var(--space-4) var(--space-12)}.home-stats__card{padding:var(--space-6) var(--space-4);min-height:140px}.home-welcome{padding:var(--space-10) var(--space-4)}.home-welcome__header{gap:var(--space-4)}.home-welcome__meta{font-size:var(--font-size-xs)}.home-features{padding:var(--space-12) var(--space-4)}.home-features__header{margin-bottom:var(--space-10)}}/** * Home Page Styles * Minimal page-specific styles - most styling should use utilities * See app/css/CSS_GUIDE.md for utility-first approach */ @layer overrides{.page-footer{text-align:center;margin-top:var(--space-4xl);padding-top:var(--space-2xl);border-top:1px solid var(--border-light)}.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-2xl);margin-bottom:var(--space-3xl)}.story-preview-header{margin-bottom:var(--space-lg)}.story-preview-header h3{margin:0 0 var(--space-md) 0;font-size:var(--text-xl);color:var(--color-text-primary);line-height:1.3}.story-meta{display:flex;gap:var(--space-md);flex-wrap:wrap}.story-preview{color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-xl);font-size:var(--text-base)}.story-date{color:var(--color-text-muted);font-size:var(--text-sm);text-align:right}@media (max-width:768px){.stories-grid{grid-template-columns:1fr;gap:var(--space-xl)}}}