html {
      overflow-y: scroll;
      scrollbar-gutter: stable;
    }
    * {
      scrollbar-width: thin;
      scrollbar-color: #334155 #06080e;
    }
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #06080e;
    }
    ::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #334155;
    }
    :root.is-embedded header, html.is-embedded header {
      display: block !important;
      position: sticky !important;
      top: 0 !important;
      z-index: 50 !important;
      padding: 6px 12px !important;
      background: rgba(8, 11, 17, 0.96) !important;
      backdrop-filter: blur(16px) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    :root.is-embedded footer, html.is-embedded footer {
      position: fixed !important;
      bottom: 16px !important;
      left: 50% !important;
      right: auto !important;
      transform: translateX(-50%) !important;
      width: max-content !important;
      max-width: calc(100vw - 24px) !important;
      border-radius: 9999px !important;
      border: 1px solid rgba(255, 255, 255, 0.18) !important;
      background: rgba(8, 11, 17, 0.94) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75) !important;
      padding: 6px 12px !important;
      z-index: 50 !important;
      box-sizing: border-box !important;
    }
    :root.is-embedded #viewer-settings, html.is-embedded #viewer-settings {
      position: fixed !important;
      bottom: 68px !important;
      top: auto !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: calc(100% - 24px) !important;
      max-width: 640px !important;
      border-radius: 16px !important;
      border: 1px solid rgba(255, 255, 255, 0.18) !important;
      background: rgba(15, 23, 42, 0.96) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8) !important;
      z-index: 60 !important;
    }
    /* Smart Floating HUD Animations (EVAL-03) */
    header {
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
    }
    header.hud-hidden {
      transform: translateY(-100%) !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    footer {
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
    }
    footer.hud-hidden {
      transform: translateY(120%) !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    :root.is-embedded footer.hud-hidden, html.is-embedded footer.hud-hidden {
      transform: translate(-50%, 150%) !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    @media (max-width: 767px) {
      #floating-quick-dock.hud-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(120%) !important;
      }
    }
    :root {
      --cut-gap: 48px;
      --viewer-current-max-w: min(100vw, calc((100dvh - 136px) * 0.746));
    }
    body {
      background-color: #05070c;
      color: #f1f5f9;
      font-family: 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', 'Inter', -apple-system, sans-serif;
      overflow-x: hidden;
      transition: background-color 0.25s ease, background-image 0.25s ease;
    }
    body.bg-all-black {
      background-color: #000000 !important;
      background-image: none !important;
    }
    body.bg-all-white {
      background-color: #f8fafc !important;
      background-image: none !important;
    }
    body.bg-black-circle {
      background-color: #1e293b !important;
      background-image: radial-gradient(circle at 50% 50%, #000000 0%, #000000 54%, #0f172a 56%, #1e293b 100%) !important;
      background-attachment: fixed !important;
    }
    body.bg-cyber-aurora {
      background-color: #05070c !important;
      background-image: radial-gradient(circle at 15% 25%, rgba(56, 189, 248, 0.16) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(168, 85, 247, 0.16) 0%, transparent 45%) !important;
      background-attachment: fixed !important;
    }
    body.bg-warm-sepia {
      background-color: #1c1613 !important;
      background-image: radial-gradient(circle at 50% 50%, #120e0c 0%, #241c17 100%) !important;
      background-attachment: fixed !important;
    }
    .webtoon-container {
      width: 100%;
      max-width: min(100%, calc((100dvh - 136px) * 0.746));
      margin: 0 auto;
      transition: max-width 0.2s ease;
    }
    @media (max-width: 767px) {
      .webtoon-container {
        max-width: 100%;
      }
    }
    .cut-block {
      position: relative;
      width: 100%;
      background-color: #0a0d14;
      line-height: 0;
      margin-bottom: var(--cut-gap, 48px);
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
      border-bottom: 1px solid rgba(30, 41, 59, 0.6);
    }
    #cut-single-container.cut-block {
      margin-bottom: 0 !important;
    }
    .cut-img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    /* Dynamic Vector Speech Bubble Overlay Container */
    .bubble-container {
      position: absolute;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      z-index: 20;
      pointer-events: none;
      transition: all 0.2s ease-out;
    }

    /* 1. Normal Talk Bubble */
    .bubble-talk {
      position: relative;
      background: #ffffff;
      color: #0f172a;
      border: 2.5px solid #0f172a;
      border-radius: 18px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
      padding: 7px 13px;
      line-height: 1.38;
      display: flex;
      flex-direction: column;
      width: 100%;
      word-break: keep-all;
      box-sizing: border-box;
    }

    /* 2. Narration Box */
    .bubble-narration {
      position: relative;
      background: rgba(15, 23, 42, 0.92);
      color: #f8fafc;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-left: 4px solid #38bdf8;
      border-radius: 6px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
      padding: 7px 14px;
      line-height: 1.42;
      display: flex;
      flex-direction: column;
      width: 100%;
      word-break: keep-all;
      box-sizing: border-box;
    }

    /* 3. Thought Cloud Bubble */
    .bubble-thought {
      position: relative;
      background: #ffffff;
      color: #0f172a;
      border: 2.5px dashed #0f172a;
      border-radius: 24px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
      padding: 8px 15px;
      line-height: 1.38;
      display: flex;
      flex-direction: column;
      width: 100%;
      word-break: keep-all;
      box-sizing: border-box;
    }

    /* 4. Shout Comic Action Bubble */
    .bubble-shout {
      position: relative;
      background: #fffdf5;
      color: #0f172a;
      border: 3px solid #dc2626;
      border-radius: 6px;
      box-shadow: 0 0 14px rgba(220, 38, 38, 0.45);
      padding: 7px 13px;
      line-height: 1.32;
      display: flex;
      flex-direction: column;
      width: 100%;
      word-break: keep-all;
      box-sizing: border-box;
      outline: 2px solid #facc15;
      outline-offset: -5px;
    }

    /* Speaker Tags */
    .speaker-tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 900;
      color: #e11d48;
      letter-spacing: 0.02em;
      margin-bottom: 2px;
      text-transform: uppercase;
    }
    .speaker-narration {
      color: #94a3b8 !important;
      font-size: 10px !important;
      font-weight: 800 !important;
      letter-spacing: 0.05em;
    }
    .speaker-shout {
      color: #dc2626 !important;
      font-weight: 900 !important;
    }

    /* Dialogue Texts */
    .bubble-dialogue-text {
      font-size: clamp(12px, 1.35vw, 14.5px);
      font-weight: 800;
      color: #0f172a;
      line-height: 1.35;
      word-break: keep-all;
      margin: 0;
      white-space: pre-wrap;
    }
    .narration-dialogue-text {
      font-size: clamp(11.5px, 1.3vw, 14px);
      font-weight: 700;
      color: #f8fafc;
      line-height: 1.38;
      word-break: keep-all;
      margin: 0;
      white-space: pre-wrap;
    }
    .thought-dialogue-text {
      font-size: clamp(12px, 1.35vw, 14.5px);
      font-weight: 700;
      font-style: italic;
      color: #1e293b;
      line-height: 1.35;
      word-break: keep-all;
      margin: 0;
      white-space: pre-wrap;
    }
    .shout-dialogue-text {
      font-size: clamp(12.5px, 1.45vw, 15.5px);
      font-weight: 900;
      color: #000000;
      line-height: 1.3;
      word-break: keep-all;
      margin: 0;
      white-space: pre-wrap;
    }

    /* SVG Tails */
    .bubble-tail-svg {
      position: absolute;
      width: 22px;
      height: 16px;
      display: block;
      z-index: 25;
      pointer-events: none;
    }
    .tail-svg-bottom-left {
      bottom: -15px;
      left: 16px;
    }
    .tail-svg-bottom-right {
      bottom: -15px;
      right: 16px;
    }
    .tail-svg-top-left {
      top: -15px;
      left: 16px;
    }
    .tail-svg-top-right {
      top: -15px;
      right: 16px;
    }
    .shout-tail-svg {
      width: 26px;
      height: 22px;
    }
    .shout-tail-svg.tail-svg-bottom-left { bottom: -20px; left: 14px; }
    .shout-tail-svg.tail-svg-bottom-right { bottom: -20px; right: 14px; }
    .shout-tail-svg.tail-svg-top-left { top: -20px; left: 14px; }
    .shout-tail-svg.tail-svg-top-right { top: -20px; right: 14px; }

    /* Thought Cloud Trail */
    .thought-tail {
      position: absolute;
      display: flex;
      flex-direction: column;
      gap: 3px;
      pointer-events: none;
      z-index: 25;
    }
    .thought-tail .thought-dot {
      display: block;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #0f172a;
    }
    .thought-tail .dot-1 { width: 10px; height: 10px; }
    .thought-tail .dot-2 { width: 7px; height: 7px; }
    .thought-tail .dot-3 { width: 5px; height: 5px; }
    .thought-tail-bottom-left { bottom: -22px; left: 16px; align-items: flex-start; }
    .thought-tail-bottom-right { bottom: -22px; right: 16px; align-items: flex-end; }
    .thought-tail-top-left { top: -22px; left: 16px; flex-direction: column-reverse; align-items: flex-start; }
    .thought-tail-top-right { top: -22px; right: 16px; flex-direction: column-reverse; align-items: flex-end; }

    /* Legacy compatibility */
    .webtoon-bubble { position: relative; }
    .narration-box { position: relative; }
    .style-bubble { }
    .style-narration { }

    @media (max-width: 640px) {
      .bubble-container {
        max-width: 94% !important;
      }
      .bubble-talk, .bubble-narration, .bubble-thought, .bubble-shout {
        padding: 5px 9px !important;
        overflow-wrap: break-word !important;
      }
      .speaker-tag {
        font-size: clamp(9px, 2.3vw, 10.5px) !important;
        margin-bottom: 1px !important;
      }
      .bubble-dialogue-text, .narration-dialogue-text, .thought-dialogue-text, .shout-dialogue-text {
        font-size: clamp(11px, 2.8vw, 13.5px) !important;
        line-height: 1.32 !important;
        overflow-wrap: break-word !important;
      }
      .bubble-tail-svg {
        transform: scale(0.82);
      }
    }

    /* Reading Progress Bar */
    #reading-progress {
      transition: width 0.1s ease-out;
    }

    /* Star Rating System */
    .star-btn {
      cursor: pointer;
      transition: transform 0.15s ease, color 0.15s ease;
    }
    .star-btn:hover {
      transform: scale(1.2);
    }
    .star-filled {
      color: #f59e0b;
    }
    .star-empty {
      color: #334155;
    }

    /* Nav Buttons */
    .btn-nav-ep {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-nav-ep:hover:not(:disabled) {
      background: rgba(51, 65, 85, 0.9);
      transform: translateY(-1px);
    }
    #btn-footer-next-cut:hover:not(:disabled) {
      background: #00f06c !important;
      color: #042612 !important;
      transform: translateY(-1px);
    }
    .btn-nav-ep:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    /* PC Side Cut Navigation Paddles */
    .pc-cut-paddle {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      z-index: 35;
      width: 96px;
      padding: 14px 10px;
      border-radius: 18px;
      background: rgba(8, 11, 17, 0.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(51, 65, 85, 0.85);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: #cbd5e1;
      cursor: pointer;
      user-select: none;
      transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
    }
    .pc-cut-paddle-left {
      left: max(12px, calc(50% - (var(--viewer-current-max-w, min(100vw, calc((100dvh - 136px) * 0.746))) / 2) - 112px));
    }
    .pc-cut-paddle-right {
      right: max(12px, calc(50% - (var(--viewer-current-max-w, min(100vw, calc((100dvh - 136px) * 0.746))) / 2) - 112px));
      border-color: rgba(0, 220, 100, 0.45);
      background: linear-gradient(180deg, rgba(6, 28, 20, 0.9) 0%, rgba(8, 11, 17, 0.92) 100%);
    }
    .pc-cut-paddle:hover:not(:disabled) {
      transform: translateY(calc(-50% - 2px)) scale(1.03);
      background: rgba(15, 23, 42, 0.96);
      border-color: rgba(148, 163, 184, 0.7);
      color: #ffffff;
    }
    .pc-cut-paddle-right:hover:not(:disabled) {
      background: linear-gradient(180deg, rgba(6, 48, 32, 0.96) 0%, rgba(15, 23, 42, 0.96) 100%);
      border-color: #00dc64;
      box-shadow: 0 14px 36px rgba(0, 220, 100, 0.22);
    }
    .pc-cut-paddle:active:not(:disabled) {
      transform: translateY(-50%) scale(0.97);
    }
    .pc-cut-paddle:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
    .pc-paddle-arrow {
      font-size: 18px;
      line-height: 1;
      font-weight: 900;
    }
    .pc-paddle-label {
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
      letter-spacing: -0.01em;
    }
    .pc-paddle-badge {
      font-size: 11px;
      font-weight: 900;
      color: #00dc64;
      background: rgba(0, 220, 100, 0.14);
      border: 1px solid rgba(0, 220, 100, 0.35);
      border-radius: 9999px;
      padding: 1px 8px;
      font-variant-numeric: tabular-nums;
      margin-top: 2px;
    }
    .pc-paddle-key {
      font-size: 9px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.02em;
      margin-top: 1px;
    }

    /* Drawer Modal Transition */
    #episode-drawer-modal {
      transition: opacity 0.25s ease;
    }
    #episode-drawer-content {
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .drawer-open #episode-drawer-modal {
      opacity: 1;
      pointer-events: auto;
    }
    .drawer-open #episode-drawer-content {
      transform: translateX(0);
    }
    .drawer-closed #episode-drawer-modal {
      opacity: 0;
      pointer-events: none;
    }
    .drawer-closed #episode-drawer-content {
      transform: translateX(100%);
    }

    /* Settings Bar Drawer */
    #viewer-settings {
      transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
    }