*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background-color:var(--color-background);color:var(--color-text-primary);font-family:var(--font-family-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;isolation:isolate;overflow-x:hidden}.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}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}a{color:inherit;text-decoration:none}button{background:none;border:none;padding:0;cursor:pointer}.app{min-height:100vh;display:flex;flex-direction:column;background-color:var(--color-background)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-surface)}::-webkit-scrollbar-thumb{background:var(--color-text-secondary);border-radius:var(--radius-base)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary)}::selection{background-color:var(--color-primary);color:var(--color-text-primary)}.loading{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-height:200px}.loadingSpinner{width:48px;height:48px;border:4px solid var(--color-surface);border-top:4px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.container{display:flex;flex-direction:column;min-height:100vh;background-color:var(--color-background);position:relative}.mainWrapper{flex:1;display:flex;flex-direction:column;min-height:100vh}.content{flex:1;padding:var(--spacing-5);padding-top:120px;display:flex;justify-content:center}@media (max-width: 768px){.content{padding:var(--spacing-2);padding-top:var(--spacing-header-mobile);padding-bottom:calc(var(--spacing-nav-mobile) + var(--spacing-2))}.mainWrapper{padding-top:0;padding-bottom:0}}.topNav{background-color:transparent;padding:0;position:fixed;width:100%;z-index:var(--z-index-fixed);transition:all .3s ease}.navContent{max-width:var(--width-content);margin:0 auto;display:flex;flex-direction:column;align-items:center;transition:all .3s ease}.topNav.scrolled{background-color:transparent;box-shadow:var(--shadow-nav-subtle)}.navContent.scrolled{flex-direction:row;justify-content:space-between;align-items:center;padding:var(--spacing-2) var(--spacing-4)}.navContent.scrolled .logo{margin:0;padding:0;border:none;width:auto;font-size:var(--font-size-lg);justify-content:flex-start}.navContent.scrolled .logoImage{width:32px;height:32px}.navContent.scrolled .menu{margin:0;display:flex;align-items:center}.navContent.scrolled .menu li a{padding:var(--spacing-2)}.logo{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-primary);font-family:var(--font-family-display);line-height:1.2;margin-top:var(--spacing-logo-top);margin-bottom:var(--spacing-logo-bottom);padding-bottom:var(--spacing-2);border-bottom:1px solid var(--color-divider);width:100%;text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--spacing-3)}.logoImage{width:56px;height:56px;object-fit:contain}.menu{display:flex;list-style:none;gap:var(--spacing-6);margin:0;padding:0;justify-content:center}.menu li a{display:flex;align-items:center;gap:var(--spacing-2);color:var(--color-text-secondary);text-decoration:none;font-size:var(--font-size-md)}.menu li a:hover{color:var(--color-text-primary)}.icon{width:var(--spacing-6);height:var(--spacing-6);border-radius:var(--radius-base)}@media (max-width: 768px){.topNav{display:none}}.navButton{display:flex;align-items:center;gap:var(--spacing-2);color:var(--color-text-secondary);text-decoration:none;font-size:var(--font-size-md);background:none;border:none;padding:0;cursor:pointer}.menu-link{display:flex;align-items:center;gap:var(--spacing-2);color:var(--color-text-secondary);text-decoration:none;font-size:var(--font-size-md);background:none;border:none;padding:var(--spacing-2);cursor:pointer}.menu-link:hover{color:var(--color-text-primary)}.navContent.scrolled .menu li .menu-link{padding:var(--spacing-2)}.menu-item{display:flex;align-items:center;gap:var(--spacing-2);color:var(--color-text-secondary);text-decoration:none;font-size:var(--font-size-md);padding:var(--spacing-2);background:none;border:none;cursor:pointer}.menu-item:hover{color:var(--color-text-primary)}.navContent.scrolled .menu li .menu-item{padding:var(--spacing-2)}.navButton,.menu-link{display:none}.avatar{border-radius:var(--radius-full);overflow:hidden;background-color:var(--color-surface)}.avatar-sm{width:var(--spacing-6);height:var(--spacing-6)}.avatar-md{width:var(--spacing-8);height:var(--spacing-8)}.avatar-lg{width:var(--spacing-10);height:var(--spacing-10)}.avatar-image{width:100%;height:100%;object-fit:cover}.avatar-default{width:100%;height:100%;padding:var(--spacing-1)}.dropdown-container{position:relative}.dropdown-menu{position:absolute;top:calc(100% + var(--spacing-4));margin-top:calc(-1 * var(--spacing-1));background:var(--bg-opacity-dropdown);-webkit-backdrop-filter:var(--blur-backdrop);backdrop-filter:var(--blur-backdrop);border-radius:var(--radius-base);box-shadow:var(--shadow-dropdown);min-width:200px;z-index:var(--z-index-dropdown);overflow:hidden;transform-origin:top;animation:dropdownFade .2s ease}.dropdown-right{right:0;transform:translate(var(--spacing-4))}.dropdown-left{left:0;transform:translate(calc(-1 * var(--spacing-4)))}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3);color:var(--color-text-secondary);text-decoration:none;cursor:pointer;transition:background-color var(--transition-fast);width:100%;border:none;background:none;text-align:left}.dropdown-item:hover{background-color:var(--color-hover);color:var(--color-text-primary)}.dropdown-divider{height:1px;background-color:var(--color-divider);margin:var(--spacing-1) 0}@keyframes dropdownFade{0%{opacity:0;transform:translate(var(--spacing-4),-8px)}to{opacity:1;transform:translate(var(--spacing-4))}}:root{--color-primary: #cd0812;--color-error: #ff1a1a;--color-success: #4CAF50;--color-button: #cd0812;--color-button-hover: #a3060e;--color-link: #00b3e6;--color-link-hover: #00ccff;--color-background: #0D0D0D;--color-surface: #1f1f1f;--color-text-primary: #ffffff;--color-text-secondary: #a5a5a5;--color-hover: rgba(255, 255, 255, .1);--color-shadow: rgba(0, 0, 0, .3);--color-divider: rgba(40, 38, 38, .856);--color-nav-active: var(--color-text-primary);--color-action-primary: rgb(229, 9, 20);--color-action-primary-hover: rgb(193, 17, 25)}:root{--font-family-base: "Inter", sans-serif;--font-family-display: "Black Han Sans", sans-serif;--font-family-korean: "Do Hyeon", sans-serif;--font-size-xs: 11px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-md: 18px;--font-size-lg: 20px;--font-size-xl: 24px;--font-size-2xl: 36px;--font-size-3xl: 48px;--line-height-none: 1;--line-height-tight: 1.2;--line-height-normal: 1.5}:root{--breakpoint-mobile: 600px;--breakpoint-tablet: 900px;--breakpoint-desktop: 1200px;--content-poster-sm: 140px;--content-poster-md: 180px;--content-poster-lg: 240px;--grid-columns-sm: 2;--grid-columns-md: 4;--grid-columns-lg: 8;--ratio-poster: 150%;--ratio-thumbnail: 75%;--width-sidebar: 150px;--width-nav-item: 60px;--width-dropdown: 200px;--width-mobile-dropdown: 120px}:root{--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-5: 20px;--spacing-6: 24px;--spacing-8: 30px;--spacing-10: 40px;--spacing-nav-vertical: 8px;--spacing-nav-horizontal: 20px;--spacing-header: 15px;--spacing-header-mobile: 90px;--spacing-logo-top: var(--spacing-6);--spacing-logo-bottom: var(--spacing-5);--height-mobile-nav: 64px}:root{--shadow-nav: 0 -2px 10px var(--color-shadow);--shadow-dropdown: 0 2px 10px var(--color-shadow);--shadow-modal: 0 4px 20px var(--color-shadow);--shadow-nav-subtle: 0 1px 1px rgba(0, 0, 0, .05);--blur-backdrop: blur(8px);--bg-opacity-dropdown: rgba(31, 31, 31, .8);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--z-index-dropdown: 1000;--z-index-fixed: 1030;--z-index-modal: 1050;--z-index-tooltip: 1060;--transition-nav: transform .3s ease}:root{--radius-sm: 4px;--radius-base: 8px;--radius-lg: 12px;--radius-button: 3px;--radius-dropdown: 5px;--radius-card: 8px;--radius-modal: 12px;--radius-full: 9999px}:root{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mobileHeader{display:none;background-color:transparent;padding:var(--spacing-header);padding-left:var(--spacing-4);position:fixed;top:0;left:0;right:0;z-index:var(--z-index-fixed)}.mobileLogo{font-size:var(--font-size-lg);color:var(--color-primary);text-align:left;line-height:1;font-family:var(--font-family-display)}.mobileNav{display:none;justify-content:space-between;align-items:center;background-color:var(--color-surface);padding:var(--spacing-nav-vertical) var(--spacing-nav-horizontal);position:fixed;bottom:0;left:0;right:0;z-index:var(--z-index-fixed);box-shadow:var(--shadow-nav);transform:translateY(0);transition:var(--transition-nav)}.mobileNav.hidden{transform:translateY(100%);visibility:visible}.mobileIcon{width:var(--spacing-8);height:var(--spacing-8);margin-bottom:var(--spacing-1);border-radius:var(--radius-base);object-fit:cover}.mobileNav a{position:relative;color:var(--color-text-secondary);text-decoration:none;font-size:var(--font-size-xs);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:var(--width-nav-item);line-height:var(--line-height-none);padding:0}.mobileNav a:hover{color:var(--color-text-primary)}.mobileNav a.active{color:var(--color-nav-active);font-weight:500}.mobileNav a.active .mobileIcon{filter:brightness(1.2)}@media (max-width: 768px){.mobileHeader{display:block!important}.mobileNav{display:flex!important}}@media (hover: none) and (pointer: coarse){.mobileNav{will-change:transform}}.mobileNav a:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:var(--radius-base)}.mobileNav a[aria-current=page]:before{content:"현재 페이지:";position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.navButton{position:relative;color:var(--color-text-secondary);text-decoration:none;font-size:var(--font-size-xs);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:var(--width-nav-item);line-height:var(--line-height-none);padding:0;background:none;border:none;cursor:pointer}.navButton:hover{color:var(--color-text-primary)}.navButton:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:var(--radius-base)}.navButton .mobileIcon{width:var(--spacing-8);height:var(--spacing-8);margin-bottom:var(--spacing-1);border-radius:var(--radius-base);object-fit:cover}.footer{background-color:var(--color-surface);padding:var(--spacing-5);margin-top:auto}.footerContent{max-width:var(--width-content);margin:0 auto;display:flex;justify-content:space-between;align-items:center}.copyright{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.footerNav a{color:var(--color-text-secondary);margin-left:var(--spacing-4);font-size:var(--font-size-sm)}.footerNav a:hover{color:var(--color-text-primary)}@media (max-width: 768px){.footerContent{flex-direction:column;gap:var(--spacing-3);text-align:center}.footerNav{display:flex;gap:var(--spacing-3)}.footerNav a{margin-left:0}.footer{padding-bottom:calc(var(--spacing-5) + var(--height-mobile-nav));margin-bottom:0}}