/* ============================================================
   WEBNOVEL DETAIL PAGE
   ============================================================ */
:root { --wn-accent: #6366f1; --wn-accent2: #8b5cf6; }

.wn-detail-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px 80px;
}

/* ── 헤더 ── */
.wn-header {
  display: flex;
  gap: 32px;
  margin-bottom: 48px;
}
.wn-cover-wrap { flex-shrink: 0; width: 180px; }
.wn-cover-wrap img {
  width: 180px;
  height: 240px;
  border-radius: 12px;
  object-fit: cover;
}
.wn-cover-empty {
  width: 180px;
  height: 240px;
  border-radius: 12px;
  background: rgba(99, 102, 241, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.wn-info { flex: 1; min-width: 0; }

.wn-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  letter-spacing: .05em;
}
.wn-title {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 8px;
  line-height: 1.2;
}
.wn-author {
  font-size: .88rem;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 14px;
}
body.light-mode .wn-author { color: rgba(0, 0, 0, .45); }

.wn-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.wn-genre-tag {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  background: rgba(99, 102, 241, .15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, .25);
}
body.light-mode .wn-genre-tag {
  background: rgba(99, 102, 241, .1);
  color: #4f46e5;
  border-color: rgba(99, 102, 241, .2);
}

.wn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.wn-tag {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: .70rem;
  font-weight: 500;
  background: rgba(139, 92, 246, .1);
  color: rgba(196, 181, 253, .85);
  border: 1px solid rgba(139, 92, 246, .2);
}
body.light-mode .wn-tag {
  background: rgba(99, 102, 241, .07);
  color: #6d5acd;
  border-color: rgba(99, 102, 241, .15);
}

.wn-rating-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.wn-stars { color: #fbbf24; font-size: .95rem; }
.wn-rating-num { font-size: .9rem; font-weight: 700; }
.wn-review-cnt { font-size: .8rem; color: rgba(255, 255, 255, .4); }
body.light-mode .wn-review-cnt { color: rgba(0, 0, 0, .4); }

.wn-desc {
  font-size: .9rem;
  color: rgba(255, 255, 255, .6);
  line-height: 1.75;
  margin-bottom: 20px;
  max-width: 600px;
}
body.light-mode .wn-desc { color: rgba(0, 0, 0, .55); }

.wn-meta-row {
  display: flex;
  gap: 20px;
  font-size: .78rem;
  color: rgba(255, 255, 255, .4);
}
body.light-mode .wn-meta-row { color: rgba(0, 0, 0, .4); }
.wn-meta-row strong { color: rgba(255, 255, 255, .8); font-weight: 700; }
body.light-mode .wn-meta-row strong { color: rgba(0, 0, 0, .75); }

/* ── 탭 ── */
.wn-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: 32px;
}
body.light-mode .wn-tabs { border-bottom-color: rgba(0, 0, 0, .1); }

.wn-tab-btn {
  padding: 12px 20px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  color: rgba(255, 255, 255, .4);
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
body.light-mode .wn-tab-btn { color: rgba(0, 0, 0, .4); }
.wn-tab-btn:hover { color: rgba(255, 255, 255, .75); }
body.light-mode .wn-tab-btn:hover { color: rgba(0, 0, 0, .7); }
.wn-tab-btn.active { color: #fff; border-bottom-color: var(--wn-accent); }
body.light-mode .wn-tab-btn.active { color: #0f172a; border-bottom-color: #6366f1; }

.wn-tab-panel { display: none; }
.wn-tab-panel.active { display: block; }

/* ── 에피소드 목록 ── */
.wn-ep-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wn-ep-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  transition: background .18s;
  text-decoration: none;
  color: inherit;
}
.wn-ep-item:hover { background: rgba(99, 102, 241, .1); }
body.light-mode .wn-ep-item { background: rgba(0, 0, 0, .03); }
body.light-mode .wn-ep-item:hover { background: rgba(99, 102, 241, .07); }

.wn-ep-num {
  font-size: .8rem;
  color: var(--wn-accent);
  font-weight: 700;
  min-width: 32px;
}
.wn-ep-title { flex: 1; font-size: .92rem; font-weight: 500; }
.wn-ep-date { font-size: .75rem; color: rgba(255, 255, 255, .3); }
body.light-mode .wn-ep-date { color: rgba(0, 0, 0, .35); }
.wn-ep-new {
  font-size: .62rem;
  font-weight: 700;
  background: #ef4444;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}
.wn-ep-ai {
  font-size: .62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
/* provider colors */
.wn-ep-ai.wn-ai-gpt        { background: #1A1A1A; color: #fff; }
.wn-ep-ai.wn-ai-grok       { background: #6B7280; color: #fff; }
.wn-ep-ai.wn-ai-claude     { background: #F97316; color: #fff; }
.wn-ep-ai.wn-ai-gemini     { background: #38BDF8; color: #fff; }
.wn-ep-ai.wn-ai-qwen       { background: #7C3AED; color: #fff; }
.wn-ep-ai.wn-ai-llama      { background: #F5F5F5; color: #1a1a1a; }
.wn-ep-ai.wn-ai-deepseek   { background: #3B82F6; color: #fff; }
.wn-ep-ai.wn-ai-hyperclova { background: #22C55E; color: #fff; }
.wn-ep-ai.wn-ai-exaone     { background: #EC4899; color: #fff; }
.wn-ep-ai.wn-ai-mistral    { background: #EF4444; color: #fff; }
.wn-ep-empty {
  text-align: center;
  padding: 60px 0;
  color: rgba(255, 255, 255, .3);
}
body.light-mode .wn-ep-empty { color: rgba(0, 0, 0, .3); }

/* ── 공지사항 ── */
.wn-announce-item {
  padding: 16px 20px;
  border-radius: 10px;
  background: rgba(99, 102, 241, .08);
  border: 1px solid rgba(99, 102, 241, .18);
  margin-bottom: 8px;
}
.wn-announce-item.pinned {
  border-color: rgba(251, 191, 36, .3);
  background: rgba(251, 191, 36, .06);
}
.wn-announce-title { font-size: .92rem; font-weight: 700; margin-bottom: 4px; }
.wn-announce-date { font-size: .75rem; color: rgba(255, 255, 255, .35); }
body.light-mode .wn-announce-date { color: rgba(0, 0, 0, .4); }
.wn-announce-pin {
  font-size: .65rem;
  background: #fbbf24;
  color: #000;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
}
.wn-announce-body {
  margin-top: 8px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .6);
}
body.light-mode .wn-announce-body { color: rgba(0, 0, 0, .55); }
.wn-empty-msg {
  text-align: center;
  padding: 60px 0;
  color: rgba(255, 255, 255, .3);
}
body.light-mode .wn-empty-msg { color: rgba(0, 0, 0, .3); }

/* ── 통계 ── */
.wn-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.wn-stat-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 20px;
}
body.light-mode .wn-stat-card { background: #f8f8ff; border-color: rgba(0, 0, 0, .07); }

.wn-stat-card h4 {
  font-size: .82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
body.light-mode .wn-stat-card h4 { color: rgba(0, 0, 0, .45); }

.wn-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: .8rem;
}
.wn-bar-label { min-width: 52px; color: rgba(255, 255, 255, .6); }
body.light-mode .wn-bar-label { color: rgba(0, 0, 0, .55); }
.wn-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, .08);
  border-radius: 3px;
  overflow: hidden;
}
body.light-mode .wn-bar-track { background: rgba(0, 0, 0, .08); }
.wn-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 3px;
}
.wn-bar-val { min-width: 28px; text-align: right; color: rgba(255, 255, 255, .5); }
body.light-mode .wn-bar-val { color: rgba(0, 0, 0, .45); }

.wn-reader-count { font-size: 1.6rem; font-weight: 800; margin-bottom: 4px; }
.wn-reader-label { font-size: .78rem; color: rgba(255, 255, 255, .4); }
body.light-mode .wn-reader-label { color: rgba(0, 0, 0, .4); }

/* ── 리뷰 ── */
.wn-review-form,
.wn-comment-form {
  background: rgba(255, 255, 255, .04);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, .07);
}
body.light-mode .wn-review-form,
body.light-mode .wn-comment-form {
  background: #f8f8ff;
  border-color: rgba(0, 0, 0, .07);
}
.wn-review-form h4,
.wn-comment-form h4 {
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.wn-star-select { display: flex; gap: 6px; margin-bottom: 12px; }
.wn-star-select span {
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform .15s;
}
.wn-star-select span:hover { transform: scale(1.2); }

.wn-review-item,
.wn-comment-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
body.light-mode .wn-review-item,
body.light-mode .wn-comment-item { border-bottom-color: rgba(0, 0, 0, .07); }

.wn-review-user,
.wn-comment-user { font-size: .82rem; font-weight: 700; margin-bottom: 4px; }

.wn-review-text,
.wn-comment-text {
  font-size: .88rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.6;
}
body.light-mode .wn-review-text,
body.light-mode .wn-comment-text { color: rgba(0, 0, 0, .6); }

.wn-item-date {
  font-size: .73rem;
  color: rgba(255, 255, 255, .3);
  margin-top: 6px;
}
body.light-mode .wn-item-date { color: rgba(0, 0, 0, .35); }

.wn-reply {
  margin-left: 20px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .03);
  border-radius: 8px;
  margin-top: 8px;
  font-size: .84rem;
}
body.light-mode .wn-reply { background: rgba(0, 0, 0, .03); }

/* ── 공통 입력/버튼 ── */
.wn-textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  color: inherit;
  font-size: .88rem;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  box-sizing: border-box;
}
body.light-mode .wn-textarea { background: #fff; border-color: rgba(0, 0, 0, .15); }

.wn-btn-submit {
  margin-top: 10px;
}
.wn-btn-primary {
  display: inline-block;
  padding: 10px 22px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.wn-btn-primary:hover { opacity: .85; }

.wn-bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, .4);
  background: rgba(99, 102, 241, .1);
  color: rgba(255, 255, 255, .7);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
}
.wn-bookmark-btn:hover { background: rgba(99, 102, 241, .2); color: #fff; }
.wn-bookmark-btn.active { background: rgba(99, 102, 241, .25); color: #a5b4fc; border-color: rgba(99, 102, 241, .6); }
body.light-mode .wn-bookmark-btn { background: rgba(99, 102, 241, .07); color: #4f46e5; border-color: rgba(99, 102, 241, .25); }
body.light-mode .wn-bookmark-btn.active { background: rgba(99, 102, 241, .15); }

/* ── 반응형 ── */
@media (max-width: 640px) {
  .wn-header { flex-direction: column; align-items: center; text-align: center; }
  .wn-genres { justify-content: center; }
  .wn-meta-row { justify-content: center; flex-wrap: wrap; }
  .wn-stats-grid { grid-template-columns: 1fr; }
  .wn-detail-page { padding: 20px 16px 60px; }
  .wn-tab-btn { padding: 10px 14px; font-size: .82rem; }
}