:root{--bg-color:#070b25;--card-bg:#0c1339;--card-hover-bg:#12194d;--primary-color:#71b4f2;--primary-hover:#d4f0f0;--secondary-color:#ffcc66;--text-color:#ffffff;--text-muted:#a8b5ff;--text-primary:#ffffff;--border-color:rgba(159, 120, 255, 0.3);--overlay-color:rgba(4, 9, 34, 0.7);--separator-color:rgba(159, 120, 255, 0.15);--author-color:#d4f0f0;--primary-gradient:linear-gradient(135deg, #9f78ff, #64c5eb);--dark-gradient:linear-gradient(135deg, #070b25, #0c1339);--night-sky-gradient:linear-gradient(to bottom, #020824 0%, #0f1a4d 50%, #162a72 100%);--card-shadow:0 4px 20px rgba(0, 0, 0, 0.7);--text-shadow:0 2px 4px rgba(0, 0, 0, 0.7);--star-glow:0 0 15px rgba(255, 204, 102, 0.7);--title-font:'Noto Serif KR',serif;--body-font:'Noto Sans KR',sans-serif;--transition-fast:0.2s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease}
[data-theme="light"]{--bg-color:#f5f2e8;--card-bg:#fefcf6;--card-hover-bg:#f9f6ed;--primary-color:#8b5a3c;--primary-hover:#a0704f;--secondary-color:#d2691e;--text-color:#2c1810;--text-muted:#3d2a1c;--text-primary:#2c1810;--border-color:rgba(139, 90, 60, 0.3);--overlay-color:rgba(254, 252, 246, 0.95);--separator-color:rgba(139, 90, 60, 0.15);--author-color:#8b5a3c;--primary-gradient:linear-gradient(135deg, #8b5a3c, #d2691e);--dark-gradient:linear-gradient(135deg, #f5f2e8, #fefcf6);--night-sky-gradient:linear-gradient(to bottom, #faf8f1 0%, #f5f2e8 50%, #f0ede1 100%);--card-shadow:0 4px 20px rgba(44, 24, 16, 0.15);--text-shadow:0 1px 2px rgba(44, 24, 16, 0.1);--star-glow:0 0 15px rgba(210, 105, 30, 0.4)}
[data-theme="light"] body::before{background:linear-gradient(to bottom, 
        rgba(250, 248, 241, 0.8) 0%, 
        rgba(245, 242, 232, 0.9) 50%, 
        rgba(240, 237, 225, 0.8) 100%);opacity:0.6}
[data-theme="light"] body::after{background-image:radial-gradient(2px 2px at 15% 25%, rgba(139, 90, 60, 0.1), transparent),radial-gradient(1.5px 1.5px at 85% 45%, rgba(210, 105, 30, 0.15), transparent),radial-gradient(1px 1px at 45% 75%, rgba(160, 112, 79, 0.1), transparent);background-size:400px 400px,300px 300px,500px 500px;opacity:0.3}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body-font);background-color:var(--bg-color);color:var(--text-color);line-height:1.6;overflow-x:hidden;min-height:100vh;position:relative;min-width:320px}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:var(--night-sky-gradient);opacity:0.5;z-index:-2}
body::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(1px 1px at 10% 20%, var(--text-muted), transparent),radial-gradient(1.5px 1.5px at 80% 40%, var(--secondary-color), transparent),radial-gradient(1px 1px at 50% 70%, var(--text-color), transparent);background-size:500px 500px;opacity:0.2;z-index:-1;animation:twinkling 20s linear infinite}
h1,h2,h3,h4,h5,h6{font-family:var(--title-font);font-weight:700;margin-bottom:1rem;text-shadow:var(--text-shadow)}
h1{color:var(--primary-hover);text-shadow:0 0 10px var(--primary-color)}
a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--primary-hover);text-decoration:underline}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}
.section-header{text-align:center;margin-bottom:2rem;position:relative}
.section-header h1{margin:0;font-size:1.5rem}
.section-header h1 a{color:var(--text-color);text-decoration:none}
.section-title{font-size:2.2rem;color:var(--text-color);margin-bottom:0.8rem;position:relative;display:inline-block;text-shadow:var(--text-shadow)}
.simple-footer{padding:1rem;background-color:var(--bg-color);text-align:center;margin-top:2rem}
.section-title::after{content:'';position:absolute;width:70px;height:3px;background:var(--primary-gradient);bottom:-8px;left:50%;transform:translateX(-50%);border-radius:1.5px;box-shadow:var(--star-glow)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(20, 20, 30, 0.5);border-radius:10px}
::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:10px;border:2px solid rgba(20, 20, 30, 0.5)}
::-webkit-scrollbar-thumb:hover{background:var(--primary-hover)}
@keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}
@keyframes fadeInUp{
0%{opacity:0;transform:translateY(15px)}
100%{opacity:1;transform:translateY(0)}
}
@keyframes twinkling{
0%{opacity:0.2}
50%{opacity:0.4}
100%{opacity:0.2}
}
.copyright-text{margin:0;font-size:0.9rem;color:#a8b5ff}
.back-button{position:fixed;top:40px;left:15px;display:flex;align-items:center;gap:8px;padding:8px 16px;background-color:var(--card-bg);color:var(--primary-color);text-decoration:none;border-radius:8px;font-size:0.9rem;transition:all 0.3s ease;z-index:1000;border:1px solid var(--primary-color);box-shadow:0 2px 6px rgba(0, 0, 0, 0.4);font-family:'Libre Baskerville','Noto Serif KR',serif}
.back-button:hover{background-color:var(--primary-color);color:var(--text-color);transform:translateX(-5px);box-shadow:0 3px 8px rgba(113, 180, 242, 0.4)}
.back-button i{font-size:0.9rem}
.simple-header{padding:1rem;background-color:var(--card-bg);text-align:center}
.character-guide-container{padding:2rem 1rem}
.floating-action-menu{position:fixed;bottom:30px;right:30px;z-index:9999;transition:all var(--transition-normal),transform 0.3s ease,opacity 0.3s ease}
.fab-main{width:60px;height:60px;border-radius:50%;background:var(--primary-gradient);border:none;color:white;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 20px rgba(0, 0, 0, 0.3);transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center}
.fab-main:hover{transform:scale(1.1) rotate(90deg);box-shadow:0 6px 25px rgba(0, 0, 0, 0.4)}
.fab-menu{position:absolute;bottom:80px;right:0;display:flex;flex-direction:column;gap:15px;opacity:0;visibility:hidden;transform:translateY(20px);transition:all var(--transition-normal)}
.fab-menu.active{opacity:1;visibility:visible;transform:translateY(0)}
.fab-item{width:50px;height:50px;border-radius:50%;background-color:var(--card-bg);border:2px solid var(--primary-color);color:var(--primary-color);font-size:1rem;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;box-shadow:var(--card-shadow);position:relative}
.fab-item:hover{background-color:var(--primary-color);color:white;transform:scale(1.1)}
.fab-item::after{content:attr(title);position:absolute;right:60px;top:50%;transform:translateY(-50%);background-color:var(--card-bg);color:var(--text-color);padding:8px 12px;border-radius:6px;font-size:0.85rem;white-space:nowrap;box-shadow:var(--card-shadow);opacity:0;visibility:hidden;transition:all var(--transition-fast);border:1px solid var(--border-color)}
.fab-item:hover::after{opacity:1;visibility:visible}
body.font-small{font-size:0.85rem}
body.font-small h1,body.font-small h2,body.font-small h3,body.font-small h4,body.font-small h5,body.font-small h6{font-size:0.9em}
body.font-small .character-section h4{font-size:1.05rem}
body.font-small .char-name{font-size:1.6rem}
body.font-normal{font-size:1rem}
body.font-large{font-size:1.15rem}
body.font-large h1,body.font-large h2,body.font-large h3,body.font-large h4,body.font-large h5,body.font-large h6{font-size:1.1em}
body.font-large .character-section h4{font-size:1.35rem}
body.font-large .char-name{font-size:2rem}
@media (max-width: 768px){
.floating-action-menu{bottom:20px;right:20px}
.fab-main{width:50px;height:50px;font-size:1rem}
.fab-item{width:40px;height:40px;font-size:0.9rem}
.fab-item::after{right:50px;font-size:0.8rem;padding:6px 10px}
.fab-menu{bottom:70px;gap:12px}
}
[data-theme="light"] .copyright-text{color:var(--text-color)}