:root,[data-theme=light]{--bg-primary: #FFF5F9;--bg-secondary: #F0E6FF;--bg-tertiary: #FFF0F5;--bg-card: rgba(255, 255, 255, .7);--bg-card-hover: rgba(255, 255, 255, .85);--bg-nav: rgba(255, 245, 249, .85);--bg-footer: rgba(240, 230, 255, .5);--bg-overlay: rgba(255, 245, 249, .95);--text-primary: #3D2C4E;--text-secondary: #6B5B7B;--text-muted: #9B8AAF;--text-inverse: #FFFFFF;--accent-pink: #FF8EC8;--accent-lavender: #C7A4FF;--accent-mint: #7EDCCC;--accent-sky: #89C4F4;--accent-peach: #FFB88C;--accent-purple: #A855F7;--border-color: rgba(200, 170, 230, .3);--border-hover: rgba(200, 170, 230, .5);--shadow-color: rgba(150, 100, 200, .1);--shadow-hover: rgba(150, 100, 200, .2);--gradient-hero: linear-gradient(135deg, #FFF5F9, #F0E6FF, #FFF0F5);--gradient-section: linear-gradient(180deg, transparent, rgba(240, 230, 255, .3), transparent);--gradient-title: linear-gradient(45deg, #FF8EC8, #C7A4FF, #89C4F4);--scrollbar-track: #F0E6FF;--scrollbar-thumb: #C7A4FF;--card-backdrop: blur(12px);--loading-bg: linear-gradient(90deg, #F0E6FF 25%, #FFF5F9 50%, #F0E6FF 75%)}[data-theme=dark]{--bg-primary: #1A1225;--bg-secondary: #231A33;--bg-tertiary: #1F1530;--bg-card: rgba(35, 26, 51, .8);--bg-card-hover: rgba(45, 34, 65, .85);--bg-nav: rgba(26, 18, 37, .85);--bg-footer: rgba(35, 26, 51, .5);--bg-overlay: rgba(26, 18, 37, .95);--text-primary: #E8DFF0;--text-secondary: #B8A8CC;--text-muted: #8B7BA0;--text-inverse: #1A1225;--accent-pink: #FF8EC8;--accent-lavender: #C7A4FF;--accent-mint: #7EDCCC;--accent-sky: #89C4F4;--accent-peach: #FFB88C;--accent-purple: #A855F7;--border-color: rgba(150, 120, 200, .2);--border-hover: rgba(150, 120, 200, .4);--shadow-color: rgba(0, 0, 0, .3);--shadow-hover: rgba(0, 0, 0, .5);--gradient-hero: linear-gradient(135deg, #1A1225, #231A33, #1F1530);--gradient-section: linear-gradient(180deg, transparent, rgba(35, 26, 51, .5), transparent);--gradient-title: linear-gradient(45deg, #FF8EC8, #C7A4FF, #89C4F4);--scrollbar-track: #1A1225;--scrollbar-thumb: #6B5B7B;--card-backdrop: blur(12px);--loading-bg: linear-gradient(90deg, #231A33 25%, #2D2244 50%, #231A33 75%)}:root{--color-yok: #D4B06A;--color-yok-light: #F5D98B;--color-yok-bg: rgba(212, 176, 106, .15);--color-yok-border: rgba(212, 176, 106, .3);--color-mir: #5DD8C8;--color-mir-light: #7EDCCC;--color-mir-bg: rgba(93, 216, 200, .15);--color-mir-border: rgba(93, 216, 200, .3);--color-uta: #FF8EB0;--color-uta-light: #FFB0CC;--color-uta-bg: rgba(255, 142, 176, .15);--color-uta-border: rgba(255, 142, 176, .3)}*,*:before,*:after{box-sizing:inherit}html{scroll-behavior:smooth;box-sizing:border-box}body{margin:0;padding:0;font-family:Noto Sans KR,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;transition:background-color .3s ease,color .3s ease}a{color:inherit;text-decoration:none;transition:color .2s ease,opacity .2s ease}main#main-content{min-height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-lavender)}.gradient-text{background:var(--gradient-title);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gradient-text-animated{background:var(--gradient-title);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientMove 3s ease infinite;background-size:200% 200%}a.gradient-text{text-decoration:none;display:inline-block;transition:transform .3s ease,filter .3s ease}a.gradient-text:hover{transform:scale(1.05);filter:brightness(1.2)}.gradient-text-characters{background:linear-gradient(45deg,var(--accent-lavender),var(--accent-pink),var(--accent-mint));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gradient-text-mir{background:linear-gradient(45deg,var(--color-mir),var(--color-mir-light),var(--accent-mint));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gradient-text-yok{background:linear-gradient(45deg,var(--color-yok),var(--color-yok-light),var(--accent-peach));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gradient-text-uta{background:linear-gradient(45deg,var(--color-uta),var(--color-uta-light),var(--accent-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes gradientMove{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes bgShift{0%,to{opacity:1}50%{opacity:.9}}@keyframes float{0%,to{transform:translateY(0) translate(0) rotate(0)}33%{transform:translateY(-100px) translate(50px) rotate(120deg)}66%{transform:translateY(-50px) translate(-50px) rotate(240deg)}}@keyframes dreamFloat{0%{transform:translateY(100vh) translate(0);opacity:0}10%{opacity:.5}90%{opacity:.2}to{transform:translateY(-100px) translate(100px);opacity:0}}@keyframes pawFloat{0%,to{transform:translate(0) rotate(0);opacity:.03}50%{transform:translate(30px,-30px) rotate(45deg);opacity:.08}}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.bg-animated{position:fixed;width:100%;height:100%;top:0;left:0;z-index:-1;background:var(--gradient-hero);background-size:400% 400%;animation:gradientShift 20s ease infinite}.bg-main{position:fixed;width:100%;height:100%;top:0;left:0;z-index:-1;background:radial-gradient(circle at 20% 80%,rgba(199,164,255,.08) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,142,200,.06) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(126,220,204,.04) 0%,transparent 50%),var(--gradient-hero);animation:bgShift 20s ease infinite}.myu-card{background:var(--bg-card);backdrop-filter:var(--card-backdrop);border:1px solid var(--border-color);border-radius:1rem;transition:all .3s ease}.myu-card:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow-hover)}.card-mir{border-color:var(--color-mir-border)}.card-mir:hover{border-color:var(--color-mir);box-shadow:0 10px 30px rgba(93,216,200,.15)}.card-yok{border-color:var(--color-yok-border)}.card-yok:hover{border-color:var(--color-yok);box-shadow:0 10px 30px rgba(212,176,106,.15)}.card-uta{border-color:var(--color-uta-border)}.card-uta:hover{border-color:var(--color-uta);box-shadow:0 10px 30px rgba(255,142,176,.15)}.character-card{transition:all .3s ease;border:2px solid transparent;background:var(--bg-card);backdrop-filter:var(--card-backdrop)}.character-card:hover{transform:translateY(-10px);border-color:currentColor;box-shadow:0 20px 40px var(--shadow-hover)}.section-alt{background:var(--gradient-section)}.particle{position:fixed;pointer-events:none;opacity:.4;animation:float 10s infinite ease-in-out}.dream-particle{position:fixed;width:3px;height:3px;background:var(--accent-lavender);border-radius:50%;pointer-events:none;animation:dreamFloat 15s linear infinite}.hidden-paw{position:fixed;opacity:.03;color:var(--text-muted);font-size:1.2rem;animation:pawFloat 20s ease-in-out infinite;pointer-events:none;z-index:1}.floating-star{position:fixed;color:var(--text-muted);opacity:.2;animation:float 10s ease-in-out infinite;pointer-events:none}.fade-in{opacity:0;transform:translateY(30px);transition:all .8s ease}.fade-in.visible{opacity:1;transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,var(--accent-pink),var(--accent-lavender));color:#fff;padding:.75rem 2rem;border-radius:9999px;font-weight:600;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center}.btn-primary:hover{transform:scale(1.05);box-shadow:0 8px 24px rgba(199,164,255,.3)}.btn-outline{border:2px solid var(--accent-lavender);color:var(--accent-lavender);padding:.75rem 2rem;border-radius:9999px;font-weight:600;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center;background:transparent}.btn-outline:hover{background:var(--accent-lavender);color:#fff;transform:scale(1.05)}.btn-mir{background:linear-gradient(135deg,var(--color-mir),#4EC8B8);color:#fff}.btn-yok{background:linear-gradient(135deg,var(--color-yok),#C4A05A);color:#fff}.btn-uta{background:linear-gradient(135deg,var(--color-uta),#EF7EA0);color:#fff}.nav-themed{background:var(--bg-nav);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-color)}.footer-themed{background:var(--bg-footer);border-top:1px solid var(--border-color);color:var(--text-secondary)}.theme-toggle{width:40px;height:40px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;font-size:1.1rem}.theme-toggle:hover{background:var(--bg-card-hover);border-color:var(--accent-lavender);transform:rotate(20deg)}.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,var(--accent-lavender),var(--accent-pink),transparent);transform:translate(-50%)}.timeline-dot{width:20px;height:20px;background:var(--accent-lavender);border-radius:50%;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 0 20px rgba(199,164,255,.5);transition:all .3s ease}.timeline-item:hover .timeline-dot{transform:translate(-50%) scale(1.5);background:var(--accent-pink);box-shadow:0 0 30px rgba(255,142,200,.6)}.story-reader{max-width:720px;margin:0 auto;line-height:1.8;font-size:1.05rem;color:var(--text-primary)}.story-reader p{margin-bottom:1.2rem}.story-reader .dialogue{color:var(--accent-lavender);font-style:italic}.story-reader .narrator{color:var(--text-secondary)}.tab-nav{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.tab-btn{padding:.5rem 1.25rem;border-radius:9999px;background:transparent;color:var(--text-secondary);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:all .3s ease;font-size:.9rem}.tab-btn:hover{background:var(--bg-card);color:var(--text-primary)}.tab-btn.active{background:var(--accent-lavender);color:#fff;border-color:var(--accent-lavender)}.tab-content{display:none;animation:fadeIn .4s ease}.tab-content.active{display:block}@media (max-width: 1024px){.gradient-text{font-size:clamp(1.8rem,4vw,2.5rem)}}@media (max-width: 768px){.myu-card{margin-bottom:1rem}.tab-nav{-webkit-overflow-scrolling:touch}.timeline-line,.timeline-dot{left:20px}}@media (max-width: 480px){.gradient-text{font-size:clamp(1.2rem,6vw,1.5rem)}.myu-card{padding:1rem}.btn-primary,.btn-outline{padding:.625rem 1.5rem;font-size:.875rem}}:focus{outline:2px solid var(--accent-lavender);outline-offset:2px}button:focus-visible,a:focus-visible{outline:2px solid var(--accent-lavender);outline-offset:2px;box-shadow:0 0 0 4px rgba(199,164,255,.3)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:.5rem 1rem;margin:0;overflow:visible;clip:auto;white-space:normal}.text-shadow{text-shadow:0 2px 4px rgba(0,0,0,.3)}.backdrop-blur{backdrop-filter:blur(10px)}.character-portrait{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}img{max-width:100%;height:auto}img[loading=lazy]{background:var(--loading-bg);background-size:200% 100%;animation:shimmer 1.5s infinite}button,a[role=button],.btn-primary,.btn-outline,.btn-mir,.btn-yok,.btn-uta{min-height:44px;min-width:44px}.section-divider{border:none;height:1px;background:linear-gradient(to right,transparent,var(--border-color),transparent);margin:2rem 0}.badge{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-color)}.badge-mir{background:var(--color-mir-bg);color:var(--color-mir);border-color:var(--color-mir-border)}.badge-yok{background:var(--color-yok-bg);color:var(--color-yok);border-color:var(--color-yok-border)}.badge-uta{background:var(--color-uta-bg);color:var(--color-uta);border-color:var(--color-uta-border)}.term-highlight{color:var(--accent-lavender);border-bottom:1px dashed var(--accent-lavender);cursor:help;position:relative}.term-highlight:hover:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:var(--bg-overlay);color:var(--text-primary);padding:.5rem 1rem;border-radius:.5rem;font-size:.8rem;white-space:nowrap;border:1px solid var(--border-color);box-shadow:0 4px 12px var(--shadow-color);z-index:10}