/* ============================================================
   CELEB.AI — BRIGHT & VIBRANT Design System v2
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Outfit:wght@300;400;600;700;900&family=Noto+Sans+KR:wght@300;400;700;900&display=swap');

:root {
  /* 브랜드 컬러 */
  --pink: #ff2d78;
  --purple: #7c3aed;
  --cyan: #06b6d4;
  --orange: #f97316;
  --gold: #f59e0b;
  --green: #10b981;

  /* 배경 — 밝은 테마 */
  --bg: #f4f6fb;
  --bg2: #eef0f8;
  --surface: #ffffff;
  --surface2: #f8f9ff;
  --glass: rgba(255, 255, 255, 0.85);

  /* 텍스트 */
  --text: #111827;
  --text2: #4b5563;
  --text3: #9ca3af;

  /* 상태 */
  --pos: #059669;
  --neg: #dc2626;
  --neu: #6b7280;

  --radius: 20px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, .06);
  --shadow: 0 8px 32px rgba(0, 0, 0, .10);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .14);
  --transition: all 0.24s cubic-bezier(.4, 0, .2, 1);

  /* 필기체 폰트 — Great Vibes */
  --font-script: 'Great Vibes', cursive;
}

/* ========== RESET ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', 'Noto Sans KR', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg2);
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

/* ========== NAVBAR ========== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  transition: var(--transition);
}

.nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  height: 64px;
}

.nav-brand {
  font-size: 26px;
  font-weight: 400;
  font-family: var(--font-script);
  letter-spacing: 0px;
  text-decoration: none;
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: 4px;
}

.brand-icon {
  font-size: 18px;
  font-family: 'Noto Sans KR', sans-serif;
  -webkit-text-fill-color: initial;
}

.brand-accent {
  color: var(--purple);
}

.nav-links {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  overflow: hidden;
  align-items: center;
}

.nav-link {
  padding: 7px 14px;
  border-radius: 10px;
  color: var(--text2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-link:hover,
.nav-link.active {
  color: var(--pink);
  background: rgba(255, 45, 120, .07);
}

/* ── 네비게이션 반응형: 좁은 화면 순차적 압축 ── */
/* 1100px: 보조 페이지링크 숨김 */
@media (max-width: 1100px) {
  .nav-link-page {
    display: none;
  }
}

/* 900px: nav 폰트·패딩 축소 */
@media (max-width: 900px) {
  .nav-link {
    padding: 6px 10px;
    font-size: 13px;
  }

  .nav-inner {
    gap: 12px;
    padding: 0 16px;
  }
}

/* 680px: 호감도·Pick 링크도 숨김 */
@media (max-width: 680px) {

  .nav-link[href='#sentiment'],
  .nav-link[href='#picks'] {
    display: none;
  }

  .nav-link {
    padding: 5px 8px;
    font-size: 12px;
  }

  .btn-notify {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* 480px: 피드 링크도 숨김 (순위·공유·LIVE만 표시) */
@media (max-width: 480px) {
  .nav-link[href='#feed'] {
    display: none;
  }

  .nav-link {
    padding: 4px 7px;
    font-size: 11px;
  }

  .nav-share-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* ── 네비 검색 버튼 ── */
.nav-search-btn {
  background: none;
  border: 1.5px solid rgba(255, 45, 120, 0.25);
  color: var(--text2);
  font-size: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.nav-search-btn:hover {
  background: rgba(255, 45, 120, 0.08);
  border-color: var(--pink);
  transform: scale(1.1);
}

/* ======================================================
   셀럽 검색 오버레이 (csearch)
   ====================================================== */
.csearch-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 72px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.csearch-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.csearch-modal {
  width: 100%;
  max-width: 620px;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255,45,120,.12);
  overflow: hidden;
  transform: translateY(-16px) scale(0.97);
  transition: transform 0.22s cubic-bezier(.34,1.56,.64,1);
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}
.csearch-overlay.open .csearch-modal {
  transform: translateY(0) scale(1);
}

/* 검색창 헤더 */
.csearch-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bg2);
  flex-shrink: 0;
}
.csearch-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 0 14px;
  transition: border-color 0.2s;
}
.csearch-input-wrap:focus-within {
  border-color: var(--pink);
  background: #fff;
}
.csearch-icon {
  font-size: 17px;
  flex-shrink: 0;
  opacity: 0.6;
}
.csearch-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  font-family: 'Outfit', 'Noto Sans KR', sans-serif;
  color: var(--text);
  padding: 11px 0;
}
.csearch-input::placeholder {
  color: var(--text3);
  font-size: 14px;
}
.csearch-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text3);
  font-size: 14px;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.2s;
}
.csearch-clear:hover { color: var(--pink); }
.csearch-close {
  background: none;
  border: 1.5px solid var(--bg2);
  color: var(--text3);
  font-size: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}
.csearch-close:hover { border-color: var(--pink); color: var(--pink); }

/* 힌트 (인기 검색) */
.csearch-hint {
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text3);
  border-bottom: 1px solid var(--bg2);
  flex-shrink: 0;
}
.csearch-hint button {
  background: var(--bg);
  border: 1px solid var(--bg2);
  color: var(--text2);
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Outfit', 'Noto Sans KR', sans-serif;
}
.csearch-hint button:hover {
  background: rgba(255,45,120,.08);
  border-color: var(--pink);
  color: var(--pink);
}

/* 검색 결과 목록 */
.csearch-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.csearch-results::-webkit-scrollbar { width: 4px; }
.csearch-results::-webkit-scrollbar-thumb { background: var(--bg2); border-radius: 4px; }

/* 결과 없음 */
.csearch-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text3);
  font-size: 14px;
}
.csearch-empty .csearch-empty-icon { font-size: 36px; margin-bottom: 10px; }

/* 결과 아이템 */
.csearch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
  margin-bottom: 3px;
}
.csearch-item:hover, .csearch-item.selected {
  background: rgba(255,45,120,.06);
  border-color: rgba(255,45,120,.15);
}
.csearch-item-rank {
  font-size: 13px;
  font-weight: 800;
  color: var(--text3);
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.csearch-item-rank.top3 { color: var(--pink); font-size: 18px; }
.csearch-item-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--bg2);
}
.csearch-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.csearch-item-info { flex: 1; min-width: 0; }
.csearch-item-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csearch-item-name mark {
  background: rgba(255,45,120,.15);
  color: var(--pink);
  border-radius: 3px;
  padding: 0 2px;
  font-style: normal;
}
.csearch-item-sub {
  font-size: 12px;
  color: var(--text3);
  margin-top: 2px;
}
.csearch-item-score {
  text-align: right;
  flex-shrink: 0;
}
.csearch-item-score-val {
  font-weight: 900;
  font-size: 15px;
  color: var(--pink);
}
.csearch-item-trend {
  font-size: 11px;
  font-weight: 700;
}
.csearch-item-trend.up { color: #10b981; }
.csearch-item-trend.down { color: #ef4444; }
.csearch-item-trend.same { color: #94a3b8; }

/* 섹션 구분 헤더 */
.csearch-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 1px;
  padding: 8px 12px 4px;
  text-transform: uppercase;
}

/* 푸터 */
.csearch-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--bg2);
  font-size: 12px;
  color: var(--text3);
  text-align: center;
  flex-shrink: 0;
}

/* 모바일 반응형 */
@media (max-width: 600px) {
  .csearch-overlay { padding-top: 56px; padding-left: 8px; padding-right: 8px; }
  .csearch-modal { border-radius: 16px; }
  .csearch-input { font-size: 15px; }
}

.live-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--neg);
  letter-spacing: .5px;
}

.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neg);
  animation: pulse-anim 1.5s infinite;
}

@keyframes pulse-anim {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, .5);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
  }
}

.btn-notify {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 14px rgba(255, 45, 120, .35);
}

.btn-notify:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 45, 120, .45);
}

/* ========== HERO ========== */
.hero {
  padding-top: 64px;
  background: linear-gradient(135deg, #fff0f6 0%, #f0f4ff 40%, #e8f8ff 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 45, 120, .12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(124, 58, 237, .10) 0%, transparent 50%),
    radial-gradient(circle at 60% 80%, rgba(6, 182, 212, .08) 0%, transparent 50%);
}

.hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 28px 80px;
  display: flex;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 2;
}

.hero-content {
  flex: 1;
  max-width: 620px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(255, 45, 120, .12), rgba(124, 58, 237, .12));
  border: 1px solid rgba(255, 45, 120, .25);
  color: var(--pink);
  padding: 6px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: .3px;
}

.hero-title {
  font-size: clamp(56px, 7vw, 96px);
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 1px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 55%, #4f46e5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200%;
  animation: gradShift 4s ease infinite;
  filter: drop-shadow(0 2px 8px rgba(255, 45, 120, 0.18));
}

.gradient-text {
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 50%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200%;
  animation: gradShift 4s ease infinite;
}

@keyframes gradShift {

  0%,
  100% {
    background-position: 0%
  }

  50% {
    background-position: 100%
  }
}

.hero-sub {
  color: var(--text2);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 36px;
}

.hero-stats {
  display: flex;
  gap: 0;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 32px;
  overflow: hidden;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 18px 16px;
  border-right: 1px solid #f0f0f0;
  transition: var(--transition);
}

.stat-item:last-child {
  border: none;
}

.stat-item:hover {
  background: var(--bg2);
}

.stat-num {
  display: block;
  font-size: 26px;
  font-weight: 900;
  color: var(--pink);
}

.stat-label {
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: .5px;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}


/* ========== SECTION TITLES (Script Font) ========== */
/* 각 섹션 h2 제목에 필기체 폰트 적용 */
.section-header h2,
.rank-col h2,
.digest-col h2,
.myceleb-header h2,
.spotlight-col-title {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
}

/* 섹션 내부 인라인 h2 오버라이드 (index.html의 style="font-size:1.3rem" 포함) */
.section h2[style],
.rank-col h2[style],
.digest-col h2[style] {
  font-family: var(--font-script) !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Weekly Spotlight 제목 */
.spotlight-section h2[style] {
  font-family: var(--font-script) !important;
  font-weight: 400 !important;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 라이벌 매치 h2 — 다크 배경이므로 흰색 계열 유지하되 폰트만 변경 */
.rival-section h2[style] {
  font-family: var(--font-script) !important;
  font-weight: 400 !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}

/* ========== HERO CARDS VISUAL ========== */
.hero-visual {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 440px;
}

.hero-mini-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.hero-mini-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.hmc1::before {
  background: linear-gradient(90deg, var(--pink), var(--purple));
}

.hmc2::before {
  background: linear-gradient(90deg, var(--cyan), var(--green));
}

.hmc3::before {
  background: linear-gradient(90deg, var(--orange), var(--gold));
}

.hmc4::before {
  background: linear-gradient(90deg, var(--purple), var(--cyan));
}

.hero-mini-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hmc-avatar {
  font-size: 28px;
  margin-bottom: 8px;
}

.hmc-name {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}

.hmc-meta {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 10px;
}

.hmc-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hmc-score {
  font-size: 20px;
  font-weight: 900;
  color: var(--pink);
}

.hmc-trend {
  font-size: 12px;
  font-weight: 700;
}

.hmc-trend.up {
  color: var(--pos);
}

.hmc-trend.down {
  color: var(--neg);
}

.hmc-bar-wrap {
  background: var(--bg2);
  border-radius: 3px;
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
}

.hmc-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pink), var(--purple));
  transition: width 1.2s ease;
}

/* ========== BUTTONS ========== */
.btn-primary {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  border: none;
  padding: 13px 28px;
  border-radius: 40px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  box-shadow: 0 6px 20px rgba(255, 45, 120, .35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 45, 120, .45);
}

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid #e5e7eb;
  padding: 13px 28px;
  border-radius: 40px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.btn-ghost:hover {
  border-color: var(--pink);
  color: var(--pink);
  transform: translateY(-1px);
}

.w100 {
  width: 100%;
  justify-content: center;
}

.mt8 {
  margin-top: 8px;
}

/* ========== AD ZONES (Legacy — 유지, 일부 서브페이지 호환) ========== */
.ad-zone {
  background: linear-gradient(90deg, #fff5fb, #f5f0ff, #f0faff);
  border-top: 1px solid #f0e8ff;
  border-bottom: 1px solid #f0e8ff;
}

.ad-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ad-label {
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* AdSense 실 광고가 없을 때 표시되는 fallback */
.ad-fallback {
  display: none;
  /* AdSense 로드 성공 시 숨김, JS에서 제어 */
  background: linear-gradient(135deg, rgba(255, 45, 120, .05), rgba(124, 58, 237, .05));
  border: 1.5px dashed rgba(124, 58, 237, .2);
  border-radius: 10px;
  text-align: center;
  color: var(--text3);
  font-size: 13px;
  align-items: center;
  justify-content: center;
}

.ad-leaderboard-fb {
  width: 728px;
  max-width: 100%;
  min-height: 90px;
  display: flex;
}

.ad-rect-fb {
  width: 300px;
  min-height: 250px;
  display: flex;
}

.ad-side-fb {
  width: 100%;
  min-height: 160px;
  display: flex;
}

/* ========== SPONSOR ZONES (AdBlock 회피용 신규 클래스) ========== */
/* [FIX] .ad-zone/.ad-inner는 EasyList 광고차단 필터에 의해 차단됨
   → .sponsor-banner/.sponsor-wrap으로 이름 변경하여 필터 회피 */
.sponsor-banner {
  background: linear-gradient(90deg, #fff5fb, #f5f0ff, #f0faff);
  border-top: 1px solid #f0e8ff;
  border-bottom: 1px solid #f0e8ff;
  width: 100%;
  overflow: hidden; /* 모바일에서 광고 넘침 방지 */
}

.sponsor-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* 모바일: 패딩 줄여 광고 영역 최대화 */
@media (max-width: 768px) {
  .sponsor-wrap {
    padding: 10px 12px;
  }
}

.sponsored-label {
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 사이드바 광고 컨테이너 */
.sponsor-side {
  min-height: 160px;
  overflow: hidden;
}


/* ========== AI 동향 다이제스트 ========== */
.digest-section {
  background: linear-gradient(135deg, #fff8fd 0%, #f4f6ff 100%);
}

.digest-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

/* 메인 기사 카드 */
.digest-article {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1.5px solid rgba(255, 45, 120, .12);
  box-shadow: var(--shadow);
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
}

.digest-article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan));
}

.digest-article-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.digest-category {
  background: linear-gradient(135deg, rgba(255, 45, 120, .1), rgba(124, 58, 237, .1));
  color: var(--pink);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.digest-date {
  font-size: 12px;
  color: var(--text3);
  margin-left: auto;
}

.digest-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: -.5px;
  margin-bottom: 16px;
}

.digest-body {
  font-size: 14px;
  line-height: 1.95;
  color: var(--text2);
  border-left: 3px solid rgba(255, 45, 120, .2);
  padding-left: 16px;
}

.digest-body strong {
  color: var(--pink);
  font-weight: 800;
}

.digest-article-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}

.digest-ai-tag {
  font-size: 11px;
  background: #f0fdf4;
  color: #065f46;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 700;
}

.digest-disclaimer {
  font-size: 11px;
  color: var(--text3);
}

/* 스탯 카드 그리드 */
.digest-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.digest-stat-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1.5px solid #f0f0f0;
  padding: 16px 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.digest-stat-card:hover {
  border-color: rgba(255, 45, 120, .25);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.dsc-icon {
  font-size: 22px;
  margin-bottom: 6px;
}

.dsc-label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}

.dsc-celeb {
  font-size: clamp(10px, 1.8vw, 13px);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.dsc-value {
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 900;
  color: var(--pink);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.dsc-sub {
  font-size: 10px;
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* 로딩 스피너 */
.digest-loading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 40px 32px;
  color: var(--text2);
  font-size: 14px;
}

.digest-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(255, 45, 120, .2);
  border-top-color: var(--pink);
  animation: spin .8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Powered 배지 줄 */
.digest-powered {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 10px 16px;
  background: rgba(124, 58, 237, .04);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(124, 58, 237, .1);
}

.digest-ai-badge {
  font-size: 12px;
  color: var(--purple);
  font-weight: 700;
}

.digest-update-time {
  font-size: 12px;
  color: var(--text3);
}

.digest-refresh-btn {
  margin-left: auto;
  background: transparent;
  cursor: pointer;
  border: 1.5px solid rgba(124, 58, 237, .25);
  color: var(--purple);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  transition: var(--transition);
}

.digest-refresh-btn:hover {
  background: var(--purple);
  color: #fff;
}

/* 반응형 */
@media (max-width: 1100px) {
  .digest-wrap {
    grid-template-columns: 1fr;
  }

  .digest-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 700px) {
  .digest-stats {
    grid-template-columns: 1fr 1fr;
  }

  .digest-article {
    padding: 20px 18px;
  }
}

/* 초소형(≤480px) 스탯카드: 폰트·패딩 추가 축소 */
@media (max-width: 480px) {
  .digest-stat-card {
    padding: 12px 8px;
  }

  .dsc-icon {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .dsc-label {
    font-size: 9px;
    letter-spacing: .2px;
  }

  .dsc-celeb {
    font-size: 11px;
  }

  .dsc-value {
    font-size: 14px;
  }
}





/* ========== SECTIONS ========== */
.section {
  padding: 72px 0;
}

.section-alt {
  background: var(--surface2);
}

.section-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 28px;
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-label {
  display: inline-block;
  background: linear-gradient(135deg, rgba(255, 45, 120, .1), rgba(124, 58, 237, .1));
  color: var(--pink);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 12px;
}

.section-header h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: 10px;
  color: var(--text);
}

.section-sub {
  color: var(--text2);
  font-size: 14px;
  line-height: 1.7;
}

/* ========== FILTER TABS ========== */
.filter-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.ftab {
  padding: 8px 22px;
  border-radius: 30px;
  border: 1.5px solid #e5e7eb;
  background: var(--surface);
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.ftab:hover {
  border-color: var(--pink);
  color: var(--pink);
}

.ftab.active {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 45, 120, .3);
}

/* ========== RANKING — 이미지 퍼스트 그리드 ========== */
.ranking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 16px;
}

/* 태블릿 (900px 이하) */
@media (max-width: 900px) {
  .ranking-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(165px, 100%), 1fr));
    gap: 12px;
  }
}

/* 모바일 (600px 이하): 3열 고정 */
@media (max-width: 600px) {
  .ranking-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

/* 소형 (400px 이하): 2열 */
@media (max-width: 400px) {
  .ranking-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
  }
}

/* ===== rank-card-visual — 이미지 퍼스트 카드 ===== */
.rank-card.rank-card-visual {
  padding: 0;
  display: block;
  align-items: unset;
  gap: unset;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}

.rank-card.rank-card-visual:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 40px rgba(255, 45, 120, .18);
  border-color: rgba(255, 45, 120, .35);
}

/* TOP3 금은동 테두리 */
.rank-card.rank-card-visual.rcv-top3:nth-child(1) { border-color: rgba(245, 158, 11, .55); }
.rank-card.rank-card-visual.rcv-top3:nth-child(2) { border-color: rgba(156, 163, 175, .65); }
.rank-card.rank-card-visual.rcv-top3:nth-child(3) { border-color: rgba(180, 83, 9, .45); }

/* 썸네일 래퍼 */
.rcv-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 12;   /* 세로형 포스터 비율 */
  background: linear-gradient(135deg, #1a0a14, #1a0e2a);
  overflow: hidden;
}

/* 썸네일 이미지 */
.rcv-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.rank-card.rank-card-visual:hover .rcv-img {
  transform: scale(1.06);
}

/* 이모지 fallback */
.rcv-emoji-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(36px, 6vw, 56px);
  background: linear-gradient(135deg, #ffe0ee, #ede9fe);
}

/* 랭크 뱃지 (왼쪽 상단) */
.rcv-rank-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: -.3px;
  line-height: 1.4;
  z-index: 2;
}

.rcv-rank-badge.rcv-rank-top3 {
  font-size: 18px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, .45);
}

/* HOT 뱃지 (오른쪽 상단) */
.rcv-hot-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  background: linear-gradient(135deg, #ff2d78, #ff6b2d);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 8px;
  letter-spacing: .3px;
  z-index: 2;
}

/* YouTube 뱃지 (왼쪽 하단) */
.rcv-yt-badge {
  position: absolute;
  bottom: 36px;
  left: 7px;
  background: #ff0000;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: .2px;
  z-index: 2;
}

/* 점수 오버레이 (하단 그라디언트) */
.rcv-score-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 8px 7px;
  background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.rcv-score-val {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.3px;
}

.rcv-change {
  font-size: 11px;
  font-weight: 700;
}

.rcv-change.up   { color: #6ee7b7; }
.rcv-change.down { color: #fca5a5; }
.rcv-change.same { color: rgba(255,255,255,.6); }

/* 핀 버튼 */
.rcv-pin-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  background: rgba(0, 0, 0, .5);
  border: none;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background .2s;
  backdrop-filter: blur(4px);
}

.rcv-pin-btn.pinned { color: #fbbf24; }
.rcv-pin-btn:hover  { background: rgba(255, 45, 120, .7); }

/* HOT 뱃지 있을 때 핀 버튼은 아래로 */
.rcv-hot-badge ~ .rcv-pin-btn { top: 32px; }

/* 카드 하단 정보 */
.rcv-body {
  padding: 8px 9px 10px;
}

.rcv-name {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.rcv-nation {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 모바일 (600px 이하): 카드 내부 폰트 축소 */
@media (max-width: 600px) {
  .rcv-rank-badge     { font-size: 11px; padding: 2px 6px; }
  .rcv-rank-badge.rcv-rank-top3 { font-size: 16px; }
  .rcv-score-val      { font-size: 11px; }
  .rcv-change         { font-size: 10px; }
  .rcv-name           { font-size: 12px; }
  .rcv-nation         { font-size: 10px; }
  .rcv-body           { padding: 6px 7px 8px; }
}

/* 소형 (400px 이하) */
@media (max-width: 400px) {
  .rcv-name  { font-size: 11px; }
  .rcv-body  { padding: 5px 6px 7px; }
}



.rank-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.rank-card:hover {
  border-color: rgba(255, 45, 120, .3);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(255, 45, 120, .12);
}

.rank-card:nth-child(1) {
  border-color: rgba(245, 158, 11, .4);
  background: linear-gradient(135deg, #fffbeb, #fff);
}

.rank-card:nth-child(2) {
  border-color: rgba(156, 163, 175, .5);
  background: linear-gradient(135deg, #f9fafb, #fff);
}

.rank-card:nth-child(3) {
  border-color: rgba(180, 83, 9, .3);
  background: linear-gradient(135deg, #fff7ed, #fff);
}

.rank-num {
  font-size: 26px;
  font-weight: 900;
  min-width: 52px;
  /* 3자리(100위+) 숫자 잘림 방지 */
  text-align: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rank-num.top1 {
  font-size: 32px;
}

.rank-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe0ee, #ede9fe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 45, 120, .15);
}

.rank-info {
  flex: 1;
  min-width: 0;
}

.rank-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
}

.rank-nation {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 8px;
}

.rank-bar-wrap {
  background: var(--bg2);
  border-radius: 4px;
  height: 5px;
  overflow: hidden;
}

.rank-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--pink), var(--purple));
  transition: width 1s ease;
}

.rank-score {
  text-align: right;
  min-width: 64px;
}

.rank-score-num {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
}

.rank-change {
  font-size: 12px;
  font-weight: 700;
}

.rank-change.up {
  color: var(--pos);
}

.rank-change.down {
  color: var(--neg);
}

.rank-change.same {
  color: var(--text3);
}

.rank-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: .5px;
}

.rank-medal {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 20px;
}

/* ========== FEED — 그리드 레이아웃 ========== */
.feed-page-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px;
  align-items: start;
}

/* ★ 피드 2~3열 그리드 ★ */
.feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 1200px) {
  .feed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 태블릿/모바일: 1열 풀폭 카드 */
@media (max-width: 720px) {
  .feed-grid {
    grid-template-columns: 1fr;
  }
}

.feed-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1.5px solid #f0f0f0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition);
}

.feed-card:hover {
  border-color: rgba(255, 45, 120, .25);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.feed-card-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f9f9f9;
}

.feed-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe0ee, #ede9fe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.feed-celeb-name {
  font-weight: 800;
  font-size: 14px;
}

.feed-platform-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  margin-top: 2px;
  letter-spacing: .3px;
}

.pt-instagram {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743);
  color: #fff;
}

.pt-twitter {
  background: #1d9bf0;
  color: #fff;
}

.pt-youtube {
  background: #ff0000;
  color: #fff;
}

.pt-tiktok {
  background: #010101;
  color: #fff;
}

.feed-handle {
  font-size: 12px;
  color: var(--text3);
}

.feed-handle-link {
  font-size: 12px;
  color: var(--pink);
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s;
}

.feed-handle-link:hover {
  opacity: .75;
  text-decoration: underline;
}

.feed-sns-link-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  padding: 3px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  letter-spacing: .2px;
}

.feed-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--text3);
  white-space: nowrap;
}

.feed-body {
  padding: 16px 18px;
}

.feed-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 12px;
}

.feed-translate {
  background: linear-gradient(135deg, #f5f3ff, #edf9ff);
  border: 1px solid #e4daff;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: #6d28d9;
  margin-bottom: 12px;
  line-height: 1.6;
}

.feed-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.feed-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text2);
}

.feed-sentiment-pill {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.pill-pos {
  background: #d1fae5;
  color: #065f46;
}

.pill-neg {
  background: #fee2e2;
  color: #991b1b;
}

.pill-neu {
  background: #f3f4f6;
  color: #374151;
}

/* ---- 피드 이미지 ---- */
.feed-text-area {
  padding: 14px 18px 10px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.75;
}

.feed-handle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.feed-handle {
  font-size: 12px;
  color: var(--text3);
  font-weight: 500;
}

.feed-header-info {
  flex: 1;
  min-width: 0;
}

.feed-img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--bg2);
  max-height: 420px;
}

.feed-img {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 420px;
  transition: transform 0.4s ease;
}

.feed-card:hover .feed-img {
  transform: scale(1.02);
}

.feed-img-overlay {
  position: absolute;
  bottom: 12px;
  right: 12px;
}

.feed-sentiment-badge {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* ---- 액션 버튼 ---- */
.feed-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-top: 1px solid #f9f9f9;
}

.feed-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  transition: var(--transition);
  text-decoration: none;
}

.feed-action-btn:hover {
  background: var(--bg2);
  color: var(--pink);
}

.feed-action-btn.liked {
  color: #dc2626;
}

.feed-link {
  margin-left: auto;
  color: var(--purple);
  font-weight: 700;
}

.feed-link:hover {
  background: rgba(124, 58, 237, .08);
  color: var(--purple);
}

/* ---- 토픽 랭크 ---- */
.topic-rank {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- 피드 해시태그 ---- */
.feed-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px 4px;
}

.feed-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 45, 120, .07), rgba(124, 58, 237, .07));
  border: 1px solid rgba(124, 58, 237, .15);
  color: var(--purple);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}

.feed-tag:hover {
  background: linear-gradient(135deg, rgba(255, 45, 120, .15), rgba(124, 58, 237, .15));
  border-color: var(--purple);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(124, 58, 237, .2);
}

.feed-tag.active-tag {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(255, 45, 120, .3);
}

/* ---- 태그 필터 배너 ---- */
.tag-filter-banner {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(255, 45, 120, .08), rgba(124, 58, 237, .08));
  border: 1.5px solid rgba(124, 58, 237, .2);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 13px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.tag-filter-clear {
  margin-left: auto;
  background: transparent;
  border: 1.5px solid rgba(124, 58, 237, .3);
  color: var(--purple);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition);
}

.tag-filter-clear:hover {
  background: var(--purple);
  color: #fff;
}



/* ========== SIDEBAR ========== */
.feed-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1.5px solid #f0f0f0;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.sidebar-card h4 {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--text);
}

.topic-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
}

.topic-item:last-child {
  border: none;
}

.topic-tag {
  color: var(--purple);
  font-weight: 700;
}

.topic-count {
  color: var(--text3);
  font-size: 12px;
  background: var(--bg2);
  padding: 2px 8px;
  border-radius: 8px;
}

.pb-item {
  margin-bottom: 14px;
}

.pb-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 6px;
}

.pb-bar-wrap {
  background: var(--bg2);
  border-radius: 5px;
  height: 7px;
  overflow: hidden;
}

.pb-bar {
  height: 100%;
  border-radius: 5px;
}

.pb-ig {
  background: linear-gradient(90deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.pb-tw {
  background: #1d9bf0;
}

.pb-yt {
  background: #ff0000;
}

.pb-tk {
  background: linear-gradient(90deg, #69c9d0, #ee1d52);
}

/* ========== SENTIMENT ========== */
.sentiment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.sent-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1.5px solid #f0f0f0;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.sent-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(16, 185, 129, .3);
}

.sent-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.sent-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe0ee, #ede9fe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.sent-name {
  font-weight: 800;
  font-size: 15px;
}

.sent-nation {
  font-size: 12px;
  color: var(--text3);
}

.sent-meter {
  margin-bottom: 14px;
}

.sent-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 6px;
}

.sent-bar-wrap {
  background: var(--bg2);
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
  position: relative;
}

.sent-bar-pos {
  position: absolute;
  left: 0;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: width 1.5s ease;
}

.sent-bar-neg {
  position: absolute;
  right: 0;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #ef4444, #f87171);
  transition: width 1.5s ease;
}

.sent-score {
  font-size: 38px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 4px;
}

.sent-score-label {
  text-align: center;
  font-size: 12px;
  color: var(--text3);
}

.sent-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.sent-kw {
  background: var(--bg2);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
}

/* ========== FOOTER ========== */
.footer {
  background: #1a1a2e;
  padding: 48px 0 32px;
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 28px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.footer-brand-name {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  margin-bottom: 8px;
}

.footer-brand-name span {
  color: var(--pink);
}

.footer-brand p {
  color: #9ca3af;
  font-size: 13px;
  line-height: 1.7;
  max-width: 260px;
}

.footer-links-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-title {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.footer-links-group a {
  color: #d1d5db;
  text-decoration: none;
  font-size: 13px;
  transition: var(--transition);
}

.footer-links-group a:hover {
  color: var(--pink);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #6b7280;
}

/* ========== MODAL ========== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal-box {
  background: #fff;
  border-radius: 28px;
  padding: 40px 32px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .2);
  transform: scale(.95) translateY(16px);
  transition: transform .3s;
}

.modal-overlay.open .modal-box {
  transform: scale(1) translateY(0);
}

.modal-icon {
  font-size: 52px;
  margin-bottom: 16px;
}

.modal-box h3 {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--text);
}

.modal-box p {
  color: var(--text2);
  font-size: 14px;
  margin-bottom: 20px;
}

.modal-input {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 16px;
  outline: none;
  transition: border-color .2s;
}

.modal-input:focus {
  border-color: var(--pink);
}

.modal-celeb-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.mc-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #e5e7eb;
  background: var(--bg2);
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
}

.mc-chip.sel {
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(255, 45, 120, .08);
}

.mc-chip:hover {
  border-color: var(--pink);
}

/* ========== FAB ========== */
.fab-stack {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 500;
}

/* ── 모바일: FAB을 Anchor Ad 위로 올리기 ──
   Anchor Ad 높이 ~64px + 여유 14px = 78px
   (≤900px에서 body padding-bottom: 64px 적용 구간과 동일) */
@media (max-width: 900px) {
  .fab-stack {
    bottom: 78px;
  }
}


.fab {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.fab:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--shadow-lg);
}

.fab-kakao {
  background: #fee500;
  color: #333;
}

.fab-top {
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  border: 1.5px solid #e5e7eb;
}

/* ========== ADMIN ========== */
.admin-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 84px 28px 48px;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.admin-card {
  background: var(--surface);
  border: 1.5px solid #f0f0f0;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.admin-card h3 {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.kpi-item {
  background: var(--bg2);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.kpi-num {
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
}

.kpi-lab {
  font-size: 11px;
  color: var(--text3);
  margin-top: 4px;
  font-weight: 600;
}

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

.tl-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
}

.tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  margin-top: 5px;
  flex-shrink: 0;
}

.tl-time {
  color: var(--text3);
  min-width: 54px;
  font-weight: 600;
}

.tl-msg {
  color: var(--text2);
}

.gcp-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gcp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg2);
  border-radius: 12px;
  padding: 12px 16px;
}

.gcp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.gcp-badge {
  font-size: 11px;
  padding: 3px 12px;
  border-radius: 20px;
  font-weight: 700;
}

.badge-ok {
  background: #d1fae5;
  color: #065f46;
}

.badge-warn {
  background: #fef3c7;
  color: #92400e;
}

.badge-off {
  background: #fee2e2;
  color: #991b1b;
}

.revenue-chart {
  height: 120px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-top: 10px;
}

.rev-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rev-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--pink), var(--purple));
  border-radius: 4px 4px 0 0;
  transition: height 1s ease;
}

.rev-label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
}

.admin-full {
  grid-column: 1/-1;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th {
  padding: 12px 16px;
  text-align: left;
  color: var(--text3);
  font-weight: 700;
  border-bottom: 2px solid var(--bg2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--bg2);
  color: var(--text2);
}

.admin-table tr:hover td {
  background: var(--bg2);
}

.arch-diagram {
  overflow-x: auto;
  padding: 8px 0;
}

/* ========== 피드 이미지 — 그리드 카드에 맞게 컴팩트 ========== */
.feed-img {
  max-height: 200px;
}

.feed-img-wrap {
  max-height: 200px;
}

/* ========== 사이드바 — 구독 CTA ========== */
.notify-cta {
  background: linear-gradient(135deg, #fff0f6, #f0f4ff) !important;
  border: 1.5px solid rgba(255, 45, 120, .2) !important;
  text-align: center;
}

.notify-cta-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.notify-cta-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--text);
}

.notify-cta-sub {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* ========== 멀티플랫폼 알림 모달 ========== */
.notify-modal {
  max-width: 520px !important;
  padding: 36px 28px !important;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--bg2);
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--text2);
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--bg);
  color: var(--text);
}

.notify-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.notify-platform-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: 14px;
  border: 2px solid #e5e7eb;
  background: var(--surface);
  cursor: pointer;
  transition: var(--transition);
}

.notify-platform-btn:hover {
  border-color: var(--pink);
  background: rgba(255, 45, 120, .04);
}

.notify-platform-btn.active {
  border-color: var(--pink);
  background: rgba(255, 45, 120, .08);
  box-shadow: 0 4px 14px rgba(255, 45, 120, .2);
}

.np-icon {
  font-size: 24px;
}

.np-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.np-sub {
  font-size: 10px;
  color: var(--text3);
  font-weight: 500;
}

/* 플랫폼별 강조 색상 */
#np-kakao.active {
  border-color: #fee500;
  background: rgba(254, 229, 0, .08);
}

#np-telegram.active {
  border-color: #2AABEE;
  background: rgba(42, 171, 238, .08);
}

#np-line.active {
  border-color: #06C755;
  background: rgba(6, 199, 85, .08);
}

#np-whatsapp.active {
  border-color: #25D366;
  background: rgba(37, 211, 102, .08);
}

#np-email.active {
  border-color: var(--cyan);
  background: rgba(6, 182, 212, .08);
}

.modal-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 16px 0 8px;
}

/* 알림 빈도 */
.notify-freq {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.freq-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #e5e7eb;
  transition: var(--transition);
}

.freq-opt:has(input:checked) {
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(255, 45, 120, .06);
}

/* ========== FAB ========== */
.fab-notify {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1100px) {
  .hero-visual {
    display: none;
  }

  .feed-page-layout {
    grid-template-columns: 1fr;
  }

  .feed-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .hero-inner {
    flex-direction: column;
  }

  .hero-stats {
    flex-direction: column;
    gap: 0;
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
  }

  .stat-item:last-child {
    border: none;
  }

  .nav-links {
    display: none;
  }

  .feed-sidebar {
    grid-template-columns: 1fr;
  }

  .notify-platforms {
    grid-template-columns: repeat(2, 1fr);
  }

  .notify-freq {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ============================================================
   CELEB'S PICK ����
   ============================================================ */
.pick-section {
  background: linear-gradient(135deg, #fff8f0 0%, #fff0f8 100%);
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.pick-card {
  background: #fff;
  border-radius: 20px;
  padding: 22px 20px 18px;
  border: 1.5px solid #ffe0ee;
  box-shadow: 0 4px 20px rgba(255, 45, 120, .07);
  transition: transform .2s, box-shadow .2s;
}

.pick-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(255, 45, 120, .14);
}

.pick-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pick-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe0ee, #ede9fe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.pick-info {
  flex: 1;
  min-width: 0;
}

.pick-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  line-height: 1.2;
}

.pick-nation {
  font-size: 12px;
  color: var(--text3);
  font-weight: 400;
  margin-left: 4px;
}

.pick-prof-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--purple);
  background: rgba(124, 58, 237, .1);
  padding: 2px 10px;
  border-radius: 20px;
}

.pick-star {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(245, 158, 11, .12);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .5px;
}

.pick-reason-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--pink);
  background: rgba(255, 45, 120, .08);
  padding: 3px 12px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 10px;
}

.pick-why {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin: 0 0 14px;
}

.pick-sns-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pick-sns-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--purple);
  background: rgba(124, 58, 237, .08);
  padding: 5px 12px;
  border-radius: 20px;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.pick-sns-btn:hover {
  background: var(--purple);
  color: #fff;
}

/* ��ŷ �� �и��� */
.ftab-divider {
  margin-left: 10px;
  border-left: 2px solid #e5e7eb;
  padding-left: 14px !important;
}

@media (max-width: 600px) {
  .pick-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PWA Install Banner — 하단 고정, iOS Banner — 상단 고정
   ============================================================ */

/* Android/Chrome: 하단 설치 배너 */
.pwa-install-banner {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  z-index: 9999;
  background: linear-gradient(135deg, #ff2d78, #7c3aed);
  color: #fff;
  padding: 10px 16px;
  box-shadow: 0 -4px 20px rgba(255, 45, 120, .35);
  animation: slideUpBanner .3s ease;
}

@keyframes slideUpBanner {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* iOS Safari: 상단 설치 안내 배너 */
.pwa-ios-banner {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  height: auto;
  z-index: 9998;
  background: linear-gradient(135deg, #1e1e2e, #2d1b4e);
  color: #fff;
  padding: 10px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
  animation: slideDownBanner .3s ease;
}

@keyframes slideDownBanner {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.pwa-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

.pwa-banner-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.pwa-banner-text {
  flex: 1;
}

.pwa-banner-text strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

.pwa-banner-text span {
  font-size: 12px;
  opacity: .85;
}

.pwa-install-btn {
  background: #fff;
  color: #ff2d78;
  border: none;
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform .15s;
}

.pwa-install-btn:hover {
  transform: scale(1.05);
}

.pwa-dismiss-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .7);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}

.pwa-dismiss-btn:hover {
  color: #fff;
}

/* �׺� ���� ��ư */
.nav-share-btn {
  background: rgba(255, 45, 120, .12);
  color: var(--pink);
  border: 1.5px solid rgba(255, 45, 120, .25);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.nav-share-btn:hover {
  background: var(--pink);
  color: #fff;
}

/* ���� ��� */
.share-modal {
  max-width: 360px;
  text-align: center;
}

.share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 16px;
  border: 1.5px solid #f0f0f0;
  background: #fafafa;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  transition: all .15s;
}

.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.share-icon {
  font-size: 26px;
}

.share-kakao {
  border-color: #fee500;
}

.share-kakao:hover {
  background: #fee500;
  color: #3b1212;
}

.share-twitter {
  border-color: #1d9bf0;
}

.share-twitter:hover {
  background: #1d9bf0;
  color: #fff;
}

.share-facebook {
  border-color: #1877f2;
}

.share-facebook:hover {
  background: #1877f2;
  color: #fff;
}

.share-line {
  border-color: #06c755;
}

.share-line:hover {
  background: #06c755;
  color: #fff;
}

.share-copy {
  border-color: var(--purple);
}

.share-copy:hover {
  background: var(--purple);
  color: #fff;
}

.share-native {
  border-color: var(--pink);
}

.share-native:hover {
  background: var(--pink);
  color: #fff;
}

/* ��� Ȱ��ȭ */
.modal-overlay.active {
  display: flex;
}

@media (max-width: 480px) {

  .pwa-install-banner,
  .pwa-ios-banner {
    padding: 8px 12px;
  }

  .pwa-banner-text strong {
    font-size: 13px;
  }

  .pwa-banner-text span {
    font-size: 11px;
  }
}

/* ===== 2컬럼: 랭킹 + 다이제스트 나란히 ===== */
.rank-digest-row {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: start;
}

.rank-col {
  min-width: 0;
}

.digest-col {
  min-width: 0;
}

/* 태블릿/모바일: 1열 전환 (1100px 기준으로 통일) */
@media (max-width: 1100px) {
  .rank-digest-row {
    grid-template-columns: 1fr;
  }
}

/* ===== 컴팩트 랭킹 카드 (visual 카드 제외) ===== */
.ranking-grid.compact .rank-card:not(.rank-card-visual) {
  padding: 10px 14px;
  gap: 10px;
}

.ranking-grid.compact .rank-avatar {
  font-size: 1.4rem;
  width: 36px;
}

.ranking-grid.compact .rank-name {
  font-size: 0.88rem;
}

.ranking-grid.compact .rank-nation {
  font-size: 0.72rem;
}

.ranking-grid.compact .rank-score-num {
  font-size: 1rem;
}

.ranking-grid.compact .rank-bar-wrap {
  height: 3px;
}

/* ===== pick-reason 배지 (눈에 잘 띄게) ===== */
.pick-reason-tag {
  display: inline-block;
  background: linear-gradient(90deg, #ff2d78, #a855f7);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 10px;
  border-radius: 99px;
  margin-bottom: 10px;
}

/* ===== 스켈레톤 로딩 ===== */
.skel-box {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s infinite;
  border-radius: 6px;
}

@keyframes skel-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.rank-card.skeleton,
.feed-card.skeleton {
  pointer-events: none;
  opacity: .7;
}

/* ===== 피드 그리드 더 넓게 (4열 지원) ===== */
@media (min-width: 1400px) {
  .feed-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ================================================================
   REDESIGN 2026-02-24  대시보드 개편 추가 스타일
   ================================================================ */

/*  이중 필터 (대시보드 랭킹용)  */
.dual-filter-compact {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dfc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dfc-label {
  font-size: .68rem;
  font-weight: 800;
  color: var(--text3);
  letter-spacing: .08em;
  white-space: nowrap;
  min-width: 30px;
}

/*  더보기 버튼  */
.section-more-btn {
  text-align: center;
  margin-top: 20px;
}

.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 24px;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  transition: all .2s;
  cursor: pointer;
  background: #fff;
}

.btn-more:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

/*  Pick 인라인 삽입 섹션  */
.pick-inline-section {
  background: linear-gradient(90deg, #fff9fe, #f5f3ff);
  padding: 20px 0;
}

.pick-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pick-inline-label {
  font-size: .72rem;
  font-weight: 900;
  color: #7c3aed;
  background: #f5f3ff;
  border: 1.5px solid #7c3aed;
  padding: 3px 12px;
  border-radius: 12px;
  letter-spacing: .05em;
}

.pick-inline-more {
  font-size: .8rem;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.pick-inline-more:hover {
  text-decoration: underline;
}

/* Pick 인라인 카드 (수평 스크롤) */
.pick-inline-cards {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.pick-inline-cards::-webkit-scrollbar {
  height: 4px;
}

.pick-inline-cards::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 4px;
}

.pick-inline-card {
  flex-shrink: 0;
  width: 280px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(124, 58, 237, .08);
  border: 1px solid #ede9fe;
  position: relative;
}

.pick-inline-card::after {
  content: "'s Pick";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: .6rem;
  font-weight: 900;
  color: #7c3aed;
  background: #f5f3ff;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid #7c3aed;
}

.pic-name {
  font-weight: 800;
  font-size: .95rem;
}

.pic-reason {
  font-size: .78rem;
  color: #7c3aed;
  margin: 6px 0;
}

.pic-why {
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.6;
}

/*  Pick 사이드바  */
.pick-sidebar-card {
  position: relative;
}

.pick-sidebar-label {
  display: inline-block;
  margin-bottom: 10px;
  font-size: .65rem;
  font-weight: 900;
  color: #7c3aed;
  background: #f5f3ff;
  border: 1.5px solid #7c3aed;
  padding: 2px 10px;
  border-radius: 10px;
}

.pick-more-link {
  display: block;
  margin-top: 10px;
  font-size: .78rem;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

/*  Pick 섹션 타이틀  */
.pick-section-title-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.pick-section-tic {
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--text3);
}

.pick-section-main {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--text1);
}

/*  피드 사진 강조  */
.feed-img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  max-height: 320px;
  display: block;
  transition: opacity .2s;
}

.feed-img:hover {
  opacity: .92;
}

.feed-img-wrap {
  position: relative;
  margin: 10px 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.feed-img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, transparent 100%);
}

.feed-sns-link-badge {
  font-size: .72rem;
  color: rgba(255, 255, 255, .9);
  font-weight: 600;
  background: rgba(255, 255, 255, .15);
  padding: 3px 8px;
  border-radius: 8px;
}

/*  피드 "전체 접기" 시 10개만 노출  */
.feed-card.feed-hidden {
  display: none;
}

/*  Sentiment 상위 10개 제한 (11번째부터 숨김은 JS 처리)  */


/* ================================================================
   무한 순환 스크롤 배치 스타일
   ================================================================ */
.infinite-batch {
  animation: fadeInBatch .4s ease;
}

@keyframes fadeInBatch {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 배치 구분선 */
.infinite-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.infinite-divider::before,
.infinite-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
}

.infinite-divider-label {
  font-size: .72rem;
  font-weight: 800;
  color: var(--text3);
  letter-spacing: .1em;
  white-space: nowrap;
  background: #f8fafc;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
}

/* 센티넬 로딩 점 */
#infiniteSentinel {
  transition: opacity .3s;
}

/* nav 전용 페이지 링크 (ranking/picks) */
.nav-link-page {
  background: linear-gradient(90deg, #ff2d78, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700 !important;
}

.nav-link-page:hover {
  opacity: .8;
}

/* ================================================================
   스파크라인 & 랭크카드 개선 (20260224b)
   ================================================================ */

/* 랭크카드: 스파크라인 열 추가 */
.rank-card {
  display: grid;
  grid-template-columns: 44px 46px 1fr 76px 60px;
  align-items: center;
  gap: 8px;
}

/* 스파크라인 컨테이너 */
.rank-sparkline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.sparkline-svg {
  display: block;
  overflow: visible;
}

/* 상위 3위 금/은/동 아이콘 크기 */
.rank-num.topN {
  font-size: 1.4rem;
  text-align: center;
}

/* 태블릿 (768px 이하) — 랭크카드 세로 레이아웃 전환 */
@media (max-width: 768px) {
  .rank-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    padding: 14px 6px 12px;
    gap: 5px;
  }

  .rank-num {
    min-width: auto !important;
    font-size: 15px !important;
    order: 1;
  }

  .rank-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    order: 2;
  }

  .rank-info {
    order: 3;
    width: 100%;
    overflow: hidden;
  }

  .rank-name {
    font-size: .75rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100%;
  }

  /* 공간 확보: 국적·바·스파크라인 숨김 */
  .rank-nation,
  .rank-bar-wrap {
    display: none !important;
  }

  .rank-sparkline {
    display: none !important;
  }

  .rank-score {
    order: 4;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 4px;
    align-items: baseline;
  }

  .rank-score-num {
    font-size: .82rem !important;
  }

  .rank-change {
    font-size: .65rem !important;
  }

  .pin-btn {
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    font-size: .7rem;
  }

  .rank-badge {
    font-size: .55rem;
    padding: 1px 5px;
  }
}

/* 소형 모바일 (480px 이하) — 더 작은 버전 */
@media (max-width: 480px) {
  .rank-card {
    padding: 10px 4px 8px;
    gap: 3px;
  }

  .rank-num {
    font-size: 13px !important;
  }

  .rank-avatar {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
  }

  .rank-name {
    font-size: .68rem !important;
  }

  .rank-score-num {
    font-size: .75rem !important;
  }
}

/* ============================================================
   v20260226  Design Polish
   1. Hero title 세련화  2. Hero card 이미지  3. Feed stats 정렬  4. 모바일 rank 겹침 수정
   ============================================================ */

/*  1. Hero 타이포그래피  */
.hero-title {
  font-family: var(--font-script) !important;
  font-size: clamp(56px, 7vw, 96px) !important;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 55%, #4f46e5 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 12px !important;
  filter: drop-shadow(0 2px 8px rgba(255, 45, 120, 0.18));
}

.hero-sub {
  font-size: clamp(15px, 2vw, 18px) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.6;
  margin-bottom: 28px !important;
}

/*  2. Hero 미니카드  이미지 버전  */
.hero-mini-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-height: 200px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-mini-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}

/* 이미지 래퍼 */
.hmc-img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hmc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hmc-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.18) 55%, transparent 100%);
}

/* 이모지 폴백 */
.hmc-avatar-fb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  opacity: 0.6;
}

/* 텍스트 정보 레이어 (이미지 위) */
.hmc-info {
  position: relative;
  z-index: 2;
  padding: 14px 14px 12px;
}

.hmc-rank-badge {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.hmc-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hmc-meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 6px;
}

.hmc-score-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.hmc-score {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--primary, #ff2d78);
  text-shadow: 0 0 12px rgba(255, 45, 120, 0.5);
}

.hmc-trend {
  font-size: 0.75rem;
  font-weight: 700;
}

.hmc-trend.up {
  color: #4ade80;
}

.hmc-trend.down {
  color: #f87171;
}

.hmc-trend.same {
  color: #94a3b8;
}

/*  3. Feed 하단 스탯 줄맞춤  */
.feed-stats {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 8px !important;
}

.feed-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 4px 8px !important;
  font-size: 0.78rem !important;
  border-radius: 6px !important;
}

.feed-stat-icon {
  font-size: 0.9em;
  line-height: 1;
  display: inline-block;
}

.feed-stat-val {
  font-size: 0.78rem;
  line-height: 1;
}

/*  4. 모바일 랭킹  이모티콘/번호 겹침 방지  */
@media (max-width: 640px) {
  .rank-card {
    grid-template-columns: 28px 32px 1fr auto !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    align-items: center !important;
  }

  .rank-num {
    font-size: 0.7rem !important;
    min-width: 26px !important;
    text-align: center !important;
    position: static !important;
    z-index: auto !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
  }

  .rank-num.topN {
    font-size: 1.1rem !important;
    min-width: 26px !important;
  }

  .rank-avatar {
    font-size: 1.3rem !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    position: static !important;
  }

  .rank-badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    font-size: 0.55rem !important;
    padding: 1px 4px !important;
    z-index: 3 !important;
  }

  .rank-info {
    min-width: 0;
    overflow: hidden;
  }

  .rank-name {
    font-size: 0.82rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rank-nation {
    font-size: 0.65rem !important;
  }

  .rank-sparkline {
    display: none !important;
  }

  .rank-score-num {
    font-size: 0.9rem !important;
  }

  .rank-change {
    font-size: 0.65rem !important;
  }
}

/* ============================================================
   v20260226d  Hero 타이틀 가시성 + 글로벌 뉴스 섹션
   ============================================================ */

/*  hero-title 색상 강화 (흰색 배경 위에서도 선명하게)  */
.hero-title {
  font-family: var(--font-script) !important;
  font-size: clamp(56px, 7vw, 96px) !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  line-height: 1.1 !important;
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 55%, #4f46e5 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 14px !important;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 24px rgba(255, 45, 120, 0.22));
}

/*  LIVE 배지 스타일  */
.live-dot {
  font-size: 0.72rem !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff !important;
  background: linear-gradient(90deg, #ef4444, #f97316);
  padding: 3px 8px;
  border-radius: 20px;
  animation: livePulse 1.4s ease-in-out infinite;
  display: inline-block;
}

@keyframes livePulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/*  글로벌 뉴스 섹션  */
.gnews-section {
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.gnews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.gnews-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 12px 14px;
  transition: background 0.2s, transform 0.2s;
  cursor: default;
}

.gnews-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.gnews-flag {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.gnews-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.gnews-celeb {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary, #ff2d78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gnews-headline {
  font-size: 0.82rem;
  color: var(--text1, #f1f5f9);
  line-height: 1.45;
  word-break: break-word;
}

.gnews-loading {
  color: var(--text2, #94a3b8);
  font-size: 0.85rem;
  padding: 20px;
  text-align: center;
  grid-column: 1/-1;
}

@media (max-width: 600px) {
  .gnews-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Rank Card Photo Avatar (YouTube � ������ ���� ����)
   ============================================================ */
.rank-avatar-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.rank-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   WORLD PRESS — 글로벌 뉴스 섹션 (재설계 v20260227)
   ============================================================ */
.gnews-lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .73rem;
  font-weight: 700;
  color: var(--accent, #ff2d78);
  background: rgba(255, 45, 120, .08);
  border: 1.5px solid rgba(255, 45, 120, .2);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 18px;
}

.gnews-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.gnews-link,
.gnews-link-disabled {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  transition: transform .18s, box-shadow .18s;
}

.gnews-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(255, 45, 120, .14);
}

.gnews-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #f1f5f9);
  border-radius: 14px;
  padding: 14px 16px;
  height: 100%;
  box-sizing: border-box;
  transition: border-color .18s;
}

.gnews-link:hover .gnews-item {
  border-color: rgba(255, 45, 120, .35);
}

.gnews-flag-col {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2, #f8fafc);
  border-radius: 10px;
}

.gnews-flag {
  font-size: 1.4rem;
  line-height: 1;
}

.gnews-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gnews-celeb-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.gnews-emoji {
  font-size: .95rem;
}

.gnews-celeb {
  font-size: .82rem;
  font-weight: 800;
  color: var(--text, #1a1a2e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.gnews-source {
  font-size: .68rem;
  color: var(--text3, #94a3b8);
  background: var(--surface2, #f1f5f9);
  padding: 1px 7px;
  border-radius: 8px;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.gnews-headline {
  font-size: .83rem;
  font-weight: 500;
  color: var(--text, #1e293b);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gnews-read-more {
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent, #ff2d78);
  margin-top: 2px;
}

.gnews-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--text3, #94a3b8);
}

@media (max-width: 640px) {
  .gnews-articles {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PATCH 20260227 — nav-admin, mobile fix
   ============================================================ */

/* 관리자 링크: 모바일에서 숨김 */
@media (max-width: 768px) {
  .nav-admin {
    display: none !important;
  }
}

/* 데스크탑에서는 작고 조용하게 */
.nav-admin {
  font-size: 12px !important;
  opacity: 0.55;
  padding: 4px 10px !important;
}

.nav-admin:hover {
  opacity: 1;
}

/* ============================================================
   PATCH 20260228 — 중복 PWA 블록 제거 (2411번줄로 통합)
   ============================================================ */

/* ============================================================
   PATCH 20260228-v31 — 랭킹 페이지네이션
   ============================================================ */
/* 페이저 전체 래퍼 */
.rank-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0 8px;
}

/* 상단 행: ◀ [점프버튼들] ▶ */
.rank-pager-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 이전/다음 버튼 */
.rank-pager-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 18px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, opacity .2s;
  font-family: inherit;
  flex-shrink: 0;
}

.rank-pager-btn:hover:not(:disabled) {
  background: #d4165f;
}

.rank-pager-btn:disabled {
  background: #e5e7eb;
  color: #aaa;
  cursor: default;
}

/* 점프 버튼 묶음 */
.rank-pager-jumps {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 개별 점프 버튼 (e.g. "1위", "21위") */
.rank-pager-jump {
  background: var(--surface);
  color: var(--text2);
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  padding: 5px 13px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
  font-family: inherit;
  white-space: nowrap;
}

.rank-pager-jump:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(255, 45, 120, .05);
}

/* 현재 페이지 강조 */
.rank-pager-jump.active {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(255, 45, 120, .3);
}

/* … 구분자 */
.rank-pager-ellipsis {
  color: var(--text3);
  font-size: .85rem;
  padding: 0 2px;
  user-select: none;
}

/* 하단 행: "N–M위 표시 중 / 전체 K명" */
.rank-pager-info {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text2);
  text-align: center;
}

/* 모바일: 점프 버튼 6px 더 작게 */
@media (max-width: 600px) {
  .rank-pager-jump {
    padding: 4px 10px;
    font-size: .72rem;
  }

  .rank-pager-btn {
    padding: 6px 14px;
  }
}


/* ============================================================
   셀럽 상세 슬라이드인 패널 — cpanel
   ============================================================ */

/* 오버레이 */
.cpanel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.cpanel-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* 패널 본체 */
.cpanel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100vw;
  height: 100dvh;
  overflow-y: auto;
  background: #fff;
  z-index: 1101;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22, .68, 0, 1.2);
  box-shadow: -8px 0 40px rgba(0, 0, 0, .18);
  overscroll-behavior: contain;
  padding-bottom: 60px;  /* sticky 힌트바 높이만큼 확보 */
}

.cpanel.active {
  transform: translateX(0);
}

.cpanel-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  padding: 14px 16px 12px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: flex-end;
  z-index: 10;
}

.cpanel-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.cpanel-close:hover {
  background: #e2e8f0;
}

.cpanel-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, #fdf2f8, #f5f3ff);
  border-bottom: 1px solid #f1f5f9;
}

.cpanel-avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
}

.cpanel-hero-info {
  flex: 1;
  min-width: 0;
}

.cpanel-rank {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text3);
  margin-bottom: 2px;
}

.cpanel-name {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
  word-break: keep-all;
}

.cpanel-sub {
  font-size: .8rem;
  color: var(--text3);
  margin-top: 3px;
}

.cpanel-hot {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 5px;
}

.cpanel-score-col {
  text-align: center;
  flex-shrink: 0;
}

.cpanel-score-num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}

.cpanel-section {
  padding: 16px 20px;
  border-bottom: 1px solid #f8fafc;
}

.cpanel-section-title {
  font-size: .78rem;
  font-weight: 800;
  color: var(--text3);
  letter-spacing: .06em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.cpanel-score-bar-wrap {
  height: 8px;
  background: #f1f5f9;
  border-radius: 8px;
  overflow: hidden;
}

.cpanel-score-bar-fill {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent), #7c3aed);
  transition: width .6s ease;
}

.cpanel-score-label {
  text-align: right;
  font-size: .75rem;
  color: var(--text3);
  margin-top: 4px;
}

.cpanel-sent-row {
  display: flex;
  gap: 12px;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.cpanel-sent-bar {
  width: 100%;
  height: 10px;
  border-radius: 6px;
  background: #f1f5f9;
  overflow: hidden;
  display: flex;
}

.cpanel-kw-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cpanel-kw {
  background: #f1f5f9;
  color: var(--text2);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: .78rem;
  font-weight: 600;
}

.cpanel-sns-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cpanel-sns-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  transition: all .2s;
  white-space: nowrap;
}

.cpanel-sns-btn:hover {
  background: var(--accent);
  color: #fff;
}

.cpanel-news-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 8px;
  text-decoration: none;
  border-left: 3px solid var(--accent);
  transition: background .15s;
}

.cpanel-news-item:hover {
  background: #fdf2f8;
}

.cpanel-news-platform {
  font-size: .68rem;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.cpanel-news-text {
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.5;
}

.cpanel-news-empty {
  color: var(--text3);
  font-size: .82rem;
  padding: 8px 0;
}

.cpanel-rivals-row {
  display: flex;
  gap: 12px;
}

.cpanel-rival {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: #f8fafc;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, transform .15s;
  text-align: center;
}

.cpanel-rival:hover {
  background: #fdf2f8;
  transform: translateY(-2px);
}

.cpanel-rival-name {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text2);
  line-height: 1.3;
}

@media (max-width: 480px) {
  .cpanel {
    width: 100vw;
  }
}

/* ── 뉴스 없음 빈 상태 ─────────────────────────────────────────── */
.cpanel-news-empty {
  color: var(--text3);
  font-size: .82rem;
  padding: 8px 0;
}

.cpanel-news-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 16px;
  border: 1.5px solid rgba(255, 45, 120, .3);
  border-radius: 20px;
  background: rgba(255, 45, 120, .05);
  color: var(--pink, #ff2d78);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.cpanel-news-retry-btn:hover {
  background: rgba(255, 45, 120, .12);
  border-color: rgba(255, 45, 120, .5);
  transform: translateY(-1px);
}

.cpanel-news-retry-btn.loading {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── 더블탭 힌트 — 패널 sticky 하단 고정 ───────────────────────── */
.cpanel-doubletap-hint {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  padding: 14px 20px 16px;
  text-align: center;
  font-size: .68rem;
  color: rgba(0, 0, 0, .28);
  letter-spacing: .04em;
  pointer-events: none;        /* 탭 이벤트 패스쓰루 */
  z-index: 5;
  margin-top: -60px;           /* 스크롤 컨텐츠와 겹치지 않게 */
}

/* ============================================================
   Weekly Spotlight 3대 섹션
   ============================================================ */
.spotlight-section {
  background: linear-gradient(135deg, #f9f7ff, #fff5fb);
}

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.spotlight-col {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
  overflow: hidden;
  border: 1.5px solid #f1f5f9;
}

.spotlight-col-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #f1f5f9;
}

.hot-header {
  background: linear-gradient(90deg, #fff5f5, #fff);
  border-left: 4px solid #ef4444;
}

.new-header {
  background: linear-gradient(90deg, #f5fff8, #fff);
  border-left: 4px solid #10b981;
}

.silent-header {
  background: linear-gradient(90deg, #f5f3ff, #fff);
  border-left: 4px solid #7c3aed;
}

.spotlight-col-icon {
  font-size: 1.6rem;
}

.spotlight-col-title {
  font-size: .95rem;
  font-weight: 800;
}

.spotlight-col-desc {
  font-size: .72rem;
  color: var(--text3);
  margin-top: 1px;
}

.spotlight-col-cards {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spotlight-loading {
  text-align: center;
  padding: 20px;
  color: var(--text3);
  font-size: .82rem;
}

.spotlight-empty {
  text-align: center;
  padding: 16px;
  color: var(--text3);
  font-size: .8rem;
}

/* 스포트라이트 카드 */
.spotlight-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.spotlight-card:hover {
  background: #fdf2f8;
  transform: translateX(2px);
}

.scard-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  flex-shrink: 0;
}

.scard-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.scard-avatar-emoji {
  font-size: 1.4rem;
}

.scard-body {
  flex: 1;
  min-width: 0;
}

.scard-name {
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scard-sub {
  font-size: .7rem;
  color: var(--text3);
  margin-top: 1px;
}

.scard-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.scard-tag {
  font-size: .62rem;
  background: #f1f5f9;
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}

.scard-score {
  text-align: right;
  flex-shrink: 0;
}

.scard-score-num {
  font-size: 1rem;
  font-weight: 900;
  color: var(--accent);
}

.scard-change {
  font-size: .7rem;
  font-weight: 700;
}

.scard-change.up {
  color: #059669;
}

.scard-change.down {
  color: #dc2626;
}

@media (max-width: 768px) {
  .spotlight-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .spotlight-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* short_comment AI 브리핑 */
.cpanel-brief {
  background: linear-gradient(90deg, #f0f9ff, #e0f2fe);
  border-left: 3px solid #0ea5e9;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .83rem;
  color: #0369a1;
  font-weight: 600;
  line-height: 1.5;
}

/* ============================================================
   PHASE 3A — 마이셀럽 전체 스타일
   ============================================================ */

/* ── 핀(pin) 버튼 — 카드 우상단 ──────────────────────────── */
.rank-card {
  position: relative;
}

.pin-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .85);
  font-size: 1rem;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
  transition: transform .2s, background .2s, color .2s;
  line-height: 1;
}

.pin-btn:hover {
  transform: scale(1.25);
  background: #fff7ed;
  color: #f59e0b;
}

.pin-btn.pinned {
  background: #fef3c7;
  color: #f59e0b;
}

.pin-btn.pinned:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* ── 상세 패널 핀 버튼 ───────────────────────────────────── */
.panel-pin-btn {
  padding: 6px 14px;
  border-radius: 18px;
  border: 1.5px solid #f59e0b;
  color: #f59e0b;
  background: transparent;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  margin-right: 8px;
}

.panel-pin-btn:hover {
  background: #fef3c7;
}

.panel-pin-btn.pinned {
  background: #fef3c7;
  color: #d97706;
  border-color: #d97706;
}

.panel-pin-btn.pinned:hover {
  background: #fee2e2;
  border-color: #ef4444;
  color: #ef4444;
}

/* ── 핀 토스트 알림 ─────────────────────────────────────── */
.pin-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 30, 30, .92);
  color: #fff;
  padding: 10px 22px;
  border-radius: 24px;
  font-size: .85rem;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.pin-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 마이셀럽 섹션 배경 ─────────────────────────────────── */
/* ======================================================
   인라인 검색바 (랭킹 섹션 위)
   ====================================================== */
.inline-search-bar {
  background: linear-gradient(135deg, rgba(255,45,120,.04), rgba(124,58,237,.04));
  border-bottom: 1px solid var(--bg2);
  padding: 14px 0;
}
.isb-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
.isb-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid rgba(255,45,120,.18);
  border-radius: 50px;
  padding: 0 20px;
  cursor: text;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(255,45,120,.08);
}
.isb-wrap:focus-within {
  border-color: var(--pink);
  box-shadow: 0 4px 20px rgba(255,45,120,.15);
}
.isb-icon { font-size: 18px; opacity: 0.5; flex-shrink: 0; }
.isb-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-family: 'Outfit', 'Noto Sans KR', sans-serif;
  color: var(--text);
  padding: 13px 0;
}
.isb-input::placeholder { color: var(--text3); }
.isb-shortcut {
  font-size: 11px;
  color: var(--text3);
  background: var(--bg2);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .isb-shortcut { display: none; }
  .isb-input { font-size: 14px; }
}

/* ======================================================
   컴팩트 마이셀럽 카드 (사진 + 이름만)
   ====================================================== */
.myceleb-compact-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scrollbar-width: none;
}
.myceleb-compact-scroll::-webkit-scrollbar { display: none; }

.mc-compact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: transform 0.2s;
  flex-shrink: 0;
  width: 76px;
  position: relative;
}
.mc-compact-card:hover { transform: translateY(-3px); }

.mc-compact-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid rgba(255,45,120,.3);
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mc-compact-card:hover .mc-compact-avatar {
  border-color: var(--pink);
  box-shadow: 0 4px 16px rgba(255,45,120,.25);
}
.mc-compact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc-compact-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72px;
}

.mc-compact-score {
  font-size: 10px;
  font-weight: 800;
  color: var(--pink);
  text-align: center;
}

.mc-compact-unpin {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,45,120,.3);
  font-size: 9px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--pink);
  line-height: 1;
}
.myceleb-compact-scroll[data-editing="true"] .mc-compact-unpin {
  display: flex;
}

/* 전체보기 버튼 */
.mc-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  background: rgba(255,45,120,.08);
  border: 1.5px solid rgba(255,45,120,.25);
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--pink);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.mc-view-all-btn:hover {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
}

.myceleb-section {
  background: linear-gradient(135deg, #fffbeb, #fff7ed, #fef3c7);
  border-top: 2px solid #fde68a;
}

/* ── 헤더 ─────────────────────────────────────────────────── */
.myceleb-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}

.myceleb-title {
  font-size: 1.2rem;
  font-weight: 900;
  margin: 4px 0 2px;
}

.myceleb-sub {
  font-size: .8rem;
  color: var(--text3);
}

.myceleb-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.mcbtn-edit {
  padding: 7px 14px;
  border-radius: 16px;
  border: 1.5px solid #f59e0b;
  color: #f59e0b;
  background: transparent;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}

.mcbtn-edit:hover {
  background: #fef3c7;
}

.mcbtn-more {
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.mcbtn-more:hover {
  text-decoration: underline;
}

/* ── 가로 스크롤 카드 줄 ─────────────────────────────────── */
.myceleb-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: #fde68a transparent;
  scroll-snap-type: x mandatory;
}

.myceleb-scroll::-webkit-scrollbar {
  height: 4px;
}

.myceleb-scroll::-webkit-scrollbar-thumb {
  background: #fde68a;
  border-radius: 4px;
}

/* ── 마이셀럽 카드 ──────────────────────────────────────── */
.mc-card {
  position: relative;
  flex: 0 0 110px;
  background: #fff;
  border-radius: 16px;
  padding: 14px 10px 12px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
  border: 1.5px solid #fde68a;
  transition: transform .18s, box-shadow .18s;
  scroll-snap-align: start;
}

.mc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, .2);
}

.mc-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef3c7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.mc-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.mc-avatar-emoji {
  font-size: 1.8rem;
}

.mc-name {
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 2px;
}

.mc-nation {
  font-size: .68rem;
  color: var(--text3);
  margin-bottom: 4px;
}

.mc-brief {
  font-size: .65rem;
  color: #0369a1;
  background: #f0f9ff;
  border-radius: 6px;
  padding: 3px 5px;
  margin-bottom: 5px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mc-tags {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 5px;
}

.mc-tag {
  font-size: .58rem;
  padding: 1px 5px;
  border-radius: 7px;
  background: #fef3c7;
  color: #d97706;
  font-weight: 700;
}

.mc-score {
  font-size: 1rem;
  font-weight: 900;
}

.mc-chg {
  font-size: .65rem;
  font-weight: 700;
  display: block;
}

/* 편집 모드 제거 버튼 */
.mc-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: .7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: transform .15s;
}

.mc-remove:hover {
  transform: scale(1.2);
}

/* ============================================================
   PHASE 3B — 취향 추천 섹션 + 마이셀럽 뉴스 팝업
   ============================================================ */

/* ── 취향 추천 섹션 ─────────────────────────────────────── */
.rec-section {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7, #f0f9ff);
  border-top: 2px solid #a7f3d0;
}

.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}

.rec-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 16px 10px 12px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
  border: 1.5px solid #a7f3d0;
  transition: transform .18s, box-shadow .18s;
}

.rec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, .15);
}

.rc-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d1fae5;
}

.rc-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rc-avatar-emoji {
  font-size: 1.6rem;
}

.rc-name {
  font-size: .82rem;
  font-weight: 800;
  margin-bottom: 2px;
}

.rc-sub {
  font-size: .67rem;
  color: var(--text3);
  margin-bottom: 5px;
}

.rc-brief {
  font-size: .64rem;
  color: #0369a1;
  background: #f0f9ff;
  border-radius: 6px;
  padding: 2px 5px;
  margin-bottom: 5px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rc-tags {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 5px;
}

.rec-tag {
  font-size: .58rem;
  padding: 1px 5px;
  border-radius: 7px;
  background: #d1fae5;
  color: #059669;
  font-weight: 700;
}

.rc-score {
  font-size: .95rem;
  font-weight: 900;
}

.rc-chg {
  font-size: .65rem;
  font-weight: 700;
}

.rc-pin {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .9);
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: all .2s;
  line-height: 1;
}

.rc-pin:hover,
.rc-pin.pinned {
  color: #f59e0b;
  background: #fef3c7;
}

/* 마이셀럽 카드 뉴스 버튼 */
.mc-news-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .85);
  font-size: .75rem;
  cursor: pointer;
  transition: transform .2s;
}

.mc-news-btn:hover {
  transform: scale(1.2);
}

/* ── 마이셀럽 뉴스 팝업 ─────────────────────────────────── */
.mcnews-popup {
  position: fixed;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 96vw);
  z-index: 10000;
  transition: bottom .3s cubic-bezier(.22, 1, .36, 1);
}

.mcnews-popup.show {
  bottom: 0;
}

.mcnews-inner {
  background: var(--surface, #fff);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .18);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mcnews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
}

.mcnews-title {
  font-weight: 800;
  font-size: .95rem;
}

.mcnews-close {
  border: none;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.mcnews-close:hover {
  background: var(--bg2, #f8f9fa);
}

.mcnews-body {
  overflow-y: auto;
  padding: 12px 16px 20px;
  flex: 1;
}

.mcnews-loading {
  text-align: center;
  color: var(--text3);
  padding: 20px;
}

.mcnews-empty {
  text-align: center;
  color: var(--text3);
  padding: 16px;
  font-size: .85rem;
}

.mcnews-signal {
  background: #fef3c7;
  color: #d97706;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.mcnews-section-title {
  font-size: .75rem;
  font-weight: 800;
  color: var(--text3);
  margin: 12px 0 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mcnews-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #f0f0f0);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.mcnews-item:last-child {
  border-bottom: none;
}

.mcnews-item:hover .mcnews-headline {
  color: var(--accent);
}

.mcnews-src {
  font-size: .65rem;
  font-weight: 700;
  color: var(--accent);
}

.mcnews-headline {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
}

.mcnews-time {
  font-size: .65rem;
  color: var(--text3);
}

.mcnews-item.feed-item .mcnews-src {
  color: #8b5cf6;
}

/* ============================================================
   호감도 V2 — 리디자인 + 라이벌 매치
   ============================================================ */

/* ── 카드 V2 기본 ─────────────────────────────────────────── */
.sent-card-v2 {
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.sent-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

/* 티어별 테두리 */
.tier-s {
  border-color: #fbbf24 !important;
  background: linear-gradient(135deg, #fffbeb, #fff) !important;
}

.tier-a {
  border-color: #f97316 !important;
  background: linear-gradient(135deg, #fff7ed, #fff) !important;
}

.tier-b {
  border-color: #10b981 !important;
  background: linear-gradient(135deg, #ecfdf5, #fff) !important;
}

.tier-c {
  border-color: #60a5fa !important;
}

.tier-d {
  border-color: #a78bfa !important;
}

.tier-f {
  border-color: #94a3b8 !important;
  opacity: .85;
}

/* ── 헤더 ─────────────────────────────────────────────────── */
.sent-v2-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.sent-avatar-wrap {
  position: relative;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: visible;
  background: linear-gradient(135deg, #ffe0ee, #ede9fe);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sent-avatar-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.sent-tier-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #1e293b;
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  white-space: nowrap;
  border: 1.5px solid #fff;
}

.tier-s .sent-tier-badge {
  background: #d97706;
}

.tier-a .sent-tier-badge {
  background: #ea580c;
}

.tier-b .sent-tier-badge {
  background: #059669;
}

.sent-v2-info {
  flex: 1;
  min-width: 0;
}

.sent-title-label {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg2);
  color: var(--text2);
}

.tier-s .sent-title-label {
  background: #fef3c7;
  color: #b45309;
}

.tier-a .sent-title-label {
  background: #ffedd5;
  color: #c2410c;
}

.tier-b .sent-title-label {
  background: #d1fae5;
  color: #065f46;
}

/* ── 관심 온도계 ───────────────────────────────────────────── */
.sent-thermo {
  text-align: center;
  flex-shrink: 0;
  background: var(--bg2);
  border-radius: 12px;
  padding: 6px 10px;
}

.sent-temp-val {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}

.sent-temp-label {
  font-size: .6rem;
  color: var(--text3);
  margin-top: 2px;
}

/* ── SNS 반응 바 ───────────────────────────────────────────── */
.sent-v2-reactions {
  margin-bottom: 14px;
}

.sent-rxn-title {
  font-size: .72rem;
  font-weight: 800;
  color: var(--text3);
  margin-bottom: 8px;
}

.sent-rxn-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.sent-rxn-emoji {
  font-size: .9rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.sent-rxn-track {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--bg2);
  overflow: hidden;
}

.sent-rxn-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 1.2s cubic-bezier(.25, .46, .45, .94);
}

.sent-rxn-pct {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text3);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ── 푸터 ─────────────────────────────────────────────────── */
.sent-v2-footer {
  padding-top: 12px;
  border-top: 1px solid var(--bg2);
}

.sent-summary {
  font-size: .78rem;
  font-style: italic;
  color: var(--text2);
  margin-bottom: 8px;
  font-weight: 600;
}

/* ============================================================
   🥊 라이벌 매치 섹션
   ============================================================ */
.rival-section {
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.rival-section::before {
  content: '⚡';
  font-size: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .04;
  pointer-events: none;
}

.rival-wrapper {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 1;
}

.rival-side {
  flex: 1;
  padding: 28px 20px;
  text-align: center;
  position: relative;
  transition: background .3s;
  border-radius: 16px;
}

.rival-side:hover {
  background: rgba(255, 255, 255, .05);
}

.rival-avatar-big {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background: rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .3);
  box-shadow: 0 0 24px rgba(255, 255, 255, .15);
}

.rival-avatar-big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.rival-name {
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.rival-tag {
  font-size: .72rem;
  opacity: .7;
  margin-bottom: 16px;
}

.rival-gauge-wrap {
  background: rgba(255, 255, 255, .12);
  border-radius: 12px;
  height: 12px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}

.rival-gauge-bar {
  height: 100%;
  border-radius: 12px;
  transition: width 1.4s cubic-bezier(.25, .46, .45, .94);
}

.rival-left .rival-gauge-bar {
  background: linear-gradient(90deg, #f43f5e, #fb923c);
}

.rival-right .rival-gauge-bar {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  float: right;
}

.rival-pct {
  font-size: 2rem;
  font-weight: 900;
}

.rival-vote-btn {
  margin-top: 12px;
  padding: 9px 24px;
  border-radius: 30px;
  border: none;
  font-weight: 800;
  font-size: .85rem;
  cursor: pointer;
  transition: all .2s;
  width: 100%;
  max-width: 160px;
}

.rival-left .rival-vote-btn {
  background: #f43f5e;
  color: #fff;
}

.rival-right .rival-vote-btn {
  background: #6366f1;
  color: #fff;
}

.rival-vote-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.15);
}

.rival-vote-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
  transform: none;
}

.rival-vs {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  opacity: .9;
  flex-shrink: 0;
  width: 60px;
  text-align: center;
  text-shadow: 0 0 20px rgba(255, 255, 255, .5);
}

.rival-voted-badge {
  display: inline-block;
  background: rgba(255, 255, 255, .2);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: .7rem;
  margin-top: 5px;
}

.rival-meta {
  text-align: center;
  margin-top: 16px;
  font-size: .78rem;
  opacity: .7;
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 12px;
  position: relative;
  z-index: 1;
}

/* 전광판 한 줄 평 */
.rival-comment-section {
  background: rgba(0, 0, 0, .3);
  margin-top: 0;
  padding: 10px 20px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.rival-comment-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.rival-comment-input {
  flex: 1;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px;
  padding: 7px 14px;
  color: #fff;
  font-size: .82rem;
  outline: none;
}

.rival-comment-input::placeholder {
  color: rgba(255, 255, 255, .45);
}

.rival-comment-input:focus {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .15);
}

.rival-comment-submit {
  background: #f43f5e;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}

.rival-comment-submit:hover {
  background: #e11d48;
}

.rival-ticker {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  height: 24px;
}

.rival-ticker-inner {
  display: inline-flex;
  gap: 40px;
  animation: rivalTicker 25s linear infinite;
  white-space: nowrap;
}

.rival-ticker-item {
  font-size: .75rem;
  opacity: .85;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rival-ticker-item .rt-name {
  font-weight: 700;
  color: #fbbf24;
}

@keyframes rivalTicker {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ============================================================
   호감도 섹션 — sentiment-grid + sent-card 핵심 레이아웃
   (누락되어 호감도 카드가 표시되지 않던 문제 수정)
   ============================================================ */

/* 호감도 그리드 컨테이너 */
.sentiment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

/* 호감도 기본 카드 (무한스크롤 + 메인 섹션 공용) */
.sent-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1.5px solid #f1f5f9;
  box-shadow: var(--shadow-sm);
  padding: 18px 16px;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.sent-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pink), var(--purple));
}

.sent-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* 카드 헤더 — 아바타 + 이름 */
.sent-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.sent-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe0ee, #ede9fe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  overflow: hidden;
}

.sent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 이름과 국가 */
.sent-name {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}

.sent-nation {
  font-size: .72rem;
  color: var(--text3);
  margin-top: 1px;
}

/* 긍정/부정 미터 */
.sent-meter {
  margin-bottom: 10px;
}

.sent-label-row {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--text2);
}

.sent-bar-wrap {
  height: 8px;
  border-radius: 4px;
  background: var(--bg2);
  overflow: hidden;
  display: flex;
}

.sent-bar-pos {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 4px 0 0 4px;
  transition: width 1.2s ease;
}

.sent-bar-neg {
  height: 100%;
  background: linear-gradient(90deg, #f87171, #ef4444);
  transition: width 1.2s ease;
}

/* 종합 점수 */
.sent-score {
  font-size: 1.6rem;
  font-weight: 900;
  text-align: center;
  line-height: 1;
  margin: 10px 0 2px;
}

.sent-score-label {
  text-align: center;
  font-size: .68rem;
  color: var(--text3);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* 키워드 태그 */
.sent-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.sent-kw {
  background: var(--bg2);
  color: var(--pink);
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

/* 무한스크롤 배치용 호감도 그리드 */
.infinite-sent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

/* 관리자 링크 — 일반 사용자에게 숨김 (보안) */
.nav-admin {
  display: none !important;
}

/* 반응형 */
@media (max-width: 768px) {
  .sentiment-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .sentiment-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   법적 고지 푸터 (Weverse-style) + 쿠키 동의 배너
   ============================================================ */
.footer-legal-strip {
  border-top: 1px solid var(--border);
  padding: 16px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 14px;
}

.footer-legal-strip a {
  font-size: .82rem;
  color: var(--text3);
  text-decoration: none;
  transition: color .2s;
}

.footer-legal-strip a:hover {
  color: var(--text1);
}

.footer-legal-strip a.highlight {
  font-weight: 700;
  color: var(--text2);
}

.footer-biz-info {
  font-size: .78rem;
  color: var(--text3);
  line-height: 1.9;
  margin-bottom: 18px;
}

.footer-biz-info .sep {
  margin: 0 6px;
  opacity: .4;
}

.footer-biz-info a {
  color: var(--text3);
  text-decoration: none;
}

.footer-biz-info a:hover {
  color: var(--pink);
}

/* 쿠키 동의 배너 */
#cookieBanner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, .97);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, .3);
  transform: translateY(0);
  transition: transform .4s ease;
}

#cookieBanner.hidden {
  transform: translateY(110%);
}

.cookie-banner-text {
  flex: 1;
  font-size: .83rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.6;
  min-width: 240px;
}

.cookie-banner-text strong {
  color: #fff;
}

.cookie-banner-text a {
  color: var(--pink);
  text-decoration: none;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-cookie-accept {
  background: var(--pink);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  transition: opacity .2s;
  white-space: nowrap;
}

.btn-cookie-accept:hover {
  opacity: .88;
}

.btn-cookie-essential {
  background: transparent;
  color: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 99px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.btn-cookie-essential:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}

.btn-cookie-settings {
  background: transparent;
  color: rgba(255, 255, 255, .45);
  border: none;
  padding: 9px 12px;
  font-size: .8rem;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}

@media (max-width: 640px) {
  #cookieBanner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .cookie-banner-actions {
    width: 100%;
  }

  .btn-cookie-accept,
  .btn-cookie-essential {
    flex: 1;
    text-align: center;
  }
}


/* =========================================================
   RESPONSIVE GRID PATCH v2 (2026-03-02)
   ========================================================= */

/* section-inner 기본 */
.section-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 핵심 그리드 컨테이너 보강 */
.ranking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.ranking-grid.compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 12px;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.sentiment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.gnews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

/* .rank-digest-row — 위 Line ~2681 에서 통합 정의, 여기선 gap만 덮어씀 */
.rank-digest-row {
  gap: 28px;
}

.feed-page-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}

.myceleb-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

/* 태블릿 (1100px 이하) */
@media (max-width: 1100px) {
  .rank-digest-row {
    grid-template-columns: 1fr;
  }

  .feed-page-layout {
    grid-template-columns: 1fr;
  }

  .feed-sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
  }

  .spotlight-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
  .section-inner {
    padding: 0 14px;
  }

  /* 랭킹: 2열 고정 — 커드 1개에 충분한 넓이 확보 */
  .ranking-grid,
  .ranking-grid.compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* 픽: 1열 — 설명 텍스트가 보이지 않아서 1열로 교체 */
  .pick-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sentiment-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .gnews-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .spotlight-grid {
    grid-template-columns: 1fr;
  }

  .rec-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .feed-sidebar {
    grid-template-columns: 1fr;
  }

  .myceleb-scroll {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

/* 소형 모바일 (480px 이하) — 2열로 완화 */
@media (max-width: 480px) {

  .section-inner {
    padding: 0 10px;
  }

  /* 랭킹: 3열 → 2열 (카드 내용이 보이도록) */
  .ranking-grid,
  .ranking-grid.compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* 픽: 2열 → 1열 (카드가 넓어야 설명 텍스트가 보임) */
  .pick-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sentiment-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* 추천/마이셀럽: 3열 → 2열 */
  .rec-grid,
  .myceleb-scroll {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* 랭킹 카드 내부 폰트/패딩 조정 */
  .rank-card {
    padding: 10px 8px;
  }

  .rank-name {
    font-size: .75rem;
  }

  .rank-score {
    font-size: .82rem;
  }

  /* 히어로 섹션 패딩 */
  .hero-inner {
    padding: 48px 12px 56px;
    flex-direction: column;
  }

  .hero-visual {
    display: none;
    /* 480 이하에서 히어로 카드 시각 숨김 */
  }

  /* 섹션 여백 줄임 */
  .section {
    padding: 40px 0;
  }
}

/* 극소형 모바일 (360px 이하) — 1열 강제 */
@media (max-width: 360px) {

  .ranking-grid,
  .ranking-grid.compact {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .rec-grid,
  .myceleb-scroll {
    grid-template-columns: 1fr;
  }

  .pick-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   digest-extras — 3종 추가 뉴스 (순위변동, 댓글반응, AI환상뉴스)
   ============================================================ */
.digest-extras {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dex-section {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 12px 14px;
}

.dex-section-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text2, #94a3b8);
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.dex-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dex-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  line-height: 1.4;
}

.dex-celeb {
  font-weight: 600;
  color: var(--text1, #f1f5f9);
}

.dex-detail {
  color: var(--text3, #64748b);
  font-size: .73rem;
  margin-left: auto;
}

.dex-sentiment {
  font-size: 1rem;
  flex-shrink: 0;
}

.dex-empty {
  color: var(--text3, #64748b);
  font-size: .75rem;
  font-style: italic;
}

/* 1위 AI 환상뉴스 카드 */
.dex-ai-news {
  background: linear-gradient(135deg, rgba(255, 45, 120, .12) 0%, rgba(99, 102, 241, .12) 100%);
  border: 1px solid rgba(255, 45, 120, .25);
  border-radius: 10px;
  padding: 12px 14px;
}

.dex-ai-news.dex-ai-pending {
  opacity: .7;
}

.dex-ai-badge {
  font-size: .7rem;
  font-weight: 700;
  color: #ff2d78;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.dex-ai-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text1, #f1f5f9);
  line-height: 1.45;
  margin-bottom: 4px;
}

.dex-ai-desc {
  font-size: .75rem;
  color: var(--text2, #94a3b8);
  line-height: 1.4;
  margin-bottom: 4px;
}

.dex-ai-meta {
  font-size: .68rem;
  color: var(--text3, #64748b);
}

/* ================================================================
   오늘의 셀럽 (TODAY'S CELEB) 섹션 — 재방문 훅
   ================================================================ */
.today-celeb-section {
  padding: 0 0 8px;
  background: transparent;
}

.today-celeb-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, #0f0f2a 0%, #1a0a2e 40%, #0a1628 100%);
  border: 1px solid rgba(255, 45, 120, .25);
  border-radius: 20px;
  padding: 20px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(255, 45, 120, .12), 0 0 0 1px rgba(124, 58, 237, .1);
  transition: box-shadow .3s, transform .2s;
}

.today-celeb-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255, 45, 120, .18) 0%, transparent 70%);
  pointer-events: none;
}

.today-celeb-card:hover {
  box-shadow: 0 12px 60px rgba(255, 45, 120, .22), 0 0 0 1px rgba(255, 45, 120, .3);
  transform: translateY(-2px);
}

.today-celeb-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.today-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.today-date-badge {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .06em;
}

.today-title-badge {
  font-size: .7rem;
  font-weight: 800;
  color: #ff2d78;
  background: rgba(255, 45, 120, .12);
  border: 1px solid rgba(255, 45, 120, .3);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .06em;
  animation: todayPulse 2.5s ease-in-out infinite;
}

@keyframes todayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 120, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 45, 120, .15); }
}

.today-celeb-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.today-celeb-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid rgba(255, 45, 120, .6);
  box-shadow: 0 0 20px rgba(255, 45, 120, .25);
  flex-shrink: 0;
  background: #1e293b;
}

.today-celeb-meta {
  min-width: 0;
}

.today-celeb-name {
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.today-celeb-nation {
  font-size: .75rem;
  color: rgba(255, 255, 255, .55);
  margin-top: 2px;
}

.today-celeb-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.today-tag-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255, 45, 120, .15);
  color: #ff2d78;
  border: 1px solid rgba(255, 45, 120, .2);
}

.today-celeb-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.today-score-box {
  text-align: right;
}

.today-score-label {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .1em;
  margin-bottom: 2px;
}

.today-score-val {
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ff2d78, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.today-change-badge {
  font-size: .78rem;
  font-weight: 800;
  color: #10b981;
  margin-top: 2px;
}

.today-ai-comment {
  font-size: .82rem;
  color: rgba(255, 255, 255, .75);
  font-style: italic;
  text-align: right;
  max-width: 200px;
  line-height: 1.45;
}

.today-ai-comment::before {
  content: '"';
  color: rgba(255, 45, 120, .6);
  font-size: 1rem;
}

.today-ai-comment::after {
  content: '"';
  color: rgba(255, 45, 120, .6);
  font-size: 1rem;
}

.today-celeb-btn {
  background: linear-gradient(135deg, #ff2d78, #7c3aed);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  white-space: nowrap;
}

.today-celeb-btn:hover {
  opacity: .88;
  transform: scale(1.04);
}

@media (max-width: 700px) {
  .today-celeb-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
  }
  .today-celeb-right {
    align-items: flex-start;
    margin-left: 0;
    width: 100%;
  }
  .today-ai-comment {
    text-align: left;
    max-width: 100%;
  }
  .today-score-box { text-align: left; }
}

/* ================================================================
   오늘의 셀럽 v2 — 선정이유 배지 + 버튼 행 + 상세 모달
   ================================================================ */

/* 선정이유 한줄 배지 */
.today-reason-badge {
  display: none;                        /* JS에서 데이터 있을 때만 표시 */
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  background: rgba(99, 102, 241, .15);
  border: 1px solid rgba(99, 102, 241, .3);
  border-radius: 20px;
  padding: 4px 10px;
  max-width: 280px;
}

.reason-icon {
  font-size: .75rem;
  flex-shrink: 0;
}

.reason-text {
  font-size: .7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 버튼 행 — 선정이유 보기 + 랭킹 확인 */
.today-celeb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* 선정이유 보기 버튼 */
.today-detail-btn {
  background: rgba(99, 102, 241, .18);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, .4);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.today-detail-btn:hover {
  background: rgba(99, 102, 241, .35);
  color: #fff;
  transform: scale(1.03);
}

/* ================================================================
   오늘의 셀럽 상세 모달
   ================================================================ */

/* 모달 오버레이 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* 모달 본체 */
.today-detail-modal {
  background: linear-gradient(160deg, #0d1b2e 0%, #1a0a2e 50%, #0d1420 100%);
  border: 1px solid rgba(255, 45, 120, .25);
  border-radius: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(124, 58, 237, .15);
  transform: translateY(20px) scale(.96);
  transition: transform .3s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 45, 120, .3) transparent;
}

.modal-overlay.active .today-detail-modal {
  transform: translateY(0) scale(1);
}

/* 헤더 */
.tdm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.tdm-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tdm-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 45, 120, .6);
  box-shadow: 0 0 16px rgba(255, 45, 120, .2);
  background: #1e293b;
  flex-shrink: 0;
}

.tdm-name {
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
}

.tdm-nation {
  font-size: .75rem;
  color: rgba(255, 255, 255, .5);
  margin-top: 2px;
}

.tdm-close {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .6);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
  transition: all .2s;
  flex-shrink: 0;
}

.tdm-close:hover {
  background: rgba(255, 45, 120, .2);
  color: #fff;
  border-color: rgba(255, 45, 120, .4);
}

/* 선정 이유 박스 */
.tdm-reason-box {
  background: linear-gradient(135deg, rgba(255, 45, 120, .1), rgba(99, 102, 241, .1));
  border: 1px solid rgba(255, 45, 120, .2);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.tdm-reason-label {
  font-size: .65rem;
  font-weight: 800;
  color: #ff2d78;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tdm-reason-headline {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 8px;
}

.tdm-reason-detail {
  font-size: .82rem;
  color: rgba(255, 255, 255, .7);
  line-height: 1.6;
}

/* 팩터 카드 그리드 */
.tdm-factors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.tdm-factor-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background .2s;
}

.tdm-factor-card:hover {
  background: rgba(255, 255, 255, .08);
}

.tdm-factor-icon {
  font-size: 1.4rem;
}

.tdm-factor-text {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  line-height: 1.35;
}

/* 점수 현황 행 */
.tdm-score-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.tdm-score-item {
  text-align: center;
}

.tdm-score-val {
  font-size: 1.3rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ff2d78, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.tdm-score-val.tdm-change {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  color: #10b981;  /* JS에서 동적 변경 */
}

.tdm-score-label {
  font-size: .63rem;
  color: rgba(255, 255, 255, .4);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* 뉴스 섹션 */
.tdm-news-section {
  margin-bottom: 16px;
}

.tdm-section-label {
  font-size: .7rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.tdm-news-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tdm-news-item {
  display: block;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: 10px 12px;
  text-decoration: none;
  transition: background .2s;
}

.tdm-news-item:hover {
  background: rgba(255, 255, 255, .08);
}

.tdm-news-title {
  font-size: .83rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  line-height: 1.4;
  margin-bottom: 4px;
}

.tdm-news-meta {
  font-size: .7rem;
  color: rgba(255, 255, 255, .35);
}

/* SNS 링크 행 */
.tdm-sns-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tdm-sns-btn {
  flex: 1;
  min-width: 110px;
  text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
}

.tdm-sns-btn:hover {
  opacity: .85;
  transform: scale(1.03);
}

.tdm-sns-ig {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
}

.tdm-sns-yt {
  background: #ff0000;
  color: #fff;
}

.tdm-sns-tw {
  background: #000;
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
}

/* AI 알고리즘 안내 */
.tdm-algorithm {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.tdm-algo-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.tdm-algo-text {
  font-size: .73rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.5;
}

/* 하단 버튼 */
.tdm-footer-btns {
  display: flex;
  gap: 10px;
}

.tdm-rank-btn {
  flex: 1;
  background: linear-gradient(135deg, #ff2d78, #7c3aed);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 14px;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}

.tdm-rank-btn:hover {
  opacity: .88;
  transform: scale(1.02);
}

/* 모달 모바일 대응 */
@media (max-width: 560px) {
  .today-detail-modal {
    padding: 18px 16px;
    border-radius: 20px;
  }
  .tdm-factors {
    grid-template-columns: 1fr 1fr;
  }
  .tdm-score-row {
    padding: 10px;
  }
  .tdm-score-val {
    font-size: 1.1rem;
  }
  .today-celeb-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .today-celeb-actions .today-detail-btn,
  .today-celeb-actions .today-celeb-btn {
    text-align: center;
  }
}

/* ================================================================
   🗳️  오늘의 셀럽 찬반 투표 섹션
   ================================================================ */

.tdm-vote-section {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

/* 레이블 행 */
.tdm-vote-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tdm-vote-label-icon {
  font-size: .95rem;
}

.tdm-vote-threshold-tip {
  font-size: .65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .35);
  margin-left: auto;
  white-space: nowrap;
}

/* 투표 버튼 행 */
.tdm-vote-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

/* 공통 버튼 */
.tdm-vote-agree-btn,
.tdm-vote-disagree-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-weight: 800;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.tdm-vote-agree-btn {
  background: linear-gradient(135deg, rgba(16, 185, 129, .2), rgba(5, 150, 105, .15));
  border: 1.5px solid rgba(16, 185, 129, .4);
  color: #6ee7b7;
}

.tdm-vote-agree-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(16, 185, 129, .35), rgba(5, 150, 105, .3));
  border-color: rgba(16, 185, 129, .7);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, .2);
}

.tdm-vote-disagree-btn {
  background: linear-gradient(135deg, rgba(239, 68, 68, .2), rgba(220, 38, 38, .15));
  border: 1.5px solid rgba(239, 68, 68, .4);
  color: #fca5a5;
}

.tdm-vote-disagree-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(239, 68, 68, .35), rgba(220, 38, 38, .3));
  border-color: rgba(239, 68, 68, .7);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, .2);
}

.tdm-vote-agree-btn:disabled,
.tdm-vote-disagree-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.tvb-icon {
  font-size: 1.6rem;
}

.tvb-text {
  font-size: .8rem;
  font-weight: 800;
}

/* 로딩 상태 */
.tdm-vote-loading {
  animation: votePulse .7s ease-in-out infinite;
}

@keyframes votePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

/* 결과 바 */
.tdm-vote-result {
  margin-top: 4px;
}

.tdm-vote-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.tdm-vote-bar-emoji {
  font-size: 1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.tdm-vote-bar-track {
  flex: 1;
  height: 10px;
  background: rgba(255, 255, 255, .06);
  border-radius: 10px;
  overflow: hidden;
}

.tdm-vote-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 1s cubic-bezier(.25, 1, .5, 1);
}

.tdm-agree-fill {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.tdm-disagree-fill {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.tdm-vote-bar-pct {
  font-size: .78rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .7);
  width: 34px;
  text-align: right;
}

.tdm-vote-count {
  font-size: .7rem;
  color: rgba(255, 255, 255, .35);
  text-align: center;
  margin-top: 6px;
}

/* 임계값 경고 */
.tdm-threshold-warning {
  display: none;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(251, 191, 36, .1);
  border: 1px solid rgba(251, 191, 36, .3);
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 700;
  color: #fbbf24;
  text-align: center;
  animation: thresholdPulse 1.5s ease-in-out infinite;
}

@keyframes thresholdPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .65; }
}

/* 투표 완료 메시지 */
.tdm-voted-msg {
  display: none;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(16, 185, 129, .08);
  border: 1px solid rgba(16, 185, 129, .2);
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 600;
  color: #6ee7b7;
  text-align: center;
}

/* 교체 발동 배너 */
.tdm-override-banner {
  display: none;
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .25), rgba(255, 45, 120, .2));
  border: 1.5px solid rgba(124, 58, 237, .5);
  border-radius: 12px;
  text-align: center;
  animation: overridePulse .5s ease-in-out infinite alternate;
}

.tdm-override-icon {
  font-size: 2rem;
  margin-bottom: 6px;
}

.tdm-override-text {
  font-size: .85rem;
  font-weight: 800;
  color: #c4b5fd;
  line-height: 1.4;
}

@keyframes overridePulse {
  from { box-shadow: 0 0 0 0 rgba(124, 58, 237, .4); }
  to   { box-shadow: 0 0 20px 4px rgba(124, 58, 237, .2); }
}

.override-flash {
  animation: overrideFlash .8s ease-in-out 3, overridePulse .5s ease-in-out 3s infinite alternate !important;
}

@keyframes overrideFlash {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* ================================================================
   🦴 Phase 1 — 랭킹 스켈레톤 로딩 카드
   ================================================================ */

/* skel-box shimmer는 기존 dark 테마 기준 (rgba 베이스) */
.skel-box {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.04) 75%
  );
  background-size: 300% 100%;
  animation: skelShimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes skelShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.rank-card-skeleton {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  pointer-events: none;
  /* 카드들이 순차적으로 나타나는 효과 */
  animation: skelFadeIn .4s ease both;
}

.rank-card-skeleton:nth-child(1)  { animation-delay: .00s; }
.rank-card-skeleton:nth-child(2)  { animation-delay: .05s; }
.rank-card-skeleton:nth-child(3)  { animation-delay: .10s; }
.rank-card-skeleton:nth-child(4)  { animation-delay: .15s; }
.rank-card-skeleton:nth-child(5)  { animation-delay: .20s; }
.rank-card-skeleton:nth-child(6)  { animation-delay: .25s; }
.rank-card-skeleton:nth-child(7)  { animation-delay: .30s; }
.rank-card-skeleton:nth-child(8)  { animation-delay: .35s; }

@keyframes skelFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* 스켈레톤 내부 요소 */
.rcs-num    { width: 36px;  height: 36px;  border-radius: 50%; flex-shrink: 0; }
.rcs-avatar { width: 44px;  height: 44px;  border-radius: 50%; flex-shrink: 0; }
.rcs-info   { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rcs-name   { height: 14px; width: 90px;  border-radius: 6px; }
.rcs-nation { height: 10px; width: 60px;  border-radius: 6px; }
.rcs-bar    { height: 6px;  width: 100%;  border-radius: 6px; }
.rcs-score-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.rcs-score  { height: 20px; width: 44px;  border-radius: 6px; }
.rcs-change { height: 12px; width: 32px;  border-radius: 6px; }

/* ================================================================
   📸 Phase 1 — Lazy Image FadeIn
   ================================================================ */

img.lazy-fade {
  opacity: 0;
  transition: opacity .4s ease;
}

img.lazy-fade.img-visible {
  opacity: 1;
}

/* feed 이미지도 적용 */
.feed-img {
  transition: opacity .3s ease;
}

/* ================================================================
   🏠 Phase 1 — 플로팅 홈 버튼
   ================================================================ */

#floatingHomeBtn {
  /* 기존 scroll-top btn와 구분되게 왼쪽 배치 */
  position: fixed;
  bottom: 28px;
  right: 76px;          /* scroll-top btn 옆 */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 45, 120, .15);
  border: 1.5px solid rgba(255, 45, 120, .3);
  backdrop-filter: blur(12px);
  color: var(--pink, #ff2d78);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9990;
  opacity: 0;
  transform: translateY(12px) scale(.85);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1),
              background .2s, box-shadow .2s;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(255, 45, 120, .15);
}

#floatingHomeBtn.fhb-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

#floatingHomeBtn:hover {
  background: rgba(255, 45, 120, .3);
  border-color: rgba(255, 45, 120, .6);
  box-shadow: 0 6px 28px rgba(255, 45, 120, .3);
  transform: translateY(-2px) scale(1.08);
}

#floatingHomeBtn.fhb-clicked {
  animation: fhbPulse .4s ease;
}

@keyframes fhbPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(.88); }
  100% { transform: scale(1); }
}

/* ================================================================
   📱 Phase 1 — 관성 스크롤 (모바일)
   ================================================================ */

/* iOS 관성 스크롤 */
html, body {
  -webkit-overflow-scrolling: touch;
}

/* 스크롤 가능한 컨테이너에도 적용 */
.ranking-grid,
#rankingGrid,
.feed-list,
#feedList {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* 카드 렌더 시 fadeIn 애니메이션 */
#rankingGrid .rank-card {
  animation: rankCardIn .3s ease both;
}

@keyframes rankCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   📱 Phase 1 — Smooth Scroll 개선 (페이지네이션 점프)
   ================================================================ */

/* 랭킹 페이지네이션 버튼 hover 개선 */
.rank-pager-jump {
  transition: all .18s ease;
}
.rank-pager-jump:hover {
  transform: translateY(-2px);
}
.rank-pager-jump.active {
  transform: translateY(-1px);
}

/* ================================================================
   🔄 Phase 2 — 무한 스크롤 스트림 (3열 그리드)
   ================================================================ */

/* 섹션 래퍼 */
.is-section {
  padding: 40px 0 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(124, 58, 237, .04) 100%);
}

/* 섹션 헤더 */
.is-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ─── 3열 그리드 ─────────────────────────────────────────── */
.is-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* ─── 개별 카드 ───────────────────────────────────────────── */
.is-card {
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
  animation: isCardIn .35s ease both;
}

.is-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 36px rgba(0,0,0,.14);
}

@keyframes isCardIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* 사진 영역 — 정사각형 */
.is-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.is-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, opacity .4s ease;
}

.is-card:hover .is-card-img {
  transform: scale(1.06);
}

/* 이모지 fallback */
.is-card-emoji {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
}

/* 순위 뱃지 — 좌상단 */
.is-card-rank-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  line-height: 1.4;
}

/* HOT / ▲ 뱃지 — 우상단 */
.is-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: .62rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  line-height: 1.4;
}
.is-badge-hot {
  background: var(--pink, #ff2d78);
  color: #fff;
}
.is-badge-up {
  background: var(--green, #10b981);
  color: #fff;
  right: 38px; /* HOT 뱃지 옆 */
}

/* 정보 영역 */
.is-card-meta {
  padding: 8px 8px 10px;
}

.is-card-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.is-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.is-card-score {
  font-size: .7rem;
  color: var(--purple, #7c3aed);
  font-weight: 700;
}

.is-card-change {
  font-size: .65rem;
  font-weight: 700;
}
.is-card-change.up   { color: var(--green,  #10b981); }
.is-card-change.down { color: var(--neg,    #dc2626); }

/* ─── 스켈레톤 카드 ───────────────────────────────────────── */
.is-card-skel {
  pointer-events: none;
}
.is-skel-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px 14px 0 0;
}
.is-skel-name {
  height: 12px;
  width: 70%;
  border-radius: 6px;
  margin: 8px 8px 6px;
}

/* ─── 완료 메시지 ─────────────────────────────────────────── */
.is-done-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  background: rgba(124, 58, 237, .08);
  border: 1px solid rgba(124, 58, 237, .2);
  border-radius: 16px;
  color: var(--text2);
  font-size: .88rem;
  font-weight: 600;
  justify-content: center;
}

.is-done-icon {
  font-size: 1.4rem;
}

/* ─── Phase 2: 루프 순환 구분선 ──────────────────────────── */
.is-loop-divider {
  grid-column: 1 / -1;           /* 전체 열 스팬 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 16px;
  position: relative;
}

.is-loop-divider::before,
.is-loop-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(124, 58, 237, .3) 40%,
    rgba(124, 58, 237, .3) 60%,
    transparent
  );
}

.is-loop-badge {
  flex-shrink: 0;
  margin: 0 14px;
  padding: 5px 14px;
  background: linear-gradient(135deg,
    rgba(124, 58, 237, .18),
    rgba(255, 45, 120, .12)
  );
  border: 1px solid rgba(124, 58, 237, .28);
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  color: rgba(167, 139, 250, .9);
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
  animation: loopBadgeIn .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes loopBadgeIn {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Phase 2: 더블탭 힌트 (셀럽 패널 내 툴팁) ─────────────── */
.cpanel-doubletap-hint {
  text-align: center;
  font-size: .68rem;
  color: rgba(255, 255, 255, .2);
  margin-top: 12px;
  padding: 8px;
  letter-spacing: .03em;
  animation: hintFadeIn 1.2s ease 1.5s both;
}

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

/* ─── 반응형 ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .is-grid {
    gap: 4px;
  }
  .is-card-name {
    font-size: .72rem;
  }
  .is-card-meta {
    padding: 6px 6px 8px;
  }
}

@media (min-width: 900px) {
  .is-grid {
    /* 데스크탑: 4열 지원 */
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}

/* ============================================================
   A안: 이미지 퍼스트 피드 카드 (.fcard-img)
   썸네일이 카드 상단 70%를 차지, 셀럽 정보는 하단 30%에만
   ============================================================ */
.fcard-img {
  background: var(--surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.fcard-img:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.fcard-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg2);
  flex-shrink: 0;
}
.fcard-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.fcard-img:hover .fcard-thumb {
  transform: scale(1.04);
}
.fcard-thumb-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}
.fcard-platform {
  font-size: .65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
}
.fcard-platform.pt-youtube   { background: rgba(255,0,0,.85);    color: #fff; }
.fcard-platform.pt-instagram { background: rgba(225,48,108,.85); color: #fff; }
.fcard-platform.pt-twitter   { background: rgba(29,155,240,.85); color: #fff; }
.fcard-platform.pt-tiktok    { background: rgba(0,0,0,.75);      color: #fff; }
.fcard-sentiment {
  font-size: .62rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
}
.fcard-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255,255,255,0);
  transition: color 0.22s ease, background 0.22s ease;
  background: rgba(0,0,0,0);
}
.fcard-img:hover .fcard-play-btn {
  color: rgba(255,255,255,.90);
  background: rgba(0,0,0,.22);
}
.fcard-info {
  padding: 10px 12px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fcard-celeb-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.fcard-emoji { font-size: 1rem; flex-shrink: 0; }
.fcard-celeb-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.fcard-celeb-name {
  font-size: .78rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fcard-time {
  font-size: .65rem;
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
}
.fcard-title {
  font-size: .75rem;
  color: var(--text2);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}
.fcard-tag {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  color: var(--purple);
  background: rgba(124,58,237,.08);
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 2px;
}
.feed-grid .fcard-img,
.feed-grid .feed-card { align-self: start; }

/* ============================================================
   A안: MORE CELEBS 유튜브 배지 & 제목
   ============================================================ */
.is-yt-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(255,0,0,.88);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 12px;
  letter-spacing: .03em;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.is-card-yt-title {
  font-size: .68rem;
  color: var(--text2);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  margin-top: 1px;
}
@media (max-width: 480px) {
  .fcard-thumb-wrap { aspect-ratio: 4 / 3; }
  .fcard-title { font-size: .72rem; }
  .is-card-yt-title { font-size: .64rem; }
}

/* ============================================================
   랭킹 무한 스크롤 — Pick 삽입 블록 (ris-pick-block)
   ============================================================ */
.ris-pick-block {
  grid-column: 1 / -1;
  margin: 6px 0;
  animation: risPickIn .4s ease both;
}
@keyframes risPickIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
.ris-pick-inner {
  background: linear-gradient(135deg, rgba(255,45,120,.07) 0%, rgba(124,58,237,.07) 100%);
  border: 1.5px solid rgba(255,45,120,.18);
  border-radius: 18px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.ris-pick-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pink), var(--purple));
  border-radius: 18px 18px 0 0;
}
.ris-pick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ris-pick-label {
  font-size: .72rem;
  font-weight: 800;
  color: var(--pink);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ris-pick-more {
  font-size: .72rem;
  font-weight: 700;
  color: var(--purple);
  text-decoration: none;
  opacity: .8;
  transition: opacity .2s;
}
.ris-pick-more:hover { opacity: 1; text-decoration: underline; }

.ris-pick-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ris-pick-avatar {
  font-size: 2.4rem;
  line-height: 1;
  flex-shrink: 0;
  background: rgba(255,255,255,.5);
  border-radius: 12px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.ris-pick-info { flex: 1; min-width: 0; }
.ris-pick-name {
  font-weight: 800;
  font-size: .95rem;
  color: var(--text);
  margin-bottom: 4px;
}
.ris-pick-reason {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--purple);
  background: rgba(124,58,237,.1);
  border-radius: 20px;
  padding: 2px 10px;
  margin-bottom: 7px;
}
.ris-pick-why {
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.6;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.ris-pick-sns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* 순환 배지 */
.is-loop-divider {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.is-loop-badge {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text3);
  background: var(--bg2);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 20px;
  padding: 4px 16px;
  letter-spacing: .05em;
}

/* 스켈레톤 개별 카드 (ris-skel) */
.rank-card-visual.ris-skel {
  pointer-events: none;
  animation: shimmer 1.2s infinite linear;
}

/* ============================================================
   📱 MOBILE STABILITY FIX — v20260322
   스마트폰 뷰포트(≤480px) 디자인 안정성 패치
   - 히어로 타이틀 크기 급변 방지
   - 가로 스크롤(horizontal overflow) 완전 차단
   - 히어로 스탯 모바일 최적화
   - celebDetailPanel 오버플로우 차단
   - 광고 fallback 영역 너비 제한
   - 버튼 모바일 터치 최적화
   ============================================================ */

/* 전역: 가로 오버플로우 방지 강화 */
html {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── 768px: 태블릿 기준 ───────────────────────────────── */
@media (max-width: 768px) {
  /* 히어로 타이틀 — clamp 최솟값 56px → 모바일에서 너무 큼 */
  .hero-title {
    font-size: clamp(36px, 10vw, 72px) !important;
    margin-bottom: 12px;
  }

  /* 히어로 inner — 패딩 감소 */
  .hero-inner {
    padding: 40px 16px 40px;
    gap: 24px;
  }

  /* 히어로 배지 */
  .hero-badge {
    font-size: 11px;
    padding: 5px 14px;
    margin-bottom: 14px;
  }

  /* 히어로 서브타이틀 */
  .hero-sub {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.65;
  }

  /* 섹션 내부 패딩 */
  .section-inner {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ── 600px: 소형 태블릿 / 대형 폰 ───────────────────── */
@media (max-width: 600px) {
  /* 히어로 타이틀 더 축소 */
  .hero-title {
    font-size: clamp(28px, 9vw, 48px) !important;
  }

  /* 히어로 스탯 — 세로 누적 방지: 가로 2×2 그리드로 변경 */
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    flex-direction: unset;
    gap: 0;
  }

  .stat-item {
    border-right: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  .stat-item:nth-child(2n) {
    border-right: none !important;
  }
  .stat-item:nth-last-child(-n+2) {
    border-bottom: none !important;
  }

  .stat-num {
    font-size: 20px;
  }

  /* 히어로 CTA 버튼 — 세로 중앙 정렬, 풀 너비 */
  .hero-cta {
    flex-direction: column;
    gap: 10px;
  }
  .hero-cta .btn-primary,
  .hero-cta .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 14px;
  }

  /* 섹션 헤더 타이틀 축소 */
  .section-header h2 {
    font-size: 1.3rem !important;
  }

  /* 스폰서 배너 패딩 최소화 */
  .sponsor-wrap,
  .ad-inner {
    padding: 8px 8px;
  }

  /* 광고 fallback 너비 제한 */
  .ad-leaderboard-fb,
  .ad-side-fb,
  .ad-rect-fb {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 60px;
  }

  /* 순위 카드 — 폰트 미세 조정 */
  .rank-name {
    font-size: 0.88rem;
  }
  .rank-nation {
    font-size: 0.68rem;
  }

  /* 피드 그리드 1열 */
  .feed-grid {
    grid-template-columns: 1fr;
  }

  /* 장르 필터 탭 — 스크롤 가능하게 */
  #rankingGenreTabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  #rankingGenreTabs::-webkit-scrollbar { display: none; }
  #rankingGenreTabs .ftab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── 480px: 일반 스마트폰 기준 ───────────────────────── */
@media (max-width: 480px) {
  /* 히어로 타이틀 최소값 */
  .hero-title {
    font-size: clamp(26px, 8vw, 44px) !important;
  }

  /* 히어로 inner 패딩 더 감소 */
  .hero-inner {
    padding: 28px 14px 28px;
  }

  /* nav-inner 패딩 */
  .nav-inner {
    padding: 0 12px;
    gap: 8px;
  }

  /* celebDetailPanel — 오른쪽 오버플로우 방지 */
  #celebDetailPanel {
    width: 100vw !important;
    max-width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
    overflow-x: hidden !important;
  }

  /* 사이드 패널 내부 컨텐츠 너비 제한 */
  #celebDetailPanel .cpanel-hero,
  #celebDetailPanel .cpanel-section {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 랭킹 카드 무한 스크롤 시각적 카드 — 2열 유지 */
  .ranking-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* 스폰서 배너 완전 max-width 제한 */
  .sponsor-banner,
  .ad-zone {
    overflow: hidden;
    max-width: 100vw;
  }

  /* 섹션 inner 패딩 최소값 */
  .section-inner {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* floating 버튼 위치 조정 (FAB, 홈버튼) */
  .floating-home-btn,
  .fab-notify,
  .fab-scroll {
    right: 14px !important;
  }

  /* 오늘의 셀럽 카드 — 너비 초과 방지 */
  .today-celeb-card,
  .today-celeb-inner {
    max-width: 100%;
    overflow: hidden;
  }

  /* 스트림 레이아웃 블록 너비 제한 */
  .stream-news-block,
  .stream-sns-block,
  .stream-rival-mini,
  .stream-pick-block {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 스파크라인 SVG — 모바일에서 잘림 방지 */
  .rank-sparkline {
    display: none;
  }
}

/* ── 375px: 소형 iPhone 기준 ────────────────────────── */
@media (max-width: 375px) {
  .hero-title {
    font-size: 26px !important;
  }

  .stat-num {
    font-size: 18px;
  }

  /* 순위 카드 텍스트 더 축소 */
  .rank-score-num {
    font-size: 1rem;
  }

  /* 네비 브랜드 텍스트 크기 축소 */
  .nav-brand {
    font-size: 20px;
  }
}

/* ── 가로 스크롤 잔여분 완전 차단 ─────────────────────
   stream-rank-header, hero mini cards 가로 오버플로우 방지 */
@media (max-width: 600px) {
  /* 모든 섹션이 viewport 밖으로 나가지 않도록 */
  .section,
  .section-alt {
    overflow-x: hidden;
  }

  /* 스트림 랭킹 헤더 */
  .stream-rank-header {
    max-width: 100%;
    overflow: hidden;
  }

  /* Hero 미니카드 — 가로 스크롤 컨테이너로 변경
     ※ display:flex 초기값을 동일하게 유지해 grid→flex 전환 레이아웃 점프 제거
        (index.html <style>의 @media 600px 블록과 동일 선언 — CSS 우선순위 보강용) */
  .hero-visual {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;    /* 카드 단위 스냅 스크롤 */
    gap: 10px;
    scrollbar-width: none;
    padding-bottom: 4px;
    max-width: 100%;
    will-change: transform;           /* GPU 컴포지트 레이어 — 스크롤 버벅임 방지 */
  }
  .hero-visual::-webkit-scrollbar { display: none; }
  .hero-mini-card {
    flex-shrink: 0;
    width: 140px;
    min-width: 140px;
    scroll-snap-align: start;         /* 카드 왼쪽 가장자리 기준 스냅 */
  }

  /* 순위 카드 행 (stream-layout의 inline) */
  .ranking-grid {
    overflow-x: hidden;
  }

  /* body 완전 차단 */
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* 무한 스크롤 배치 */
  .infinite-batch {
    overflow-x: hidden;
  }

  /* 스트림 SNS 스크롤 — 내부에서만 가로 스크롤 허용 */
  .stream-sns-scroll {
    max-width: 100%;
  }

  /* rank-card-visual 2열 */
  #rankingGrid.ranking-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  /* v76 섹션 여백 최적화 */
  .v76-section {
      padding: 24px 0 !important;
  }
  .v76-section-inner {
      padding: 0 12px !important;
  }
  .v76-section-head {
      margin-bottom: 12px !important;
  }
}

/* ============================================================
   [v76] Instagram형 3열 그리드 UI — Day 2-3 구조개선
   .v76-section: 신규 랭킹/피드 섹션 공통 컨테이너
   .v76-grid: 3열 고정 그리드 (모바일 2열)
   .v76-feed-grid: 피드 카드 그리드
   ============================================================ */

/* ── 섹션 공통 ───────────────────────────────────────────── */
.v76-section {
  padding: 32px 0;
}
.v76-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.v76-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.v76-section-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text, #111);
  letter-spacing: -.01em;
}
.v76-section-sub {
  font-size: .78rem;
  color: var(--text3, #9ca3af);
  margin-top: 2px;
}
.v76-view-all {
  font-size: .78rem;
  font-weight: 700;
  color: var(--pink, #ff2d78);
  text-decoration: none;
  white-space: nowrap;
  opacity: .85;
  transition: opacity .2s;
}
.v76-view-all:hover { opacity: 1; }

/* ── 3열 그리드 ──────────────────────────────────────────── */
.v76-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .v76-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
  .v76-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* ── 그리드 카드 ─────────────────────────────────────────── */
.v76-grid-card {
  background: var(--surface, #fff);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  outline: none;
}
.v76-grid-card:hover,
.v76-grid-card:focus {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.v76-grid-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg2, #f3f4f6);
  overflow: hidden;
}
.v76-grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.v76-grid-card:hover .v76-grid-img { transform: scale(1.05); }
.v76-grid-emoji {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  background: linear-gradient(135deg, var(--bg2,#f3f4f6), var(--surface,#fff));
}

/* 뱃지 */
.v76-grid-rank {
  position: absolute;
  top: 7px;
  left: 7px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  line-height: 1.5;
}
.v76-grid-hot {
  position: absolute;
  top: 7px;
  right: 7px;
  background: var(--pink, #ff2d78);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  line-height: 1.5;
}
.v76-grid-trend {
  position: absolute;
  bottom: 7px;
  right: 7px;
  font-size: .6rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  line-height: 1.5;
}
.v76-grid-trend.up   { background: rgba(16,185,129,.85); color:#fff; }
.v76-grid-trend.down { background: rgba(220,38,38,.85);  color:#fff; }

/* 카드 메타 */
.v76-grid-meta {
  padding: 8px 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.v76-grid-name {
  font-size: .76rem;
  font-weight: 700;
  color: var(--text, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.v76-grid-score {
  font-size: .7rem;
  font-weight: 800;
  color: var(--purple, #7c3aed);
  white-space: nowrap;
}

/* ── 광고 슬롯 (그리드 내 삽입) ─────────────────────────── */
.v76-grid-ad {
  background: var(--bg2, #f9fafb);
  border-radius: 14px;
  overflow: hidden;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border: 1px solid rgba(0,0,0,.04);
}
/* 광고가 그리드 3열 전체 폭 차지하도록 */
.v76-grid-ad-full {
  grid-column: 1 / -1;
  min-height: 90px;
  padding: 6px;
  border-radius: 12px;
  background: var(--bg2, #f9fafb);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 피드 카드 그리드 ────────────────────────────────────── */
.v76-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 768px) {
  .v76-feed-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
  .v76-feed-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ── 피드 카드 ───────────────────────────────────────────── */
.v76-feed-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.v76-feed-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.11);
}
.v76-feed-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg2, #f3f4f6);
  overflow: hidden;
}
.v76-feed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.v76-feed-card:hover .v76-feed-img { transform: scale(1.04); }
.v76-feed-emoji {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
}
.v76-feed-growth {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(16,185,129,.88);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.v76-feed-info {
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.v76-feed-name {
  font-size: .8rem;
  font-weight: 800;
  color: var(--text, #111);
}
.v76-feed-headline {
  font-size: .73rem;
  color: var(--text2, #374151);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}
.v76-feed-link {
  font-size: .68rem;
  color: var(--pink, #ff2d78);
  text-decoration: none;
  font-weight: 700;
  margin-top: auto;
}
.v76-feed-link:hover { text-decoration: underline; }

/* ── Load More 버튼 ──────────────────────────────────────── */
.v76-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.v76-load-more-btn {
  background: linear-gradient(135deg, var(--pink, #ff2d78), var(--purple, #7c3aed));
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 11px 36px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
  letter-spacing: .03em;
}
.v76-load-more-btn:hover {
  opacity: .9;
  transform: translateY(-2px);
}
.v76-load-more-btn:disabled {
  opacity: .5;
  cursor: default;
  transform: none;
}

/* ── 스켈레톤 (초기 로딩) ────────────────────────────────── */
.v76-skel {
  animation: v76shimmer 1.2s infinite linear;
  background: linear-gradient(90deg, var(--bg2,#f3f4f6) 25%, #e9ebee 50%, var(--bg2,#f3f4f6) 75%);
  background-size: 200% 100%;
  border-radius: 14px;
  overflow: hidden;
}
.v76-skel-img { width: 100%; aspect-ratio: 1/1; }
.v76-skel-text { height: 12px; width: 70%; margin: 8px 9px 4px; border-radius: 6px; background: inherit; }
@keyframes v76shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   v76 — Top20 그리드 & Rising 피드 전체 스타일 (2026-04-02)
   ============================================================ */

/* 섹션 래퍼 */
.v76-section {
  padding: 40px 0;
}
.v76-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 섹션 헤더 */
.v76-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
}
.v76-section-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
}
.v76-section-sub {
  font-size: .75rem;
  color: var(--text3);
  margin-top: 3px;
}
.v76-view-all {
  font-size: .78rem;
  font-weight: 700;
  color: var(--pink);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 14px;
  border: 1.5px solid rgba(255,45,120,.25);
  border-radius: 50px;
  transition: var(--transition);
  flex-shrink: 0;
}
.v76-view-all:hover {
  background: rgba(255,45,120,.07);
  border-color: var(--pink);
}

/* ── 장르 탭 ────────────────────────────────────────────── */
#v76GenreTabs {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 16px;
  padding-bottom: 2px;
}
#v76GenreTabs::-webkit-scrollbar { display: none; }

/* ── 3열 그리드 ─────────────────────────────────────────── */
.v76-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* 그리드 카드 */
.v76-grid-card {
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  outline: none;
  position: relative;
}
.v76-grid-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.v76-grid-card:focus {
  box-shadow: 0 0 0 2px var(--pink);
}

/* 이미지 래퍼 */
.v76-grid-img-wrap {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--bg2);
}
.v76-grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.v76-grid-card:hover .v76-grid-img {
  transform: scale(1.05);
}

/* 이모지 fallback */
.v76-grid-emoji {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  background: linear-gradient(135deg, var(--bg2) 0%, #e9ebf8 100%);
}

/* 배지들 */
.v76-grid-rank {
  position: absolute;
  top: 7px;
  left: 7px;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.v76-grid-hot {
  position: absolute;
  top: 7px;
  right: 7px;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
}
.v76-grid-trend {
  position: absolute;
  bottom: 7px;
  right: 7px;
  font-size: .65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.v76-grid-trend.up   { background: rgba(16,185,129,.85); color: #fff; }
.v76-grid-trend.down { background: rgba(220,38,38,.80); color: #fff; }

/* 카드 메타 */
.v76-grid-meta {
  padding: 8px 9px 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.v76-grid-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  letter-spacing: -0.01em;
}
.v76-grid-score {
  font-size: .68rem;
  font-weight: 800;
  color: var(--pink);
  flex-shrink: 0;
  margin-left: 4px;
}
@media (max-width: 480px) {
    .v76-grid-meta { padding: 6px 7px 7px; }
    .v76-grid-name { font-size: .72rem; }
    .v76-grid-score { font-size: .62rem; }
}

/* 그리드 내 전폭 광고 배너 (9번째마다) */
.v76-grid-ad-full {
  grid-column: 1 / -1;
  background: var(--surface2);
  border-radius: 12px;
  border: 1px solid var(--bg2);
  padding: 8px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 더보기 버튼 */
.v76-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.v76-load-more-btn {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  border: none;
  padding: 10px 32px;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 14px rgba(255,45,120,.3);
}
.v76-load-more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,45,120,.4);
}
.v76-load-more-btn:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
}

/* ── Rising Feed 피드 그리드 ─────────────────────────────── */
.v76-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* 피드 카드 */
.v76-feed-card {
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.v76-feed-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.v76-feed-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg2);
}
.v76-feed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.v76-feed-card:hover .v76-feed-img {
  transform: scale(1.05);
}
.v76-feed-emoji {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--bg2) 0%, #e9ebf8 100%);
}
.v76-feed-growth {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(16,185,129,.9);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
}

.v76-feed-info {
  padding: 10px 12px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v76-feed-name {
  font-size: .85rem;
  font-weight: 800;
  color: var(--text);
}
.v76-feed-headline {
  font-size: .75rem;
  color: var(--text2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v76-feed-link {
  font-size: .72rem;
  color: var(--pink);
  text-decoration: none;
  font-weight: 700;
  margin-top: 4px;
}
.v76-feed-link:hover { text-decoration: underline; }

/* ── 모바일 반응형 (768px 이하) ─────────────────────────── */
@media (max-width: 768px) {
  .v76-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .v76-feed-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .v76-section {
    padding: 28px 0;
  }
  .v76-section-title {
    font-size: 1.05rem;
  }
}

/* ── 소형 모바일 (375px 이하) ──────────────────────────── */
@media (max-width: 400px) {
  .v76-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .v76-feed-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .v76-section-inner {
    padding: 0 12px;
  }
  .v76-grid-name { font-size: .72rem; }
  .v76-feed-name { font-size: .78rem; }
}

/* ── [UI_V3] Celebrity Avatar / Image Fallback ── */
.celeb-avatar-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.celeb-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.celeb-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color: #4b5563;
  font-size: 24px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Hero Mini Card specific fallback */
.hmc-avatar-fb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fdf2f8, #fbcfe8);
  font-size: 24px;
}