/* AI CineCatch — 공통 스타일 (다크 시네마틱 톤) */
/* gzip 적용 후 Cloudflare 캐시 키(?v=mtime)를 갱신한다. */
      /* ────────────────────────────────────────────────────────
         1. CSS 변수 및 전역 스타일 (다크 프리미엄 시네마 톤)
         ──────────────────────────────────────────────────────── */
      html {
        font-size: 110%; /* 가독성 및 시인성을 위해 데스크톱 기본 글꼴 크기 10% 상향 조정 */
        scroll-behavior: smooth;
      }
      @media (max-width: 768px) {
        html {
          font-size: 100%; /* 모바일에서는 원본 크기를 유지해 치수 깨짐 방지 */
        }
      }

      /* ── 히어로 배경 롤링 (bn1~bn7 · hero-banner-roll.js) ── */
      [data-site-hero-banner] {
        background-size: cover;
        background-position: center 35%;
        background-repeat: no-repeat;
        transition: opacity 1s ease-in-out;
      }

      .portal-hero-banner-bg {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
      }

      /* "연재 시리즈" 히어로 배너 배경 및 모바일 조절 */
      #seriesHeroBg {
        opacity: 0.35 !important;
      }

      /* PC/태블릿: 본문 모바일 전용 요약 필터 바는 숨김 (PC 검색·드롭다운과 겹침 방지) */
      .mobile-only-filter-bar {
        display: none !important;
      }

      /* PC 필터 바: 검색창 + 드롭다운 한 줄 유지 (라벨 길이로 인한 줄바꿈 방지) */
      @media (min-width: 769px) {
        .filter-bar-section > div:not(.mobile-only-filter-bar) {
          flex-wrap: nowrap !important;
        }
        .filter-bar-section > div:not(.mobile-only-filter-bar) > div {
          flex-wrap: nowrap !important;
        }
      }

      @media (max-width: 768px) {
        #seriesHeroBg {
          opacity: 0.78 !important; /* 모바일에서는 작은 화면 크기에 맞게 배경 이미지가 한층 선명하고 우아하게 드러나도록 불투명도를 0.78로 상향배정 */
        }
        
        /* 모바일 반응형 필터 구조 개선 */
        .filter-bar-section .search-field-wrapper {
          display: none !important; /* 본문 필터 영역의 검색창은 모바일에서 제거 */
        }
        .filter-bar-section .select-wrapper {
          display: none !important; /* 모바일에서는 3줄 드롭다운 모두 숨기기 */
        }
        .filter-bar-section > div:not(.mobile-only-filter-bar) {
          padding: 0 !important;
          margin: 0 !important;
        }
        .filter-bar-section {
          background: transparent !important;
          border: none !important;
          box-shadow: none !important;
          padding: 8px 0 !important; /* 외곽 컨테이너 길이를 다시 최대 너비로 복구 */
          margin-bottom: 8px !important;
        }
        .mobile-only-filter-bar {
          display: flex !important; /* 모바일 전용 요약 필터 바 노출 */
          padding: 0 18px !important; /* 내부 패딩을 강제하여 아이콘과 텍스트가 경계선에 붙지 않도록 확실히 지정 */
        }
      }

      :root {
        --bg-primary: #0f1113;       /* 부드러운 다크 시네마 톤 */
        --bg-secondary: #121212;     /* 정돈된 프리미엄 카드 배경색 */
        --bg-tertiary: #1a1a1a;      /* 은은한 고밀도 호버 레이어 */
        --bg-glass: rgba(18, 18, 18, 0.85); /* 시네마 글래스모피즘 */
        --border-color: rgba(255, 255, 255, 0.08); /* 극소화된 화이트 은선 */
        --border-focus: rgba(201, 134, 26, 0.35); /* 앰버 골드 포커스 효과 */
        
        --text-main: #f3f4f6;        /* 모던 그레이 100 */
        --text-sub: #9ca3af;         /* 차분한 그레이 400 */
        --text-muted: #6b7280;       /* 부드러운 다크 그레이 500 */
        
        /* 고급 영화제 딥 골드/앰버 톤 및 보조 포인트 정의 (75:15:7:3 비율 준수) */
        --accent-amber: #c9861a;     /* 메인 시그니처 딥 시네마 앰버 */
        --accent-orange: var(--accent-amber); /* 기존 변수 호환용 실시간 치환 */
        --accent-gold: #f2c14e;      /* 어워드 및 하이라이트 골드 */
        --accent-mint: #10b981;      /* 활성 상태 전용 민트그린 */
        --accent-pink: var(--accent-amber); /* 완화된 앰버 */
        --accent-blue: #7c3aed;      /* ⚠️ 보조 3% 바이올렛 포인트 전향 */
        --accent-violet: #7c3aed;    /* 3% 클래시 바이올렛 */
        --accent-cyan: #06b6d4;      /* 3% 테크 시안 */
        
        --gradient-orange: linear-gradient(135deg, #d98a1f 0%, #8a3f12 100%); /* 버튼 전용 앰버 그라디언트 */
        --gradient-gold: linear-gradient(135deg, #f2c14e 0%, #c9861a 100%);
        --gradient-cinema: linear-gradient(135deg, #d98a1f 0%, #8a3f12 100%); /* 시네마톤 메인 그라디언트 */
        --gradient-dark: linear-gradient(to top, #0f1113 0%, rgba(15, 17, 19, 0) 100%);
        --gradient-badge: linear-gradient(90deg, #9f1239 0%, #c9861a 100%); /* NEW 배지용 딥 RED/앰버 */
        
        /* 레거시 호환 — 상세 정의는 font-stable.css */
        --font-sans: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", "Segoe UI", Arial, sans-serif;
        --font-ui: "AICineCatchPretendard", "Noto Sans KR", "Malgun Gothic", "Segoe UI", Arial, sans-serif;
        --font-display: "AICineCatchPretendard", "Noto Sans KR", "Malgun Gothic", "Segoe UI", Arial, sans-serif;
        --font-body: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", "Segoe UI", Arial, sans-serif;
        --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", "Cascadia Code", monospace;
        --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        
        --max-container: 1760px;     /* 가독성 증대에 맞춘 광대역 본문 콘텐츠 최대 폭 (1760px로 조정) */
      }

      /* 다국어 선택자 바인딩 (한영 전환 간편 제어) */
      html[lang="ko"] .lang-en { display: none !important; }
      html[lang="en"] .lang-ko { display: none !important; }

      /* 기본 초기화 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      body {
        background-color: var(--bg-primary);
        color: var(--text-main);
        font-family: var(--font-body, var(--font-sans));
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
        line-height: 1.5;
        min-width: 360px; /* 모바일 최소 폭: 360px */
      }

      a {
        color: inherit;
        text-decoration: none;
        transition: var(--transition-fast);
      }

      input, button, select, textarea {
        font-family: inherit;
        background: none;
        border: none;
        color: inherit;
        outline: none;
      }

      /* 드롭다운 셀렉트 박스 옵션 배경색 가독성 완벽 개선 */
      select option {
        background-color: #121421 !important; /* 럭셔리 다크 테마 배경색 강제 지정 */
        color: #ffffff !important; /* 텍스트 흰색 절대 보장 */
      }

      button {
        cursor: pointer;
      }

      /* 스크롤바 디자인 */
      ::-webkit-scrollbar {
        width: 8px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        background: var(--bg-primary);
      }
      ::-webkit-scrollbar-thumb {
        background: #25283a;
        border-radius: 99px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: var(--accent-orange);
      }

      /* ────────────────────────────────────────────────────────
         2. 공통 유틸리티 및 디바이스 표준 가이드 (시니어 권장 화면규격)
         - Desktop 기본 기준: 1440px / Wide desktop 기준: 1920px
         - 콘텐츠 최대 폭: 1600~1760px (Header / Hero / Featured / Card Grid)
         - 긴 텍스트 리뷰 영역: max-width 1200~1280px
         - 모바일 최소 폭: 360px / 모바일 기본: 390px / 태블릿: 768px
         ──────────────────────────────────────────────────────── */
      .container {
        width: 100%;
        max-width: var(--max-container); /* 1760px 적용 */
        margin: 0 auto;
        padding: 0 32px; /* 데스크톱에서 좀 더 깊고 풍부한 거터 */
        box-sizing: border-box;
      }

      @media (max-width: 768px) {
        .container {
          padding: 0 16px; /* 모바일/태블릿 기본 패딩 */
        }
      }

      /* 섹션 기본 스타일 */
      .section-space {
        padding: 64px 0;
        position: relative;
      }
      @media (max-width: 768px) {
        .section-space {
          padding: 40px 0;
        }
      }

      /* 섹션 헤더 (타이틀 + 부가정보) */
      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 24px;
      }

      .section-title-wrap {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .section-title {
        font-size: 1.6rem;
        font-family: var(--font-ui, var(--font-sans));
        font-weight: 850;
        letter-spacing: -0.03em;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .section-title .badge-count {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-sub);
        background: rgba(255, 255, 255, 0.05);
        padding: 2px 8px;
        border-radius: 99px;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .section-desc {
        font-size: 0.9rem;
        color: var(--text-sub);
      }

      /* 더보기 링크 */
      .view-all {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-sub);
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        border-radius: 99px;
        border: 1px solid var(--border-color);
        background-color: rgba(255, 255, 255, 0.02);
      }
      .view-all:hover {
        color: var(--accent-gold);
        border-color: var(--accent-gold);
        background-color: rgba(201, 134, 26, 0.05);
      }

      /* 배지 스타일 */
      .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        line-height: 1;
      }

      .badge-new {
        background: var(--gradient-badge);
        color: #fff;
        font-size: 0.62rem;
        padding: 1px 5px;
        letter-spacing: 0.05em;
        font-weight: 800;
        border-radius: 3px;
        box-shadow: 0 2px 6px rgba(159, 18, 57, 0.2);
        display: inline-block;
      }

      .badge-ongoing {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        color: #ffffff;
        font-weight: 800;
        font-size: 0.62rem;
        padding: 4px 9px;
        letter-spacing: 0.04em;
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 4px 10px rgba(0,0,0,0.45);
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        display: inline-block;
      }

      .badge-completed, .badge-complete {
        background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%);
        color: #f5f3ff;
        font-weight: 800;
        font-size: 0.62rem;
        padding: 4px 9px;
        letter-spacing: 0.04em;
        border-radius: 6px;
        border: 1px solid rgba(167, 139, 250, 0.35);
        box-shadow: 0 4px 12px rgba(109, 40, 217, 0.3);
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        display: inline-block;
      }

      /* AI Films & Shorts Badge Colors */
      .badge-film {
        background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
        color: #ffffff;
      }
      .badge-mv {
        background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
        color: #ffffff;
      }
      .badge-ad {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        color: #ffffff;
      }
      .badge-trailer {
        background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%);
        color: #ffffff;
      }
      .badge-exp {
        background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
        color: #ffffff;
      }
      .badge-anime {
        background: linear-gradient(135deg, #6366f1 0%, #312e81 100%);
        color: #ffffff;
      }

      /* AI Films & Shorts — PC 5열·전체폭은 pages/home.css, 가로형 카드는 아래 ongoing 규칙 공유 */
      @media (min-width: 1025px) {
        /* PC에서는 단편 카드 전부 노출 (모바일 4개 제한 규칙 무효화) */
        #aiFilmsShorts .film-shorts-grid > .series-card {
          display: flex !important;
        }
      }

      .badge-genre {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-sub);
        border: 1px solid var(--border-color);
      }

      /* ────────────────────────────────────────────────────────
         3. Header (헤더) 스타일
         ──────────────────────────────────────────────────────── */
      header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px; /* 10% 상향 조정 */
        background-color: var(--bg-glass);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border-color);
        /* 카드 hover z-index(102~110, title-assist.css)보다 위 — 메뉴 클릭 가로막힘 방지 */
        z-index: 200;
        transition: var(--transition-smooth);
      }

      header.scrolled {
        background-color: rgba(6, 6, 10, 0.95);
        height: 72px; /* 10% 상향 조정 */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      }

      .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        max-width: var(--max-container);
        margin: 0 auto;
        padding: 0 24px;
      }

      /* 로고 영역 */
      .logo {
        display: flex;
        align-items: center;
        gap: 12px; /* 여백 10% 확장 */
        font-family: var(--font-display, var(--font-ui));
        font-weight: 900;
        font-size: 1.55rem; /* 글꼴 크기 10% 확장 */
        letter-spacing: -0.05em;
        color: var(--text-main); 
        cursor: pointer;
      }
      .logo-icon {
        color: #0a0a0c;
        background: var(--gradient-cinema); 
        width: 36px; /* 32px -> 36px (10% 이상 확장) */
        height: 36px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: 900;
        box-shadow: 0 0 15px rgba(201, 134, 26, 0.25);
      }

      /* 네비게이션 메뉴 */
      nav {
        display: flex;
        align-items: center;
        gap: 28px;
      }
      @media (max-width: 1024px) {
        nav {
          display: none; /* 모바일/태블릿 대안 가릴 예정 */
        }
      }

      .nav-link {
        font-size: 0.92rem;
        font-family: var(--font-ui, var(--font-sans));
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--text-sub);
        position: relative;
        padding: 8px 0;
        transition: var(--transition-fast);
      }
      .nav-link:hover {
        color: var(--accent-gold);
      }
      .nav-link.active {
        color: var(--accent-orange);
      }
      .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--accent-orange); /* Orange bottom indicator */
        transition: var(--transition-fast);
        transform: translateX(-50%);
        border-radius: 99px;
      }
      .nav-link:hover::after, .nav-link.active::after {
        width: 100%;
      }

      /* 헤더 우측 인터랙션 그룹 */
      .header-right {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      /* 미니 검색창 */
      .search-container {
        position: relative;
        display: flex;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 99px;
        padding: 5px 14px;
        width: 220px;
        transition: var(--transition-smooth);
      }
      .search-container:focus-within {
        width: 280px;
        border-color: var(--border-focus);
        background-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 12px rgba(201, 134, 26, 0.15);
      }
      /*
       * 메뉴 7개. 1024px 이하는 위쪽 규칙대로 nav 를 숨긴다.
       * 이 블록은 기본 .nav-link / .search-container 보다 뒤에 둔다.
       */
      @media (max-width: 1500px) and (min-width: 1361px) {
        nav { gap: 14px; }
        .nav-link { font-size: 0.82rem; white-space: nowrap; }
        .search-container { width: 160px; }
        .search-container:focus-within { width: 210px; }
      }
      @media (max-width: 1360px) and (min-width: 1025px) {
        .header-container { padding: 0 12px; }
        .logo { font-size: 1.2rem; gap: 8px; }
        nav { gap: 8px; flex-shrink: 0; }
        .nav-link { font-size: 0.72rem; white-space: nowrap; }
        .header-right { gap: 8px; }
        .search-container { width: 112px; }
        .search-container:focus-within { width: 160px; }
      }
      .search-input {
        width: 100%;
        font-size: 0.85rem;
        color: var(--text-main);
      }
      .search-input::placeholder {
        color: var(--text-muted);
      }
      .search-icon {
        color: var(--text-sub);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      /* 모바일 전용 필터 아이콘 및 바텀시트 백드롭 기본 데스크톱에서 가림 */
      .mobile-filter-trigger, .mobile-filter-backdrop {
        display: none;
      }

      /* 작품등록하기 버튼 */
      .btn-submit {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--gradient-orange); /* Orange gradient */
        color: #ffffff;
        padding: 6px 16px;
        border-radius: 6px;
        font-weight: 750;
        font-size: 0.8rem;
        box-shadow: 0 4px 12px rgba(201, 134, 26, 0.2);
        transition: var(--transition-fast);
      }
      .btn-submit:hover {
        background: var(--gradient-cinema);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(201, 134, 26, 0.35);
      }

      /* 한영 변환 버튼 및 드롭다운 시스템 */
      .lang-dropdown-container {
        position: relative;
        display: inline-block;
      }
      .lang-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        background-color: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        padding: 5px 12px;
        border-radius: 6px;
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        color: var(--text-main);
        transition: var(--transition-fast);
      }
      .lang-toggle:hover {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: var(--text-sub);
      }
      .lang-dropdown-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        background-color: rgba(18, 19, 23, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 6px;
        padding: 4px 0;
        min-width: 105px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
        z-index: 1000;
        display: none;
        flex-direction: column;
        backdrop-filter: blur(8px);
      }
      .lang-dropdown-menu.show {
        display: flex;
      }
      .lang-dropdown-item {
        background: none;
        border: none;
        text-align: left;
        width: 100%;
        padding: 8px 14px;
        font-size: 0.78rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .lang-dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.9);
      }
      .lang-dropdown-item.active {
        color: var(--accent-gold);
        font-weight: 700;
      }

      /* 모바일 전용 햄버거 토글 */
      .mobile-menu-toggle {
        display: none;
        flex-direction: column;
        justify-content: space-between;
        width: 20px;
        height: 16px;
        cursor: pointer;
      }
      .mobile-menu-toggle span {
        display: block;
        height: 2px;
        width: 100%;
        background-color: var(--text-main);
        border-radius: 9px;
        transition: var(--transition-fast);
      }
      @media (max-width: 1024px) {
        .mobile-menu-toggle {
          display: flex;
        }
      }
      /*
       * 태블릿(769–1024): 헤더를 명시적 2행으로 나눈다.
       * 1행 — 로고 + 언어 + 계정/작품등록 + 햄버거 (검색과 자리를 나누지 않음)
       * 2행 — 헤더 가용 너비 전체 검색창. PC용 focus 확장은 여기서 끈다.
       * 휴대폰(≤768) 2행·하단 내비는 아래 모바일 블록이 그대로 담당한다.
       */
      @media (max-width: 1024px) and (min-width: 769px) {
        header,
        header.scrolled {
          height: auto;
        }

        .header-container {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          height: auto;
          padding: 10px 20px 12px;
          gap: 10px 8px;
        }

        /* header-right 껍질을 벗겨 자식이 헤더 컨테이너에 바로 붙게 한다 */
        .header-right {
          display: contents;
        }

        .logo {
          order: 1;
          flex: 0 0 auto;
          margin-right: auto;
          white-space: nowrap;
        }
        .logo span {
          white-space: nowrap;
        }

        .noti-container {
          order: 2;
          flex: 0 0 auto;
        }
        .lang-dropdown-container {
          order: 3;
          flex: 0 0 auto;
        }
        .header-auth-btn {
          order: 4;
          flex: 0 0 auto;
          white-space: nowrap;
        }
        .profile-container {
          order: 5;
          flex: 0 0 auto;
        }
        .btn-submit {
          order: 6;
          flex: 0 0 auto;
          white-space: nowrap;
        }
        .mobile-menu-toggle {
          order: 7;
          flex: 0 0 auto;
        }

        /* 태블릿은 PC형 알림을 쓰고, 모바일 전용 벨은 숨긴다 */
        .mobile-noti-container {
          display: none !important;
        }

        /*
         * 검색은 둘째 행 전체 폭. focus-within 으로 외부 너비가 늘지 않게
         * PC(280px) · 기존 태블릿(220px) 확장 규칙을 여기서 덮는다.
         */
        .search-container,
        .search-container:focus-within {
          order: 20;
          flex: 1 1 100%;
          width: 100%;
          max-width: 100%;
          min-width: 0;
          box-sizing: border-box;
          gap: 8px;
          transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
        }
        .search-input {
          flex: 1 1 auto;
          width: auto;
          min-width: 0;
        }
        .search-icon {
          flex: 0 0 auto;
        }

      }

      /* ────────────────────────────────────────────────────────
         4. Hero Section (시네마틱 히어로 배너)
         ──────────────────────────────────────────────────────── */
      .hero-section {
        position: relative;
        min-height: 85vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 110px;
        padding-bottom: 70px;
        overflow: hidden;
      }

      /* 시네마틱 슬라이드 배경용 구성 */
      .hero-slides {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;
      }
      .hero-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
      }
      .hero-slide.active {
        opacity: 0.35; /* 데스크톱에서 좀 더 선명하고 밝게 비주얼 투영 */
        z-index: 2;
      }
      .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(10, 10, 12, 0.25) 0%, rgba(10, 10, 12, 0.6) 60%, #0a0a0c 100%);
        z-index: 3;
        pointer-events: none;
      }

      /* 히어로 아트 그레이디언트 배경 (백업 및 폴백용 기본 라이너) */
      .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 70% 30%, rgba(201, 134, 26, 0.08) 0%, rgba(124, 58, 237, 0.04) 35%, #0a0a0c 75%),
                    linear-gradient(135deg, #07070a 0%, #0d0d12 100%);
        /* 슬라이드(.hero-slide z-index:1)보다 아래. 같으면 뒤에 그려져 이미지가 검게 가려진다. */
        z-index: 0;
      }
      
      /* 백그라운드 무광 우주 그리드 */
      .hero-bg::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(rgba(124, 58, 237, 0.008) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(124, 58, 237, 0.008) 1px, transparent 1px);
        background-size: 50px 50px;
        opacity: 0.6;
        z-index: 2;
      }

      .hero-container {
        position: relative;
        z-index: 10;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 44px; /* 10% 상향 조정 */
        align-items: center;
        width: 100%;
        max-width: var(--max-container);
        margin: 0 auto;
        padding: 0 24px;
      }
      @media (max-width: 991px) {
        .hero-container {
          grid-template-columns: 1fr;
          text-align: center;
          gap: 48px;
        }
      }

      .hero-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      @media (max-width: 991px) {
        .hero-content {
          align-items: center;
        }
      }

      /* 트렌디한 서브타이틀 칩 */
      .hero-tagline {
        background: rgba(242, 193, 78, 0.05);
        border: 1px solid rgba(242, 193, 78, 0.15);
        padding: 6px 16px;
        border-radius: 99px;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--accent-gold);
        letter-spacing: 0.05em;
        margin-bottom: 24px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .hero-title {
        font-size: 3.2rem;
        line-height: 1.08;
        font-family: var(--font-display, var(--font-ui));
        font-weight: 900;
        letter-spacing: -0.045em;
        margin-bottom: 20px;
      }
      .hero-title span {
        background: var(--gradient-cinema);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      @media (max-width: 768px) {
        .hero-title {
          font-size: 2.2rem;
        }
      }

      .hero-desc {
        font-size: 1.1rem;
        color: var(--text-sub);
        line-height: 1.6;
        margin-bottom: 36px;
        max-width: 520px;
      }
      @media (max-width: 991px) {
        .hero-desc {
          margin-bottom: 28px;
        }
      }

      /* 히어로 액션 버튼들 */
      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
      }

      .btn {
        display:inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 26px;
        border-radius: 99px;
        font-weight: 700;
        font-size: 0.9rem;
        transition: var(--transition-smooth);
      }

      .btn-primary {
        background: var(--gradient-cinema);
        color: #ffffff;
        box-shadow: 0 4px 15px rgba(217, 138, 31, 0.2);
        border: none;
      }
      .btn-primary:hover {
        transform: translateY(-2px);
        background: var(--gradient-cinema);
        filter: brightness(1.1);
        box-shadow: 0 6px 20px rgba(217, 138, 31, 0.35);
      }

      .btn-secondary {
        border: 1px solid rgba(217, 138, 31, 0.25);
        background-color: rgba(217, 138, 31, 0.04);
        color: #ffffff;
        backdrop-filter: blur(5px);
      }
      .btn-secondary:hover {
        border-color: var(--accent-gold);
        background-color: rgba(217, 138, 31, 0.08);
        color: var(--accent-gold);
        transform: translateY(-1px);
      }

      /* 히어로 우측 메인 기하학 시각 배너 포스터 */
      .hero-visual {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .hero-poster-frame {
        position: relative;
        width: 396px; /* 360px -> 396px (10% 상향 조정) */
        height: 528px; /* 480px -> 528px (10% 상향 조정) */
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 30px 60px rgba(0,0,0,0.65), 
                    0 0 40px rgba(124, 58, 237, 0.04);
        background: linear-gradient(145deg, #111115 0%, #08080a 100%);
        transition: var(--transition-smooth);
      }
      .hero-poster-frame:hover {
        transform: rotateY(-3deg) rotateX(6deg) scale(1.02);
        box-shadow: 0 40px 80px rgba(0,0,0,0.85), 
                    0 0 40px rgba(242, 193, 78, 0.15);
        border-color: rgba(242, 193, 78, 0.25);
      }

      /* 화려한 인공지능 스타일 포스터 내 그레이디언트 예술 */
      .poster-art {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #1f1105 0%, #111115 50%, #08080a 100%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 30px;
        z-index: 1;
      }
      /* 사이버 네온 오버레이 */
      .poster-art::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(201, 134, 26, 0.08) 0%, transparent 60%);
        animation: spin 20s linear infinite;
        z-index: 2;
      }
      @keyframes spin {
        100% { transform: rotate(360deg); }
      }

      .poster-tag {
        position: relative;
        z-index: 5;
        background: rgba(10, 10, 12, 0.6);
        backdrop-filter: blur(4px);
        padding: 4px 12px;
        border-radius: 99px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        align-self: flex-start;
        border: 1px solid rgba(242, 193, 78, 0.2);
        color: var(--accent-gold); /* Gold accent color */
      }

      .poster-info {
        position: relative;
        z-index: 5;
        display: flex;
        flex-direction: column;
        gap: 8px;
        background-image: var(--gradient-dark);
        margin: -30px;
        padding: 50px 30px 30px 30px;
      }

      .poster-title {
        font-size: 1.8rem;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.02em;
        text-shadow: 0 2px 10px rgba(0,0,0,0.8);
      }

      .poster-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.8rem;
        color: var(--text-sub);
      }

      /* ────────────────────────────────────────────────────────
         5. Today’s New Episodes (오늘 등록된 에피소드)
         ──────────────────────────────────────────────────────── */
      .scroll-container-wrap {
        position: relative;
        width: 100%;
      }

      /* 제어 버튼 (둥글고 멋진 화살표) */
      .scroll-btn {
        position: absolute;
        top: 50%;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: #0c0c0e; /* Deep grey anthracite sidebar tone */
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
        z-index: 10;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4);
        transition: var(--transition-fast);
        opacity: 0;
      }
      .scroll-container-wrap:hover .scroll-btn {
        opacity: 1;
      }
      .scroll-btn:hover {
        background-color: var(--accent-orange); 
        border-color: var(--accent-gold);     
        box-shadow: 0 0 15px rgba(201, 134, 26, 0.4);
      }
      .scroll-btn-left {
        left: -22px;
      }
      .scroll-btn-right {
        right: -22px;
      }
      @media (max-width: 1280px) {
        .scroll-btn-left { left: 8px; }
        .scroll-btn-right { right: 8px; }
        .scroll-btn { opacity: 1; }
      }

      .episodes-scroll {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding: 10px 0;
        scrollbar-width: none; /* 파이어폭스 대응 */
      }
      .episodes-scroll::-webkit-scrollbar {
        display: none; /* 크롬 스크롤 바 숨김 */
      }

      /* 에피소드 카드 컴포넌트 */
      .episode-card {
        flex: 0 0 280px; /* 고정 크기 가로 배치 */
        background-color: var(--bg-secondary);
        border-radius: 12px;
        border: 1px solid var(--border-color);
        overflow: hidden;
        transition: var(--transition-smooth);
        cursor: pointer;
        position: relative;
      }
      
      .episode-card:hover {
        transform: translateY(-4px);
        border-color: rgba(242, 193, 78, 0.22); 
        background-color: var(--bg-tertiary);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.45), 
                    0 0 15px rgba(124, 58, 237, 0.06);
      }

      .thumb-wrap {
        position: relative;
        width: 100%;
        height: 160px;
        overflow: hidden;
        background: #170e06;
      }

      /* 썸네일 아트 (그레이디언트 혹은 배경 이미지 기반) */
      .thumb-art {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 850;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
        text-shadow: 0 2px 8px rgba(0,0,0,0.9);
        transition: var(--transition-smooth);
        position: relative;
        z-index: 2;
      }
      .thumb-art::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(10,10,12,0.6) 100%);
        z-index: -1;
      }
      /* 썸네일 중앙 장르 워터마크 — 긴 장르명도 2줄까지 자연스럽게 */
      .thumb-art .thumb-art-genre {
        position: relative;
        z-index: 1;
        text-align: center;
        padding: 0 12px;
        max-width: 100%;
        line-height: 1.3;
        word-break: keep-all;
      }

      /* 포스터형 썸네일 — 완결 대표 배너 등 장르 워터마크 (thumb-art-genre와 동일 톤) */
      .poster-art-generic .poster-art-genre {
        position: relative;
        z-index: 1;
        text-align: center;
        padding: 0 12px;
        max-width: 100%;
        line-height: 1.3;
        word-break: keep-all;
        font-size: 0.8rem;
        font-weight: 850;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
      }
      .episode-card:hover .thumb-art {
        transform: scale(1.05);
      }

      /* 썸네일 오버레이 플레이 버튼 데코 */
      .thumb-play-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(8, 8, 13, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: var(--transition-fast);
        z-index: 3;
      }
      .episode-card:hover .thumb-play-overlay,
      .series-card:hover .thumb-play-overlay,
      .binge-banner:hover .thumb-play-overlay {
        opacity: 1;
      }
      .circle-play-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: #fff;
        color: var(--bg-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: scale(0.85);
        transition: var(--transition-smooth);
        box-shadow: 0 0 15px rgba(255,255,255,0.4);
      }
      .episode-card:hover .circle-play-btn,
      .series-card:hover .circle-play-btn,
      .binge-banner:hover .circle-play-btn {
        transform: scale(1);
      }

      /* 에피소드 러닝타임 정적 태그 */
      .runtime-tag {
        position: absolute;
        bottom: 8px;
        right: 8px;
        padding: 2px 6px;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.75);
        font-size: 0.7rem;
        font-weight: 600;
        z-index: 4;
        color: #fff;
      }

      /* 신작 뱃지 */
      .new-badge-absolute {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 4;
      }
      .episode-genre-absolute {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 4 !important;
      }
      .episode-badge-absolute {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        z-index: 4 !important;
      }
      .badge-genre-pill {
        display: inline-block !important;
        padding: 2.5px 6px !important;
        font-size: 0.58rem !important;
        border-radius: 4px !important;
        font-weight: 850 !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        background: rgba(11, 12, 16, 0.88) !important;
        backdrop-filter: blur(4px) !important;
        border: 1px solid rgba(242, 142, 53, 0.3) !important;
        color: var(--accent-orange) !important;
        line-height: 1.1 !important;
      }
      .badge-today-release {
        display: inline-block !important;
        padding: 2.5px 6px !important;
        font-size: 0.58rem !important;
        border-radius: 4px !important;
        font-weight: 950 !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
        line-height: 1.1 !important;
      }
      .badge-rising {
        display: inline-block !important;
        padding: 2.5px 6px !important;
        font-size: 0.58rem !important;
        border-radius: 4px !important;
        font-weight: 950 !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        background: linear-gradient(135deg, #f2a235 0%, #c9861a 100%) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 2px 8px rgba(242, 162, 53, 0.25) !important;
        line-height: 1.1 !important;
      }

      .episode-meta-primary {
        position: absolute;
        bottom: 8px;
        left: 8px;
        z-index: 4;
        font-size: 0.75rem;
        font-weight: 700;
        background-color: var(--accent-orange); 
        color: #fff;
        padding: 1px 6px;
        border-radius: 3px;
      }

      /* 내부 정보 렌더링 */
      .episode-info {
        padding: 16px;
      }

      .series-title {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--text-sub);
        margin-bottom: 4px;
        letter-spacing: -0.01em;
      }

      /* 회차 → 작은 간격 → 제목 → 언어 아이콘. space-between 은 🌐 래퍼를 오른쪽 끝으로 민다. */
      .episode-title-block {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        margin-bottom: 6px;
        min-width: 0;
        width: 100%;
      }

      .ep-number {
        font-size: 0.85rem;
        font-weight: 800;
        color: var(--accent-gold); 
        white-space: nowrap;
        flex: 0 0 auto;
      }

      .ep-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
        min-width: 0;
      }

      .ep-desc {
        font-size: 0.8rem;
        color: var(--text-sub);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 36px;
      }

      /* ────────────────────────────────────────────────────────
         6. Featured Ongoing Series (연재 중 AI 시리즈)
         ──────────────────────────────────────────────────────── */
      .series-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 20px;
      }
      @media (max-width: 576px) {
        .series-grid {
          grid-template-columns: repeat(2, 1fr); /* 모바일에서는 2열로 가득 차게 */
          gap: 12px;
        }
      }

      /* 모바일 더보기 버튼 컨테이너 기본값 (PC 등에서는 숨김) */
      .more-series-btn-container, .more-shorts-btn-container, .more-completed-btn-container {
        display: none;
      }

      /* 모바일 전용 런타임 태그 기본 숨김 */
      .mobile-runtime-tag {
        display: none !important;
      }

      /* 포스터 수직 카드 스타일 */
      .series-card {
        background-color: var(--bg-secondary);
        border-radius: 12px;
        border: 1px solid var(--border-color);
        overflow: hidden;
        transition: var(--transition-smooth);
        cursor: pointer;
        display: flex;
        flex-direction: column;
      }
      .series-card:hover {
        transform: translateY(-8px);
        background-color: var(--bg-tertiary);
        border-color: rgba(242, 193, 78, 0.22); 
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.55), 
                    0 0 15px rgba(124, 58, 237, 0.06);
      }

      .poster-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 2 / 2.8; /* 아름다운 영화 포스터 종횡비 */
        overflow: hidden;
        background: #030712;
      }

      .poster-art-generic {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.4); /* 워터마크 영화 타이틀 효과 */
        text-shadow: 0 4px 10px rgba(0,0,0,0.8);
        font-weight: 950;
        font-size: 0.9rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition: var(--transition-smooth);
        position: relative;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 2;
      }
      .poster-art-generic::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(10,10,12,0.6) 100%);
        z-index: -1; /* 텍스트 아래에 어두운 필름 필터 효과 구현 */
      }
      .series-card:hover .poster-art-generic,
      .binge-banner:hover .poster-art-generic {
        transform: scale(1.04);
      }

      .series-badge-absolute {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 5;
      }

      .rating-overlay {
        position: absolute;
        bottom: 8px;
        left: 8px;
        z-index: 5;
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        padding: 2px 7px;
        border-radius: 4px;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--accent-gold);
        display: flex;
        align-items: center;
        gap: 3px;
        border: 1px solid rgba(255, 255, 255, 0.05);
      }

      .rating-overlay:empty,
      .rating-series-inline:empty {
        display: none !important;
        padding: 0;
        border: none;
        background: none;
        min-width: 0;
        min-height: 0;
      }

      #modalRatingText:empty,
      #modalRatingDot[hidden] {
        display: none !important;
      }

      /* Ongoing 및 평점 인라인 클래스 (기본적으로/모바일에서는 미표시) */
      .badge-series-inline,
      .rating-series-inline {
        display: none !important;
      }

      .series-body {
        padding: 14px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .series-card-title {
        font-size: 0.95rem;
        font-family: var(--font-ui, var(--font-sans));
        font-weight: 800;
        letter-spacing: -0.03em;
        margin-bottom: 4px;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .series-progress {
        font-size: 0.78rem;
        color: var(--accent-gold); 
        font-weight: 600;
        margin-bottom: 8px;
      }

      .series-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.75rem;
        color: var(--text-muted);
        border-top: 1px solid rgba(255, 255, 255, 0.04);
        padding-top: 8px;
        gap: 6px;
      }
      .series-card-footer > span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
      }

      /* ────────────────────────────────────────────────────────
         7. Completed AI Series (완결 AI 시리즈)
         ──────────────────────────────────────────────────────── */
      /* 몰아보기(Binge) 추천 특별 카드 레이아웃 */
      .binge-banner {
        width: 100%;
        background: linear-gradient(135deg, rgba(201, 134, 26, 0.04) 0%, rgba(10, 10, 12, 0.6) 100%);
        border: 1.5px solid rgba(201, 134, 26, 0.1);
        border-radius: 16px;
        padding: 32px;
        display: grid;
        grid-template-columns: 1.4fr 1.6fr;
        gap: 30px;
        align-items: center;
        margin-bottom: 32px;
        transition: var(--transition-smooth);
        cursor: pointer;
      }
      .binge-banner:hover {
        border-color: rgba(242, 193, 78, 0.25);
        box-shadow: 0 10px 30px rgba(201, 134, 26, 0.12);
        background: linear-gradient(135deg, rgba(201, 134, 26, 0.08) 0%, rgba(10, 10, 12, 0.7) 100%);
      }
      @media (max-width: 768px) {
        .binge-banner {
          grid-template-columns: 1fr;
          padding: 20px;
          gap: 20px;
        }
      }

      .binge-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .binge-subtitle {
        color: var(--accent-gold);
        font-weight: 700;
        font-size: 0.8rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .binge-title {
        font-size: 1.8rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.2;
      }
      .binge-desc {
        color: var(--text-sub);
        font-size: 0.9rem;
        line-height: 1.5;
      }

      /* ────────────────────────────────────────────────────────
         8. Weekly Popular Series (주간 인기 시리즈 랭킹)
         ──────────────────────────────────────────────────────── */
      .ranking-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
      @media (max-width: 991px) {
        .ranking-grid {
          grid-template-columns: 1fr;
        }
      }

      .ranking-item {
        background-color: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 16px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 16px;
        transition: var(--transition-smooth);
        cursor: pointer;
      }
      .ranking-item:hover {
        transform: translateX(6.0px);
        border-color: rgba(242, 193, 78, 0.22);
        background-color: rgba(255, 255, 255, 0.06);
      }

      .rank-num {
        font-size: 2.2rem;
        font-weight: 900;
        font-style: italic;
        width: 40px;
        text-align: center;
        color: var(--accent-gold); 
        line-height: 1;
      }

      .rank-thumb-art {
        width: 70px;
        height: 90px;
        border-radius: 6px;
        background: #111115;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.05);
      }

      .rank-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .rank-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-main);
      }

      .rank-creator {
        font-size: 0.8rem;
        color: var(--text-sub);
      }

      /* 주간 점수 게이지 바 */
      .rank-score-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
      }
      .rank-score-label {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--accent-gold); 
      }
      .score-bar {
        height: 4px;
        border-radius: 2px;
        background-color: rgba(255, 255, 255, 0.06);
        flex: 1;
        overflow: hidden;
      }
      .score-bar-fill {
        height: 100%;
        background: var(--gradient-badge);
        border-radius: 2px;
      }

      /* ────────────────────────────────────────────────────────
         9. Curator’s Pick (큐레이터 추천 에디토리얼)
         ──────────────────────────────────────────────────────── */
      .curator-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        max-width: var(--max-container); /* 광대역 본문 콘텐츠 최대 폭(4열에 맞춘 시원한 크기) */
        margin: 0 auto;
      }
      
      /* 데스크톱에서는 모바일 전용 캐러셀 UI 숨김 */
      .curator-dots, .creator-dots, .completed-dots {
        display: none !important;
      }
      
      /* 긴 텍스트/리뷰 가독성 최적화 클래스 (요구사항: max-width 1200~1280px) */
      .text-optimal-review {
        max-width: 1200px;
        margin-left: 0;
        margin-right: auto;
        width: 100%;
      }
      @media (max-width: 1200px) {
        .curator-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 768px) {
        .curator-grid {
          grid-template-columns: 1fr;
        }
      }

      .curator-card {
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: relative;
        overflow: hidden;
        transition: var(--transition-smooth);
        cursor: pointer;
      }
      .curator-card:hover {
        border-color: rgba(242, 193, 78, 0.22);
        background-color: var(--bg-tertiary);
        transform: translateY(-4px);
      }
      .curator-card::before {
        content: '"';
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 6rem;
        font-family: Georgia, serif;
        color: rgba(255,255,255,0.03);
        line-height: 1;
      }

      .curator-badge {
        align-self: flex-start;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--accent-gold);
        background-color: rgba(242, 193, 78, 0.08);
        border: 1px solid rgba(242, 193, 78, 0.18);
        padding: 3px 8px;
        border-radius: 4px;
      }

      .curator-quote {
        font-size: 0.98rem;
        font-style: italic;
        line-height: 1.5;
        color: var(--text-main);
        flex: 1;
      }

      .curator-footer {
        display: flex;
        align-items: center;
        gap: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 14px;
      }

      .curator-art-small {
        width: 44px;
        height: 56px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.5rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.45);
        text-shadow: 0 1px 3px rgba(0,0,0,0.8);
        border: 1px solid rgba(255, 255, 255, 0.05);
      }

      .curator-target-title {
        font-weight: 700;
        font-size: 0.85rem;
        color: var(--text-main);
      }
      .curator-name {
        font-size: 0.75rem;
        color: var(--text-muted);
      }

      /* ────────────────────────────────────────────────────────
         10. Browse by Genre (장르별 탐색)
         ──────────────────────────────────────────────────────── */
      .genre-container {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
      }

      .genre-chip {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 24px;
        background-color: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 99px;
        font-weight: 700;
        font-size: 0.92rem;
        color: var(--text-sub);
        transition: var(--transition-smooth);
        cursor: pointer;
      }
      .genre-chip:hover {
        background: var(--gradient-orange); 
        border-color: var(--accent-gold);     
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(201, 134, 26, 0.25);
      }

      .genre-icon {
        font-size: 1.1rem;
      }

      /* ────────────────────────────────────────────────────────
         11. Creator Spotlight (제작자 하이라이트)
         ──────────────────────────────────────────────────────── */
      .creator-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
      }
      @media (max-width: 1400px) {
        .creator-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 992px) {
        .creator-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 576px) {
        .creator-grid {
          grid-template-columns: 1fr;
        }
      }

      .creator-card {
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 24px;
        text-align: center;
        transition: var(--transition-smooth);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }
      .creator-card:hover {
        transform: translateY(-6px);
        background-color: var(--bg-tertiary);
        border-color: rgba(242, 193, 78, 0.22); 
        box-shadow: 0 10px 25px rgba(124, 58, 237, 0.06);
      }

      /* 크리에이터 하이라이트 동적 팔로우 버튼 및 알림 뱃지 */
      .creator-action-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
        width: 100%;
      }
      .creator-follow-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #ddd;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.72rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
        height: 26px;
        box-sizing: border-box;
      }
      .creator-follow-btn:hover {
        background-color: rgba(255, 255, 255, 0.12);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.25);
      }
      .creator-follow-btn.active {
        background-color: rgba(59, 130, 246, 0.16);
        border-color: rgba(59, 130, 246, 0.45);
        color: #60a5fa;
      }
      .creator-follow-btn.active:hover {
        background-color: rgba(59, 130, 246, 0.25);
        color: #93c5fd;
      }
      .creator-alert-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        background-color: rgba(16, 185, 129, 0.1);
        border: 1px solid rgba(16, 185, 129, 0.3);
        color: #34d399;
        font-size: 0.65rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 12px;
        height: 22px;
        box-sizing: border-box;
      }

      .creator-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--gradient-cinema); 
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(201, 134, 26, 0.25);
      }
      .avatar-inner {
        width: 100%;
        height: 100%;
        background-color: #0c0c0e; /* Consistent with sidebar tone */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 1.5rem;
        color: var(--text-main);
      }

      .creator-name-txt {
        font-size: 1.1rem;
        font-weight: 700;
      }
      .creator-tag {
        font-size: 0.78rem;
        color: var(--accent-gold);
        background-color: rgba(242, 193, 78, 0.05);
        padding: 2px 10px;
        border-radius: 99px;
        font-weight: 600;
        border: 1px solid rgba(242, 193, 78, 0.15);
      }

      .creator-desc {
        font-size: 0.85rem;
        color: var(--text-sub);
        line-height: 1.5;
        height: 42px;
        overflow: hidden;
      }

      .creator-works {
        font-size: 0.75rem;
        color: var(--text-muted);
        border-top: 1px solid rgba(255,255,255,0.05);
        padding-top: 12px;
        width: 100%;
      }

      /* ────────────────────────────────────────────────────────
         12. Footer (푸터)
         ──────────────────────────────────────────────────────── */
      footer {
        background-color: #040407;
        border-top: 1px solid var(--border-color);
        padding: 64px 0 32px 0;
        font-size: 0.85rem;
        color: var(--text-muted);
      }

      .footer-grid {
        display: grid;
        grid-template-columns: 1.5fr repeat(3, 1fr);
        gap: 40px;
        margin-bottom: 48px;
      }
      @media (max-width: 768px) {
        .footer-grid {
          grid-template-columns: 1fr;
          gap: 30px;
        }
      }

      .footer-brand {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .footer-desc {
        line-height: 1.6;
        color: var(--text-sub);
      }

      .footer-links-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 16px;
      }

      .footer-links-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .footer-links-list a:hover {
        color: var(--text-main);
      }

      .disclaimer-box {
        background-color: rgba(255,255,255,0.02);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 24px;
        font-size: 0.78rem;
        line-height: 1.5;
        color: var(--text-muted);
      }

      .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid rgba(255,255,255,0.04);
        padding-top: 24px;
      }
      @media (max-width: 576px) {
        .footer-bottom {
          flex-direction: column;
          gap: 12px;
          text-align: center;
        }
      }

      /* ────────────────────────────────────────────────────────
         13. Interactive Cinema Modal Player & Detail Info (시네마 극장모드 플레이어 상세 모달)
         ──────────────────────────────────────────────────────── */
      .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(4, 4, 6, 0.96);
        backdrop-filter: blur(16px);
        z-index: 1000;
        display: none; /* 기본 숨김 */
        align-items: center;
        justify-content: center;
        padding: 30px;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .modal-overlay.active {
        display: flex;
        opacity: 1;
      }

      .modal-box {
        position: relative;
        width: 100%;
        max-width: 1580px; /* PC 와이드 화면 극대화 */
        background-color: #090a0d;
        border: 1px solid rgba(242, 193, 78, 0.25);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 45px 120px rgba(0, 0, 0, 0.95), 
                    0 0 80px rgba(242, 193, 78, 0.05);
        transform: scale(0.95);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        display: grid;
        grid-template-columns: 7.1fr 2.9fr; /* 71% : 29% 비율 배치, 오른쪽 정보 패널 최소폭 확보 */
        height: calc(100vh - 100px);
        max-height: 850px;
        min-height: 520px;
      }
      
      @media (max-width: 1300px) {
        .modal-box {
          grid-template-columns: 6.7fr 3.3fr;
          max-height: 90vh;
        }
      }
      @media (max-width: 1024px) {
        .modal-box {
          grid-template-columns: 1fr;
          height: auto;
          max-height: 92vh;
          overflow-y: auto;
        }
      }

      .modal-overlay.active .modal-box {
        transform: scale(1);
      }

      /* 플레이어 영역 */
      .modal-player-side {
        background-color: #020203;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }
      
      .player-aspect-ratio-box {
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
        background-color: #000;
        overflow: hidden;
      }
      
      .player-iframe-node {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        z-index: 2;
      }

      /* 시청 기록용 API 플레이어 — 기존 iframe 크기와 같게 유지 */
      #modalCinemaPlayerHost {
        z-index: 3;
      }
      #modalCinemaPlayerMount,
      #modalCinemaPlayerHost iframe {
        width: 100%;
        height: 100%;
        border: none;
      }

      /* 현재 회차 전체 러닝타임 — 왼쪽 ‘상영 상태: 대기중’과 같은 하단 높이. 클릭은 통과 */
      .player-runtime-badge {
        position: absolute;
        right: 24px;
        bottom: 24px;
        z-index: 4;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em;
        color: rgba(255, 255, 255, 0.92);
        background: rgba(0, 0, 0, 0.62);
        pointer-events: none;
        user-select: none;
      }
      .player-runtime-badge[hidden] {
        display: none !important;
      }

      /* 모의 비디오 플레이 배경아트 (유튜브 로딩 전/플레이스홀더 상태) */
      .modal-video-mock {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at center, #2e1e07 0%, #030304 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 3;
        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      }
      
      .modal-video-mock.hidden {
        opacity: 0;
        pointer-events: none;
        z-index: 1;
      }

      .p-wave {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent-orange) 0%, #d97706 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: pulse-ring 2.5s infinite;
        cursor: pointer;
        z-index: 5;
        border: none;
        box-shadow: 0 0 25px rgba(201, 134, 26, 0.6);
        transition: transform 0.2s;
      }
      .p-wave:hover {
        transform: scale(1.08);
      }
      
      @keyframes pulse-ring {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(201, 134, 26, 0.7); }
        70% { transform: scale(1.05); box-shadow: 0 0 0 18px rgba(201, 134, 26, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(201, 134, 26, 0); }
      }

      .p-wave-icon {
        color: white;
        font-size: 1.8rem;
        margin-left: 4px;
        line-height: 1;
      }

      .video-play-status {
        position: absolute;
        bottom: 24px;
        left: 24px;
        z-index: 5;
        font-size: 0.8rem;
        font-weight: 600;
        background-color: rgba(0, 0, 0, 0.82);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,0.08);
        padding: 6px 14px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #e5e7eb;
      }
      .play-dot {
        width: 8px;
        height: 8px;
        background-color: var(--accent-mint);
        border-radius: 50%;
        animation: blink 1s infinite alternate;
      }
      @keyframes blink {
        100% { opacity: 0.3; }
      }

      /* 내용 상세 영역 — 그리드 자식 min-width:auto 가 긴 안내문을 따라 가로로 늘어나지 않게 한다 */
      .modal-detail-side {
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #0b0c0f;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
        min-width: 0;
        max-width: 100%;
      }
      @media (max-width: 1024px) {
        .modal-detail-side {
          border-left: none;
          max-height: none;
          height: auto;
          overflow: visible;
        }
      }

      /* 세로 스크롤. 가로는 안내문·제목 줄바꿈으로 맞춘다 (overflow-x 클립으로 끝내지 않음) */
      .modal-scrollable-area {
        flex: 1;
        min-width: 0;
        max-width: 100%;
        overflow-y: auto;
        padding-right: 8px;
        margin-bottom: 16px;
        padding-bottom: 12px;
      }
      
      .modal-scrollable-area::-webkit-scrollbar {
        width: 6px;
      }
      .modal-scrollable-area::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.01);
      }
      .modal-scrollable-area::-webkit-scrollbar-thumb {
        background: rgba(242, 193, 78, 0.2);
        border-radius: 3px;
      }
      .modal-scrollable-area::-webkit-scrollbar-thumb:hover {
        background: rgba(242, 193, 78, 0.4);
      }

      .close-pc-icon {
        display: block;
      }

      /* 기본 디폴트 상태에서는 숨김 (모바일 반응형 내부에서만 표출) */
      .modal-mini-header {
        display: none;
      }

      .modal-close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: rgba(9, 10, 13, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.8);
        z-index: 101;
        transition: all 0.25s ease;
        cursor: pointer;
      }
      .modal-close-btn:hover {
        background-color: #ef4444; 
        color: #ffffff;
        transform: rotate(90deg);
        border-color: #fca5a5;
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
      }

      .md-header {
        margin-bottom: 12px;
        min-width: 0;
        max-width: 100%;
      }
      
      /* 자막 설정 메타 영역 */
      .md-subtitle-meta-container {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-top: 10px;
        margin-bottom: 12px;
        border-top: 1px dashed rgba(255, 255, 255, 0.08);
        border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
        padding: 8px 0;
        min-width: 0;
        max-width: 100%;
      }
      .md-subtitle-meta-chips {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
      }
      .md-subtitle-meta-chips-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        flex: 1;
        min-width: 0;
      }
      /* 자막 칩 라인 맨 끝 공유 아이콘 (동그라미) */
      .md-sub-share-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        margin-left: auto;
        padding: 0;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #9ca3af;
        cursor: pointer;
        transition: var(--transition-fast);
      }
      /* PC: 칩·드롭다운 라인과 시각적 수직 정렬 보정 */
      @media (min-width: 1025px) {
        .md-sub-share-btn {
          margin-top: 3px;
        }
      }
      .md-sub-share-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.22);
        color: #fff;
      }
      .md-sub-share-btn:active {
        transform: scale(0.96);
      }
      .md-sub-chip {
        display: inline-flex;
        align-items: center;
        height: 22px;
        padding: 0 8px;
        font-size: 0.68rem;
        font-weight: 600;
        border-radius: 4px;
        box-sizing: border-box;
      }
      .md-sub-chip.outline-chip {
        background-color: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #9ca3af;
      }
      
      /* 드롭다운 형태 구현 */
      .md-sub-dropdown-wrapper {
        position: relative;
        display: inline-block;
      }
      .md-sub-dropdown-trigger {
        display: inline-flex;
        align-items: center;
        background-color: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.35);
        color: var(--accent-gold);
        height: 22px;
        padding: 0 8px;
        font-size: 0.68rem;
        font-weight: 700;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .md-sub-dropdown-trigger:hover {
        background-color: rgba(245, 158, 11, 0.15);
        border-color: rgba(245, 158, 11, 0.5);
      }
      .md-sub-dropdown-trigger.inactive-tint {
        background-color: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.12);
        color: #9ca3af;
      }
      .md-sub-dropdown-menu {
        display: none;
        position: absolute;
        top: calc(100% + 4px); /* 아래쪽으로 변경 */
        left: 0;
        background-color: #0f1015;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 6px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        z-index: 120;
        min-width: 110px;
        padding: 4px 0;
      }
      .md-sub-dropdown-menu.show {
        display: block;
      }
      .md-sub-dropdown-item {
        padding: 5px 10px;
        font-size: 0.68rem;
        color: #d1d5db;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
      }
      .md-sub-dropdown-item:hover {
        background-color: rgba(245, 158, 11, 0.12);
        color: #ffffff;
      }
      .md-sub-dropdown-item.active {
        color: var(--accent-gold);
        font-weight: 700;
        background-color: rgba(245, 158, 11, 0.08);
      }
      
      /* 자막 안내문 — max-content/nowrap 이 정보 패널 가로 스크롤을 만들던 원인 */
      .md-sub-hint {
        font-size: 0.62rem;
        color: rgba(255, 255, 255, 0.35);
        display: flex;
        align-items: flex-start;
        gap: 4px;
        margin-top: 1px;
        cursor: help;
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        white-space: normal;
      }
      .md-sub-hint-icon {
        flex: 0 0 auto;
        width: 10px;
        height: 10px;
        margin-top: 2px;
      }
      .md-sub-hint-text {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.45;
      }
      .md-sub-hint-text .lang-ko,
      .md-sub-hint-text .lang-en {
        white-space: normal;
      }
      .md-series-title {
        color: var(--accent-orange);
        font-size: 0.8rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 6px;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      .md-ep-title {
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: -0.02e;
        line-height: 1.3;
        margin-bottom: 10px;
        color: #ffffff;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      .md-meta-badges-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        font-size: 0.76rem;
        color: #9ca3af;
        margin-bottom: 6px;
      }
      .md-meta-creator-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        margin-bottom: 8px;
        background-color: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 6px 10px;
        border-radius: 6px;
        min-width: 0;
        max-width: 100%;
      }
      .md-creator-info-group {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .md-meta-creator-row .md-creator-by {
        margin-left: 0;
        font-size: 0.8rem;
        color: #eee;
        font-weight: 700;
      }
      .md-creator-follow-inline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3.5px;
        background-color: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #ddd;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 0.65rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        height: 22px;
        box-sizing: border-box;
      }
      .md-creator-follow-inline:hover {
        background-color: rgba(255, 255, 255, 0.12);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.25);
      }
      .md-creator-follow-inline.active {
        background-color: rgba(59, 130, 246, 0.16);
        border-color: rgba(59, 130, 246, 0.45);
        color: #60a5fa;
      }
      .md-creator-follow-inline.active:hover {
        background-color: rgba(59, 130, 246, 0.24);
        color: #3b82f6;
      }
      .md-meta-bold {
        color: var(--accent-gold);
        font-weight: 700;
      }
      .md-creator-by {
        font-size: 0.74rem;
        color: #bbb;
        margin-left: auto;
        font-weight: 600;
      }
      /* 작품 상세 — 크리에이터명 → 공개 프로필 링크 */
      .md-creator-profile-link,
      .creator-profile-link {
        display: inline;
        padding: 0;
        margin: 0;
        border: none;
        background: none;
        font: inherit;
        color: var(--accent-gold);
        font-weight: 700;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color 0.15s ease;
      }
      .md-creator-profile-link:hover,
      .creator-profile-link:hover {
        color: var(--accent-orange);
      }
      .series-card-footer .creator-profile-link,
      .shorts-card-footer .creator-profile-link {
        font-size: inherit;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
      }
      .badge-status {
        font-size: 0.65rem;
        font-weight: 800;
        padding: 2px 7px;
        border-radius: 4px;
        text-transform: uppercase;
      }
      .badge-status-ongoing {
        background-color: rgba(16, 185, 129, 0.15);
        color: #10b981;
        border: 1px solid rgba(16, 185, 129, 0.3);
      }
      .badge-status-completed {
        background-color: rgba(59, 130, 246, 0.15);
        color: #3b82f6;
        border: 1px solid rgba(59, 130, 246, 0.3);
      }
      .badge-status-embed {
        background-color: rgba(242, 193, 78, 0.12);
        color: #f2c14e;
        border: 1px solid rgba(242, 193, 78, 0.25);
      }

      #modalSeasonEpBadge {
        padding: 3px 9px;
        font-size: 0.7rem;
        letter-spacing: 0.03em;
        line-height: 1.1;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .md-section-line {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 14px;
        margin-top: 14px;
        min-width: 0;
        max-width: 100%;
      }

      .md-section-title {
        font-size: 0.8rem;
        font-weight: 800;
        color: var(--accent-gold);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .md-section-title.curator-critic-title {
        color: #d8b4fe; /* 시각적으로 품격 있고 유니크한 큐레이션 라벤더 바이올렛 */
      }

      .md-desc {
        font-size: 0.86rem;
        color: #d1d5db;
        line-height: 1.6;
        margin-bottom: 12px;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      /* 큐레이터 코멘트 전용 박스 */
      .curator-comment-box {
        background: linear-gradient(135deg, rgba(216, 180, 254, 0.04) 0%, rgba(9, 10, 13, 0.9) 100%);
        border: 1px solid rgba(216, 180, 254, 0.15);
        border-radius: 10px;
        padding: 12px 14px;
        margin-bottom: 15px;
        position: relative;
        overflow: hidden;
      }
      .curator-comment-box::before {
        content: '"';
        position: absolute;
        top: -10px;
        right: 10px;
        font-size: 4rem;
        font-family: serif;
        color: rgba(216, 180, 254, 0.05);
        line-height: 1;
      }
      .curator-comment-text {
        font-size: 0.82rem;
        color: #e5e7eb;
        line-height: 1.5;
        font-style: italic;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      .curator-comment-author {
        font-size: 0.72rem;
        color: #d8b4fe;
        font-weight: 700;
        margin-top: 6px;
        text-align: right;
        display: block;
      }

      /* AI 제작 정보 도구 칩 구조 */
      .ai-tools-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 8px;
      }
      .modal-production-tech-note {
        margin: 0 0 8px;
        font-size: 0.72rem;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.48);
      }
      .ai-tool-chip {
        background-color: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #e5e7eb;
        font-size: 0.72rem;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
      }
      .workflow-flowchart {
        background-color: rgba(0, 0, 0, 0.25);
        border: 1px dashed rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 8px;
        font-size: 0.72rem;
        color: #9cb3af;
        line-height: 1.4;
        font-family: var(--font-mono);
        text-align: center;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
      }

      /* 시즌 에피소드 정렬 리스트 */
      .md-webtoon-list-title {
        font-size: 0.8rem;
        font-weight: 800;
        color: var(--accent-gold);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: 12px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .md-ep-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
      }
      .md-ep-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px;
        background-color: rgba(255,255,255,0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        font-size: 0.8rem;
        transition: all 0.2s ease;
        cursor: pointer;
      }
      .md-ep-item:hover {
        background-color: rgba(242, 193, 78, 0.04); 
        border-color: rgba(242, 193, 78, 0.25);
      }
      .md-ep-item.active {
        border-color: var(--accent-gold); 
        background-color: rgba(242, 193, 78, 0.08);
        box-shadow: 0 0 10px rgba(242, 193, 78, 0.1);
        font-weight: 700;
      }
      /* 에피소드 시청기록 상태 아이콘 스타일 */
      .md-ep-status-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        font-size: 0.65rem;
        border-radius: 50%;
        margin-right: 6px;
        vertical-align: middle;
        font-weight: 800;
        text-align: center;
        overflow: hidden;
        user-select: none;
      }
      .md-ep-status-icon.status-watching {
        color: var(--accent-gold);
        text-shadow: 0 0 4px rgba(242, 193, 78, 0.6);
      }
      .md-ep-status-icon.status-paused {
        color: #fbbf24; /* 앰버 */
      }
      .md-ep-status-icon.status-completed {
        color: #10b981; /* 그린 */
      }
      .md-ep-status-icon.status-unwatched {
        color: rgba(255, 255, 255, 0.18);
        opacity: 0.5;
      }
      .md-ep-num-label {
        color: var(--accent-gold); 
        font-weight: 800;
        margin-right: 8px;
        font-size: 0.75rem;
      }
      .md-ep-item-title {
        color: #e5e7eb;
      }
      .md-ep-item.active .md-ep-item-title {
        color: #ffffff;
      }

      /* 단편/쇼츠 상세 모달 — 관련 추천 리스트 (쇼츠·어워드 페이지 공용) */
      .shorts-modal-related-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .shorts-modal-related-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        padding: 10px 12px !important;
        cursor: pointer;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.06);
        transition: border-color 0.2s ease;
      }
      .shorts-modal-related-item:hover {
        border-color: rgba(242, 142, 53, 0.28);
      }
      .shorts-modal-related-thumb {
        width: 56px;
        height: 38px;
        border-radius: 6px;
        background-size: cover;
        background-position: center;
        background-color: #16161a;
        flex-shrink: 0;
        border: 1px solid rgba(255, 255, 255, 0.05);
      }
      .shorts-modal-related-info {
        min-width: 0;
        flex: 1;
      }
      .shorts-modal-related-title {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 3px;
      }
      .shorts-modal-related-meta {
        font-size: 0.68rem;
        color: var(--text-muted);
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        align-items: center;
        min-width: 0;
      }
      .shorts-modal-related-meta--type {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: rgba(255, 255, 255, 0.48);
        font-weight: 600;
        margin-bottom: 2px;
      }
      .shorts-modal-related-meta--stats {
        flex-wrap: nowrap;
      }

      /* 하단 액션 제어반 */
      .md-footer-actions {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 16px;
        background-color: #0b0c0f;
        z-index: 10;
      }

      /* 이전화 / 다음화 웹툰 컨트롤 버튼 */
      .next-prev-controller {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 12px;
      }
      .btn-nav-ep {
        font-weight: 700;
        font-size: 0.85rem;
        padding: 10px 12px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid rgba(255,255,255,0.08);
        background-color: rgba(255,255,255,0.03);
        color: #bbb;
      }
      .btn-nav-ep:hover:not(:disabled) {
        border-color: rgba(255,255,255,0.2);
        color: #ffffff;
        background-color: rgba(255,255,255,0.06);
      }
      .btn-nav-ep.btn-nav-next {
        background: linear-gradient(135deg, var(--accent-orange) 0%, #d97706 100%);
        color: white;
        border: none;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
      }
      .btn-nav-ep.btn-nav-next:hover:not(:disabled) {
        background: linear-gradient(135deg, #f59e0b 0%, var(--accent-orange) 100%);
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
      }
      .btn-nav-ep:disabled {
        opacity: 0.35;
        cursor: not-allowed;
        background-color: rgba(255, 255, 255, 0.01) !important;
        border-color: rgba(255,255,255,0.04) !important;
        color: #666 !important;
        box-shadow: none !important;
      }

      /* 출처 텍스트 링크 바 */
      .source-info-bar {
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.4);
        text-align: center;
        margin-top: 2px;
        margin-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        max-width: 100%;
      }
      .source-info-bar .source-link {
        color: rgba(242, 193, 78, 0.75);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;
        overflow-wrap: anywhere;
        word-break: break-word;
        min-width: 0;
      }
      .source-info-bar .source-link:hover {
        color: var(--accent-gold);
        text-decoration: underline;
      }
      .source-info-bar .divider {
        color: rgba(255, 255, 255, 0.2);
      }

      .btn-report-claim {
        font-size: 0.64rem;
        color: rgba(255, 255, 255, 0.2);
        text-align: center;
        display: block;
        margin: 0 auto;
        text-decoration: underline;
        cursor: pointer;
        transition: color 0.2s;
        border: none;
        background: none;
        padding: 0;
      }
      .btn-report-claim:hover {
        color: #ef4444;
      }

      /* ────────────────────────────────────────────────────────
         3. 포탈 2열 1760px 대형 레이아웃 최적화 오버라이드 시스템 (Professional Polish)
         ──────────────────────────────────────────────────────── */
      .portal-layout-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 40px;
        width: 100%;
        max-width: 1760px;
        margin: 110px auto 40px auto;
        padding: 0 24px;
        align-items: start;
        box-sizing: border-box;
      }
      @media (max-width: 1024px) {
        .portal-layout-container {
          grid-template-columns: 1fr;
          gap: 32px;
          margin: 114px auto 24px auto;
          padding: 0 16px;
        }
      }
      /* 태블릿 2행 헤더(~107px) — 페이지별 margin-top(110px 등)보다 뒤에 두어 본문이 헤더에 붙지 않게 한다 */
      @media (max-width: 1024px) and (min-width: 769px) {
        .portal-layout-container {
          margin-top: 136px !important;
        }
      }

      /* 더보기 버튼 ↔ 본문 하단 여백 — 크리에이터 페이지 밀도 기준 */
      .catalog-more-btn-container {
        margin-top: 28px !important;
        margin-bottom: 0 !important;
      }

      @media (max-width: 768px) {
        /* 포탈 본문 최하단 ↔ 푸터 여백 통일 (크리에이터 페이지와 동일) */
        .portal-layout-container {
          margin-bottom: 8px !important;
        }
      }

      .portal-left-column {
        display: flex;
        flex-direction: column;
        gap: 40px;
        min-width: 0;
      }

      .portal-right-sidebar {
        display: flex;
        flex-direction: column;
        gap: 36px;
        background-color: rgba(255, 255, 255, 0.015);
        border: 1px solid rgba(255, 255, 255, 0.04);
        border-radius: 20px;
        padding: 24px;
        /* 기본 static — 신작 에피소드만 sticky (하단 data-page 규칙) */
        position: static;
        z-index: 10;
        box-sizing: border-box;
      }

      /* 신작 에피소드 — 사이드바 스크롤 따라오기 유지 */
      body[data-page="new-episodes"] .portal-right-sidebar {
        position: sticky;
        top: 90px;
        z-index: 50;
      }
      @media (max-width: 1024px) {
        .portal-right-sidebar {
          width: 100%;
          position: static;
          background: none;
          border: none;
          padding: 0;
          gap: 32px;
        }
      }

      /* 히어로 배너 — 포탈 내에서는 모든 PC·태블릿 폭에서 우측 포스터 카드 숨김
         (1024px 이하 구간에서 2열 그리드로 포스터가 갑자기 나타나는 현상 방지) */
      .portal-left-column .hero-section .hero-visual {
        display: none !important;
      }

      .portal-left-column .hero-section .hero-container {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        gap: 0 !important;
        max-width: 100% !important;
      }

      /* 히어로 배너 영역 포탈 내 카드화 최적화 (넓은 PC 1025px+) */
      @media (min-width: 1025px) {
        .portal-left-column .hero-section {
          min-height: auto !important;
          padding: 48px !important;
          border-radius: 16px !important;
          background: linear-gradient(135deg, #0b0b0e 0%, #0d0d12 50%, #07070a 100%) !important;
          border: 1px solid rgba(242, 193, 78, 0.12) !important;
          overflow: hidden;
          margin-bottom: 0 !important;
          position: relative;
        }
        .portal-left-column .hero-section .hero-bg, 
        .portal-left-column .hero-section .hero-bg::after {
          display: none !important;
        }
        .portal-left-column .hero-section .hero-content {
          max-width: 100% !important;
          align-items: flex-start !important;
        }
        .portal-left-column .hero-section .hero-title {
          font-size: 2.2rem !important;
          line-height: 1.25 !important;
          margin-bottom: 16px !important;
        }
        .portal-left-column .hero-section .hero-desc {
          font-size: 0.92rem !important;
          max-width: 580px !important;
          margin-bottom: 24px !important;
          color: var(--text-sub) !important;
        }
      }

      /* 신작 에피소드 가로 그리드 정렬 (스크롤 제거) */
      @media (min-width: 1025px) {
        .portal-left-column .episodes-scroll {
          display: grid !important;
          grid-template-columns: repeat(4, 1fr) !important;
          gap: 16px !important;
          overflow-x: visible !important;
          padding: 0 !important;
        }
        .portal-left-column .scroll-btn {
          display: none !important;
        }
        .portal-left-column .episode-card {
          flex: 1 1 0% !important;
          width: 100% !important;
          min-width: 0 !important;
        }
        .portal-left-column .thumb-wrap {
          height: 115px !important;
        }
        .portal-left-column .ep-desc {
          display: none !important;
        }
        .portal-left-column .episode-info {
          padding: 10px !important;
        }
        .portal-left-column .episode-title-block {
          margin-bottom: 0 !important;
        }
      }

      /* 인기 연재·AI Films 가로형 레이아웃 (연재=포탈 내 4열, Films=포탈 밖 전체폭 5열은 home.css) */
      @media (min-width: 1025px) {
        .portal-left-column .ongoing-series-grid,
        #aiFilmsShorts .film-shorts-grid {
          display: grid !important;
          grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
          gap: 16px !important;
        }
        .portal-left-column .ongoing-series-grid .series-card,
        #aiFilmsShorts .film-shorts-grid .series-card {
          display: flex !important;
          flex-direction: row !important;
          align-items: center !important;
          background-color: rgba(255, 255, 255, 0.02) !important;
          border: 1px solid rgba(255, 255, 255, 0.04) !important;
          border-radius: 12px !important;
          padding: 12px !important;
          gap: 12px !important;
          height: 110px !important;
          min-width: 0 !important;
          transition: var(--transition-smooth) !important;
          position: relative !important;
          /* 툴팁은 카드 밖으로 — 본문·메타 영역만 overflow로 평점 튀어나옴 방지 */
          overflow: visible !important;
        }
        .portal-left-column .ongoing-series-grid .series-card:hover,
        #aiFilmsShorts .film-shorts-grid .series-card:hover {
          transform: translateY(-2px) !important;
          border-color: rgba(242, 193, 78, 0.22) !important;
          background-color: rgba(255, 255, 255, 0.04) !important;
          z-index: 100 !important;
        }
        .portal-left-column .ongoing-series-grid .series-card .poster-wrap,
        #aiFilmsShorts .film-shorts-grid .series-card .poster-wrap {
          width: 95px !important;
          height: 85px !important;
          flex-shrink: 0 !important;
          border-radius: 8px !important;
          overflow: hidden !important;
          position: relative !important;
        }
        .portal-left-column .ongoing-series-grid .series-card .poster-art-generic,
        #aiFilmsShorts .film-shorts-grid .series-card .poster-art-generic {
          border-radius: 8px !important;
          font-size: 0.6rem !important;
          line-height: 1.2 !important;
          padding: 4px !important;
          transition: transform 0.3s ease !important;
        }
        .portal-left-column .ongoing-series-grid .series-card:hover .poster-art-generic,
        #aiFilmsShorts .film-shorts-grid .series-card:hover .poster-art-generic {
          transform: scale(1.06) !important;
        }
        
        /* 배지와 평점을 포스터에서 제외하고 우측 전체 카드로 우아하게 분리 배치 */
        .portal-left-column .ongoing-series-grid .series-card .series-badge-absolute,
        .portal-left-column .ongoing-series-grid .series-card .rating-overlay,
        #aiFilmsShorts .film-shorts-grid .series-card .series-badge-absolute,
        #aiFilmsShorts .film-shorts-grid .series-card .rating-overlay {
          display: none !important;
        }

        .portal-left-column .ongoing-series-grid .series-card-title-wrap,
        #aiFilmsShorts .film-shorts-grid .series-card-title-wrap {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 8px !important;
          width: 100% !important;
          min-width: 0 !important;
          overflow: visible !important;
          position: relative !important;
        }

        .portal-left-column .ongoing-series-grid .series-card .series-card-title,
        #aiFilmsShorts .film-shorts-grid .series-card .series-card-title {
          font-size: 0.92rem !important;
          font-weight: 700 !important;
          margin: 0 !important;
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          flex: 1 !important;
          min-width: 0 !important;
        }

        .portal-left-column .ongoing-series-grid .series-card .title-assist-wrapper,
        #aiFilmsShorts .film-shorts-grid .series-card .title-assist-wrapper {
          flex: 0 1 auto !important;
          width: fit-content !important;
          max-width: 100% !important;
          min-width: 0 !important;
          display: inline-flex !important;
          align-items: center !important;
          gap: 6px !important;
          overflow: visible !important;
        }

        .portal-left-column .ongoing-series-grid .series-card .title-assist-wrapper > .series-card-title,
        #aiFilmsShorts .film-shorts-grid .series-card .title-assist-wrapper > .series-card-title {
          flex: 0 1 auto !important;
          width: auto !important;
        }

        .portal-left-column .ongoing-series-grid .series-card .badge-series-inline,
        #aiFilmsShorts .film-shorts-grid .series-card .badge-series-inline {
          display: inline-flex !important;
          flex-shrink: 0 !important;
        }

        .portal-left-column .ongoing-series-grid .series-card .badge-series-inline .badge-ongoing,
        .portal-left-column .ongoing-series-grid .series-card .badge-series-inline .badge,
        #aiFilmsShorts .film-shorts-grid .series-card .badge-series-inline .badge {
          padding: 2px 6px !important;
          font-size: 0.58rem !important;
          letter-spacing: 0.5px !important;
          border-radius: 4px !important;
        }

        .portal-left-column .ongoing-series-grid .series-progress-wrap,
        #aiFilmsShorts .film-shorts-grid .series-progress-wrap {
          display: flex !important;
          flex-wrap: wrap !important;
          align-items: center !important;
          justify-content: flex-start !important;
          gap: 2px 6px !important;
          width: 100% !important;
          min-width: 0 !important;
          max-width: 100% !important;
          overflow: hidden !important;
        }

        .portal-left-column .ongoing-series-grid .series-card .series-progress,
        #aiFilmsShorts .film-shorts-grid .series-card .series-progress {
          flex: 1 1 auto !important;
          min-width: 0 !important;
          max-width: 100% !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          white-space: nowrap !important;
          font-size: 0.72rem !important;
          color: var(--text-sub) !important;
          margin: 0 !important;
        }

        .portal-left-column .ongoing-series-grid .series-card .rating-series-inline,
        #aiFilmsShorts .film-shorts-grid .series-card .rating-series-inline {
          display: inline-flex !important;
          align-items: center !important;
          gap: 3px !important;
          font-size: 0.72rem !important;
          font-weight: 700 !important;
          color: var(--accent-gold) !important;
          flex: 0 0 auto !important;
          max-width: 100% !important;
          background: rgba(242, 193, 78, 0.08) !important;
          border: 1px solid rgba(242, 193, 78, 0.15) !important;
          padding: 1px 4px !important;
          border-radius: 4px !important;
          white-space: nowrap !important;
        }

        .portal-left-column .ongoing-series-grid .series-body,
        #aiFilmsShorts .film-shorts-grid .series-body {
          padding: 0 !important;
          display: flex !important;
          flex-direction: column !important;
          justify-content: space-between !important;
          flex: 1 !important;
          min-width: 0 !important;
          max-width: 100% !important;
          height: 82px !important;
          text-align: left !important;
          /* 🌐 원제 툴팁 표시 — 평점 넘침은 progress-wrap overflow로 제어 */
          overflow: visible !important;
        }

        .portal-left-column .ongoing-series-grid .series-card .series-card-footer,
        #aiFilmsShorts .film-shorts-grid .series-card .series-card-footer {
          font-size: 0.68rem !important;
          border-top: none !important;
          padding-top: 0 !important;
          display: flex !important;
          justify-content: space-between !important;
          color: var(--text-muted) !important;
          width: 100% !important;
          min-width: 0 !important;
          gap: 8px !important;
        }
        .portal-left-column .ongoing-series-grid .series-card .series-card-footer > span,
        #aiFilmsShorts .film-shorts-grid .series-card .series-card-footer > span {
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
        }

        /* 중간 PC 폭 — 열 수·포스터 축소로 텍스트 영역 확보 (평점 배지 밖으로 튀어나옴 방지) */
        @media (max-width: 1480px) {
          .portal-left-column .ongoing-series-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          }

          .portal-left-column .ongoing-series-grid .series-card .poster-wrap,
          #aiFilmsShorts .film-shorts-grid .series-card .poster-wrap {
            width: 82px !important;
            height: 74px !important;
          }
        }

        @media (max-width: 1280px) {
          .portal-left-column .ongoing-series-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          }
        }
      }

      /* ────────────────────────────────────────────────────────
         [전체 연재 시리즈] 전용 프리미엄 6열 세로형 시네마틱 카드 레이아웃 강제 지정
         (미디어 쿼리 밖으로 격상시켜 모바일/태블릿을 망라하는 모든 환경에 최고급 6열 & 반응형 일관 제공)
         ──────────────────────────────────────────────────────── */
      #seriesCatalogGrid {
          display: grid !important;
          grid-template-columns: repeat(6, 1fr) !important; /* 극상의 밀도를 선사하는 6열 대규모 그리드 완성 */
          gap: 16px !important; /* 촘촘하고 빈틈없는 세련된 그리드 호홉을 위해 gap 조밀 조정 */
          width: 100% !important;
          margin-bottom: 30px !important;
        }

        /* 미디어 쿼리 반응형 지원: 태블릿 및 모바일 화면에 맞춰 열 축소 분기 */
        @media (max-width: 1400px) {
          #seriesCatalogGrid {
            grid-template-columns: repeat(5, 1fr) !important;
          }
        }
        @media (max-width: 1100px) {
          #seriesCatalogGrid {
            grid-template-columns: repeat(4, 1fr) !important;
          }
        }
        @media (max-width: 900px) {
          #seriesCatalogGrid {
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 12px !important;
          }
        }
        @media (max-width: 600px) {
          #seriesCatalogGrid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 10px !important;
          }
        }

        /* ────────────────────────────────────────────────────────
           [전체 연재 시리즈] 전용 프리미엄 시네마틱 카드 세부 사양
           (가로세로 비율 조정, 텍스트 가독성 도약, 우측 재생 액션 버튼 장착)
           ──────────────────────────────────────────────────────── */
        #seriesCatalogGrid .series-card {
          display: flex !important;
          flex-direction: column !important; 
          height: auto !important;
          background-color: var(--bg-secondary) !important;
          border: 1px solid rgba(255, 255, 255, 0.05) !important;
          border-radius: 8px !important;
          overflow: hidden !important;
          gap: 0 !important;
          padding: 0 !important;
          transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
          position: relative !important;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
        }

        #seriesCatalogGrid .series-card:hover {
          transform: translateY(-5px) !important;
          background-color: var(--bg-tertiary) !important;
          border-color: rgba(242, 142, 53, 0.35) !important; 
          box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 
                      0 0 12px rgba(242, 142, 53, 0.18) !important; 
        }

        /* 썸네일 영역: 카드 총량의 심미적 밸런스 점유 (가로세로 1.4:1 비율로 영화미 부각) */
        #seriesCatalogGrid .series-card .poster-wrap {
          width: 100% !important;
          height: auto !important;
          aspect-ratio: 1.4 / 1 !important; /* 미디어 점유 비율을 높여 불필요한 아래 빈 여백을 원천 소탕 */
          flex-shrink: 0 !important;
          position: relative !important;
          overflow: hidden !important;
          background-color: #0d0f12 !important;
        }

        #seriesCatalogGrid .series-card .poster-art-generic {
          width: 100% !important;
          height: 100% !important;
          background-size: cover !important;
          background-position: center !important;
          background-repeat: no-repeat !important;
          background-color: transparent !important;
          transform: scale(1) !important;
          transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
          z-index: 1 !important;
        }

        #seriesCatalogGrid .series-card:hover .poster-art-generic {
          transform: scale(1.04) !important;
        }

        /* 이미지 없는 카드 처리: 독보적인 리드미컬 엠비언스 그라디언트 플레이스홀더 데코 */
        .poster-art-placeholder {
          width: 100% !important;
          height: 100% !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          position: relative !important;
          overflow: hidden;
        }

        .poster-art-placeholder::before {
          content: "" !important;
          position: absolute !important;
          inset: 0 !important;
          background: var(--placeholder-grad, linear-gradient(135deg, #13151a 0%, #0d0f12 100%)) !important;
          opacity: 0.95 !important;
          z-index: 1 !important;
        }

        .poster-art-placeholder::after {
          content: "" !important;
          position: absolute !important;
          width: 130px !important;
          height: 130px !important;
          background: var(--placeholder-glow, radial-gradient(circle, rgba(242, 142, 53, 0.2) 0%, transparent 70%)) !important;
          border-radius: 50% !important;
          filter: blur(18px) !important;
          z-index: 2 !important;
          animation: auraPulse 6s infinite alternate ease-in-out !important;
        }

        .poster-art-placeholder-symbol {
          position: relative !important;
          z-index: 3 !important;
          font-size: 1.25rem !important;
          opacity: 0.25 !important;
          color: #ffffff !important;
          animation: floatSymbol 3s infinite alternate ease-in-out !important;
        }

        @keyframes auraPulse {
          0% { transform: scale(1) translate(-5px, -5px); opacity: 0.6; }
          100% { transform: scale(1.15) translate(5px, 5px); opacity: 0.95; }
        }

        @keyframes floatSymbol {
          0% { transform: translateY(-2px); opacity: 0.2; }
          100% { transform: translateY(2px); opacity: 0.35; }
        }

        /* 썸네일 내부 좌상단: 장르 미세 배지 */
        #seriesCatalogGrid .series-card .genre-badge-absolute {
          position: absolute !important;
          top: 6px !important;
          left: 6px !important;
          z-index: 5 !important;
        }

        #seriesCatalogGrid .series-card .genre-badge-pill {
          padding: 2px 5px !important;
          font-size: 0.58rem !important;
          border-radius: 3px !important;
          font-weight: 800 !important;
          letter-spacing: 0.3px !important;
          text-transform: uppercase !important;
          background: rgba(216, 145, 26, 0.15) !important;
          backdrop-filter: blur(3px) !important;
          border: 1px solid rgba(216, 145, 26, 0.5) !important;
          color: #d8911a !important;
          display: inline-block !important;
        }

        /* 썸네일 내부 우상단: 연재/완결/NEW 상태 배지 */
        #seriesCatalogGrid .series-card .series-badge-absolute {
          position: absolute !important;
          top: 6px !important;
          right: 6px !important;
          z-index: 5 !important;
          display: block !important;
        }

        #seriesCatalogGrid .series-card .badge {
          padding: 2px 5px !important;
          font-size: 0.58rem !important;
          border-radius: 3px !important;
          font-weight: 800 !important;
          letter-spacing: 0.3px !important;
          text-transform: uppercase !important;
          box-shadow: none !important;
          display: inline-block !important;
        }

        #seriesCatalogGrid .series-card .badge-ongoing {
          background: rgba(79, 124, 255, 0.15) !important;
          color: #8faeff !important;
          border: 1px solid rgba(79, 124, 255, 0.35) !important;
        }

        #seriesCatalogGrid .series-card .badge-completed {
          background: rgba(18, 184, 134, 0.15) !important;
          color: #5edcb6 !important;
          border: 1px solid rgba(18, 184, 134, 0.35) !important;
        }

        #seriesCatalogGrid .series-card .badge-new-episode {
          background: rgba(255, 106, 42, 0.18) !important;
          color: #ffa37a !important;
          border: 1px solid rgba(255, 106, 42, 0.4) !important;
        }

        /* ────────────────────────────────────────────────────────
           [전체 연재 시리즈] 다중 프리뷰 레이아웃 및 3대 명품 시안 CSS 설계
           ──────────────────────────────────────────────────────── */
        /* 기본 카드 외형 */
        #seriesCatalogGrid .series-card {
          display: flex !important;
          flex-direction: column !important; 
          height: auto !important;
          background-color: var(--bg-secondary) !important;
          border: 1px solid rgba(255, 255, 255, 0.05) !important;
          border-radius: 8px !important;
          overflow: hidden !important;
          gap: 0 !important;
          padding: 0 !important;
          transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
          position: relative !important;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
        }

        #seriesCatalogGrid .series-card:hover {
          transform: translateY(-5px) !important;
          background-color: var(--bg-tertiary) !important;
          border-color: rgba(242, 142, 53, 0.35) !important; 
          box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 
                      0 0 12px rgba(242, 142, 53, 0.18) !important; 
        }

        /* 썸네일 영역: 카드 총량의 심미적 밸런스 점유 (가로세로 1.4:1 비율로 영화미 부각) */
        #seriesCatalogGrid .series-card .poster-wrap {
          width: 100% !important;
          height: auto !important;
          aspect-ratio: 1.4 / 1 !important; /* 미디어 점유 비율을 높여 불필요한 아래 빈 여백을 원천 소탕 */
          flex-shrink: 0 !important;
          position: relative !important;
          overflow: hidden !important;
          background-color: #0d0f12 !important;
        }

        #seriesCatalogGrid .series-card .poster-art-generic {
          width: 100% !important;
          height: 100% !important;
          background-size: cover !important;
          background-position: center !important;
          background-repeat: no-repeat !important;
          background-color: transparent !important;
          transform: scale(1) !important;
          transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
          z-index: 1 !important;
        }

        #seriesCatalogGrid .series-card:hover .poster-art-generic {
          transform: scale(1.04) !important;
        }

        /* 이미지 없는 카드 처리: 독보적인 리드미컬 엠비언스 그라디언트 플레이스홀더 데코 */
        .poster-art-placeholder {
          width: 100% !important;
          height: 100% !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          position: relative !important;
          overflow: hidden;
        }

        .poster-art-placeholder::before {
          content: "" !important;
          position: absolute !important;
          inset: 0 !important;
          background: var(--placeholder-grad, linear-gradient(135deg, #13151a 0%, #0d0f12 100%)) !important;
          opacity: 0.95 !important;
          z-index: 1 !important;
        }

        .poster-art-placeholder::after {
          content: "" !important;
          position: absolute !important;
          width: 130px !important;
          height: 130px !important;
          background: var(--placeholder-glow, radial-gradient(circle, rgba(242, 142, 53, 0.2) 0%, transparent 70%)) !important;
          border-radius: 50% !important;
          filter: blur(18px) !important;
          z-index: 2 !important;
          animation: auraPulse 6s infinite alternate ease-in-out !important;
        }

        .poster-art-placeholder-symbol {
          position: relative !important;
          z-index: 3 !important;
          font-size: 1.25rem !important;
          opacity: 0.25 !important;
          color: #ffffff !important;
          animation: floatSymbol 3s infinite alternate ease-in-out !important;
        }

        @keyframes auraPulse {
          0% { transform: scale(1) translate(-5px, -5px); opacity: 0.6; }
          100% { transform: scale(1.15) translate(5px, 5px); opacity: 0.95; }
        }

        @keyframes floatSymbol {
          0% { transform: translateY(-2px); opacity: 0.2; }
          100% { transform: translateY(2px); opacity: 0.35; }
        }

        /* 썸네일 내부 좌상단: 장르 미세 배지 */
        #seriesCatalogGrid .series-card .genre-badge-absolute {
          position: absolute !important;
          top: 6px !important;
          left: 6px !important;
          z-index: 5 !important;
        }

        #seriesCatalogGrid .series-card .genre-badge-pill {
          padding: 2px 5px !important;
          font-size: 0.58rem !important;
          border-radius: 3px !important;
          font-weight: 800 !important;
          letter-spacing: 0.3px !important;
          text-transform: uppercase !important;
          background: rgba(11, 12, 16, 0.85) !important;
          backdrop-filter: blur(3px) !important;
          border: 1px solid rgba(242, 142, 53, 0.25) !important;
          color: var(--accent-orange) !important;
          display: inline-block !important;
          box-sizing: border-box !important;
        }

        /* 썸네일 내부 우상단: 연재상황 배지 */
        #seriesCatalogGrid .series-card .series-badge-absolute {
          position: absolute !important;
          top: 6px !important;
          right: 6px !important;
          z-index: 5 !important;
        }

        /* 공용 정보 영역 바디 */
        #seriesCatalogGrid .series-card .series-body {
          padding: 10px 12px 12px 12px !important; 
          display: flex !important;
          flex-direction: column !important;
          flex: 1 !important;
          background: linear-gradient(180deg, rgba(255,255,255,0.01) 0%, rgba(0,0,0,0.2) 100%) !important;
          text-align: left !important;
          box-sizing: border-box !important;
          align-items: flex-start !important; 
          justify-content: flex-start !important; 
          height: auto !important;
          width: 100% !important;
          position: relative !important;
        }

        /* 공용 제목: 마진을 극도로 단축하여 하단 빈 공간 강박적 철거 */
        #seriesCatalogGrid .series-card .series-card-title {
          font-size: 15px !important; /* 가독성 피드백 적극 반영 글꼴 크기 상향 */
          font-weight: 850 !important; /* 좀 더 명인다운 볼드 아우라 */
          line-height: 1.45 !important; /* 1.35에서 극소 상향 설정 */
          color: #ffffff !important;
          margin: 0 0 6px 0 !important; /* 제목 하단 여백 미세 복원 (정보 간격 5-10% 완화) */
          display: -webkit-box !important;
          -webkit-line-clamp: 1 !important;
          -webkit-box-orient: vertical !important;
          overflow: hidden !important;
          white-space: normal !important;
          text-overflow: ellipsis !important;
          height: auto !important; 
          min-height: auto !important;
          text-align: left !important;
          width: 100% !important;
          letter-spacing: -0.02em !important;
        }

        /* 🌐 wrapper — 제목 바로 옆 · 같은 줄 수직 정렬 */
        #seriesCatalogGrid .title-assist-wrapper {
          width: fit-content !important;
          max-width: 100% !important;
          flex: 0 0 auto !important;
          display: inline-flex !important;
          flex-direction: row !important;
          flex-wrap: nowrap !important;
          align-items: center !important;
          margin-bottom: 6px !important;
        }

        #seriesCatalogGrid .title-assist-wrapper > .series-card-title {
          width: auto !important;
          flex: 0 1 auto !important;
          margin: 0 !important;
          display: inline-block !important;
          vertical-align: middle !important;
          line-height: 1.35 !important;
          -webkit-line-clamp: unset !important;
          -webkit-box-orient: unset !important;
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
        }

        #seriesCatalogGrid .title-assist-wrapper .title-assist-icon {
          margin-top: 0 !important;
          align-self: center !important;
          flex-shrink: 0 !important;
        }

        #seriesCatalogGrid .series-card.style-wide-quad .title-assist-wrapper > .series-card-title {
          margin-bottom: 0 !important;
        }

        /* 공용 메타 로우 (시즌 에피소드 표출기) */
        #seriesCatalogGrid .series-card .series-meta-row {
          font-size: 11px !important;
          color: var(--accent-orange) !important; /* 앰버 오렌지 시네마톤 동기화로 아우라 가공 */
          font-weight: 700 !important;
          margin-bottom: 6px !important; /* 마진 4px에서 6px로 미세 완화 */ 
          display: flex !important;
          align-items: center !important;
          justify-content: flex-start !important; 
          gap: 4px !important;
          white-space: nowrap !important;
          text-overflow: ellipsis !important;
          overflow: hidden !important;
          width: 100% !important;
          text-align: left !important;
          letter-spacing: 0.02em !important;
        }

        /* 공용 평점과 조회수: 우측 빈 영역 완벽 활용 좌우 양끝 대칭 정돈 (Professional Polish) */
        #seriesCatalogGrid .series-card .series-rating-views {
          font-size: 12px !important;
          color: rgba(255, 255, 255, 0.5) !important;
          font-weight: 500 !important;
          margin-bottom: 6px !important; 
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important; /* 좌 평점, 우 조회수로 빈 공간 대칭 채우기 완성 */
          width: 100% !important;
          text-align: left !important;
          box-sizing: border-box !important;
        }

        #seriesCatalogGrid .series-card .series-rating-views .rating-container {
          display: flex !important;
          align-items: center !important;
          gap: 3px !important;
        }

        #seriesCatalogGrid .series-card .series-rating-views .rating-star {
          color: var(--accent-gold) !important;
          font-weight: 900 !important;
          font-size: 13px !important;
        }

        #seriesCatalogGrid .series-card .series-rating-views .rating-value {
          color: rgba(255, 255, 255, 0.85) !important;
          font-weight: 700 !important;
        }

        #seriesCatalogGrid .series-card .series-rating-views .views-divider {
          display: none !important; /* 좌우 공간 분할에 따라 구분 기호 생략 처리 */
        }

        /* 비어 있던 우측 영토를 정밀하게 호령하는 영롱 미니 배지 캡슐 디자인 */
        #seriesCatalogGrid .series-card .series-rating-views .views-count {
          color: var(--accent-gold) !important;
          font-size: 10px !important;
          font-weight: 800 !important;
          background: rgba(201, 134, 26, 0.12) !important;
          border: 1px solid rgba(201, 134, 26, 0.22) !important;
          padding: 1px 6px !important;
          border-radius: 99px !important;
          letter-spacing: 0.2px !important;
          box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
          transition: all 0.2s ease !important;
        }

        #seriesCatalogGrid .series-card:hover .views-count {
          background: rgba(201, 134, 26, 0.22) !important;
          border-color: rgba(201, 134, 26, 0.35) !important;
        }

        /* 공용 태그 캡슐 (줄바꿈 단락 꺾임 완벽 통사 금지) */
        #seriesCatalogGrid .series-card .tag-pill-container {
          display: flex !important;
          flex-wrap: nowrap !important; /* 줄바꿈 절대 거부 */
          align-items: center !important;
          justify-content: flex-start !important; 
          gap: 4px !important;
          margin-bottom: 8px !important; 
          margin-top: 0 !important; 
          width: 100% !important;
          overflow: hidden !important; 
        }

        #seriesCatalogGrid .series-card .tag-pill {
          font-size: 10.5px !important; /* 쾌적한 콤팩트 가독 사이즈 */
          color: rgba(255, 255, 255, 0.6) !important;
          background: rgba(255, 255, 255, 0.05) !important;
          border: 1px solid rgba(255, 255, 255, 0.08) !important;
          padding: 2px 6px !important; 
          border-radius: 4px !important;
          font-weight: 600 !important;
          line-height: 1.1 !important;
          flex-shrink: 0 !important;
          white-space: nowrap !important;
          transition: all 0.2s ease !important;
        }

        #seriesCatalogGrid .series-card:hover .tag-pill {
          background: rgba(255, 255, 255, 0.1) !important;
          color: #ffffff !important;
          border-color: rgba(255, 255, 255, 0.15) !important;
        }

        /* 공용 푸터 (양쪽 끝 수평 가득 채우기) */
        #seriesCatalogGrid .series-card .series-card-footer {
          margin-top: auto !important; 
          padding-top: 8px !important;
          border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
          display: flex !important;
          justify-content: space-between !important; /* 창작자(좌), 업데이트(우) 완벽 대칭 레이아웃 */
          align-items: center !important;
          width: 100% !important;
          box-sizing: border-box !important;
        }

        #seriesCatalogGrid .series-card .series-card-footer .creator-name-update {
          font-weight: 600 !important;
          color: rgba(255, 255, 255, 0.38) !important; /* 0.5에서 0.38로 명도 안배 디하이드레이션 */
          font-size: 11px !important;
          white-space: nowrap !important;
          text-overflow: ellipsis !important;
          overflow: hidden !important;
          max-width: 65% !important; /* 좌측 전용 확보 폭 */
          text-align: left !important;
        }

        /* 우측 빈 자리를 지탱하는 서정적 업데이트 문양 */
        #seriesCatalogGrid .series-card .series-card-footer .realtime-update-str {
          font-weight: 400 !important;
          color: rgba(255, 255, 255, 0.25) !important; /* 0.35에서 0.25로 극적인 텍스트 서열 정리 */
          font-size: 10px !important;
          white-space: nowrap !important;
          text-align: right !important;
          flex-shrink: 0 !important;
        }


        /* ==========================================
           [1안] 첫 번째 줄: 인라인 조화형 플레이 스타일
           - absolute를 타파하고 정보 영역 한켠에 깔끔히 가미
           ========================================== */
        #seriesCatalogGrid .series-card.style-play-inline .series-play-btn-inline {
          position: absolute !important;
          right: 12px !important;
          bottom: 34px !important; /* 태그&메타 영역의 오른쪽 정렬 */
          width: 28px !important;
          height: 28px !important;
          border-radius: 50% !important;
          background: rgba(255, 255, 255, 0.06) !important;
          border: 1px solid rgba(255, 255, 255, 0.12) !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          color: rgba(255, 255, 255, 0.75) !important;
          transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
          z-index: 5 !important;
        }

        #seriesCatalogGrid .series-card.style-play-inline:hover .series-play-btn-inline {
          background: var(--accent-gold) !important;
          border-color: var(--accent-gold) !important;
          color: #030712 !important;
          transform: scale(1.1) !important;
          box-shadow: 0 0 10px rgba(242, 142, 53, 0.4) !important;
        }

        /* 1안의 정보 줄 오른쪽 마진 확보로 버튼 겹침 및 침범 완벽 방비 */
        #seriesCatalogGrid .series-card.style-play-inline .series-meta-row,
        #seriesCatalogGrid .series-card.style-play-inline .series-rating-views,
        #seriesCatalogGrid .series-card.style-play-inline .tag-pill-container {
          width: calc(100% - 32px) !important;
        }


        /* ==========================================
           [2안 & 3안] 섬네일 호버 시 재생 아이콘 오버레이 스타일 (포스터 오버레이 시안)
           - 정보영역 완전 평정! 텍스트 100% 가용 보장, 여백 및 짤림 원천 Zero
           ========================================== */
        #seriesCatalogGrid .series-card.style-poster-hover .poster-play-overlay,
        #seriesCatalogGrid .series-card.style-wide-quad .poster-play-overlay {
          position: absolute !important;
          inset: 0 !important;
          background: rgba(3, 7, 18, 0.45) !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          opacity: 0 !important;
          transition: all 0.3s ease !important;
          z-index: 3 !important;
        }

        #seriesCatalogGrid .series-card.style-poster-hover:hover .poster-play-overlay,
        #seriesCatalogGrid .series-card.style-wide-quad:hover .poster-play-overlay {
          opacity: 1 !important;
        }

        #seriesCatalogGrid .series-card.style-poster-hover .poster-play-btn-circle,
        #seriesCatalogGrid .series-card.style-wide-quad .poster-play-btn-circle {
          width: 44px !important;
          height: 44px !important;
          border-radius: 50% !important;
          background: var(--accent-gold) !important;
          color: #030712 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          transform: scale(0.8) !important;
          transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
          box-shadow: 0 4px 15px rgba(242, 142, 53, 0.5) !important;
        }

        #seriesCatalogGrid .series-card.style-poster-hover:hover .poster-play-btn-circle,
        #seriesCatalogGrid .series-card.style-wide-quad:hover .poster-play-btn-circle {
          transform: scale(1) !important;
        }


        /* ==========================================
           [3안] 세 번째 줄 이후: 대형 와이드 4열 명품 카드 시안
           - 4열 그리드 전용 설계 및 풍성한 여백과 넉넉한 타이포그래피 미학
           ========================================== */
        #seriesCatalogGrid .series-card.style-wide-quad .series-card-title {
          font-size: 16px !important; /* 4열 공간에 어울리게 타이틀 대폭 굵직 수치화 */
          font-weight: 800 !important;
          margin-bottom: 10px !important; /* 8px에서 10px로 미세 완화 */
        }

        #seriesCatalogGrid .series-card.style-wide-quad .series-meta-row,
        #seriesCatalogGrid .series-card.style-wide-quad .series-rating-views {
          font-size: 13px !important; /* 폰트 전반적 업사이징 실전 피드백 반영 */
          margin-bottom: 8px !important; /* 6px에서 8px로 미세 완화 */
        }

        #seriesCatalogGrid .series-card.style-wide-quad .tag-pill {
          font-size: 12px !important; /* 가독성 극대 도약 치수 */
          padding: 3px 8px !important;
          border-radius: 5px !important;
        }

        /* 3안도 이제 플레이 버튼이 포스터로 올라갔으므로, 텍스트 가로폭을 꽉 차게 복원하여 완벽한 와이드 미학 구현 */
        #seriesCatalogGrid .series-card.style-wide-quad .series-meta-row,
        #seriesCatalogGrid .series-card.style-wide-quad .series-rating-views,
        #seriesCatalogGrid .series-card.style-wide-quad .tag-pill-container {
          width: 100% !important;
        }


        /* ────────────────────────────────────────────────────────
           [그리드 마스터 조율 규칙]
           첫째/둘째 줄은 6열, 셋째 줄부터는 4열을 띄울 수 있도록
           그리드 컨테이너 레이아웃을 Flex-wrap 혹은 복합 Grid 구조로 최적화
           ──────────────────────────────────────────────────────── */
        #seriesCatalogGrid {
          display: flex !important;
          flex-wrap: wrap !important; /* 세밀한 가변 병합 지원 */
          gap: 16px !important;
          width: 100% !important;
          justify-content: flex-start !important;
        }

        /* 6열 카드 전용 너비 수식 조립 (Gap 16px 고려 소수점 보정) */
        #seriesCatalogGrid .series-card.style-play-inline,
        #seriesCatalogGrid .series-card.style-poster-hover {
          width: calc((100% - (16px * 5)) / 6) !important; /* 완벽하고 칼 같은 6등분 보증 */
          min-width: 160px !important;
        }

        /* 4열 와이드 카드 전용 너비 수식 조립 */
        #seriesCatalogGrid .series-card.style-wide-quad {
          width: calc((100% - (16px * 3)) / 4) !important; /* 풍부한 정보량의 명작 4열 레이크 */
          min-width: 250px !important;
        }

        /* 다양한 해상도 장치 미디어 쿼리 커버리지 보강 */
        @media (max-width: 1400px) {
          #seriesCatalogGrid .series-card.style-play-inline,
          #seriesCatalogGrid .series-card.style-poster-hover {
            width: calc((100% - (16px * 3)) / 4) !important; /* 4열 편입 */
          }
          #seriesCatalogGrid .series-card.style-wide-quad {
            width: calc((100% - (16px * 2)) / 3) !important; /* 3열로 크기 수축 제어 */
          }
        }

        @media (max-width: 1024px) {
          #seriesCatalogGrid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important; /* 태블릿/모바일 2열로 강력 복원 */
            gap: 12px !important;
            width: 100% !important;
          }
          #seriesCatalogGrid .series-card {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            flex: none !important;
          }
          #seriesCatalogGrid .series-card.style-play-inline,
          #seriesCatalogGrid .series-card.style-poster-hover,
          #seriesCatalogGrid .series-card.style-wide-quad {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
          }
        }

        @media (max-width: 640px) {
          #seriesCatalogGrid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important; /* 모바일 모던 스펙 2열 고정 */
            gap: 10px !important;
          }
          #seriesCatalogGrid .series-card {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            flex: none !important;
          }
          #seriesCatalogGrid .series-card.style-play-inline,
          #seriesCatalogGrid .series-card.style-poster-hover,
          #seriesCatalogGrid .series-card.style-wide-quad {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
          }
        }

        /*
         * 모바일 카탈로그 카드 테두리 — 메인 인기 연재·단편(.series-card)과 동일 윤곽
         * · 메인: border 1px solid var(--border-color) = rgba(255,255,255,0.08)
         * · 카탈로그 기본(#seriesCatalogGrid): 0.05 !important 로 더 희미 → 모바일에서만 보정
         */
        @media (max-width: 768px) {
          body[data-page="series"] #seriesCatalogGrid .series-card,
          body[data-page="new-episodes"] #seriesCatalogGrid .series-card,
          body[data-page="shorts"] #shortsCatalogGrid .series-card.shorts-catalog-card {
            border: 1px solid var(--border-color) !important;
            border-radius: 12px !important;
          }
        }

      /* ────────────────────────────────────────────────────────
         사이드바 컴팩트 위젯 스타일 가이드 (Professional Polish)
         ──────────────────────────────────────────────────────── */
      .sidebar-section {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .sidebar-title {
        font-size: 0.78rem;
        font-weight: 800;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      /* 주간 랭킹 위젯 */
      .sidebar-ranking-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      /* 전광판 뒤집기 애니메이션 */
      @keyframes flipBoard {
        0% {
          transform: rotateX(0deg);
        }
        50% {
          transform: rotateX(90deg);
          filter: brightness(1.8);
        }
        100% {
          transform: rotateX(0deg);
        }
      }
      .flip-action {
        animation: flipBoard 0.65s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .live-blink-dot {
        animation: blinkPulse 1.2s infinite alternate;
      }
      @keyframes blinkPulse {
        0% {
          opacity: 0.4;
          transform: scale(0.9);
        }
        100% {
          opacity: 1;
          transform: scale(1.2);
        }
      }
      .sidebar-ranking-item {
        display: flex;
        align-items: center;
        gap: 12px;
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 10px 12px;
        cursor: pointer;
        transition: var(--transition-fast);
      }
      .sidebar-ranking-item:hover {
        background-color: var(--bg-tertiary);
        border-color: rgba(201, 134, 26, 0.25);
        transform: translateX(3px);
      }
      .sidebar-rank-num {
        font-size: 1.2rem;
        font-weight: 800;
        font-style: italic;
        color: var(--text-muted);
        width: 20px;
        text-align: center;
      }
      .sidebar-ranking-item:nth-child(1) .sidebar-rank-num {
        color: var(--accent-gold); 
      }
      .sidebar-rank-thumb {
        width: 32px;
        height: 32px;
        border-radius: 4px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 썸네일 위 임시 워터마크 텍스트 숨김 — 배경 이미지만 노출 */
        font-size: 0;
        line-height: 0;
        color: transparent;
        text-shadow: none;
        border: 1px solid rgba(255, 255, 255, 0.05);
      }

      /*
       * 시네마틱 가로 썸네일 — 사이드바 랭킹 위젯 확장 (64×44)
       * 페이지별 ID scope 또는 이 클래스를 thumb에 추가해 사용
       */
      .sidebar-rank-thumb.sidebar-rank-thumb--cinematic {
        width: 64px;
        height: 44px;
        border-radius: 6px;
        font-size: 0;
        line-height: 0;
        color: transparent;
        text-shadow: none;
      }
      .sidebar-rank-info {
        flex: 1;
        min-width: 0;
      }
      .sidebar-rank-title {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 2px;
      }
      .sidebar-rank-meta {
        font-size: 0.7rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .sidebar-rank-hot {
        color: var(--accent-orange);
        font-weight: 700;
        font-size: 0.65rem;
      }

      /* 장르 탐색 칩 */
      .sidebar-genre-container {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .sidebar-genre-chip {
        padding: 5px 10px;
        border-radius: 99px;
        font-size: 0.72rem;
        font-weight: 600;
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-color);
        color: var(--text-sub);
        transition: var(--transition-fast);
        cursor: pointer;
      }
      .sidebar-genre-chip:hover {
        background-color: var(--bg-tertiary);
        border-color: rgba(201, 134, 26, 0.25);
        color: var(--accent-gold);
      }
      .sidebar-genre-chip.active {
        background-color: rgba(212, 163, 89, 0.15) !important;
        border-color: var(--accent-gold) !important;
        color: var(--accent-gold) !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(212, 163, 89, 0.2) !important;
      }

      /* 시즌 어워즈 */
      .awards-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .award-featured-card {
        cursor: pointer;
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        border: 1px solid rgba(242, 193, 78, 0.15);
        transition: var(--transition-smooth);
      }
      .award-featured-card:hover {
        border-color: rgba(242, 193, 78, 0.4);
        transform: translateX(3px);
        box-shadow: 0 4px 12px rgba(242, 193, 78, 0.08);
      }
      .award-badge-ribbon {
        position: absolute;
        top: 15px;
        left: 10px;
        background: linear-gradient(135deg, rgba(20, 22, 26, 0.95) 0%, rgba(10, 11, 13, 0.98) 100%);
        border: 1px solid rgba(242, 193, 78, 0.85);
        font-size: 0.65rem;
        font-weight: 800;
        color: #f2c14e;
        padding: 3px 10px 3px 8px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 6px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15);
        z-index: 2;
        overflow: visible;
      }
      .award-trophy {
        font-size: 1.4rem;
        line-height: 1;
        filter: drop-shadow(0 0 6px rgba(242, 193, 78, 0.95)) drop-shadow(1px 3px 4px rgba(0,0,0,0.8));
        transform: scale(1.35) translateY(-5px);
        transform-origin: bottom center;
        display: inline-block;
        flex-shrink: 0;
      }
      /* 수상작 카드·컴팩트 트로피 배지 */
      .award-badge-ribbon--compact {
        display: inline-flex;
        align-self: flex-start;
        font-size: 0.72rem;
        background: rgba(12, 11, 14, 0.88);
        border: 1px solid rgba(242, 193, 78, 0.32);
        box-shadow: 0 0 14px rgba(242, 193, 78, 0.12), 0 2px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
      }
      .award-badge-ribbon--compact .award-trophy {
        font-size: 1.1rem;
        transform: scale(1.15) translateY(-2px);
      }
      .award-featured-bg {
        height: 110px;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: flex-end;
        padding: 12px;
        position: relative;
      }
      .award-featured-bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(15,17,19,0.95) 0%, rgba(15,17,19,0.3) 100%);
        z-index: 1;
      }
      .award-featured-content {
        position: relative;
        z-index: 2;
        flex: 1;
        min-width: 0;
      }
      .award-featured-title {
        font-size: 0.82rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .award-featured-meta {
        font-size: 0.68rem;
        color: var(--accent-gold);
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .award-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow: visible;
      }

      /* 메인 시즌 어워즈 위젯 — 리본 메달 glow가 잘리지 않도록 */
      #seasonAwards .awards-container,
      #seasonAwardsMobile .awards-container {
        overflow: visible;
      }
      .award-item {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 8px 10px;
        transition: var(--transition-fast);
        overflow: visible;
        position: relative;
      }
      .award-item:hover {
        background-color: var(--bg-tertiary);
        border-color: rgba(242, 193, 78, 0.2);
        transform: translateX(3px);
      }
      .award-item-icon {
        font-size: 0.78rem;
        color: var(--accent-gold);
        background: rgba(242, 193, 78, 0.08);
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(242, 193, 78, 0.12);
        flex-shrink: 0;
      }
      .award-item-body {
        flex: 1;
        min-width: 0;
      }
      .award-category {
        font-size: 0.62rem;
        color: var(--accent-gold);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        margin-bottom: 1px;
      }
      .award-title {
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .award-meta {
        font-size: 0.65rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 4px;
      }

      /* 크리에이터 하이라이트 */
      .sidebar-creator-card {
        display: flex;
        align-items: center;
        gap: 12px;
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 12px;
        transition: var(--transition-fast);
      }
      .sidebar-creator-card:hover {
        background-color: var(--bg-tertiary);
        border-color: rgba(242, 193, 78, 0.22);
      }
      .sidebar-creator-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--gradient-cinema); 
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 800;
        color: #fff;
        flex-shrink: 0;
      }
      .sidebar-creator-info {
        flex: 1;
        min-width: 0;
      }
      .sidebar-creator-name {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .sidebar-creator-followers {
        font-size: 0.68rem;
        color: var(--text-muted);
      }
      .sidebar-creator-follow-btn {
        background-color: rgba(201, 134, 26, 0.06); 
        border: 1px solid rgba(201, 134, 26, 0.2);
        color: var(--accent-gold); 
        padding: 5px 12px;
        border-radius: 6px;
        font-size: 0.68rem;
        font-weight: 700;
        transition: var(--transition-fast);
        cursor: pointer;
      }
      .sidebar-creator-follow-btn:hover {
        background-color: var(--accent-orange);
        border-color: var(--accent-gold);
        color: #fff;
      }

      /* ==========================================
         [MVP v1.0] 회원 서비스 전용 프리미엄 CSS
         ========================================== */
      .header-auth-btn {
        background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
        border: 1px solid rgba(255,255,255,0.12);
        color: var(--text-main);
        padding: 5px 14px;
        border-radius: 6px;
        font-size: 0.76rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-fast);
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .header-auth-btn:hover {
        background-color: var(--accent-orange);
        border-color: var(--accent-gold);
        color: #fff;
      }
      /* 기본 버튼 padding 보다 뒤에 둔다. 1025–1360에서 7개 메뉴와 겹치지 않게 한다. */
      @media (max-width: 1360px) and (min-width: 1025px) {
        .header-auth-btn { padding: 5px 8px; }
        .btn-submit { padding: 6px 10px; }
      }
      
      /* 알림 벨 스타일 */
      .noti-container {
        position: relative;
        display: inline-block;
      }
      .btn-noti {
        background: none;
        border: none;
        color: var(--text-sub);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
        transition: var(--transition-fast);
      }
      .btn-noti:hover {
        color: var(--accent-gold);
        border-color: var(--accent-gold);
        background-color: rgba(201,134,26,0.05);
      }
      .noti-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 7px;
        height: 7px;
        background-color: #ef4444;
        border-radius: 50%;
        border: 1px solid var(--bg-primary);
      }
      .noti-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background-color: rgba(18, 19, 23, 0.98);
        border: 1px solid rgba(15, 17, 19, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        padding: 8px 0;
        width: 280px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
        z-index: 1010;
        display: none;
        flex-direction: column;
        backdrop-filter: blur(10px);
      }
      .noti-dropdown.show {
        display: flex;
      }
      .noti-header {
        padding: 6px 14px 10px;
        border-bottom: 1px solid rgba(255,193,7,0.1);
        font-size: 0.81rem;
        font-weight: 700;
        color: var(--accent-gold);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      /* PC 알림 — 헤더 '전체 삭제' 인라인 크기 10% 상향 */
      .noti-dropdown:not(.mobile-noti-dropdown) .noti-header span[style] {
        font-size: 0.66rem !important;
      }
      .noti-list {
        max-height: 250px;
        overflow-y: auto;
      }
      .noti-item {
        padding: 10px 14px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        display: flex;
        flex-direction: column;
        gap: 3px;
        transition: background 0.2s;
        cursor: pointer;
      }
      .noti-item:hover {
        background-color: rgba(255,255,255,0.02);
      }
      .noti-title-wrap {
        display: flex;
        align-items: center;
        gap: 5px;
        line-height: 1.2;
      }
      .noti-title {
        font-size: 0.79rem;
        font-weight: 600;
        color: var(--text-main);
        line-height: 1.25;
      }
      .noti-desc {
        font-size: 0.72rem;
        color: var(--text-sub);
        line-height: 1.3;
      }
      .noti-time {
        font-size: 0.64rem;
        color: var(--text-muted);
        text-align: right;
        line-height: 1.2;
      }

      /* 프로필 아바타 & 마이메뉴 */
      .profile-container {
        position: relative;
        display: inline-block;
      }
      .btn-profile {
        background: none;
        border: none;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        padding: 2px;
        border-radius: 99px;
        transition: var(--transition-fast);
      }
      .avatar-img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--accent-gold);
        box-shadow: 0 0 8px rgba(242,193,78,0.25);
      }
      .btn-profile:hover .avatar-img {
        border-color: #fff;
        box-shadow: 0 0 12px rgba(255,255,255,0.4);
      }
      .profile-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background-color: rgba(18, 19, 23, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        padding: 8px 0;
        min-width: 175px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
        z-index: 1010;
        display: none;
        flex-direction: column;
        backdrop-filter: blur(10px);
      }
      .profile-dropdown.show {
        display: flex;
      }
      .profile-dropdown-user {
        padding: 10px 14px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .profile-dropdown-user .user-name {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--text-main);
      }
      .profile-dropdown-user .user-email {
        font-size: 0.64rem;
        color: var(--text-muted);
      }
      .profile-dropdown-item {
        background: none;
        border: none;
        text-align: left;
        width: 100%;
        padding: 9px 16px;
        font-size: 0.74rem;
        font-weight: 500;
        color: var(--text-sub);
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .profile-dropdown-item:hover {
        background-color: rgba(255,255,255,0.04);
        color: #fff;
      }
      .profile-dropdown-item.logout {
        color: #fca5a5;
        border-top: 1px solid rgba(255,255,255,0.04);
        margin-top: 4px;
      }
      .profile-dropdown-item.logout:hover {
        background-color: rgba(239, 68, 68, 0.08);
        color: #ef4444;
      }

      /* 내 이어보기 (Continue Watching) 쉘프 관련 */
      .continue-section {
        padding: 24px 0 32px;
        background-color: rgba(255,255,255,0.015);
        border-bottom: 1px solid rgba(255,255,255,0.03);
      }
      .continue-section[hidden] {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
      }
      .continue-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-top: 14px;
      }
      @media (max-width: 1200px) {
        .continue-grid { grid-template-columns: repeat(3, 1fr); }
      }
      @media (max-width: 768px) {
        .continue-grid { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 480px) {
        .continue-grid { grid-template-columns: 1fr; }
      }
      
      .continue-card {
        background-color: #141619;
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 8px;
        overflow: hidden;
        transition: var(--transition-smooth);
        display: flex;
        flex-direction: column;
        position: relative;
        cursor: pointer;
      }
      .continue-card:hover {
        transform: translateY(-3px);
        border-color: rgba(201, 134, 26, 0.4);
        box-shadow: 0 8px 20px rgba(0,0,0,0.4);
      }
      .continue-thumb-wrap {
        width: 100%;
        padding-top: 56.25%; /* 16:9 비율 */
        position: relative;
        background-color: #0b0c0d;
        overflow: hidden;
      }
      .continue-thumb {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.85;
        transition: transform 0.3s;
      }
      .continue-card:hover .continue-thumb {
        transform: scale(1.05);
        opacity: 1;
      }
      .continue-progress-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background-color: var(--accent-gold);
        z-index: 5;
        box-shadow: 0 0 8px var(--accent-gold);
      }
      .continue-card-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(201, 134, 26, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.25s;
        box-shadow: 0 0 10px rgba(242,193,78,0.4);
      }
      .continue-card:hover .continue-card-play {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      .continue-info {
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .continue-series-title {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--accent-gold);
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .continue-ep-title {
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .continue-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 4px;
      }
      .continue-ep-num {
        font-size: 0.65rem;
        color: var(--text-sub);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .continue-badge {
        font-size: 0.58rem;
        font-weight: 700;
        background-color: rgba(16, 185, 129, 0.15);
        color: var(--accent-mint);
        border: 1px solid rgba(16, 185, 129, 0.3);
        padding: 1px 5px;
        border-radius: 4px;
        flex-shrink: 0;
      }

      /* 비로그인용 Continue Watching 플레이스홀더 쉘프 */
      .continue-placeholder {
        background-color: rgba(255,255,255,0.015);
        border: 1px dashed rgba(255,255,255,0.1);
        border-radius: 10px;
        padding: 20px 24px;
        text-align: left;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 14px;
        min-height: auto;
      }
      .continue-placeholder-text {
        font-size: 0.82rem;
        color: var(--text-sub);
        flex: 1;
        line-height: 1.5;
      }
      .continue-placeholder-btn {
        background: var(--gradient-cinema);
        padding: 8px 16px;
        font-size: 0.75rem;
        font-weight: 700;
        border-radius: 5px;
        color: #fff;
        transition: var(--transition-fast);
        white-space: nowrap;
        flex-shrink: 0;
      }
      .continue-placeholder-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(201, 134, 26, 0.4);
      }

      @media (max-width: 768px) {
        .continue-placeholder {
          flex-direction: column;
          text-align: center;
          padding: 24px 20px;
          gap: 12px;
        }
      }

      /* 카드 레벨 액션 (좋아요 / 북마크 전면 오버레이) */
      .card-media-wrap {
        position: relative;
      }
      .card-social-overlay {
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
        gap: 6px;
        z-index: 20;
        opacity: 0;
        transform: translateY(-3px);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }
      /* 카드가 호버될 시 소셜 오버레이 등장 */
      .ongoing-card:hover .card-social-overlay,
      .today-ep-card:hover .card-social-overlay,
      .popular-card:hover .card-social-overlay,
      .award-card:hover .card-social-overlay {
        opacity: 1;
        transform: translateY(0);
      }
      .card-action-btn {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: rgba(18, 19, 23, 0.85);
        border: 1px solid rgba(255,255,255,0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-sub);
        transition: var(--transition-fast);
        outline: none;
      }
      .card-action-btn:hover {
        background-color: #121212;
        border-color: var(--accent-gold);
        color: var(--accent-gold);
        transform: scale(1.1);
      }
      .card-action-btn.active.like {
        color: #ef4444 !important;
        border-color: rgba(239, 68, 68, 0.4) !important;
        background-color: rgba(239, 68, 68, 0.15) !important;
      }
      .card-action-btn.active.bookmark {
        color: var(--accent-gold) !important;
        border-color: rgba(242, 193, 78, 0.4) !important;
        background-color: rgba(242, 193, 78, 0.15) !important;
      }

      /* 회원 기능 모달 (로그인 / 회원가입 공통 모달) */
      .auth-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(12px);
      }
      .auth-modal.active {
        display: flex;
      }
      .auth-modal-card {
        background-color: rgba(20, 22, 26, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        width: 100%;
        max-width: 400px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.8);
        padding: 30px;
        position: relative;
        animation: modalScaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .auth-close-btn {
        position: absolute;
        top: 16px;
        right: 16px;
        color: var(--text-muted);
        background: none;
        border: none;
        font-size: 1.2rem;
        cursor: pointer;
        transition: var(--transition-fast);
      }
      .auth-close-btn:hover {
        color: #fff;
      }
      .auth-tabs {
        display: flex;
        border-bottom: 2px solid rgba(255,255,255,0.06);
        margin-bottom: 22px;
        gap: 16px;
      }
      .auth-tab-btn {
        padding-bottom: 10px;
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text-sub);
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: var(--transition-fast);
      }
      .auth-tab-btn.active {
        color: var(--accent-gold);
        border-color: var(--accent-gold);
      }
      .auth-intro-desc {
        font-size: 0.74rem;
        color: var(--text-sub);
        line-height: 1.5;
        margin-bottom: 20px;
        background-color: rgba(255,255,255,0.02);
        padding: 10px 12px;
        border-radius: 6px;
        border-left: 3px solid var(--accent-gold);
      }
      .auth-form {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .auth-input-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .auth-input-label {
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--accent-gold);
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      .auth-input {
        background-color: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 6px;
        padding: 9px 12px;
        font-size: 0.78rem;
        color: #fff;
        width: 100%;
        transition: var(--transition-fast);
      }
      .auth-input:focus {
        border-color: var(--accent-gold);
        background-color: rgba(255, 255, 255, 0.08);
      }
      .auth-submit-btn {
        background: var(--gradient-cinema);
        color: #fff;
        padding: 10px;
        border-radius: 6px;
        font-size: 0.82rem;
        font-weight: 700;
        margin-top: 10px;
        transition: var(--transition-fast);
      }
      .auth-submit-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 15px rgba(201, 134, 26, 0.45);
      }
      .auth-social-divider {
        display: flex;
        align-items: center;
        text-align: center;
        font-size: 0.64rem;
        color: var(--text-muted);
        margin: 18px 0;
      }
      .auth-social-divider::before, .auth-social-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid rgba(255,255,255,0.06);
      }
      .auth-social-divider:not(:empty)::before { margin-right: .5em; }
      .auth-social-divider:not(:empty)::after { margin-left: .5em; }
      
      .btn-social-google {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background-color: #fff;
        color: #121212;
        padding: 10px;
        border-radius: 6px;
        font-size: 0.76rem;
        font-weight: 700;
        transition: var(--transition-fast);
      }
      .btn-social-google:hover {
        background-color: #f3f4f6;
        transform: translateY(-1px);
      }

      /* 상세 모달 내 회원 반응 액션바 스타일 */
      .modal-user-actions-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 14px;
        margin-bottom: 12px;
        align-items: center;
      }
      /* 단편/쇼츠형: 알림 숨김 시 3칸 그리드 */
      .modal-user-actions-row.is-standalone-actions {
        grid-template-columns: repeat(3, 1fr);
      }
      /* 단편/쇼츠형: 알림 버튼 완전 숨김 (모바일 display:flex!important 보다 우선) */
      .modal-user-actions-row.is-standalone-actions #modalAlertPill {
        display: none !important;
        pointer-events: none !important;
      }
      /* 단일 작품: 시리즈 전용 UI·빈 구분선 숨김. 좋아요·북마크·평점·팔로우는 유지 */
      #cinemaDetailModal.is-standalone-work .md-series-title,
      #cinemaDetailModal.is-standalone-work #modalStatusBadge,
      #cinemaDetailModal.is-standalone-work #modalSeasonEpBadge,
      #cinemaDetailModal.is-standalone-work #modalEpisodeListSection,
      #cinemaDetailModal.is-standalone-work .md-footer-actions {
        display: none !important;
      }
      #cinemaDetailModal.is-standalone-work .md-meta-creator-row {
        justify-content: flex-start;
      }
      #cinemaDetailModal.is-standalone-work #modalCuratorSection[hidden],
      #cinemaDetailModal.is-standalone-work #modalProductionTechSection[hidden] {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
      }
      /* 플레이어에 연결되지 않은 자막 선호 드롭다운 */
      #modalSubtitlePrefWrap[hidden] {
        display: none !important;
      }
      .modal-action-pill {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background-color: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 6px;
        padding: 8px 4px;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--text-sub);
        transition: var(--transition-fast);
        height: 36px;
        box-sizing: border-box;
        cursor: pointer;
        width: 100%;
      }
      .modal-action-pill:hover {
        background-color: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.2);
        color: #fff;
      }
      
      /* 개별 버튼 액티브 피드백 전용 ID 스타일 */
      #modalLikePill.active {
        background-color: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.4);
        color: #fca5a5;
      }
      #modalLikePill.active:hover {
        background-color: rgba(239, 68, 68, 0.2);
        color: #ef4444;
      }
      #modalBookmarkPill.active {
        background-color: rgba(242, 193, 78, 0.12);
        border-color: rgba(242, 193, 78, 0.4);
        color: var(--accent-gold);
      }
      #modalBookmarkPill.active:hover {
        background-color: rgba(242, 193, 78, 0.2);
        color: #fff;
      }
      #modalAlertPill.active {
        background-color: rgba(16, 185, 129, 0.12);
        border-color: rgba(16, 185, 129, 0.4);
        color: var(--accent-mint);
      }
      #modalAlertPill.active:hover {
        background-color: rgba(16, 185, 129, 0.2);
        color: #10b981;
      }
      #modalRatePill.active {
        background-color: rgba(245, 158, 11, 0.12);
        border-color: rgba(245, 158, 11, 0.4);
        color: #fbbf24;
      }
      #modalRatePill.active:hover {
        background-color: rgba(245, 158, 11, 0.2);
        color: #fff;
      }

      /* 상세 모달 전용 평점 드롭다운 컨테이너 및 팝업 */
      .modal-rating-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
      }
      .modal-rating-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background-color: #161616;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        padding: 10px;
        z-index: 999;
        display: none;
        flex-direction: column;
        align-items: center;
        min-width: 140px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65);
        text-align: center;
      }
      .modal-rating-dropdown.show {
        display: flex;
      }
      /* 단편/쇼츠형: 평점 버튼이 맨 오른쪽 — 드롭다운 우측 정렬로 화면 밖 잘림 방지 */
      .modal-user-actions-row.is-standalone-actions .modal-rating-dropdown {
        left: auto;
        right: 0;
        transform: none;
      }
      .modal-stars-row {
        display: flex;
        gap: 6px;
        margin-top: 4px;
        justify-content: center;
      }
      .modal-stars-row .star-btn {
        font-size: 1rem;
        background: none;
        border: none;
        padding: 2px;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.2);
        transition: transform 0.15s, color 0.15s;
      }
      .modal-stars-row .star-btn.active {
        color: var(--accent-gold);
        text-shadow: 0 0 6px rgba(242, 193, 78, 0.6);
      }
      .modal-stars-row .star-btn:hover {
        transform: scale(1.2);
      }

      /* 이전 공용 평점 쉘프 스타일 유지 */
      .rating-picker-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: rgba(255,255,255,0.02);
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: 8px;
        padding: 10px 14px;
        margin-top: 10px;
        margin-bottom: 4px;
      }
      .rating-stars-wrap {
        display: flex;
        gap: 6px;
      }
      .star-btn {
        font-size: 1.1rem;
        color: rgba(255,255,255,0.15);
        transition: all 0.15s;
        transform: scale(1);
      }
      .star-btn.active {
        color: var(--accent-gold);
        text-shadow: 0 0 8px rgba(242,193,78,0.4);
      }
      .star-btn:hover {
        transform: scale(1.15);
      }

      /* ========================================================
         [MOBILE OVERRIDES] 모바일 전용 반응형 레이아웃 오버라이드 규격 (360px~768px 완벽 보증)
         ======================================================== */
      @media (max-width: 1024px) {
        .portal-layout-container {
          grid-template-columns: 1fr !important;
          gap: 0 !important;
        }
        .portal-left-column {
          gap: 16px !important; /* 모바일/태블릿에서 요소 간격을 16px로 대폭 줄여 여백 밀도 최적화 */
          width: 100% !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
          overflow-x: hidden !important;
        }
        .portal-right-sidebar {
          display: none !important; /* PC 사이드바 완전 숨김 */
        }
        .mobile-only-section {
          display: flex !important; /* 모바일 전용 랭킹 및 어워즈 노출 */
        }
      }

      @media (max-width: 768px) {
        /* [공통 기준 및 바텀바 가림 방지] */
        html, body {
          width: 100% !important;
          max-width: 100% !important;
          overflow-x: hidden !important;
        }
        body {
          word-break: keep-all !important;
          padding-bottom: 84px !important; /* 하단 고정 메뉴바 64px + 추가 여유 간격 */
        }
        h1, h2, h3, h4, h5, p, span, div {
          word-break: keep-all !important;
        }

        /* [1. 모바일 헤더 수정 - 추천안 A 완벽 이행 및 스크롤 감지 인터랙션 지원] */
        header, header.scrolled {
          height: auto !important;
          padding: 10px 16px !important;
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          width: 100% !important;
          z-index: 1000 !important;
          box-sizing: border-box !important;
          background: rgba(13, 14, 24, 0.96) !important;
          backdrop-filter: blur(12px) !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
          transform: translateY(0);
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        /* 
          추천안 A 1행/2행 완벽 실현하는 Flex & Order 구조 정렬
          display: contents 를 통하여 .header-right 내부의 요소들을 상위 부모 수준으로 직접 끌어와 Flex 오버라이딩 처리
        */
        .header-container {
          display: flex !important;
          flex-direction: row !important;
          flex-wrap: wrap !important;
          align-items: center !important;
          justify-content: space-between !important;
          padding: 0 !important;
          gap: 0px !important;
          height: auto !important;
          width: 100% !important;
          position: relative !important;
        }
        
        .header-right {
          display: contents !important; /* 서브 뎁스를 제거해 부모 컨테이너에 직접 정렬 허용 */
        }
        
        /* [1행 왼쪽 고정] 모바일 로고 가두기 */
        .logo {
          order: 1 !important;
          flex: 0 0 auto !important;
          display: flex !important;
          align-items: center !important;
          gap: 6px !important;
          font-size: 1.1rem !important; /* 18px 최적화 */
          font-weight: 700 !important;
          white-space: nowrap !important;
          height: 36px !important;
          padding: 0 !important;
          margin-right: auto !important;
          user-select: none !important;
          cursor: pointer !important;
        }
        .logo-icon {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          width: 22px !important;
          height: 22px !important;
          font-size: 0.9rem !important;
          background: var(--gradient-cinema);
          border-radius: 6px;
          color: #fff;
        }
        
        /* [1행 오른쪽 서브 1-1] 모바일 알림 컨테이너 & 버튼 */
        .mobile-noti-container {
          order: 2 !important;
          flex: 0 0 auto !important;
          margin-left: auto !important;
          margin-right: 8px !important;
          display: none; /* 디폴트는 가림, 로그인 시 block */
          position: relative !important;
        }
        .mobile-noti-btn {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          height: 28px !important;
          width: 28px !important;
          background: rgba(255, 255, 255, 0.05) !important;
          border: 1px solid rgba(255, 255, 255, 0.1) !important;
          border-radius: 6px !important;
          color: #fff !important;
          cursor: pointer !important;
          position: relative !important;
          margin: 0 !important;
        }
        .mobile-noti-btn svg {
          width: 13.5px !important;
          height: 13.5px !important;
        }
        .mobile-noti-badge {
          position: absolute !important;
          top: 3.5px !important;
          right: 3.5px !important;
          width: 5.5px !important;
          height: 5.5px !important;
          background-color: #ef4444 !important;
          border-radius: 50% !important;
          display: none;
        }
        
        /* 모바일 알림 드롭다운 전용 스타일 */
        .mobile-noti-dropdown {
          position: absolute !important;
          top: calc(100% + 10px) !important;
          right: -85px !important; /* 드롭다운을 조금 더 우측 정렬 축으로 끌어와 화면의 우측 부근에 맞춰 왼쪽 가려짐 완전 예방 */
          width: 285px !important;
          max-height: 350px !important;
          background-color: rgba(18, 19, 23, 0.98) !important;
          backdrop-filter: blur(15px) !important;
          -webkit-backdrop-filter: blur(15px) !important;
          border: 1px solid rgba(255, 255, 255, 0.16) !important;
          border-radius: 12px !important;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85) !important;
          z-index: 2100 !important;
          display: none;
          flex-direction: column !important;
        }
        .mobile-noti-dropdown.show {
          display: flex !important;
        }

        /* 모바일 알림 리스트 — 텍스트 가독성 상향 + 항목 간격 촘촘하게 */
        .mobile-noti-dropdown .noti-header {
          padding: 8px 14px 9px !important;
          font-size: 0.86rem !important;
        }

        .mobile-noti-dropdown .noti-header span[style] {
          font-size: 0.72rem !important;
        }

        .mobile-noti-dropdown .noti-list {
          max-height: 360px !important;
        }

        .mobile-noti-dropdown .noti-item {
          padding: 8px 14px !important;
          gap: 2px !important;
        }

        .mobile-noti-dropdown .noti-title-wrap {
          line-height: 1.2 !important;
        }

        .mobile-noti-dropdown .noti-title {
          font-size: 0.84rem !important;
          line-height: 1.25 !important;
        }

        .mobile-noti-dropdown .noti-desc {
          font-size: 0.76rem !important;
          line-height: 1.32 !important;
        }

        .mobile-noti-dropdown .noti-time {
          font-size: 0.68rem !important;
          line-height: 1.2 !important;
          margin-top: 1px !important;
        }

        .mobile-noti-dropdown .noti-empty {
          padding: 14px 14px !important;
          font-size: 0.76rem !important;
          line-height: 1.35 !important;
          color: var(--text-sub) !important;
          text-align: center !important;
        }

        /* [1행 오른쪽 서브 1-2] 언어 토글 축소 배치 */
        .lang-dropdown-container {
          order: 3 !important;
          flex: 0 0 auto !important;
          margin-left: 0 !important;
          margin-right: 8px !important;
          display: flex !important;
          align-items: center !important;
          height: 36px !important;
        }
        /* 알림 단추가 없을 때(비로그인)는 언어 토글이 자동으로 맨 왼쪽으로 가도록(즉, margin-left: auto 효과) 하거나, 
           스크립트 혹은 CSS 디폴트로 처리되도록 .logo { margin-right: auto } 가 보장해주고 있음 */
        .lang-toggle {
          padding: 2px 8px !important;
          font-size: 0.7rem !important;
          height: 28px !important;
          min-width: unset !important;
          gap: 3px !important;
          background: rgba(255, 255, 255, 0.05) !important;
          border: 1px solid rgba(255, 255, 255, 0.1) !important;
          border-radius: 6px !important;
        }
        .lang-toggle svg {
          width: 11px !important;
          height: 11px !important;
        }
        
        /* [1행 최우측 고정] 모바일 햄버거 메뉴 */
        .mobile-menu-toggle {
          order: 4 !important;
          flex: 0 0 auto !important;
          display: flex !important;
          flex-direction: column !important;
          justify-content: space-between !important;
          background: rgba(255, 255, 255, 0.05) !important;
          border: 1px solid rgba(255, 255, 255, 0.1) !important;
          padding: 6px 5px !important;
          border-radius: 6px !important;
          width: 30px !important;
          height: 28px !important;
          cursor: pointer !important;
          z-index: 50 !important;
          box-sizing: border-box !important;
        }
        .mobile-menu-toggle span {
          display: block !important;
          height: 2px !important;
          width: 100% !important;
          background-color: #ffffff !important;
          border-radius: 2px !important;
        }
        
        .nav-menu, nav {
          display: none !important; /* PC 전용 주메뉴 숨김 */
        }
        
        /* [2행 검색창 독점 구조] 가로폭 100% 넓기 배치 */
        .search-container {
          order: 5 !important;
          flex: 0 0 100% !important;
          width: 100% !important;
          max-width: 100% !important;
          height: 36px !important;
          margin: 10px 0 0 0 !important; /* 로고 아랫줄 마진 배정 */
          padding: 2px 10px !important;
          background: rgba(255, 255, 255, 0.04) !important;
          border: 1px solid rgba(255, 255, 255, 0.08) !important;
          border-radius: 8px !important;
          display: flex !important;
          align-items: center !important;
          box-sizing: border-box !important;
        }
        .search-input {
          font-size: 0.8rem !important;
          flex: 1 !important;
          background: transparent !important;
          border: none !important;
          color: #fff !important;
        }
        .search-icon svg {
          width: 14px !important;
          height: 14px !important;
        }

        /* 알림/프로필/단독 등록버튼은 상단 헤더에서 철저 숨김 처리 */
        .noti-container,
        .profile-container,
        .header-auth-btn,
        .btn-submit {
          display: none !important;
        }

        /* [2. 모바일 히어로 섹션 — 상단 내부 여백 축소 (포탈 margin으로 헤더 이격은 이미 확보됨) */
        .hero-section {
          padding: 52px 0 24px 0 !important; /* 기존 106px → 절반(52px)으로 상단 빈공간 축소 */
          align-items: flex-start !important; /* flex 세로 중앙정렬로 생기는 추가 상단 여백 제거 */
          min-height: 480px !important;
          border-bottom-left-radius: 28px !important; /* 힉스필드 스타일의 매끄럽고 트렌디한 라운딩 마스크 */
          border-bottom-right-radius: 28px !important;
          margin-bottom: 4px !important;
          background: #000 !important;
          box-shadow: 0 10px 40px rgba(0,0,0,0.95) !important;
        }
        .hero-bg, .hero-bg::after {
          display: none !important;
        }
        .hero-slides {
          z-index: 1 !important;
        }
        .hero-slide.active {
          opacity: 0.45 !important; /* 모바일 비주얼 가치를 극대화하기 위해 이미지가 더 깊게 배출됨 */
        }
        .hero-overlay {
          background: linear-gradient(180deg, rgba(10,10,12,0.35) 0%, rgba(10,10,12,0.65) 50%, rgba(10,10,12,0.92) 80%, #0a0a0c 100%) !important;
          z-index: 2 !important;
        }
        .hero-container {
          flex-direction: column !important;
          gap: 20px !important;
          padding: 0 20px !important;
          text-align: center !important;
          z-index: 10 !important;
        }
        .hero-content {
          max-width: 100% !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
        }
        .hero-title {
          font-size: 30px !important; /* 모바일 타이틀 권장 30~36px */
          line-height: 1.2 !important;
          word-break: keep-all !important;
          text-align: center !important;
          margin-bottom: 12px !important;
          text-shadow: 0 3px 12px rgba(0,0,0,0.85) !important;
          font-weight: 800 !important;
        }
        .hero-title-highlight {
          display: block !important;
          background: linear-gradient(135deg, #ffd700 0%, #f59e0b 100%) !important;
          -webkit-background-clip: text !important;
          -webkit-text-fill-color: transparent !important;
          margin-top: 6px !important;
        }
        .hero-desc {
          font-size: 14px !important; /* 서브 카피 14-15px 권장 */
          line-height: 1.5 !important;
          color: rgba(255, 255, 255, 0.75) !important;
          text-align: center !important;
          word-break: keep-all !important;
          margin-bottom: 24px !important;
          text-shadow: 0 1px 6px rgba(0,0,0,0.7) !important;
          font-weight: 500 !important;
        }
        .hero-actions {
          display: flex !important;
          flex-direction: column !important;
          width: 100% !important;
          max-width: 290px !important;
          gap: 10px !important;
          margin-bottom: 20px !important;
        }
        .hero-actions .btn {
          width: 100% !important;
          height: 46px !important; /* 터치 타겟 44px 이상 철저 준수 */
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          font-size: 0.92rem !important;
          font-weight: 700 !important;
          border-radius: 9px !important;
          margin: 0 !important;
        }
        .hero-btn-cta {
          background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
          color: #000000 !important;
          border: none !important;
          box-shadow: 0 4px 20px rgba(245,158,11,0.3) !important;
        }
        .hero-btn-outline {
          background: rgba(255, 255, 255, 0.05) !important;
          border: 1px solid rgba(255, 255, 255, 0.16) !important;
          color: #ffffff !important;
        }
        .hero-visual {
          display: none !important; /* 피처드 카드 숨김 */
        }
        
        /* 모바일 전용 슬라이더 인디케이터 도트 */
        .hero-indicator-group {
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
          gap: 8px !important;
          margin-top: 10px !important;
        }
        .hero-indicator-dot {
          width: 7px !important;
          height: 7px !important;
          border-radius: 50% !important;
          background-color: rgba(255, 255, 255, 0.3) !important;
          cursor: pointer !important;
          transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        .hero-indicator-dot.active {
          width: 20px !important;
          border-radius: 4px !important;
          background-color: var(--accent-gold) !important;
        }

        /* [4. 모바일 카드 및 카루셀 레이아웃 규칙] */
        /* 내 이어보기 섹션 및 카드 간격 모바일 여백 축소 */
        .continue-section {
          padding: 8px 0 16px 0 !important;
        }
        .continue-section[hidden] {
          display: none !important;
          margin: 0 !important;
          padding: 0 !important;
          border: none !important;
          background: none !important;
        }
        .continue-grid {
          display: flex !important;
          overflow-x: auto !important;
          scroll-snap-type: x mandatory !important;
          gap: 20px !important; /* 오늘의 신작 에피소드와 완벽하게 일치하는 gap 지정 */
          padding: 10px 0 !important; /* 위아래 간격을 신작 에피소드 스크롤바 정렬 패딩과 동기화 */
          margin-left: 0 !important; /* 모바일 그리안에 완전히 안착하여 좌우 패널 여백 정밀 일치 */
          margin-right: 0 !important;
          scrollbar-width: none !important; /* 파이어폭스 스크롤 숨김 */
        }
        .continue-grid::-webkit-scrollbar {
          display: none !important; /* 크롬 스크롤 숨김 */
        }
        .continue-card {
          flex: 0 0 280px !important; /* 오늘의 신작 에피소드와 정확히 같은 280px 가로폭 지정 */
          width: 280px !important;
          min-width: 280px !important;
          scroll-snap-align: start !important;
        }

        /* 신작 에피소드 및 단편에 대한 수평 스크롤 고정 */
        .grid-new-episodes, .grid-film-shorts {
          display: flex !important;
          overflow-x: auto !important;
          scroll-snap-type: x mandatory !important;
          gap: 12px !important;
          padding: 4px 16px 16px 16px !important;
          margin-left: -16px !important;
          margin-right: -16px !important;
          scrollbar-width: none !important; /* 파이어폭스 스크롤 숨김 */
        }
        .grid-new-episodes::-webkit-scrollbar, .grid-film-shorts::-webkit-scrollbar {
          display: none !important; /* 크롬 스크롤 숨김 */
        }
        
        .ep-card, .film-card {
          flex: 0 0 75% !important; /* 카드가 뷰포트의 75% 너비로 이쁜 스크롤 보장 */
          scroll-snap-align: start !important;
          min-width: 240px !important;
        }
        
        /* [모바일 전용 배지/태그 단락 갈림 방지 구제 규칙] */
        .badge, .genre-badge-pill, .tag-pill, .genre-badge-pill *, .badge *, .tag-pill * {
          white-space: nowrap !important;
          word-break: keep-all !important;
          display: inline-block !important;
        }

        /* 모바일 썸네일 내부 장르 및 연재 상태 배지 균일 크기(큰쪽) 쌍둥이 최적화 */
        #seriesCatalogGrid .series-card .genre-badge-pill,
        #seriesCatalogGrid .series-card .badge {
          font-size: 9px !important;
          padding: 2px 5px !important;
          border-radius: 3px !important;
          font-weight: 800 !important;
          letter-spacing: 0.3px !important;
          height: auto !important;
          line-height: 1.1 !important;
          text-transform: uppercase !important;
          box-shadow: none !important;
        }

        /* absolute left/right 꼬임 방지를 위한 안전 복구 조치 */
        #seriesCatalogGrid .series-card .series-badge-absolute {
          left: auto !important;
          right: 6px !important;
        }

        /* 모바일에서 대형 카드(.style-wide-quad) 및 일반 카드의 정보 볼륨 구조를 완벽하게 1:1 쌍둥이로 왼쪽 정렬 및 통일화 */
        #seriesCatalogGrid .series-card .series-body {
          text-align: left !important;
          align-items: flex-start !important;
          justify-content: flex-start !important;
          padding: 10px 10px 12px 10px !important;
        }
        
        #seriesCatalogGrid .series-card .series-card-title {
          font-size: 0.94rem !important; /* 모바일 카드 텍스트 크기 쌍둥이 통일 및 시원한 가시성 */
          margin-bottom: 6px !important;
          text-align: left !important;
          width: 100% !important;
          font-weight: 800 !important;
        }

        /* 🌐 wrapper 안 제목·아이콘 — 모바일에서도 같은 줄 유지 */
        #seriesCatalogGrid .title-assist-wrapper {
          display: inline-flex !important;
          flex-direction: row !important;
          flex-wrap: nowrap !important;
          align-items: center !important;
          width: fit-content !important;
          max-width: 100% !important;
        }

        #seriesCatalogGrid .title-assist-wrapper > .series-card-title {
          width: auto !important;
          margin-bottom: 0 !important;
          display: inline-block !important;
        }

        #seriesCatalogGrid .title-assist-wrapper .title-assist-icon {
          margin-top: 0 !important;
        }
        
        #seriesCatalogGrid .series-card .series-meta-row {
          display: flex !important;
          flex-direction: column !important;
          align-items: flex-start !important;
          justify-content: flex-start !important;
          gap: 4px !important;
          margin-bottom: 6px !important;
          text-align: left !important;
          width: 100% !important;
        }

        /* 주황색 상태 메타행 "S1 · EP01 · 완결": 모두 선명한 13px 큰 수치로 일괄 바인딩 */
        #seriesCatalogGrid .series-card .series-meta-row,
        #seriesCatalogGrid .series-card .series-meta-row > span:first-child {
          font-size: 13px !important;
          font-weight: 700 !important;
          color: var(--accent-orange) !important;
          text-align: left !important;
        }
        
        /* 3안용 통합 배합 평점 조회수 모바일 오버라이드 정렬 및 큰쪽 복원 */
        #seriesCatalogGrid .series-card .rating-views-combined {
          width: 100% !important;
          justify-content: flex-start !important; /* 가운데에서 왼쪽 정렬로 복원 */
          gap: 12px !important;
          display: flex !important;
          margin-top: 2px !important;
          font-size: 12.5px !important;
          align-items: center !important;
        }
        #seriesCatalogGrid .series-card .rating-views-combined .rating-container {
          display: flex !important;
          align-items: center !important;
          gap: 2px !important;
          justify-content: flex-start !important;
          color: rgba(255, 255, 255, 0.85) !important;
          font-weight: 700 !important;
          font-size: 12.5px !important;
        }
        #seriesCatalogGrid .series-card .rating-views-combined .rating-container .rating-star {
          color: var(--accent-gold) !important;
          font-weight: 900 !important;
          font-size: 13.5px !important;
        }
        #seriesCatalogGrid .series-card .rating-views-combined .views-count {
          font-size: 11px !important;
          font-weight: 800 !important;
          background: rgba(201, 134, 26, 0.12) !important;
          border: 1px solid rgba(201, 134, 26, 0.22) !important;
          padding: 2.5px 7.5px !important;
          border-radius: 99px !important;
          color: var(--accent-gold) !important;
          display: inline-block !important;
          margin: 0 !important;
          height: auto !important;
          line-height: 1.1 !important;
        }
        
        /* 일반 1,2안 카드용 평점 조회수 행 모바일 왼쪽 정렬 */
        #seriesCatalogGrid .series-card .series-rating-views {
          display: flex !important;
          justify-content: flex-start !important; /* 모바일 왼쪽 정렬 통일 */
          align-items: center !important;
          gap: 12px !important;
          width: 100% !important;
          margin-bottom: 6px !important;
          font-size: 12.5px !important;
        }
        #seriesCatalogGrid .series-card .series-rating-views .rating-container {
          display: flex !important;
          align-items: center !important;
          gap: 2px !important;
          color: rgba(255, 255, 255, 0.85) !important;
          font-weight: 700 !important;
          font-size: 12.5px !important;
        }
        #seriesCatalogGrid .series-card .series-rating-views .rating-container .rating-star {
          color: var(--accent-gold) !important;
          font-weight: 900 !important;
          font-size: 13.5px !important;
        }
        #seriesCatalogGrid .series-card .series-rating-views .views-count {
          font-size: 11px !important;
          font-weight: 800 !important;
          background: rgba(201, 134, 26, 0.12) !important;
          border: 1px solid rgba(201, 134, 26, 0.22) !important;
          padding: 2.5px 7.5px !important;
          border-radius: 99px !important;
          color: var(--accent-gold) !important;
          display: inline-block !important;
          margin: 0 !important;
          height: auto !important;
          line-height: 1.1 !important;
        }
        
        /* 태그 구성 모바일 왼쪽 정렬 및 큰쪽 품질 일체화 (한 줄 유지 및 말줄임 강제 조치) */
        #seriesCatalogGrid .series-card .tag-pill-container {
          display: flex !important;
          flex-wrap: nowrap !important; /* 줄바꿈 절대 거부 */
          justify-content: flex-start !important;
          align-items: center !important;
          gap: 4px !important;
          width: 100% !important;
          margin-bottom: 8px !important;
          overflow: hidden !important; /* 삐져나온 영역 완벽 마스킹 */
          height: 22px !important; /* 고정 높이 셋업으로 카드 간 구조적 높이 불일치 근본 차단 */
        }
        #seriesCatalogGrid .series-card .tag-pill {
          font-size: 11px !important;
          padding: 2.5px 7px !important;
          text-align: left !important;
          margin: 0 !important;
          color: rgba(255, 255, 255, 0.6) !important;
          background: rgba(255, 255, 255, 0.05) !important;
          border: 1px solid rgba(255, 255, 255, 0.08) !important;
          border-radius: 4px !important;
          font-weight: 600 !important;
          white-space: nowrap !important; /* 텍스트 줄바꿈 절대 비활성화 */
          overflow: hidden !important; /* 바깥 영역 마스킹 */
          text-overflow: ellipsis !important; /* 긴 텍스트는 말줄임 처리(...) */
          max-width: calc(50% - 2px) !important; /* 2개 태그 동시 탑재 시 데미지 방어를 위한 최대폭 제어 */
          flex-shrink: 1 !important; /* 레이아웃 오버 시 유연하게 자동 수축 유도 */
          display: inline-block !important;
        }
        
        /* 카드 하단 정보 가득 찬 대칭 하모니 */
        #seriesCatalogGrid .series-card .series-card-footer {
          padding-top: 10px !important;
          width: 100% !important;
          display: flex !important;
          justify-content: space-between !important;
          align-items: center !important;
          border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
          box-sizing: border-box !important;
        }
        #seriesCatalogGrid .series-card .series-card-footer .creator-name-update {
          font-size: 12px !important;
          text-align: left !important;
          color: rgba(255, 255, 255, 0.38) !important;
          font-weight: 600 !important;
        }
        #seriesCatalogGrid .series-card .series-card-footer .realtime-update-str {
          font-size: 11.2px !important;
          text-align: right !important;
          color: rgba(255, 255, 255, 0.38) !important;
          font-weight: 600 !important;
        }

        /* 연재시리즈 배너 자체의 하단 간격을 4px로 줄이고 패딩 최적화하여 필터 검색박스와 밀착 조화 */
        .portal-left-column > section.section-space:first-of-type {
          margin-bottom: 4px !important;
          padding: 16px 18px !important;
        }
        
        /* 인기 연재 시리즈: 모바일 2열 × 2행 그리드 (원본 시안) */
        .ongoing-series-grid,
        #ongoingSeriesGrid.ongoing-series-grid {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 12px !important;
          padding: 0 !important;
          overflow: visible !important;
        }

        /* 모바일 인기 연재 — 4장만 노출 (2열 × 2행) */
        .ongoing-series-grid .series-card:nth-child(n+5),
        #ongoingSeriesGrid.ongoing-series-grid > .series-card:nth-child(n+5) {
          display: none !important;
        }

        /* AI Films & Shorts: 모바일 2열 × 2행 그리드 (원본 시안) */
        .film-shorts-grid,
        #filmShortsGrid.film-shorts-grid {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 12px !important;
          padding: 0 !important;
          overflow: visible !important;
        }

        #aiFilmsShorts .film-shorts-grid > .series-card:nth-child(n+5),
        #filmShortsGrid.film-shorts-grid > .series-card:nth-child(n+5) {
          display: none !important;
        }

        /* 모바일 연재·단편 — 세로형 슬림 카드 (PC 가로형·캐러셀 규칙 리셋) */
        #ongoingSeriesGrid .series-card,
        #filmShortsGrid .series-card {
          display: flex !important;
          flex-direction: column !important;
          flex: none !important;
          width: auto !important;
          min-width: 0 !important;
          max-width: none !important;
          height: auto !important;
          padding: 0 !important;
        }

        #ongoingSeriesGrid .series-card .poster-wrap,
        #filmShortsGrid .series-card .poster-wrap {
          width: 100% !important;
          height: auto !important;
          aspect-ratio: 2 / 2.8 !important;
          flex-shrink: 0 !important;
          border-radius: 12px 12px 0 0 !important;
        }

        #ongoingSeriesGrid .series-card .series-body,
        #filmShortsGrid .series-card .series-body {
          padding: 10px 10px 12px 10px !important;
          height: auto !important;
          text-align: left !important;
        }

        /* AI Films & Shorts 모바일에서 기존 텍스트 상영시간 숨김 및 모바일 전용 태그 노출 */
        #aiFilmsShorts .series-progress {
          display: none !important;
        }
        
        .mobile-runtime-tag {
          display: block !important;
        }

        /* 모바일 더보기 버튼 컨테이너 */
        .more-series-btn-container, .more-shorts-btn-container, .more-completed-btn-container {
          display: flex !important;
          justify-content: center;
          align-items: center;
          width: 100%;
          padding: 0 16px;
        }

        /* 모바일 랭킹 및 랭킹 세부 카드 여백 최소화 (화면폭 100% 활용) */
        #mobilePopularAndAwards {
          padding: 0 !important;
        }
        .mobile-ranking-section, .mobile-awards-section {
          padding: 16px 12px !important;
          width: 100% !important;
          max-width: none !important;
          box-sizing: border-box !important;
          background: rgba(255, 255, 255, 0.02) !important;
          border-radius: 12px !important;
        }
        .sidebar-ranking-item, .award-featured-card, .award-item {
          width: 100% !important;
          max-width: none !important;
          box-sizing: border-box !important;
        }
        
        /* 완결 명작: 3D Coverflow Circular Carousel 적용
           #completedGrid는 series-grid 클래스도 함께 쓰므로 ID+클래스로 overflow 우선순위 확보 */
        #completedGrid.completed-grid,
        .series-grid.completed-grid {
          display: flex !important;
          flex-wrap: nowrap !important;
          grid-template-columns: none !important;
          overflow-x: auto !important;
          overflow-y: hidden !important;
          scroll-snap-type: x mandatory !important;
          gap: 12px !important;
          padding: 16px calc(50% - 80px) 32px calc(50% - 80px) !important; /* 양 끝 카드가 정중앙에 올 수 있는 사이드 윈도우 패딩 */
          margin-left: -16px !important;
          margin-right: -16px !important;
          scroll-behavior: smooth !important;
          scrollbar-width: none !important; /* 파이어폭스 스크롤 숨김 */
          perspective: 1000px !important; /* 입체 깊이감 설정 */
          transform-style: preserve-3d !important;
          -webkit-overflow-scrolling: touch !important;
          /* 터치 가로 스크롤 허용 — JS는 scroll 이벤트만으로 3D 효과 갱신 */
          touch-action: pan-x pan-y !important;
        }
        #completedGrid.completed-grid::-webkit-scrollbar,
        .series-grid.completed-grid::-webkit-scrollbar {
          display: none !important; /* 크롬 스크롤 숨김 */
        }
        .completed-grid .series-card {
          position: relative !important;
          flex: 0 0 160px !important; /* 3D 배치에 완벽하게 어울리는 모던한 카드 폭 */
          width: 160px !important;
          min-width: 160px !important;
          max-width: 160px !important;
          scroll-snap-align: center !important;
          margin: 0 !important;
          box-sizing: border-box !important;
          transform-style: preserve-3d !important;
          background: #141521 !important;
          border: 1px solid rgba(255, 255, 255, 0.08) !important;
          border-radius: 12px !important;
          overflow: hidden !important;
          box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5) !important;
          
          /* JS가 계산해줄 기본 CSS 변수값 폴백 */
          --ratio: 0;
          --abs-ratio: 0;
          
          /* 극적인 3D Cylinder / Circular Coverflow 연산 */
          /* 1. abs-ratio가 클수록(중앙에서 멀어질수록) 뒤로 밀림 (translateZ)
             2. ratio의 부호에 따라 좌우로 좁혀지게 translateX 당기고, rotateY로 중앙을 응시하게 휨
             3. scale 축소 */
          transform: 
            translateX(calc(var(--ratio) * -38px)) 
            translateZ(calc(var(--abs-ratio) * -120px)) 
            rotateY(calc(var(--ratio) * -22deg)) 
            scale(calc(1 - (var(--abs-ratio) * 0.12))) !important;
            
          /* opacity는 중앙 1.0, 1스텝 밖은 0.72, 2스텝은 0.44 등 점진적으로 어두워짐 */
          opacity: calc(1.05 - (var(--abs-ratio) * 0.32)) !important;
          transition: transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.15s ease-out, box-shadow 0.2s ease !important;
        }
        
        /* 중앙 집중 상태 카드 하이라이트: 은은한 골드/앰버 글로우 */
        .completed-grid .series-card::after {
          content: '';
          position: absolute;
          top: 0; left: 0; right: 0; bottom: 0;
          border-radius: inherit;
          pointer-events: none;
          box-shadow: inset 0 0 16px rgba(242, 193, 78, calc(0.35 * (1 - var(--abs-ratio)))) !important;
          border: 1.5px solid rgba(242, 193, 78, calc(0.6 * (1 - var(--abs-ratio)))) !important;
          opacity: calc(1 - var(--abs-ratio));
          transition: opacity 0.15s ease !important;
          z-index: 6;
        }

        /* 닷 인디케이터 스타일링 (모바일 전용 완결작 3D 카운터) */
        .completed-dots {
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
          gap: 6px !important;
          margin-top: 24px !important;
          margin-bottom: 12px !important;
          width: 100% !important;
        }
        
        .completed-dot {
          width: 7px !important;
          height: 7px !important;
          border-radius: 50% !important;
          background: rgba(255, 255, 255, 0.25) !important;
          cursor: pointer !important;
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .completed-dot.active {
          background: var(--accent-gold) !important;
          width: 18px !important;
          border-radius: 4px !important;
        }

        /* 완결 섹션 래퍼 — body overflow-x:hidden이 자식 가로 스크롤을 막지 않도록 */
        #seriesCompleted {
          overflow: visible !important;
        }

        /* 모바일 통합 랭킹 & 어워즈 탭 스타일 */
        .mobile-tabs-container {
          display: flex;
          flex-direction: column;
          background: rgba(13, 14, 24, 0.5);
          border: 1px solid rgba(255, 255, 255, 0.05);
          border-radius: 16px;
          padding: 16px;
          margin-bottom: 12px;
        }
        .mobile-tabs-nav {
          display: flex !important;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 10px;
          padding: 4px;
          gap: 4px;
          margin-bottom: 8px;
        }
        .mobile-tab-btn {
          flex: 1 !important;
          padding: 10px 4px !important;
          font-size: 0.82rem !important;
          font-weight: 700 !important;
          border: 1px solid transparent !important;
          background: transparent !important;
          color: rgba(255, 255, 255, 0.45) !important;
          text-align: center !important;
          border-radius: 8px !important;
          cursor: pointer !important;
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        .mobile-tab-btn.active {
          background: rgba(242, 193, 78, 0.12) !important;
          color: var(--accent-gold) !important;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
          border-color: rgba(242, 193, 78, 0.2) !important;
        }
        
        /* 탭 콘텐츠 전환 애니메이션 */
        .mobile-tab-content-pane {
          display: none !important;
          animation: mobileFadeIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        .mobile-tab-content-pane.active {
          display: flex !important;
          flex-direction: column !important;
          gap: 16px !important;
        }
        @keyframes mobileFadeIn {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        /* 카드 텍스트 타이틀 가두기 */
        .ep-card-title, .series-card-title, .poster-title {
          display: -webkit-box !important;
          -webkit-line-clamp: 2 !important;
          -webkit-box-orient: vertical !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          font-size: 0.88rem !important;
          line-height: 1.25 !important;
        }
        
        /* 큐레이터 초이스 모바일 가로 캐러셀 및 컨트롤 */
        .curator-carousel-wrapper {
          position: relative !important;
          width: 100% !important;
          margin: 0 auto !important;
        }
        
        .curator-grid {
          display: flex !important;
          flex-direction: row !important;
          overflow-x: auto !important;
          scroll-snap-type: x mandatory !important;
          gap: 16px !important;
          padding: 8px 16px 16px 16px !important;
          margin-left: -16px !important;
          margin-right: -16px !important;
          scroll-behavior: smooth !important;
          scrollbar-width: none !important; /* 파이어폭스 스크롤 숨김 */
        }
        
        .curator-grid::-webkit-scrollbar {
          display: none !important; /* 크롬 스크롤 숨김 */
        }
        
        .curator-card {
          flex: 0 0 85% !important; /* 글씨가 많고 크기 유지를 위해 85%를 지정하고 스냅 적용 */
          scroll-snap-align: center !important;
          scroll-margin: 0 16px !important;
          min-width: 280px !important;
          max-width: none !important;
          margin: 0 !important;
          box-sizing: border-box !important;
          width: auto !important;
        }
        
        .curator-quote {
          font-size: 0.85rem !important;
          display: -webkit-box !important;
          -webkit-line-clamp: 4 !important; /* 최대 3-4줄 제한 */
          -webkit-box-orient: vertical !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          line-height: 1.45 !important;
        }

        /* 닷 인디케이터 (모바일 전용) */
        .curator-dots {
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
          gap: 6px !important;
          margin-top: 16px !important;
          margin-bottom: 8px !important;
          width: 100% !important;
        }
        
        .curator-dot {
          width: 7px !important;
          height: 7px !important;
          border-radius: 50% !important;
          background: rgba(255, 255, 255, 0.25) !important;
          cursor: pointer !important;
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .curator-dot.active {
          background: var(--accent-gold) !important;
          width: 18px !important;
          border-radius: 4px !important;
        }

        /* 큐레이터 초이스와 크리에이터 하이라이트 간의 모바일 여백 수축 최적화 */
        section#curatorPick {
          margin-bottom: 28px !important;
          padding-bottom: 8px !important;
        }
        section#creatorSpotlight {
          padding-top: 24px !important;
        }

        /* [6. 상세뷰 모달 모바일 반응형 완전 대응] */
        .modal-overlay {
          padding: 0 !important;
          align-items: flex-start !important;
          justify-content: flex-start !important;
          transform: none !important;
        }
        .modal-overlay.active .modal-box {
          transform: none !important;
        }
        .modal-box {
          display: flex !important;
          flex-direction: column !important;
          width: 100vw !important;
          max-width: none !important;
          height: 100vh !important;
          max-height: 100vh !important;
          border-radius: 0 !important;
          border: none !important;
          margin: 0 !important;
          background-color: #05060a !important;
          overflow-y: auto !important;
          overflow-x: hidden !important;
          -webkit-overflow-scrolling: touch;
          transform: none !important; /* transform 해제해야 fixed 자식이 뷰포트 기준으로 정상 고정됨 */
        }
        .modal-close-btn {
          position: absolute !important; /* fixed를 absolute로 전환하여 스크롤 시 본문 위를 떠다니지 않고 가리지 않도록 전향적 개선 */
          top: 12px !important;
          right: 12px !important; /* PC와 동일 — 오른쪽 상단 X 닫기 */
          left: auto !important;
          width: 36px !important; /* 모바일 전용 콤팩트 크기 (34~38px 중 최적의 36px) */
          height: 36px !important;
          border-radius: 8px !important; /* 단순 원형 대신 세련된 둥근 모서리 사각형(rounded square) 채안 */
          background-color: rgba(0, 0, 0, 0.38) !important; /* 지정 저조도 투명 배경 */
          border: 1px solid rgba(255, 255, 255, 0.12) !important; /* 세련되고 투명한 테두리 */
          color: #ffffff !important;
          z-index: 10005 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
          backdrop-filter: blur(6px) !important; /* 부드러운 글래스모피즘 블러 */
          -webkit-backdrop-filter: blur(6px) !important;
          cursor: pointer !important;
          font-size: 1.1rem !important;
          transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
        }
        .modal-close-btn:hover {
          transform: none !important; /* 미관을 해치는 회전 회피 */
          background-color: rgba(212, 163, 89, 0.25) !important;
          border-color: var(--accent-gold) !important;
          color: var(--accent-gold) !important;
          box-shadow: 0 2px 10px rgba(212, 163, 89, 0.35) !important;
        }
        .modal-close-btn:active {
          transform: scale(0.92) !important;
          background-color: rgba(212, 163, 89, 0.35) !important;
        }
        
        /* 📱 모바일 전용 얇은 상단 Sticky Mini Header */
        .modal-mini-header {
          display: flex !important;
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          height: 46px !important; /* 콘텐츠 가림을 최소화하는 피트 높이 (44~48px 중 46px 적용) */
          background: rgba(5, 6, 10, 0.86) !important; /* 고급 감도의 투명감 보정 */
          backdrop-filter: blur(10px) !important; /* 세련된 미세 흐림 */
          -webkit-backdrop-filter: blur(10px) !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
          z-index: 10002 !important; /* 하단 네비게이션보다는 작고 모달 배경보다는 높은 지위 수호 */
          align-items: center !important;
          padding: 0 14px !important;
          box-sizing: border-box !important;
          transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
          opacity: 0 !important;
          pointer-events: none !important;
          transform: translateY(-100%) !important; /* 완벽한 슬라이드인 애니메이션 뼈대 */
        }
        .modal-mini-header.active {
          opacity: 1 !important;
          pointer-events: auto !important;
          transform: translateY(0) !important;
        }
        .mini-back-btn {
          background: none !important;
          border: none !important;
          color: #ffffff !important;
          font-size: 1.35rem !important;
          padding: 0 !important;
          margin-right: 12px !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          width: 32px !important;
          height: 32px !important;
          transition: transform 0.25s ease !important;
        }
        .mini-back-btn:active {
          transform: scale(0.9) !important;
        }
        .mini-title-wrapper {
          flex: 1 !important;
          min-width: 0 !important;
        }
        .mini-ep-title {
          font-size: 0.92rem !important;
          font-weight: 600 !important;
          color: #ffffff !important;
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          display: block !important;
          letter-spacing: -0.02em !important;
        }
        
        /* 🎞️ 영상 전용 컨트롤 은닉 시 미니 헤더도 동반 숨김 처리 */
        .controls-hidden .modal-mini-header {
          opacity: 0 !important;
          pointer-events: none !important;
          transform: translateY(-100%) !important;
        }
        .close-pc-icon {
          display: block !important;
          font-size: 1.05rem !important;
          line-height: 1 !important;
        }
        .modal-player-side {
          width: 100% !important;
          position: relative !important;
          background: #000 !important;
          padding: 0 !important;
          margin-top: 0 !important; /* 밀림 현상 방지를 위해 0 으로 초기화 */
          margin-bottom: 4px !important; /* 상하 여백을 영상 위주로 축소 */
          flex-shrink: 0 !important;
        }
        .player-aspect-ratio-box {
          width: calc(100% - 12px) !important; /* 양옆 검은 여백 축소 */
          margin: 6px auto !important; /* 상하 여백 6px 적용 */
          padding-top: 56.25% !important;
          border-radius: 10px !important; /* 모바일 밀착에 맞는 영리한 라운딩 조정 */
          border: 1px solid rgba(242, 193, 78, 0.15) !important;
          box-shadow: 0 6px 20px rgba(0,0,0,0.6) !important;
        }
        .modal-detail-side {
          width: 100% !important;
          max-width: none !important;
          height: auto !important;
          padding: 0 !important;
          margin: 0 !important;
          display: flex !important;
          flex-direction: column !important;
          border-left: none !important;
          overflow: visible !important;
        }
        .modal-scrollable-area {
          padding: 12px 16px !important;
          height: auto !important;
          overflow-y: visible !important;
          width: 100% !important;
          box-sizing: border-box !important;
          padding-bottom: 120px !important; /* 하단 고정바에 글이 가려지지 않게 처리 */
          margin: 0 !important;
        }
        
        .md-ep-title {
          font-size: 1.55rem !important;
          line-height: 1.25 !important;
          word-break: keep-all !important;
          margin-bottom: 8px !important;
        }

        /* 원제 wrapper 가 있을 때도 제목↔배지 간격을 .md-ep-title 과 같게 */
        .md-header .title-assist-wrapper:has(.md-ep-title),
        .md-header .title-assist-wrapper:has(#modalEpisodeTitle) {
          margin-bottom: 8px !important;
        }
        
        /* 좋아요/북마크/평점/알림 1행 4칸 그리드 (연재형 4버튼) */
        .modal-user-actions-row {
          display: grid !important;
          grid-template-columns: repeat(4, 1fr) !important;
          gap: 6px !important;
          width: 100% !important;
          margin: 14px 0 !important;
        }
        /* 단편/쇼츠형: 알림 없음 → PC와 동일하게 3버튼 1행 */
        .modal-user-actions-row.is-standalone-actions {
          grid-template-columns: repeat(3, 1fr) !important;
          gap: 6px !important;
        }
        /* 단편/쇼츠형: 알림 버튼 숨김 — 모바일 flex 강제 규칙보다 우선 */
        .modal-user-actions-row.is-standalone-actions #modalAlertPill {
          display: none !important;
          pointer-events: none !important;
        }
        /* 단편/쇼츠형: 1행 3칸에 맞게 버튼 크기 축소 (PC 비율에 가깝게) */
        .modal-user-actions-row.is-standalone-actions .modal-action-pill,
        .modal-user-actions-row.is-standalone-actions .modal-rating-wrapper,
        .modal-user-actions-row.is-standalone-actions .modal-rating-wrapper .modal-action-pill {
          width: 100% !important;
          max-width: none !important;
          min-width: 0 !important;
          flex: none !important;
          height: 40px !important;
          box-sizing: border-box !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          border-radius: 8px !important;
          font-size: 0.76rem !important;
          padding: 0 4px !important;
          gap: 4px !important;
          margin: 0 !important;
        }
        .modal-user-actions-row.is-standalone-actions .modal-action-pill .pill-icon {
          width: 11px !important;
          height: 11px !important;
        }
        /* 단편/쇼츠형: 평점 드롭다운 우측 정렬 (모바일 1행 3칸에서 잘림 방지) */
        .modal-user-actions-row.is-standalone-actions .modal-rating-dropdown {
          left: auto !important;
          right: 0 !important;
          transform: none !important;
        }
        /* 자막 칩 라인 공유 아이콘 — 모바일 크기 소폭 축소 */
        .md-sub-share-btn {
          width: 30px !important;
          height: 30px !important;
          margin-top: 0 !important;
          flex-shrink: 0 !important;
        }
        .md-sub-share-btn svg {
          width: 12px !important;
          height: 12px !important;
        }
        /* 연재형 4버튼: 1행 배치에 맞게 크기·간격 축소 */
        .modal-user-actions-row:not(.is-standalone-actions) .modal-action-pill,
        .modal-user-actions-row:not(.is-standalone-actions) .modal-rating-wrapper,
        .modal-user-actions-row:not(.is-standalone-actions) .modal-rating-wrapper .modal-action-pill {
          width: 100% !important;
          max-width: none !important;
          min-width: 0 !important;
          flex: none !important;
          height: 38px !important;
          box-sizing: border-box !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          border-radius: 8px !important;
          font-size: 0.68rem !important;
          padding: 0 2px !important;
          gap: 3px !important;
          margin: 0 !important;
        }
        .modal-user-actions-row:not(.is-standalone-actions) .modal-action-pill .pill-icon {
          width: 10px !important;
          height: 10px !important;
          flex-shrink: 0 !important;
        }
        /* 연재형 4버튼: 평점 드롭다운 중앙 정렬 (3번째 칸 기준) */
        .modal-user-actions-row:not(.is-standalone-actions) .modal-rating-dropdown {
          left: 50% !important;
          right: auto !important;
          transform: translateX(-50%) !important;
        }
        .modal-action-pill {
          padding: 0 4px !important;
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
        }
        
        /* 이전화 / 다음 에피소드 고정 하단 보완 */
        .md-footer-actions {
          position: fixed !important;
          bottom: 0 !important;
          left: 0 !important;
          right: 0 !important;
          width: 100% !important;
          max-width: 100vw !important;
          background: rgba(5, 6, 10, 0.94) !important;
          backdrop-filter: blur(12px) !important;
          -webkit-backdrop-filter: blur(12px) !important;
          padding: 12px 16px !important;
          padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
          border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
          box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.8) !important;
          z-index: 10001 !important;
          box-sizing: border-box !important;
          display: block !important;
          transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        /* 컨트롤 자동 숨김 명세 스타일 (유튜브/OTT 방식) */
        .controls-hidden .modal-close-btn {
          opacity: 0 !important;
          pointer-events: none !important;
          transform: translateY(-12px) !important;
        }
        .controls-hidden .md-footer-actions {
          opacity: 0 !important;
          pointer-events: none !important;
          transform: translateY(12px) !important;
        }
        .next-prev-controller {
          display: grid !important;
          grid-template-columns: 1fr 1fr !important;
          gap: 12px !important;
          width: 100% !important;
          margin-bottom: 0 !important;
        }
        .btn-nav-ep {
          height: 46px !important;
          font-size: 0.85rem !important;
          border-radius: 8px !important;
          background: rgba(255, 255, 255, 0.03) !important;
          border: 1px solid rgba(255, 255, 255, 0.08) !important;
          color: #bbb !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 6px !important;
          cursor: pointer !important;
          font-weight: 700 !important;
          transition: all 0.2s ease !important;
        }
        .btn-nav-ep.btn-nav-next {
          background: linear-gradient(135deg, var(--accent-orange) 0%, #d97706 100%) !important;
          color: #ffffff !important;
          border: none !important;
          box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
        }
        .btn-nav-ep.btn-nav-next:hover:not(:disabled) {
          background: linear-gradient(135deg, #f59e0b 0%, var(--accent-orange) 100%) !important;
        }
        .btn-nav-ep:disabled {
          opacity: 0.35 !important;
          cursor: not-allowed !important;
          background: rgba(255, 255, 255, 0.01) !important;
          color: #666 !important;
          border-color: rgba(255, 255, 255, 0.04) !important;
          box-shadow: none !important;
        }
        
        .source-info-bar {
          justify-content: center !important;
          flex-wrap: wrap !important;
        }

        /* 크리에이터 하이라이트 모바일 가로 캐러셀 및 컨트롤 */
        .creator-carousel-wrapper {
          position: relative !important;
          width: 100% !important;
          margin: 0 auto !important;
        }
        
        .creator-grid {
          display: flex !important;
          flex-direction: row !important;
          overflow-x: auto !important;
          scroll-snap-type: x mandatory !important;
          gap: 16px !important;
          padding: 8px 16px 16px 16px !important;
          margin-left: -16px !important;
          margin-right: -16px !important;
          scroll-behavior: smooth !important;
          scrollbar-width: none !important; /* 파이어폭스 스크롤 숨김 */
        }
        
        .creator-grid::-webkit-scrollbar {
          display: none !important; /* 크롬 스크롤 숨김 */
        }
        
        .creator-card {
          flex: 0 0 85% !important; /* 기존 크기와 유사하게 85%지정하여 다음 카드 힌트 노출 */
          scroll-snap-align: center !important;
          scroll-margin: 0 16px !important;
          min-width: 270px !important;
          max-width: none !important;
          margin: 0 !important;
          box-sizing: border-box !important;
          width: auto !important;
        }

        /* 닷 인디케이터 (모바일 전용) */
        .creator-dots {
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
          gap: 6px !important;
          margin-top: 16px !important;
          margin-bottom: 8px !important;
          width: 100% !important;
        }
        
        .creator-dot {
          width: 7px !important;
          height: 7px !important;
          border-radius: 50% !important;
          background: rgba(255, 255, 255, 0.25) !important;
          cursor: pointer !important;
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .creator-dot.active {
          background: var(--accent-gold) !important;
          width: 18px !important;
          border-radius: 4px !important;
        }

        /* [7. 모바일 푸터] */
        section#browseGenre {
          display: none !important; /* 모바일 본문 중간 "장르별 정밀 탐색" 섹션 비노출 처리 */
        }
        .mobile-filter-trigger {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          background: rgba(255, 255, 255, 0.05) !important;
          border: 1px solid rgba(255, 255, 255, 0.15) !important;
          border-radius: 6px !important;
          width: 28px !important;
          height: 28px !important;
          margin-left: 8px !important;
          color: var(--accent-gold) !important;
          cursor: pointer !important;
          transition: all 0.2s ease !important;
          padding: 0 !important;
          flex-shrink: 0 !important;
        }
        .mobile-filter-trigger:hover, .mobile-filter-trigger:active {
          background: rgba(255, 255, 255, 0.1) !important;
          border-color: rgba(255, 255, 255, 0.25) !important;
        }

        /* 모바일 필터 바텀시트 백드롭 */
        .mobile-filter-backdrop {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          width: 100vw !important;
          height: 100vh !important;
          background-color: rgba(0, 0, 0, 0.75) !important;
          z-index: 3500 !important;
          display: none;
          align-items: flex-end !important; /* 바텀에서 올라오는 레이아웃 */
          opacity: 0;
          transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        .mobile-filter-backdrop.show {
          display: flex !important;
          opacity: 1 !important;
        }
        /* 바텀시트 카드 */
        .mobile-filter-sheet {
          width: 100% !important;
          max-height: 80vh !important;
          background-color: #0b0c10 !important;
          border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
          border-top-left-radius: 20px !important;
          border-top-right-radius: 20px !important;
          padding: 12px 20px 24px 20px !important;
          box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.95) !important;
          transform: translateY(100%) !important;
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
          display: flex !important;
          flex-direction: column !important;
          box-sizing: border-box !important;
        }
        .mobile-filter-backdrop.show .mobile-filter-sheet {
          transform: translateY(0) !important;
        }
        /* 장식 드래그 핸들 */
        .filter-sheet-handle {
          width: 44px !important;
          height: 5px !important;
          background-color: rgba(255, 255, 255, 0.15) !important;
          border-radius: 3px !important;
          margin: 0 auto 12px auto !important;
          cursor: pointer !important;
        }
        .filter-sheet-header {
          display: flex !important;
          justify-content: space-between !important;
          align-items: center !important;
          margin-bottom: 12px !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
          padding-bottom: 10px !important;
        }
        .filter-sheet-title {
          font-size: 1.05rem !important;
          font-weight: 700 !important;
          color: #fff !important;
          letter-spacing: -0.3px !important;
        }
        .filter-sheet-close {
          background: none !important;
          border: none !important;
          color: rgba(255, 255, 255, 0.5) !important;
          font-size: 1.15rem !important;
          cursor: pointer !important;
          padding: 4px !important;
        }
        .filter-sheet-content {
          overflow-y: auto !important;
          flex: 1 !important;
          padding-right: 4px !important;
        }
        .filter-sheet-content::-webkit-scrollbar {
          width: 4px !important;
        }
        .filter-sheet-content::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.1) !important;
          border-radius: 2px !important;
        }
        .filter-group-title {
          font-size: 0.8rem !important;
          font-weight: 700 !important;
          color: rgba(255, 255, 255, 0.4) !important;
          margin-top: 14px !important;
          margin-bottom: 10px !important;
          letter-spacing: 0.3px !important;
        }
        .filter-chips-grid {
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 8px !important;
          margin-bottom: 16px !important;
        }
        .filter-pill {
          background-color: rgba(255, 255, 255, 0.04) !important;
          border: 1px solid rgba(255, 255, 255, 0.1) !important;
          color: rgba(255, 255, 255, 0.75) !important;
          padding: 6px 12px !important;
          border-radius: 16px !important;
          font-size: 0.75rem !important;
          cursor: pointer !important;
          transition: all 0.25s ease !important;
          font-family: inherit !important;
        }
        .filter-pill:active {
          background-color: rgba(255, 255, 255, 0.1) !important;
        }
        .filter-pill.active {
          background-color: rgba(212, 163, 89, 0.15) !important;
          border-color: var(--accent-gold) !important;
          color: var(--accent-gold) !important;
          font-weight: 700 !important;
        }
        .filter-sheet-actions {
          display: grid !important;
          grid-template-columns: 1fr 2fr !important;
          gap: 10px !important;
          margin-top: 16px !important;
          padding-top: 12px !important;
          border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        }
        .btn-filter-reset {
          background-color: rgba(255, 255, 255, 0.03) !important;
          border: 1px solid rgba(255, 255, 255, 0.08) !important;
          color: rgba(255, 255, 255, 0.55) !important;
          border-radius: 8px !important;
          padding: 11px !important;
          font-size: 0.85rem !important;
          font-weight: 600 !important;
          cursor: pointer !important;
          text-align: center !important;
          transition: all 0.2s ease !important;
        }
        .btn-filter-reset:active {
          background-color: rgba(255, 255, 255, 0.07) !important;
        }
        .btn-filter-apply {
          background-color: var(--accent-gold) !important;
          border: none !important;
          color: #050508 !important;
          border-radius: 8px !important;
          padding: 11px !important;
          font-size: 0.85rem !important;
          font-weight: 700 !important;
          cursor: pointer !important;
          text-align: center !important;
          transition: all 0.2s ease !important;
        }
        .btn-filter-apply:active {
          opacity: 0.85 !important;
        }

        .footer-grid {
          grid-template-columns: repeat(3, 1fr) !important; /* 3열 그리드로 오밀조밀하게 가로 병렬 배치 */
          gap: 16px 12px !important;
          padding: 0 16px !important;
        }
        .footer-brand {
          grid-column: 1 / -1 !important; /* 브랜드 로고 & 소개글은 단독 첫 행 사용 */
          border-bottom: 1px solid rgba(255,255,255,0.05) !important;
          padding-bottom: 16px !important;
          margin-bottom: 4px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 12px !important;
        }
        .footer-brand .logo {
          order: -1 !important; /* 헤더의 .logo { order: 1 } 강제 미해결로 우회 조치 */
          margin: 0 !important;
          padding: 0 !important;
          justify-content: flex-start !important;
        }
        .footer-brand .footer-desc {
          order: 0 !important;
          margin: 0 !important;
          font-size: 0.76rem !important;
        }
        .footer-links-title {
          font-size: 0.8rem !important; /* 모바일에 알맞은 가독성 위주의 아담한 카테고리 타이틀 */
          margin-bottom: 10px !important;
          font-weight: 800 !important;
          color: #ffffff !important;
        }
        .footer-links-list {
          gap: 6px !important; /* 간격을 촘촘하게 묶어 수직 높이 극소화 */
        }
        .footer-links-list a {
          font-size: 0.74rem !important; /* 텍스트 스케일 다운으로 모바일 화면 밀도 보전 */
          line-height: 1.4 !important;
          word-break: keep-all !important;
          color: rgba(255, 255, 255, 0.45) !important;
        }
        .footer-links-list a:hover, .footer-links-list a:active {
          color: var(--accent-gold) !important;
        }

        /* ────────────────────────────────────────────────────────
           [모바일 전용 추가 컴포넌트 스타일셋]
           ──────────────────────────────────────────────────────── */

        /* 💻 모바일 하단 고정 메뉴바 */
        .mobile-bottom-nav {
          display: flex !important;
          position: fixed !important;
          bottom: 0 !important;
          left: 0 !important;
          width: 100vw !important;
          height: 64px !important;
          background: #0d0e18 !important;
          border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
          z-index: 999 !important;
          box-sizing: border-box !important;
          align-items: center !important;
          justify-content: space-around !important;
          padding: 0 10px !important;
          padding-bottom: env(safe-area-inset-bottom, 0) !important;
        }
        
        .bottom-nav-item {
          background: none !important;
          border: none !important;
          color: #8a8d9a !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          font-size: 0.65rem !important;
          gap: 2px !important;
          cursor: pointer !important;
          flex: 1 !important;
          height: 100% !important;
          transition: color 0.2s !important;
          padding: 4px 0 !important;
        }
        .bottom-nav-item.active {
          color: var(--accent-gold) !important;
        }
        .bottom-nav-item svg {
          transition: transform 0.2s !important;
        }
        .bottom-nav-item:active svg {
          transform: scale(0.9) !important;
        }
        
        /* 힉스필드 스타일 가운데 강조 버튼 랩 */
        .bottom-nav-center-wrap {
          position: relative !important;
          width: 68px !important;
          height: 100% !important;
          display: flex !important;
          justify-content: center !important;
          align-items: flex-end !important;
          flex: 0 0 auto !important;
        }
        .bottom-nav-center-btn {
          position: absolute !important;
          bottom: 10px !important; /* 하단바에서 14px 돌출 */
          width: 58px !important;
          height: 58px !important;
          border-radius: 50% !important;
          background: linear-gradient(135deg, #e3a953, #b87b28) !important;
          border: 3px solid #0d0e18 !important;
          box-shadow: 0 4px 15px rgba(227, 169, 83, 0.3) !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          cursor: pointer !important;
          color: #ffffff !important;
          gap: 1px !important;
          transition: transform 0.2s, box-shadow 0.2s !important;
          z-index: 1000 !important;
        }
        .bottom-nav-center-btn:active {
          transform: scale(0.95) translateY(-2px) !important;
          box-shadow: 0 2px 8px rgba(227, 169, 83, 0.4) !important;
        }
        .bottom-nav-center-btn svg {
          color: #fff !important;
          margin-top: -2px !important;
        }
        .center-label {
          font-size: 0.58rem !important;
          font-weight: 700;
          color: #fff !important;
        }

      }

      /*
       * 햄버거 드로어·계정 안내 — 휴대폰+태블릿(≤1024).
       * 버튼은 위 1024 규칙으로 이미 보인다. 하단 고정 내비는 768만 유지.
       */
      @media (max-width: 1024px) {
        .mobile-sidebar-backdrop {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          width: 100vw !important;
          height: 100vh !important;
          background: rgba(0, 0, 0, 0.7) !important;
          backdrop-filter: blur(4px) !important;
          z-index: 2005 !important;
          opacity: 0 !important;
          visibility: hidden !important;
          transition: opacity 0.3s ease, visibility 0.3s ease !important;
        }
        .mobile-sidebar-backdrop.active {
          opacity: 1 !important;
          visibility: visible !important;
        }
        .mobile-sidebar {
          position: fixed !important;
          top: 0 !important;
          right: 0 !important;
          width: 280px !important;
          max-width: 85% !important;
          height: 100vh !important;
          background: #0f101c !important;
          border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
          z-index: 2010 !important;
          transform: translateX(100%) !important;
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
          display: flex !important;
          flex-direction: column !important;
          box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5) !important;
        }
        .mobile-sidebar.opened {
          transform: translateX(0) !important;
        }
        .mobile-sidebar-header {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          padding: 16px !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        }
        .mobile-sidebar-header .logo {
          font-size: 1rem !important;
          font-weight: 700 !important;
          display: flex !important;
          align-items: center !important;
          gap: 6px !important;
          color: #fff !important;
        }
        .btn-close-sidebar {
          background: none !important;
          border: none !important;
          color: rgba(255, 255, 255, 0.7) !important;
          cursor: pointer !important;
          padding: 4px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
        .mobile-sidebar-body {
          flex: 1 !important;
          overflow-y: auto !important;
          padding: 16px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
        }
        
        /* 👤 사이드바 프로필 영역 */
        .sidebar-profile-box {
          background: rgba(255, 255, 255, 0.02) !important;
          border: 1px solid rgba(255, 255, 255, 0.06) !important;
          border-radius: 10px !important;
          padding: 14px !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 12px !important;
        }
        .sidebar-user-info {
          display: flex !important;
          align-items: center !important;
          gap: 10px !important;
        }
        .sidebar-avatar {
          width: 38px !important;
          height: 38px !important;
          border-radius: 50% !important;
          border: 1px solid var(--accent-gold) !important;
          object-fit: cover !important;
        }
        .sidebar-user-meta {
          display: flex !important;
          flex-direction: column !important;
        }
        .sidebar-user-name {
          font-size: 0.85rem !important;
          font-weight: 600 !important;
          color: #fff !important;
        }
        .sidebar-user-email {
          font-size: 0.7rem !important;
          color: var(--text-muted) !important;
        }
        .btn-sidebar-auth {
          width: 100% !important;
          height: 36px !important;
          background: var(--gradient-cinema) !important;
          border: none !important;
          border-radius: 6px !important;
          color: #fff !important;
          font-size: 0.8rem !important;
          font-weight: 600 !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 6px !important;
        }
        
        /* 🔗 사이드바 메뉴 그룹/해시링크 */
        .sidebar-menu-group {
          display: flex !important;
          flex-direction: column !important;
          gap: 4px !important;
        }
        .sidebar-menu-title {
          font-size: 0.7rem !important;
          color: var(--accent-gold) !important;
          text-transform: uppercase !important;
          letter-spacing: 0.05em !important;
          margin-bottom: 4px !important;
          font-weight: 700 !important;
        }
        .sidebar-menu-item {
          display: flex !important;
          align-items: center !important;
          gap: 10px !important;
          padding: 8px 10px !important;
          border-radius: 6px !important;
          color: rgba(255, 255, 255, 0.8) !important;
          font-size: 0.8rem !important;
          text-decoration: none !important;
          transition: background 0.2s, color 0.2s !important;
          cursor: pointer !important;
          background: none !important;
          border: none !important;
          width: 100% !important;
          text-align: left !important;
        }
        .sidebar-menu-item:hover, .sidebar-menu-item:active {
          background: rgba(255, 255, 255, 0.04) !important;
          color: #fff !important;
        }
        .sidebar-menu-item svg {
          opacity: 0.7 !important;
          color: var(--accent-gold) !important;
        }

        /* 🔒 로그인 유도 가이드 팝업 */
        .auth-guide-modal-backdrop {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          width: 100vw !important;
          height: 100vh !important;
          background: rgba(0, 0, 0, 0.7) !important;
          backdrop-filter: blur(6px) !important;
          z-index: 3000 !important;
          opacity: 0 !important;
          visibility: hidden !important;
          transition: opacity 0.3s, visibility 0.3s !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 20px !important;
        }
        .auth-guide-modal-backdrop.show {
          opacity: 1 !important;
          visibility: visible !important;
        }
        .auth-guide-box {
          background: #111221 !important;
          border: 1px solid rgba(227, 169, 83, 0.2) !important;
          border-radius: 16px !important;
          width: 100% !important;
          max-width: 320px !important;
          padding: 28px 20px 20px 20px !important;
          position: relative !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          text-align: center !important;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
          transform: scale(0.9) !important;
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }
        .auth-guide-modal-backdrop.show .auth-guide-box {
          transform: scale(1) !important;
        }
        .btn-close-guide {
          position: absolute !important;
          top: 12px !important;
          right: 12px !important;
          background: none !important;
          border: none !important;
          color: rgba(255, 255, 255, 0.5) !important;
          cursor: pointer !important;
        }
        .guide-logo {
          width: 44px !important;
          height: 44px !important;
          border-radius: 50% !important;
          background: var(--gradient-cinema) !important;
          color: #fff !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          font-size: 1.1rem !important;
          font-weight: 900 !important;
          margin-bottom: 14px !important;
          box-shadow: 0 4px 12px rgba(227, 169, 83, 0.2) !important;
        }
        .guide-title {
          font-size: 1.05rem !important;
          font-weight: 700 !important;
          color: #fff !important;
          margin-bottom: 10px !important;
        }
        .guide-text {
          font-size: 0.8rem !important;
          line-height: 1.5 !important;
          color: rgba(255, 255, 255, 0.65) !important;
          margin-bottom: 20px !important;
        }
        .btn-guide-action {
          width: 100% !important;
          height: 40px !important;
          background: linear-gradient(135deg, #e3a953, #b87b28) !important;
          border: none !important;
          border-radius: 8px !important;
          color: #fff !important;
          font-weight: 600 !important;
          font-size: 0.85rem !important;
          cursor: pointer !important;
          transition: opacity 0.2s !important;
        }

        /* 📁 모바일 햄버거 아코디언 컴포넌트 */
        .sidebar-accordion {
          border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
          padding-bottom: 6px !important;
          margin-bottom: 6px !important;
        }
        .accordion-trigger {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          width: 100% !important;
          padding: 10px 8px !important;
          background: none !important;
          border: none !important;
          color: rgba(255, 255, 255, 0.9) !important;
          font-size: 0.82rem !important;
          font-weight: 700 !important;
          text-align: left !important;
          cursor: pointer !important;
        }
        .accordion-trigger span {
          display: flex !important;
          align-items: center !important;
          gap: 10px !important;
        }
        .accordion-trigger .arrow-icon {
          color: var(--accent-gold) !important;
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        .sidebar-accordion.open .accordion-trigger .arrow-icon {
          transform: rotate(180deg) !important;
        }
        .accordion-content {
          max-height: 0 !important;
          overflow: hidden !important;
          transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 4px !important;
          padding: 0 4px !important;
        }
        .sidebar-accordion.open .accordion-content {
          max-height: 380px !important; /* 펼쳤을 때 리스트 높이 감당 */
          margin-bottom: 8px !important;
          margin-top: 4px !important;
        }
        .accordion-item {
          display: flex !important;
          align-items: center !important;
          gap: 10px !important;
          padding: 8px 12px !important;
          border-radius: 6px !important;
          color: rgba(255, 255, 255, 0.7) !important;
          font-size: 0.78rem !important;
          text-decoration: none !important;
          transition: background 0.2s, color 0.2s !important;
          cursor: pointer !important;
          background: none !important;
          border: none !important;
          width: 100% !important;
          text-align: left !important;
        }
        .accordion-item:hover, .accordion-item:active {
          background: rgba(255, 255, 255, 0.04) !important;
          color: #fff !important;
        }
        .accordion-item svg {
          color: var(--accent-gold) !important;
          opacity: 0.8 !important;
          flex-shrink: 0;
        }

        /* 설정 아코디언 — 항목 많음: 펼침 높이 확대 */
        .sidebar-accordion.open .accordion-content--settings {
          max-height: 920px !important;
        }

        /* 햄버거 설정 패널 — 마이페이지 사이드바 설정을 모바일 아코디언용으로 재구성 */
        .ham-settings-panel {
          display: flex !important;
          flex-direction: column !important;
          gap: 2px !important;
          padding: 2px 4px 6px !important;
        }
        .ham-settings-group-title {
          margin: 10px 0 6px !important;
          padding: 0 8px !important;
          font-size: 0.66rem !important;
          font-weight: 800 !important;
          color: rgba(255, 255, 255, 0.38) !important;
          text-transform: uppercase !important;
          letter-spacing: 0.05em !important;
        }
        .ham-settings-group-title:first-child {
          margin-top: 2px !important;
        }
        .ham-settings-row {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: 10px !important;
          min-height: 38px !important;
          padding: 7px 8px !important;
          border-radius: 6px !important;
        }
        .ham-settings-row + .ham-settings-row {
          border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
        }
        .ham-settings-row--select {
          flex-wrap: wrap !important;
        }
        .ham-settings-label {
          font-size: 0.76rem !important;
          font-weight: 600 !important;
          color: rgba(255, 255, 255, 0.82) !important;
          flex: 1 1 auto !important;
          min-width: 0 !important;
        }
        /* KO/EN 세그먼트 — 모바일 터치 친화 */
        .ham-settings-segment {
          display: inline-flex !important;
          flex-shrink: 0 !important;
          padding: 2px !important;
          background: rgba(255, 255, 255, 0.05) !important;
          border: 1px solid rgba(255, 255, 255, 0.1) !important;
          border-radius: 6px !important;
          gap: 2px !important;
        }
        .ham-settings-segment-btn {
          min-width: 36px !important;
          height: 28px !important;
          padding: 0 10px !important;
          background: transparent !important;
          border: none !important;
          border-radius: 4px !important;
          color: rgba(255, 255, 255, 0.55) !important;
          font-size: 0.72rem !important;
          font-weight: 700 !important;
          cursor: pointer !important;
          transition: background 0.2s, color 0.2s !important;
        }
        .ham-settings-segment-btn.active {
          background: rgba(234, 88, 12, 0.35) !important;
          color: #fff !important;
        }
        .ham-settings-select {
          flex: 0 0 auto !important;
          max-width: 132px !important;
          min-width: 108px !important;
          padding: 6px 8px !important;
          background: rgba(245, 158, 11, 0.08) !important;
          border: 1px solid rgba(245, 158, 11, 0.35) !important;
          border-radius: 6px !important;
          color: var(--accent-gold) !important;
          font-size: 0.7rem !important;
          font-weight: 600 !important;
          cursor: pointer !important;
        }
        .ham-settings-select option {
          background: #121317 !important;
          color: #fff !important;
        }
        /* 토글 스위치 */
        .ham-settings-toggle {
          position: relative !important;
          display: inline-block !important;
          width: 42px !important;
          height: 24px !important;
          flex-shrink: 0 !important;
        }
        .ham-settings-toggle input {
          opacity: 0 !important;
          width: 0 !important;
          height: 0 !important;
        }
        .ham-settings-toggle-slider {
          position: absolute !important;
          inset: 0 !important;
          background: rgba(255, 255, 255, 0.12) !important;
          border-radius: 24px !important;
          cursor: pointer !important;
          transition: 0.2s ease !important;
        }
        .ham-settings-toggle-slider::before {
          content: "" !important;
          position: absolute !important;
          width: 18px !important;
          height: 18px !important;
          left: 3px !important;
          bottom: 3px !important;
          background: #fff !important;
          border-radius: 50% !important;
          transition: 0.2s ease !important;
        }
        .ham-settings-toggle input:checked + .ham-settings-toggle-slider {
          background: rgba(234, 88, 12, 0.55) !important;
        }
        .ham-settings-toggle input:checked + .ham-settings-toggle-slider::before {
          transform: translateX(18px) !important;
        }
        /* 계정 링크 */
        .ham-settings-account {
          margin-top: 4px !important;
          padding-top: 4px !important;
          border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        }
        .ham-settings-link {
          display: flex !important;
          align-items: center !important;
          width: 100% !important;
          min-height: 38px !important;
          padding: 8px !important;
          background: none !important;
          border: none !important;
          border-radius: 6px !important;
          text-align: left !important;
          font-size: 0.76rem !important;
          font-weight: 600 !important;
          color: rgba(255, 255, 255, 0.72) !important;
          cursor: pointer !important;
          transition: color 0.2s, background 0.2s !important;
        }
        .ham-settings-link + .ham-settings-link {
          border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
        }
        .ham-settings-link:active {
          background: rgba(255, 255, 255, 0.04) !important;
        }
        .ham-settings-link--danger {
          color: rgba(252, 165, 165, 0.88) !important;
        }

        /* 💻 축약용 코어 버튼 가로 레이아웃 */
        .sidebar-compact-btns {
          display: grid !important;
          grid-template-columns: 1fr 1fr !important;
          gap: 8px !important;
          margin-top: 8px !important;
        }
        .btn-compact-sidebar {
          height: 34px !important;
          background: rgba(255, 255, 255, 0.04) !important;
          border: 1px solid rgba(255, 255, 255, 0.08) !important;
          border-radius: 6px !important;
          color: #fff !important;
          font-size: 0.76rem !important;
          font-weight: 600 !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 5px !important;
          transition: background 0.2s, border-color 0.2s !important;
        }
        .btn-compact-sidebar:active {
          background: rgba(255, 255, 255, 0.08) !important;
          border-color: var(--accent-gold) !important;
        }
        .btn-compact-sidebar svg {
          color: var(--accent-gold) !important;
        }
      }

      /* ========================================================
         [MVP v1.1] 모바일 가로모드 (Landscape) 대응 규격
         ======================================================== */
      @media (max-width: 960px) and (orientation: landscape) {
        .modal-box {
          overflow-y: auto !important;
        }
        .modal-player-side {
          margin-bottom: 0 !important;
          background: #000 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 0 !important;
        }
        .player-aspect-ratio-box {
          width: auto !important;
          height: calc(100vh - 20px) !important;
          max-height: calc(100vh - 20px) !important;
          aspect-ratio: 16 / 9 !important;
          padding-top: 0 !important;
          margin: 10px auto !important;
          border-radius: 8px !important;
          box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
          overflow: hidden !important;
        }
        .player-iframe-node {
          width: 100% !important;
          height: 100% !important;
        }
        /* 하단 고정바가 플레이어를 가리는 것을 완벽 방지하기 위해 정적 배치로 전환 */
        .md-footer-actions {
          position: relative !important;
          bottom: auto !important;
          left: auto !important;
          right: auto !important;
          width: 100% !important;
          background: transparent !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          padding: 16px 0 !important;
          border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
          box-shadow: none !important;
          margin-top: 24px !important;
          transform: none !important;
          opacity: 1 !important;
          pointer-events: auto !important;
          transform: none !important;
        }
        /* 컨트롤이 자동 숨김 상태일 때에도 가로모드 정적 배치 하단 버튼들은 항상 유지되거나, 흐름 방해 안 함 */
        .controls-hidden .md-footer-actions {
          opacity: 1 !important;
          pointer-events: auto !important;
          transform: none !important;
        }
        .modal-scrollable-area {
          padding: 8px 16px 40px 16px !important; /* 아래 패딩 축소 */
        }
      }

      /* 하단 고정 내비는 휴대폰만. 태블릿에 새로 두지 않는다. */
      @media (min-width: 769px) {
        .mobile-bottom-nav {
          display: none !important;
        }
      }
      /* PC(1025+)만 햄버거 패널·계정 안내를 숨긴다. 769–1024 에서는 연다. */
      @media (min-width: 1025px) {
        .mobile-sidebar-backdrop,
        .mobile-sidebar,
        .auth-guide-modal-backdrop {
          display: none !important;
        }
      }

      /* 출처(source_type) Premium 안내 문구 */
      .source-premium-note {
        font-size: 0.68rem;
        color: var(--text-muted);
        line-height: 1.45;
        margin: 6px 0 0 0;
        opacity: 0.85;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
      }
      .source-section .source-primary-action {
        color: var(--accent-gold);
        font-weight: 600;
      }