/* ===================================================
   소설 (novel.php) — style.css 의 테마 토큰을 그대로 사용
   =================================================== */

.nv-crumb { font-size: 14px; color: var(--muted-3); margin-bottom: 14px; }
.nv-crumb a { color: var(--muted); }
.nv-crumb a:hover { color: var(--link); text-decoration: underline; }

/* ---------- 작품 목록 ---------- */
.nv-shelf { display: grid; gap: 20px; }
.nv-card {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 24px;
    background: var(--surface);
    border-radius: 8px;
    padding: 22px;
    box-shadow: 0 2px 8px var(--shadow-color);
}
.nv-cover {
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    background: linear-gradient(160deg, var(--grad-a), var(--grad-b));
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    font-weight: bold;
    font-size: 15px;
    line-height: 1.4;
    word-break: keep-all;
    box-shadow: inset 6px 0 0 rgba(0,0,0,.15);
}
.nv-card h3 { font-size: 21px; margin-bottom: 8px; }
.nv-card h3 a:hover { color: var(--link); }
.nv-card p { color: var(--text-4); line-height: 1.7; font-size: 15px; }
.nv-card .btn-row { margin-top: 16px; }
.nv-meta { font-size: 13px; color: var(--muted-3); margin-bottom: 10px; }
.nv-meta span + span::before { content: "·"; margin: 0 7px; color: var(--faint-2); }
.nv-progress-label { color: var(--link); }

.nv-cover.has-img { aspect-ratio: 2 / 3; padding: 0; overflow: hidden; background: var(--th-bg); box-shadow: 0 2px 10px var(--shadow-color); }
.nv-cover.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.nv-cover.has-img:hover img { transform: scale(1.03); }

/* ---------- 작품 소개 / 목차 ---------- */
.nv-intro.has-cover { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.nv-intro-cover { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.nv-intro-cover img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.nv-intro-body { min-width: 0; }
.nv-intro .view-meta span { display: inline-block; white-space: nowrap; }
.nv-intro .view-meta span.nv-progress-label { color: var(--link); }
.nv-teaser { color: var(--text-3); line-height: 1.8; font-size: 15px; }

.nv-toc {
    margin-top: 20px;
    background: var(--surface);
    border-radius: 8px;
    padding: 10px 30px 20px;
    box-shadow: 0 2px 8px var(--shadow-color);
}
.nv-part {
    font-size: 16px;
    color: var(--link);
    margin: 22px 0 6px;
}
.nv-eps { list-style: none; }
.nv-eps li + li { border-top: 1px solid var(--line-soft); }
.nv-eps a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 4px;
    color: var(--text-2);
}
.nv-eps a:hover { background: var(--hover-bg); }
.nv-ep-meta { color: var(--faint); font-size: 13px; white-space: nowrap; }
.nv-ep-meta > span + span::before { content: "·"; margin: 0 6px; color: var(--faint-2); }
.nv-eps a.is-read .nv-ep-title { color: var(--faint); }
.nv-eps a.is-read .nv-ep-meta::before { content: "읽음 · "; }
.nv-eps a.is-last { font-weight: bold; }
.nv-eps a.is-last .nv-ep-meta::before { content: "읽던 곳 · "; color: var(--link); }

/* ---------- 회차 읽기 ---------- */
.nv-reader { max-width: 800px; margin: 0 auto; padding: 36px 48px; }
.nv-head .category { color: var(--link); font-size: 13px; font-weight: bold; margin-bottom: 6px; }
.nv-head h1 { font-size: 26px; line-height: 1.4; margin-bottom: 8px; word-break: keep-all; }
.nv-ep-info { font-size: 13px; color: var(--muted-3); margin-bottom: 16px; }
.nv-ep-info span + span::before { content: "·"; margin: 0 7px; color: var(--faint-2); }

.nv-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}
.nv-tools select {
    flex: 1 1 200px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid var(--line-input);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 14px;
}
.nv-tool-group { display: inline-flex; border: 1px solid var(--line-input); border-radius: 4px; overflow: hidden; }
.nv-tool-group button {
    border: 0;
    background: var(--surface);
    color: var(--text-3);
    padding: 7px 12px;
    font-size: 14px;
    cursor: pointer;
}
.nv-tool-group button + button { border-left: 1px solid var(--line-input); }
.nv-tool-group button:hover { background: var(--hover-bg); }
.nv-tool-group button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.nv-tool-group sup { font-size: 10px; }

.nv-pager { display: flex; gap: 8px; justify-content: space-between; }
.nv-pager-top { margin: 16px 0 6px; }
.nv-pager-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.nv-pager .btn { flex: 1; text-align: center; }
.nv-pager .btn small { color: var(--faint); margin-left: 4px; }
.nv-pager .is-disabled { opacity: .4; cursor: default; pointer-events: none; }

.nv-body {
    --nv-size: 17px;
    font-size: var(--nv-size);
    line-height: 1.95;
    color: var(--text-2);
    word-break: keep-all;
    overflow-wrap: break-word;
    margin-top: 26px;
}
.nv-body.is-serif { font-family: "Noto Serif KR", "Nanum Myeongjo", "NanumMyeongjo", "Batang", "바탕", serif; }
.nv-body p { margin: 0 0 1.05em; }
.nv-body p.nv-end { text-align: center; font-style: italic; color: var(--muted); margin-top: 2.5em; }

.nv-break {
    border: 0;
    height: auto;
    margin: 2.2em 0;
    text-align: center;
}
.nv-break::before { content: "◇"; color: var(--faint-2); letter-spacing: 1em; font-size: .8em; }

.nv-letter {
    margin: 1.6em 0;
    padding: 1.2em 1.4em;
    border-left: 4px solid var(--line-4);
    background: var(--toolbar-bg);
    border-radius: 0 6px 6px 0;
    font-family: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
    color: var(--text-3);
}
.nv-letter p:last-child { margin-bottom: 0; }

.nv-list { margin: 1em 0 1.3em 1.6em; }
.nv-list li { padding-left: .3em; margin-bottom: .35em; }

.nv-table-wrap { overflow-x: auto; margin: 1.5em 0; }
.nv-table { width: 100%; border-collapse: collapse; font-size: .9em; line-height: 1.6; min-width: 460px; }
.nv-table th, .nv-table td { border: 1px solid var(--line); padding: .6em .8em; vertical-align: top; text-align: left; }
.nv-table thead th { background: var(--th-bg); text-align: center; }
.nv-table tbody th { background: var(--th-bg); white-space: nowrap; font-weight: bold; }

.nv-hint { margin-top: 18px; font-size: 12px; color: var(--faint); text-align: center; }
.nv-hint kbd {
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 0 5px;
    font-size: 11px;
    background: var(--th-bg);
}

/* 읽은 정도 표시줄 */
.nv-progressbar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 50; pointer-events: none; }
.nv-progressbar span { display: block; height: 100%; width: 0; background: var(--grad-b); transition: width .1s linear; }

@media (max-width: 768px) {
    .nv-card { grid-template-columns: 90px 1fr; gap: 16px; padding: 16px; }
    .nv-cover { font-size: 11px; padding: 8px; }
    .nv-intro.has-cover { grid-template-columns: 1fr; gap: 20px; }
    .nv-intro-cover { width: 160px; margin: 0 auto; }
    .nv-card h3 { font-size: 18px; }
    .nv-toc { padding: 4px 18px 14px; }
    .nv-reader { padding: 22px 18px; }
    .nv-head h1 { font-size: 21px; }
    .nv-body { line-height: 1.85; }
    .nv-hint { display: none; }
}

@media print {
    .nv-tools, .nv-pager, .nv-hint, .nv-progressbar, .nv-crumb { display: none; }
    .nv-reader { box-shadow: none; padding: 0; }
}