*{
margin:0;
padding:0;
box-sizing:border-box;
}
:root{
--bg:#0f1728;
--bg-alt:#18243d;
--card:#1f2d4a;
--text:#f4efe6;
--text-soft:#d7d0c5;
--muted:#a9b0bf;
--gold:#d4aa5a;
--gold-light:#e7c886;
--accent:#d4aa5a;
--border:rgba(212,170,90,.25);
--shadow:
0 10px 30px rgba(0,0,0,.35);
--max-width:780px;
}
html{
scroll-behavior:smooth;
}
body{
background:
linear-gradient(
180deg,
#0f1728 0%,
#18243d 45%,
#0f1728 100%);
color:var(--text);
font-family:Georgia,serif;
line-height:1.9;
font-size:1.1rem;
}
.book-page{
min-height:100vh;
}
.book-content,
.chapter-content{
max-width:var(--max-width);
width:100%;
margin:auto;
padding:60px 30px;
animation:fadeIn .5s ease;
}
.book-content h1,
.chapter-content h1{
text-align:center;
font-size:clamp(
2.5rem,
5vw,
3.8rem);
margin-bottom:12px;
color:#ffffff;
}
.book-content h2,
.chapter-content h2{
text-align:center;
font-size:clamp(
1.2rem,
3vw,
1.6rem);
font-style:italic;
font-weight:normal;
margin-bottom:40px;
color:var(--gold);
}
.chapter-content h2::after{
content:"";
display:block;
width:80px;
height:2px;
background:var(--gold);
margin:18px auto 0;
opacity:.6;
}
.book-content p,
.chapter-content p{
margin-bottom:24px;
text-align:left;
}
.book-content a,
.chapter-content a{
color:var(--gold-light);
text-decoration:none;
}
.book-content a:hover,
.chapter-content a:hover{
text-decoration:underline;
}
.back-home{
display:inline-block;
margin-bottom:40px;
font-weight:bold;
}
.book-description{
font-size:1.15rem;
margin-bottom:50px;
}
.navigation{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}
.navigation a{
display:block;
background:var(--card);
border:1px solid var(--border);
padding:20px;
border-radius:12px;
box-shadow:var(--shadow);
transition:.3s;
color:var(--text);
text-decoration:none;
}
.navigation a:hover{
transform:translateY(-4px);
border-color:var(--gold);
text-decoration:none;
}
.navigation h3{
margin-bottom:8px;
color:var(--gold);
}
.contents-list{
display:grid;
gap:15px;
}
.contents-list a{
display:block;
background:var(--card);
border:1px solid var(--border);
padding:18px 20px;
border-radius:12px;
box-shadow:var(--shadow);
transition:.3s;
color:var(--text);
}
.contents-list a:hover{
transform:translateY(-4px);
border-color:var(--gold);
text-decoration:none;
}
.section-heading{
margin-top:40px;
margin-bottom:20px;
font-size:1.4rem;
color:var(--gold);
}
.chapter-navigation{
display:flex;
justify-content:space-between;
gap:20px;
margin-top:60px;
padding-top:30px;
border-top:1px solid var(--border);
}
.chapter-navigation a{
padding:12px 20px;
background:var(--card);
border:1px solid var(--border);
border-radius:10px;
box-shadow:var(--shadow);
color:var(--text);
font-weight:bold;
text-decoration:none;
transition:.3s;
}
.chapter-navigation a:hover{
transform:translateY(-3px);
border-color:var(--gold);
text-decoration:none;
}
.book-footer{
text-align:center;
margin-top:80px;
padding-top:30px;
border-top:1px solid var(--border);
color:var(--muted);
font-size:.95rem;
}
blockquote{
margin:30px 0;
padding:20px;
background:rgba(255,255,255,.04);
border-left:4px solid var(--gold);
font-style:italic;
border-radius:6px;
}
.hero-banner{
width:100%;
margin:0 auto 40px;
border-radius:16px;
box-shadow:var(--shadow);
}
img{
max-width:100%;
height:auto;
display:block;
border-radius:12px;
box-shadow:var(--shadow);
}

.support-section{

margin-top:60px;

padding:50px 20px;

text-align:center;

border-top:
1px solid rgba(
255,
255,
255,
.12
);

}

.support-section h2{

margin-bottom:25px;

font-size:2rem;

color:#d4b06a;

}

.support-section p{

max-width:900px;

margin:0 auto 22px;

line-height:2;

}

.support-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

margin:35px 0;

}

.support-buttons a{

display:inline-block;

padding:14px 28px;

border-radius:999px;

text-decoration:none;

font-weight:bold;

background:
linear-gradient(
135deg,
#d4b06a,
#f0cf8c
);

color:#0d1d3a;

box-shadow:
0 8px 20px rgba(
0,
0,
0,
.18
);

transition:.3s;

}

.support-buttons a:hover{

transform:
translateY(-4px);

box-shadow:
0 12px 28px rgba(
0,
0,
0,
.25
);

}

@media(max-width:768px){

.support-buttons{

flex-direction:column;

align-items:center;

}

.support-buttons a{

width:100%;

max-width:320px;

}

}

::selection{
background:var(--gold);
color:#0f1728;
}
@keyframes fadeIn{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@media(max-width:768px){
body{
font-size:1rem;
}
.book-content,
.chapter-content{
padding:40px 20px;
}
.book-content h1,
.chapter-content h1{
font-size:2.3rem;
}
.book-content h2,
.chapter-content h2{
font-size:1.25rem;
}
.chapter-navigation{
flex-direction:column;
}
.chapter-navigation a{
text-align:center;
}
}