/**
 * 카탈로그 페이지 공통 — 모바일 하단 탭 영역 (쇼츠 페이지 표준)
 * · 탭 패널 내부 박스(padding/border) 제거 → 카드 full-width
 * · 탭바·위젯 제목·패널 gap 통일
 */

@media (max-width: 991px) {
  /*
   * 탭 패널 — inline / .mobile-ranking-section 박스 래핑 제거
   * (portal-layout padding 16px만 유지 → 쇼츠와 동일 카드 폭)
   */
  .shorts-mobile-bottom-sections .mobile-tab-content-pane,
  .ranking-mobile-bottom-sections .mobile-tab-content-pane,
  .awards-mobile-bottom-sections .mobile-tab-content-pane,
  .creators-mobile-bottom-sections .mobile-tab-content-pane:not(#creatorsMobilePaneAwards),
  body[data-page="series"] #mobilePopularAndAwards .mobile-tab-content-pane,
  body[data-page="new-episodes"] #mobilePopularAndAwards .mobile-tab-content-pane {
    padding: 0 !important;
    margin-bottom: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* .mobile-ranking-section 공통 규칙(16px 12px) 덮어쓰기 — 탭 패널에만 */
  body[data-page="series"] #mobilePopularAndAwards .mobile-ranking-section.mobile-tab-content-pane,
  body[data-page="new-episodes"] #mobilePopularAndAwards .mobile-ranking-section.mobile-tab-content-pane,
  .ranking-mobile-bottom-sections .mobile-ranking-section.mobile-tab-content-pane {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* 탭바 ↔ 본문 */
  .shorts-mobile-bottom-sections .mobile-tabs-section-header,
  .ranking-mobile-bottom-sections .mobile-tabs-section-header,
  .awards-mobile-bottom-sections .mobile-tabs-section-header,
  .creators-mobile-bottom-sections .mobile-tabs-section-header,
  body[data-page="series"] #mobilePopularAndAwards .mobile-tabs-section-header,
  body[data-page="new-episodes"] #mobilePopularAndAwards .mobile-tabs-section-header {
    margin-top: 12px !important;
  }

  .shorts-mobile-bottom-sections .mobile-tabs-nav,
  .ranking-mobile-bottom-sections .mobile-tabs-nav,
  .awards-mobile-bottom-sections .mobile-tabs-nav,
  .creators-mobile-bottom-sections .mobile-tabs-nav,
  body[data-page="series"] #mobilePopularAndAwards .mobile-tabs-nav,
  body[data-page="new-episodes"] #mobilePopularAndAwards .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: 12px !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .shorts-mobile-bottom-sections .mobile-tab-btn,
  .ranking-mobile-bottom-sections .mobile-tab-btn,
  .awards-mobile-bottom-sections .mobile-tab-btn,
  .creators-mobile-bottom-sections .mobile-tab-btn,
  body[data-page="series"] #mobilePopularAndAwards .mobile-tab-btn,
  body[data-page="new-episodes"] #mobilePopularAndAwards .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;
    font-family: inherit;
  }

  .shorts-mobile-bottom-sections .mobile-tab-btn.active,
  .ranking-mobile-bottom-sections .mobile-tab-btn.active,
  .awards-mobile-bottom-sections .mobile-tab-btn.active,
  .creators-mobile-bottom-sections .mobile-tab-btn.active,
  body[data-page="series"] #mobilePopularAndAwards .mobile-tab-btn.active,
  body[data-page="new-episodes"] #mobilePopularAndAwards .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;
  }

  /* 탭바 ↔ 본문 */
  .shorts-mobile-bottom-sections .mobile-tab-content-pane.active,
  .ranking-mobile-bottom-sections .mobile-tab-content-pane.active,
  .awards-mobile-bottom-sections .mobile-tab-content-pane.active,
  .creators-mobile-bottom-sections .mobile-tab-content-pane.active:not(#creatorsMobilePaneAwards),
  body[data-page="series"] #mobilePopularAndAwards .mobile-tab-content-pane.active,
  body[data-page="new-episodes"] #mobilePopularAndAwards .mobile-tab-content-pane.active {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* 크리에이터 어워드 탭 — boxed 패널은 flex gap 별도(패널 내부 padding 유지) */
  .creators-mobile-bottom-sections #creatorsMobilePaneAwards.mobile-tab-content-pane.active {
    display: block !important;
    gap: 0 !important;
  }

  /* 위젯 제목 — 쇼츠 .shorts-sidebar-title 표준 */
  .shorts-mobile-bottom-sections .mobile-tab-content-pane .shorts-sidebar-title,
  .ranking-mobile-bottom-sections .mobile-tab-content-pane .sidebar-title,
  .awards-mobile-bottom-sections .mobile-tab-content-pane .sidebar-title,
  .creators-mobile-bottom-sections .mobile-tab-content-pane .creators-sidebar-title,
  body[data-page="series"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-title,
  body[data-page="new-episodes"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    padding-left: 6px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* 연재·신작 탭 제목 — inline 1.1rem 덮어쓰기 */
  body[data-page="series"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-title .lang-ko,
  body[data-page="series"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-title .lang-en,
  body[data-page="new-episodes"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-title .lang-ko,
  body[data-page="new-episodes"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-title .lang-en {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
  }

  /*
   * 연재·신작 — 탭바 ↔ 위젯 제목 상하 여백 50% 축소
   * (nav margin-bottom 12px + 섹션 gap 16px + title margin-top 4px → 6+8+2)
   */
  body[data-page="series"] #mobilePopularAndAwards,
  body[data-page="new-episodes"] #mobilePopularAndAwards {
    gap: 8px !important;
  }

  body[data-page="series"] #mobilePopularAndAwards .mobile-tabs-nav,
  body[data-page="new-episodes"] #mobilePopularAndAwards .mobile-tabs-nav {
    margin-bottom: 6px !important;
  }

  body[data-page="series"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-title,
  body[data-page="new-episodes"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-title {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    padding-bottom: 3px !important;
  }

  /* 리스트·카드 full-width */
  .shorts-mobile-bottom-sections .sidebar-ranking-list,
  .ranking-mobile-bottom-sections .sidebar-ranking-list,
  .awards-mobile-bottom-sections .sidebar-ranking-list,
  .creators-mobile-bottom-sections .sidebar-ranking-list,
  body[data-page="series"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-ranking-list,
  body[data-page="new-episodes"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-ranking-list,
  .awards-mobile-bottom-sections .awards-sidebar-thumb-list,
  .creators-mobile-bottom-sections .creators-sidebar-updates,
  .shorts-mobile-bottom-sections .shorts-sidebar-compact-list {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    gap: 10px !important;
  }

  /* 랭킹형 카드 — 쇼츠 .shorts-sidebar-rank-item 패딩(10px 12px) 기준 */
  .shorts-mobile-bottom-sections .sidebar-ranking-item,
  .ranking-mobile-bottom-sections .sidebar-ranking-item,
  .awards-mobile-bottom-sections .sidebar-ranking-item,
  .creators-mobile-bottom-sections .sidebar-ranking-item,
  body[data-page="series"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-ranking-item,
  body[data-page="new-episodes"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-ranking-item,
  .shorts-mobile-bottom-sections .shorts-sidebar-rank-item {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
  }

  /* 어워드 수상작·썸네일 카드 — 탭 패널 내 동일 폭 */
  .awards-mobile-bottom-sections .mobile-tab-content-pane .award-item,
  .awards-mobile-bottom-sections .awards-sidebar-thumb-card {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* 크리에이터 탭 제목 — catalog-mobile-tabs 대문자 규칙 예외 */
  .creators-mobile-bottom-sections .mobile-tab-content-pane .creators-sidebar-title {
    text-transform: none !important;
    letter-spacing: normal !important;
  }

  /* 비활성 탭 패널 숨김 */
  .shorts-mobile-bottom-sections .mobile-tab-content-pane:not(.active),
  .ranking-mobile-bottom-sections .mobile-tab-content-pane:not(.active),
  .awards-mobile-bottom-sections .mobile-tab-content-pane:not(.active),
  .creators-mobile-bottom-sections .mobile-tab-content-pane:not(.active),
  body[data-page="series"] #mobilePopularAndAwards .mobile-tab-content-pane:not(.active),
  body[data-page="new-episodes"] #mobilePopularAndAwards .mobile-tab-content-pane:not(.active) {
    display: none !important;
  }
}