/* ============================================================
   사용자 콘텐츠 페이지 보정
   ------------------------------------------------------------
   이 페이지는 구입한 HTML 템플릿(Hostingo) 위에 만들어져 있어
   사이트의 다른 화면과 톤이 따로 놉니다.
   템플릿 CSS를 고치지 않고 여기서만 덮어씁니다.
   design.css의 토큰(--ct-*)을 그대로 씁니다.
   ============================================================ */

body,
body .gen-movie-info h3,
body h1, body h2, body h3, body h4 {
  font-family: var(--ct-font);
  word-break: keep-all;
}

/* 머리말 브랜드 (마크 + 워드마크) — 에디터 헤더와 같은 락업 */
.ct-brand { display: inline-flex; align-items: center; gap: .55rem; }
.ct-brand img { display: block; }
.ct-wordmark {
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; color: #fff;
}
.ct-wordmark span { font-weight: 500; opacity: .82; }

/* 지면 — 템플릿의 남색(#0a0e17)을 사이트의 초록 먹색으로 */
body { background-color: var(--ct-ground); }
.gen-section, .gen-movie-wrapper, .gen-main-block { background-color: transparent; }

/* 머리말 띠 */
.gen-breadcrumb, .gen-banner-inner, .gen-breadcrumb-section {
  background-color: var(--ct-void) !important;
}
.gen-breadcrumb h2, .gen-breadcrumb-title h2 {
  font-weight: 800;
  letter-spacing: -.03em;
}
/* 'User Contents'만 영어로 남아 있어 감춥니다(제목이 이미 한글로 있습니다) */
.gen-breadcrumb ul li + li,
.breadcrumb li + li { display: none; }

/* 카드 */
.gen-movie-contain, .gen-carousel-slider .gen-movie-contain {
  border-radius: var(--ct-radius);
  overflow: hidden;
  border: 1px solid var(--ct-line);
  background: var(--ct-surf);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.gen-movie-contain:hover {
  transform: translateY(-4px);
  border-color: var(--ct-line-2);
  box-shadow: 0 14px 28px -16px rgba(0,0,0,.8);
}
/* 썸네일은 게임 화면이므로 4:3 + 도트 그대로 */
.gen-movie-img img, .gen-movie-contain img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #000;
  image-rendering: pixelated;
}
.gen-movie-info h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.gen-movie-info h3 a { color: var(--ct-dim); }
.gen-movie-info h3 a:hover { color: var(--ct-brand-lt); }
.gen-movie-meta-holder ul li,
.gen-movie-meta-holder ul li a { color: var(--ct-dim-2); font-size: .82rem; }
.gen-movie-meta-holder ul li a:hover { color: var(--ct-brand-lt); }

/* 좋아요 수 */
.gen-movie-rating, [class*=rating] { color: var(--ct-dim); }

/* 정렬 드롭다운 */
.gen-drop-lang .dropdown-toggle,
.dropdown-toggle { font-family: var(--ct-font); color: var(--ct-dim); }
.dropdown-menu { border-radius: var(--ct-radius); border: 1px solid var(--ct-line); background: var(--ct-surf); }
.dropdown-menu a, .dropdown-item { color: var(--ct-dim-2); font-family: var(--ct-font); }
.dropdown-menu a:hover, .dropdown-item:hover { background: var(--ct-surf-2); color: var(--ct-brand-lt); }

/* ------------------------------------------------------------
   팝업 (설명 / 삭제)
   ------------------------------------------------------------ */
.mfp-bg { background: rgba(5, 13, 9, .82); opacity: 1 !important; }
.white-popup {
  position: relative;
  max-width: 34rem;
  margin: 2rem auto;
  padding: 1.4rem 1.5rem 1.6rem;
  background: var(--ct-card);
  color: var(--ct-ink);
  border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.55);
}
.white-popup h2 {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.025em;
  margin: .9rem 0 .5rem; color: var(--ct-ink);
}
.white-popup p { color: var(--ct-ink-2); line-height: 1.7; margin: 0; }
.white-popup a { color: var(--ct-brand-dk); word-break: break-all; }
/* 설명 팝업의 게임 화면 */
.ct-desc-popup img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #000;
  border-radius: var(--ct-radius-s);
  image-rendering: pixelated;
}
/* 삭제 팝업의 비밀번호 입력
   입력칸과 버튼의 높이가 서로 달라 줄이 어긋나 보였습니다.
   같은 높이 변수를 쓰고 stretch로 맞춥니다. */
.white-popup .search-form {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  margin-top: 1rem;
  --ct-field-h: 2.85rem;
}
.white-popup .search-form label { flex: 1; margin: 0; display: flex; }
.white-popup .search-field {
  width: 100%;
  height: var(--ct-field-h);
  box-sizing: border-box;
  border: 1.5px solid var(--ct-hair);
  border-radius: var(--ct-radius-s);
  padding: 0 .8rem;
  font-family: var(--ct-font);
  font-size: .95rem;
  line-height: normal;
  color: var(--ct-ink);
  background: #fff;
}
.white-popup .search-field:focus {
  border-color: var(--ct-brand);
  box-shadow: 0 0 0 3px rgba(23,162,74,.16);
  outline: none;
}
/* 원본은 position:absolute인 54x54 정사각형에 폰트어썸 체크 아이콘만 있어
   '무엇을 하는 버튼인지' 알 수 없었습니다(초록 체크로 삭제하는 모양).
   보통 버튼으로 되돌리고 '삭제' 글자를 넣습니다. */
.white-popup .search-submit {
  position: static !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: var(--ct-field-h);
  box-sizing: border-box;
  background: var(--ct-brand);
  border: 0;
  border-radius: var(--ct-radius-s);
  color: #fff;
  font-family: var(--ct-font);
  font-weight: 700;
  font-size: .95rem;
  line-height: normal;
  padding: 0 1.25rem;
  cursor: pointer;
  white-space: nowrap;
}
.white-popup .search-submit::before { content: none !important; }
.white-popup .search-submit::after { content: "삭제"; }
.white-popup .search-submit:hover { background: var(--ct-brand-dk); }

.mfp-close, .mfp-close-btn-in .mfp-close { color: var(--ct-ink-3) !important; }
.mfp-close:hover { color: var(--ct-ink) !important; }

/* 더 보기 버튼 */
#load-more, .gen-button, .load-more-btn {
  background: var(--ct-brand) !important;
  border-color: var(--ct-brand) !important;
  border-radius: var(--ct-radius-s);
  font-family: var(--ct-font);
  font-weight: 700;
}
#load-more:hover, .gen-button:hover { background: var(--ct-brand-dk) !important; }

@media (prefers-reduced-motion: reduce) {
  .gen-movie-contain { transition: none; }
  .gen-movie-contain:hover { transform: none; }
}