/* === Web novel — Nova Nivalis =================================== */
/* Default styling reads on the cosmos (dark) chrome; body.theme-serene
   turns the reader into a plain snow-paper page. */

.novel-page {
    max-width: 780px;
}

/* ── Shared vocabulary ──────────────────────────────────── */
.nv-eyebrow {
    margin: 0 0 14px;
    font: 500 11px/1 Inter, sans-serif;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--ob-soft);
}

.nv-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    border-radius: 999px;
    font: 500 .92rem/1 "Noto Sans KR", sans-serif;
    letter-spacing: .05em;
    text-decoration: none;
    color: #07111f;
    background: linear-gradient(120deg, #d6f0ff, #a9ddff 55%, #c9bcff);
    box-shadow: 0 10px 34px rgba(169, 221, 255, .22);
    transition: transform .3s ease, box-shadow .3s ease;
}

.nv-button:hover,
.nv-button:focus-visible {
    color: #07111f;
    transform: translateY(-1px);
}

.nv-button-resume {
    color: var(--ob-blue-2);
    background: rgba(169, 221, 255, .1);
    border: 1px solid var(--ob-border-strong);
    box-shadow: none;
}

.nv-button-resume:hover,
.nv-button-resume:focus-visible { color: var(--ob-blue-2); }

/* ── Landing: typographic cover ─────────────────────────── */
.nv-cover {
    text-align: center;
    padding: clamp(30px, 6vh, 64px) 20px clamp(36px, 6vh, 60px);
    border: 1px solid var(--ob-border);
    border-radius: 18px;
    background: var(--ob-glass);
    backdrop-filter: blur(18px);
    box-shadow: var(--ob-shadow);
    margin-bottom: 46px;
}

.nv-title {
    margin: 0;
    font: 700 clamp(38px, 6vw, 58px)/1.25 "Gowun Batang", serif;
    letter-spacing: .14em;
    color: var(--ob-text);
}

.nv-title-en {
    margin: 10px 0 0;
    font: 500 11px/1 Inter, sans-serif;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--ob-soft);
}

.nv-meta {
    margin: 18px 0 0;
    font-size: .9rem;
    color: var(--ob-muted);
}

.nv-epigraph {
    margin: 30px auto 0;
    padding: 18px 0;
    max-width: 480px;
    border-top: 1px solid var(--ob-border);
    border-bottom: 1px solid var(--ob-border);
    font: 400 .95rem/2.1 "Gowun Batang", serif;
    color: var(--ob-muted);
}

.nv-epigraph span { display: block; }

.nv-desc {
    margin: 24px auto 0;
    max-width: 54ch;
    font-weight: 300;
    font-size: .95rem;
    line-height: 2;
    color: var(--ob-muted);
}

.nv-cover-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
}

/* ── Landing: episode list ──────────────────────────────── */
.nv-episodes-head {
    margin: 0 0 6px;
    font: 700 1.28rem/1 "Gowun Batang", serif;
    color: var(--ob-text);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ob-border);
}

.nv-episode-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 44px;
}

.nv-episode-list li { break-inside: avoid; }

.nv-episode {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 11px 6px;
    border-bottom: 1px solid rgba(202, 228, 255, .09);
    text-decoration: none;
    transition: background-color .22s ease;
}

.nv-episode:hover,
.nv-episode:focus-visible { background: rgba(214, 240, 255, .06); }

.nv-episode-no {
    flex: 0 0 34px;
    text-align: right;
    font: 400 .8rem/1.6 Inter, sans-serif;
    color: var(--ob-soft);
}

.nv-episode-title {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ob-muted);
}

.nv-episode:hover .nv-episode-title,
.nv-episode:focus-visible .nv-episode-title { color: var(--ob-text); }

.nv-episode.is-last-read .nv-episode-no { color: var(--ob-blue); }

.nv-episode.is-last-read .nv-episode-title {
    color: var(--ob-blue-2);
}

.nv-episode.is-last-read::after {
    content: "읽던 곳";
    margin-left: auto;
    font: 500 10px/1 "Noto Sans KR", sans-serif;
    letter-spacing: .12em;
    color: var(--ob-blue);
    border: 1px solid rgba(169, 221, 255, .4);
    border-radius: 999px;
    padding: 4px 9px;
    white-space: nowrap;
}

/* ── Reader ─────────────────────────────────────────────── */
.novel-reader { max-width: 720px; }

.nv-reader-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}

.nv-bar-now {
    margin: 0;
    font: 500 .88rem/1 "Noto Sans KR", sans-serif;
    color: var(--ob-muted);
}

.nv-bar-now span { color: var(--ob-soft); font-weight: 400; }

.nv-bar-steps { display: flex; gap: 8px; }

.nv-bar-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--ob-border);
    border-radius: 999px;
    font-size: .84rem;
    color: var(--ob-muted);
    text-decoration: none;
    background: rgba(255, 255, 255, .04);
}

a.nv-bar-link:hover,
a.nv-bar-link:focus-visible {
    color: var(--ob-text);
    border-color: var(--ob-border-strong);
}

.nv-bar-link.is-disabled { opacity: .38; }

/* The sheet: glass panel on cosmos, bare paper on serene */
.nv-sheet {
    border: 1px solid var(--ob-border);
    border-radius: 18px;
    background: var(--ob-glass);
    backdrop-filter: blur(18px);
    box-shadow: var(--ob-shadow);
    padding: clamp(26px, 5vw, 56px);
}

.nv-episode-head {
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--ob-border);
}

.nv-episode-head h1 {
    margin: 0;
    font: 700 clamp(21px, 3.4vw, 27px)/1.5 "Gowun Batang", serif;
    color: var(--ob-text);
}

.nv-body {
    font: 400 1.02rem/2.1 "Gowun Batang", serif;
    color: rgba(233, 241, 251, .92);
    letter-spacing: .01em;
}

.nv-body p { margin: 0 0 1.35em; }

.nv-scene-break {
    border: 0;
    margin: 2.4em auto;
    text-align: center;
}

.nv-scene-break::after {
    content: "✦";
    font-size: .8rem;
    color: var(--ob-soft);
    letter-spacing: .5em;
}

/* Reader footer */
.nv-episode-foot {
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--ob-border);
}

.nv-next-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 24px;
    border: 1px solid var(--ob-border-strong);
    border-radius: 14px;
    text-decoration: none;
    background: rgba(169, 221, 255, .07);
    transition: background-color .25s ease, transform .25s ease;
}

.nv-next-card:hover,
.nv-next-card:focus-visible {
    background: rgba(169, 221, 255, .12);
    transform: translateY(-1px);
}

.nv-next-label {
    font: 500 10.5px/1 "Noto Sans KR", sans-serif;
    letter-spacing: .3em;
    color: var(--ob-blue);
}

.nv-next-title {
    font: 700 1.05rem/1.5 "Gowun Batang", serif;
    color: var(--ob-text);
}

.nv-the-end {
    margin: 0;
    text-align: center;
    font: 400 .98rem/1.8 "Gowun Batang", serif;
    letter-spacing: .14em;
    color: var(--ob-muted);
}

.nv-foot-row {
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
}

/* ── Serene (snow paper) overrides ──────────────────────── */
body.theme-serene .nv-eyebrow { color: var(--sn-mist); }

body.theme-serene .nv-button {
    color: #f7f8fa;
    background: var(--sn-ink);
    box-shadow: 0 10px 28px rgba(35, 42, 53, .16);
}

body.theme-serene .nv-button:hover,
body.theme-serene .nv-button:focus-visible { color: #ffffff; }

body.theme-serene .nv-button-resume {
    color: var(--sn-ink);
    background: transparent;
    border-color: var(--sn-line-strong);
}

body.theme-serene .nv-cover {
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    border-top: 1px solid var(--sn-ink);
    border-bottom: 1px solid var(--sn-line);
}

body.theme-serene .nv-title { color: var(--sn-ink); }
body.theme-serene .nv-title-en { color: var(--sn-mist); }
body.theme-serene .nv-meta { color: var(--sn-faint); }

body.theme-serene .nv-epigraph {
    border-color: var(--sn-line);
    color: var(--sn-body);
}

body.theme-serene .nv-desc { color: var(--sn-body); }

body.theme-serene .nv-episodes-head {
    color: var(--sn-ink);
    border-bottom-color: var(--sn-line);
}

body.theme-serene .nv-episode { border-bottom-color: var(--sn-line); }

body.theme-serene .nv-episode:hover,
body.theme-serene .nv-episode:focus-visible { background: rgba(255, 255, 255, .8); }

body.theme-serene .nv-episode-no { color: var(--sn-mist); }
body.theme-serene .nv-episode-title { color: var(--sn-body); }

body.theme-serene .nv-episode:hover .nv-episode-title,
body.theme-serene .nv-episode:focus-visible .nv-episode-title { color: var(--sn-ink); }

body.theme-serene .nv-episode.is-last-read .nv-episode-no,
body.theme-serene .nv-episode.is-last-read::after { color: var(--sn-blue-deep); border-color: rgba(74, 111, 143, .4); }
body.theme-serene .nv-episode.is-last-read .nv-episode-title { color: var(--sn-blue-deep); }

body.theme-serene .nv-bar-now { color: var(--sn-faint); }
body.theme-serene .nv-bar-now span { color: var(--sn-mist); }

body.theme-serene .nv-bar-link {
    border-color: var(--sn-line-strong);
    background: rgba(255, 255, 255, .7);
    color: var(--sn-faint);
}

body.theme-serene a.nv-bar-link:hover,
body.theme-serene a.nv-bar-link:focus-visible {
    color: var(--sn-ink);
    border-color: var(--sn-mist);
}

body.theme-serene .nv-sheet {
    border: 1px solid var(--sn-line);
    background: var(--sn-card);
    backdrop-filter: none;
    box-shadow: 0 20px 50px rgba(35, 42, 53, .07);
}

body.theme-serene .nv-episode-head { border-bottom-color: var(--sn-line); }
body.theme-serene .nv-episode-head h1 { color: var(--sn-ink); }

body.theme-serene .nv-body { color: #333c49; }
body.theme-serene .nv-scene-break::after { color: var(--sn-mist); }

body.theme-serene .nv-episode-foot { border-top-color: var(--sn-line); }

body.theme-serene .nv-next-card {
    border-color: var(--sn-line-strong);
    background: var(--sn-paper);
}

body.theme-serene .nv-next-card:hover,
body.theme-serene .nv-next-card:focus-visible { background: #eef2f7; }

body.theme-serene .nv-next-label { color: var(--sn-blue-deep); }
body.theme-serene .nv-next-title { color: var(--sn-ink); }
body.theme-serene .nv-the-end { color: var(--sn-faint); }

/* ── Small screens ──────────────────────────────────────── */
@media (max-width: 720px) {
    .nv-episode-list { columns: 1; }
    .nv-reader-bar { flex-wrap: wrap; }
    .nv-sheet { padding: 22px 18px; }
    .nv-body { font-size: .98rem; line-height: 2.05; }
}

@media (prefers-reduced-motion: reduce) {
    .nv-button, .nv-next-card { transition: none; }
}