:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background: #101720;
  color: #f5f7fa;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: #101720; color: #f5f7fa; }
a { color: inherit; text-decoration: none; }
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 10px 16px; background: rgba(16, 23, 32, .9); backdrop-filter: blur(12px);
  border-bottom: 1px solid #232b3a;
}
.brand { font-weight: 800; letter-spacing: .04em; }
.topbar a, .nav a, .episode-card {
  border: 1px solid #313b4c; background: #151a24; border-radius: 8px;
}
.topbar a { padding: 8px 10px; color: #cfd7e6; font-size: 13px; }
header { max-width: 900px; margin: 0 auto; padding: 32px 18px 22px; }
h1 { margin: 0 0 8px; font-size: clamp(26px, 5vw, 44px); letter-spacing: 0; }
.sub { color: #a9b4c7; line-height: 1.65; margin: 0; }
.episode-list { max-width: 900px; margin: 0 auto; padding: 0 18px 64px; display: grid; gap: 12px; }
.episode-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px; }
.episode-card[hidden] { display: none; }
.episode-card:hover { border-color: #60e090; background: #182130; }
.episode-card strong { display: block; font-size: 19px; margin-bottom: 4px; }
.episode-card span { color: #9eabbf; font-size: 13px; }
.viewer { max-width: 864px; margin: 0 auto; padding: 0 0 50px; }
.page-img { display: block; width: 100%; height: auto; margin: 0 auto 18px; background: #172131; }
.nav { max-width: 900px; margin: 10px auto 70px; padding: 0 18px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.nav a { text-align: center; padding: 14px 10px; color: #dbe5f4; }
.nav a.next { border-color: #60e090; background: #163123; color: #effff5; font-weight: 800; }
.nav.branches { grid-template-columns: .8fr .8fr 1.4fr 1.4fr; }
.nav .ending-light { border-color: #f2b84b; background: #463510; color: #fff6d7; }
.nav .ending-dark { border-color: #df626d; background: #3a171b; color: #ffe9eb; }
.audit { max-width: 900px; margin: 0 auto 48px; padding: 0 18px; color: #8f9daf; font-size: 13px; }
@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; }
  .nav { grid-template-columns: 1fr; }
}