/** * CSS Cascade Layers for Better Specificity Management * * Layer order (later layers override earlier ones):* 1. base - Reset,normalize,and base element styles * 2. components - Reusable component styles (BEM methodology) * 3. utilities - Utility classes for spacing,display,etc. * 4. overrides - Page-specific overrides and high-specificity styles */ @layer base,components,utilities,overrides;@layer base{*,*::before,*::after{box-sizing:border-box}body{font-family:var(--font-primary);font-size:var(--text-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-bg-secondary)}a{text-decoration:none;transition:color var(--transition-fast)}@media (hover:hover){a:hover:not(.filter-tag){color:var(--color-primary-600)}}button:not(.btn):not([class*="btn-"]){font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0;border:none;cursor:pointer}input:not([class]),select:not([class]),textarea:not([class]){font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0;border:none;background:none}}@layer components{/* NOTE:Component styles moved to /css/components/ directory * - Cards:components/cards.css * - Buttons:components/buttons.css * - Badges:components/badges.css * - Tables:components/tables.css * - Forms:components/forms.css * - Alerts:components/alerts.css * - Filter Tags:components/filter-tag.css * * This file contains only structural/layout components that don't warrant separate files */ .page__icon{font-size:var(--font-size-2xl);color:var(--color-primary-500);background:none;border:none;outline:none;box-shadow:none;padding:0;margin:0;display:inline-block;line-height:1;font-style:normal;font-variant:normal;text-rendering:auto;text-shadow:none;filter:none}.css-layers-test{background-color:var(--color-primary-500);color:var(--color-text-inverse);padding:var(--space-2);border-radius:var(--radius-md);font-size:var(--font-size-sm)}}/* ===== BEM MAPPINGS (Components) ===== Introduce BEM-style component classes while preserving existing markup. We map new BEM classes to current selectors so adoption can be incremental. */ @layer components{.story-view__layout,.story-layout-container{display:grid;gap:2rem}.story-view__interactive-card,.interactive-card{background:var(--color-bg-card);border:1px solid var(--color-border-light);border-radius:var(--radius-sm)}.story-view__badge,.badge{border-radius:var(--radius-full);font-weight:600}.dashboard__sidebar{background:var(--color-bg-card);border-right:1px solid var(--color-border-light)}.dashboard__main{background:var(--color-bg-secondary);overflow-y:auto}.dashboard__content-header{padding:1.5rem;border-bottom:1px solid var(--color-border-light);background:var(--color-bg-hover)}.dashboard__content-body{padding:1.5rem}/* Breadcrumbs - DEPRECATED:Use utilities instead * Refactored to:flex items-center gap-2 mb-6 text-sm text-muted * Links:text-primary-500 no-underline hover:underline * Separator:text-muted */ .breadcrumbs{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.5rem;font-size:var(--font-size-sm);color:var(--color-text-muted)}.breadcrumbs__link{color:var(--color-primary-500);text-decoration:none}@media (hover:hover){.breadcrumbs__link:hover{text-decoration:underline}}.breadcrumbs__separator{color:var(--color-text-muted);display:inline-block !important;vertical-align:middle !important;line-height:inherit !important;margin:0 !important;padding:0 !important;font-size:inherit !important}}@layer overrides{.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media print{.no-print,.language-switcher,.nav-links,.story-actions,.dashboard__sidebar,.breadcrumbs,.header-actions,.interactive-column{display:none}.card,.story-content-card{box-shadow:none;border:1px solid var(--color-border-light)}.story-content-body{padding:0}body{background:var(--color-bg-primary);color:var(--color-text-primary)}}}@media (min-width:768px){@layer utilities{.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.md\:flex-col{flex-direction:column}.md\:text-sm{font-size:var(--font-size-sm)}.md\:p-4{padding:var(--space-4)}.md\:gap-4{gap:var(--space-4)}}}@media (min-width:1280px){@layer utilities{.xl\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.xl\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.xl\:gap-6{gap:var(--space-6)}.xl\:gap-8{gap:var(--space-8)}}}:root{--color-primary-50:#f0f4ff;--color-primary-100:#e0e7ff;--color-primary-200:#c7d2fe;--color-primary-300:#a5b4fc;--color-primary-400:#818cf8;--color-primary-500:#667eea;--color-primary-600:#5a67d8;--color-primary-700:#4c51bf;--color-primary-800:#434190;--color-primary-900:#3c366b;--accent-color:var(--color-success-600);--accent-dark:var(--color-success-700);--korean-purple:#6c5ce7;--korean-teal:#00b894;--korean-orange:#fdcb6e;--korean-light-green:#a8e6cf;--korean-blue:#74b9ff;--korean-red:#d73027;--korean-orange-red:#f46d43;--korean-light-orange:#fdae61;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-success-50:#f0fdf4;--color-success-500:#22c55e;--color-success-600:#16a34a;--color-success-700:#15803d;--color-warning-50:#fffbeb;--color-warning-500:#f59e0b;--color-warning-600:#d97706;--color-warning-700:#b45309;--color-error-50:#fef2f2;--color-error-500:#ef4444;--color-error-600:#dc2626;--color-error-700:#b91c1c;--color-info-50:#eff6ff;--color-info-500:#3b82f6;--color-info-600:#2563eb;--color-info-700:#1d4ed8;--color-bg-primary:#ffffff;--color-bg-secondary:#f8fafc;--color-bg-tertiary:#f1f5f9;--color-bg-card:#ffffff;--color-bg-overlay:rgba(0,0,0,0.5);--color-bg-subtle:var(--color-gray-50);--color-bg-hover:var(--color-gray-100);--color-text-primary:#1f2937;--color-text-secondary:#6b7280;--color-text-tertiary:#9ca3af;--color-text-inverse:#ffffff;--color-text-muted:#6b7280;--color-border-light:#e5e7eb;--color-border-medium:#d1d5db;--color-border-dark:#9ca3af;--color-border-focus:var(--color-primary-500);--font-primary:system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'DejaVu Sans',Arial,sans-serif;--font-family-sans:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-family-korean:'Noto Sans KR',sans-serif;--font-family-mono:'Monaco','Menlo','Ubuntu Mono',monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--text-base:1rem;--text-sm:0.875rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-fluid-xs:clamp(0.625rem,2vw,0.75rem);--font-size-fluid-sm:clamp(0.75rem,2.5vw,0.875rem);--font-size-fluid-base:clamp(0.875rem,3vw,1rem);--font-size-fluid-lg:clamp(1rem,3.5vw,1.125rem);--font-size-fluid-xl:clamp(1.125rem,4vw,1.25rem);--font-size-fluid-2xl:clamp(1.25rem,4.5vw,1.5rem);--font-size-fluid-3xl:clamp(1.5rem,5vw,1.875rem);--font-size-fluid-4xl:clamp(1.875rem,6vw,2.25rem);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.75;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0;--letter-spacing-wide:0.025em;--space-0:0;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-18:4.5rem;--space-20:5rem;--space-24:6rem;--space-3xl:1.875rem;--space-13:3.25rem;--space-14:3.5rem;--space-30:7.5rem;--space-45:11.25rem;--space-xs:0.125rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-1_5:0.375rem;--space-2_5:0.625rem;--space-3_5:0.875rem;--section-gap:2.5rem;--btn-secondary-bg:var(--color-gray-200);--btn-secondary-bg-hover:var(--color-gray-300);--btn-secondary-text:var(--color-text-primary);--radius-none:0;--radius-sm:0.125rem;--radius-base:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-base:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,0.25);--shadow-inner:inset 0 2px 4px 0 rgba(0,0,0,0.06);--transition-fast:150ms ease-in-out;--transition-base:200ms ease-in-out;--transition-slow:300ms ease-in-out;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-overlay:1040;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--z-toast:1080;--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;--breakpoint-2xl:1536px;--sidebar-width:250px;--sidebar-width-mobile:280px;--gradient-bg-primary:var(--color-bg-primary);--gradient-bg-secondary:var(--color-bg-secondary);--gradient-primary:var(--color-primary-600);--gradient-success:var(--color-success-600);--gradient-error:var(--color-error-600);--gradient-warning:var(--color-warning-600);--shadow-card:0 1px 3px rgba(0,0,0,0.04);--shadow-card-hover:0 2px 6px rgba(0,0,0,0.06);--shadow-input:0 1px 2px rgba(0,0,0,0.04);--shadow-button:0 1px 2px rgba(0,0,0,0.05);--filter-tag-bg-default:var(--color-gray-100);--filter-tag-bg-hover:var(--color-gray-200);--filter-tag-bg-active:var(--color-primary-600);--filter-tag-text-default:var(--color-gray-600);--filter-tag-text-active:var(--color-text-inverse);--filter-tag-border:var(--color-border-light);--filter-tag-border-active:var(--color-primary-600);--card-bg:var(--color-bg-card);--card-border:var(--color-border-light);--card-shadow:var(--shadow-base);--card-shadow-hover:var(--shadow-md);--btn-primary-bg:var(--color-primary-500);--btn-primary-bg-hover:var(--color-primary-600);--btn-primary-text:var(--color-text-inverse);--btn-secondary-bg:var(--color-gray-100);--btn-secondary-bg-hover:var(--color-gray-200);--btn-secondary-text:var(--color-text-primary);--input-bg:var(--color-bg-primary);--input-border:var(--color-border-medium);--input-border-focus:var(--color-border-focus);--input-text:var(--color-text-primary);--input-placeholder:var(--color-text-tertiary);--gradient-primary:var(--color-primary-600);--gradient-primary-horizontal:var(--color-primary-600);--gradient-accent:var(--korean-teal);--gradient-accent-horizontal:var(--korean-teal);--gradient-bg-subtle:var(--color-bg-secondary);--gradient-bg-light:var(--color-bg-primary);--glass-bg-primary:var(--color-bg-card);--glass-bg-secondary:var(--color-bg-card);--glass-bg-subtle:var(--color-bg-secondary);--glass-shadow-base:0 1px 3px rgba(0,0,0,0.04);--glass-shadow-hover:0 2px 4px rgba(0,0,0,0.06);--glass-shadow-strong:0 2px 6px rgba(0,0,0,0.08);--korean-hover-subtle:var(--color-gray-50);--korean-hover-medium:var(--color-gray-100);--korean-hover-strong:var(--color-gray-100);--gradient-text-primary:var(--color-primary-600);--gradient-text-accent:var(--korean-teal);--gradient-border-korean:var(--color-border-light);--gradient-bg-card:var(--color-bg-card);--gradient-border-primary:var(--color-primary-500);--gradient-border-accent:var(--korean-teal);--glass-base-bg:var(--color-bg-card);--glass-base-blur:none;--glass-base-radius:var(--radius-xl);--glass-base-shadow:var(--glass-shadow-base);--glass-base-transition:background-color var(--transition-base);--glass-optimized-bg:var(--color-bg-card);--glass-optimized-bg-hover:var(--color-gray-50);--glass-optimized-shadow:var(--shadow-sm);--glass-optimized-shadow-hover:var(--shadow-base);--glass-optimized-transition:background-color 0.15s ease;--glass-hover-bg:var(--color-gray-50);--glass-hover-shadow:var(--glass-shadow-hover);--glass-hover-scale:none;--glass-hover-lift:none;--glass-shadow-subtle:0 1px 2px rgba(0,0,0,0.04);--glass-border-bg:var(--color-border-light);--glass-border-height:1px;--glass-border-transition:none;--gradient-text-bg:var(--color-primary-600);--gradient-text-clip:unset;--z-header:100}/* @media (prefers-color-scheme:dark){:root{--color-bg-primary:#1f2937;--color-bg-secondary:#111827;--color-bg-tertiary:#0f172a;--color-bg-card:#1f2937;--color-text-primary:#f9fafb;--color-text-secondary:#d1d5db;--color-text-tertiary:#9ca3af;--color-border-light:#374151;--color-border-medium:#4b5563;--color-border-dark:#6b7280;--card-bg:var(--color-bg-card);--card-border:var(--color-border-light);--filter-tag-bg-default:var(--color-gray-800);--filter-tag-bg-hover:var(--color-gray-700);--filter-tag-text-default:var(--color-gray-300)}}*/ /* * Global Styles for Language Learning Platform * Clean,minimal design */ *,*::before,*::after{box-sizing:border-box}body{font-family:var(--font-primary);font-size:var(--text-base);line-height:1.6;color:var(--color-text-primary);background:var(--color-bg-primary);min-height:100vh;padding:0;margin:0}@media (min-width:768px){body{background:var(--color-bg-secondary);padding:var(--space-8) var(--space-6)}}@media (min-width:1024px){body{padding:var(--space-12) var(--space-8)}}@media (hover:none) and (pointer:coarse){button:not(.btn):not([class*="btn-"]),a{min-height:44px;min-width:44px}}@media (max-width:767px){h1{font-size:var(--text-2xl)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-lg)}.container{padding:var(--space-4)}.card{padding:var(--space-4)}input,select,textarea{min-height:48px;font-size:16px;padding:var(--space-3)}button:not(.btn):not([class*="btn-"]){min-height:48px;font-size:16px;padding:var(--space-3) var(--space-4)}}.content-section{margin:var(--section-gap) 0}.content-section:first-child{margin-top:0}.content-section:last-child{margin-bottom:0}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 2px rgba(102,126,234,0.15)}.section-divider{width:100%;height:1px;background:var(--color-border-light);margin:var(--space-8) 0;border:none}.loading-skeleton{background:var(--color-gray-100);animation:loading-skeleton 1.5s ease-in-out infinite}@keyframes loading-skeleton{0%,100%{opacity:1}50%{opacity:0.5}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.btn:focus-visible,button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.checkbox-label{display:flex;align-items:center;gap:0.5rem;cursor:pointer;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0.5rem 0}.checkbox-label input[type="checkbox"]{width:var(--font-size-base);height:var(--font-size-base);cursor:pointer;accent-color:var(--color-primary-500)}@media (hover:hover){.checkbox-label:hover{color:var(--color-text-primary)}}@media print{.language-switcher,.nav-links{display:none}.card{box-shadow:none;border:1px solid var(--color-border-light)}body{background:var(--color-bg-primary);color:var(--color-text-primary)}}/** * Utility Classes * Common utility classes for layout,spacing,and common patterns * Consolidated from global.css and layers.css for single source of truth */ @layer utilities{.loading-state{opacity:0.3;pointer-events:none;transition:opacity 0.2s ease}.scroll-optimized{contain:layout style paint;content-visibility:auto;transform:translateZ(0)}.emoji-sm{font-size:var(--font-size-base)}.emoji-md{font-size:var(--font-size-2xl)}.emoji-lg{font-size:var(--font-size-2xl)}.emoji-xl{font-size:var(--font-size-3xl)}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:1.5rem}.gap-8{gap:var(--space-8)}.gap-0{gap:0}.gap-0\.5{gap:var(--space-xs)}.gap-1\.5{gap:var(--space-1_5)}.gap-2\.5{gap:var(--space-2_5)}.gap-3\.5{gap:var(--space-3_5)}.gap-5{gap:var(--space-5)}.gap-7{gap:1.75rem}.gap-9{gap:2.25rem}.gap-10{gap:var(--space-10)}.gap-12{gap:var(--space-12)}.m-0{margin:0}.mt-1{margin-top:0.25rem}.mt-2{margin-top:0.5rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mb-1{margin-bottom:0.25rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:var(--space-5)}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:var(--space-10)}.mb-12{margin-bottom:var(--space-12)}.mb-18{margin-bottom:var(--space-18)}.mb-2xl{margin-bottom:var(--space-2xl)}.mx-auto{margin-left:auto;margin-right:auto}.p-0{padding:0}.p-1{padding:var(--space-1)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-6{padding:1.5rem}.p-8{padding:var(--space-8)}.p-10{padding:var(--space-10)}.p-12{padding:var(--space-12)}.p-20{padding:var(--space-20)}.p-24{padding:var(--space-24)}.space-y-2>* + *{margin-top:0.5rem}.list-none{list-style:none}.list-disc{list-style-type:disc}.uppercase{text-transform:uppercase}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-mono{font-family:var(--font-family-mono)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.text-success{color:var(--success-color)}.text-error{color:var(--error-color)}.text-warning{color:var(--warning-color)}.text-primary-500{color:var(--color-primary-500)}.no-underline{text-decoration:none}.bg-primary{background-color:var(--color-primary-500)}.bg-secondary{background-color:var(--color-success-600)}.bg-light{background-color:var(--color-bg-hover)}.bg-card{background-color:var(--color-bg-card)}.bg-primary-50{background-color:var(--color-primary-50)}.bg-primary-500{background-color:var(--color-primary-500)}.border{border:1px solid var(--color-border-light)}.border-light{border:1px solid var(--border-light)}.border-t{border-top:1px solid var(--color-border-light)}.border-b{border-bottom:1px solid var(--color-border-light)}.border-l{border-left:1px solid var(--color-border-light)}.border-r{border-right:1px solid var(--color-border-light)}.border-2{border-width:2px}.border-l-4{border-left-width:4px}.border-border-light{border-color:var(--color-border-light)}.border-primary-300{border-color:var(--color-primary-300)}.border-primary-500{border-color:var(--color-primary-500)}.border-white\/20{border-color:rgba(255,255,255,0.2)}.rounded{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-full{border-radius:var(--radius-full)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.w-full{width:100%}.w-auto{width:auto}.w-fit{width:fit-content}.max-w-7xl{max-width:80rem}.max-w-800{max-width:800px}.max-w-500{max-width:500px}.w-5{width:1.25rem}.w-20{width:5rem}.w-24{width:6rem}.min-w-0{min-width:0}.h-full{height:100%}.h-auto{height:auto}.h-fit{height:fit-content}.h-5{height:1.25rem}.h-20{height:5rem}.h-24{height:6rem}.min-h-12{min-height:3rem}.min-h-48{min-height:12rem}.min-h-50{min-height:12.5rem}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.hidden{display:none}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.overflow-hidden{overflow:hidden}.overflow-hidden-responsive{overflow:hidden}@media (max-width:768px){.overflow-hidden-responsive{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;width:100%}}.overflow-auto{overflow:auto}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.accent-primary-500{accent-color:var(--color-primary-500)}.opacity-50{opacity:0.5}.opacity-0{opacity:0}.opacity-25{opacity:0.25}.opacity-50{opacity:0.5}.opacity-75{opacity:0.75}.opacity-100{opacity:1}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.p-0{padding:var(--space-0)}.p-1{padding:var(--space-1)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.p-10{padding:var(--space-10)}.p-12{padding:var(--space-12)}.px-2{padding-left:var(--space-2);padding-right:var(--space-2)}.px-3-5{padding-left:var(--space-3_5);padding-right:var(--space-3_5)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}.px-8{padding-left:var(--space-8);padding-right:var(--space-8)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}.py-3-5{padding-top:var(--space-3_5);padding-bottom:var(--space-3_5)}.py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}.py-5{padding-top:var(--space-5);padding-bottom:var(--space-5)}.py-6{padding-top:var(--space-6);padding-bottom:var(--space-6)}.py-12{padding-top:var(--space-12);padding-bottom:var(--space-12)}.py-16{padding-top:var(--space-16);padding-bottom:var(--space-16)}.pt-5{padding-top:var(--space-5)}.pb-5{padding-bottom:var(--space-5)}.pb-16{padding-bottom:var(--space-16)}.pb-20{padding-bottom:var(--space-20)}.pb-24{padding-bottom:var(--space-24)}.m-0{margin:var(--space-0)}.m-1{margin:var(--space-1)}.m-2{margin:var(--space-2)}.m-4{margin:var(--space-4)}.m-6{margin:var(--space-6)}.m-8{margin:var(--space-8)}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)}.mb-6{margin-bottom:var(--space-6)}.mt-0{margin-top:0}.mt-1{margin-top:var(--space-1)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.text-xs{font-size:var(--font-size-xs);line-height:var(--line-height-tight)}.text-sm{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.text-base{font-size:var(--font-size-base);line-height:var(--line-height-normal)}.text-lg{font-size:var(--font-size-lg);line-height:var(--line-height-normal)}.text-xl{font-size:var(--font-size-xl);line-height:var(--line-height-tight)}.text-2xl{font-size:var(--font-size-2xl);line-height:var(--line-height-tight)}.text-3xl{font-size:var(--font-size-3xl);line-height:var(--line-height-tight)}.text-4xl{font-size:var(--font-size-4xl);line-height:var(--line-height-tight)}.text-5xl{font-size:clamp(var(--font-size-lg),2vw,var(--font-size-2xl))}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.leading-tight{line-height:var(--line-height-tight)}.leading-normal{line-height:var(--line-height-normal)}.leading-relaxed{line-height:var(--line-height-relaxed)}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,1fr)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.grid-auto-fit{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.grid-auto-fit-sm{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.grid-auto-fit-lg{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.rounded{border-radius:var(--radius-base)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow-base)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.transition{transition:transform var(--transition-base),opacity var(--transition-base),box-shadow var(--transition-base)}.transition-all{transition:transform var(--transition-base),opacity var(--transition-base),box-shadow var(--transition-base)}.transition-fast{transition:transform var(--transition-fast),opacity var(--transition-fast),box-shadow var(--transition-fast)}.transition-slow{transition:transform var(--transition-slow),opacity var(--transition-slow),box-shadow var(--transition-slow)}@media (hover:hover){.hover\:shadow-md:hover{box-shadow:var(--shadow-md)}.hover\:shadow-lg:hover{box-shadow:var(--shadow-lg)}.hover\:-translate-y-1:hover{transform:translateY(-1px)}.hover\:underline:hover{text-decoration:underline}.hover\:border-primary-300:hover{border-color:var(--color-primary-300)}.hover\:bg-primary-50:hover{background-color:var(--color-primary-50)}.hover-lift:hover{transform:translateY(-1px)}.hover-lift-lg:hover{transform:translateY(-2px)}.icon-hover-scale:hover{transform:scale(1.05)}}.icon-hover-scale{transition:transform 0.15s ease}.focus\:outline-primary:focus{outline:2px solid var(--color-primary-500);outline-offset:2px}.focus\:ring-primary:focus{box-shadow:0 0 0 3px rgba(102,126,234,0.1)}.focus-visible\:outline-primary:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.animate-fade-in-up{animation:fadeInUp 0.6s ease-out}.animate-fade-in-up--initial{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}.animate-fade-in-up{opacity:1;transform:translateY(0)}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.hover-lift,.hover-lift-lg,.icon-hover-scale,.transition,.transition-fast,.transition-slow,.animate-fade-in-up{transition:none !important;transform:none !important;animation:none !important}}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.md\:grid-cols-4{grid-template-columns:repeat(4,1fr)}.md\:flex-col{flex-direction:column}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:text-sm{font-size:var(--font-size-sm)}.md\:text-base{font-size:var(--font-size-base)}.md\:text-lg{font-size:var(--font-size-lg)}.md\:text-2xl{font-size:var(--font-size-2xl)}.md\:text-3xl{font-size:var(--font-size-3xl)}.md\:text-4xl{font-size:var(--font-size-4xl)}.md\:p-4{padding:var(--space-4)}.md\:p-8{padding:var(--space-8)}.md\:p-10{padding:var(--space-10)}.md\:p-12{padding:var(--space-12)}.md\:p-16{padding:var(--space-16)}.md\:gap-4{gap:var(--space-4)}.md\:gap-6{gap:var(--space-6)}.md\:gap-8{gap:var(--space-8)}.md\:mb-6{margin-bottom:1.5rem}.md\:mb-8{margin-bottom:2rem}.md\:pb-20{padding-bottom:var(--space-20)}.md\:min-h-50{min-height:12.5rem}.md\:block{display:block}.md\:hidden{display:none}.md\:text-left{text-align:left}.md\:w-24{width:6rem}.md\:h-24{height:6rem}.md\:max-w-6xl{max-width:72rem}.md\:max-w-5xl{max-width:64rem}}@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.lg\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}@media (min-width:1280px){.xl\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.xl\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.xl\:grid-cols-4{grid-template-columns:repeat(4,1fr)}.xl\:grid-cols-5{grid-template-columns:repeat(5,1fr)}.xl\:gap-6{gap:var(--space-6)}.xl\:gap-8{gap:var(--space-8)}.xl\:gap-10{gap:var(--space-10)}.xl\:p-12{padding:var(--space-12)}.xl\:p-16{padding:var(--space-16)}.xl\:p-20{padding:var(--space-20)}.xl\:p-24{padding:var(--space-24)}.xl\:pb-24{padding-bottom:var(--space-24)}.xl\:text-2xl{font-size:var(--font-size-2xl)}.xl\:max-w-6xl{max-width:72rem}.xl\:max-w-7xl{max-width:80rem}}@media (min-width:640px){.sm\:hidden{display:none}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:flex-col{flex-direction:column}.sm\:flex-row{flex-direction:row}.sm\:text-center{text-align:center}.sm\:text-left{text-align:left}.sm\:gap-1{gap:var(--space-1)}.sm\:gap-2{gap:var(--space-2)}.sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.sm\:w-auto{width:auto}}.grid>*{min-width:0;width:100%}}/** * Card Utility Classes * Clean,minimal card styles - borderless design with whitespace * * Usage:Apply these classes to card components * Example:<div class="glass-card p-6">Content</div>*/ @layer utilities{.glass-card{background:var(--color-bg-card);border:none;border-radius:var(--radius-xl);box-shadow:0 1px 3px rgba(0,0,0,0.04);position:relative;overflow:visible}.glass-card--static{content-visibility:auto}.glass-card--subtle{background:var(--color-bg-secondary);box-shadow:none}.glass-card--secondary{background:var(--color-bg-secondary)}@media (hover:hover){.glass-card--hover:hover{background:var(--color-gray-50)}}@media (hover:none){.glass-card--hover:hover{background:var(--color-bg-card)}}.glass-card--border{border-left:3px solid var(--color-primary-500)}.glass-card--header{z-index:var(--z-popover);overflow:visible}@media (max-width:768px){.glass-card--header{z-index:var(--z-sticky)}}.glass-top-accent{position:relative}.glass-top-accent::before{display:none}.glass-top-accent--no-hover{}@media (prefers-reduced-motion:reduce){.glass-card{transition:none}}.glass-text{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.glass-text:lang(el),[lang^="el"] .glass-text{color:var(--color-text-primary)}.glass-text--accent{color:var(--korean-teal)}.glass-text--accent:lang(el),[lang^="el"] .glass-text--accent{color:var(--korean-teal)}.glass-dropdown{background:var(--color-bg-card);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown)}@media (max-width:768px){.glass-card{border-radius:var(--radius-lg)}.glass-card.p-6{padding:var(--space-5)}.glass-card.p-8{padding:var(--space-6)}.glass-card.mb-8{margin-bottom:var(--space-6)}}@media (max-width:480px){.glass-card.p-6,.glass-card.p-8{padding:var(--space-4)}.glass-card .grid{grid-template-columns:1fr}}}@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}}/** * Badge Component - Minimal Design * Clean,simple badges without borders or gradients */ @layer components{.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2_5);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:0.03em;line-height:1.2;white-space:nowrap}.badge--language{background:var(--color-primary-100);color:var(--color-primary-700)}.badge--proficiency{background:var(--color-success-50);color:var(--color-success-700)}.badge--level{background:var(--color-success-50);color:var(--color-success-700)}.badge--primary{background:var(--color-primary-600);color:var(--color-text-inverse)}.badge--success{background:var(--color-success-600);color:var(--color-text-inverse)}.badge--warning{background:var(--color-warning-100);color:var(--color-warning-700)}.badge--error{background:var(--color-error-100);color:var(--color-error-700)}.badge--secondary{background:var(--color-gray-100);color:var(--color-gray-700)}.badge--neutral{background:var(--color-gray-100);color:var(--color-gray-600);white-space:normal;word-wrap:break-word;max-width:100%;line-height:1.3}.badge--accent{background:rgba(0,184,148,0.1);color:var(--color-success-700)}.badge--purple{background:var(--color-primary-100);color:var(--color-primary-700)}.badge--small{padding:var(--space-1) var(--space-2);font-size:0.65rem}.badge--large{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.badge--filter{background-color:var(--color-gray-100);color:var(--color-gray-600);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);min-height:36px;cursor:pointer;user-select:none;transition:background-color 0.15s ease;text-decoration:none;white-space:normal;word-wrap:break-word}@media (hover:hover){.badge--filter:hover{background-color:var(--color-gray-200);color:var(--color-gray-700)}}.badge--filter.badge--active{background-color:var(--color-primary-100);color:var(--color-primary-700);font-weight:var(--font-weight-semibold)}@media (hover:hover){.badge--filter.badge--active:hover{background-color:var(--color-primary-200)}}.badge--filter:focus{outline:2px solid var(--color-primary-500);outline-offset:2px}.badge--filter.badge--disabled,.badge--filter:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}@media (max-width:768px){.badge{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2)}.badge--large{padding:var(--space-1_5) var(--space-3);font-size:var(--font-size-xs)}.badge--filter{font-size:var(--font-size-sm);padding:var(--space-2_5) var(--space-4);min-height:44px;flex:1 1 auto;min-width:fit-content;justify-content:center}}@media (max-width:480px){.badge--neutral{padding:var(--space-1_5) var(--space-2_5)}.badge--filter{font-size:0.8125rem;padding:var(--space-2) var(--space-3);min-height:42px}}@media (hover:none) and (pointer:coarse){.badge--filter{min-height:44px;padding:var(--space-3) var(--space-5)}}}