@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ═══ CSS Variables — Light Mode (Default) ═══ */
:root {
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-logo: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --bg: #f8f9fa;
  --surface: #ffffff;
  --surface2: #f0f1f3;
  --border: #e2e4e8;
  --accent: #5b21b6;
  --accent2: #5b4ccc;
  --accent3: #d63384;
  /* 별점 — 골드 대신 앰버/옐로우-오렌지 */
  --star-rating: #f59e0b;
  --star-rating-strong: #ea580c;
  --text: #111118;
  --text2: #2f3747;
  --text3: #586173;
  --purple: #6c5ce7;
  --pink: #e84393;
  --nav-bg: rgba(255,255,255,0.97);
  --hero-grad1: #f5f2fa;
  --hero-grad2: #eef2f8;
  --hero-overlay: rgba(0,0,0,0.55);
  --hero-bg-txt: rgba(0,0,0,0.03);
  --detail-cta-bg: rgba(255,255,255,0.95);
  --cash-grad1: #ede6f8;
  --cash-grad2: #dce8f8;
  --cover-shadow: rgba(0,0,0,0.15);
  --hero-btn-bg: rgba(255,255,255,0.85);
  --hero-btn-color: var(--text);
  --hero-btn-border: 1px solid var(--border);
  --badge-bg: rgba(0,0,0,0.06);
  --viewer-bg: #f5f5f0;
  --viewer-bar: rgba(255,255,255,0.95);
  --viewer-text: #2a2a3a;
  --continue-prog-bg: rgba(0,0,0,0.08);
  --splash-grad: linear-gradient(160deg, #f0edf6 0%, #e8e4f0 50%, #edf0ed 100%);
  --splash-badge-bg: rgba(0,0,0,0.04);
  --splash-badge-border: rgba(0,0,0,0.08);
  /* 필 탭(홈 피드·서재·탐색 장르칩) — 선택: 퍼플 그라디언트 / 비선택: 화이트 + 보더 1줄 */
  --pill-tab-active-grad: linear-gradient(135deg, #4c1d95 0%, #5b21b6 8%, #6d28d9 22%, #7c3aed 48%, #9333ea 74%, #a855f7 100%);
  --pill-tab-inactive-bg: #ffffff;
  --pill-tab-inactive-border-color: var(--border);
  /* 페이지 최상단 — 좌우·노치 안전 영역 공통 */
  --page-pad-x: 16px;
  --page-header-pb: 8px;
}

/* ═══ Dark Mode ═══ */
:root.dark {
  --bg: #0a0a0f;
  --surface: #13131a;
  --surface2: #1c1c28;
  --border: #2a2a3a;
  --accent: #7c3aed;
  --accent2: #7c6fff;
  --accent3: #ff6b9d;
  --star-rating: #fbbf24;
  --star-rating-strong: #fb923c;
  --text: #e8e8f0;
  --text2: #a5a7c2;
  --text3: #7d809f;
  --purple: #7c6fff;
  --pink: #ff6b9d;
  --nav-bg: rgba(10,10,15,0.97);
  --hero-grad1: #1a0a2e;
  --hero-grad2: #0d1a2e;
  --hero-overlay: rgba(0,0,0,0.9);
  --hero-bg-txt: rgba(255,255,255,0.03);
  --detail-cta-bg: rgba(13,13,20,0.95);
  --cash-grad1: #1a1040;
  --cash-grad2: #0a2040;
  --cover-shadow: rgba(0,0,0,0.4);
  --hero-btn-bg: rgba(0,0,0,0.35);
  --hero-btn-color: #fff;
  --hero-btn-border: 1px solid rgba(255,255,255,0.15);
  --badge-bg: rgba(255,255,255,0.06);
  --viewer-bg: #08080e;
  --viewer-bar: rgba(8,8,14,0.95);
  --viewer-text: #d0d0e0;
  --continue-prog-bg: rgba(255,255,255,0.1);
  --splash-grad: linear-gradient(160deg, #0a0a0f 0%, #0f0a1a 50%, #0a0f0f 100%);
  --splash-badge-bg: rgba(255,255,255,0.06);
  --splash-badge-border: rgba(255,255,255,0.1);
  --pill-tab-active-grad: linear-gradient(135deg, #5b21b6 0%, #6d28d9 14%, #7c3aed 32%, #9333ea 55%, #a855f7 78%, #c084fc 100%);
  --pill-tab-inactive-bg: var(--surface);
  --pill-tab-inactive-border-color: var(--border);
}

/* ═══ Reset & Base ═══ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  transition: background 0.3s ease, color 0.3s ease;
}

/* 워드마크 "Agharta" 등 앱 로고에만 세리프 사용 */
.agharta-brand {
  font-family: var(--font-logo);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ═══ App Container ═══ */
.app-container {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
}

/* ═══ Page top / header bar (공통 패딩) ═══ */
.page-header {
  flex-shrink: 0;
  box-sizing: border-box;
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  padding-bottom: var(--page-header-pb, 8px);
  padding-left: max(var(--page-pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--page-pad-x), env(safe-area-inset-right, 0px));
}
.page-header--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.page-header--gap-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-header--border {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.page-header--pb-0 {
  padding-bottom: 0;
}
.page-header--pb-sm {
  padding-bottom: 6px;
}
.page-header--pb-md {
  padding-bottom: 10px;
}
.page-header--search-stack {
  padding-top: max(6px, env(safe-area-inset-top, 0px));
  padding-bottom: 10px;
}
.page-header--back-only {
  padding-bottom: 0;
  padding-left: max(var(--page-pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--page-pad-x), env(safe-area-inset-right, 0px));
}

/* ═══ Screen System ═══ */
.screen {
  display: none;
  width: 100%;
  height: 100%;
  flex-direction: column;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  background: var(--bg);
  transition: background 0.3s ease;
}
.screen.active {
  display: flex;
  animation: screenIn 0.25s ease;
  z-index: 1;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══ Status Bar ═══ */
.status-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 8px;
  font-size: 11px;
  font-family: var(--font-sans);
  color: var(--text);
  flex-shrink: 0;
  padding-top: max(12px, env(safe-area-inset-top, 12px));
  margin-top: 0;
  z-index: 50;
}
.status-right { display: flex; gap: 6px; align-items: center; }

/* ═══ Global Bottom Tab Bar ═══ */
#global-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s ease, background 0.3s ease;
}
#global-bottom-nav.visible {
  transform: translateY(0);
}
.bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  color: var(--text3);
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bnav-item:active { transform: scale(0.9); }
.bnav-item.active { color: var(--accent2); }
.bnav-item .bi { font-size: 20px; line-height: 1; }

/* ═══ Agharta Icon (SVG Pictogram) ═══ */
.agi { display: inline-flex; align-items: center; justify-content: center; color: inherit; flex-shrink: 0; }
.agi svg { width: 1em; height: 1em; display: block; }
.bnav-item .agi svg { width: 22px; height: 22px; }
.menu-icon.agi svg { width: 18px; height: 18px; }

/* Hide inline bottom-nav copies from wireframe screens */
.screen > .bottom-nav { display: none !important; }

/* ═══ Touch & Scroll ═══ */
button, [onclick] { -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:active, [onclick]:active { opacity: 0.75; }

/* ═══ Unified Button Radius ═══ */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border-radius: 8px !important;
}
/* 게스트 홈 · 무료 가입하기 — 알약형 라운드 */
button.guest-cta-btn {
  border-radius: 50px !important;
}
/* 피드 카드 하단 외부 CTA — 카드(16px)와 동일 반경 (전역 button 8px 덮어씀) */
button.feed-read-btn.feed-read-btn-outside {
  border-radius: 0 0 16px 16px !important;
}
/* 최근본 카드 내 재생 — 단색 원형(소형) */
.feed-recent-card > button.feed-recent-play {
  border-radius: 50% !important;
  padding: 0 !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  align-self: center;
  box-sizing: border-box;
}

/* ═══ Mobile Readability Tuning ═══ */
body {
  font-size: 15px;
  line-height: 1.5;
}

/* Keep touch targets large enough on mobile */
button,
.btn-primary,
.btn-read,
.cash-btn,
.viewer-nav-btn,
.icon-btn,
.menu-item,
.genre-tag,
.filter-chip,
.ranking-tab,
.bnav-item {
  min-height: 44px;
}

/* Lift tiny text sizes for better legibility */
.bnav-item { font-size: 10px; gap: 4px; }
.bnav-item .agi svg { width: 20px; height: 20px; }
.section-more,
.book-meta,
.result-stats,
.progress-text,
.profile-email,
.menu-section-title,
.top3-rank,
.top3-title,
.rank-author,
.rank-stats,
.lang-native,
.ep-meta,
.detail-stat-label,
.viewer-ep,
.lib-ep-info,
.profile-stat-label,
.cash-label,
.cash-sub {
  font-size: 11px !important;
  line-height: 1.45;
}

.result-tag,
.lang-badge,
.menu-badge,
.ep-free,
.book-cover-lang,
.rank-badge {
  font-size: 10px !important;
}

.book-title,
.result-title,
.ep-title,
.continue-title,
.lib-title,
.menu-item,
.search-input-mock,
.filter-chip,
.genre-tag {
  font-size: 13px !important;
  line-height: 1.45;
}

.viewer-content {
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.01em;
}

.home-body, .detail-body, .viewer-content, .search-body,
.library-body, .mypage-body, .ranking-body, .settings-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* scrollbar hide */
*::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

/* ═══ Screen-Specific CSS (from wireframe) ═══ */
  /* ============================
     SCREEN 01 — SPLASH
  ============================ */
  #screen-splash {
    background: var(--splash-grad);
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .splash-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(124,111,255,0.12) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(124,111,255,0.08) 0%, transparent 50%);
  }

  .splash-content {
    text-align: center;
    z-index: 1;
  }

  .splash-orb {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    margin: 0 auto 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    box-shadow: 0 0 60px rgba(124,111,255,0.3), 0 0 120px rgba(124,111,255,0.15);
    animation: orbFloat 4s ease-in-out infinite;
  }

  @keyframes orbFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  .splash-title {
    font-family: var(--font-sans);
    font-size: 32px;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.1;
  }

  .splash-title em {
    color: var(--accent);
    font-style: italic;
  }

  .splash-sub {
    font-size: 11px;
    color: var(--text2);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-top: 10px;
    font-family: var(--font-sans);
  }

  .splash-langs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 28px;
    flex-wrap: wrap;
    padding: 0 20px;
  }

  .lang-badge {
    background: var(--splash-badge-bg);
    border: 1px solid var(--splash-badge-border);
    color: var(--text2);
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    font-family: var(--font-sans);
  }

  .splash-btn {
    margin-top: 40px;
    background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 55%, #8b5cf6 100%);
    color: #fff;
    border: none;
    padding: 16px 48px;
    border-radius: 500px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
    letter-spacing: 0.05em;
    box-shadow: 0 8px 30px rgba(76, 29, 149, 0.34);
    transition: all 0.2s;
  }

  /* ============================
     SCREEN 02 — ONBOARDING (LANG SELECT)
  ============================ */
  #screen-onboard {
    background: var(--bg);
    overflow-y: auto;
  }

  .onboard-hero {
    padding: max(50px, env(safe-area-inset-top, 0px)) max(var(--page-pad-x), env(safe-area-inset-right, 0px)) 24px max(var(--page-pad-x), env(safe-area-inset-left, 0px));
    text-align: center;
  }

  .onboard-title {
    font-family: var(--font-sans);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
  }

  .onboard-title span { color: #5b21b6; }
  :root.dark .onboard-title span { color: #a78bfa; }

  .onboard-sub {
    font-size: 12px;
    color: var(--text2);
    margin-top: 10px;
    line-height: 1.6;
  }

  .lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 20px;
    margin-top: 20px;
  }

  .lang-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .lang-card.selected {
    border-color: #5b21b6;
    background: rgba(42, 20, 82, 0.07);
  }


  .lang-flag { font-size: 22px; }

  .lang-info { flex: 1; }
  .lang-name { font-size: 13px; font-weight: 600; }
  .lang-native { font-size: 10px; color: var(--text2); margin-top: 2px; }

  .lang-check {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 9px;
  }
  .lang-card.selected .lang-check {
    background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
    border-color: #6d28d9;
    color: #fff;
  }

  :root.dark .lang-card.selected {
    border-color: #a78bfa;
    background: rgba(124, 111, 255, 0.12);
  }

  .onboard-cta {
    padding: 20px;
    margin-top: 10px;
  }
  /* splash.html .splash-cta 와 동일 — 언어 선택 하단 CTA */
  #screen-first-lang .onboard-cta .btn-primary,
  #screen-onboard .onboard-cta .btn-primary {
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: linear-gradient(90deg, #4c1d95 0%, #6d28d9 55%, #7e22ce 100%);
    color: #fff;
    border: none;
    padding: 15px 0;
    border-radius: 50px !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-family: var(--font-sans);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(109, 40, 217, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  #screen-first-lang .onboard-cta .btn-primary:active,
  #screen-onboard .onboard-cta .btn-primary:active {
    opacity: 1;
    transform: scale(0.97);
    box-shadow: 0 2px 14px rgba(109, 40, 217, 0.28);
  }

  /* ============================
     SCREEN 03 — HOME
  ============================ */
  #screen-home {
    background: var(--bg);
    overflow: hidden;
  }

  .home-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(var(--page-pad-x), env(safe-area-inset-right, 0px)) 16px max(var(--page-pad-x), env(safe-area-inset-left, 0px));
  }

  .home-logo {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
  }

  .home-actions {
    display: flex;
    gap: 12px;
  }

  .icon-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
  }

  /* Hero Banner */
  .hero-banner {
    margin: 0 20px;
    border-radius: 20px;
    overflow: hidden;
    height: 200px;
    position: relative;
    background: linear-gradient(135deg, var(--hero-grad1) 0%, var(--hero-grad2) 100%);
  }

  .hero-bg-text {
    position: absolute;
    font-family: var(--font-sans);
    font-size: 80px;
    color: var(--hero-bg-txt);
    top: -10px;
    right: -10px;
    line-height: 1;
    pointer-events: none;
  }

  .hero-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 16px 20px;
    background: linear-gradient(0deg, var(--hero-overlay) 0%, transparent 100%);
  }

  .hero-genre {
    font-size: 9px;
    font-family: var(--font-sans);
    color: var(--accent);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: rgba(124,111,255,0.15);
    border: 1px solid rgba(124,111,255,0.3);
    display: inline-block;
    padding: 3px 8px;
    border-radius: 20px;
    margin-bottom: 6px;
  }

  .hero-title {
    font-family: var(--font-sans);
    font-size: 20px;
    color: white;
    line-height: 1.2;
  }

  .hero-meta {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 10px;
    color: rgba(255,255,255,0.6);
  }

  .hero-dots {
    position: absolute;
    bottom: 60px; right: 16px;
    display: flex; gap: 4px;
  }

  .hero-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
  }
  .hero-dot.active { background: var(--accent); width: 16px; border-radius: 3px; }

  /* Sections */
  .section {
    margin-top: 28px;
    padding: 0 20px;
  }

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
  }

  .section-title span {
    color: var(--accent);
  }

  .section-more {
    font-size: 11px;
    color: var(--text2);
    font-family: var(--font-sans);
  }

  /* Book Card Horizontal */
  .books-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin: 0 -20px;
    padding: 0 20px 8px;
    scrollbar-width: none;
  }

  .books-row::-webkit-scrollbar { display: none; }

  .book-card {
    flex-shrink: 0;
    width: 100px;
    cursor: pointer;
  }

  .book-cover {
    width: 100px;
    height: 140px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    display: flex; align-items: flex-end;
    margin-bottom: 8px;
    box-shadow: 0 4px 20px var(--cover-shadow);
  }

  .book-cover-inner {
    width: 100%; height: 100%;
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
  }

  .book-cover-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 60%);
  }

  .book-cover-lang {
    position: absolute;
    top: 6px; right: 6px;
    background: rgba(0,0,0,0.6);
    font-size: 9px;
    color: var(--accent);
    padding: 2px 5px;
    border-radius: 6px;
    font-family: var(--font-sans);
  }

  .book-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .book-meta {
    font-size: 9px;
    color: var(--text2);
    margin-top: 3px;
    display: flex;
    gap: 6px;
  }

  /* Genre Tags */
  .genre-tags {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 0 20px 4px;
  }
  .genre-tags::-webkit-scrollbar { display: none; }

  .genre-tag {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 11px;
    border: 1px solid var(--pill-tab-inactive-border-color);
    background: var(--pill-tab-inactive-bg);
    color: var(--text2);
    cursor: pointer;
    transition: all 0.2s;
  }

  .genre-tag.active {
    background: var(--pill-tab-active-grad);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 2px 16px rgba(124, 58, 237, 0.38);
  }

  /* Rank Card */
  .rank-list { display: flex; flex-direction: column; gap: 10px; }

  .rank-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    background: var(--surface);
    border-radius: 50px;
    border: 1px solid var(--border);
    cursor: pointer;
  }

  .rank-num {
    font-family: var(--font-sans);
    font-size: 20px;
    color: var(--border);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
  }

  .rank-item:first-child .rank-num { color: var(--accent); }
  .rank-item:nth-child(2) .rank-num { color: var(--text2); }

  .rank-cover {
    width: 44px; height: 60px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 2px 10px var(--cover-shadow);
  }

  .rank-info { flex: 1; min-width: 0; }
  .rank-title { font-size: 12px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .rank-author { font-size: 10px; color: var(--text2); margin-top: 3px; }
  .rank-stats { display: flex; gap: 8px; margin-top: 5px; font-size: 9px; color: var(--text2); }

  .rank-badge {
    font-size: 9px;
    background: rgba(124,111,255,0.1);
    color: var(--accent2);
    border: 1px solid rgba(124,111,255,0.25);
    padding: 3px 7px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ============================
     SCREEN 04 — WORK DETAIL
  ============================ */
  #screen-detail {
    background: var(--bg);
    overflow: hidden;
  }

  /* 작품 상세 — 상단: 노치·safe-area만 확보(과한 44px 여백 제거) */
  #screen-detail .detail-hero-wrap {
    position: relative;
    background: linear-gradient(180deg, var(--hero-grad1) 0%, var(--hero-grad2) 60%, var(--bg) 100%);
    padding: calc(10px + env(safe-area-inset-top, 0px)) max(var(--page-pad-x), env(safe-area-inset-right, 0px)) 20px max(var(--page-pad-x), env(safe-area-inset-left, 0px));
  }

  /* 무료/번들 안내 — 보라 2톤(파스텔 / 채도 높은 필) */
  #screen-detail .detail-promo-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  #screen-detail .detail-promo-strip .agi {
    flex-shrink: 0;
  }
  #screen-detail .detail-promo-strip__link {
    font-weight: 600;
    cursor: pointer;
  }
  /* 1화~3화 무료 — 파스텔 라벤더 필 */
  #screen-detail .detail-promo-strip--free {
    background: linear-gradient(135deg, #ebe4ff 0%, #f3f0ff 58%, #faf8ff 100%);
    color: #3b2f5c;
    border-bottom-color: rgba(91, 33, 182, 0.14);
  }
  #screen-detail .detail-promo-strip--free .agi {
    color: #6d28d9;
  }
  #screen-detail .detail-promo-strip--free .detail-promo-strip__link {
    color: #5b21b6;
  }
  /* 묶음 할인 — 진한 보라 필 */
  #screen-detail .detail-promo-strip--bundle {
    background: linear-gradient(135deg, #2e1065 0%, #5b21b6 48%, #4c1d95 100%);
    color: #f8fafc;
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
  #screen-detail .detail-promo-strip--bundle .agi {
    color: rgba(255, 255, 255, 0.92);
  }
  #screen-detail .detail-promo-strip--bundle .detail-promo-strip__link {
    color: rgba(255, 255, 255, 0.9);
  }
  #screen-detail .detail-promo-strip--bundle .detail-promo-strip__link--muted {
    color: rgba(254, 243, 199, 0.96);
  }
  :root.dark #screen-detail .detail-promo-strip--free {
    background: linear-gradient(135deg, #1c1630 0%, #231d3d 45%, #2a2248 100%);
    color: #e9e4ff;
    border-bottom-color: rgba(124, 111, 255, 0.22);
  }
  :root.dark #screen-detail .detail-promo-strip--free .agi {
    color: #c4b5fd;
  }
  :root.dark #screen-detail .detail-promo-strip--free .detail-promo-strip__link {
    color: #ddd6fe;
  }
  :root.dark #screen-detail .detail-promo-strip--bundle {
    background: linear-gradient(135deg, #1e0b3d 0%, #4c1d95 50%, #5b21b6 100%);
    color: #f1f5f9;
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  :root.dark #screen-detail .detail-promo-strip--bundle .detail-promo-strip__link--muted {
    color: rgba(253, 230, 138, 0.92);
  }

  #screen-detail .detail-mini-bar-track {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
  }
  #screen-detail .detail-mini-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--star-rating), var(--accent));
  }

  #screen-detail .detail-rv-bar-track {
    flex: 1;
    height: 7px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
  }
  #screen-detail .detail-rv-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--star-rating), var(--accent));
  }
  #screen-detail .detail-review-summary {
    background: linear-gradient(160deg, rgba(124, 111, 255, 0.08), rgba(200, 169, 110, 0.05)), var(--surface) !important;
    border: 1px solid rgba(124, 111, 255, 0.18) !important;
    box-shadow: 0 6px 20px rgba(32, 28, 56, 0.08);
  }
  #screen-detail .detail-review-summary .detail-rating-main {
    color: var(--text) !important;
    letter-spacing: -0.02em;
  }
  #screen-detail #detail-tab-review-rating {
    color: var(--text) !important;
    font-weight: 700;
  }
  #screen-detail #detail-tab-review-rating .agi {
    color: var(--star-rating) !important;
  }

  #screen-detail .detail-read-cta {
    flex: 1;
    border: none;
    padding: 13px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    font-family: var(--font-sans);
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 55%, #5b21b6 100%);
    box-shadow: 0 4px 22px rgba(76, 29, 149, 0.42);
  }
  #screen-detail .detail-read-cta--compact {
    flex: 0 0 auto;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 3px 16px rgba(76, 29, 149, 0.38);
  }
  #screen-detail .detail-read-cta .agi {
    color: rgba(255, 255, 255, 0.95);
  }

  /* 장르 칩 — 필(단색) 배경 */
  #screen-detail .detail-genre-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    padding: 4px 10px;
    border-radius: 999px;
    border: none;
    letter-spacing: 0.02em;
    text-align: left;
  }
  #screen-detail #detail-genre-1,
  #screen-detail #detail-genre-2 {
    align-self: flex-start;
  }
  #screen-detail .detail-genre-tag--primary {
    background: #5b21b6;
    color: #ffffff;
  }
  #screen-detail .detail-genre-tag--secondary {
    background: #5b21b6;
    color: #ffffff;
  }
  :root.dark #screen-detail .detail-genre-tag--primary {
    color: #0a0a0f;
  }
  :root.dark #screen-detail .detail-genre-tag--secondary {
    color: #111118;
  }

  #screen-detail #detail-ep4-coin {
    background: #5b21b6 !important;
    border: 1px solid #5b21b6 !important;
    color: #ffffff !important;
    font-weight: 700;
  }

  .detail-body {
    flex: 1;
    overflow-y: auto;
  }

  .detail-hero {
    height: 280px;
    position: relative;
    background: linear-gradient(135deg, var(--hero-grad1) 0%, var(--hero-grad2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
    overflow: hidden;
  }

  .detail-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(0deg, var(--bg) 0%, transparent 100%);
  }

  .detail-back {
    position: absolute;
    top: 50px; left: 16px;
    width: 34px; height: 34px;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    z-index: 10;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
  }

  .detail-actions-top {
    position: absolute;
    top: 50px; right: 16px;
    display: flex; gap: 8px;
    z-index: 10;
  }

  .detail-info {
    padding: 0 20px;
    margin-top: -20px;
    position: relative;
    z-index: 1;
  }

  .detail-title {
    font-family: var(--font-sans);
    font-size: 24px;
    color: var(--text);
    line-height: 1.2;
  }

  .detail-author {
    font-size: 12px;
    color: var(--text2);
    margin-top: 6px;
  }

  .detail-stats-row {
    display: flex;
    gap: 20px;
    margin-top: 14px;
  }

  .detail-stat {
    text-align: center;
  }

  .detail-stat-val {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
  }

  .detail-stat-label {
    font-size: 9px;
    color: var(--text2);
    margin-top: 2px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .detail-divider { height: 1px; background: var(--border); margin: 16px 0; }

  .detail-tags { display: flex; gap: 6px; flex-wrap: wrap; }

  .detail-tag {
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    color: var(--text2);
  }

  .detail-synopsis {
    font-size: 12px;
    color: var(--text2);
    line-height: 1.8;
    margin-top: 14px;
  }

  .detail-synopsis strong { color: var(--text); }

  .langs-avail {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
  }

  .lang-avail-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 10px;
    color: var(--text2);
  }

  .episode-list {
    margin-top: 16px;
    padding-bottom: 20px;
  }

  .episode-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .episode-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }

  .ep-num {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--text2);
    width: 30px;
    flex-shrink: 0;
  }

  .ep-info { flex: 1; }
  .ep-title { font-size: 12px; font-weight: 500; }
  .ep-meta { font-size: 10px; color: var(--text2); margin-top: 3px; }

  .ep-lock { font-size: 12px; }
  .ep-free { font-size: 9px; color: #2ecc71; background: rgba(46,204,113,0.1); padding: 2px 6px; border-radius: 6px; }

  .detail-cta {
    padding: 12px 20px;
    background: var(--detail-cta-bg);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }

  .btn-outline {
    flex: 0;
    padding: 13px 16px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 24px;
    cursor: pointer;
  }

  .btn-read {
    flex: 1;
    padding: 13px;
    border-radius: 12px;
    background: var(--accent);
    border: none;
    color: #000;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
  }

  /* ============================
     SCREEN 05 — VIEWER
  ============================ */
  #screen-viewer {
    background: var(--viewer-bg);
    overflow: hidden;
    position: relative;
  }

  .viewer-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 12px;
    background: var(--viewer-bar);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    margin-top: 28px;
  }

  .viewer-title-block { flex: 1; text-align: center; padding: 0 8px; }
  .viewer-title { font-size: 11px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .viewer-ep { font-size: 9px; color: var(--text2); font-family: var(--font-sans); margin-top: 2px; }

  .viewer-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 24px;
    font-size: 15px;
    line-height: 2;
    color: var(--viewer-text);
    font-weight: 300;
  }

  .viewer-content .ep-title-big {
    font-family: var(--font-sans);
    font-size: 20px;
    color: var(--text);
    margin-bottom: 24px;
    text-align: center;
    line-height: 1.4;
  }

  .viewer-content p {
    margin-bottom: 16px;
    text-indent: 1em;
  }

  .viewer-content .dialogue {
    color: #4a90d9;
    font-style: italic;
    text-indent: 0;
    padding-left: 16px;
    border-left: 2px solid rgba(74,144,217,0.25);
    margin: 12px 0;
  }
  :root.dark .viewer-content .dialogue {
    color: #a0c8ff;
    border-left-color: rgba(160,200,255,0.2);
  }

  .viewer-bottombar {
    flex-shrink: 0;
    padding: 8px 16px 20px;
    background: var(--viewer-bar);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
  }

  .viewer-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .progress-bar {
    flex: 1;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    width: 35%;
    background: var(--accent);
    border-radius: 2px;
  }

  .progress-text { font-size: 10px; color: var(--text2); font-family: var(--font-sans); }

  .viewer-nav-btns {
    display: flex;
    gap: 10px;
  }

  .viewer-nav-btn {
    flex: 1;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text2);
    font-size: 11px;
    text-align: center;
    cursor: pointer;
    font-family: var(--font-sans);
  }

  .viewer-nav-btn.primary {
    background: var(--surface2);
    border-color: var(--accent);
    color: var(--accent);
  }

  /* ============================
     SCREEN 06 — SEARCH
  ============================ */
  #screen-search {
    background: var(--bg);
    overflow: hidden;
  }

  .search-body { flex: 1; overflow-y: auto; }

  .search-top {
    padding: 8px 20px 16px;
  }

  .search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 16px;
    margin-top: 6px;
  }

  .search-input-mock {
    flex: 1;
    font-size: 13px;
    color: var(--text2);
  }

  .filter-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .filter-row::-webkit-scrollbar { display: none; }

  .filter-chip {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    border: 1px solid var(--pill-tab-inactive-border-color);
    background: var(--pill-tab-inactive-bg);
    color: var(--text2);
    cursor: pointer;
  }

  .filter-chip.active {
    background: var(--pill-tab-active-grad);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 16px rgba(124, 58, 237, 0.38);
  }

  .search-results {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .search-result-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: var(--surface);
    border-radius: 14px;
    border: 1px solid var(--border);
    cursor: pointer;
  }

  .result-cover {
    width: 64px; height: 88px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 2px 10px var(--cover-shadow);
  }

  .result-info { flex: 1; min-width: 0; }
  .result-title { font-size: 13px; font-weight: 600; }
  .result-author { font-size: 11px; color: var(--text2); margin-top: 3px; }
  .result-tags { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
  .result-tag { font-size: 9px; padding: 2px 7px; border-radius: 10px; background: var(--badge-bg); color: var(--text2); }
  .result-stats { font-size: 10px; color: var(--text2); margin-top: 6px; display: flex; gap: 10px; }

  /* ============================
     SCREEN 07 — MY LIBRARY
  ============================ */
  #screen-library {
    background: var(--bg);
    overflow: hidden;
    position: relative;
  }

  /* 읽는 중 — 이어읽기 하단 플로팅(글로벌 탭바 위) */
  #screen-library #lib-panel-reading {
    padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px));
  }

  /* 읽는 중·찜 — 3×3 그리드: 행 높이 맞춤 + 카드 내부 하단 정렬 */
  #screen-library #lib-panel-reading .lib-reading-grid,
  #screen-library #lib-panel-wish .lib-reading-grid,
  #screen-library #lib-panel-done .lib-reading-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }
  #screen-library #lib-panel-reading .lib-reading-grid > .lib-grid-card,
  #screen-library #lib-panel-wish .lib-reading-grid > .lib-grid-card,
  #screen-library #lib-panel-done .lib-reading-grid > .lib-grid-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
  }
  #screen-library #lib-panel-reading .lib-reading-grid > .lib-grid-card > div[style*='aspect-ratio'],
  #screen-library #lib-panel-wish .lib-reading-grid > .lib-grid-card > div[style*='aspect-ratio'],
  #screen-library #lib-panel-done .lib-reading-grid > .lib-grid-card > div[style*='aspect-ratio'] {
    flex-shrink: 0;
    width: 100%;
  }
  /* 완독 표지 — 완료 상태 강조용 딤 */
  #screen-library #lib-panel-done .lib-reading-grid > .lib-grid-card > div[style*='aspect-ratio']::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 20, 0.34);
    pointer-events: none;
  }
  #screen-library #lib-panel-done .lib-reading-grid > .lib-grid-card > .lib-done-cover::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(2px);
    z-index: 2;
    pointer-events: none;
  }
  #screen-library #lib-panel-reading .lib-reading-grid > .lib-grid-card > .lib-grid-title,
  #screen-library #lib-panel-wish .lib-reading-grid > .lib-grid-card > .lib-grid-title,
  #screen-library #lib-panel-done .lib-reading-grid > .lib-grid-card > .lib-grid-title {
    flex: 1 1 auto;
    min-height: 1.35em;
    margin-top: 6px !important;
  }
  #screen-library #lib-panel-reading .lib-reading-grid > .lib-grid-card > .lib-grid-read {
    flex-shrink: 0;
    margin-top: 0 !important;
  }
  #screen-library #lib-panel-wish .lib-reading-grid > .lib-grid-card > .lib-grid-wish-meta {
    flex-shrink: 0;
    margin-top: 4px !important;
  }
  #screen-library #lib-panel-done .lib-reading-grid > .lib-grid-card > .lib-grid-done-meta {
    flex-shrink: 0;
    margin-top: 4px !important;
  }
  #screen-library .lib-continue-card {
    position: fixed;
    left: max(14px, env(safe-area-inset-left, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 24px);
    z-index: 9800;
    margin: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    opacity: 1;
    visibility: visible;
    transition: box-shadow 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
  }
  :root.dark #screen-library .lib-continue-card {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  }
  #screen-library.lib-edit-active .lib-continue-card {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .library-body { flex: 1; overflow-y: auto; }

  .library-header-area {
    padding: max(8px, env(safe-area-inset-top, 0px)) max(var(--page-pad-x), env(safe-area-inset-right, 0px)) 16px max(var(--page-pad-x), env(safe-area-inset-left, 0px));
  }

  .lib-page-title {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
  }

  .lib-page-title span { color: var(--accent); }

  /* 서재 외(랭킹 등) — 세그먼트 컨트롤 */
  .lib-tabs {
    display: flex;
    gap: 0;
    background: var(--surface);
    border-radius: 10px;
    padding: 3px;
    margin-top: 14px;
    border: 1px solid var(--border);
  }

  .lib-tab {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text2);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 40px;
    box-sizing: border-box;
  }

  .lib-tab.active {
    background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 55%, #8b5cf6 100%);
    color: #fff;
  }

  /* 내 서재 — 홈 피드 탭(.feed-tab)과 동일 */
  #screen-library .lib-tabs {
    display: flex;
    gap: 6px;
    padding: 8px max(var(--page-pad-x), env(safe-area-inset-left, 0px)) 8px max(var(--page-pad-x), env(safe-area-inset-right, 0px));
    flex-shrink: 0;
    margin-top: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #screen-search #genre-chips {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    overflow-x: auto;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #screen-search #genre-chips::-webkit-scrollbar {
    display: none;
  }

  #screen-search .search-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 14px;
    min-height: 44px;
    cursor: text;
  }
  #screen-search .search-input-wrap .agi {
    flex-shrink: 0;
    font-size: 15px;
    color: var(--text2);
    pointer-events: none;
  }
  #screen-search #search-query-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text);
    caret-color: var(--accent2);
    font-family: var(--font-sans);
  }
  #screen-search #search-query-input::placeholder {
    color: var(--text2);
    opacity: 0.9;
  }

  #screen-library .lib-tab,
  #screen-search .genre-chip {
    flex: 1;
    min-width: 0;
    min-height: 36px;
    text-align: center;
    padding: 5px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text2);
    cursor: pointer;
    border: 1px solid var(--pill-tab-inactive-border-color);
    background: var(--pill-tab-inactive-bg);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
  }

  #screen-library .lib-tab .agi {
    font-size: 11px !important;
    line-height: 1;
    flex-shrink: 0;
  }

  #screen-library .lib-tab .lib-tab-count {
    font-size: 9px;
    font-family: var(--font-sans);
    font-weight: 700;
    opacity: 0.85;
  }

  #screen-library .lib-tab.active,
  #screen-search .genre-chip.active {
    color: #fff;
    background: var(--pill-tab-active-grad);
    border-color: transparent;
    box-shadow: 0 2px 16px rgba(124, 58, 237, 0.38);
  }

  #screen-library .lib-tab.active .lib-tab-count {
    opacity: 0.95;
  }

  /* 서재 그리드 표지 — 검은 그림자·하단 그라디언트 제거 후 구분용 */
  #screen-library .lib-grid-card > div[style*="aspect-ratio"] {
    border: 1px solid var(--border);
    box-sizing: border-box;
  }

  /* 서재 — 읽는 중·찜: 큰 카드(가로 레이아웃) */
  #screen-library .lib-book-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 4px;
  }
  #screen-library .lib-grid-card.lib-book-card-large {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 8px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-sizing: border-box;
    align-items: center;
  }
  #screen-library .lib-book-card-large > div:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 116px !important;
    max-width: 116px;
    border-radius: 12px !important;
    align-self: center;
  }
  #screen-library .lib-book-card-large .lib-grid-title {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0 !important;
    align-self: end;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3;
  }
  #screen-library .lib-book-card-large .lib-grid-read,
  #screen-library .lib-book-card-large > div:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 13px !important;
    margin-top: 0 !important;
    color: var(--text2);
    font-family: var(--font-sans);
  }
  #screen-library .lib-book-card-large > div:nth-child(3) .agi {
    font-size: 12px !important;
  }

  /* 서재 — 완독: 큰 카드 */
  #screen-library .lib-done-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 8px;
  }
  #screen-library .lib-done-card-large {
    padding: 16px 18px !important;
    gap: 16px !important;
    border-radius: 16px !important;
  }
  #screen-library .lib-done-card-large > div:first-child {
    width: 92px !important;
    height: 130px !important;
    min-width: 92px;
    border-radius: 12px !important;
  }
  #screen-library .lib-done-card-large .lib-grid-title {
    font-size: 16px !important;
  }
  #screen-library .lib-done-card-large [style*="font-size:10px;color:var(--text2)"] {
    font-size: 12px !important;
  }

  /* 서재 — 추천(For you): 넷플릭스형 가로 스크롤 레일 */
  #screen-library .lib-reco-row {
    overflow: hidden;
    margin-bottom: 16px;
  }
  #screen-library #lib-panel-reco .lib-reco-row + .lib-reco-row {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 2px;
  }
  #screen-library #lib-panel-reco .lib-reco-rail {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 16px 12px;
    margin-left: -16px;
    margin-right: -16px;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
  }
  #screen-library #lib-panel-reco .lib-reco-rail::-webkit-scrollbar {
    display: none;
  }
  #screen-library .lib-reco-tile {
    flex: 0 0 auto;
    width: min(46vw, 172px);
    cursor: pointer;
    scroll-snap-align: start;
  }
  #screen-library #lib-panel-reco .lib-reco-tile .lib-grid-title {
    margin-top: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #screen-library .lib-reco-tile__meta {
    font-size: 11px;
    color: var(--text2);
    font-family: var(--font-sans);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.35;
  }
  #screen-library .lib-reco-tile__meta .agi {
    font-size: 11px !important;
    color: var(--star-rating);
    flex-shrink: 0;
  }

  #screen-library #lib-panel-wish,
  #screen-library #lib-panel-done,
  #screen-library #lib-panel-reco {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .lib-edit-active .lib-book-card-large > div:first-child::after {
    border-radius: 12px !important;
  }
  .lib-edit-active .lib-done-card-large > div:first-child::after {
    border-radius: 12px !important;
  }
  .lib-edit-active .lib-reco-tile > div:first-child::after {
    border-radius: 10px !important;
  }

  /* 서재 — 탭 패널 내 섹션 타이틀 (h3 통일) */
  #screen-library h3.lib-section-title {
    margin: 0 0 12px;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.08em;
    color: var(--text2);
  }
  #screen-library h3.lib-section-title--tight {
    margin-bottom: 4px;
  }
  #screen-library h3.lib-section-title--center {
    margin: 0 0 6px;
    text-align: center;
    letter-spacing: 0.04em;
  }
  #screen-library .lib-section-title__count {
    color: var(--accent);
    letter-spacing: 0;
  }
  #screen-library .lib-panel-subhead {
    margin: 0 0 16px;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text2);
  }
  /* 추천 — 행 머리말(작품 기반), 배경 없음 · 본문색(라이트에서 거의 블랙) */
  #screen-library #lib-panel-reco h2.lib-reco-row__label {
    margin: 0 0 10px;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.03em;
    color: var(--text);
  }
  #screen-library .lib-ai-mark {
    color: var(--accent);
    font-weight: 800;
  }

  /* 서재 — 그리드 하단·표지 오버레이·이어읽기 제목 크기 */
  #screen-library .lib-grid-title {
    font-size: 13px !important;
    line-height: 1.35;
    font-weight: 600 !important;
  }
  /* 읽는 중·찜 — 3×3 그리드 작품 제목 */
  #screen-library #lib-panel-reading .lib-reading-grid > .lib-grid-card > .lib-grid-title,
  #screen-library #lib-panel-wish .lib-reading-grid > .lib-grid-card > .lib-grid-title,
  #screen-library #lib-panel-done .lib-reading-grid > .lib-grid-card > .lib-grid-title {
    font-size: 15px !important;
    line-height: 1.3;
    font-weight: 700 !important;
  }
  #screen-library .lib-hero-title {
    font-size: 15px !important;
    line-height: 1.35;
  }
  #screen-library .lib-grid-card .lib-grid-genre + div {
    font-size: 12px !important;
    line-height: 1.35;
  }
  /* 서재 카테고리 칩 — 카테고리별 다크 톤 */
  #screen-library .lib-grid-card[data-work="dragon-emperor"] .lib-grid-genre,
  #screen-library .lib-grid-card[data-work="shadow-throne"] .lib-grid-genre {
    color: #8b7ccf !important; /* fantasy */
  }
  #screen-library .lib-grid-card[data-work="ceo-secret"] .lib-grid-genre,
  #screen-library .lib-grid-card[data-work="empress-reborn"] .lib-grid-genre {
    color: #b07aa1 !important; /* romance */
  }
  #screen-library .lib-grid-card[data-work="jade-forest"] .lib-grid-genre,
  #screen-library .lib-grid-card[data-work="sword-saint"] .lib-grid-genre {
    color: #6f9a73 !important; /* martial/xianxia */
  }
  #screen-library .lib-grid-card[data-work="stellar-exile"] .lib-grid-genre,
  #screen-library .lib-grid-card[data-work="hunters-code"] .lib-grid-genre {
    color: #6f8fae !important; /* sf/urban fantasy */
  }
  #screen-library .lib-grid-card[data-work="witchs-bargain"] .lib-grid-genre,
  #screen-library .lib-grid-card[data-work="flame-sovereign"] .lib-grid-genre {
    color: #9a6666 !important; /* horror/dark fantasy */
  }
  #screen-library .lib-grid-card > div[style*="aspect-ratio"] > div[style*="bottom:0"] > div:only-child {
    font-size: 12px !important;
    line-height: 1.35;
  }

  /* 서재 이어읽기 — 재생: 화이트 버튼 + 블루 아이콘 */
  #screen-library .lib-continue-play-wrap {
    display: flex;
    align-items: center;
    padding-right: 14px;
    flex-shrink: 0;
  }
  #screen-library .lib-continue-play {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-sizing: border-box;
  }
  :root.dark #screen-library .lib-continue-play {
    background: #f1f5f9;
    border-color: rgba(241, 245, 249, 0.95);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  }
  #screen-library .lib-continue-play .agi {
    color: #2563eb;
    font-size: 15px !important;
    margin-left: 2px;
  }

  /* 서재 이어읽기 — 진행 바 */
  #screen-library .lib-continue-card .lib-continue-prog {
    height: 6px;
  }
  #screen-library .lib-continue-card .lib-continue-prog-fill {
    min-height: 100%;
  }

  .lib-continue {
    padding: 0 20px;
    margin-bottom: 20px;
  }

  .continue-card {
    background: linear-gradient(135deg, var(--surface2) 0%, rgba(124,111,255,0.08) 100%);
    border: 1px solid rgba(124,111,255,0.2);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    gap: 14px;
    align-items: center;
  }

  .continue-cover {
    width: 60px; height: 84px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.15);
  }

  .continue-info { flex: 1; }
  .continue-label {
    font-size: 9px;
    color: var(--accent2);
    font-family: var(--font-sans);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 5px;
  }

  .continue-title { font-size: 14px; font-weight: 600; }
  .continue-ep { font-size: 11px; color: var(--text2); margin-top: 3px; }
  .continue-progress { margin-top: 10px; }
  .continue-prog-bar { height: 3px; background: var(--continue-prog-bg); border-radius: 2px; }
  .continue-prog-fill { height: 100%; width: 35%; background: var(--accent2); border-radius: 2px; }

  .lib-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 0 20px 20px;
  }

  .lib-book { cursor: pointer; }
  .lib-cover {
    width: 100%;
    aspect-ratio: 5/7;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin-bottom: 6px;
    position: relative;
    overflow: hidden;
  }

  .lib-new-badge {
    position: absolute;
    top: 6px; right: 6px;
    background: var(--accent3);
    color: white;
    font-size: 8px;
    padding: 2px 5px;
    border-radius: 6px;
    font-weight: 700;
  }

  .lib-title { font-size: 10px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .lib-ep-info { font-size: 9px; color: var(--text2); margin-top: 2px; }

  /* ============================
     SCREEN 08 — MYPAGE
  ============================ */
  #screen-mypage {
    background: var(--bg);
    overflow: hidden;
  }

  .mypage-body { flex: 1; overflow-y: auto; }

  .profile-hero {
    padding: max(16px, env(safe-area-inset-top, 0px)) max(var(--page-pad-x), env(safe-area-inset-right, 0px)) 24px max(var(--page-pad-x), env(safe-area-inset-left, 0px));
    text-align: center;
    background: linear-gradient(180deg, rgba(124,111,255,0.05) 0%, transparent 100%);
  }

  .avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin: 0 auto 12px;
    box-shadow: 0 0 0 3px rgba(124,111,255,0.2);
  }

  .profile-name { font-size: 18px; font-weight: 700; }
  .profile-email { font-size: 11px; color: var(--text2); margin-top: 4px; }

  .profile-stats {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 16px;
    background: var(--surface);
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
  }

  .profile-stat {
    flex: 1;
    padding: 12px;
    text-align: center;
    border-right: 1px solid var(--border);
  }
  .profile-stat:last-child { border-right: none; }
  .profile-stat-val { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--accent2); }
  .profile-stat-label { font-size: 10px; color: var(--text2); margin-top: 2px; }

  .cash-banner {
    margin: 16px 20px;
    background: linear-gradient(135deg, #2d1b6b 0%, #1a3570 60%, #162d5e 100%);
    border: 1px solid rgba(124,111,255,0.42);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cash-info { }
  .cash-label { font-size: 10px; font-weight: 700; color: #fff; margin-bottom: 4px; }
  .cash-amount { font-family: var(--font-sans); font-size: 24px; font-weight: 700; color: #c4b5fd; }
  .cash-sub { font-size: 9px; color: rgba(255,255,255,0.65); margin-top: 3px; }

  .cash-btn {
    background: #fff;
    color: #2a1452;
    border: 1px solid rgba(255,255,255,0.9);
    padding: 10px 16px;
    border-radius: 999px !important;
    min-height: 0;
    line-height: 1.2;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
  }

  .menu-section {
    margin: 8px 20px;
  }

  .menu-section-title {
    font-size: 10px;
    font-family: var(--font-sans);
    color: var(--text2);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .menu-list {
    background: var(--surface);
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
  }

  .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 13px;
  }

  .menu-item:last-child { border-bottom: none; }
  .menu-icon { font-size: 16px; width: 20px; text-align: center; }
  .menu-arrow { margin-left: auto; color: var(--text2); font-size: 12px; }
  .menu-badge {
    margin-left: auto;
    background: var(--accent3);
    color: white;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid transparent;
  }
  .menu-badge--violet {
    background: #5b21b6;
    border-color: #7c3aed;
    color: #ffffff;
  }
  .menu-badge--orange {
    background: #c2410c;
    border-color: #ea580c;
    color: #ffffff;
  }

  /* ============================
     SCREEN 09 — RANKING
  ============================ */
  #screen-ranking {
    background: var(--bg);
    overflow: hidden;
  }

  /* 랭킹 — 기간 탭을 홈·서재와 동일한 필(pill) 스타일 */
  #screen-ranking .lib-tabs {
    display: flex;
    gap: 6px;
    padding: 0;
    margin-top: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #screen-ranking .lib-tabs::-webkit-scrollbar {
    display: none;
  }
  #screen-ranking .lib-tab {
    flex: 1;
    min-width: 0;
    min-height: 36px;
    text-align: center;
    padding: 5px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text2);
    cursor: pointer;
    border: 1px solid var(--pill-tab-inactive-border-color);
    background: var(--pill-tab-inactive-bg);
    transition: all 0.2s;
    box-sizing: border-box;
  }
  #screen-ranking .lib-tab.active {
    color: #fff;
    background: var(--pill-tab-active-grad);
    border-color: transparent;
    box-shadow: 0 2px 16px rgba(124, 58, 237, 0.38);
  }

  .ranking-body { flex: 1; overflow-y: auto; }

  .ranking-top3 {
    padding: 16px 20px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(124,111,255,0.06) 0%, transparent 100%);
  }

  .top3-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .top3-item:nth-child(2) { order: -1; }

  .top3-crown { font-size: 18px; }
  .top3-cover {
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 16px var(--cover-shadow);
  }
  .top3-item:nth-child(2) .top3-cover { width: 70px; height: 98px; border: 2px solid var(--accent); }
  .top3-item:nth-child(1) .top3-cover,
  .top3-item:nth-child(3) .top3-cover { width: 58px; height: 82px; border: 1px solid var(--border); }
  .top3-rank { font-family: var(--font-sans); font-size: 10px; color: var(--text2); }
  .top3-title { font-size: 10px; max-width: 70px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  .ranking-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
  }

  .ranking-tab {
    flex: 1;
    text-align: center;
    padding: 12px;
    font-size: 12px;
    color: var(--text2);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
  }
  .ranking-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
  }

  .ranking-list {
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* ============================
     SCREEN 10 — SETTINGS
  ============================ */
  #screen-settings {
    background: var(--bg);
    overflow: hidden;
  }

  .settings-body { flex: 1; overflow-y: auto; }

  .settings-header {
    flex-shrink: 0;
    box-sizing: border-box;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: 16px;
    padding-left: max(var(--page-pad-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--page-pad-x), env(safe-area-inset-right, 0px));
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .settings-title {
    font-size: 18px;
    font-weight: 700;
  }

  /* Color gradients for book covers — always dark for artwork */
  .cg1 { background: linear-gradient(135deg, #1a0a2e, #0d1a2e); }
  .cg2 { background: linear-gradient(135deg, #0a1a0e, #1a2e0a); }
  .cg3 { background: linear-gradient(135deg, #2e0a0a, #1a0a1e); }
  .cg4 { background: linear-gradient(135deg, #0a1a2e, #2e1a0a); }
  .cg5 { background: linear-gradient(135deg, #1a1a0a, #0a0a1a); }
  .cg6 { background: linear-gradient(135deg, #2e0a1a, #0a2e2e); }
  .cg7 { background: linear-gradient(135deg, #0a2e1a, #2e2e0a); }

  /* scroll areas */
  .home-body::-webkit-scrollbar,
  .detail-body::-webkit-scrollbar,
  .viewer-content::-webkit-scrollbar,
  .search-body::-webkit-scrollbar,
  .library-body::-webkit-scrollbar,
  .mypage-body::-webkit-scrollbar,
  .ranking-body::-webkit-scrollbar,
  .settings-body::-webkit-scrollbar,
  .nav-panel::-webkit-scrollbar,
  .notes-panel::-webkit-scrollbar { width: 3px; }

  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  /* Section spacing */
  .pb-safe { padding-bottom: 30px; }

  /* ════════════════════════════════
     뷰어 다크모드 (클래스 토글 방식)
  ════════════════════════════════ */
  #screen-viewer.viewer-dark {
    background: #13131a !important;
  }
  #screen-viewer.viewer-dark #vw-page-cur {
    background: #13131a !important;
    color: #e0e0e0 !important;
  }
  #screen-viewer.viewer-dark #vw-topbar {
    background: rgba(13,13,20,0.97) !important;
    border-bottom-color: rgba(255,255,255,0.07) !important;
  }
  #screen-viewer.viewer-dark #vw-topbar * {
    color: #b0b0b0 !important;
  }
  #screen-viewer.viewer-dark #vw-topbar svg {
    stroke: #999 !important;
  }
  #screen-viewer.viewer-dark #vw-bottombar {
    background: rgba(13,13,20,0.97) !important;
    border-top-color: rgba(255,255,255,0.07) !important;
  }
  #screen-viewer.viewer-dark #vw-bottombar svg[stroke="#555"],
  #screen-viewer.viewer-dark #vw-bottombar svg[stroke="#333"] {
    stroke: #777 !important;
  }
  #screen-viewer.viewer-dark #vw-bottombar svg[stroke="#222"] {
    stroke: #e0e0e0 !important;
  }
  #screen-viewer.viewer-dark #vw-bottombar span {
    color: #777 !important;
  }
  #screen-viewer.viewer-dark #vw-bottombar span[style*="color:#222"] {
    color: #e0e0e0 !important;
  }
  /* 본문 단락 */
  #screen-viewer.viewer-dark #vw-page-cur p {
    color: #d8d8d8 !important;
  }
  /* 챕터 제목 */
  #screen-viewer.viewer-dark #vw-page-cur p[style*="font-weight:800"],
  #screen-viewer.viewer-dark #vw-page-cur div[style*="font-weight:800"] {
    color: #a78bfa !important;
  }
  /* 선택된 문장 하이라이트 */
  #screen-viewer.viewer-dark #vw-selected-para {
    background: rgba(124,111,255,0.12) !important;
  }
  /* 진행도 바 텍스트 */
  #screen-viewer.viewer-dark #vw-bottombar span[style*="color:#888"] {
    color: #666 !important;
  }
  /* 다크버튼 활성 색상 */
  #screen-viewer.viewer-dark #vw-dark-btn {
    color: #a78bfa !important;
  }
  /* 번역 툴팁 */
  #screen-viewer.viewer-dark #vw-report-tip {
    background: #2a2a3a !important;
  }
  /* 진행도 바 배경 */
  #screen-viewer.viewer-dark div[style*="background:#f5f5f0"] {
    background: #1e1e2a !important;
  }
  /* 전환 애니메이션 */
  #screen-viewer, #screen-viewer #vw-page-cur,
  #screen-viewer #vw-topbar, #screen-viewer #vw-bottombar {
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }

/* ═══ Viewer Animations ═══ */

              @keyframes vwWave {
                0%,100% { transform: scaleY(1); }
                50%      { transform: scaleY(0.4); }
              }

/* ═══ 탐색 — 인기 검색 리스트 카드 ═══ */
#screen-search #search-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#screen-search .search-work-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  min-width: 0;
}
#screen-search .search-work-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 1px solid var(--border);
  box-shadow: none;
}
#screen-search .search-work-row > div:nth-child(2) {
  width: 100%;
  min-width: 0;
}
#screen-search .search-work-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-top: 6px;
  margin-bottom: 0;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#screen-search .search-work-meta {
  font-size: 9px;
  color: var(--text2);
  line-height: 1.35;
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#screen-search .search-popular-heading {
  font-size: 12px;
  margin-bottom: 14px;
  color: var(--text2);
  font-family: var(--font-sans);
  letter-spacing: 0.08em;
}

/* ═══ Search result row — 별점만 앰버, 조회수는 보조 텍스트 ═══ */
.search-work-stat-line {
  font-size: 10px;
  margin-top: 4px;
  color: var(--text2);
}
#screen-search .search-work-stat-line {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
}
#screen-search .search-stat-rating,
#screen-search .search-stat-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.2;
  padding: 0;
  border: none;
  background: transparent;
  box-sizing: border-box;
}
#screen-search .search-stat-rating .agi[data-icon="star-fill"] {
  font-size: 15px !important;
}
#screen-search .search-work-rating-num {
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
#screen-search .search-stat-views .agi[data-icon="eye"] {
  font-size: 15px !important;
  color: var(--accent2);
  opacity: 0.95;
}
#screen-search .search-work-views {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.01em;
}
.search-work-stat-line .agi[data-icon="star-fill"],
.search-work-stat-line .search-work-rating-num {
  color: var(--star-rating);
}

/* ═══ Featured feed — 홈·게스트 등 `[data-agharta-featured-feed]` 공통 ═══ */
.feed-tabs {
  display: flex;
  gap: 6px;
  padding: 8px max(var(--page-pad-x), env(safe-area-inset-left, 0px)) 8px max(var(--page-pad-x), env(safe-area-inset-right, 0px));
  flex-shrink: 0;
}
.feed-tab {
  flex: 1;
  text-align: center;
  min-height: 36px;
  padding: 5px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  border: 1px solid var(--pill-tab-inactive-border-color);
  background: var(--pill-tab-inactive-bg);
  border-radius: 999px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
}
.feed-tab .agi {
  font-size: 11px !important;
  line-height: 1;
}
.feed-tab.active {
  color: #fff;
  border-color: transparent;
  background: var(--pill-tab-active-grad);
  box-shadow: 0 2px 16px rgba(124, 58, 237, 0.38);
}

/* 작품 상세 — 에피소드/리뷰/댓글 탭 (언더바) */
#detail-tabs {
  display: flex;
  gap: 0;
  padding: 0 max(var(--page-pad-x), env(safe-area-inset-left, 0px)) 0 max(var(--page-pad-x), env(safe-area-inset-right, 0px));
  flex-shrink: 0;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}
#detail-tabs .dtab {
  flex: 1;
  min-width: 0;
  text-align: center;
  min-height: 44px;
  padding: 10px 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  border: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  font-family: var(--font-sans);
}
#detail-tabs .dtab.active {
  color: var(--text);
  font-weight: 700;
  border-bottom-color: #000;
  box-shadow: none;
  background: transparent;
}
:root.dark #detail-tabs .dtab.active {
  border-bottom-color: #f8fafc;
}
.feed-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.feed-container {
  padding: 0 0 100px;
}

.feed-card {
  margin: 16px 14px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.15s;
}
.feed-card.feed-card-outside-read {
  margin-bottom: 0;
  border-bottom: none;
  border-radius: 16px 16px 0 0;
}
.feed-card:active {
  transform: scale(0.985);
}
.feed-card:first-child {
  margin-top: 12px;
}

.feed-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 5/6;
  overflow: hidden;
}
.feed-cover-bg {
  position: absolute;
  inset: 0;
}
.feed-cover-art {
  position: absolute;
  inset: 0;
}
.feed-cover-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(0deg, rgba(3, 2, 10, 0.95) 0%, rgba(3, 2, 10, 0.6) 40%, transparent 100%);
}
.feed-cover-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.feed-cover-title h2 {
  font-family: var(--font-sans);
  font-size: 26px;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  margin: 0;
}
.feed-cover-title .feed-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 6px;
  line-height: 1.5;
}
.feed-cover-author {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}

.feed-badge-row {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 6px;
}
.feed-episode-chip {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 4px 9px;
  font-size: 10px;
  font-family: var(--font-sans);
  backdrop-filter: blur(6px);
}
.feed-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  font-family: var(--font-sans);
  line-height: 1.1;
}
.feed-badge.event {
  background: rgba(200, 169, 110, 0.85);
  color: #000;
}
.feed-badge.new {
  background: rgba(255, 60, 60, 0.85);
  color: #fff;
}
.feed-badge.hot {
  background: rgba(124, 111, 255, 0.85);
  color: #fff;
}
.feed-badge.up {
  background: rgba(46, 204, 113, 0.85);
  color: #fff;
}

.feed-indicator {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  font-family: var(--font-sans);
}

.feed-genre-tag {
  display: inline-block;
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  margin: 0 0 10px;
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
}

.feed-info {
  padding: 10px;
}
.feed-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.feed-author {
  font-size: 13px;
  color: var(--text2);
}
.feed-dot {
  color: var(--text3);
  font-size: 10px;
}
.feed-ep-count {
  font-size: 13px;
  color: var(--accent);
  font-family: var(--font-sans);
}
.feed-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--star-rating);
  font-family: var(--font-sans);
}
.feed-rating .agi {
  font-size: 13px !important;
  line-height: 1;
}

.feed-stats-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-top: -2px;
  margin-bottom: -2px;
}
.feed-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text2);
}
.feed-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: var(--text2);
  box-sizing: border-box;
}
.feed-stat-rating .feed-stat-icon {
  color: var(--star-rating);
  background: transparent;
  border: none;
}
.feed-stat .agi {
  font-size: 20px !important;
  line-height: 1;
  width: 1em;
  height: 1em;
  color: inherit;
}
.feed-stat .star {
  color: var(--star-rating);
}
.feed-stat-value {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.15;
  min-width: 0;
}
.feed-stat-rating .feed-stat-value {
  color: var(--star-rating);
}
.feed-stat.feed-stat-cmt,
.feed-stat.feed-stat-like {
  cursor: pointer;
}
.feed-stat--no-count .feed-stat-value {
  display: none;
}

.feed-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.feed-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  padding: 6px 0;
}
.feed-action-row .feed-action-btn .agi {
  font-size: 20px !important;
  line-height: 1;
}
.feed-action-btn.feed-like-btn.liked,
.feed-stat.feed-stat-like.liked {
  color: var(--accent3);
}
.feed-stat.feed-stat-like.liked .feed-stat-value {
  color: var(--accent3);
}
.feed-stat.feed-stat-like.liked .feed-stat-icon {
  color: var(--accent3);
  background: transparent;
  border: none;
}

.feed-read-btn {
  width: 100%;
  margin-top: 6px;
  background: linear-gradient(90deg, #4c1d95 0%, #6d28d9 55%, #7e22ce 100%);
  color: #fff;
  border: none;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  font-family: var(--font-sans);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.28);
}
.feed-read-btn.feed-read-btn-outside {
  display: block;
  width: calc(100% - 28px);
  margin: 0 14px 0;
  border: 1px solid rgba(126, 34, 206, 0.55);
  border-top: none;
}

@keyframes feedFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.feed-fade-up {
  opacity: 0;
  animation: feedFadeUp 0.5s ease-out forwards;
}

.feed-recent-card {
  margin: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  gap: 14px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.15s;
}
.feed-recent-card:active {
  transform: scale(0.985);
}
.feed-recent-cover {
  flex-shrink: 0;
  width: 80px;
  height: 112px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.feed-recent-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.feed-recent-play {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  border: none;
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 50%;
  padding: 0;
  background: var(--accent2);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(91, 33, 182, 0.22);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.feed-recent-play:active {
  transform: scale(0.94);
  box-shadow: 0 1px 6px rgba(91, 33, 182, 0.2);
}
.feed-recent-play .agi {
  font-size: 18px !important;
  line-height: 1;
  margin-left: 2px;
}
.feed-recent-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.22;
  color: var(--text);
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}
.feed-recent-ep {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  margin-top: 10px;
  padding: 7px 14px 7px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  font-family: var(--font-sans);
  background: rgba(200, 169, 110, 0.14);
  border: 1px solid rgba(200, 169, 110, 0.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
:root.dark .feed-recent-ep {
  background: rgba(200, 169, 110, 0.12);
  border-color: rgba(200, 169, 110, 0.32);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.feed-recent-genre {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent2);
  margin-top: 5px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  font-family: var(--font-sans);
}
.feed-recent-progress {
  margin-top: auto;
}
.feed-recent-prog-bar {
  height: 6px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
}
.feed-recent-prog-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
}
.feed-recent-prog-text {
  font-size: 10px;
  color: var(--text2);
  margin-top: 4px;
  font-family: var(--font-sans);
}
.feed-recent-continue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color: #000;
  border: none;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 8px;
  font-family: var(--font-sans);
  cursor: pointer;
  align-self: flex-start;
}

.feed-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text2);
}
.feed-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.feed-empty-text {
  font-size: 14px;
  line-height: 1.6;
}
.feed-empty-btn {
  margin-top: 16px;
  background: var(--accent);
  color: #000;
  border: none;
  padding: 12px 28px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-sans);
}