html, body {
  height: 100%;
  margin: 0;
  background: linear-gradient(120deg, #6366f1 0%, #818cf8 70%, #38bdf8 100%);
  font-family: 'Montserrat', 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  min-height: 100vh;
}

/* --------- 로딩 오버레이 --------- */
.loading-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(49,56,85,0.84);
  backdrop-filter: blur(7px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  opacity: 1; transition: opacity 1s cubic-bezier(.72,0,.35,1);
}
.loading-overlay.fadeout {
  opacity: 0;
  pointer-events: none;
}
.fancy-loader {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.fancy-loader .spinner {
  animation: spin 1.4s linear infinite;
  width: 60px; height: 60px; margin-bottom: 16px;
}
.spinner circle.bg { stroke: #e0e7ff; }
.spinner circle.progress {
  stroke: url(#g1);
  stroke-dasharray: 120; stroke-dashoffset: 40;
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 14px #6366f1cc);
  animation: dash 1.8s cubic-bezier(.4,.7,.4,1) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dash {
  0% { stroke-dashoffset: 120; }
  60% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 120; }
}
.loading-glow {
  font-size: 2rem; color: #fff; letter-spacing: 0.3em; font-weight: bold;
  text-shadow: 0 0 32px #818cf8, 0 2px 8px #0007;
  animation: glow 1.4s ease-in-out infinite alternate;
}
@keyframes glow {
  from { text-shadow: 0 0 18px #6366f1, 0 1px 6px #fff4; }
  to   { text-shadow: 0 0 44px #38bdf8, 0 1px 16px #fff; }
}
.loading-text {
  color: #e0e7ff; font-size: 1.15rem; text-align: center;
  margin-top: 0.3em; font-weight: 600; letter-spacing: 0.02em;
  text-shadow: 0 2px 10px #6366f1cc;
  animation: fadein-txt 1.7s;
}
@keyframes fadein-txt { from {opacity: 0;} to {opacity: 1;} }

/* --------- 메인 컨테이너/반응형 --------- */
.container {
  max-width: 560px; margin: 60px auto 0; background: rgba(255,255,255,0.13);
  box-shadow: 0 8px 36px 0 #6366f133, 0 0.5px 0.5px 0 #38bdf822;
  border-radius: 32px;
  padding: 30px 24px 22px 24px; min-height: 620px;
  backdrop-filter: blur(12px); position: relative; margin-bottom: 38px;
  border: 2.5px solid #a5b4fc33;
  transition: box-shadow 0.18s;
}
@media (max-width: 900px) {
  .container { max-width: 97vw; padding: 6vw 2vw 7vw 2vw;}
}
@media (max-width: 600px) {
  .container { margin-top: 14vw; min-height: 62vw; padding: 4vw 0.5vw 7vw 0.5vw;}
}

/* --------- 상단 바/테마/목차 --------- */
.top-bar { position:relative; min-height:28px; }
.theme-toggle-btn {
  position:absolute; top:17px; right:13px; background:none; border:none; font-size:1.4rem; color:#6366f1;
  cursor:pointer; z-index:20;
}
.toc-toggle-btn {
  position:absolute; top:17px; left:13px; background:none; border:none; font-size:1.2rem; color:#64748b;
  cursor:pointer; z-index:20; font-weight:600;
}

/* --------- 타이틀/찜/좋아요 --------- */
.flex-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 5px;
}
.ebook-title-wrap { flex:1; min-width:0; }
.ebook-title { font-size:1.25rem;font-weight:700;color:#4338ca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ebook-title-en { font-size:0.97rem;color:#64748b;margin-left:10px;}
.favorite-btn, .like-btn {
  font-size:1.6rem;background:none;border:none;cursor:pointer;outline:none;padding:0 2px;
  transition: color .18s, transform .13s;
  user-select: none;
}
.favorite-btn.ani { animation: heart-bounce 0.38s cubic-bezier(.3,1.8,.4,1) 1;}
@keyframes heart-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.4) rotate(-10deg);}
  55% { transform: scale(0.85) rotate(6deg);}
  80% { transform: scale(1.1) rotate(-4deg);}
  100% { transform: scale(1) rotate(0);}
}
.like-btn.ani { animation: thumb-bounce 0.29s cubic-bezier(.22,1.1,.4,1.1) 1;}
@keyframes thumb-bounce {
  0% { transform: scale(1);}
  40% { transform: scale(1.22) rotate(-14deg);}
  60% { transform: scale(0.95);}
  100% { transform: scale(1) rotate(0);}
}

/* --------- TTS 상태/진행바 --------- */
.tts-status-bar {
  height:28px;text-align:center;margin-bottom:8px;font-size:1.05rem;font-weight:600;color:#6366f1;
}
@keyframes spinTTS { to {transform:rotate(360deg);} }
.tts-progress-list { text-align:center;margin:12px 0; }
.tts-progress-list span {
  margin:0 6px; color:#6366f1; opacity:.62;
}
.tts-progress-list span.current {
  background:#6366f1;color:#fff;border-radius:8px;padding:3px 9px;font-weight:600;opacity:1;
}
.tts-controls { text-align:center;margin:20px 0 5px 0;}
.tts-btn { margin:0 12px 0 0; font-size:1.03rem; background:#f1f5f9;border-radius:7px;padding:7px 14px; border:none; cursor:pointer; color:#6366f1; font-weight:600; transition:background .16s; }
.tts-btn:hover, .tts-btn:focus { background:#c7d2fe;color:#fff; }

/* --------- 진도율 바 --------- */
#progressBar {
  height:12px; background:#e0e7ff; border-radius:7px; overflow:hidden; margin:12px 0;
}
#progressBarFill {
  height:100%;background:linear-gradient(90deg,#60a5fa,#6366f1);width:0;transition:width .8s;
}
#progressText {
  text-align:right;color:#6366f1;font-size:0.97rem;margin-bottom:5px;
}

/* --------- 뷰어/목차패널 --------- */
.viewer-row { display:flex; gap:0; }
.viewer {
  width: 100%; height: 380px; min-height: 340px; max-height: 66vw;
  background: #f8fafc;
  border-radius: 19px; border: 1.7px solid #a5b4fc77;
  box-shadow: 0 4px 18px #6366f12e;
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s;
}
@media (max-width: 600px) {
  .viewer { height: 52vw; min-height: 44vw; max-height: 77vw; }
}
.location {
  margin: 8px 0 16px 0; text-align: right; color: #6366f1; font-weight: 600; font-size: 1.11rem; letter-spacing: 0.04em;
}

.toc-panel {
  width: 170px;
  background:#f8fafc;
  border-right:2.5px solid #6366f1;
  padding:18px 8px 8px 10px;
  min-height: 320px;
  max-height: 410px;
  overflow-y: auto;
  font-size:1.01rem;
  box-shadow: 0 2px 8px #818cf822;
  border-radius:18px 0 0 18px;
}
@media (max-width: 600px) {
  .toc-panel { display:none!important; position:fixed!important; left:0; top:0; z-index:101; width:82vw; max-width:320px; height:90vh; border-radius:0 18px 18px 0;}
  .viewer-row { flex-direction:column; }
}
.toc-panel ul { list-style:none;margin:0;padding:0;}
.toc-panel li { margin:0 0 7px 0; }
.toc-panel a { color:#6366f1; text-decoration:underline; cursor:pointer; }
.toc-panel a.current { font-weight:700;color:#2563eb;text-decoration:none;}

/* --------- 컨트롤 --------- */
.controls {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: center; margin-top: 7px; padding-bottom: 4px; font-size: 1.09rem;
}
.controls > div { display: flex; align-items: center; gap: 7px; }
.controls button {
  padding: 7px 17px; background: linear-gradient(90deg,#6366f1 30%,#60a5fa 100%);
  color: #fff; font-weight: 700; font-size: 1.08rem; border: none;
  border-radius: 11px; margin: 0 3px; cursor: pointer;
  box-shadow: 0 1.5px 7px #6366f111;
  transition: background 0.15s, transform .1s;
  outline: none;
}
.controls button.active, .controls button:active {
  background: linear-gradient(90deg,#818cf8 0%,#6366f1 70%);
  transform: scale(1.09);
}
.controls .font-size-btn { padding: 6px 10px; font-size: 1rem;}

/* --------- 다크 테마 --------- */
body.dark {
  background: linear-gradient(120deg,#181f3a 0%,#2d3263 80%,#303030 100%);
  color: #f1f5f9;
}
body.dark .container { background:rgba(30,41,59,.36); border-color:#3730a3b0; }
body.dark .ebook-title { color:#c7d2fe;}
body.dark .tts-status-bar { color:#60a5fa;}
body.dark #progressBar { background:#3b4157; }
body.dark #progressBarFill { background:linear-gradient(90deg,#818cf8,#6366f1); }
body.dark .viewer { background:#191e29;border-color:#4f46e5; }
body.dark .tts-btn { background:#1e293b; color:#a5b4fc;}
body.dark .tts-btn:hover { background:#6366f1; color:#fff;}
body.dark .toc-panel { background:#22263e; color:#dbeafe; border-color:#6366f1;}


.tts-controls {
  text-align: center;
  margin: 17px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 10px;
}

.tts-btn {
  font-size: 0.96rem;
  padding: 5px 13px;
  background: #f1f5f9;
  border-radius: 6px;
  border: none;
  color: #6366f1;
  font-weight: 700;
  margin: 0 1px 6px 0;
  cursor: pointer;
  box-shadow: 0 1.5px 7px #6366f120;
  transition: background .13s, color .13s, box-shadow .18s, transform .08s;
  letter-spacing: 0.01em;
  min-width: 80px;
}
.tts-btn:active, .tts-btn.active {
  background: #818cf8;
  color: #fff;
  transform: scale(1.06);
}
.tts-btn:hover, .tts-btn:focus {
  background: #6366f1;
  color: #fff;
  outline: none;
}

body.dark .tts-btn {
  background: #23263c;
  color: #a5b4fc;
}
body.dark .tts-btn:hover, body.dark .tts-btn:focus, body.dark .tts-btn.active {
  background: #6366f1;
  color: #fff;
}

@media (max-width: 600px) {
  .tts-controls {
    gap: 0 5px;
  }
  .tts-btn {
    min-width: 60px;
    font-size: 0.93rem;
    padding: 4px 7px;
  }
}



.flex-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  min-height: 38px;
}
.ebook-title-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.ebook-title {
  font-size: 1.16rem;
  font-weight: 800;
  color: #4338ca;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.ebook-title-en {
  font-size: 0.96rem;
  color: #64748b;
  font-weight: 500;
  margin-left: 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.1;
}
.ebook-actions {
  display: flex;
  align-items: center;
  gap: 0 3px;
  min-width: 0;
}
.favorite-btn, .like-btn {
  font-size: 1.45rem;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0 1.5px;
  transition: color .14s, transform .1s;
  user-select: none;
  vertical-align: middle;
  display: flex;
  align-items: center;
  min-width: 32px;
}
.like-btn span#likeCount {
  font-size: 1.06rem;
  margin-left: 2px;
  font-weight: 600;
  color: inherit;
}
@media (max-width: 600px) {
  .flex-title {
    gap: 2vw;
    min-height: 34px;
  }
  .ebook-title {
    font-size: 1.01rem;
  }
  .ebook-title-en {
    font-size: 0.88rem;
  }
  .favorite-btn, .like-btn {
    font-size: 1.15rem;
    min-width: 26px;
  }
  .like-btn span#likeCount {
    font-size: 0.97rem;
  }
}



.flex-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  min-height: 38px;
}
.ebook-title-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.ebook-title {
  font-size: 1.16rem;
  font-weight: 800;
  color: #4338ca;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.ebook-title-en {
  font-size: 0.96rem;
  color: #64748b;
  font-weight: 500;
  margin-left: 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.1;
}
.ebook-actions {
  display: flex;
  align-items: center;
  gap: 0 3px;
  min-width: 0;
}
.favorite-btn, .like-btn {
  font-size: 1.45rem;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0 1.5px;
  transition: color .14s, transform .1s;
  user-select: none;
  vertical-align: middle;
  display: flex;
  align-items: center;
  min-width: 32px;
}
.like-btn span#likeCount {
  font-size: 1.06rem;
  margin-left: 2px;
  font-weight: 600;
  color: inherit;
}
@media (max-width: 600px) {
  .flex-title {
    gap: 2vw;
    min-height: 34px;
  }
  .ebook-title {
    font-size: 1.01rem;
  }
  .ebook-title-en {
    font-size: 0.88rem;
  }
  .favorite-btn, .like-btn {
    font-size: 1.15rem;
    min-width: 26px;
  }
  .like-btn span#likeCount {
    font-size: 0.97rem;
  }
}



footer.ebook-bottom-actions {
  width: 100%;
  padding: 18px 0 14px;
  background: #f8fafc;
  border-top: 1px solid #e0e7ef;
  display: flex;
  justify-content: center;
  position: sticky; bottom: 0; left: 0; z-index: 50;
}
footer .ebook-actions {
  display: flex; gap: 20px;
}
.favorite-btn, .like-btn {
  font-size: 1.2rem;
  padding: 8px 18px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 1px 6px 0 #eceff3;
  transition: background 0.2s, color 0.2s;
}
.favorite-btn:hover, .like-btn:hover { background: #f1f5ff; }