/* PWA Banner */
    #pwaBanner {
      display: none;
      position: fixed;
      bottom: 84px;
      /* Above bottom-nav (68px) */
      left: 50%;
      transform: translateX(-50%);
      width: 94%;
      max-width: 440px;
      background: var(--surface);
      z-index: 10000;
      padding: 12px 16px;
      box-shadow: 0 4px 16px rgba(10, 25, 41, 0.15);
      border-radius: 16px;
      border: 1px solid var(--border);
      align-items: center;
      gap: 12px;
      animation: pwaSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes pwaSlideUp {
      from {
        transform: translate(-50%, 24px);
        opacity: 0;
      }

      to {
        transform: translate(-50%, 0);
        opacity: 1;
      }
    }

    .pwa-icon {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      flex-shrink: 0;
      box-shadow: var(--shadow-sm);
    }

    .pwa-text {
      flex: 1;
    }

    .pwa-text h4 {
      font-size: 14px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 2px;
    }

    .pwa-text p {
      font-size: 11px;
      color: var(--text-mid);
      line-height: 1.4;
    }

    .pwa-close {
      font-size: 20px;
      color: var(--text-light);
      cursor: pointer;
      padding: 4px;
    }

    /* モーダル表示中の背景スクロール防止強化（iOSで復帰できない問題対策） */
    html:has(body[style*="overflow: hidden"]),
    body[style*="overflow: hidden"] {
      overscroll-behavior: none !important;
    }

    .modal-scrollable,
    .modal-content,
    .reader-content,
    .writer-overlay-content,
    .modal-overlay,
    .full-overlay,
    .full-view {
      touch-action: auto !important;
      overscroll-behavior: contain !important;
    }

    /* 盗作防止: リーダーでの選択・コピー禁止 */
    .reader-content {
      -webkit-user-select: none !important;
      -moz-user-select: none !important;
      -ms-user-select: none !important;
      user-select: none !important;
      -webkit-touch-callout: none !important;
    }

    :root {
      --bg: #FAF9F6;
      --surface: #FFFFFF;
      --surface2: #F5F3ED;
      --accent: #D96A4B;
      --accent-light: #E8886C;
      --accent-muted: #FDEEEA;
      --accent2: #4B91AD;
      --navy: #3E3532;
      --navy-mid: #594E4A;
      --text: #2D2523;
      --text-mid: #635A58;
      --text-light: #9C9391;
      --border: #E8E4DF;
      --border-light: #F4F0EC;
      --gold: #D49B35;
      --green: #528F66;
      --tag-bg: #F3ECE8;
      --on-accent: #FFFFFF;
      --on-accent-muted: #2D2523;
      --shadow-sm: 0 1px 3px rgba(10, 25, 41, 0.07), 0 1px 2px rgba(10, 25, 41, 0.04);
      --shadow-md: 0 4px 14px rgba(10, 25, 41, 0.09), 0 2px 4px rgba(10, 25, 41, 0.05);
      --shadow-lg: 0 8px 28px rgba(10, 25, 41, 0.12), 0 4px 8px rgba(10, 25, 41, 0.06);
      --radius: 8px;
      --radius-lg: 12px;
      --font-sans: 'Noto Sans JP', sans-serif;
      --font-serif: 'Noto Serif JP', serif;
      --font-logo: 'Zen Maru Gothic', sans-serif;
    }

    html[data-theme="retro"] {
      --bg: #008080;
      --surface: #C0C0C0;
      --surface2: #B6B6B6;
      --accent: #000080;
      --accent-light: #2E2ECF;
      --accent-muted: #DADADA;
      --accent2: #800080;
      --navy: #101010;
      --navy-mid: #242424;
      --text: #101010;
      --text-mid: #2F2F2F;
      --text-light: #4D4D4D;
      --border: #7B7B7B;
      --border-light: #E9E9E9;
      --tag-bg: #D8D8D8;
      --on-accent: #FFFFFF;
      --on-accent-muted: #101010;
      --shadow-sm: none;
      --shadow-md: none;
      --shadow-lg: none;
      --radius: 0px;
      --radius-lg: 0px;
      --font-sans: 'MS UI Gothic', 'Tahoma', 'Noto Sans JP', sans-serif;
      --font-serif: 'MS UI Gothic', 'Noto Serif JP', serif;
      --font-logo: 'MS UI Gothic', 'Zen Maru Gothic', sans-serif;
    }

    html[data-theme="aero"] {
      --bg: linear-gradient(180deg, #dff1ff 0%, #f4fbff 48%, #eaf6ff 100%);
      --surface: rgba(255, 255, 255, 0.76);
      --surface2: rgba(234, 246, 255, 0.94);
      --accent: #2f7fd8;
      --accent-light: #67b3ff;
      --accent-muted: rgba(132, 188, 255, 0.24);
      --accent2: #6ed5ff;
      --navy: #14325e;
      --navy-mid: #264872;
      --text: #183250;
      --text-mid: #38597d;
      --text-light: #5e7ea2;
      --border: rgba(74, 144, 226, 0.45);
      --border-light: rgba(255, 255, 255, 0.75);
      --tag-bg: rgba(223, 240, 255, 0.9);
      --on-accent: #0F2D52;
      --on-accent-muted: #17365E;
      --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.88) inset, 0 0 0 1px rgba(255, 255, 255, 0.45) inset, 0 2px 6px rgba(42, 109, 178, 0.18);
      --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 0 0 1px rgba(255, 255, 255, 0.55) inset, 0 8px 20px rgba(45, 118, 194, 0.22);
      --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 0 0 1px rgba(255, 255, 255, 0.65) inset, 0 14px 34px rgba(32, 103, 176, 0.26);
      --radius: 12px;
      --radius-lg: 16px;
      --font-sans: 'Segoe UI', 'Noto Sans JP', sans-serif;
      --font-serif: 'Yu Mincho', 'Noto Serif JP', serif;
      --font-logo: 'Segoe UI', 'Zen Maru Gothic', sans-serif;
    }

    html[data-theme="vaporwave"] {
      --bg: linear-gradient(180deg, #160027 0%, #2f085f 26%, #3f1fa8 52%, #0f5ec2 72%, #6cf0ff 100%);
      --surface: rgba(34, 8, 74, 0.76);
      --surface2: rgba(73, 18, 116, 0.72);
      --accent: #ff4fbf;
      --accent-light: #ff84dc;
      --accent-muted: rgba(255, 79, 191, 0.2);
      --accent2: #2cf8ff;
      --navy: #e4e2ff;
      --navy-mid: #c7c0ff;
      --text: #f6f3ff;
      --text-mid: #ddd6ff;
      --text-light: #b9a8ff;
      --border: rgba(164, 109, 255, 0.58);
      --border-light: rgba(232, 219, 255, 0.35);
      --tag-bg: rgba(60, 21, 103, 0.72);
      --on-accent: #2E0A4F;
      --on-accent-muted: #F6F3FF;
      --shadow-sm: 0 2px 6px rgba(5, 1, 18, 0.4), 0 0 10px rgba(255, 79, 191, 0.25);
      --shadow-md: 0 8px 20px rgba(2, 0, 12, 0.45), 0 0 24px rgba(80, 188, 255, 0.22);
      --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 79, 191, 0.3);
      --radius: 14px;
      --radius-lg: 18px;
      --font-sans: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
      --font-serif: 'Noto Serif JP', serif;
      --font-logo: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
    }

    html[data-theme="kawaii"] {
      --bg: linear-gradient(180deg, #fbe9f8 0%, #f4def3 18%, #dbf6fb 58%, #c9f2f8 100%);
      --surface: rgba(255, 244, 253, 0.84);
      --surface2: rgba(255, 235, 249, 0.9);
      --accent: #c58bcf;
      --accent-light: #dea8e4;
      --accent-muted: rgba(224, 187, 234, 0.32);
      --accent2: #8be6e8;
      --navy: #5a4367;
      --navy-mid: #70567f;
      --text: #44344f;
      --text-mid: #654f73;
      --text-light: #8f7aa0;
      --border: rgba(188, 152, 207, 0.52);
      --border-light: rgba(255, 255, 255, 0.72);
      --tag-bg: rgba(255, 226, 247, 0.74);
      --on-accent: #40274D;
      --on-accent-muted: #4B3458;
      --shadow-sm: 0 2px 6px rgba(145, 108, 171, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
      --shadow-md: 0 8px 20px rgba(140, 101, 168, 0.2), 0 0 18px rgba(151, 241, 246, 0.2);
      --shadow-lg: 0 14px 34px rgba(127, 82, 156, 0.24), 0 0 28px rgba(145, 244, 250, 0.35);
      --radius: 20px;
      --radius-lg: 28px;
      --font-sans: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
      --font-serif: 'Noto Serif JP', serif;
      --font-logo: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
    }

    html[data-theme="boygame"] {
      --bg: #9bbc0f;
      --surface: #8bac0f;
      --surface2: #9bbc0f;
      --accent: #0f380f;
      --accent-light: #306230;
      --accent-muted: rgba(15, 56, 15, 0.16);
      --accent2: #306230;
      --navy: #0f380f;
      --navy-mid: #1f4b1f;
      --text: #0f380f;
      --text-mid: #1f4b1f;
      --text-light: #306230;
      --border: #306230;
      --border-light: #8bac0f;
      --tag-bg: #8bac0f;
      --on-accent: #E4F3B6;
      --on-accent-muted: #0F380F;
      --shadow-sm: none;
      --shadow-md: none;
      --shadow-lg: none;
      --radius: 0px;
      --radius-lg: 0px;
      --font-sans: 'DotGothic16', 'MS UI Gothic', 'Noto Sans JP', sans-serif;
      --font-serif: 'DotGothic16', 'MS UI Gothic', 'Noto Serif JP', serif;
      --font-logo: 'DotGothic16', 'MS UI Gothic', 'Zen Maru Gothic', sans-serif;
    }

    html[data-theme="hacker"] {
      --bg: radial-gradient(circle at 20% 10%, #00190b 0%, #000905 55%, #000 100%);
      --surface: rgba(0, 20, 8, 0.92);
      --surface2: rgba(0, 16, 6, 0.92);
      --accent: #00ff66;
      --accent-light: #6dff9f;
      --accent-muted: rgba(0, 255, 102, 0.14);
      --accent2: #00d45a;
      --navy: #92ffb9;
      --navy-mid: #68dd90;
      --text: #9effbf;
      --text-mid: #74e79c;
      --text-light: #3dbf6d;
      --border: rgba(0, 255, 120, 0.34);
      --border-light: rgba(0, 255, 120, 0.22);
      --tag-bg: rgba(0, 40, 16, 0.9);
      --on-accent: #00280F;
      --on-accent-muted: #94FFBC;
      --shadow-sm: 0 0 0 1px rgba(0, 255, 120, 0.18), 0 0 14px rgba(0, 255, 90, 0.14);
      --shadow-md: 0 0 0 1px rgba(0, 255, 120, 0.24), 0 0 22px rgba(0, 255, 90, 0.2);
      --shadow-lg: 0 0 0 1px rgba(0, 255, 120, 0.3), 0 0 34px rgba(0, 255, 90, 0.28);
      --radius: 6px;
      --radius-lg: 8px;
      --font-sans: 'Share Tech Mono', 'Noto Sans JP', monospace;
      --font-serif: 'Share Tech Mono', 'Noto Serif JP', monospace;
      --font-logo: 'Share Tech Mono', 'Zen Maru Gothic', monospace;
    }

    html[data-theme="sonkei"] {
      --bg: #eff2f5;
      --surface: #ffffff;
      --surface2: #f7f9fb;
      --accent: #22b7cd;
      --accent-light: #45cce0;
      --accent-muted: rgba(34, 183, 205, 0.15);
      --accent2: #1e90ff;
      --navy: #1a9db3;
      --navy-mid: #178da1;
      --text: #3a4a56;
      --text-mid: #5f6f7b;
      --text-light: #82929f;
      --border: #d7dee5;
      --border-light: #edf2f6;
      --tag-bg: #fff2f2;
      --on-accent: #083F4A;
      --on-accent-muted: #20414A;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
      --shadow-md: 0 3px 9px rgba(0, 0, 0, 0.06);
      --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.08);
      --radius: 4px;
      --radius-lg: 6px;
      --font-sans: 'Noto Sans JP', sans-serif;
      --font-serif: 'Noto Serif JP', serif;
      --font-logo: 'Noto Serif JP', serif;
    }


    html[data-theme="galakei"] {
      --bg: #d9ddd1;
      --surface: #f1f4e8;
      --surface2: #e2e7d6;
      --accent: #4a5743;
      --accent-light: #66745f;
      --accent-muted: rgba(74, 87, 67, 0.18);
      --accent2: #7a583a;
      --navy: #2f382b;
      --navy-mid: #465341;
      --text: #2a3126;
      --text-mid: #4a5545;
      --text-light: #6b7565;
      --border: #7f8c74;
      --border-light: #f8fbf1;
      --tag-bg: #d8dec9;
      --on-accent: #F2F6E7;
      --on-accent-muted: #2A3126;
      --shadow-sm: inset 0 1px 0 rgba(248, 251, 241, 0.95), inset 0 -1px 0 rgba(117, 128, 106, 0.4), 0 1px 1px rgba(45, 54, 41, 0.2);
      --shadow-md: inset 0 1px 0 rgba(250, 252, 245, 0.95), inset 0 -2px 0 rgba(112, 124, 101, 0.45), 0 4px 8px rgba(44, 51, 39, 0.25);
      --shadow-lg: inset 0 1px 0 rgba(252, 255, 248, 0.95), inset 0 -2px 0 rgba(106, 118, 97, 0.48), 0 10px 18px rgba(42, 48, 37, 0.28);
      --radius: 10px;
      --radius-lg: 14px;
      --font-sans: 'M PLUS Rounded 1c', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
      --font-serif: 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
      --font-logo: 'M PLUS Rounded 1c', 'Zen Maru Gothic', sans-serif;
    }

    html[data-theme="ascii"] {
      --bg: #111111;
      --surface: #161616;
      --surface2: #0f0f0f;
      --accent: #e8e8e8;
      --accent-light: #ffffff;
      --accent-muted: rgba(255, 255, 255, 0.08);
      --accent2: #c9c9c9;
      --navy: #050505;
      --navy-mid: #141414;
      --text: #eeeeee;
      --text-mid: #d0d0d0;
      --text-light: #a6a6a6;
      --border: #7a7a7a;
      --border-light: #b0b0b0;
      --tag-bg: #202020;
      --on-accent: #0A0A0A;
      --on-accent-muted: #EEEEEE;
      --shadow-sm: none;
      --shadow-md: none;
      --shadow-lg: none;
      --radius: 0px;
      --radius-lg: 0px;
      --font-sans: 'Share Tech Mono', 'Courier New', 'Noto Sans JP', monospace;
      --font-serif: 'Share Tech Mono', 'Courier New', 'Noto Serif JP', monospace;
      --font-logo: 'Share Tech Mono', 'Courier New', 'Zen Maru Gothic', monospace;
    }

    html[data-theme="ascii"] body,
    html[data-theme="ascii"] input,
    html[data-theme="ascii"] textarea,
    html[data-theme="ascii"] button,
    html[data-theme="ascii"] select,
    html[data-theme="ascii"] .btn,
    html[data-theme="ascii"] .theme-picker-card,
    html[data-theme="ascii"] .novel-card,
    html[data-theme="ascii"] .stat-card,
    html[data-theme="ascii"] .hero,
    html[data-theme="ascii"] .modal-content,
    html[data-theme="ascii"] .reader-content,
    html[data-theme="ascii"] .writer-overlay-content,
    html[data-theme="ascii"] .reader-topbar,
    html[data-theme="ascii"] .bottom-nav {
      font-family: 'Share Tech Mono', 'Courier New', monospace !important;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      box-shadow: none !important;
      border-radius: 0 !important;
      border-style: solid !important;
      image-rendering: pixelated;
    }

    html[data-theme="ascii"] .btn:not(.hero-banner-arrow):not(.hero-banner-dot),
    html[data-theme="ascii"] button:not(.hero-banner-arrow):not(.hero-banner-dot) {
      position: relative;
      border: 1px solid var(--accent-light) !important;
      background: #0e0e0e !important;
      color: #ffffff !important;
    }

    html[data-theme="ascii"] .btn:not(.hero-banner-arrow):not(.hero-banner-dot)::before,
    html[data-theme="ascii"] button:not(.hero-banner-arrow):not(.hero-banner-dot)::before {
      content: '[ ';
      opacity: 0.9;
      margin-right: 2px;
    }

    html[data-theme="ascii"] .btn:not(.hero-banner-arrow):not(.hero-banner-dot)::after,
    html[data-theme="ascii"] button:not(.hero-banner-arrow):not(.hero-banner-dot)::after {
      content: ' ]';
      opacity: 0.9;
      margin-left: 2px;
    }

    html[data-theme="ascii"] .logo::before {
      content: '>_ ';
      color: var(--accent-light);
      font-weight: 700;
    }


    html[data-theme="ascii"] .hero {
      background: #000000;
    }

    html[data-theme="ascii"] .hero::before {
      background: rgba(255, 255, 255, 0.03);
    }

    html[data-theme="ascii"] .hero-banner-carousel,
    html[data-theme="ascii"] .hero-banner-slide a {
      background: #000000;
    }

    html[data-theme="ascii"] .hero-banner-arrow,
    html[data-theme="ascii"] .hero-banner-dot {
      text-transform: none;
      letter-spacing: normal;
    }

    html[data-theme="ascii"] .hero-banner-arrow::before,
    html[data-theme="ascii"] .hero-banner-arrow::after,
    html[data-theme="ascii"] .hero-banner-dot::before,
    html[data-theme="ascii"] .hero-banner-dot::after {
      content: none !important;
      margin: 0;
    }

    html[data-theme="ascii"] .hero-banner-arrow {
      border-radius: 999px !important;
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      padding: 0;
      line-height: 1;
    }


    html[data-theme="ascii"] .hero-banner-arrow.prev {
      left: 10px;
      right: auto;
      top: 50%;
      transform: translateY(-50%);
    }

    html[data-theme="ascii"] .hero-banner-arrow.next {
      right: 10px;
      left: auto;
      top: 50%;
      transform: translateY(-50%);
    }

    html[data-theme="ascii"] .hero-banner-arrow i {
      display: inline-block;
      line-height: 1;
      margin: 0;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      max-width: 100vw;
    }

    body {
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      font-size: 14px;
      overflow-x: hidden;
      max-width: 100vw;
      min-width: 0;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    img {
      display: block;
    }

    /* ── HEADER ── */
    .header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: var(--shadow-sm);
    }

    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
      height: 68px;
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      box-sizing: border-box;
    }

    .logo {
      font-family: var(--font-logo);
      font-size: 26px;
      font-weight: 700;
      color: var(--accent);
      white-space: nowrap;
      letter-spacing: -0.01em;
      flex-shrink: 0;
    }

    .logo span {
      color: var(--navy);
    }

    html[data-theme="retro"] .header {
      background: var(--surface);
      border-bottom: 2px solid var(--border);
      box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #7b7b7b;
    }

    html[data-theme="retro"] .btn,
    html[data-theme="retro"] button,
    html[data-theme="retro"] input,
    html[data-theme="retro"] textarea,
    html[data-theme="retro"] select,
    html[data-theme="retro"] .form-control,
    html[data-theme="retro"] .search-box,
    html[data-theme="retro"] .novel-card,
    html[data-theme="retro"] .stat-card,
    html[data-theme="retro"] .hero,
    html[data-theme="retro"] .modal-content,
    html[data-theme="retro"] .reader-content,
    html[data-theme="retro"] .writer-overlay-content {
      border-radius: 0 !important;
      box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #7b7b7b !important;
    }

    html[data-theme="retro"] .btn:active,
    html[data-theme="retro"] button:active {
      box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #7b7b7b !important;
    }

    html[data-theme="aero"] body {
      background-attachment: fixed;
      position: relative;
    }

    html[data-theme="aero"] body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 15% 10%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 42%),
        radial-gradient(ellipse at 82% 18%, rgba(181, 228, 255, 0.46) 0%, rgba(181, 228, 255, 0) 48%),
        radial-gradient(ellipse at 50% 105%, rgba(118, 196, 255, 0.26) 0%, rgba(118, 196, 255, 0) 55%);
      z-index: 0;
    }

    html[data-theme="aero"] .header,
    html[data-theme="aero"] .hero,
    html[data-theme="aero"] .novel-card,
    html[data-theme="aero"] .stat-card,
    html[data-theme="aero"] .modal-content,
    html[data-theme="aero"] .reader-content,
    html[data-theme="aero"] .writer-overlay-content,
    html[data-theme="aero"] .reader-settings-panel,
    html[data-theme="aero"] .reader-topbar {
      position: relative;
      overflow: hidden;
    }

    html[data-theme="aero"] .header::before,
    html[data-theme="aero"] .hero::before,
    html[data-theme="aero"] .novel-card::before,
    html[data-theme="aero"] .stat-card::before,
    html[data-theme="aero"] .modal-content::before,
    html[data-theme="aero"] .reader-content::before,
    html[data-theme="aero"] .writer-overlay-content::before,
    html[data-theme="aero"] .reader-settings-panel::before,
    html[data-theme="aero"] .reader-topbar::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.18) 34%, rgba(255, 255, 255, 0.04) 64%, rgba(255, 255, 255, 0.12) 100%);
      z-index: 0;
    }

    html[data-theme="aero"] .header>*,
    html[data-theme="aero"] .hero>*,
    html[data-theme="aero"] .novel-card>*,
    html[data-theme="aero"] .stat-card>*,
    html[data-theme="aero"] .modal-content>*,
    html[data-theme="aero"] .reader-content>*,
    html[data-theme="aero"] .writer-overlay-content>*,
    html[data-theme="aero"] .reader-settings-panel>*,
    html[data-theme="aero"] .reader-topbar>* {
      position: relative;
      z-index: 1;
    }

    html[data-theme="aero"] .header,
    html[data-theme="aero"] .hero,
    html[data-theme="aero"] .novel-card,
    html[data-theme="aero"] .stat-card,
    html[data-theme="aero"] .modal-content,
    html[data-theme="aero"] .reader-content,
    html[data-theme="aero"] .writer-overlay-content,
    html[data-theme="aero"] .reader-settings-panel,
    html[data-theme="aero"] .search-box,
    html[data-theme="aero"] .form-control,
    html[data-theme="aero"] select,
    html[data-theme="aero"] button,
    html[data-theme="aero"] .btn {
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border: 1px solid var(--border) !important;
      box-shadow: var(--shadow-sm);
    }

    html[data-theme="aero"] .btn,
    html[data-theme="aero"] button {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(223, 241, 255, 0.95) 42%, rgba(170, 213, 251, 0.92) 100%);
      color: var(--navy);
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(76, 138, 209, 0.38) inset, 0 3px 8px rgba(42, 109, 178, 0.22);
    }

    html[data-theme="aero"] .btn:hover,
    html[data-theme="aero"] button:hover {
      filter: brightness(1.03);
    }

    html[data-theme="aero"] .btn:active,
    html[data-theme="aero"] button:active {
      transform: translateY(1px);
      box-shadow: 0 1px 1px rgba(91, 146, 209, 0.5) inset, 0 0 0 rgba(0, 0, 0, 0);
    }

    html[data-theme="aero"] .hero {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(214, 238, 255, 0.66) 100%);
      border: 1px solid rgba(122, 183, 238, 0.62);
      box-shadow: var(--shadow-lg);
    }

    html[data-theme="aero"] .bottom-nav,
    html[data-theme="aero"] .reader-topbar,
    html[data-theme="aero"] .header {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(201, 231, 255, 0.74) 100%);
      border-color: rgba(112, 176, 236, 0.62);
    }

    html[data-theme="aero"] .bottom-nav {
      box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.9) inset, 0 -8px 22px rgba(77, 145, 214, 0.24);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    html[data-theme="aero"] .bottom-nav-btn {
      color: #2b5f97;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
      position: relative;
      overflow: hidden;
    }

    html[data-theme="aero"] .bottom-nav-btn::before {
      content: '';
      position: absolute;
      left: 8%;
      right: 8%;
      top: 3px;
      height: 52%;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.16) 100%);
      pointer-events: none;
      opacity: 0.9;
      z-index: 0;
    }

    html[data-theme="aero"] .bottom-nav-btn i,
    html[data-theme="aero"] .bottom-nav-btn span {
      position: relative;
      z-index: 1;
    }

    html[data-theme="aero"] .bottom-nav-btn.active {
      color: #1a5fb1;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(197, 227, 255, 0.92) 58%, rgba(145, 198, 245, 0.9) 100%);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(90, 152, 219, 0.38) inset;
    }

    html[data-theme="aero"] .bottom-nav-post {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(164, 211, 255, 0.96) 55%, rgba(100, 167, 236, 0.95) 100%) !important;
      color: #0f4f99 !important;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(51, 120, 197, 0.44) inset, 0 4px 10px rgba(45, 112, 187, 0.25);
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
    }

    html[data-theme="aero"] .bottom-nav-post:hover {
      filter: brightness(1.03);
    }

    html[data-theme="vaporwave"] body {
      background-attachment: fixed;
      position: relative;
    }

    html[data-theme="vaporwave"] body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        url('https://www.transparenttextures.com/patterns/asfalt-light.png'),
        radial-gradient(ellipse at 20% 12%, rgba(255, 151, 221, 0.3) 0%, rgba(255, 151, 221, 0) 42%),
        radial-gradient(ellipse at 86% 22%, rgba(99, 251, 255, 0.36) 0%, rgba(99, 251, 255, 0) 46%),
        linear-gradient(transparent 92%, rgba(255, 255, 255, 0.08) 92%, rgba(255, 255, 255, 0.08) 93%, transparent 93%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
      background-size: 220px 220px, auto, auto, 100% 8px, 80px 100%;
      background-repeat: repeat, no-repeat, no-repeat, repeat, repeat;
      mix-blend-mode: screen;
      opacity: 0.85;
      z-index: 0;
    }

    html[data-theme="vaporwave"] .header,
    html[data-theme="vaporwave"] .hero,
    html[data-theme="vaporwave"] .novel-card,
    html[data-theme="vaporwave"] .stat-card,
    html[data-theme="vaporwave"] .modal-content,
    html[data-theme="vaporwave"] .reader-content,
    html[data-theme="vaporwave"] .writer-overlay-content,
    html[data-theme="vaporwave"] .reader-settings-panel,
    html[data-theme="vaporwave"] .reader-topbar,
    html[data-theme="vaporwave"] .search-box,
    html[data-theme="vaporwave"] .form-control,
    html[data-theme="vaporwave"] select,
    html[data-theme="vaporwave"] button,
    html[data-theme="vaporwave"] .btn {
      position: relative;
      background: linear-gradient(180deg, rgba(52, 16, 94, 0.86) 0%, rgba(20, 9, 57, 0.72) 100%);
      border-color: rgba(166, 116, 255, 0.66) !important;
      box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(237, 212, 255, 0.2);
      backdrop-filter: blur(6px) saturate(1.2);
      -webkit-backdrop-filter: blur(6px) saturate(1.2);
    }

    html[data-theme="vaporwave"] .header,
    html[data-theme="vaporwave"] .reader-topbar,
    html[data-theme="vaporwave"] .bottom-nav {
      background: linear-gradient(180deg, rgba(72, 19, 126, 0.84) 0%, rgba(34, 12, 77, 0.8) 100%);
      border-color: rgba(113, 236, 255, 0.5);
    }

    html[data-theme="vaporwave"] .btn,
    html[data-theme="vaporwave"] button {
      background: linear-gradient(135deg, rgba(255, 78, 193, 0.95) 0%, rgba(157, 87, 255, 0.93) 48%, rgba(58, 232, 255, 0.95) 100%);
      color: #150626;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
      border: 1px solid rgba(244, 216, 255, 0.48);
    }

    html[data-theme="vaporwave"] .hero-banner-arrow {
      position: absolute;
      background: radial-gradient(circle at 25% 25%, rgba(114, 245, 255, 0.9), rgba(102, 104, 255, 0.75) 45%, rgba(248, 94, 210, 0.72));
      color: #150626;
      border: 1px solid rgba(243, 226, 255, 0.62);
      box-shadow: 0 0 18px rgba(89, 237, 255, 0.42), 0 0 28px rgba(255, 108, 214, 0.28);
      text-shadow: none;
    }

    html[data-theme="vaporwave"] .hero-banner-arrow:hover {
      filter: brightness(1.08) saturate(1.2);
      box-shadow: 0 0 22px rgba(89, 237, 255, 0.6), 0 0 34px rgba(255, 108, 214, 0.4);
    }

    html[data-theme="vaporwave"] .hero-banner-dots {
      gap: 10px;
    }

    html[data-theme="vaporwave"] .hero-banner-dot {
      width: 13px;
      height: 13px;
      border: 1px solid rgba(243, 226, 255, 0.6);
      background: radial-gradient(circle, rgba(113, 240, 255, 0.7) 0%, rgba(135, 66, 242, 0.48) 65%, rgba(135, 66, 242, 0) 100%);
      box-shadow: 0 0 9px rgba(93, 237, 255, 0.35);
    }

    html[data-theme="vaporwave"] .hero-banner-dot.active {
      background: radial-gradient(circle, rgba(255, 229, 255, 0.95) 0%, rgba(252, 96, 214, 0.95) 52%, rgba(107, 248, 255, 0.75) 100%);
      box-shadow: 0 0 16px rgba(251, 96, 214, 0.5), 0 0 26px rgba(108, 248, 255, 0.6);
      transform: scale(1.15);
    }

    html[data-theme="vaporwave"] .btn:hover,
    html[data-theme="vaporwave"] button:hover {
      filter: brightness(1.08) saturate(1.1);
      box-shadow: 0 10px 24px rgba(8, 0, 20, 0.45), 0 0 24px rgba(255, 78, 193, 0.45);
    }

    html[data-theme="vaporwave"] .logo {
      font-family: 'Monoton', 'Zen Maru Gothic', cursive;
      letter-spacing: 0.05em;
      color: #ff8ce2;
      text-shadow: 0 0 10px rgba(255, 89, 199, 0.7), 0 0 22px rgba(117, 245, 255, 0.65);
    }

    html[data-theme="vaporwave"] .logo span,
    html[data-theme="vaporwave"] .section-title,
    html[data-theme="vaporwave"] .novel-title,
    html[data-theme="vaporwave"] h1,
    html[data-theme="vaporwave"] h2,
    html[data-theme="vaporwave"] h3 {
      font-family: 'Orbitron', 'Zen Maru Gothic', sans-serif;
      color: #f9f4ff;
      text-shadow: 0 0 12px rgba(58, 232, 255, 0.28);
    }

    html[data-theme="vaporwave"] a,
    html[data-theme="vaporwave"] .link,
    html[data-theme="vaporwave"] .tab.active {
      color: #75f5ff;
    }

    html[data-theme="vaporwave"] .hero {
      background:
        linear-gradient(140deg, rgba(55, 18, 96, 0.9) 0%, rgba(30, 11, 70, 0.82) 60%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 7px);
      border: 1px solid rgba(125, 252, 255, 0.38);
    }

    html[data-theme="kawaii"] body {
      background-attachment: fixed;
      position: relative;
    }

    html[data-theme="kawaii"] body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        url('https://www.transparenttextures.com/patterns/marble.png'),
        linear-gradient(transparent 94%, rgba(255, 255, 255, 0.22) 94%, rgba(255, 255, 255, 0.22) 95%, transparent 95%),
        linear-gradient(90deg, rgba(198, 230, 255, 0.3) 1px, transparent 1px);
      background-size: 360px 360px, 100% 9px, 52px 100%;
      background-repeat: repeat, repeat, repeat;
      mix-blend-mode: soft-light;
      opacity: 0.76;
      z-index: 0;
    }

    html[data-theme="kawaii"] body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(255, 128, 191, 0.18) 0%, rgba(255, 128, 191, 0) 25%),
        linear-gradient(90deg, rgba(110, 233, 255, 0.16) 65%, rgba(110, 233, 255, 0) 100%);
      transform: translateX(1.8px);
      mix-blend-mode: screen;
      opacity: 0.72;
      animation: kawaiiVhsJitter 2.8s steps(2, end) infinite;
      z-index: 1;
    }

    @keyframes kawaiiVhsJitter {

      0%,
      100% {
        transform: translateX(1.5px);
      }

      33% {
        transform: translateX(-1.2px) translateY(0.6px);
      }

      66% {
        transform: translateX(2.4px) translateY(-0.4px);
      }
    }

    html[data-theme="kawaii"] .header,
    html[data-theme="kawaii"] .hero,
    html[data-theme="kawaii"] .novel-card,
    html[data-theme="kawaii"] .stat-card,
    html[data-theme="kawaii"] .modal-content,
    html[data-theme="kawaii"] .reader-content,
    html[data-theme="kawaii"] .writer-overlay-content,
    html[data-theme="kawaii"] .reader-settings-panel,
    html[data-theme="kawaii"] .reader-topbar,
    html[data-theme="kawaii"] .search-box,
    html[data-theme="kawaii"] .form-control,
    html[data-theme="kawaii"] select {
      position: relative;
      background: linear-gradient(180deg, rgba(255, 244, 253, 0.92) 0%, rgba(237, 252, 255, 0.78) 100%);
      border-color: rgba(194, 157, 213, 0.66) !important;
      box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(4px) saturate(1.06);
      -webkit-backdrop-filter: blur(4px) saturate(1.06);
    }

    html[data-theme="kawaii"] .hero {
      background:
        linear-gradient(180deg, rgba(194, 246, 255, 0.84) 0%, rgba(178, 240, 250, 0.78) 100%),
        linear-gradient(90deg, rgba(176, 196, 222, 0.16) 1px, transparent 1px),
        linear-gradient(0deg, rgba(176, 196, 222, 0.16) 1px, transparent 1px);
      background-size: auto, 42px 42px, 42px 42px;
      border: 1px solid rgba(184, 156, 206, 0.52);
    }

    html[data-theme="kawaii"] .btn,
    html[data-theme="kawaii"] button {
      background: linear-gradient(180deg, rgba(244, 208, 238, 0.95) 0%, rgba(227, 186, 224, 0.95) 100%);
      color: #543f62;
      border: 1px solid rgba(193, 157, 213, 0.7);
      box-shadow: 3px 3px 0 rgba(131, 236, 243, 0.42);
      text-shadow: 1px 0 rgba(120, 230, 255, 0.4), -1px 0 rgba(255, 137, 194, 0.42);
    }

    html[data-theme="kawaii"] .btn:hover,
    html[data-theme="kawaii"] button:hover {
      transform: translateY(-1px);
      filter: brightness(1.04);
      box-shadow: 4px 4px 0 rgba(131, 236, 243, 0.5), 0 0 18px rgba(248, 155, 214, 0.36);
    }

    html[data-theme="kawaii"] .logo,
    html[data-theme="kawaii"] h1,
    html[data-theme="kawaii"] h2,
    html[data-theme="kawaii"] h3,
    html[data-theme="kawaii"] .section-title,
    html[data-theme="kawaii"] .novel-title {
      color: #5d4b71;
      text-shadow: 1.5px 0 rgba(109, 238, 255, 0.62), -1.5px 0 rgba(255, 132, 196, 0.56), 0 3px 8px rgba(139, 111, 166, 0.3);
    }

    html[data-theme="kawaii"] .hero-banner-arrow {
      background: linear-gradient(135deg, rgba(237, 198, 237, 0.95) 0%, rgba(177, 242, 247, 0.95) 100%);
      color: #5f486f;
      border: 1px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 0 1px rgba(188, 152, 207, 0.48), 0 0 16px rgba(145, 236, 246, 0.45);
    }

    html[data-theme="kawaii"] .hero-banner-dot {
      width: 12px;
      height: 12px;
      border: 1px solid rgba(182, 148, 202, 0.72);
      background: rgba(255, 228, 243, 0.88);
      box-shadow: 0 0 10px rgba(144, 235, 246, 0.35);
    }

    html[data-theme="kawaii"] .hero-banner-dot.active {
      background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(243, 167, 220, 0.94) 65%, rgba(144, 236, 246, 0.88) 100%);
    }

    html[data-theme="boygame"] body {
      image-rendering: pixelated;
      font-smooth: never;
      -webkit-font-smoothing: none;
      text-rendering: optimizeSpeed;
      background:
        repeating-linear-gradient(0deg, rgba(15, 56, 15, 0.08) 0 2px, rgba(15, 56, 15, 0) 2px 4px),
        #9bbc0f;
    }

    html[data-theme="boygame"] .header,
    html[data-theme="boygame"] .hero,
    html[data-theme="boygame"] .novel-card,
    html[data-theme="boygame"] .stat-card,
    html[data-theme="boygame"] .modal-content,
    html[data-theme="boygame"] .reader-content,
    html[data-theme="boygame"] .writer-overlay-content,
    html[data-theme="boygame"] .reader-settings-panel,
    html[data-theme="boygame"] .reader-topbar,
    html[data-theme="boygame"] .search-box,
    html[data-theme="boygame"] .form-control,
    html[data-theme="boygame"] select,
    html[data-theme="boygame"] button,
    html[data-theme="boygame"] .btn {
      background: #8bac0f !important;
      border: 2px solid #0f380f !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      color: #0f380f !important;
    }

    html[data-theme="boygame"] .btn,
    html[data-theme="boygame"] button {
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    html[data-theme="boygame"] .btn:hover,
    html[data-theme="boygame"] button:hover {
      background: #9bbc0f !important;
      transform: none;
      filter: none;
    }

    html[data-theme="boygame"] .logo,
    html[data-theme="boygame"] .logo span,
    html[data-theme="boygame"] h1,
    html[data-theme="boygame"] h2,
    html[data-theme="boygame"] h3,
    html[data-theme="boygame"] .section-title,
    html[data-theme="boygame"] .novel-title,
    html[data-theme="boygame"] a,
    html[data-theme="boygame"] .tab.active {
      color: #0f380f;
      text-shadow: none;
    }

    html[data-theme="boygame"] .hero {
      background:
        linear-gradient(90deg, rgba(15, 56, 15, 0.14) 1px, transparent 1px),
        linear-gradient(0deg, rgba(15, 56, 15, 0.14) 1px, transparent 1px),
        #9bbc0f;
      background-size: 12px 12px, 12px 12px, auto;
      border: 2px solid #0f380f;
    }

    html[data-theme="boygame"] .hero-banner-arrow {
      position: absolute;
      background: #9bbc0f;
      border: 2px solid #0f380f;
      color: #0f380f;
      opacity: 1;
      border-radius: 0;
    }

    html[data-theme="boygame"] .hero-banner-dot {
      width: 10px;
      height: 10px;
      border-radius: 0;
      border: 1px solid #0f380f;
      background: #8bac0f;
    }

    html[data-theme="boygame"] .hero-banner-dot.active {
      background: #0f380f;
    }

    html[data-theme="boygame"] .header,
    html[data-theme="boygame"] .bottom-nav,
    html[data-theme="boygame"] .reader-topbar {
      border-top: 3px solid #306230;
      border-bottom: 3px solid #0f380f;
    }

    html[data-theme="boygame"] .search-box,
    html[data-theme="boygame"] .form-control,
    html[data-theme="boygame"] input,
    html[data-theme="boygame"] textarea,
    html[data-theme="boygame"] select {
      background: #9bbc0f !important;
      color: #0f380f !important;
      border: 2px inset #306230 !important;
      box-shadow: inset 0 0 0 1px #8bac0f !important;
    }

    html[data-theme="boygame"] img,
    html[data-theme="boygame"] .hero-score-gif {
      filter: grayscale(1) contrast(1.35) sepia(1) hue-rotate(38deg) saturate(3.2) brightness(0.94);
      image-rendering: pixelated;
    }

    html[data-theme="boygame"] .hero-banner-slide img {
      border: 2px solid #0f380f;
      border-radius: 0;
    }

    html[data-theme="boygame"] .bottom-nav-btn.active {
      background: #0f380f !important;
      color: #9bbc0f !important;
      border: 2px solid #306230 !important;
    }

    html[data-theme="boygame"] .news-item,
    html[data-theme="boygame"] .novel-card,
    html[data-theme="boygame"] .stat-card {
      outline: 2px solid #0f380f;
      outline-offset: -2px;
    }

    html[data-theme="hacker"] body {
      background-attachment: fixed;
      font-family: 'Share Tech Mono', 'Noto Sans JP', monospace;
      position: relative;
      text-shadow: 0 0 6px rgba(0, 255, 130, 0.28);
    }

    html[data-theme="hacker"] body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(0deg, rgba(0, 255, 120, 0.08) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
        repeating-linear-gradient(90deg, rgba(0, 255, 120, 0.06) 0 1px, transparent 1px 38px);
      mix-blend-mode: screen;
      opacity: 0.56;
      z-index: 0;
    }

    html[data-theme="hacker"] .header,
    html[data-theme="hacker"] .hero,
    html[data-theme="hacker"] .novel-card,
    html[data-theme="hacker"] .stat-card,
    html[data-theme="hacker"] .modal-content,
    html[data-theme="hacker"] .reader-content,
    html[data-theme="hacker"] .writer-overlay-content,
    html[data-theme="hacker"] .reader-settings-panel,
    html[data-theme="hacker"] .reader-topbar,
    html[data-theme="hacker"] .search-box,
    html[data-theme="hacker"] .form-control,
    html[data-theme="hacker"] select,
    html[data-theme="hacker"] button,
    html[data-theme="hacker"] .btn {
      background: linear-gradient(180deg, rgba(0, 24, 10, 0.96), rgba(0, 14, 7, 0.96));
      border: 1px solid rgba(0, 255, 120, 0.35) !important;
      color: #92ffb9;
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(2px);
    }

    html[data-theme="hacker"] .btn:hover,
    html[data-theme="hacker"] button:hover {
      background: linear-gradient(180deg, rgba(0, 35, 14, 0.98), rgba(0, 18, 8, 0.98));
      color: #c7ffd9;
      box-shadow: var(--shadow-md);
      filter: none;
      transform: translateY(-1px);
    }

    html[data-theme="hacker"] .logo,
    html[data-theme="hacker"] .logo span,
    html[data-theme="hacker"] h1,
    html[data-theme="hacker"] h2,
    html[data-theme="hacker"] h3,
    html[data-theme="hacker"] .section-title,
    html[data-theme="hacker"] .novel-title,
    html[data-theme="hacker"] a,
    html[data-theme="hacker"] .tab.active {
      color: #78f7a9;
      font-family: 'Share Tech Mono', monospace;
      letter-spacing: 0.03em;
    }

    html[data-theme="hacker"] .hero {
      background:
        linear-gradient(180deg, rgba(0, 21, 8, 0.95), rgba(0, 11, 5, 0.95)),
        repeating-linear-gradient(90deg, rgba(0, 255, 120, 0.07) 0 1px, transparent 1px 34px);
      border: 1px solid rgba(0, 255, 120, 0.34);
    }

    html[data-theme="hacker"] .hero-banner-arrow {
      position: absolute;
      border-radius: 4px;
      background: rgba(0, 28, 12, 0.95);
      color: #95ffc1;
      border: 1px solid rgba(0, 255, 120, 0.42);
      box-shadow: 0 0 14px rgba(0, 255, 120, 0.24);
      opacity: 0.9;
    }

    html[data-theme="hacker"] .hero-banner-dot {
      border-radius: 2px;
      border: 1px solid rgba(0, 255, 120, 0.42);
      background: rgba(0, 28, 12, 0.95);
    }

    html[data-theme="hacker"] .hero-banner-dot.active {
      background: #00ff66;
      box-shadow: 0 0 12px rgba(0, 255, 120, 0.6);
    }

    html[data-theme="hacker"] .bottom-nav-btn.active {
      background: rgba(0, 32, 14, 0.96) !important;
      color: #afffcf !important;
      border-color: rgba(0, 255, 120, 0.5) !important;
    }

    html[data-theme="sonkei"] body {
      background: #eef1f4;
    }

    html[data-theme="sonkei"] .hero-copy-main h1,
    html[data-theme="sonkei"] .hero-copy-main h1 em,
    html[data-theme="sonkei"] .hero-copy-main p,
    html[data-theme="sonkei"] .hero-stat strong,
    html[data-theme="sonkei"] .hero-stat span,
    html[data-theme="sonkei"] .desktop-download-copy,
    html[data-theme="sonkei"] .desktop-download-copy strong,
    html[data-theme="sonkei"] .desktop-download-copy small,
    html[data-theme="sonkei"] .desktop-download-note {
      color: #1f2a33 !important;
      text-shadow: none !important;
    }

    html[data-theme="sonkei"] .hero .btn-outline {
      color: #1f2a33 !important;
      border-color: #b8c6d2 !important;
      background: #ffffff !important;
    }

    html[data-theme="sonkei"] .hero .btn-outline i {
      color: #1f8ff5;
    }

    html[data-theme="sonkei"] .header,
    html[data-theme="sonkei"] .bottom-nav,
    html[data-theme="sonkei"] .reader-topbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      box-shadow: none;
    }

    html[data-theme="sonkei"] .hero {
      background: var(--surface);
      border: 1px solid var(--border);
    }

    html[data-theme="sonkei"] .hero::before {
      background: transparent;
    }

    html[data-theme="sonkei"] .hero-banner-row {
      border-top: 5px solid #29b9d0;
      border-bottom: 5px solid #29b9d0;
      background: #fff;
      padding: 8px 0;
    }

    html[data-theme="sonkei"] .hero-banner-slide img {
      border-radius: 0;
      border: 1px solid #cfd9e1;
    }

    html[data-theme="sonkei"] .btn,
    html[data-theme="sonkei"] button {
      border-radius: 4px;
      border: 1px solid #d7dee5;
      box-shadow: none;
      text-shadow: none;
      font-weight: 500;
    }

    html[data-theme="sonkei"] .btn-primary,
    html[data-theme="sonkei"] .bottom-nav-post {
      background: #ff9824;
      border-color: #e58a22;
      color: #fff;
    }

    html[data-theme="sonkei"] .btn-primary:hover,
    html[data-theme="sonkei"] .bottom-nav-post:hover {
      background: #ffad49;
      transform: none;
      box-shadow: none;
    }

    html[data-theme="sonkei"] .logo {
      color: #24b5cc;
      text-shadow: none;
      letter-spacing: 0;
      font-weight: 700;
    }

    html[data-theme="sonkei"] .logo span,
    html[data-theme="sonkei"] .section-title,
    html[data-theme="sonkei"] h1,
    html[data-theme="sonkei"] h2,
    html[data-theme="sonkei"] h3 {
      color: #24b5cc;
      text-shadow: none;
    }

    html[data-theme="sonkei"] a,
    html[data-theme="sonkei"] .link,
    html[data-theme="sonkei"] .tab.active {
      color: #1f8ff5;
    }

    html[data-theme="sonkei"] .news-item,
    html[data-theme="sonkei"] .novel-card,
    html[data-theme="sonkei"] .stat-card,
    html[data-theme="sonkei"] .modal-content,
    html[data-theme="sonkei"] .reader-content,
    html[data-theme="sonkei"] .writer-overlay-content,
    html[data-theme="sonkei"] .reader-settings-panel,
    html[data-theme="sonkei"] .search-box,
    html[data-theme="sonkei"] .form-control,
    html[data-theme="sonkei"] select {
      background: #fff;
      border: 1px solid #d7dee5;
      border-radius: 4px;
      box-shadow: none;
    }

    html[data-theme="sonkei"] .hero-banner-arrow {
      position: absolute;
      background: rgba(34, 183, 205, 0.92);
      color: #fff;
      border: none;
      border-radius: 2px;
      width: 34px;
      height: 34px;
      opacity: 0.9;
    }

    html[data-theme="sonkei"] .hero-banner-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      border: 1px solid #9fc2d6;
      background: #e7eef5;
      box-shadow: none;
    }

    html[data-theme="sonkei"] .hero-banner-dot.active {
      background: #2aa7eb;
      border-color: #2aa7eb;
      transform: scale(1.1);
    }


    html[data-theme="galakei"] body {
      background:
        linear-gradient(180deg, rgba(248, 251, 239, 0.85) 0%, rgba(226, 231, 214, 0.9) 100%),
        repeating-linear-gradient(0deg, rgba(56, 64, 50, 0.04) 0 1px, transparent 1px 3px);
      image-rendering: crisp-edges;
    }

    html[data-theme="galakei"] .header,
    html[data-theme="galakei"] .bottom-nav,
    html[data-theme="galakei"] .reader-topbar {
      background: linear-gradient(180deg, #f7faef 0%, #dce2ce 100%);
      border-bottom: 2px solid #6f7d65;
      box-shadow: inset 0 1px 0 #fcfff8, inset 0 -1px 0 #8b9980;
    }

    html[data-theme="galakei"] .logo,
    html[data-theme="galakei"] .logo span,
    html[data-theme="galakei"] .section-title,
    html[data-theme="galakei"] h1,
    html[data-theme="galakei"] h2,
    html[data-theme="galakei"] h3 {
      color: #2c3528;
      letter-spacing: 0.04em;
      text-shadow: 0 1px 0 rgba(245, 250, 234, 0.95);
    }

    html[data-theme="galakei"] .hero,
    html[data-theme="galakei"] .news-item,
    html[data-theme="galakei"] .novel-card,
    html[data-theme="galakei"] .stat-card,
    html[data-theme="galakei"] .modal-content,
    html[data-theme="galakei"] .reader-content,
    html[data-theme="galakei"] .writer-overlay-content,
    html[data-theme="galakei"] .reader-settings-panel,
    html[data-theme="galakei"] .search-box,
    html[data-theme="galakei"] .form-control,
    html[data-theme="galakei"] select {
      background: linear-gradient(180deg, #f5f8ed 0%, #e1e6d3 100%);
      border: 2px solid #7f8c74;
      box-shadow: inset 0 1px 0 rgba(251, 255, 246, 0.95), inset 0 -1px 0 rgba(123, 134, 111, 0.45);
    }

    html[data-theme="galakei"] .hero {
      border: 2px solid #717d67;
    }

    html[data-theme="galakei"] .btn,
    html[data-theme="galakei"] button {
      border-radius: 999px;
      border: 2px solid #5f6d55;
      background: linear-gradient(180deg, #f8fbf2 0%, #d2d9c2 100%);
      color: #2d3528;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(110, 124, 98, 0.55), 0 2px 4px rgba(56, 66, 50, 0.28);
      text-shadow: 0 1px 0 rgba(245, 250, 234, 0.9);
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    html[data-theme="galakei"] .btn:hover,
    html[data-theme="galakei"] button:hover {
      filter: brightness(1.03);
    }

    html[data-theme="galakei"] .btn:active,
    html[data-theme="galakei"] button:active {
      transform: translateY(1px);
      box-shadow: inset 0 2px 0 rgba(117, 130, 105, 0.6), inset 0 -1px 0 rgba(247, 251, 240, 0.95);
    }

    html[data-theme="galakei"] .btn-primary,
    html[data-theme="galakei"] .bottom-nav-post {
      background: linear-gradient(180deg, #78876e 0%, #59664f 100%);
      color: #f2f6e9;
      border-color: #4b5742;
      text-shadow: none;
    }

    html[data-theme="galakei"] .tab.active,
    html[data-theme="galakei"] a:hover,
    html[data-theme="galakei"] .link {
      color: #3f4a39;
      background: rgba(114, 127, 101, 0.17);
    }

    html[data-theme="galakei"] input,
    html[data-theme="galakei"] textarea,
    html[data-theme="galakei"] select {
      border-radius: 6px;
      font-size: 13px;
    }

    html[data-theme="galakei"] .hero-banner-dot {
      border-radius: 4px;
      border: 1px solid #6d7a63;
      background: #dce2ce;
      box-shadow: none;
    }

    html[data-theme="galakei"] .hero-banner-dot.active {
      background: #5d6b54;
      border-color: #4f5b47;
      transform: scale(1.05);
    }

    .nav {
      display: flex;
      gap: 2px;
      flex: 1;
      min-width: 0;
    }

    .nav a {
      font-size: 13px;
      color: var(--text-mid);
      padding: 6px 12px;
      border-radius: 6px;
      font-weight: 500;
      transition: all 0.18s;
      white-space: nowrap;
    }

    .nav a:hover {
      background: var(--accent-muted);
      color: var(--accent);
    }

    .nav a.active {
      background: var(--accent-muted);
      color: var(--accent);
    }

    .header-search {
      flex: 1 1 180px;
      max-width: 220px;
      position: relative !important;
    }

    .header-search input {
      width: 100%;
      padding: 6px 36px 6px 14px;
      border: 1.5px solid var(--border);
      border-radius: 20px;
      font-size: 16px;
      font-family: 'Noto Sans JP', sans-serif;
      background: var(--bg);
      color: var(--text);
      outline: none;
      transition: border-color 0.18s;
    }

    .header-search input:focus {
      border-color: var(--accent);
    }

    .header-search i {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-light);
      font-size: 13px;
    }

    .header-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
    }

    .mobile-kisekae-btn {
      display: none;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 16px;
      border-radius: 7px;
      font-size: 13px;
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.18s;
      border: none;
    }

    .btn-outline {
      background: transparent;
      border: 1.5px solid var(--border);
      color: var(--text-mid);
    }

    .btn-outline:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .btn-primary {
      background: var(--accent);
      color: var(--on-accent);
      box-shadow: 0 1px 3px rgba(217, 106, 75, 0.20);
    }

    html[data-theme] .btn-primary,
    html[data-theme] .novel-card-badge,
    html[data-theme] .new-badge,
    html[data-theme] .ep-sort-btn.active,
    html[data-theme] .tag-suggest-chip.checked,
    html[data-theme] .comment-sort-btn.active,
    html[data-theme] .message-tab-btn.active,
    html[data-theme] .notice-filter-btn.active {
      color: var(--on-accent) !important;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    }

    html[data-theme] .tag.genre,
    html[data-theme] .react-btn.active-bookmark,
    html[data-theme] .writer-tool-btn.active {
      color: var(--on-accent-muted);
    }

    .btn-primary:hover {
      background: var(--accent-light);
      box-shadow: 0 3px 10px rgba(217, 106, 75, 0.28);
      transform: translateY(-1px);
    }

    /* ── HERO ── */
    .hero {
      background: linear-gradient(135deg, #3E2220 0%, #7A3825 55%, #A85032 100%);
      padding: 10px 16px;
      position: relative;
      overflow: hidden;
      max-width: 100%;
      box-sizing: border-box;
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at top right, rgba(255, 200, 160, 0.14), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(30, 15, 10, 0.22), transparent 60%);
      pointer-events: none;
    }

    /* カルーセルのみの最小ヒーロー: ベース背景に溶け込ませる */
    .hero.hero--minimal {
      background: transparent;
      padding: 8px 16px 0;
    }

    .hero.hero--minimal::before {
      content: none;
    }

    .hero.hero--minimal .hero-banner-row {
      margin-top: 0;
    }

    .hero-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      align-items: center;
      position: relative;
      width: 100%;
      box-sizing: border-box;
    }

    .hero-banner-row {
      margin-top: 10px;
      position: relative;
      width: 100%;
      box-sizing: border-box;
    }

    .hero-copy-layout {
      display: flex;
      gap: 20px;
      align-items: center;
      justify-content: space-between;
    }

    .hero-copy-main {
      flex: 1 1 auto;
      min-width: 0;
      max-width: 520px;
    }

    .hero-copy-layout .hero-stats {
      margin-top: 6px;
      gap: 14px;
      flex-shrink: 0;
    }

    .hero-copy-layout .hero-stat {
      text-align: left;
    }

    .hero-copy-layout .hero-stat-header {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .hero-copy-layout .desktop-download-banner {
      margin-top: 0;
      flex: 0 1 360px;
      max-width: 360px;
    }

    .hero-text h1 {
      font-family: 'Noto Serif JP', serif;
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 8px;
    }

    .hero-text h1 em {
      font-style: normal;
      color: #E8A88C;
    }

    .hero-text p {
      color: rgba(255, 255, 255, 0.70);
      font-size: 12px;
      line-height: 1.6;
      margin-bottom: 12px;
      max-width: 380px;
    }

    .hero-stats {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-top: 20px;
    }

    .hero-social-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 50%;
      color: #fff;
      font-size: 18px;
      text-decoration: none;
      transition: all 0.2s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hero-social-link:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: #E8A88C;
      color: #E8A88C;
      transform: translateY(-2px);
    }

    .desktop-download-banner {
      display: none;
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 12px;
      background: linear-gradient(145deg, rgba(250, 249, 246, 0.96), rgba(245, 243, 237, 0.92));
      border: 1px solid rgba(255, 255, 255, 0.35);
      box-shadow: 0 10px 22px rgba(10, 25, 41, 0.15), 0 2px 5px rgba(10, 25, 41, 0.08);
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .desktop-download-copy {
      color: var(--text-mid);
      font-size: 12px;
      line-height: 1.5;
    }

    .desktop-download-copy small {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 5px;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--accent-muted);
      border: 1px solid rgba(217, 106, 75, 0.18);
      color: var(--accent);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .desktop-download-copy strong {
      color: var(--navy);
      font-size: 14px;
      display: block;
      margin-bottom: 2px;
      line-height: 1.45;
    }

    .desktop-download-note {
      display: inline-block;
      margin-top: 2px;
      color: #7b6f6b;
      font-size: 10px;
      line-height: 1.4;
    }

    .desktop-download-btn {
      flex-shrink: 0;
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: #fff;
      background: linear-gradient(180deg, var(--accent-light), var(--accent));
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      transition: all 0.18s;
      box-shadow: 0 4px 12px rgba(217, 106, 75, 0.26);
    }

    .desktop-download-btn:hover {
      background: linear-gradient(180deg, #ee947a, var(--accent-light));
      box-shadow: 0 6px 14px rgba(217, 106, 75, 0.34);
      transform: translateY(-1px);
    }

    /* 非通常テーマ: ヒーローカード内の文字潰れ対策 */
    html:is([data-theme="retro"], [data-theme="aero"], [data-theme="vaporwave"], [data-theme="kawaii"], [data-theme="boygame"], [data-theme="hacker"], [data-theme="sonkei"], [data-theme="galakei"], [data-theme="ascii"]) .hero-text h1,
    html:is([data-theme="retro"], [data-theme="aero"], [data-theme="vaporwave"], [data-theme="kawaii"], [data-theme="boygame"], [data-theme="hacker"], [data-theme="sonkei"], [data-theme="galakei"], [data-theme="ascii"]) .hero-stat strong,
    html:is([data-theme="retro"], [data-theme="aero"], [data-theme="vaporwave"], [data-theme="kawaii"], [data-theme="boygame"], [data-theme="hacker"], [data-theme="sonkei"], [data-theme="galakei"], [data-theme="ascii"]) .desktop-download-copy strong {
      color: var(--text) !important;
      text-shadow: none !important;
    }

    html:is([data-theme="retro"], [data-theme="aero"], [data-theme="vaporwave"], [data-theme="kawaii"], [data-theme="boygame"], [data-theme="hacker"], [data-theme="sonkei"], [data-theme="galakei"], [data-theme="ascii"]) .hero-text h1 em {
      color: var(--accent) !important;
      text-shadow: none !important;
    }

    html:is([data-theme="retro"], [data-theme="aero"], [data-theme="vaporwave"], [data-theme="kawaii"], [data-theme="boygame"], [data-theme="hacker"], [data-theme="sonkei"], [data-theme="galakei"], [data-theme="ascii"]) .hero-text p,
    html:is([data-theme="retro"], [data-theme="aero"], [data-theme="vaporwave"], [data-theme="kawaii"], [data-theme="boygame"], [data-theme="hacker"], [data-theme="sonkei"], [data-theme="galakei"], [data-theme="ascii"]) .hero-stat span,
    html:is([data-theme="retro"], [data-theme="aero"], [data-theme="vaporwave"], [data-theme="kawaii"], [data-theme="boygame"], [data-theme="hacker"], [data-theme="sonkei"], [data-theme="galakei"], [data-theme="ascii"]) .desktop-download-copy,
    html:is([data-theme="retro"], [data-theme="aero"], [data-theme="vaporwave"], [data-theme="kawaii"], [data-theme="boygame"], [data-theme="hacker"], [data-theme="sonkei"], [data-theme="galakei"], [data-theme="ascii"]) .desktop-download-copy small,
    html:is([data-theme="retro"], [data-theme="aero"], [data-theme="vaporwave"], [data-theme="kawaii"], [data-theme="boygame"], [data-theme="hacker"], [data-theme="sonkei"], [data-theme="galakei"], [data-theme="ascii"]) .desktop-download-note {
      color: var(--text-mid) !important;
      text-shadow: none !important;
    }

    html:is([data-theme="retro"], [data-theme="aero"], [data-theme="vaporwave"], [data-theme="kawaii"], [data-theme="boygame"], [data-theme="hacker"], [data-theme="sonkei"], [data-theme="galakei"], [data-theme="ascii"]) .hero-social-link {
      background: var(--surface2);
      color: var(--text);
      border-color: var(--border);
    }

    html:is([data-theme="retro"], [data-theme="aero"], [data-theme="vaporwave"], [data-theme="kawaii"], [data-theme="boygame"], [data-theme="hacker"], [data-theme="sonkei"], [data-theme="galakei"], [data-theme="ascii"]) .desktop-download-banner {
      background: var(--surface2);
      border-color: var(--border);
      box-shadow: var(--shadow-sm);
    }

    html:is([data-theme="retro"], [data-theme="aero"], [data-theme="vaporwave"], [data-theme="kawaii"], [data-theme="boygame"], [data-theme="hacker"], [data-theme="sonkei"], [data-theme="galakei"], [data-theme="ascii"]) .desktop-download-btn {
      background: var(--accent);
      color: var(--on-accent) !important;
      border-color: var(--border);
      text-shadow: none;
    }

    @media (min-width: 901px) {
      .desktop-download-banner {
        display: flex;
      }
    }

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

    .hero-stat strong {
      display: block;
      font-size: 32px;
      font-weight: 700;
      color: #E8A88C;
      font-family: 'Zen Maru Gothic', sans-serif;
      line-height: 1.2;
    }

    .hero-stat-header .hero-stat-icons {
      margin-top: 0;
    }

    .hero-stat span {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
      white-space: nowrap;
    }

    .hero-stat-icons {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .hero-score-gif {
      width: 36px;
      height: 36px;
      object-fit: cover;
      object-position: center;
      border-radius: 8px;
      border: none;
      box-shadow: none;
      display: block;
      transform: scaleX(-1);
      transform-origin: center;
      cursor: pointer;
    }



    .hero-banner-carousel {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: var(--radius);
      /* Use mask-image to fade opacity at the edges (left and right) */
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    }

    .hero-banner-track {
      display: flex;
      transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }

    .hero-banner-track.no-transition {
      transition: none;
    }

    .hero-banner-slide {
      flex: 0 0 var(--hero-banner-slide-pct, 33.3333%);
      max-width: var(--hero-banner-slide-pct, 33.3333%);
      padding: 0 4px;
      box-sizing: border-box;
    }

    .hero-banner-slide a {
      display: block;
      line-height: 0;
    }

    .novel-card-cover {
      height: 180px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      box-shadow: inset 4px 0 6px rgba(255, 255, 255, 0.4), inset -1px 0 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 2px 8px 0 0;
    }

    /* ダミー書影 (サムネなし): シンプルなフラットデザインに統一 */
    .book-placeholder {
      position: absolute;
      inset: 0;
      border-radius: 0;
      background: var(--book-main);
      pointer-events: none;
      overflow: hidden;
    }

    .book-placeholder::before,
    .book-placeholder::after {
      content: none;
    }

    .book-placeholder-emoji {
      position: absolute;
      right: 10px;
      bottom: 8px;
      font-size: 22px;
      color: rgba(255, 255, 255, 0.35);
      text-shadow: none;
      filter: grayscale(0.2);
      line-height: 1;
    }

    .book-placeholder--lg,
    .book-placeholder--md,
    .book-placeholder--sm,
    .book-placeholder--xs {
      height: auto;
    }

    .book-placeholder--sm .book-placeholder-emoji { font-size: 16px; }
    .book-placeholder--xs .book-placeholder-emoji { font-size: 14px; }

    .hero-banner-slide img {
      width: 100%;
      height: auto;
      object-fit: cover;
      border-radius: 6px;
      aspect-ratio: 16 / 9;
      transition: transform 0.2s;
    }

    .hero-banner-slide a:hover img {
      transform: scale(1.02);
    }

    .hero-banner-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: background 0.15s, opacity 0.15s;
      opacity: 0.7;
    }

    .hero-banner-carousel:hover .hero-banner-arrow {
      opacity: 1;
    }

    .hero-banner-arrow:hover {
      background: rgba(0, 0, 0, 0.75);
    }

    .hero-banner-arrow.prev {
      left: 10px;
    }

    .hero-banner-arrow.next {
      right: 10px;
    }

    .hero-banner-dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 8px;
    }

    .hero-banner-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.2s, transform 0.2s;
    }

    .hero-banner-dot.active {
      background: rgba(255, 255, 255, 0.9);
      transform: scale(1.25);
    }

    @media (max-width: 640px) {
      .hero-banner-slide {
        flex: 0 0 var(--hero-banner-slide-pct, 33.3333%);
        max-width: var(--hero-banner-slide-pct, 33.3333%);
      }

      .hero-banner-carousel::before,
      .hero-banner-carousel::after {
        width: 30px;
      }

      .hero-banner-arrow {
        width: 28px;
        height: 28px;
        font-size: 11px;
      }
    }

    /* ── TABS / GENRE BAR ── */
    .genre-bar {
      background: var(--surface);
      border-bottom: 2px solid var(--accent);
      padding: 0;
      position: sticky;
      top: 68px;
      z-index: 90;
      box-shadow: 0 2px 4px rgba(62, 53, 50, 0.08);
    }

    .genre-bar-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      gap: 0;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .genre-bar-inner::-webkit-scrollbar {
      display: none;
    }

    .genre-tab {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-light);
      border-bottom: 2.5px solid transparent;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.18s;
      flex-shrink: 0;
    }

    .genre-tab:hover {
      color: var(--accent);
      background: var(--accent-muted);
    }

    .genre-tab.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
      font-weight: 600;
      background: var(--accent-muted);
    }

    /* ── MAIN LAYOUT ── */
    .main-layout {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 16px;
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 24px;
      width: 100%;
      box-sizing: border-box;
    }

    main {
      min-width: 0;
      overflow: hidden;
      width: 100%;
    }

    /* 初期描画高速化: 画面外セクションは表示直前までレイアウト/描画を遅延 */
    /* ※ #featuredAreaOuter は first-view 近傍かつ hover で card が持ち上がるため、
       paint containment で上端クリップされる不具合を避けて除外している。 */
    .update-section,
    #newsFeedOuter,
    #tagCloudWrap,
    #desktopDownloadArea,
    .sidebar-card,
    .sidebar-box {
      content-visibility: auto;
      contain-intrinsic-size: 1px 460px;
    }

    /* ── SECTION HEADER ── */
    .section-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
      min-width: 0;
    }

    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-title h2 {
      font-family: 'Noto Serif JP', serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--navy);
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -0.01em;
    }

    /* accent-bar は廃止 (装飾の重複整理) */
    .accent-bar {
      display: none;
    }

    /* ── BREADCRUMB ── */
    .breadcrumb {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }

    .breadcrumb-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-light);
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none;
    }

    .breadcrumb-inner::-webkit-scrollbar { display: none; }

    .breadcrumb-inner a {
      color: var(--text-mid);
      text-decoration: none;
      transition: color 0.15s;
    }

    .breadcrumb-inner a:hover {
      color: var(--accent);
    }

    .breadcrumb-inner .bc-sep {
      color: var(--text-light);
      opacity: 0.6;
      font-size: 10px;
    }

    .breadcrumb-inner .bc-current {
      color: var(--text);
      font-weight: 600;
    }

    @media (max-width: 768px) {
      .breadcrumb-inner {
        padding: 8px 12px;
        font-size: 11px;
      }
    }

    /* R18 summary のトグル表示調整 */
    .r18-summary::-webkit-details-marker { display: none; }
    .r18-details[open] .r18-summary .fa-chevron-down {
      transform: rotate(180deg);
      transition: transform 0.2s ease;
    }
    .r18-summary .fa-chevron-down {
      transition: transform 0.2s ease;
    }

    .section-more {
      font-size: 12px;
      color: var(--accent);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: gap 0.18s;
    }

    .section-more:hover {
      gap: 7px;
    }

    /* ── NOVEL CARD (featured) ── */
    .featured-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 24px;
      width: 100%;
      min-width: 0;
    }

    .novel-card {
      background: var(--surface);
      border-radius: 14px;
      border: 1px solid var(--border);
      overflow: hidden;
      transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
                  box-shadow 0.22s ease,
                  border-color 0.22s ease;
      cursor: pointer;
      position: relative;
      box-shadow: none;
      display: flex;
      flex-direction: column;
    }

    .novel-card:hover {
      box-shadow: 0 12px 28px rgba(10, 25, 41, 0.10), 0 2px 6px rgba(10, 25, 41, 0.04);
      transform: translateY(-4px);
      border-color: transparent;
    }

    .novel-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: inset 0 0 0 1px transparent;
      transition: box-shadow 0.22s ease;
    }

    .novel-card:hover::after {
      box-shadow: inset 0 0 0 1px rgba(10, 25, 41, 0.06);
    }

    .novel-card-cover {
      height: 170px;
      overflow: hidden;
      position: relative;
      background-color: var(--navy);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .novel-card:hover .novel-card-cover {
      transform: scale(1.02);
    }

    .cover-gradient {
      position: absolute;
      inset: 0;
    }

    .cover-title-overlay {
      position: relative;
      z-index: 1;
      text-align: center;
      /* top を 48px に広げて左上 .novel-card-badge (top:12px + padding 4 8) との
         オーバーラップを回避。bottom/左右は維持。 */
      padding: 48px 12px 12px;
      width: 100%;
      box-sizing: border-box;
    }

    .cover-title-overlay h3 {
      font-family: 'Noto Serif JP', serif;
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      line-height: 1.4;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      display: -webkit-box;
      display: box;
      /* Standard property */
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      box-orient: vertical;
      /* Standard property */
      overflow: hidden;
      margin: 0;
    }

    .cover-title-overlay .cover-author {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.65);
      margin-top: 4px;
    }

    .novel-card-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      background: rgba(10, 10, 10, 0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #fff;
      font-size: 10px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 999px;
      z-index: 2;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .novel-card-badge.new {
      background: var(--green);
    }

    .novel-card-badge.complete {
      background: #8A7B6B;
    }

    .novel-card-badge.short {
      background: #3730A3;
    }

    .novel-card-body {
      padding: 14px 16px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .novel-card-body > * { margin: 0; }

    .novel-card-body .description {
      font-size: 12px;
      color: var(--text-mid);
      line-height: 1.65;
      display: -webkit-box;
      display: box;
      /* Standard property */
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      box-orient: vertical;
      /* Standard property */
      overflow: hidden;
      margin-bottom: 10px;
    }

    .novel-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 10px;
    }

    .tag {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 20px;
      background: var(--tag-bg);
      color: var(--text-mid);
      font-weight: 500;
    }

    .tag.genre {
      background: var(--accent-muted);
      color: var(--accent);
      font-weight: 600;
    }

    /* ── Sidebar SUPPORT CARD (Ko-fi) ── */
    /* margin-top はサイドバー統一ルール (.sidebar>*+* = 24px) に任せる */
    .sidebar-support-card {
      display: block;
      padding: 16px 16px 14px;
      background: linear-gradient(135deg, #FFF5F5 0%, #FFE5E4 100%);
      border: 1px solid #FFD1CF;
      border-radius: 14px;
      color: var(--text);
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .sidebar-support-card::before {
      content: "";
      position: absolute;
      top: -24px;
      right: -24px;
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 94, 91, 0.18) 0%, rgba(255, 94, 91, 0) 70%);
      pointer-events: none;
    }

    .sidebar-support-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(255, 94, 91, 0.18), 0 2px 6px rgba(10, 25, 41, 0.05);
      border-color: #FFB3AF;
    }

    .sidebar-support-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .sidebar-support-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      background: #FF5E5B;
      color: #fff;
      font-size: 16px;
      flex-shrink: 0;
      box-shadow: 0 4px 10px rgba(255, 94, 91, 0.35);
    }

    .sidebar-support-title strong {
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: #B72B28;
      line-height: 1.3;
    }

    .sidebar-support-title small {
      display: block;
      font-size: 11px;
      color: var(--text-mid);
      margin-top: 2px;
    }

    .sidebar-support-copy {
      font-size: 11.5px;
      line-height: 1.6;
      color: var(--text-mid);
      margin: 0 0 10px;
    }

    .sidebar-support-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      background: #FF5E5B;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      border-radius: 999px;
      transition: background 0.15s ease;
    }

    .sidebar-support-card:hover .sidebar-support-btn {
      background: #E04845;
    }

    /* ── Sidebar RECRUIT CARD (StudioYotogi) ── */
    /* margin-top はサイドバー統一ルール (.sidebar>*+* = 24px) に任せる */
    .sidebar-recruit-card {
      display: block;
      padding: 16px 16px 14px;
      background: linear-gradient(135deg, #F2F6FC 0%, #E3ECF7 100%);
      border: 1px solid #C8D6E8;
      border-radius: 14px;
      color: var(--text);
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .sidebar-recruit-card::before {
      content: "";
      position: absolute;
      top: -24px;
      right: -24px;
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(44, 74, 122, 0.14) 0%, rgba(44, 74, 122, 0) 70%);
      pointer-events: none;
    }

    .sidebar-recruit-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(44, 74, 122, 0.16), 0 2px 6px rgba(10, 25, 41, 0.05);
      border-color: #9FB6D4;
    }

    .sidebar-recruit-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .sidebar-recruit-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      background: var(--navy, #2C4A7A);
      color: #fff;
      font-size: 15px;
      flex-shrink: 0;
      box-shadow: 0 4px 10px rgba(44, 74, 122, 0.3);
    }

    .sidebar-recruit-title strong {
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: var(--navy, #1E3660);
      line-height: 1.3;
    }

    .sidebar-recruit-title small {
      display: block;
      font-size: 11px;
      color: var(--text-mid);
      margin-top: 2px;
      line-height: 1.4;
    }

    .sidebar-recruit-copy {
      font-size: 11.5px;
      line-height: 1.65;
      color: var(--text-mid);
      margin: 0 0 10px;
    }

    .sidebar-recruit-copy strong {
      color: var(--navy, #1E3660);
      font-weight: 700;
    }

    .sidebar-recruit-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      background: var(--navy, #2C4A7A);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      border-radius: 999px;
      transition: background 0.15s ease;
    }

    .sidebar-recruit-card:hover .sidebar-recruit-btn {
      background: #1E3660;
    }

    /* 人気タグ（サイドバー）: タグ名と件数が重ならないよう flex + gap で分離 */
    .tag.tag-pop {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 10px;
      line-height: 1.6;
    }

    .tag.tag-pop .tag-count {
      font-size: 9px;
      font-weight: 600;
      color: var(--text-light);
      background: rgba(0, 0, 0, 0.06);
      padding: 1px 6px;
      border-radius: 999px;
      line-height: 1.4;
    }

    .novel-card-meta {
      display: flex;
      gap: 14px;
      font-size: 11px;
      color: var(--text-light);
      align-items: center;
      border-top: 1px solid var(--border-light);
      padding-top: 10px;
      margin-top: auto;
      letter-spacing: 0.02em;
    }

    .novel-card-meta span i {
      opacity: 0.75;
    }

    .novel-card-meta span {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* ── LIST CARD (recent updates) ── */
    .novel-list {
      display: flex;
      flex-direction: column;
      gap: 1px;
      background: var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .novel-list-item {
      background: var(--surface);
      padding: 14px 16px;
      display: flex;
      gap: 14px;
      align-items: flex-start;
      transition: background 0.15s;
      cursor: pointer;
    }

    .novel-list-item:hover {
      background: var(--surface2);
    }

    .novel-list-rank {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
      background: var(--surface2);
      color: var(--text-mid);
    }

    .novel-list-rank.rank-1 {
      background: #FFD700;
      color: #7A5C00;
    }

    .novel-list-rank.rank-2 {
      background: #C0C0C0;
      color: #4A4A4A;
    }

    .novel-list-rank.rank-3 {
      background: #CD7F32;
      color: #fff;
    }


    /* Theme-safe status colors */
    .novel-card-badge.complete,
    .author-novel-badge.completed {
      background: var(--navy-mid);
      color: var(--surface);
    }

    .novel-card-badge.short,
    .author-novel-badge.short {
      background: var(--accent-muted);
      color: var(--navy);
    }

    .novel-list-rank.rank-3 {
      color: var(--surface);
    }

    html[data-theme="vaporwave"] .tag.genre,
    html[data-theme="hacker"] .tag.genre,
    html[data-theme="ascii"] .tag.genre {
      color: var(--text);
      background: var(--accent-muted);
    }

    .novel-list-cover-mini {
      width: 44px;
      height: 58px;
      border-radius: 2px 4px 4px 2px;
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 4px 0 6px rgba(255, 255, 255, 0.4), inset -1px 0 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.15);
    }

    .novel-list-info {
      flex: 1;
      min-width: 0;
    }

    .novel-list-info h3 {
      font-size: 14px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: 'Noto Serif JP', serif;
    }

    .novel-list-info .author {
      font-size: 11px;
      color: var(--text-light);
      margin-bottom: 6px;
    }

    .novel-list-info .stats {
      display: flex;
      gap: 12px;
      font-size: 11px;
      color: var(--text-light);
    }

    .novel-list-info .stats span {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    /* ── SIDEBAR ── */
    .sidebar>*+* {
      margin-top: 24px;
    }

    .sidebar-card {
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;
      box-shadow: var(--shadow-sm);
    }

    .sidebar-card-header {
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      background: var(--surface2);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sidebar-card-header h3 {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      font-family: 'Noto Sans JP', sans-serif;
    }

    .sidebar-card-header i {
      color: var(--accent);
      font-size: 14px;
    }

    /* 折りたたみ可能なサイドバーカード */
    .sidebar-collapsible > summary {
      cursor: pointer;
      list-style: none;
      user-select: none;
      transition: background 0.15s;
    }

    .sidebar-collapsible > summary::-webkit-details-marker { display: none; }
    .sidebar-collapsible > summary::marker { content: ''; }

    .sidebar-collapsible > summary:hover {
      background: var(--surface);
    }

    .sidebar-collapsible-header h3 {
      flex: 1;
    }

    .sidebar-collapsible-caret {
      margin-left: auto;
      font-size: 11px !important;
      color: var(--text-light) !important;
      transition: transform 0.2s ease;
    }

    .sidebar-collapsible[open] .sidebar-collapsible-caret {
      transform: rotate(180deg);
    }

    .ranking-list {
      padding: 8px 0;
    }

    .ranking-item {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      overflow: hidden;
      gap: 12px;
      padding: 10px 16px;
      transition: background 0.15s;
      cursor: pointer;
    }

    .ranking-item:hover {
      background: var(--bg);
    }

    .rank-num {
      font-size: 16px;
      font-weight: 700;
      width: 24px;
      text-align: center;
      flex-shrink: 0;
      font-family: 'Zen Maru Gothic', sans-serif;
      color: var(--text-light);
    }

    .rank-num.top {
      color: var(--gold);
    }

    .ranking-item-info {
      flex: 1;
      min-width: 0;
    }

    .ranking-item-info h4 {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 2px;
    }

    .ranking-item-info .meta-row {
      display: flex;
      gap: 8px;
      font-size: 10px;
      color: var(--text-light);
      align-items: center;
    }

    .ranking-change {
      font-size: 11px;
      flex-shrink: 0;
      font-weight: 700;
    }

    .ranking-change.up {
      color: var(--green);
    }

    .ranking-change.down {
      color: #C03030;
    }

    .ranking-change.same {
      color: var(--text-light);
    }

    /* ── GENRE GRID SIDEBAR ── */
    .genre-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }

    .genre-grid-item {
      background: var(--surface);
      padding: 10px 12px;
      cursor: pointer;
      transition: background 0.15s;
      display: flex;
      align-items: center;
      gap: 7px;
      border-bottom: 1px solid var(--border-light);
      border-right: 1px solid var(--border-light);
    }

    .genre-grid-item:nth-child(even) {
      border-right: none;
    }

    .genre-grid-item:nth-last-child(-n+2) {
      border-bottom: none;
    }

    .genre-grid-item:hover {
      background: var(--accent-muted);
    }

    .genre-grid-item .icon {
      font-size: 13px;
      color: var(--accent);
      display: flex;
      align-items: center;
      width: 18px;
    }

    .genre-grid-item .label {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-mid);
      white-space: normal;
      word-break: keep-all;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .genre-grid-item .count {
      font-size: 10px;
      color: var(--text-light);
      margin-top: 1px;
    }

    /* ── CTA BANNER ── */
    .cta-banner {
      background: var(--navy);
      border-radius: var(--radius);
      padding: 18px 14px;
      text-align: center;
      box-shadow: var(--shadow-md);
    }

    .cta-banner h3 {
      font-family: 'Zen Maru Gothic', sans-serif;
      font-size: 15px;
      color: #fff;
      margin-bottom: 6px;
    }

    .cta-banner p {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.6);
      margin-bottom: 14px;
      line-height: 1.6;
    }

    .cta-banner .btn-primary {
      width: 100%;
      justify-content: center;
      font-size: 13px;
    }

    /* ── NEW ARRIVALS ── */
    .update-section {
      margin-bottom: 32px;
    }

    .update-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .update-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 12px;
      display: flex;
      gap: 10px;
      cursor: pointer;
      transition: all 0.18s;
      overflow: hidden;
      min-width: 0;
      box-shadow: var(--shadow-sm);
    }

    .update-item:hover {
      box-shadow: var(--shadow-sm);
      transform: translateY(-1px);
      border-color: var(--accent);
    }

    .update-item-cover {
      width: 40px;
      height: 52px;
      border-radius: 2px 4px 4px 2px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      box-shadow: inset 4px 0 6px rgba(255, 255, 255, 0.4), inset -1px 0 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.15);
    }

    .update-item-info {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .update-item-info h4 {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 2px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
      font-family: 'Noto Serif JP', serif;
    }

    .update-item-info .chapter {
      font-size: 11px;
      color: var(--accent);
      font-weight: 500;
      margin-bottom: 3px;
    }

    .update-item-info .author {
      font-size: 10px;
      color: var(--text-light);
    }

    .new-badge {
      display: inline-block;
      background: var(--accent);
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 3px;
      margin-right: 4px;
      vertical-align: middle;
    }

    /* ── SUB-NAV BAR (なろう style) ── */
    .sub-nav {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }

    /* 通常テーマは元のオレンジ/白を明示 */
    html:not([data-theme]) .sub-nav,
    html[data-theme="default"] .sub-nav {
      background: #D96A4B;
    }

    .sub-nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
      display: flex;
      align-items: stretch;
      justify-content: space-between;
    }

    .sub-nav-links {
      display: flex;
      align-items: stretch;
      gap: 0;
    }

    .sub-nav-link {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 9px 14px;
      font-size: 12.5px;
      font-weight: 500;
      color: #fff;
      white-space: nowrap;
      cursor: pointer;
      transition: background 0.15s;
      border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    html:not([data-theme]) .sub-nav-link,
    html[data-theme="default"] .sub-nav-link {
      color: #fff;
    }

    html:not([data-theme]) .sub-nav-link:visited,
    html[data-theme="default"] .sub-nav-link:visited,
    html:not([data-theme]) .sub-nav-link:active,
    html[data-theme="default"] .sub-nav-link:active,
    html:not([data-theme]) .sub-nav-link:focus-visible,
    html[data-theme="default"] .sub-nav-link:focus-visible {
      color: #fff;
      background: rgba(255, 255, 255, 0.05);
    }

    html:not([data-theme]) .sub-nav-link:hover,
    html[data-theme="default"] .sub-nav-link:hover {
      background: rgba(255, 255, 255, 0.07);
      color: #fff;
    }

    .sub-nav-link:first-child {
      border-left: 1px solid rgba(255, 255, 255, 0.06);
    }

    .sub-nav-link:hover {
      background: var(--accent-muted);
      color: var(--accent);
    }

    .sub-nav-link i {
      font-size: 12px;
      opacity: 0.8;
    }

    .sub-nav-right {
      display: flex;
      align-items: center;
      gap: 0;
    }

    .sub-nav-right .sub-nav-link {
      border-right: none;
      border-left: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* ── HEADER STATS (なろう style) ── */
    .header-stats {
      display: flex;
      gap: 4px;
      align-items: center;
      font-size: 12px;
      color: var(--text-light);
      flex-shrink: 0;
    }

    .header-stats .stat-item {
      white-space: nowrap;
    }

    .header-stats .stat-num {
      color: var(--accent);
      font-weight: 700;
      font-size: 13px;
    }

    .header-stats .stat-sep {
      color: var(--border);
      margin: 0 4px;
    }

    /* ── NEWS FEED ── */
    .news-feed {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 18px 20px;
      margin-bottom: 32px;
      box-shadow: var(--shadow-sm);
    }

    .news-feed-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .news-feed-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 17px;
      font-weight: 700;
      color: var(--navy);
      font-family: 'Noto Serif JP', serif;
    }

    .news-feed-note {
      font-size: 11px;
      color: var(--text-light);
    }

    .news-feed-list {
      --news-card-height: 110px;
      --news-card-gap: 8px;
      max-height: calc(var(--news-card-height) * 1.5 + var(--news-card-gap));
      overflow-y: auto;
      display: grid;
      gap: var(--news-card-gap);
      padding-right: 4px;
    }

    .news-item {
      border: 1px solid var(--border-light);
      border-radius: var(--radius);
      background: var(--surface2);
      padding: 10px 12px;
      min-height: var(--news-card-height);
    }

    .news-item-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 4px;
    }

    .news-item-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      overflow-wrap: anywhere;
    }

    .news-item-date {
      font-size: 11px;
      color: var(--text-light);
      white-space: nowrap;
    }

    .news-item-body {
      font-size: 12px;
      color: var(--text-mid);
      line-height: 1.6;
      white-space: pre-wrap;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .news-item-empty {
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      padding: 16px;
      text-align: center;
      color: var(--text-light);
      font-size: 12px;
      background: var(--surface2);
    }

    /* ── FOOTER ── */
    .footer {
      background: #0A1929;
      color: rgba(255, 255, 255, 0.6);
      padding: 36px 20px 20px;
      margin-top: 32px;
    }

    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .footer-top {
      display: grid;
      grid-template-columns: 240px 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 32px;
    }

    .footer-brand .logo {
      font-size: 18px;
      margin-bottom: 10px;
      display: block;
      color: #E8A88C;
    }

    .footer-brand .logo span {
      color: #fff;
    }

    .footer-brand p {
      font-size: 12px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.45);
    }

    .footer-brand p {
      font-size: 12px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.45);
    }

    .footer-col h4 {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 14px;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .footer-col ul li a {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.45);
      transition: color 0.18s;
    }

    .footer-col ul li a:hover {
      color: var(--accent);
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-bottom span {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.3);
    }

    .footer-social {
      display: flex;
      gap: 14px;
    }

    .footer-social a {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.5);
      font-size: 13px;
      transition: all 0.18s;
    }

    .footer-social a:hover {
      background: var(--accent);
      color: #fff;
    }

    /* ── MODAL (読む) ── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 8000;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
    }

    .modal-overlay.open {
      display: flex;
    }

    #authModal {
      z-index: 13000;
    }

    .modal {
      background: var(--surface);
      border-radius: var(--radius-lg);
      width: 500px;
      max-width: min(500px, 92vw);
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: var(--shadow-lg);
      animation: modalIn 0.22s ease;
    }

    @keyframes modalIn {
      from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .modal-header {
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      background: var(--surface);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      /* スクロール時にモーダル本文の要素（transform/hover/ドロップダウン等）が
         タイトルに被らないように前面に出す */
      z-index: 20;
    }

    .modal-header h2 {
      font-family: 'Noto Serif JP', serif;
      font-size: 17px;
      font-weight: 700;
      color: var(--navy);
      line-height: 1.4;
      max-width: 380px;
    }

    .modal-close {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-light);
      font-size: 18px;
      padding: 2px;
      flex-shrink: 0;
      margin-left: 12px;
      transition: color 0.15s;
    }

    .modal-close:hover {
      color: var(--text);
    }

    .modal-body {
      padding: 20px 24px;
    }

    .modal-author {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .modal-author:hover {
      background: var(--surface2);
      border-radius: var(--radius);
      padding: 6px 8px;
      margin: -6px -8px 10px;
    }

    .modal-author .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }

    .modal-author .name {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
    }

    .modal-author .date {
      font-size: 11px;
      color: var(--text-light);
    }

    .modal-description {
      font-size: 13px;
      color: var(--text-mid);
      line-height: 1.8;
      margin-bottom: 16px;
      padding: 12px 14px 12px 16px;
      background: linear-gradient(to right, var(--accent) 0px, var(--accent) 3px, var(--bg) 3px);
      border-radius: 8px;
      border: none;
      white-space: pre-wrap;
    }

    .modal-stats {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
    }

    .modal-stat {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .modal-stat strong {
      font-size: 18px;
      font-weight: 700;
      color: var(--navy);
      font-family: 'Zen Maru Gothic', sans-serif;
    }

    .modal-stat span {
      font-size: 10px;
      color: var(--text-light);
    }

    .chapter-list h3 {
      font-size: 14px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 10px;
    }

    .chapter-list ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .chapter-list ul li a {
      display: flex;
      justify-content: space-between;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--text-mid);
      background: var(--bg);
      border-radius: 6px;
      transition: all 0.15s;
    }

    .chapter-list ul li a:hover {
      background: var(--accent-muted);
      color: var(--accent);
      padding-left: 18px;
    }

    .chapter-list ul li a span {
      font-size: 11px;
      color: var(--text-light);
    }

    .chapter-list-pager {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 8px;
    }

    .chapter-list-pager.open {
      display: flex;
    }

    .chapter-list-pager-btn {
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text-mid);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 10px;
      cursor: pointer;
      min-width: 72px;
    }

    .chapter-list-pager-btn:disabled {
      opacity: 0.45;
      cursor: default;
    }

    .chapter-list-pager-label {
      font-size: 11px;
      color: var(--text-light);
      text-align: center;
      flex: 1;
      line-height: 1.4;
    }

    .modal-actions {
      display: flex;
      gap: 12px;
      /* 主要CTA行はモーダル上部に配置。バナー群との間に少し、
         あらすじとの間にもう少し余白を取る */
      margin-top: 12px;
      margin-bottom: 20px;
    }

    .share-dropdown-wrap {
      position: relative;
    }

    .share-dropdown {
      position: absolute;
      bottom: calc(100% + 8px);
      right: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      display: flex;
      flex-direction: column;
      min-width: 160px;
      padding: 6px 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: all 0.2s ease;
      z-index: 100;
    }

    .share-dropdown.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .share-dropdown button {
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      padding: 10px 16px;
      font-size: 13px;
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: background 0.15s;
    }

    .share-dropdown button:hover {
      background: var(--surface2);
    }

    .share-dropdown button i.fa-x-twitter {
      color: #000;
    }

    .share-dropdown button i.fa-line {
      color: #00B900;
    }

    .share-dropdown button i.fa-link {
      color: var(--text-mid);
    }

    .dark .share-dropdown button i.fa-x-twitter {
      color: #fff;
    }

    .modal-actions .btn {
      flex: 1;
      justify-content: center;
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }

    .modal-actions .btn {
      flex: 1;
      justify-content: center;
    }

    /* ── MANIFESTO ── */
    .manifesto {
      background: var(--navy);
      padding: 0;
      overflow: hidden;
    }

    .manifesto-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 24px 20px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
    }

    .manifesto-block {
      padding: 20px 28px;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      position: relative;
    }

    .manifesto-block:last-child {
      border-right: none;
    }

    .manifesto-block .m-icon {
      font-size: 22px;
      margin-bottom: 10px;
    }

    .manifesto-block h3 {
      font-family: 'Zen Maru Gothic', sans-serif;
      font-size: 15px;
      color: #fff;
      margin-bottom: 8px;
    }

    .manifesto-block p {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.52);
      line-height: 1.75;
    }

    .manifesto-block .m-accent {
      color: #F08050;
      font-weight: 700;
    }

    /* ── MANIFESTO (collapsible in hero) ── */
    .manifesto-accordion {
      margin-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      padding-top: 8px;
    }

    .manifesto-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      color: rgba(255, 255, 255, 0.55);
      font-size: 12px;
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 500;
      transition: color 0.18s;
      user-select: none;
    }

    .manifesto-toggle:hover {
      color: rgba(255, 255, 255, 0.85);
    }

    .manifesto-toggle .toggle-icon {
      font-size: 10px;
      transition: transform 0.25s;
    }

    .manifesto-toggle.open .toggle-icon {
      transform: rotate(180deg);
    }

    .manifesto-body {
      padding-top: 0;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.4s ease, opacity 0.3s ease, padding-top 0.25s;
    }

    .manifesto-body.open {
      max-height: 600px;
      padding-top: 16px;
      opacity: 1;
    }

    .manifesto-block {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius);
      padding: 14px 16px;
    }

    .manifesto-block .m-icon {
      font-size: 18px;
      margin-bottom: 8px;
    }

    .manifesto-block h3 {
      font-family: 'Zen Maru Gothic', sans-serif;
      font-size: 13px;
      color: #fff;
      margin-bottom: 6px;
      line-height: 1.4;
    }

    .manifesto-block p {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.48);
      line-height: 1.7;
    }

    .manifesto-block .m-accent {
      color: #E8A88C;
      font-weight: 700;
    }

    /* operator note inside accordion */
    .op-note-inline {
      grid-column: 1 / -1;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-left: 3px solid var(--accent);
      border-radius: var(--radius);
      padding: 12px 16px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .op-note-inline .penguin {
      font-size: 22px;
      line-height: 1;
      flex-shrink: 0;
    }

    .op-note-inline p {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.55);
      line-height: 1.7;
    }

    .op-note-inline .sig {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.3);
      margin-top: 5px;
      font-style: italic;
    }

    @media (max-width: 900px) {
      .manifesto-body {
        grid-template-columns: 1fr;
      }
    }

    /* ── DUAL RANKING ── */
    .dual-ranking {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 28px;
      width: 100%;
      box-sizing: border-box;
    }

    .ranking-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      min-width: 0;
      width: 100%;
      box-shadow: var(--shadow-sm);
    }

    .ranking-panel-header {
      padding: 11px 14px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }

    .ranking-panel-header h3 {
      font-family: 'Noto Serif JP', serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--navy);
      line-height: 1.3;
    }

    .ranking-panel-header .rp-sub {
      font-size: 10px;
      color: var(--text-light);
      margin-top: 3px;
      line-height: 1.4;
    }

    .ranking-panel-header .rp-icon {
      font-size: 18px;
      flex-shrink: 0;
    }

    .ranking-panel-list {
      padding: 4px 0;
    }

    .rg-tab {
      font-size: 12px;
      padding: 4px 12px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-mid);
      cursor: pointer;
      font-weight: 500;
      transition: all .15s;
      white-space: nowrap;
    }

    .rg-tab:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .rg-tab.active {
      background: var(--accent-muted);
      color: var(--navy);
      border-color: var(--accent);
      font-weight: 700;
    }

    .rp-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      cursor: pointer;
      transition: background 0.15s;
    }

    .rp-item:hover {
      background: var(--bg);
    }

    .rp-rank {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
      background: var(--surface2);
      color: var(--text-mid);
    }

    .rp-rank.r1 {
      background: #FFD700;
      color: #7A5C00;
    }

    .rp-rank.r2 {
      background: #C0C0C0;
      color: #4A4A4A;
    }

    .rp-rank.r3 {
      background: #CD7F32;
      color: #fff;
    }

    .rp-info {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .rp-info h4 {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: 'Noto Serif JP', serif;
      margin-bottom: 2px;
    }

    .rp-info .rp-meta {
      font-size: 10px;
      color: var(--text-light);
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .rp-score {
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
      max-width: 56px;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rp-score.quality {
      color: #059669;
    }

    .rp-score.pv {
      color: var(--accent);
    }

    @media (max-width: 700px) {
      .dual-ranking {
        grid-template-columns: 1fr;
      }
    }


    .fade-in {
      animation: fadeIn 0.4s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── NOTICE BAR ── */
    .notice-bar {
      background: var(--accent-muted);
      border-bottom: 1px solid var(--border);
      padding: 8px 20px;
      font-size: 12px;
      color: var(--navy);
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
    }

    .notice-bar i {
      color: var(--accent);
    }

    /* ── QUALITY BADGE ── */
    .quality-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #D1FAE5;
      color: #065F46;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 4px;
      letter-spacing: 0.03em;
    }

    .anti-template-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--accent-muted);
      color: var(--accent);
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 4px;
      letter-spacing: 0.03em;
    }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #C8C4BC;
    }

    /* ── LOADING / SKELETON ── */
    .skeleton {
      background: var(--surface2);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
      border-radius: 6px;
    }

    @keyframes shimmer {
      0% {
        background-position: 200% 0;
      }

      100% {
        background-position: -200% 0;
      }
    }

    .sk-card {
      height: 220px;
      border-radius: var(--radius);
      margin-bottom: 0;
    }

    .sk-line {
      height: 14px;
      margin-bottom: 8px;
    }

    .sk-line.short {
      width: 60%;
    }

    /* ── EMPTY STATE ── */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-light);
    }

    .empty-state .empty-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }

    .empty-state h3 {
      font-size: 16px;
      color: var(--text-mid);
      margin-bottom: 8px;
    }

    .empty-state p {
      font-size: 13px;
      line-height: 1.7;
    }

    /* ── LIKE / BOOKMARK BUTTONS ── */
    .react-bar {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }

    .react-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 7px 14px;
      border-radius: 20px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-mid);
      cursor: pointer;
      transition: all 0.18s;
      font-family: 'Noto Sans JP', sans-serif;
      flex-shrink: 1;
      min-width: 0;
    }

    .react-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-muted);
    }

    .react-btn.active-like {
      background: #FEE9DC;
      border-color: #E8530A;
      color: #E8530A;
    }

    .react-btn.active-bookmark {
      background: var(--accent-muted);
      border-color: var(--accent);
      color: var(--accent);
    }

    .react-btn.loading {
      opacity: 0.6;
      pointer-events: none;
    }

    /* ── POST OVERLAY ── */
    /* ══ POST OVERLAY (作品管理画面) ══ */
    .post-overlay {
      display: none;
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2000;
      background: var(--bg);
      overflow: hidden;
      overflow-x: hidden;
      flex-direction: column;
    }

    .post-overlay.open {
      display: flex;
    }

    .post-header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 0 20px;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      z-index: 10;
      gap: 12px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      overflow-x: hidden;
    }

    .post-header h2 {
      font-family: 'Zen Maru Gothic', sans-serif;
      font-size: 17px;
      color: var(--navy);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
    }

    .post-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* 2ペインレイアウト */
    .post-body {
      display: flex;
      flex: 1;
      overflow: hidden;
      min-height: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    /* 左ペイン：作品リスト */
    .post-left {
      width: 280px;
      flex-shrink: 0;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      background: var(--surface);
      overflow: hidden;
    }

    .post-left-header {
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .post-left-header h3 {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-mid);
    }

    .post-novel-list {
      overflow-y: auto;
      flex: 1;
    }

    .post-novel-item {
      padding: 12px 16px;
      border-bottom: none;
      cursor: pointer;
      transition: background 0.12s;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .post-novel-item:hover {
      background: var(--surface2);
    }

    .post-novel-item.active {
      background: var(--accent-muted);
      border-left: 3px solid var(--accent);
      padding-left: 13px;
    }

    .post-novel-item-avatar {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #fff;
      font-weight: 700;
      flex-shrink: 0;
    }

    .post-novel-item-info {
      flex: 1;
      min-width: 0;
    }

    .post-novel-item-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .post-novel-item-meta {
      font-size: 11px;
      color: var(--text-light);
      margin-top: 2px;
    }

    /* 右ペイン：詳細・エピソード・フォーム */
    .post-right {
      flex: 1;
      min-width: 0;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 24px 28px 80px;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
    }

    /* 作品なし・選択前 */
    .post-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: var(--text-light);
      gap: 12px;
      font-size: 14px;
    }

    .post-empty i {
      font-size: 40px;
      color: var(--border);
    }

    /* 作品情報ヘッダー */
    .post-novel-header {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .post-novel-header-avatar {
      width: 52px;
      height: 52px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: #fff;
      font-weight: 700;
      flex-shrink: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .post-novel-header-info {
      flex: 1;
      min-width: 0;
    }

    .post-novel-header-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 4px;
      line-height: 1.4;
    }

    .post-novel-header-meta {
      font-size: 12px;
      color: var(--text-light);
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }

    .post-novel-desc {
      font-size: 12px;
      color: var(--text-mid);
      line-height: 1.7;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* エピソード一覧 */
    .post-episodes-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .post-episodes-header h3 {
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      flex-shrink: 0;
    }

    @media (max-width: 480px) {
      .post-episodes-header .btn-label-full {
        display: none;
      }

      .post-episodes-header .btn-label-short {
        display: inline !important;
      }
    }

    .post-episode-list {
      border: none;
      border-radius: 0;
      overflow: visible;
      margin-bottom: 24px;
    }

    .post-episode-list-drop-zone {
      height: 120px;
      border-top: 2px solid transparent;
      transition: border-color 0.1s;
    }

    .post-episode-list-drop-zone.drag-over-bottom {
      border-top: 2px solid var(--accent);
      background: var(--accent-muted);
    }

    .post-episode-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border-bottom: none;
      margin-bottom: 6px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    .post-episode-item.drag-over-top {
      border-top: 2px solid var(--accent);
    }

    .post-episode-item.drag-over-bottom {
      border-bottom: 2px solid var(--accent);
    }

    .post-episode-item.dragging {
      display: none;
    }

    .ep-drag-handle {
      cursor: grab;
      color: var(--text-light);
      padding: 2px 4px;
      flex-shrink: 0;
      touch-action: none;
    }

    .ep-drag-handle:active {
      cursor: grabbing;
    }

    @keyframes epSavePulse {

      0%,
      100% {
        box-shadow: 0 2px 8px rgba(212, 98, 42, 0.4);
      }

      50% {
        box-shadow: 0 2px 16px rgba(212, 98, 42, 0.75);
      }
    }

    .ep-sort-btn {
      font-size: 11px;
      padding: 3px 10px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: var(--surface2);
      color: var(--text-mid);
      cursor: pointer;
    }

    /* ── 章（ボリューム）管理 ── */
    .volume-section {
      margin-bottom: 6px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .volume-header-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      cursor: grab;
    }

    .volume-header-row:active {
      cursor: grabbing;
    }

    .volume-header-row.drag-over-top {
      border-top: 2px solid var(--accent);
    }

    .volume-header-row.drag-over-bottom {
      border-bottom: 2px solid var(--accent);
    }

    .volume-header-row.dragging {
      opacity: 0.4;
    }

    .volume-drag-handle {
      color: var(--text-light);
      font-size: 13px;
      flex-shrink: 0;
      cursor: grab;
    }

    .volume-title-text {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .volume-actions {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .volume-episodes {
      padding: 4px 0;
    }

    /* エピソードに章バッジを表示 */
    .ep-volume-badge {
      font-size: 10px;
      background: var(--surface2);
      color: var(--text-mid);
      border: 1px solid var(--border);
      padding: 1px 6px;
      border-radius: 10px;
      flex-shrink: 0;
    }

    /* 章未設定グループ */
    .volume-unassigned-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      color: var(--text-light);
      font-size: 12px;
      background: var(--bg);
      border-bottom: 1px dashed var(--border);
    }

    .ep-sort-btn.active {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
    }

    .post-episode-item:last-child {
      border-bottom: none;
    }

    .post-episode-num {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-light);
      width: 32px;
      flex-shrink: 0;
    }

    .post-episode-title {
      flex: 1;
      font-size: 13px;
      font-weight: 600;
      color: var(--navy);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .post-episode-date {
      font-size: 11px;
      color: var(--text-light);
      flex-shrink: 0;
    }

    /* スマホ用「← 作品一覧に戻る」ボタン（PCでは非表示） */
    .post-mobile-back {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 10px 14px 4px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent);
      font-family: 'Noto Sans JP', sans-serif;
      width: 100%;
    }

    .post-mobile-back i {
      font-size: 14px;
    }

    /* エピソード追加フォーム（インライン） */
    .post-chapter-form {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
    }

    .post-chapter-form h3 {
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }

    /* 新規作品フォーム */
    .post-new-novel-form {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
    }

    .post-new-novel-form h3 {
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }

    /* モバイル対応 */
    @media (max-width: 640px) {
      .post-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 220px;
      }

      .post-body {
        flex-direction: column;
      }

      .post-right {
        padding: 16px 16px 80px;
      }

      .post-novel-header {
        flex-direction: column;
        gap: 10px;
      }
    }

    .form-group {
      margin-bottom: 22px;
    }

    .form-group label {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 7px;
    }

    .form-group label .required {
      color: var(--accent);
      margin-left: 3px;
    }

    .form-group label .hint {
      font-weight: 400;
      color: var(--text-light);
      font-size: 11px;
      margin-left: 6px;
    }

    .form-control {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: 16px;
      font-family: 'Noto Sans JP', sans-serif;
      color: var(--text);
      background: var(--surface);
      transition: border-color 0.15s;
      outline: none;
    }

    .form-control:focus {
      border-color: var(--accent);
    }

    .form-control.error {
      border-color: #C03030;
    }

    textarea.form-control {
      resize: vertical;
      line-height: 1.7;
    }

    select.form-control {
      cursor: pointer;
    }

    .form-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 10px;
    }

    /* Thumbnail Upload */
    .thumbnail-upload-container {
      margin-top: 4px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .thumbnail-preview-box {
      width: 100px;
      height: 140px;
      background: var(--surface2);
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
    }

    .thumbnail-preview-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .thumbnail-preview-box i {
      font-size: 24px;
      color: var(--text-light);
    }

    .thumbnail-upload-controls {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .thumbnail-upload-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.18s;
      color: var(--text-mid);
    }

    .thumbnail-upload-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-muted);
    }

    .thumbnail-remove-btn {
      font-size: 11px;
      color: #C03030;
      background: none;
      border: none;
      cursor: pointer;
      text-decoration: underline;
      width: fit-content;
      margin-top: 4px;
    }

    .tag-input-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      cursor: text;
      min-height: 42px;
      align-items: center;
    }

    .tag-input-wrap:focus-within {
      border-color: var(--accent);
    }

    .tag-chip {
      display: flex;
      align-items: center;
      gap: 4px;
      background: var(--tag-bg);
      color: var(--text-mid);
      font-size: 12px;
      padding: 2px 8px 2px 10px;
      border-radius: 12px;
    }

    .tag-chip button {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-light);
      font-size: 12px;
      padding: 0;
      line-height: 1;
    }

    .tag-chip button:hover {
      color: var(--accent);
    }

    .tag-input {
      border: none;
      outline: none;
      font-size: 13px;
      font-family: 'Noto Sans JP', sans-serif;
      color: var(--text);
      min-width: 100px;
      flex: 1;
      background: transparent;
    }

    .tag-suggest-chip {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 11px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text-mid);
      cursor: pointer;
      user-select: none;
      transition: all 0.15s;
    }

    .tag-suggest-chip:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .tag-suggest-chip.checked {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    .tag-suggest-chip.disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .char-count {
      text-align: right;
      font-size: 11px;
      color: var(--text-light);
      margin-top: 4px;
    }

    .char-count.warn {
      color: #C08020;
    }

    .char-count.over {
      color: #C03030;
    }

    .submit-bar {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
      margin-top: 8px;
    }

    .form-error {
      background: #FFF0F0;
      border: 1px solid #F0C0C0;
      border-radius: var(--radius);
      padding: 12px 16px;
      font-size: 13px;
      color: #C03030;
      margin-bottom: 16px;
      display: none;
    }

    .form-success {
      background: #F0FFF4;
      border: 1px solid #A0D8AF;
      border-radius: var(--radius);
      padding: 16px 20px;
      font-size: 14px;
      color: #065F46;
      display: none;
      text-align: center;
    }

    .novel-select-list {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 16px;
      max-height: 300px;
      overflow-y: auto;
    }

    .novel-select-item {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 0.15s;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .novel-select-item:last-child {
      border-bottom: none;
    }

    .novel-select-item:hover {
      background: var(--accent-muted);
    }

    .novel-select-item.selected {
      background: var(--accent-muted);
    }

    .novel-select-item h4 {
      font-size: 14px;
      font-weight: 700;
      color: var(--navy);
    }

    .novel-select-item span {
      font-size: 11px;
      color: var(--text-light);
    }

    /* chapter content editor */
    .content-editor {
      min-height: 400px;
      font-size: 16px;
      line-height: 2;
    }

    /* ══ 共通執筆オーバーレイ ══ */
    .writer-tool-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 11px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      font-size: 12px;
      color: var(--text-mid);
      font-family: 'Noto Sans JP', sans-serif;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
      white-space: nowrap;
      line-height: 1.4;
      user-select: none;
    }

    .writer-tool-btn:hover:not(:disabled) {
      background: var(--accent-muted);
      border-color: var(--accent);
      color: var(--accent);
    }

    .writer-tool-btn.active {
      background: var(--accent-muted);
      border-color: var(--accent);
      color: var(--accent);
    }

    .writer-tool-btn:disabled {
      opacity: 0.38;
      cursor: default;
    }

    .writer-tool-btn.sel-req {
      /* 選択必須ボタン：選択なしでうっすら */
    }

    /* ツールバー区切り */
    .writer-sep {
      width: 1px;
      height: 18px;
      background: var(--border);
      margin: 0 4px;
      flex-shrink: 0;
    }

    /* ルビ表示（リーダー・プレビュー共通） */
    ruby rt {
      font-size: 0.55em;
    }

    /* 傍点 */
    .novel-dot {
      text-emphasis: filled circle;
      -webkit-text-emphasis: filled circle;
    }

    /* 区切り線 */
    .novel-divider {
      text-align: center;
      color: var(--text-light);
      letter-spacing: 0.5em;
      margin: 1.5em 0;
      user-select: none;
    }

    /* writerMsg */
    #writerMsg.success {
      background: #F0FFF4;
      color: #065F46;
      border-bottom: 1px solid #A0D8AF;
    }

    #writerMsg.error {
      background: #FFF0F0;
      color: #C03030;
      border-bottom: 1px solid #F0C0C0;
    }

    /* プレビュータブ */
    .writer-view-tab {
      padding: 0 16px;
      height: 36px;
      font-size: 12px;
      font-weight: 600;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      color: var(--text-light);
      font-family: 'Noto Sans JP', sans-serif;
      white-space: nowrap;
    }

    .writer-view-tab.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }

    /* ルビ入力モーダル */
    .ruby-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 6000;
      background: rgba(0, 0, 0, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .ruby-modal {
      background: var(--surface);
      border-radius: var(--radius-lg);
      width: 100%;
      max-width: 360px;
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }

    .ruby-modal-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
      font-weight: 700;
      color: var(--navy);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ruby-modal-body {
      padding: 20px;
    }

    .ruby-preview-box {
      text-align: center;
      font-size: 22px;
      line-height: 2.4;
      padding: 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 16px;
      min-height: 72px;
    }

    @media (max-width: 640px) {

      /* ── トップバー：PCボタン非表示、スマホ2行目表示 ── */
      .writer-topbar-actions-pc {
        display: none !important;
      }

      .writer-topbar-row2 {
        display: flex !important;
      }

      /* ── ツールバー：PC用要素を非表示、スマホ2段目を表示 ── */
      .writer-view-tab-pc {
        display: none !important;
      }

      .writer-sep-pc {
        display: none !important;
      }

      .writer-cheatsheet {
        display: none !important;
      }

      .toolbar-row2 {
        display: flex !important;
      }

      .writer-tool-btn {
        padding: 4px 8px;
        font-size: 11px;
      }

      #writerContent,
      #writerPreviewInner {
        padding: 16px;
      }
    }

    /* ── モバイルプレビューモーダル ── */
    .mobile-preview-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 7000;
      background: var(--bg);
      flex-direction: column;
      overflow: hidden;
    }

    .mobile-preview-modal.open {
      display: flex;
    }

    .mobile-preview-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 16px;
      height: 52px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      box-shadow: var(--shadow-sm);
    }

    .mobile-preview-close {
      background: none;
      border: none;
      cursor: pointer;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-mid);
      font-size: 18px;
      transition: background 0.15s;
      flex-shrink: 0;
    }

    .mobile-preview-close:hover {
      background: var(--surface2);
    }

    .mobile-preview-body {
      flex: 1;
      overflow-y: auto;
      padding: 24px 20px 40px;
      -webkit-overflow-scrolling: touch;
    }

    .mobile-preview-body-inner {
      font-size: 15px;
      line-height: 2.2;
      color: var(--text);
      max-width: 640px;
      margin: 0 auto;
    }

    /* ── TOAST ── */
    .toast-wrap {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 2147483647;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .toast {
      background: var(--navy);
      color: #fff;
      padding: 12px 18px;
      border-radius: var(--radius);
      font-size: 13px;
      box-shadow: var(--shadow-md);
      animation: toastIn 0.2s ease;
      max-width: 300px;
    }

    .toast.success {
      background: #065F46;
    }

    .toast.error {
      background: #8A1A1A;
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── RESPONSIVE ── */
    /* ══════════════════════════════════════════════════
     レスポンシブ（タブレット・スマホ対応）
  ══════════════════════════════════════════════════ */

    /* ─ タブレット（〜900px） ─ */
    @media (max-width: 900px) {
      .main-layout {
        grid-template-columns: 1fr;
        padding: 20px 16px;
      }

      .hero-inner {
        grid-template-columns: 1fr !important;
      }

      .hero-feature-cards {
        display: none !important;
      }

      .featured-grid {
        grid-template-columns: 1fr 1fr;
      }

      .footer-top {
        grid-template-columns: 1fr 1fr;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .header-search {
        flex: 1 1 160px;
        max-width: 200px;
      }

      .dual-ranking {
        grid-template-columns: 1fr 1fr;
      }

      .sidebar {
        display: contents;
      }

      .header-stats {
        display: none;
      }

      .sub-nav-right .sub-nav-link:last-child {
        display: none;
      }
    }

    /* ─ スマホ（〜600px） ─ */
    @media (max-width: 600px) {

      /* ヘッダー */
      .header-inner {
        padding: 0 12px;
        gap: 8px;
        height: 52px;
      }

      .logo {
        font-size: 22px;
      }

      .header-sub-text {
        display: none !important;
      }

      .nav {
        display: none;
      }

      .header-search {
        display: none;
      }

      .header-stats {
        display: none;
      }

      .header-actions {
        gap: 6px;
        flex-shrink: 0;
      }

      .header-actions .btn {
        padding: 5px 10px;
        font-size: 12px;
        gap: 3px;
      }

      #headerAuthBtn span,
      #headerMyPageBtn #headerUsername {
        display: none;
      }

      /* 投稿ボタンはアイコンのみ */
      .header-actions button[onclick="openPost()"] {
        padding: 7px 10px;
      }

      .header-actions button[onclick="openPost()"] .post-btn-text {
        display: none;
      }

      .mobile-kisekae-btn {
        display: inline-flex;
        padding: 7px 10px;
        font-size: 12px;
      }

      /* サブナビ */
      .sub-nav {
        display: none;
      }

      /* ジャンルバー */
      .genre-bar {
        padding: 0 !important;
        top: 52px;
      }

      .genre-bar-inner {
        padding: 0 8px !important;
      }

      .genre-tab {
        padding: 10px 8px;
        font-size: 11px;
        gap: 4px;
      }

      /* ヒーロー */
      .hero {
        padding: 8px 12px 8px;
      }

      .hero-inner {
        grid-template-columns: 1fr !important;
        padding: 0;
        gap: 6px;
      }

      .hero-banner-row {
        margin-top: 8px;
      }

      .hero-copy-layout {
        display: block;
      }

      .hero-copy-layout .hero-stats {
        margin-top: 8px;
        margin-bottom: 8px;
      }

      .hero-feature-cards {
        display: none !important;
      }

      .hero-text h1 {
        font-size: 15px;
        margin-bottom: 4px;
      }

      .hero-text p {
        font-size: 11px;
        margin-bottom: 8px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .hero-text>div[style*="display:flex"] {
        gap: 8px;
      }

      .hero-text>div[style*="display:flex"] .btn {
        font-size: 11px !important;
        padding: 6px 12px !important;
      }

      .hero-stats {
        gap: 12px;
        margin-top: 6px;
      }

      .hero-stat strong {
        font-size: 13px;
      }

      .hero-stat span {
        font-size: 10px;
      }

      .hero-score-gif {
        width: 36px;
        height: 36px;
      }

      .manifesto-accordion {
        margin-top: 6px;
        padding-top: 5px;
      }

      .manifesto-toggle {
        font-size: 10px;
      }

      /* news */
      .news-feed {
        padding: 12px !important;
        margin-bottom: 14px;
      }

      .news-feed-title {
        font-size: 14px;
      }

      .news-feed-list {
        --news-card-height: 104px;
      }

      /* main-layout */
      .main-layout {
        padding: 12px 12px 20px !important;
        gap: 14px;
      }

      /* セクション */
      .section {
        margin-bottom: 20px;
      }

      .section-header {
        margin-bottom: 10px;
      }

      .section-title h2 {
        font-size: 14px;
      }

      /* カード */
      .featured-grid {
        grid-template-columns: 1fr !important;
        gap: 8px;
      }

      .update-grid {
        grid-template-columns: 1fr !important;
        gap: 6px;
      }

      .dual-ranking {
        grid-template-columns: 1fr !important;
        gap: 10px;
      }

      /* novel-card */
      .novel-card {
        overflow: hidden;
      }

      .novel-card-cover {
        height: 80px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      .cover-title-overlay {
        padding: 24px 10px 10px;
      }

      .cover-title-overlay h3 {
        font-size: 14px;
        -webkit-line-clamp: 2;
      }

      .novel-card-body {
        padding: 8px 10px 10px;
      }

      .novel-card-body h3 {
        font-size: 12px;
      }

      .novel-card-meta {
        font-size: 10px;
        gap: 6px;
        flex-wrap: wrap;
      }

      /* update-item */
      .update-item {
        padding: 8px 10px;
      }

      .update-item-cover {
        width: 36px;
        height: 48px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      .update-item-info h4 {
        font-size: 12px;
      }

      /* ranking */
      .dual-ranking {
        padding: 0;
      }

      .ranking-panel {
        width: 100%;
        min-width: 0;
      }

      .ranking-panel-header {
        padding: 8px 10px;
      }

      .rp-item {
        padding: 7px 10px;
        min-width: 0;
        overflow: hidden;
      }

      .rp-info h4 {
        font-size: 11px;
      }

      .rp-meta {
        font-size: 10px;
        flex-wrap: wrap;
      }

      .rp-score {
        font-size: 10px;
        max-width: 40px;
      }

      /* sidebar */
      .sidebar-card {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
      }

      .sidebar-card-header {
        padding: 8px 12px;
      }

      .genre-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .genre-grid-item:nth-child(even) {
        border-right: none;
      }

      .genre-grid-item:nth-child(odd) {
        border-right: 1px solid var(--border-light);
      }

      .genre-grid-item:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--border-light);
      }

      .genre-grid-item:last-child {
        border-bottom: none;
      }

      /* 全体オーバーフロー防止 */
      .main-layout,
      main,
      aside {
        max-width: 100%;
        overflow: hidden;
      }

      /* ランキングコントロールのモバイル調整 */
      #rankingControlPanel {
        padding: 8px 12px;
      }

      .ranking-ctrl-row {
        gap: 8px;
        padding: 6px 0;
      }

      .ranking-ctrl-label {
        min-width: 42px;
        font-size: 10px;
      }

      .ranking-ctrl-btns {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
      }

      .ranking-ctrl-btns::-webkit-scrollbar {
        display: none;
      }

      .ranking-ctrl-btn {
        padding: 3px 10px;
        font-size: 11px;
      }

      .dual-ranking,
      .featured-grid,
      .update-grid {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
      }

      .ranking-panel {
        max-width: 100%;
        box-sizing: border-box;
      }

      .rp-item {
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
      }

      .rp-info {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        flex: 1;
      }

      .rp-info h4 {
        max-width: 100%;
      }

      .novel-card {
        max-width: 100%;
        box-sizing: border-box;
      }

      .update-item {
        max-width: 100%;
        box-sizing: border-box;
      }

      .news-feed {
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
      }

      /* タグは折り返し */
      #tagCloud {
        flex-wrap: wrap;
        max-width: 100%;
      }

      .tag {
        max-width: 100%;
      }

      /* CTA banner */
      .cta-banner {
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
      }

      /* CTA banner */
      .cta-banner {
        padding: 14px 14px 16px !important;
      }

      .cta-banner h3 {
        font-size: 14px;
      }

      /* モーダル */
      .modal-overlay {
        align-items: flex-end !important;
      }

      .modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 88vh !important;
        border-radius: 12px 12px 0 0 !important;
        margin: 0 !important;
      }

      .modal-header {
        padding: 12px 14px 10px;
      }

      .modal-header h2 {
        font-size: 13px;
        max-width: calc(100vw - 60px);
      }

      .modal-body {
        padding: 10px 14px;
      }

      .modal-stats {
        gap: 4px;
      }

      .modal-stat {
        flex: 1;
        padding: 7px 6px;
        min-width: 0;
      }

      .modal-stat strong {
        font-size: 15px;
      }

      .modal-stat span {
        font-size: 10px;
      }

      .modal-actions {
        flex-wrap: wrap;
        gap: 8px;
      }

      .react-btn {
        flex: 1;
        justify-content: center;
        padding: 7px 10px;
        font-size: 12px;
      }

      .chapter-list ul li a {
        font-size: 12px;
        padding: 9px 0;
      }

      /* 投稿 */
      .post-overlay {
        padding: 0 !important;
        inset: 0 0 calc(68px + env(safe-area-inset-bottom, 0px)) 0;
        height: auto;
      }

      .post-header {
        padding: 0 12px !important;
        height: 52px;
      }

      .post-header h2 {
        font-size: 14px !important;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* ヘッダーボタン：スマホでは「＋」アイコンのみ / 閉じるはアイコンのみ */
      .post-header-actions .btn-primary .btn-label-full {
        display: none;
      }

      .post-header-actions .btn-outline .btn-label-full {
        display: none;
      }

      .post-body {
        padding: 0 12px 80px !important;
        margin: 16px auto !important;
      }

      .post-tab {
        padding: 9px 8px;
        font-size: 12px;
      }

      .content-editor {
        min-height: 180px;
        font-size: 16px;
      }

      /* スマホ：2ペイン→シングルカラム遷移 */
      .post-body {
        display: block !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      .post-left {
        width: 100% !important;
        max-height: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border);
        height: auto !important;
        overflow: hidden !important;
        background: var(--surface) !important;
      }

      .post-novel-list {
        max-height: calc(100dvh - 52px - 1px - env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background: var(--surface) !important;
      }

      .post-right {
        padding: 16px 14px calc(110px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      /* 右ペイン表示中は左ペインを非表示 */
      .post-body.mobile-show-right .post-left {
        display: none !important;
      }

      .post-body.mobile-show-right .post-right {
        display: block !important;
      }

      /* 左ペイン表示中は右ペインを非表示 */
      .post-body:not(.mobile-show-right) .post-right {
        display: none !important;
      }

      .post-body:not(.mobile-show-right) {
        background: var(--surface) !important;
        min-height: 100dvh;
      }

      /* 戻るボタン（スマホ専用） */
      .post-mobile-back {
        display: flex !important;
      }

      /* フッター */
      .footer {
        padding: 24px 12px 16px !important;
      }

      .footer-top {
        grid-template-columns: 1fr !important;
        gap: 16px;
      }

      .footer-bottom {
        flex-direction: column;
        gap: 6px;
        text-align: center;
      }

      /* マニフェスト */
      .manifesto-inner {
        padding: 16px 12px !important;
        grid-template-columns: 1fr !important;
      }

      .manifesto-block {
        padding: 12px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .manifesto-block:last-child {
        border-bottom: none;
      }
    }

    /* ─ 極小スマホ（〜400px） ─ */
    @media (max-width: 400px) {
      .header-inner {
        padding: 0 8px;
        gap: 6px;
        height: 48px;
      }

      .logo {
        font-size: 15px;
      }

      .header-actions .btn {
        padding: 5px 8px;
        font-size: 11px;
      }

      .modal-stat strong {
        font-size: 13px;
      }

      .modal-actions .btn {
        padding: 6px 8px;
        font-size: 11px;
      }

      .main-layout {
        padding: 8px 8px 16px !important;
      }

      .genre-tab {
        padding: 9px 6px;
        font-size: 10px;
      }

      .hero {
        padding: 14px 8px;
      }

      .dual-ranking {
        gap: 8px;
      }
    }

    /* ─ 検索スマホ対応 ─ */
    @media (max-width: 640px) {
      .search-view-body {
        padding: 12px 12px 70px;
      }

      .search-sort-wrap {
        margin-left: 0;
      }

      .search-filters {
        gap: 6px;
      }
    }

    /* ══════════════════════════════════════════════════
     読書ビュー（全画面）
  ══════════════════════════════════════════════════ */
    #readerView {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 5000;
      background: var(--reader-bg, #FDFAF5);
      overflow-y: auto;
      animation: readerFadeIn 0.2s ease;
    }

    #readerView.open {
      display: block;
    }

    #readerView.rich-mode {
      overflow: hidden;
    }

    @keyframes readerFadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .reader-topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(253, 250, 245, 0.92);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 20px;
    }

    /* マイページタブ横スクロール時にスクロールバーを非表示 */
    .mypage-tab-bar::-webkit-scrollbar {
      display: none;
    }

    .reader-back-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-mid);
      font-size: 18px;
      padding: 6px 8px;
      border-radius: 6px;
      transition: background 0.15s, color 0.15s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .reader-back-btn:hover {
      background: var(--surface2);
      color: var(--accent);
    }

    .reader-topbar-title {
      flex: 1;
      font-size: 13px;
      color: var(--text-light);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .reader-topbar-title strong {
      color: var(--text-mid);
      font-weight: 500;
    }

    .reader-settings-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-light);
      font-size: 16px;
      padding: 6px 8px;
      border-radius: 6px;
      transition: background 0.15s;
    }

    .reader-settings-btn:hover {
      background: var(--surface2);
      color: var(--accent);
    }

    /* ─── しおりボタン ─── */
    .reader-bookmark-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-light);
      font-size: 16px;
      padding: 6px 8px;
      border-radius: 6px;
      transition: background 0.15s, color 0.15s;
    }

    .reader-bookmark-btn:hover {
      background: var(--surface2);
      color: var(--accent2);
    }

    .reader-bookmark-btn.bookmarked {
      color: var(--accent2);
    }

    .reader-bookmark-btn.bookmarked i {
      font-weight: 900;
    }

    /* ── 作品ページ：しおりバナー ── */
    .novel-reading-bookmark-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #EEF7FB;
      border: 1px solid #BEE0EE;
      border-radius: var(--radius);
      padding: 10px 14px;
      margin: 10px 0 4px;
      cursor: pointer;
      transition: background 0.15s;
    }

    .novel-reading-bookmark-bar:hover {
      background: #DDF0F8;
    }

    .novel-reading-bookmark-bar .rbm-icon {
      color: var(--accent2);
      font-size: 15px;
      flex-shrink: 0;
    }

    .novel-reading-bookmark-bar .rbm-text {
      flex: 1;
      font-size: 13px;
      font-weight: 600;
      color: var(--navy);
    }

    .novel-reading-bookmark-bar .rbm-sub {
      font-size: 11px;
      color: var(--text-light);
      font-weight: 400;
    }

    .novel-reading-bookmark-bar .rbm-arrow {
      color: var(--accent2);
      font-size: 12px;
      flex-shrink: 0;
    }

    /* ── 続きから読む（新着エピソード）バナー ── */
    .novel-reading-bookmark-bar.is-unread {
      background: #FDEFE8;
      border-color: #F4C9B6;
      margin-top: 6px;
    }

    .novel-reading-bookmark-bar.is-unread:hover {
      background: #FADFD2;
    }

    .novel-reading-bookmark-bar.is-unread .rbm-icon,
    .novel-reading-bookmark-bar.is-unread .rbm-arrow {
      color: var(--accent);
    }

    .novel-reading-bookmark-bar.is-unread .rbm-text {
      color: var(--accent);
    }

    /* ── マイページ：しおりカード ── */
    .reading-bm-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: box-shadow 0.15s, border-color 0.15s;
    }

    .reading-bm-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--accent2);
    }

    .reading-bm-card-left {
      flex: 1;
      min-width: 0;
    }

    .reading-bm-card-novel {
      font-size: 14px;
      font-weight: 700;
      color: var(--navy);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 3px;
    }

    .reading-bm-card-ep {
      font-size: 12px;
      color: var(--accent2);
      font-weight: 600;
    }

    .reading-bm-card-ep-title {
      font-size: 12px;
      color: var(--text-mid);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .reading-bm-card-meta {
      font-size: 11px;
      color: var(--text-light);
      margin-top: 3px;
    }

    .reading-bm-card-del {
      flex-shrink: 0;
      background: none;
      border: none;
      color: var(--text-light);
      cursor: pointer;
      padding: 6px;
      border-radius: 6px;
      font-size: 13px;
      transition: color 0.12s;
    }

    .reading-bm-card-del:hover {
      color: #C03030;
      background: #FEE2E2;
    }


    /* ══ 通知ドロワー ══ */
    .notif-overlay {
      position: fixed;
      inset: 0;
      z-index: 5200;
      background: rgba(0, 0, 0, 0.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }

    .notif-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .notif-drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(400px, 96vw);
      background: var(--bg);
      box-shadow: -4px 0 24px rgba(0, 0, 0, 0.14);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
    }

    .notif-overlay.open .notif-drawer {
      transform: translateX(0);
    }

    .notif-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
    }

    .notif-header-title {
      flex: 1;
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
    }

    .notif-read-all-btn {
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: none;
      color: var(--text-mid);
      cursor: pointer;
      transition: all 0.15s;
    }

    .notif-read-all-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .notif-close-btn {
      background: none;
      border: none;
      font-size: 18px;
      color: var(--text-light);
      cursor: pointer;
      padding: 4px 6px;
      border-radius: 6px;
      transition: background 0.15s;
    }

    .notif-close-btn:hover {
      background: var(--surface2);
      color: var(--navy);
    }

    .notif-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px 0;
    }


    @media (max-width: 760px) {
      .notif-overlay {
        z-index: 2800;
        background: transparent;
      }

      .notif-drawer {
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        width: 100vw;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        transform: translateY(100%);
      }

      .notif-overlay.open .notif-drawer {
        transform: translateY(0);
      }

      .notif-list {
        padding-bottom: 16px;
      }
    }

    .notif-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 12px 18px;
      border-bottom: 1px solid var(--border-light);
      cursor: pointer;
      transition: background 0.12s;
    }

    .notif-item:hover {
      background: var(--surface2);
    }

    .notif-item.unread {
      background: #FFF8F6;
    }

    .notif-item.unread:hover {
      background: #FDEEE9;
    }

    .notif-icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .notif-icon.like {
      background: #FEE2E2;
      color: #E05050;
    }

    .notif-icon.comment {
      background: #DBEAFE;
      color: #3B82F6;
    }

    .notif-icon.review {
      background: #FEF3C7;
      color: #D97706;
    }

    .notif-icon.rating {
      background: #F3F4F6;
      color: var(--gold);
    }

    .notif-icon.bookmark {
      background: #D1FAE5;
      color: #059669;
    }

    .notif-icon.follow {
      background: #FDEEEA;
      color: var(--accent);
    }

    .notif-body {
      flex: 1;
      min-width: 0;
    }

    .notif-novel {
      font-size: 12px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .notif-text {
      font-size: 12px;
      color: var(--text-mid);
      line-height: 1.5;
    }

    .notif-text em {
      color: var(--navy);
      font-style: normal;
      font-weight: 600;
    }

    .notif-meta {
      font-size: 10px;
      color: var(--text-light);
      margin-top: 3px;
    }

    .notif-unread-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
      margin-top: 6px;
    }

    .notif-empty {
      padding: 60px 24px;
      text-align: center;
      color: var(--text-light);
      font-size: 13px;
    }

    .notif-empty i {
      font-size: 32px;
      display: block;
      margin-bottom: 10px;
      opacity: 0.4;
    }

    /* ─── 星評価 ─── */
    .star-rating {
      display: inline-flex;
      gap: 3px;
      align-items: center;
    }

    .star-rating .star {
      font-size: 22px;
      cursor: pointer;
      color: #D4C4A0;
      transition: color 0.12s, transform 0.1s;
      line-height: 1;
      user-select: none;
    }

    .star-rating .star.filled {
      color: var(--gold);
    }

    .star-rating .star:hover,
    .star-rating .star.hover {
      color: var(--gold);
      transform: scale(1.15);
    }

    .star-rating.readonly .star {
      cursor: default;
      transform: none !important;
    }

    .star-rating.readonly .star:hover {
      transform: none;
    }

    .modal-related-section {
      padding: 16px 0 4px;
      border-top: 1px solid var(--border-light);
      margin-top: 8px;
    }

    .modal-related-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      margin: 0 0 12px;
      letter-spacing: .3px;
    }

    .modal-related-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .modal-related-item {
      display: flex;
      gap: 12px;
      padding: 10px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }

    .modal-related-item:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    }

    .modal-related-cover {
      flex-shrink: 0;
      width: 52px;
      height: 72px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 20px;
      overflow: hidden;
    }

    .modal-related-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 3px;
    }

    .modal-related-item-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-height: 1.4;
    }

    .modal-related-item-meta {
      font-size: 11px;
      color: var(--text-light);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .modal-related-item-stats {
      font-size: 11px;
      color: var(--text-mid);
    }

    .modal-rating-section {
      padding: 14px 0 10px;
      border-top: 1px solid var(--border-light);
      border-bottom: 1px solid var(--border-light);
      margin-bottom: 12px;
    }

    .modal-rating-avg {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .modal-rating-avg-num {
      font-size: 28px;
      font-weight: 700;
      color: var(--gold);
      line-height: 1;
    }

    .modal-rating-avg-sub {
      font-size: 11px;
      color: var(--text-light);
    }

    /* ─── レビュー ─── */
    .modal-reviews-section {
      padding-top: 4px;
    }

    .modal-reviews-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .modal-reviews-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .review-card {
      background: var(--surface2);
      border: 1px solid var(--border-light);
      border-radius: var(--radius);
      padding: 12px 14px;
      margin-bottom: 10px;
    }

    .review-card-header {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }

    .review-card-meta {
      font-size: 11px;
      color: var(--text-light);
      margin-left: auto;
      flex-shrink: 0;
    }

    .review-card-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 5px;
    }

    .review-card-body {
      font-size: 13px;
      color: var(--text-mid);
      line-height: 1.75;
      white-space: pre-wrap;
    }

    .fold-more-btn {
      margin-top: 6px;
      padding: 0;
      border: none;
      background: none;
      color: var(--accent);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }

    .review-delete-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-light);
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
      transition: color 0.15s;
    }

    .review-delete-btn:hover {
      color: #C03030;
    }

    .review-form {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
      margin-top: 10px;
    }

    .review-form textarea {
      width: 100%;
      padding: 8px 10px;
      border: 1.5px solid var(--border);
      border-radius: 6px;
      font-size: 13px;
      font-family: 'Noto Sans JP', sans-serif;
      background: var(--surface);
      color: var(--text);
      resize: vertical;
      min-height: 80px;
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.15s;
    }

    .review-form textarea:focus {
      border-color: var(--accent);
    }

    .review-form input[type="text"] {
      width: 100%;
      padding: 7px 10px;
      border: 1.5px solid var(--border);
      border-radius: 6px;
      font-size: 13px;
      font-family: 'Noto Sans JP', sans-serif;
      background: var(--surface);
      color: var(--text);
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.15s;
      margin-bottom: 8px;
    }

    .review-form input[type="text"]:focus {
      border-color: var(--accent);
    }

    /* ─── リアクション ─── */
    .reader-reactions-wrap {
      margin: 32px 0 24px;
      text-align: center;
    }

    .reader-reactions {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .reaction-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--bg);
      border: 1px solid transparent;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .reaction-btn:hover {
      background: #E5E7EB;
    }

    .reaction-btn.active {
      border-color: var(--accent);
      background: #EFF6FF;
    }

    .reaction-icon {
      font-size: 16px;
    }

    .reaction-count {
      color: var(--accent);
      font-size: 14px;
      font-weight: 500;
      font-family: 'Segoe UI', sans-serif;
    }

    .reaction-add-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
      padding: 5px 12px;
      color: var(--accent);
    }

    .reaction-add-btn:hover {
      border-color: var(--accent);
      background: #F0F9FF;
    }

    /* ─── エピソード感想（リーダー内） ─── */
    .ep-comments-section {
      max-width: 640px;
      margin: 28px auto 0;
      padding: 0 0 32px;
    }

    .ep-comments-heading {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    .ep-comment-card {
      padding: 10px 0;
      border-bottom: 1px solid var(--border-light);
    }

    .ep-comment-card:last-of-type {
      border-bottom: none;
    }

    .ep-comment-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .ep-comment-author {
      font-size: 12px;
      font-weight: 600;
      color: var(--navy);
    }

    .ep-comment-time {
      font-size: 11px;
      color: var(--text-light);
      margin-left: auto;
    }

    .ep-comment-body {
      font-size: 13px;
      color: var(--text-mid);
      line-height: 1.72;
      white-space: pre-wrap;
    }

    .author-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 1px 6px;
      border-radius: 999px;
      background: #DBEAFE;
      color: #1E40AF;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .02em;
    }


    .official-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 6px;
      font-size: 16px;
      line-height: 1;
      vertical-align: middle;
      position: relative;
      transform: translateY(-0.5px);
    }

    .official-badge i {
      background:
        radial-gradient(circle at 24% 18%, rgba(255, 252, 232, 0.95) 0 14%, rgba(255, 252, 232, 0) 38%),
        radial-gradient(circle at 78% 72%, rgba(130, 86, 18, 0.38) 0 25%, rgba(130, 86, 18, 0) 56%),
        linear-gradient(160deg,
          #FFFDF1 0%,
          #FBEFC2 11%,
          #F4D985 24%,
          #E2BA59 37%,
          #C79532 50%,
          #9B6C18 63%,
          #D6AE4F 75%,
          #FFEAB2 88%,
          #7A5111 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      filter: saturate(1.08) contrast(1.2) brightness(1.04) drop-shadow(0 0 1px rgba(255, 241, 196, 0.92)) drop-shadow(0 1px 0 rgba(124, 82, 16, 0.58));
      text-shadow:
        0 1px 0 rgba(255, 248, 220, 0.9),
        0 -1px 0 rgba(120, 79, 15, 0.68),
        1px 1px 0 rgba(152, 102, 24, 0.35),
        -1px -1px 0 rgba(255, 239, 184, 0.26);
    }

    .official-badge::after {
      content: none;
    }

    .comment-react-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      flex-wrap: wrap;
    }

    .comment-like-btn {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-mid);
      border-radius: 999px;
      padding: 3px 10px;
      font-size: 11px;
      cursor: pointer;
      transition: all .15s;
    }

    .comment-like-btn.active {
      border-color: #F59E0B;
      background: #FFFBEB;
      color: #B45309;
    }

    .author-reply-box {
      margin-top: 8px;
      margin-left: 16px;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #DBEAFE;
      background: #F8FBFF;
    }

    .author-reply-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
      font-size: 11px;
      color: var(--text-light);
    }

    .author-reply-body {
      font-size: 12px;
      color: var(--text-mid);
      line-height: 1.7;
      white-space: pre-wrap;
    }

    .ep-comment-delete {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-light);
      font-size: 10px;
      padding: 1px 4px;
      border-radius: 4px;
      transition: color 0.12s;
    }

    .ep-comment-delete:hover {
      color: #C03030;
    }

    .ep-comment-form {
      margin-top: 14px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
    }

    .ep-comment-form textarea {
      width: 100%;
      padding: 8px 10px;
      border: 1.5px solid var(--border);
      border-radius: 6px;
      font-size: 13px;
      font-family: 'Noto Sans JP', sans-serif;
      background: var(--surface);
      color: var(--text);
      resize: vertical;
      min-height: 70px;
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.15s;
    }

    .ep-comment-form textarea:focus {
      border-color: var(--accent);
    }

    /* ── アクセス解析オーバーレイ ── */
    #analyticsView {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 5800;
      background: var(--bg);
      overflow-y: auto;
      animation: readerFadeIn 0.18s ease;
    }

    #analyticsView.open {
      display: block;
    }

    .analytics-topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(250, 249, 246, 0.96);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
    }

    .analytics-topbar-title {
      flex: 1;
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .analytics-tabs {
      display: flex;
      gap: 2px;
      padding: 0 16px;
      border-bottom: 1px solid var(--border);
      background: #fff;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .analytics-tabs::-webkit-scrollbar {
      display: none;
    }

    .analytics-tab {
      padding: 10px 18px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-mid);
      border: none;
      background: none;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      transition: all 0.15s;
      font-family: 'Noto Sans JP', sans-serif;
    }

    .analytics-tab:hover {
      color: var(--accent);
    }

    .analytics-tab.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
      font-weight: 700;
    }

    .analytics-refresh-note {
      max-width: 1100px;
      margin: 8px auto 0;
      padding: 8px 12px;
      border-radius: 10px;
      background: #EEF7FB;
      border: 1px solid #CFE7F2;
      color: #2A6278;
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .analytics-refresh-note i {
      color: var(--accent2);
      font-size: 12px;
      flex-shrink: 0;
    }

    .analytics-body {
      max-width: 1100px;
      margin: 0 auto;
      padding: 20px 16px 80px;
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 16px;
      align-items: start;
    }

    .analytics-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .analytics-side {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .analytics-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 18px 20px;
    }

    .analytics-card-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .analytics-total-num {
      font-size: 32px;
      font-weight: 700;
      color: var(--accent);
      line-height: 1.1;
    }

    .analytics-total-unit {
      font-size: 14px;
      color: var(--text-light);
      margin-left: 4px;
    }

    .analytics-legend {
      display: flex;
      gap: 14px;
      font-size: 12px;
      color: var(--text-mid);
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .analytics-legend-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 2px;
      margin-right: 4px;
    }

    .analytics-chart-wrap {
      width: 100%;
      overflow-x: auto;
      position: relative;
    }

    #chartTooltip {
      position: fixed;
      z-index: 9999;
      background: var(--navy);
      color: #fff;
      font-size: 12px;
      font-family: 'Noto Sans JP', sans-serif;
      padding: 6px 11px;
      border-radius: 6px;
      pointer-events: none;
      white-space: nowrap;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.12s, transform 0.12s;
    }

    #chartTooltip.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .analytics-side-stat {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 0;
      border-bottom: 1px solid var(--border-light);
      font-size: 13px;
    }

    .analytics-side-stat:last-child {
      border-bottom: none;
    }

    .analytics-side-stat strong {
      font-weight: 700;
      color: var(--navy);
    }

    .analytics-rank-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 0;
      border-bottom: 1px solid var(--border-light);
      font-size: 12px;
    }

    .analytics-rank-item:last-child {
      border-bottom: none;
    }

    .analytics-rank-num {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-light);
      min-width: 18px;
      text-align: center;
    }

    .analytics-rank-num.top {
      color: var(--accent);
    }

    .analytics-rank-date {
      flex: 1;
      color: var(--text-mid);
    }

    .analytics-rank-count {
      font-weight: 700;
      color: var(--navy);
      white-space: nowrap;
    }

    .analytics-ep-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border-light);
      font-size: 12px;
    }

    .analytics-ep-item:last-child {
      border-bottom: none;
    }

    .analytics-ep-bar-wrap {
      flex: 1;
      background: var(--surface2);
      border-radius: 3px;
      height: 6px;
      overflow: hidden;
    }

    .analytics-ep-bar {
      height: 100%;
      background: var(--accent-light);
      border-radius: 3px;
      transition: width 0.4s;
    }

    .analytics-ep-count {
      font-weight: 700;
      color: var(--navy);
      min-width: 48px;
      text-align: right;
    }

    .analytics-loading {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-light);
      font-size: 13px;
      grid-column: 1 / -1;
    }

    /* ── LOADING SPINNER (anim.gif を CSS スピナーに置換) ── */
    .loading-gif-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-align: center;
      color: var(--text-light);
      font-size: 13px;
      padding: 20px;
    }

    .loading-gif-indicator--compact {
      gap: 8px;
      font-size: 12px;
      padding: 8px;
    }

    /* anim.gif は 1x1 透明 GIF に置換 (43 bytes)。CSS スピナーを円周で描画 */
    .loading-gif-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 3px solid var(--border-light);
      border-top-color: var(--accent);
      animation: kakippa-spin 0.8s linear infinite;
      background: transparent;
    }

    .loading-gif-indicator--compact .loading-gif-icon {
      width: 28px;
      height: 28px;
      border-width: 2.5px;
    }

    .loading-gif-inline {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .loading-gif-inline img {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid var(--border-light);
      border-top-color: var(--accent);
      animation: kakippa-spin 0.8s linear infinite;
      vertical-align: middle;
    }

    @keyframes kakippa-spin {
      to { transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .loading-gif-icon,
      .loading-gif-inline img {
        animation: none;
        opacity: 0.5;
      }
    }

    @media (max-width: 760px) {
      .analytics-body {
        grid-template-columns: 1fr;
      }
    }

    /* ── リーダー目次ドロワー ── */
    .reader-toc-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 5500;
      background: rgba(0, 0, 0, 0.38);
      backdrop-filter: blur(2px);
    }

    .reader-toc-overlay.open {
      display: block;
    }

    .reader-toc-drawer {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: min(340px, 88vw);
      background: var(--surface);
      box-shadow: 4px 0 24px rgba(10, 25, 41, 0.15);
      display: flex;
      flex-direction: column;
      transform: translateX(-100%);
      transition: transform 0.22s cubic-bezier(.4, 0, .2, 1);
    }

    .reader-toc-overlay.open .reader-toc-drawer {
      transform: translateX(0);
    }

    .reader-toc-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .reader-toc-header-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--navy);
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .reader-toc-close-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-light);
      font-size: 18px;
      padding: 4px 6px;
      border-radius: 6px;
      line-height: 1;
      transition: color 0.15s, background 0.15s;
    }

    .reader-toc-close-btn:hover {
      background: var(--surface2);
      color: var(--accent);
    }

    .reader-toc-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px 0 12px;
    }

    .reader-toc-pager {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 14px 12px;
      border-top: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
    }

    .reader-toc-pager.open {
      display: flex;
    }

    .reader-toc-pager-btn {
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text-mid);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 10px;
      cursor: pointer;
      min-width: 72px;
    }

    .reader-toc-pager-btn:disabled {
      opacity: 0.45;
      cursor: default;
    }

    .reader-toc-pager-label {
      font-size: 11px;
      color: var(--text-light);
      text-align: center;
      flex: 1;
      line-height: 1.4;
    }

    .reader-toc-vol {
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      padding: 10px 16px 4px;
      display: flex;
      align-items: center;
      gap: 5px;
      border-bottom: 1px solid var(--border-light);
      letter-spacing: 0.02em;
    }

    .reader-toc-item {
      display: flex;
      align-items: center;
      padding: 9px 16px;
      cursor: pointer;
      transition: background 0.14s;
      gap: 10px;
      border-bottom: 1px solid var(--border-light);
    }

    .reader-toc-item:hover {
      background: var(--surface2);
    }

    .reader-toc-item.active {
      background: var(--accent-muted);
    }

    .reader-toc-item.active .reader-toc-name {
      color: var(--accent);
      font-weight: 700;
    }

    .reader-toc-name {
      font-size: 13px;
      color: var(--text);
      flex: 1;
      line-height: 1.4;
    }

    .reader-toc-date {
      font-size: 10px;
      color: var(--text-light);
      flex-shrink: 0;
    }

    .reader-body {
      max-width: 680px;
      margin: 0 auto;
      padding: 48px 24px 80px;
    }

    .reader-body.rich-mode {
      max-width: none;
      margin: 0;
      padding: 0;
      height: calc(100dvh - 52px);
      overflow: hidden;
      touch-action: pan-x;
    }

    .reader-body.rich-mode #readerContent {
      height: 100%;
    }

    .reader-chapter-label {
      font-size: 12px;
      color: var(--text-light);
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }

    .reader-chapter-title {
      font-family: 'Noto Serif JP', serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--navy);
      line-height: 1.5;
      margin-bottom: 40px;
      padding-bottom: 24px;
      border-bottom: 2px solid var(--border);
    }

    .reader-content {
      font-family: 'Noto Serif JP', serif;
      font-size: var(--reader-font-size, 17px);
      line-height: 2.2;
      color: var(--text);
      word-break: break-all;
    }

    .reader-content p {
      margin-bottom: 1.4em;
    }

    /* ルビ風インデント */
    .reader-content ruby rt {
      font-size: 0.5em;
    }

    .reader-divider {
      text-align: center;
      margin: 48px 0;
      color: var(--text-light);
      letter-spacing: 0.3em;
      font-size: 13px;
    }

    /* ── iOS Safari 自動ズーム防止
          font-size < 16px のフォームにフォーカスするとズームされるため
          スマホ幅では全 input / textarea / select を最低 16px に固定 ── */
    @media (max-width: 768px) {

      input,
      textarea,
      select {
        font-size: 16px !important;
      }
    }

    /* ── エディタ：前書き・本文・あとがき 直列レイアウト ── */
    .writer-section-wrap {
      padding: 20px 32px 0;
      flex-shrink: 0;
    }

    .writer-section-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .writer-section-hint {
      font-size: 11px;
      font-weight: 400;
      color: var(--text-light);
    }

    .writer-section-toggle {
      margin-left: auto;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-mid);
      border-radius: 999px;
      font-size: 11px;
      padding: 2px 10px;
      cursor: pointer;
      font-family: inherit;
    }

    .writer-section-toggle:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .writer-section-ta {
      width: 100%;
      box-sizing: border-box;
      resize: vertical;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      outline: none;
      padding: 12px 14px;
      font-size: 14px;
      line-height: 2;
      font-family: 'Noto Sans JP', sans-serif;
      color: var(--text);
      background: var(--bg);
      min-height: 80px;
    }

    .writer-section-ta:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(180, 60, 40, .08);
    }

    .writer-section-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 32px 0;
      flex-shrink: 0;
    }

    .writer-section-divider::before,
    .writer-section-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .writer-section-divider span {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-light);
      letter-spacing: 0.1em;
      white-space: nowrap;
    }

    .writer-content-ta {
      flex: 1;
      flex-shrink: 0;
      resize: none;
      border: none;
      border-left: 1px solid transparent;
      outline: none;
      padding: 20px 32px;
      font-size: 16px;
      line-height: 2.2;
      font-family: 'Noto Sans JP', sans-serif;
      color: var(--text);
      background: var(--bg);
      min-height: 420px;
      width: 100%;
      box-sizing: border-box;
    }

    #writerEditorPane.afterword-collapsed .writer-content-ta {
      min-height: calc(100dvh - 260px);
    }

    #writerEditorPane.afterword-collapsed #writerAfterwordDivider {
      display: none;
    }

    .writer-content-ta:focus {
      border-left-color: var(--accent);
    }

    @media (max-width: 600px) {
      .writer-section-wrap {
        padding: 14px 16px 0;
      }

      .writer-section-divider {
        padding: 12px 16px 0;
      }

      .writer-content-ta {
        padding: 16px;
        min-height: 300px;
      }
    }

    .reader-foreword,
    .reader-afterword {
      font-size: 13px;
      line-height: 2;
      color: var(--text-mid);
      background: var(--surface);
      border-left: 3px solid var(--border);
      padding: 12px 18px;
      border-radius: 0 var(--radius) var(--radius) 0;
      margin-bottom: 32px;
    }

    .reader-afterword {
      margin-top: 40px;
      margin-bottom: 0;
      border-left-color: var(--accent);
    }

    .reader-foreword::before {
      content: '前書き';
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--text-light);
      margin-bottom: 6px;
    }

    .reader-afterword::before {
      content: 'あとがき';
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--accent);
      margin-bottom: 6px;
    }

    .reader-nav {
      display: flex;
      gap: 12px;
      margin-top: 60px;
      padding-top: 32px;
      border-top: 1px solid var(--border);
    }

    .reader-nav-btn {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      font-size: 13px;
      color: var(--text-mid);
      transition: all 0.15s;
      font-family: inherit;
      text-decoration: none;
    }

    .reader-nav-btn:hover:not(:disabled) {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-muted);
    }

    .reader-nav-btn:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .reader-nav-btn.next {
      justify-content: flex-end;
      text-align: right;
    }

    .reader-nav-btn .nav-label {
      font-size: 11px;
      color: var(--text-light);
      display: block;
      margin-bottom: 2px;
    }

    .reader-nav-btn .nav-title {
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 240px;
      display: block;
    }

    .reader-nav-btn>div {
      min-width: 0;
      flex: 1;
    }

    /* ── この作品を読んだ人はこれも読んでます ── */
    .reader-recommendations {
      margin: 32px auto 0;
      max-width: 640px;
      padding: 0 0 40px;
    }

    .reader-rec-heading {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-light);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .reader-rec-heading::before,
    .reader-rec-heading::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .reader-rec-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .reader-rec-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      cursor: pointer;
      transition: all 0.18s;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .reader-rec-card:hover {
      border-color: var(--accent-light);
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
    }

    .reader-rec-genre {
      font-size: 10px;
      color: var(--accent);
      font-weight: 600;
      letter-spacing: 0.03em;
    }

    .reader-rec-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      line-height: 1.45;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .reader-rec-author {
      font-size: 11px;
      color: var(--text-light);
      margin-top: 2px;
    }

    .reader-rec-meta {
      display: flex;
      gap: 8px;
      font-size: 11px;
      color: var(--text-light);
      margin-top: 4px;
    }

    @media (max-width: 480px) {
      .reader-rec-grid {
        grid-template-columns: 1fr;
      }
    }

    /* 設定パネル */
    .reader-settings-panel {
      display: none;
      position: fixed;
      top: 52px;
      right: 16px;
      z-index: 6000;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: var(--shadow-md);
      width: 290px;
    }

    .reader-settings-panel.open {
      display: block;
    }

    .reader-settings-panel h4 {
      font-size: 12px;
      color: var(--text-light);
      margin-bottom: 12px;
      letter-spacing: 0.05em;
    }

    .reader-setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      font-size: 13px;
      color: var(--text-mid);
    }

    .reader-font-btns {
      display: flex;
      gap: 6px;
    }

    .reader-font-btns button {
      border: 1px solid var(--border);
      background: var(--surface2);
      border-radius: 6px;
      padding: 4px 10px;
      cursor: pointer;
      font-size: 13px;
      font-family: inherit;
      transition: all 0.12s;
    }

    .reader-font-btns button:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .reader-bg-btns {
      display: flex;
      gap: 6px;
    }

    .reader-bg-btn {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 2px solid var(--border);
      cursor: pointer;
      transition: border-color 0.12s;
    }

    .reader-bg-btn:hover,
    .reader-bg-btn.active {
      border-color: var(--accent);
    }

    /* 文字サイズ表示 */
    .reader-font-size-display {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      min-width: 38px;
      text-align: center;
      padding: 4px 6px;
      background: var(--surface2);
      border-radius: 6px;
      border: 1px solid var(--border);
    }

    .reader-font-reset-btn {
      border: 1px solid var(--border);
      background: var(--surface2);
      border-radius: 6px;
      padding: 4px 8px;
      cursor: pointer;
      font-size: 11px;
      font-family: inherit;
      color: var(--text-mid);
      transition: all 0.12s;
      white-space: nowrap;
    }

    .reader-font-reset-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* 縦書きトグルボタン */
    .reader-vertical-btn {
      border: 1.5px solid var(--border);
      background: var(--surface2);
      border-radius: 6px;
      padding: 5px 10px;
      cursor: pointer;
      font-size: 12px;
      font-family: inherit;
      color: var(--text-mid);
      transition: all 0.15s;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .reader-vertical-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .reader-vertical-btn.active {
      background: var(--accent-muted);
      border-color: var(--accent);
      color: var(--accent);
      font-weight: 600;
    }

    .reader-rich-btn {
      border: 1.5px solid var(--border);
      background: var(--surface2);
      border-radius: 999px;
      padding: 5px 12px;
      cursor: pointer;
      font-size: 12px;
      font-family: inherit;
      color: var(--text-mid);
      transition: all 0.16s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 84px;
      justify-content: center;
    }

    .reader-rich-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .reader-rich-btn.active {
      background: var(--accent-muted);
      border-color: var(--accent);
      color: var(--accent);
      font-weight: 700;
    }

    .reader-rich-quick-btn {
      height: 30px;
      border-radius: 999px;
      border: 1.5px solid var(--border);
      background: var(--surface2);
      color: var(--text-mid);
      padding: 0 11px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      transition: all 0.16s;
      white-space: nowrap;
    }

    .reader-rich-quick-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .reader-rich-quick-btn.active {
      border-color: var(--accent);
      background: var(--accent-muted);
      color: var(--accent);
    }

    .reader-rich-shell {
      margin: 8px 0 12px;
    }

    .reader-body.rich-mode .reader-rich-shell {
      margin: 0;
      height: 100%;
    }

    .reader-rich-stage {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: stretch;
      height: 100%;
      padding: 10px 18px 14px;
      box-sizing: border-box;
      overflow: visible;
    }

    .reader-rich-book {
      width: min(100%, 980px);
      height: 100%;
      margin: 0 auto;
      position: relative;
      border-radius: 12px;
      overflow: visible;
      box-shadow: 0 10px 26px rgba(58, 41, 29, 0.12), 0 3px 10px rgba(58, 41, 29, 0.08);
      background:
        radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.66) 0 24%, transparent 58%),
        radial-gradient(circle at 82% 78%, rgba(234, 221, 204, 0.28) 0 23%, transparent 58%),
        linear-gradient(135deg, #f2eadd 0%, #ece2d4 100%);
    }


    .reader-rich-book div.monelem_container {
      background: transparent !important;
      width: 100% !important;
      height: 100% !important;
    }

    .reader-rich-book div.monelem_page {
      border-right: none !important;
      background: #fbf7ef !important;
      box-shadow: none !important;
      overflow: hidden !important;
    }

    .reader-rich-book div.monelem_sheaf {
      top: 0.85em !important;
      left: 0.95em !important;
      right: 0.95em !important;
      bottom: 0.85em !important;
      overflow: hidden !important;
    }

    .reader-rich-book iframe.monelem_component {
      width: 100% !important;
      height: 100% !important;
      background: #fbf7ef !important;
    }

    .reader-rich-book .turn-page {
      background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.6) 0 22%, transparent 58%),
        linear-gradient(180deg, #fdf9f1 0%, #f8f1e6 100%);
      border: none;
      box-shadow: none;
      pointer-events: none;
    }

    .reader-rich-book .turn-page-wrapper {
      pointer-events: none;
    }

    .reader-rich-sheet {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: linear-gradient(180deg, #fcf8ef 0%, #f8f2e8 100%);
    }

    .reader-rich-sheet::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      left: 0;
      background: rgba(179, 157, 131, 0.45);
      pointer-events: none;
    }

    .reader-rich-sheet::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg,
          rgba(134, 104, 74, 0.07) 0%,
          rgba(134, 104, 74, 0.03) 14%,
          rgba(134, 104, 74, 0.015) 35%,
          rgba(134, 104, 74, 0.03) 64%,
          rgba(134, 104, 74, 0.065) 100%),
        repeating-linear-gradient(90deg,
          transparent 0 32px,
          rgba(109, 79, 53, 0.04) 32px 34px,
          transparent 34px 62px,
          rgba(109, 79, 53, 0.03) 62px 64px);
      mix-blend-mode: multiply;
      opacity: 0.35;
    }

    .reader-rich-paper-grain {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.22;
      mix-blend-mode: multiply;
    }

    .reader-rich-bleed {
      position: absolute;
      inset: 14px 12px 18px;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      direction: ltr;
      font-family: 'Noto Serif JP', serif;
      font-size: var(--reader-rich-font, 16px);
      line-height: 1.95;
      letter-spacing: 0.04em;
      color: rgba(110, 86, 64, 0.09);
      transform: scaleX(-1);
      filter: blur(0.85px);
      opacity: 0.34;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.42) 30%, rgba(0, 0, 0, 0.15));
      -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.42) 30%, rgba(0, 0, 0, 0.15));
    }

    .reader-rich-bleed p {
      margin-bottom: 1.15em;
    }

    .reader-rich-turn-page {
      position: absolute;
      inset: 14px 12px 18px;
      z-index: 2;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      direction: ltr;
      font-family: 'Noto Serif JP', serif;
      font-size: var(--reader-rich-font, 16px);
      line-height: 1.95;
      letter-spacing: 0.04em;
      color: var(--text);
      overflow: visible;
      padding-bottom: 10px;
    }


    .reader-rich-turn-page .reader-content {
      margin: 0;
      color: inherit;
      font-size: inherit;
      line-height: inherit;
      word-break: break-all;
    }

    .reader-rich-turn-page p {
      margin-bottom: 1.15em;
    }

    .reader-rich-turn-page ruby rt {
      font-size: 0.48em;
    }

    .reader-rich-turn-page .reader-foreword,
    .reader-rich-turn-page .reader-afterword {
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      color: inherit;
      font-size: inherit;
      line-height: inherit;
    }

    .reader-rich-turn-page .reader-foreword::before,
    .reader-rich-turn-page .reader-afterword::before {
      display: none;
    }

    .reader-rich-section-label {
      font-size: 11px;
      color: #876542;
      letter-spacing: 0.12em;
      margin-left: 0.4em;
      margin-bottom: 0.8em;
      font-weight: 700;
    }

    .reader-rich-page-no {
      position: absolute;
      left: 50%;
      bottom: 8px;
      transform: translateX(-50%);
      writing-mode: horizontal-tb;
      line-height: 1;
      text-align: center;
      font-size: 10px;
      color: #6f6f6f;
      letter-spacing: 0.08em;
      z-index: 2;
    }

    .reader-rich-pager {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 12px 0 2px;
    }

    .reader-rich-page-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-mid);
      cursor: pointer;
      transition: all 0.14s;
    }

    .reader-rich-page-btn:hover:not(:disabled) {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-muted);
    }

    .reader-rich-page-btn:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .reader-rich-page-status {
      min-width: 110px;
      text-align: center;
      font-size: 12px;
      color: var(--text-light);
      letter-spacing: 0.03em;
    }

    .reader-rich-drag-hint {
      text-align: center;
      font-size: 11px;
      color: var(--text-light);
      letter-spacing: 0.04em;
    }

    /* 縦書きモード本体 */
    .reader-content.vertical-writing {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      direction: ltr;
      height: auto;
      max-height: none;
      overflow-x: auto;
      overflow-y: visible;
      white-space: normal;
      padding: 24px 16px;
      font-family: 'Noto Serif JP', serif;
      line-height: 2.1;
      letter-spacing: 0.08em;
    }

    /* 縦書き時はリーダーbodyを横スクロール可能に */
    .reader-body.vertical-mode {
      overflow-x: auto;
      overflow-y: hidden;
      display: flex;
      align-items: flex-start;
      min-height: calc(100vh - 52px);
    }

    .reader-body.vertical-mode #readerContent {
      display: flex;
      flex-direction: row-reverse;
      align-items: flex-start;
      min-width: max-content;
      padding: 0;
    }

    /* 縦書き時のタイトル・章番号 */
    .reader-body.vertical-mode .reader-chapter-label,
    .reader-body.vertical-mode .reader-chapter-title {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      margin-right: 24px;
      margin-bottom: 0;
    }

    .reader-body.vertical-mode .reader-divider {
      writing-mode: vertical-rl;
      margin: 0 24px;
    }

    .reader-body.vertical-mode .reader-nav {
      writing-mode: horizontal-tb;
      flex-direction: column;
      margin: 0 24px;
      min-width: 220px;
      align-self: center;
    }

    /* スケルトンローディング */
    .reader-skeleton {
      animation: skPulse 1.4s ease infinite;
    }

    .reader-sk-line {
      height: 1.1em;
      background: var(--surface2);
      border-radius: 4px;
      margin-bottom: 1.4em;
    }

    .reader-sk-line.short {
      width: 60%;
    }

    .reader-sk-title {
      height: 1.5em;
      width: 75%;
      background: var(--surface2);
      border-radius: 4px;
      margin-bottom: 40px;
    }

    @media (max-width: 640px) {
      .reader-body {
        padding: 32px 18px 60px;
      }

      .reader-chapter-title {
        font-size: 18px;
      }

      .reader-content {
        font-size: var(--reader-font-size-sp, 16px);
      }

      .reader-nav {
        flex-direction: column;
        gap: 10px;
      }

      .reader-nav-btn {
        width: 100%;
        padding: 12px 16px;
        box-sizing: border-box;
      }

      .reader-nav-btn .nav-title {
        max-width: 100%;
      }

      .reader-rich-book {
        border-radius: 0;
        width: 100%;
      }

      .reader-rich-turn-page {
        inset: 10px 8px 14px;
      }

      .reader-rich-stage {
        padding: 0;
      }
    }

    /* ══════════════════════════════════════════════════
     全画面検索ビュー
  ══════════════════════════════════════════════════ */
    #searchView {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 4500;
      background: var(--bg);
      overflow-y: auto;
      animation: readerFadeIn 0.18s ease;
    }

    #searchView.open {
      display: block;
    }

    .search-view-header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(243, 244, 238, 0.95);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      padding: 12px 12px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 12px;
      justify-content: center;
    }

    .search-view-input-wrap {
      flex: 1;
      max-width: 600px;
      min-width: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      background: var(--surface);
      border: 2px solid var(--accent);
      border-radius: 999px;
      padding: 0 16px;
      gap: 10px;
    }

    .search-view-input-wrap i {
      color: var(--accent);
      font-size: 15px;
    }

    .search-view-input-wrap input {
      flex: 1;
      min-width: 0;
      border: none;
      outline: none;
      background: transparent;
      font-size: 16px;
      font-family: inherit;
      padding: 10px 0;
      color: var(--text);
    }

    /* ブラウザ標準の検索クリアボタンを消す */
    .search-view-input-wrap input::-webkit-search-decoration,
    .search-view-input-wrap input::-webkit-search-cancel-button,
    .search-view-input-wrap input::-webkit-search-results-button,
    .search-view-input-wrap input::-webkit-search-results-decoration {
      display: none;
    }

    .search-clear-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-light);
      font-size: 15px;
      padding: 4px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      transition: color 0.15s;
    }

    .search-clear-btn:hover {
      color: var(--accent);
    }

    .search-close-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-mid);
      font-size: 14px;
      font-family: inherit;
      padding: 8px 4px;
      white-space: nowrap;
      transition: color 0.15s;
    }

    .search-close-btn:hover {
      color: var(--accent);
    }

    .search-back-btn {
      display: none;
    }

    @media (max-width: 600px) {
      .search-view-header {
        justify-content: flex-start;
      }

      .search-view-input-wrap {
        max-width: none;
      }

      .search-back-btn {
        display: flex;
        flex-shrink: 0;
      }

      .search-close-btn {
        display: none;
      }
    }

    .search-view-body {
      max-width: 860px;
      margin: 0 auto;
      padding: 24px 20px 80px;
    }

    .search-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 20px;
      align-items: center;
    }

    .search-filter-label {
      font-size: 12px;
      color: var(--text-light);
      margin-right: 4px;
    }

    .search-filter-btn {
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 999px;
      padding: 5px 14px;
      font-size: 12px;
      cursor: pointer;
      font-family: inherit;
      color: var(--text-mid);
      transition: all 0.15s;
      white-space: nowrap;
    }

    .search-filter-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .search-filter-btn.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    /* ソート + 詳しく絞り込むをまとめたアクション行
       flex-basis:100% で常に新しい行へ回し、ジャンルボタンの改行ギャップを防ぐ */
    .search-filters-actions {
      flex-basis: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }

    .search-sort-wrap {
      display: flex;
      gap: 6px;
      margin-left: auto;
      align-items: center;
    }

    .search-sort-btn {
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: var(--radius);
      padding: 5px 12px;
      font-size: 12px;
      cursor: pointer;
      font-family: inherit;
      color: var(--text-mid);
      transition: all 0.15s;
    }

    .search-sort-btn.active {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff;
    }

    /* ── 詳細絞り込みトグル & パネル ── */
    .search-adv-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: 8px;
      padding: 5px 12px;
      font-size: 12px;
      font-family: inherit;
      color: var(--text-mid);
      background: var(--surface);
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      transition: all 0.15s;
    }

    .search-adv-toggle:hover {
      color: var(--accent);
      border-color: var(--accent);
      border-style: solid;
    }

    .search-adv-toggle[aria-expanded="true"] {
      color: var(--accent);
      border-color: var(--accent);
      border-style: solid;
      background: var(--accent-muted, #fff7f2);
    }

    .search-adv-toggle[aria-expanded="true"] .search-adv-caret {
      transform: rotate(180deg);
    }

    .search-adv-caret {
      transition: transform 0.18s;
    }

    .search-adv-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      background: var(--accent);
      border-radius: 999px;
    }

    .search-adv-panel {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      margin: 8px 20px 0;
      max-width: 860px;
      box-sizing: border-box;
      width: calc(100% - 40px);
      margin-left: auto;
      margin-right: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: var(--shadow-sm);
    }

    .search-adv-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .search-adv-row.search-adv-actions {
      justify-content: flex-end;
    }

    .search-adv-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-mid);
      min-width: 72px;
      flex-shrink: 0;
    }

    .search-adv-chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .search-adv-chip {
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 999px;
      padding: 4px 12px;
      font-size: 12px;
      cursor: pointer;
      font-family: inherit;
      color: var(--text-mid);
      transition: all 0.15s;
    }

    .search-adv-chip:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .search-adv-chip.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    .search-adv-input {
      flex: 1;
      min-width: 160px;
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: var(--radius);
      padding: 6px 10px;
      font-size: 13px;
      font-family: inherit;
      color: var(--text);
      outline: none;
      transition: border-color 0.15s;
    }

    .search-adv-input:focus {
      border-color: var(--accent);
    }

    .search-adv-tag-wrap {
      display: flex;
      flex: 1;
      min-width: 200px;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: var(--radius);
      padding: 5px 8px;
    }

    .search-adv-tag-wrap:focus-within {
      border-color: var(--accent);
    }

    .search-adv-tag-chips {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }

    .search-adv-tag-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 5px 3px 10px;
      background: var(--accent-muted, #ffeadd);
      color: var(--accent);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
    }

    .search-adv-tag-chip button {
      border: none;
      background: transparent;
      color: var(--accent);
      cursor: pointer;
      padding: 0 4px;
      font-size: 12px;
      line-height: 1;
      border-radius: 999px;
    }

    .search-adv-tag-chip button:hover {
      background: rgba(0, 0, 0, 0.08);
    }

    .search-adv-input-tag {
      flex: 1;
      min-width: 120px;
      border: none;
      padding: 2px 4px;
      background: transparent;
    }

    .search-adv-input-tag:focus {
      border: none;
    }

    .search-adv-reset {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 14px;
      font-size: 12px;
      font-family: inherit;
      color: var(--text-mid);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      transition: all 0.15s;
    }

    .search-adv-reset:hover {
      color: var(--accent);
      border-color: var(--accent);
    }

    /* ── ランキング コントロールパネル ── */
    #rankingControlPanel {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 10px 20px 6px;
      display: flex;
      flex-direction: column;
      gap: 0;
      width: calc(100% - 32px);
      max-width: 860px;
      margin: 16px auto 0;
      box-sizing: border-box;
      box-shadow: var(--shadow-sm);
    }

    .ranking-ctrl-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      width: 100%;
    }

    .ranking-ctrl-story {
      border-bottom: 1px solid var(--border-light);
    }

    .ranking-ctrl-type {
      border-bottom: 1px solid var(--border-light);
    }

    .ranking-ctrl-period {
      border-bottom: 1px solid var(--border-light);
    }

    .ranking-ctrl-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-light);
      min-width: 56px;
      letter-spacing: 0.03em;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .ranking-ctrl-btns {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      /* PCでは折り返しを許可 */
      flex: 1;
    }

    .ranking-ctrl-btns::-webkit-scrollbar {
      display: none;
    }

    .ranking-ctrl-btns-wrap {
      flex-wrap: wrap;
    }

    .ranking-ctrl-btn {
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 999px;
      padding: 4px 13px;
      font-size: 12px;
      cursor: pointer;
      font-family: inherit;
      color: var(--text-mid);
      white-space: nowrap;
      transition: all 0.15s;
      flex-shrink: 0;
      font-weight: 500;
    }

    .ranking-ctrl-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .ranking-ctrl-btn.active-type {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      font-weight: 700;
    }

    .ranking-ctrl-btn.active-period {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff;
      font-weight: 700;
    }

    .ranking-ctrl-btn.active-story {
      background: var(--green);
      border-color: var(--green);
      color: #fff;
      font-weight: 700;
    }

    .ranking-ctrl-btn.active-genre {
      background: var(--accent2);
      border-color: var(--accent2);
      color: #fff;
      font-weight: 700;
    }

    .search-meta {
      font-size: 13px;
      color: var(--text-light);
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
      text-align: center;
    }

    .search-meta strong {
      color: var(--accent);
    }

    .search-results-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--border);
    }

    .search-result-item {
      background: var(--surface);
      padding: 16px 18px;
      display: flex;
      gap: 14px;
      align-items: flex-start;
      cursor: pointer;
      transition: background 0.12s;
      border-bottom: 1px solid var(--border);
    }

    .search-result-item:last-child {
      border-bottom: none;
    }

    .search-result-item:hover {
      background: var(--surface2);
    }

    .search-result-cover {
      width: 48px;
      height: 64px;
      border-radius: 2px 5px 5px 2px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: inset 4px 0 6px rgba(255, 255, 255, 0.4), inset -1px 0 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.15);
      overflow: hidden;
    }

    .search-result-info {
      flex: 1;
      min-width: 0;
    }

    .search-result-title {
      font-size: 15px;
      font-weight: 700;
      font-family: 'Noto Serif JP', serif;
      color: var(--navy);
      margin-bottom: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .search-result-title mark {
      background: #FFF3C4;
      color: var(--navy);
      border-radius: 2px;
      padding: 0 1px;
    }

    .search-result-author {
      font-size: 12px;
      color: var(--text-light);
      margin-bottom: 6px;
    }

    .search-result-desc {
      font-size: 13px;
      color: var(--text-mid);
      line-height: 1.6;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .search-result-footer {
      display: flex;
      gap: 12px;
      font-size: 11px;
      color: var(--text-light);
      align-items: center;
      flex-wrap: wrap;
    }

    .search-result-footer .tag {
      background: var(--tag-bg);
      padding: 2px 8px;
      border-radius: 999px;
      color: var(--text-mid);
      font-size: 11px;
    }

    .search-result-footer .genre-badge {
      background: var(--accent-muted);
      color: var(--accent);
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
    }

    .search-empty {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-light);
    }

    .search-empty .icon {
      font-size: 48px;
      margin-bottom: 16px;
    }

    .search-empty h3 {
      font-size: 16px;
      color: var(--text-mid);
      margin-bottom: 8px;
    }

    .search-initial {
      text-align: center;
      padding: 48px 20px;
      color: var(--text-light);
    }

    .search-initial .icon {
      font-size: 56px;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .search-genre-shortcuts {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      margin-top: 20px;
    }

    .search-syntax-hint {
      max-width: 480px;
      margin: 24px auto 0;
      padding: 14px 18px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      text-align: left;
      color: var(--text-mid);
      font-size: 12px;
      line-height: 1.9;
    }

    .search-syntax-hint-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .search-syntax-hint-title i {
      color: var(--gold);
      font-size: 11px;
    }

    .search-syntax-hint ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .search-syntax-hint li {
      padding: 1px 0;
    }

    .search-syntax-hint code {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 1px 6px;
      font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
      font-size: 11px;
      color: var(--accent);
    }

    /* ── 未読エピソードバッジ ── */
    .unread-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      background: var(--accent);
      color: var(--on-accent);
      line-height: 1.4;
      letter-spacing: .3px;
      box-shadow: 0 1px 3px rgba(217, 106, 75, 0.25);
    }

    .unread-badge i {
      color: var(--on-accent);
    }

    .unread-badge--edit {
      background: var(--accent2);
      box-shadow: 0 1px 3px rgba(75, 145, 173, 0.25);
    }

    @media (max-width: 640px) {
      .search-view-body {
        padding: 12px 12px 70px;
      }

      .search-sort-wrap {
        margin-left: 0;
      }

      .search-filters {
        gap: 6px;
      }
    }

    /* ── スマホ用ボトムナビ ── */
    .bottom-nav {
      display: none;
    }

    @media (max-width: 760px) {
      .bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 12000;
        background: #fff;
        border-top: 1px solid var(--border);
        height: calc(68px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -1px 8px rgba(10, 25, 41, 0.08);
      }

      #searchView,
      #postOverlay,
      #myPageView {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
      }

      .toast-wrap {
        right: 12px;
        left: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
      }

      .toast {
        max-width: 100%;
      }

      .bottom-nav-btn {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-light);
        font-size: 10px;
        font-family: 'Noto Sans JP', sans-serif;
        transition: color 0.15s;
        padding: 4px 0;
      }

      .bottom-nav-btn i {
        font-size: 18px;
      }

      .bottom-nav-btn.active {
        color: var(--accent);
      }

      .bottom-nav-btn:hover {
        color: var(--accent);
      }

      .bottom-nav-post {
        background: var(--accent);
        color: #fff !important;
        border-radius: 10px;
        margin: 6px 4px;
        flex: 1.2;
        box-shadow: 0 2px 8px rgba(217, 106, 75, 0.28);
      }

      .bottom-nav-post:hover {
        background: var(--accent-light);
      }

      /* ボトムナビ分の余白 */
      body {
        padding-bottom: 60px !important;
      }

      /* リーダービュー・マイページ表示中はbody paddingを消す */
      body.reader-open {
        padding-bottom: 0;
      }

      /* スマホ検索エリア */
      .mobile-search-bar {
        display: flex;
        box-sizing: border-box;
        overflow: hidden;
        padding: 10px 12px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        gap: 10px;
      }

      .mobile-search-bar input {
        flex: 1;
        min-width: 0;
        padding: 8px 14px;
        border: 1.5px solid var(--border);
        border-radius: 20px;
        font-size: 16px;
        font-family: 'Noto Sans JP', sans-serif;
        background: var(--bg);
        color: var(--text);
        outline: none;
      }

      .mobile-search-bar input:focus {
        border-color: var(--accent);
      }

      .mobile-search-bar button {
        background: var(--accent);
        border: none;
        border-radius: 20px;
        padding: 8px 16px;
        color: #fff;
        cursor: pointer;
        font-size: 16px;
      }
    }

    @media (min-width: 601px) {
      .mobile-search-bar {
        display: none;
      }
    }

    /* ── 認証タブ ── */
    .auth-tabs {
      display: flex;
      gap: 0;
      border-bottom: 2px solid var(--border);
      margin-bottom: 0;
    }

    .auth-tab {
      flex: 1;
      text-align: center;
      padding: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      color: var(--text-light);
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      transition: color 0.15s, border-color 0.15s;
    }

    .auth-tab.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }

    .auth-tab:hover {
      color: var(--accent);
    }

    /* ── btn-ghost ── */
    .btn-ghost {
      background: none;
      border: 1px solid var(--border);
      color: var(--text-mid);
      padding: 8px 14px;
      border-radius: var(--radius);
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s;
      font-family: inherit;
    }

    .btn-ghost:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-muted);
    }

    #authorView {
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    /* ── AUTHOR PROFILE PAGE ── */
    .author-profile-header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 0;
    }

    .author-profile-inner {
      max-width: 1060px;
      margin: 0 auto;
      padding: 28px 20px 20px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
    }

    .author-profile-left {
      display: flex;
      align-items: center;
      gap: 20px;
      flex: 1;
      min-width: 0;
    }

    .author-big-avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      font-family: 'Noto Serif JP', serif;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: 3px solid var(--border);
    }

    .author-profile-info {
      flex: 1;
      min-width: 0;
    }

    .author-penname {
      font-size: 22px;
      font-weight: 700;
      color: var(--navy);
      font-family: 'Noto Serif JP', serif;
      margin-bottom: 2px;
    }

    .author-username {
      font-size: 12px;
      color: var(--text-light);
      margin-bottom: 10px;
    }

    .author-stats-row {
      display: flex;
      gap: 18px;
      font-size: 13px;
      color: var(--text-mid);
      flex-wrap: wrap;
    }

    .author-stats-row span {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .author-stats-row i {
      color: var(--accent);
      font-size: 12px;
    }

    .author-stats-row strong {
      color: var(--navy);
      font-weight: 700;
    }

    .author-bookmark-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      border: 1.5px solid var(--accent);
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent);
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.18s;
      background: var(--surface);
      flex-shrink: 0;
    }

    .author-bookmark-btn:hover,
    .author-bookmark-btn.active {
      background: var(--accent);
      color: #fff;
    }

    /* タブバー */
    .author-tab-bar {
      background: var(--surface);
      border-bottom: 2px solid var(--border);
      position: sticky;
      top: 48px;
      z-index: 10;
      overflow: hidden;
      overscroll-behavior: none;
    }

    .author-tab-inner {
      max-width: 1060px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      gap: 0;
      overflow: hidden;
      scrollbar-width: none;
    }

    .author-tab-inner::-webkit-scrollbar {
      display: none;
    }

    .author-tab {
      padding: 12px 18px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-light);
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      cursor: pointer;
      white-space: nowrap;
      font-family: 'Noto Sans JP', sans-serif;
      transition: all 0.15s;
    }

    .author-tab:hover {
      color: var(--accent);
    }

    .author-tab.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
      font-weight: 600;
    }

    /* コンテンツレイアウト */
    .author-content {
      max-width: 1060px;
      margin: 0 auto;
      padding: 24px 20px 80px;
      display: grid;
      grid-template-columns: 1fr 260px;
      gap: 24px;
    }

    .author-main-col {
      min-width: 0;
    }

    .author-section-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--navy);
      padding: 0 0 10px;
      border-bottom: 2px solid var(--border);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

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

    /* 作品リスト */
    .author-novels-list {
      display: flex;
      flex-direction: column;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .author-novel-item {
      background: var(--surface);
      padding: 14px 16px;
      display: flex;
      gap: 14px;
      align-items: flex-start;
      cursor: pointer;
      transition: background 0.15s;
    }

    .author-novel-item:hover {
      background: var(--surface2);
    }

    .author-novel-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 3px;
      white-space: nowrap;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .author-novel-badge.ongoing {
      background: var(--accent);
      color: #fff;
    }

    .author-novel-badge.completed {
      background: #8A7B6B;
      color: #fff;
    }

    .author-novel-body {
      flex: 1;
      min-width: 0;
    }

    .author-novel-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 4px;
      font-family: 'Noto Serif JP', serif;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .author-novel-title:hover {
      text-decoration: underline;
    }

    .author-novel-meta {
      font-size: 11px;
      color: var(--text-light);
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }

    #seriesView .author-main-col {
      width: 100%;
      min-width: 0;
    }

    #seriesView .author-novel-item {
      box-sizing: border-box;
      min-width: 0;
    }

    #seriesView .author-novel-title {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .author-novel-desc {
      font-size: 12px;
      color: var(--text-mid);
      line-height: 1.65;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .author-novel-footer {
      font-size: 11px;
      color: var(--text-light);
      text-align: right;
      margin-top: 6px;
    }

    .author-loading {
      padding: 32px;
      text-align: center;
      font-size: 13px;
      color: var(--text-light);
      background: var(--surface);
    }

    .author-more-link {
      display: block;
      text-align: right;
      font-size: 13px;
      color: var(--accent);
      padding: 12px 0 0;
      font-weight: 500;
    }

    .author-more-link:hover {
      text-decoration: underline;
    }

    /* サイドバー */
    .author-side-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .author-side-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
    }

    .author-side-card-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--navy);
      border-bottom: 1px solid var(--border);
      padding-bottom: 8px;
      margin-bottom: 10px;
    }

    .author-bio-text {
      font-size: 13px;
      color: var(--text-mid);
      line-height: 1.75;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .author-side-more {
      display: block;
      text-align: right;
      font-size: 12px;
      color: var(--accent);
      margin-top: 8px;
    }

    .author-side-stats {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .author-side-stat-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid var(--border-light);
      font-size: 13px;
      color: var(--text-mid);
    }

    .author-side-stat-row:last-child {
      border-bottom: none;
    }

    .author-side-stat-row strong {
      color: var(--navy);
      font-weight: 700;
    }

    .author-profile-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
    }

    /* モバイル対応 */
    @media (min-width: 761px) {
      #authorDailyWordCardMobile {
        display: none !important;
      }
    }

    @media (max-width: 760px) {
      .author-content {
        grid-template-columns: 1fr;
      }

      .author-side-col {
        display: none;
      }

      .author-profile-inner {
        flex-direction: column;
        align-items: flex-start;
      }

      .author-bookmark-btn {
        align-self: flex-end;
        margin-top: -64px;
      }

      .author-penname {
        font-size: 18px;
      }
    }

    @media (max-width: 480px) {
      .author-big-avatar {
        width: 56px;
        height: 56px;
        font-size: 22px;
      }

      .author-penname {
        font-size: 16px;
      }

      .author-stats-row {
        gap: 10px;
        font-size: 12px;
      }

      .author-bookmark-btn {
        margin-top: 0;
        padding: 6px 12px;
        font-size: 12px;
      }

      #seriesView .author-content {
        padding: 10px 8px 72px !important;
      }

      #seriesView .author-novel-item {
        padding: 12px;
        gap: 10px;
      }
    }

    .theme-picker-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 12px;
    }

    .theme-picker-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      padding: 10px;
      cursor: pointer;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .theme-picker-card:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
    }

    .theme-picker-card.is-active {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .theme-picker-preview {
      width: 100%;
      aspect-ratio: 3 / 4;
      border-radius: 10px;
      border: 1px solid rgba(0, 0, 0, .08);
      margin-bottom: 8px;
      position: relative;
      overflow: hidden;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .theme-preview-header {
      height: 20px;
      border-radius: 7px;
      background: rgba(255, 255, 255, .3);
      backdrop-filter: blur(2px);
      border: 1px solid rgba(255, 255, 255, .25);
    }

    .theme-preview-body {
      flex: 1;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, .22);
      padding: 7px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: rgba(255, 255, 255, .1);
    }

    .theme-preview-lines {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .theme-preview-line {
      height: 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .7);
    }

    .theme-preview-line.short {
      width: 68%;
    }

    .theme-preview-pill {
      align-self: flex-start;
      font-size: 9px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 999px;
      letter-spacing: .04em;
      color: #fff;
      background: rgba(0, 0, 0, .28);
      border: 1px solid rgba(255, 255, 255, .2);
    }

    .theme-picker-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-dark);
      line-height: 1.35;
    }

    .theme-picker-price {
      font-size: 12px;
      font-weight: 700;
      color: #B91C1C;
      margin-top: 2px;
    }

    .theme-preview-default {
      background: linear-gradient(180deg, #f59e0b, #ea580c);
    }

    .theme-preview-default .theme-preview-pill {
      background: rgba(120, 53, 15, .55);
    }

    .theme-preview-retro {
      background: linear-gradient(180deg, #89d2d0, #15766f);
      border-style: dashed;
    }

    .theme-preview-retro .theme-preview-header,
    .theme-preview-retro .theme-preview-body {
      border-radius: 0;
    }

    .theme-preview-aero {
      background: radial-gradient(circle at 20% 10%, #d7efff 0%, #93d0ff 42%, #5ba1df 100%);
    }

    .theme-preview-aero .theme-preview-header {
      background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(214, 241, 255, .35));
    }

    .theme-preview-vaporwave {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .17) 0 1px, transparent 1px 18px),
        linear-gradient(180deg, #ff4fbf, #7936ff);
      background-size: 100% 18px, 100% 100%;
    }

    .theme-preview-kawaii {
      background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, .75) 0 8px, transparent 9px),
        radial-gradient(circle at 72% 30%, rgba(255, 255, 255, .62) 0 6px, transparent 7px),
        linear-gradient(180deg, #f7c3f0, #b7d1ff);
    }

    .theme-preview-boygame {
      background: linear-gradient(180deg, #c8d47f, #556b2f);
      image-rendering: pixelated;
    }

    .theme-preview-boygame .theme-preview-line,
    .theme-preview-boygame .theme-preview-header,
    .theme-preview-boygame .theme-preview-body,
    .theme-preview-boygame .theme-preview-pill {
      border-radius: 0;
    }

    .theme-preview-hacker {
      background:
        repeating-linear-gradient(180deg, rgba(0, 255, 127, .12) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #08120b, #0d4d2f);
    }

    .theme-preview-hacker .theme-preview-line,
    .theme-preview-hacker .theme-preview-pill {
      background: #8DFFBF;
      color: #052411;
    }

    .theme-preview-sonkei {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 45%),
        linear-gradient(180deg, #31d4e2, #5f7ee7);
    }

    .theme-preview-galakei {
      background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 5px),
        linear-gradient(180deg, #728067, #424b3c);
    }

    .theme-preview-ascii {
      background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, #1e1e1e, #0a0a0a);
      border-style: dashed;
      border-color: #d2d2d2;
    }

    .theme-preview-ascii .theme-preview-header,
    .theme-preview-ascii .theme-preview-body,
    .theme-preview-ascii .theme-preview-pill,
    .theme-preview-ascii .theme-preview-line {
      border-radius: 0;
      background: #111;
      border-color: #e7e7e7;
      color: #fff;
    }

/* ══════════════════════════════════════════════════
   書きっぱコイン
══════════════════════════════════════════════════ */
.coin-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px 4px 8px;border-radius:999px;
  background:linear-gradient(135deg,#FFD700 0%,#F5A623 100%);
  color:#5A3E0A;font-size:12px;font-weight:700;
  cursor:pointer;user-select:none;
  box-shadow:0 1px 4px rgba(245,166,35,0.35),inset 0 1px 0 rgba(255,255,255,0.45);
  transition:transform .15s,box-shadow .15s;
  letter-spacing:.02em;
  white-space:nowrap;flex-shrink:0;
}
.coin-badge:hover{transform:scale(1.06);box-shadow:0 2px 8px rgba(245,166,35,0.5),inset 0 1px 0 rgba(255,255,255,0.45);}
.coin-badge .coin-icon{font-size:14px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));}

/* ── コイン獲得トースト ── */
@keyframes coinPop{
  0%{opacity:0;transform:translateY(10px) scale(.85);}
  40%{opacity:1;transform:translateY(-4px) scale(1.08);}
  70%{transform:translateY(0) scale(1);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
.coin-toast{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:999px;
  background:linear-gradient(135deg,#FFF8E1,#FFE082);
  color:#6D4C00;font-size:13px;font-weight:700;
  box-shadow:0 4px 16px rgba(245,166,35,0.25);
  animation:coinPop .5s ease-out;
  pointer-events:none;
}
.coin-toast .coin-toast-icon{font-size:16px;animation:coinSpin .5s ease-out;}
@keyframes coinSpin{0%{transform:rotateY(0)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}

/* ── マイページ コインカード ── */
.coin-card{
  background:linear-gradient(135deg,#FFF9E6 0%,#FFF3CC 50%,#FFF0B8 100%);
  border:1.5px solid #EECC55;border-radius:var(--radius-lg);
  padding:20px 24px;margin-bottom:18px;
  box-shadow:0 2px 8px rgba(200,160,0,0.08),inset 0 1px 0 rgba(255,255,255,0.7);
  position:relative;overflow:hidden;
}
.coin-card::before{
  content:'';position:absolute;top:-30%;right:-15%;width:180px;height:180px;
  background:radial-gradient(circle,rgba(255,215,0,0.15) 0%,transparent 70%);
  pointer-events:none;
}
.coin-card-balance{
  font-size:36px;font-weight:800;color:#8B6914;
  font-family:'Orbitron','Noto Sans JP',sans-serif;
  letter-spacing:0.05em;
}
.coin-card-label{font-size:12px;color:#A68520;font-weight:600;letter-spacing:.04em;}
.coin-card-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.coin-card-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;border-radius:var(--radius);
  font-size:13px;font-weight:600;cursor:pointer;
  border:none;transition:all .18s;font-family:'Noto Sans JP',sans-serif;
}
.coin-card-btn.primary{
  background:linear-gradient(135deg,#F5A623,#E89C10);color:#fff;
  box-shadow:0 2px 6px rgba(245,166,35,0.3);
}
.coin-card-btn.primary:hover{background:linear-gradient(135deg,#FFBD40,#F5A623);transform:translateY(-1px);box-shadow:0 4px 12px rgba(245,166,35,0.35);}
.coin-card-btn.outline{background:none;border:1.5px solid #D4A824;color:#8B6914;}
.coin-card-btn.outline:hover{background:#FFF0B8;border-color:#B8900A;}

/* ── 取引履歴 ── */
.coin-tx-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.coin-tx-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:var(--surface);
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.coin-tx-item:last-child{border-bottom:none;}
.coin-tx-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;}
.coin-tx-icon.earn{background:#E8F5E9;color:#2E7D32;}
.coin-tx-icon.spend{background:#FFEBEE;color:#C62828;}
.coin-tx-amount{font-weight:700;font-family:'Orbitron','Noto Sans JP',sans-serif;margin-left:auto;flex-shrink:0;white-space:nowrap;}
.coin-tx-amount.earn{color:#2E7D32;}
.coin-tx-amount.spend{color:#C62828;}

/* ── 宣伝バナーカード（ヒーロー内） ── */
.promoted-slide{position:relative;}
.promoted-slide .promoted-badge{
  position:absolute;top:8px;left:8px;z-index:2;
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:999px;
  background:linear-gradient(135deg,#FFD700,#F5A623);
  color:#5A3E0A;font-size:10px;font-weight:700;
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
  letter-spacing:.03em;
}

/* ── 宣伝出稿モーダル ── */
.promote-plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.promote-plan-card{
  border:2px solid var(--border);border-radius:var(--radius-lg);
  padding:20px 16px;text-align:center;cursor:pointer;
  transition:all .18s;background:var(--surface);position:relative;
}
.promote-plan-card:hover{border-color:var(--accent);background:var(--accent-muted);}
.promote-plan-card.selected{border-color:#F5A623;background:#FFFBE6;box-shadow:0 0 0 3px rgba(245,166,35,0.2);}
.promote-plan-card .plan-days{font-size:24px;font-weight:800;color:var(--navy);}
.promote-plan-card .plan-label{font-size:12px;color:var(--text-mid);margin-top:2px;}
.promote-plan-card .plan-cost{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:10px;padding:4px 14px;border-radius:999px;
  background:linear-gradient(135deg,#FFD700,#F5A623);
  color:#5A3E0A;font-size:13px;font-weight:700;
}
@media(max-width:480px){.promote-plan-cards{grid-template-columns:1fr;}}

/* ── コイン獲得ルール表 ── */
.coin-rules-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.coin-rules-table th{background:var(--surface2);padding:8px 12px;text-align:left;font-size:12px;color:var(--text-light);font-weight:600;border-bottom:1px solid var(--border);}
.coin-rules-table td{padding:8px 12px;border-bottom:1px solid var(--border);}
.coin-rules-table tr:last-child td{border-bottom:none;}
.coin-rules-table .coin-amt{font-weight:700;color:#8B6914;font-family:'Orbitron','Noto Sans JP',sans-serif;}