/* AI CineCatch — 제목 원제 assist (공통) */
/* 🌐는 제목 텍스트 바로 오른쪽(gap 6px) · 수직 중앙 정렬 — wrapper는 콘텐츠 너비만 차지 */
.title-assist-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: fit-content !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  position: relative;
  vertical-align: middle;
  flex-wrap: nowrap;
}

.title-assist-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex: 0 0 auto !important;
  flex-shrink: 0;
  align-self: center !important;
  margin: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--accent-gold, #f2c14e);
  font-size: 10px;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  user-select: none;
  touch-action: manipulation; /* 모바일 300ms click 지연·ghost click 완화 */
  -webkit-tap-highlight-color: transparent;
}

/* wrapper 내부 제목 — grow 금지(🌐가 줄 맨끝으로 밀리지 않게) */
.title-assist-wrapper > :first-child:not(.title-assist-icon):not(.title-assist-tooltip):not(.title-assist-popover) {
  flex: 0 1 auto !important;
  min-width: 0;
  max-width: 100%;
  width: auto !important;
}

.title-assist-wrapper > .series-card-title,
.title-assist-wrapper > .ne-card-title-text,
.title-assist-wrapper > .sidebar-rank-title,
.title-assist-wrapper > .ranking-list-title,
.title-assist-wrapper > .ranking-carousel-title,
.title-assist-wrapper > .awards-winner-title,
.title-assist-wrapper > .awards-highlight-main-title,
.title-assist-wrapper > .awards-highlight-side-title,
.title-assist-wrapper > .continue-series-title,
.title-assist-wrapper > .series-title,
.title-assist-wrapper > .home-ep-card-series-title,
.title-assist-wrapper > h3,
.title-assist-wrapper > h4 {
  margin: 0;
  width: auto !important;
  flex: 0 1 auto !important;
  max-width: 100%;
}

/* 단편&쇼츠 카탈로그 — 긴 제목 1줄 말줄임, 🌐 아이콘은 제목 옆 같은 줄 */
.title-assist-wrapper:has(.shorts-card-title) {
  align-items: center !important;
}

.title-assist-wrapper:has(.shorts-card-title) .title-assist-icon {
  margin-top: 0 !important;
  align-self: center !important;
}

.title-assist-wrapper > .shorts-card-title {
  white-space: nowrap !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  height: auto !important;
  margin-bottom: 0 !important;
  line-height: 1.35;
}

/* PC 마우스 환경에서만 hover 강조 (모바일 탭 시 아이콘만 밝아지는 현상 방지) */
@media (hover: hover) and (pointer: fine) {
  .title-assist-icon:hover {
    background-color: var(--accent-gold, #f2c14e);
    color: #0b0c0e;
    border-color: var(--accent-gold, #f2c14e);
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(242, 193, 78, 0.4);
  }
}

/* 모바일: 시각 크기는 원본 16px 유지, 터치만 투명 hit-slop으로 확대 */
@media (max-width: 768px) {
  .title-assist-wrapper {
    position: relative;
    z-index: 2;
  }

  .title-assist-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    font-size: 10px;
    flex-shrink: 0;
    z-index: 3;
  }

  /* 보이지 않는 터치 영역 (원형 컨테이너 키우지 않음) */
  .title-assist-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    background: transparent;
  }

  /* 탭/활성 시 과한 골드 원형 강조 제거 — 🌐만 살짝 유지 */
  .title-assist-icon.is-active,
  .title-assist-icon:active {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--accent-gold, #f2c14e);
    border-color: rgba(255, 255, 255, 0.2);
    transform: none;
    box-shadow: none;
  }
}

/* PC 전용 스마트 툴팁 */
.title-assist-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background-color: #121416;
  color: #ffffff;
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 11px;
  white-space: nowrap;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(0,0,0,0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 1010;
  font-family: var(--font-sans);
}

.title-assist-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: #121416 transparent transparent transparent;
}

/* PC 프리미엄 원제 툴팁 — 모바일 팝오버와 동일한 골드 보더 레이아웃 */
.title-assist-tooltip.premium,
.title-assist-tooltip.two-lines {
  white-space: normal !important;
  text-align: center !important;
  width: max-content !important; /* 내용 길이에 맞게 가로 확장 (좁은 카드 래퍼 영향 탈출) */
  min-width: 180px !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 8px 14px !important;
  line-height: 1.4 !important;
  background-color: #1b1d20 !important;
  border: 1px solid var(--accent-gold, #f2c14e) !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7) !important;
}

.title-assist-tooltip.premium::after,
.title-assist-tooltip.two-lines::after {
  border-color: #1b1d20 transparent transparent transparent !important;
}

/* 상단 라벨 — 항상 1줄 */
.title-assist-tooltip .tooltip-line-label {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* 본문 블록 — 제목+에피소드 합쳐 최대 2줄 (3줄 단락 방지) */
.title-assist-tooltip .tooltip-line-body {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  line-height: 1.38 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.title-assist-tooltip .tooltip-body-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--accent-gold, #f2c14e) !important;
}

.title-assist-tooltip .tooltip-body-sub {
  display: block !important;
  margin-top: 2px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

/* 레거시 2단 클래스 호환 */
.title-assist-tooltip .tooltip-line-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--accent-gold, #f2c14e) !important;
  line-height: 1.35 !important;
}

.title-assist-tooltip .tooltip-line-main {
  font-weight: 700 !important;
  color: #ffffff !important;
  font-size: 11px !important;
}

.title-assist-tooltip .tooltip-line-sub {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 500 !important;
  opacity: 0.95 !important;
}

@media (min-width: 769px) {
  /* PC: 호버 시 툴팁 노출 + 본문 가로 여유 확보 */
  .title-assist-wrapper:hover .title-assist-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .title-assist-tooltip.premium,
  .title-assist-tooltip.two-lines {
    min-width: 200px !important;
    max-width: min(440px, calc(100vw - 40px)) !important;
  }
}

@media (max-width: 768px) {
  /* 모바일 터치 환경: PC 툴팁 완전 가림 및 기능 비활성화 */
  .title-assist-tooltip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 카탈로그·그리드 카드 — 🌐 툴팁/팝오버가 카드 border 안에서 잘리지 않도록
   인기 연재(ongoing)·AI Films(film-shorts) PC 가로형 카드 포함 */
#seriesCatalogGrid,
#seriesCatalogGrid .series-card,
#seriesCatalogGrid .series-body,
#seriesCatalogGrid .title-assist-wrapper,
#shortsCatalogGrid,
#shortsCatalogGrid .shorts-catalog-card,
#shortsCatalogGrid .series-body,
#shortsCatalogGrid .title-assist-wrapper,
.ranking-list-row,
.ranking-list-title-wrap,
.ranking-list-head,
.ranking-list-main,
.portal-left-column .ongoing-series-grid,
.portal-left-column .ongoing-series-grid .series-card,
.portal-left-column .ongoing-series-grid .series-body,
.portal-left-column .ongoing-series-grid .series-card-title-wrap,
.portal-left-column .ongoing-series-grid .title-assist-wrapper,
#aiFilmsShorts .film-shorts-grid,
#aiFilmsShorts .film-shorts-grid .series-card,
#aiFilmsShorts .film-shorts-grid .series-body,
#aiFilmsShorts .film-shorts-grid .series-card-title-wrap,
#aiFilmsShorts .film-shorts-grid .title-assist-wrapper,
.awards-highlight-side-card,
.awards-highlight-side-info,
.series-grid:not(.completed-grid):not(.ongoing-series-grid):not(.film-shorts-grid),
.series-grid:not(.completed-grid):not(.ongoing-series-grid):not(.film-shorts-grid) .series-card,
.series-grid:not(.completed-grid):not(.ongoing-series-grid):not(.film-shorts-grid) .series-body,
.series-grid:not(.completed-grid):not(.ongoing-series-grid):not(.film-shorts-grid) .title-assist-wrapper {
  overflow: visible !important;
}

/* 카드 호버/🌐 호버 시 툴팁이 인접 카드 위에 표시되도록 z-index 상향 */
#seriesCatalogGrid .series-card:has(.title-assist-icon:hover),
#seriesCatalogGrid .series-card:has(.title-assist-icon.is-active),
#shortsCatalogGrid .shorts-catalog-card:has(.title-assist-icon:hover),
#shortsCatalogGrid .shorts-catalog-card:has(.title-assist-icon.is-active),
.ranking-list-row:has(.title-assist-icon:hover),
.ranking-list-row:has(.title-assist-icon.is-active),
.portal-left-column .ongoing-series-grid .series-card:has(.title-assist-icon:hover),
.portal-left-column .ongoing-series-grid .series-card:has(.title-assist-icon.is-active),
#aiFilmsShorts .film-shorts-grid .series-card:has(.title-assist-icon:hover),
#aiFilmsShorts .film-shorts-grid .series-card:has(.title-assist-icon.is-active),
.awards-winner-card:has(.title-assist-icon:hover),
.awards-winner-card:has(.title-assist-icon.is-active),
.awards-highlight-side-card:has(.title-assist-icon:hover),
.awards-highlight-side-card:has(.title-assist-icon.is-active),
.series-grid:not(.completed-grid):not(.ongoing-series-grid):not(.film-shorts-grid) .series-card:has(.title-assist-icon:hover),
.series-grid:not(.completed-grid):not(.ongoing-series-grid):not(.film-shorts-grid) .series-card:has(.title-assist-icon.is-active) {
  z-index: 120 !important;
}

#seriesCatalogGrid .title-assist-tooltip,
#shortsCatalogGrid .title-assist-tooltip,
.ranking-list-row .title-assist-tooltip,
.portal-left-column .ongoing-series-grid .title-assist-tooltip,
#aiFilmsShorts .film-shorts-grid .title-assist-tooltip,
.awards-winner-card .title-assist-tooltip,
.awards-highlight-side-card .title-assist-tooltip,
.series-grid:not(.completed-grid):not(.ongoing-series-grid):not(.film-shorts-grid) .title-assist-tooltip {
  z-index: 9999 !important;
}

@media (min-width: 1025px) {
  /* 주요 모든 카드가 호버 툴팁을 밖으로 자연스럽게 드러내도록 overflow: visible 오버라이드 */
  .episode-card,
  .series-card,
  .film-card,
  .sidebar-ranking-item,
  .ranking-list-row,
  .continue-card,
  .awards-winner-card,
  .awards-winner-inner,
  .awards-winner-body {
    overflow: visible !important;
    position: relative !important;
  }

  /* 호버 시 쌓임 맥락을 강하게 올려 뒤 레이어 카드나 콘텐츠에 가려지지 않도록 조율 */
  .episode-card:hover,
  .series-card:hover,
  .film-card:hover,
  .sidebar-ranking-item:hover,
  .ranking-list-row:hover,
  .continue-card:hover {
    z-index: 102 !important;
  }

  /* 둥근 테두리 안의 썸네일/포스터 이미지가 바깥으로 빠져나오지 않도록 서브 래핑 영역들만 깎음 */
  .episode-card .thumb-wrap,
  .series-card .poster-wrap {
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
    overflow: hidden !important;
  }

  /* 툴팁이 소속된 모든 스크롤 및 그리드 시스템 영역 컨테이너의 PC overflow를 보증 */
  .episodes-scroll,
  .ongoing-series-grid,
  .film-shorts-grid,
  .series-grid,
  #seriesCatalogGrid,
  #shortsCatalogGrid,
  .ranking-list-stack,
  .continue-grid,
  .completed-grid,
  .portal-left-column,
  .portal-layout-container {
    overflow: visible !important;
  }

  /* 단편 슬림 3D 캐러셀은 PC에서도 가로 스크롤 유지 (title-assist visible 오버라이드 제외) */
  body[data-page="shorts"] .shorts-catalog-slim-grid.completed-grid {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  /* 완결 3D 그리드 내부 카드 호버 및 툴팁 가림 방지 */
  .completed-grid .series-card {
    overflow: visible !important;
  }
}

/* 모바일 전용 프렌들리 팝오버 버블 */
.title-assist-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #1b1d20;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,0.7);
  border: 1px solid var(--accent-gold, #f2c14e);
  z-index: 1020;
  display: none; /* 상태값 매개 제어 */
  animation: popoverFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-sans);
}

.title-assist-popover.show {
  display: block;
}

.title-assist-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% + var(--arrow-offset, 0px));
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #1b1d20 transparent transparent transparent;
}

.title-assist-popover.below::after {
  top: auto !important;
  bottom: 100% !important;
  border-color: transparent transparent #1b1d20 transparent !important;
}

.title-assist-popover-title {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  margin-bottom: 3px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.title-assist-popover-text {
  font-weight: 600;
  color: var(--accent-gold, #f2c14e);
}

@keyframes popoverFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* 상세 뷰 모달 헤더(.md-header) 내 타이틀 어시스트 디스플레이 최적화 (각각 독립적인 2줄 구성) */
.md-header .title-assist-wrapper {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
  overflow: visible !important;
}

/*
 * 원제 🌐가 있을 때 h3.md-ep-title 이 wrapper 안으로 들어가면
 * `.title-assist-wrapper > h3 { margin: 0 }` 때문에 제목↔배지 줄 간격(10px)이 사라진다.
 * wrapper 가 블록 간격만 대신 맡긴다. (🌐 없는 작품의 .md-ep-title margin-bottom 과 동일)
 */
.md-header .title-assist-wrapper:has(.md-ep-title),
.md-header .title-assist-wrapper:has(#modalEpisodeTitle) {
  margin-bottom: 10px;
}

.md-header .title-assist-wrapper > .md-ep-title {
  margin-bottom: 0 !important;
}

/* 상세 모달 내 툴팁 상단 가림 현상 해결을 위한 하향(아래쪽) 배치 오버라이드 */
.md-header .title-assist-tooltip {
  bottom: auto !important;
  top: calc(100% + 8px) !important;
  transform: translateX(-50%) translateY(-4px) !important;
}
.md-header .title-assist-wrapper:hover .title-assist-tooltip {
  transform: translateX(-50%) translateY(0) !important;
}
/* 화살표 방향 위쪽으로 반전 */
.md-header .title-assist-tooltip::after {
  top: auto !important;
  bottom: 100% !important;
  border-color: transparent transparent #121416 transparent !important;
}


.md-ep-item .title-assist-wrapper {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
}


/* body에 붙는 모바일 팝오버 — 기본 숨김 (하단 텍스트 유출 방지)
   position:fixed + JS 뷰포트 좌표 — overflow:hidden 카드·섹션 클리핑 탈출 */
body > .title-assist-popover,
#titleAssistSharedPopover {
  position: fixed;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  display: none !important;
  z-index: 99999;
  pointer-events: auto;
  visibility: hidden;
  opacity: 1;
}
body > .title-assist-popover.show,
#titleAssistSharedPopover.show {
  display: block !important;
  visibility: visible;
}

/* 시리즈 카탈로그 smart-assist 팝오버 */
.smart-title-popover {
  position: fixed;
  display: none;
  z-index: 999999;
  pointer-events: none;
}
.smart-assist-globe-btn {
  cursor: pointer;
  user-select: none;
}

/* ── 섹션별 🌐 수직·가로 정렬 보정 ── */

/* 내 이어보기 */
.continue-info .title-assist-wrapper {
  width: fit-content !important;
  max-width: 100% !important;
}

.continue-info .title-assist-wrapper > .continue-series-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 오늘의 신작 — 회차 옆에서 남은 폭만 쓰고 🌐은 제목 바로 오른쪽 */
.episode-card .episode-title-block > .title-assist-wrapper {
  align-items: center !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.episode-card .episode-title-block > .title-assist-wrapper > .ep-name {
  /* grow 금지: 짧은 제목에서 🌐이 줄 끝으로 밀리지 않게 한다 */
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.episode-card .episode-title-block .title-assist-icon {
  margin-top: 0;
  flex-shrink: 0 !important;
}

.episode-card .title-assist-wrapper > .series-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) and (pointer: fine) {
  .episode-card .title-assist-icon:hover {
    transform: translateY(-1px) scale(1.15);
  }
}

/* 정주행 완결 명작 3D 캐러셀 */
.completed-grid .title-assist-wrapper,
#completedGrid .title-assist-wrapper {
  width: fit-content !important;
  max-width: 100% !important;
}

/* 연재 시리즈·신작·단편 카탈로그 — 🌐를 제목 바로 옆 같은 줄에 */
#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;
}

#shortsCatalogGrid .title-assist-wrapper {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

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

#shortsCatalogGrid .title-assist-wrapper > .shorts-card-title,
#shortsCatalogGrid .title-assist-wrapper > .series-card-title {
  display: block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

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