/***************************************************
 * GLOBAL
 ***************************************************/
body {
    margin: 0;
    background: #000;
    display: flex;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    color: #fff;
}

#app {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 94px;
}

.page-main {
    width: 100%;
    max-width: 480px;
}

/***************************************************
 * HOT TRENDS
 ***************************************************/
.section-block {
    padding: 22px 16px;
    border-bottom: 1px solid #0f0f0f;
}

.section-title {
    font-size: 18px;
    font-weight: 900;
}

.section-sub {
    font-size: 13px;
    color: #ccc;
    margin-top: 4px;
}

.hot-trend-chips {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hot-trend-chip {
    padding: 7px 12px;
    border-radius: 12px;
    background: #14151f;
    border: 1px solid rgba(255,225,140,.25);
    color: #f6f6fa;
    font-size: 12px;
    cursor: pointer;
}

/***************************************************
 * AI 예감 카드
 ***************************************************/
.ai-trend-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-trend-card {
    background: #11131f;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid #1f2438;
}

/***************************************************
 * SEARCH BAR
 ***************************************************/
.search-input-wrap {
    margin-top: 12px;
    position: relative;
}

.search-input {
    width: 100%;
    box-sizing: border-box;   /* padding 포함 — 100% 초과 오버플로우 방지 */
    padding: 12px 14px;
    border-radius: 12px;
    background: #0b0c14;
    border: 1px solid #1d1d1d;
    color: #fff;
}

/***************************************************
 * SEARCH RESULT
 ***************************************************/
.search-results-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.search-card {
    background: #11131f;
    border-radius: 14px;
    padding: 12px;
    border: 1px solid #1f2438;
}

/* 검색 페이지 헤더 정렬 — 위치·변형(fixed·자동숨김)은 공용 header.css에 위임 */
body[data-page="search"] .header-inner {
    max-width: 480px;
    margin: 0 auto;
}

/* ===== TAB MENU ===== */
/* 탭이 4개가 되면서 375px 화면에서 글자가 두 줄로 깨졌다.
   → 한 줄 고정(nowrap) + 넘치면 가로 스크롤(스크롤바는 숨김). */
.tabs-header {
  display: flex;
  gap: 6px;
  padding: 12px 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-header::-webkit-scrollbar { display: none; }

.tab-item {
  flex: 0 0 auto;
  white-space: nowrap;
  background: #1a1a1a;
  color: #aaa;
  border: 1px solid #333;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.tab-item.active {
  background: #000;
  color: #fff;
  border-color: #555;
  z-index: 2;
}

/* ===== TAB PANEL ===== */
.tabs-body {
  border-top: 1px solid #333;
  padding: 16px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* =========================
   NEWS DISCOVER CARD
========================= */
.news-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #222;
  text-decoration: none;
  color: #fff;
}

.news-thumb {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  background: #111;
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-body {
  flex: 1;
}

.news-title {
  font-size: 15px;
  line-height: 1.4;
}

.news-meta {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 6px;
}

.news-card-inner {
  display: flex;
  gap: 12px;
}

.news-thumb {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
}

/* ✅ 썸네일 없을 때 */
.news-thumb.placeholder {
  background: linear-gradient(
    135deg,
    #1a1a1a,
    #111
  );
  border: 1px solid #222;
}

.news-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.news-summary {
  font-size: 13px;
  color: #aaa;
  margin-top: 6px;
}

/* 요약 3줄 제한 */
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



/* =========================
   NEWS VIEWER (IFRAME)
========================= */
.news-viewer-modal {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1000002;
}

.news-viewer-modal.hidden {
  display: none;
}

.news-viewer-header {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid #111;
}

.news-viewer-header button {
  background: none;
  border: none;
  color: #fff;
}

#news-viewer-iframe {
  width: 100%;
  height: calc(100vh - 48px);
  border: none;
}

/* =========================
   FINAL NEWS MODAL (FIXED)
========================= */
.news-modal {
  position: fixed;
  inset: 0;
  z-index: 1000001;

  display: none;          /* ✅ 기본은 아예 DOM 비활성 */
  justify-content: center;
  align-items: flex-end;

  pointer-events: none;  /* 안전장치 */
}

.news-modal.active {
  display: flex;         /* ✅ 열릴 때만 DOM 참여 */
  pointer-events: auto;
}

.news-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  pointer-events: auto;
}

.news-modal-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 80vh;

  background: #0b0c14;
  border-radius: 20px 20px 0 0;
  padding: 16px;

  transform: translateY(100%);
  transition: transform .25s ease-out;
}

.news-modal.active .news-modal-sheet {
  transform: translateY(0);
}

.news-thumbnail {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: #222;
  flex-shrink: 0;
}

.news-thumbnail.placeholder {
  background: linear-gradient(135deg, #222, #111);
}

.news-rank {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(6px);
  animation: rankFadeIn 0.4s ease forwards;
}

.rank-up {
  color: #2ecc71;
}

.rank-down {
  color: #e74c3c;
}

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

.trend-badge {
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.trend-badge.hot {
  background: #ff3b30;
  color: #fff;
}

.trend-badge.strong {
  background: #ff9500;
  color: #000;
}

.trend-badge.steady {
  background: #444;
  color: #fff;
}

.news-category-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 0 12px;
}

.news-category-chips button {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 18px;
  font-size: 13px;
  border: 1px solid #333;
  background: #171717;
  color: #ccc;
  white-space: nowrap;
  cursor: pointer;
}

.news-category-chips button.active {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* 뉴스 카드 */
.news-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  cursor: pointer;
}

/* 16:9 썸네일 */
.news-thumb-16x9 {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  border-radius: 10px;
  overflow: hidden;
}

.news-thumb-16x9 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 썸네일 없을 때 */
.thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    #222,
    #111
  );
}

/* 텍스트 영역 */
.news-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.news-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-count {
  font-size: 13px;
  color: #aaa;
}

.news-meta {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  display: flex;
  gap: 6px;
}

.news-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* =========================================================
   통합 검색 허브 (재편)
========================================================= */

/* 검색 바 */
.search-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  margin: 4px 16px 14px;
  padding: 11px 14px;
  background: #12141c;
  border: 1px solid #232634;
  border-radius: 14px;
}
/* ⌨️ 전용 검색 오버레이 — 검색 입력을 누르면 '검색 패널 통째'를 body 최상위(transform 밖)
   풀스크린으로 슬라이드 전환(search.js searchOverlay). transform 조상이 없어 iOS 키보드가
   콘텐츠를 못 밀고(실기기 확정), 검색바는 상단 고정, 아래에 최근·실시간·결과가 그대로. */
.search-overlay {
  position: fixed; inset: 0; z-index: 2147483000;
  background: #0a0a0b; padding-top: env(safe-area-inset-top);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  /* ⚠️ transform 쓰면(슬라이드) 그 transform이 또 iOS 키보드 밀림을 유발 → 페이드(opacity)로 연출.
     transform 조상·자기 transform이 전혀 없어야 iOS가 오버레이 콘텐츠를 안 민다. */
  opacity: 0; transition: opacity .22s ease;
}
.search-overlay.in { opacity: 1; }
.search-overlay-close {
  align-self: flex-start; flex: 0 0 auto;
  width: 44px; height: 44px; margin: 2px 0 -4px 6px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: #cfd6e6; cursor: pointer;
}
.search-overlay .tab-panel { display: block !important; }
/* 오버레이 안 검색바는 sticky로 스크롤해도 상단 고정 */
.search-overlay .search-bar { position: sticky; top: 0; z-index: 5; margin: 0 16px 12px; }
.search-bar-ic { opacity: .55; font-size: 15px; }
svg.search-bar-ic { width: 19px; height: 19px; color: #9aa3b8; flex: 0 0 auto; }
.search-bar .search-input {
  flex: 1; width: auto; margin: 0; padding: 0;
  background: transparent; border: none; color: #fff; font-size: 15px;
}
.search-bar .search-input:focus { outline: none; }
.search-clear {
  border: none; background: #2a2e3c; color: #cfd6e6;
  width: 22px; height: 22px; border-radius: 50%; font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* 빈 상태: 최근/인기 */
.search-empty { padding: 0 16px 24px; }
.se-block { margin-bottom: 22px; }
.se-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 800; color: #cfd6e6; margin-bottom: 12px;
}
.se-clear { border: none; background: none; color: #6b7488; font-size: 12px; cursor: pointer; }
.se-muted { color: #6b7488; font-size: 13px; padding: 6px 0; }

.se-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.se-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #191c26; border: 1px solid #262a38; color: #dbe2f0;
  padding: 7px 10px 7px 12px; border-radius: 999px; font-size: 13px; cursor: pointer;
}
.se-chip-x { border: none; background: none; color: #6b7488; font-size: 11px; cursor: pointer; padding: 0; }

.se-poplist { display: flex; flex-direction: column; }
.se-pop {
  display: flex; align-items: center; gap: 12px;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 11px 4px; border-bottom: 1px solid #171a22; text-align: left;
}
.se-pop-rank { width: 20px; font-size: 15px; font-weight: 900; color: #6b7488; }
.se-pop-rank.hot { color: #ff5470; }
.se-pop-title { flex: 1; color: #eef1f7; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-pop-cnt { color: #6b7488; font-size: 11.5px; font-weight: 700;
  background: #191c26; border-radius: 999px; padding: 2px 8px; flex: 0 0 auto; }
.se-pop-go { color: #4b5266; font-size: 16px; font-weight: 700; flex: 0 0 auto; }
.se-pop:active { opacity: .6; }

/* 실시간 LIVE 배지 (인기 검색어 헤더) */
.se-live { display: inline-flex; align-items: center; gap: 5px;
  color: #ff5470; font-size: 10.5px; font-weight: 900; letter-spacing: .04em; }
.se-live i { width: 6px; height: 6px; border-radius: 50%; background: #ff3c5a;
  box-shadow: 0 0 0 0 rgba(255,60,90,.6); animation: seLive 1.6s ease-out infinite; }
@keyframes seLive { 0% { box-shadow: 0 0 0 0 rgba(255,60,90,.55); }
  70% { box-shadow: 0 0 0 7px rgba(255,60,90,0); } 100% { box-shadow: 0 0 0 0 rgba(255,60,90,0); } }
@media (prefers-reduced-motion: reduce) { .se-live i { animation: none; } }

/* 실시간 검색어 소스 전환 (갈라 / 구글 / 네이트·줌) */
.se-srcs { display: flex; gap: 6px; margin-bottom: 8px; }
.se-src {
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: #14161f; border: 1px solid #262a38; color: #9aa3b8;
  font-size: 12.5px; font-weight: 800; transition: all .15s ease;
}
.se-src.on { background: #ff3c5a; border-color: #ff3c5a; color: #fff; }
.se-src:active { transform: scale(.94); }

/* 탐색 카테고리 (검색 빈 화면) — 탭하면 즉시 검색 */
.se-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.se-cat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 15px 6px; cursor: pointer;
  border: 1px solid hsl(var(--ch) 30% 26% / .55); border-radius: 14px;
  background: linear-gradient(150deg, hsl(var(--ch) 42% 15% / .85), hsl(var(--ch) 38% 10% / .85));
  transition: transform .12s ease, border-color .2s ease;
}
.se-cat:active { transform: scale(.95); border-color: hsl(var(--ch) 60% 45%); }
.se-cat-e { font-size: 22px; line-height: 1; }
.se-cat-k { color: #e7ecf6; font-size: 13px; font-weight: 800; }

/* 검색 결과 섹션 */
.search-results { padding: 0 16px 30px; }
.sr-loading, .sr-none { color: #8a93a6; text-align: center; padding: 40px 0; font-size: 14px; }
.sr-none span { color: #5c6479; font-size: 12.5px; }
.sr-sec { margin-bottom: 22px; }
.sr-sec-head { font-size: 13px; font-weight: 800; color: #aeb7c9; margin: 0 2px 10px; }
.sr-sec-head b { color: #4a7bff; margin-left: 2px; }

.sr-card {
  display: flex; gap: 12px; align-items: stretch;
  background: #12141c; border: 1px solid #1e2230; border-radius: 14px;
  padding: 10px; margin-bottom: 10px; text-decoration: none; color: inherit;
}
.sr-card:active { border-color: #3356ff; }
/* 👤 유저 결과 카드 */
.sr-user {
  display: flex; align-items: center; gap: 12px;
  background: #12141c; border: 1px solid #1e2230; border-radius: 14px;
  padding: 10px 12px; margin-bottom: 10px; text-decoration: none; color: inherit;
}
.sr-user:active { border-color: #3356ff; }
.sr-ava {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(160deg,#3f4bd8,#2530a0); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
}
.sr-ava img { width: 100%; height: 100%; object-fit: cover; }
.sr-user-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-user-name { font-size: 15px; font-weight: 800; color: #f3f4f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-user-bio { font-size: 12.5px; color: #7c828f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-user .sr-go { flex: none; color: #4b5163; font-size: 20px; }
/* 🔖 해시태그 섹션 */
.sr-hash-head { display: flex; align-items: center; gap: 8px; }
.sr-hash-sort { margin-left: auto; display: inline-flex; gap: 4px; }
.sr-hash-sort button {
  background: #12141c; border: 1px solid #262b3a; color: #8b93a4;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
.sr-hash-sort button.on { background: rgba(106,123,255,.22); border-color: #6a7bff; color: #cdd6ff; }
.sr-hash-row {
  display: flex; align-items: center; gap: 10px;
  background: #12141c; border: 1px solid #1e2230; border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; text-decoration: none; color: inherit;
}
.sr-hash-row:active { border-color: #3356ff; }
.sr-hash-ic { flex: none; font-size: 18px; }
.sr-hash-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-hash-t { font-size: 14px; font-weight: 700; color: #eef0f4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-hash-c { font-size: 11.5px; color: #6b7280; }
.sr-hash-row .sr-go { flex: none; color: #4b5163; font-size: 18px; }
.sr-thumb {
  position: relative; flex: 0 0 84px; width: 84px; height: 84px;
  border-radius: 10px; overflow: hidden; background: #0c0e14;
  display: flex; align-items: center; justify-content: center;
}
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr-noimg { font-size: 12px; font-weight: 900; color: #31384a; letter-spacing: 1px; }
.sr-badge-vid {
  position: absolute; right: 5px; bottom: 5px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 9px;
  padding: 2px 5px; border-radius: 5px;
}
.sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.sr-cat { font-size: 11px; color: #7d88a0; font-weight: 700; }
.sr-title {
  font-size: 14.5px; font-weight: 700; color: #f2f5fb; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-bar { height: 5px; border-radius: 999px; background: #ff4f6e; overflow: hidden; margin-top: 3px; }
.sr-bar-pro { height: 100%; background: #3356ff; }
.sr-meta { font-size: 11.5px; color: #8a93a6; margin-top: 2px; }
.sr-pred { font-size: 13px; color: #cdd6ea; }
.sr-pred b { color: #6d8bff; font-size: 15px; font-weight: 900; }
.sr-pred span { color: #aeb7c9; }

.sr-card.predict {
  background: linear-gradient(160deg, #101d38, #0b1220);
  border-color: #2b4a86;
}
.sr-card.predict .sr-go {
  display: flex; align-items: center; color: #6d8bff; font-size: 22px; font-weight: 800; padding-right: 4px;
}
.sr-card.news { cursor: pointer; }

/* 지금 뜨는 — 핫 키워드 */
.trending-hot { padding: 0 16px; display: flex; flex-direction: column; }
.th-chip {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; border-bottom: 1px solid #171a22;
  padding: 12px 4px; cursor: pointer; text-align: left;
}
.th-rank { width: 22px; font-size: 16px; font-weight: 900; color: #6b7488; }
.th-rank.hot { color: #ff5470; }
.th-title { flex: 1; color: #eef1f7; font-size: 14.5px; font-weight: 600; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-cnt { color: #5c6479; font-size: 12px; }

/* 지금 뜨는 갈라 이슈는 .search-results 재사용 */
[data-panel="trending"] .search-results { padding-top: 4px; }

/* 재편 레이아웃: 패널 내부 요소가 각자 좌우 패딩을 관리 → tabs-body 좌우 패딩 제거 */
.tabs-body { padding: 12px 0 0; }
[data-panel="trending"] .section-title,
[data-panel="trending"] .section-sub { padding: 0 16px; }
.news-category-chips { padding: 8px 16px 12px; }

/* =========================================================
   뉴스 고도화 — 깨진 썸네일 대응 + 관련기사 모달
========================================================= */

/* 썸네일 로드 실패 시 플레이스홀더 (이미지 onerror → .thumb-fail) */
.news-thumb-16x9, .sr-thumb, .news-mini-thumb { position: relative; }
.thumb-fail {
  background: linear-gradient(135deg, #1b2030, #0f1219) !important;
}
.thumb-fail::after {
  content: "📰";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; opacity: .45;
}

/* 관련기사 모달 헤더 + 닫기 */
.news-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 12px;
  border-bottom: 1px solid #1b1e28;
  margin-bottom: 8px;
}
.news-modal-header h3 { font-size: 16px; font-weight: 800; margin: 0; }
.news-modal-x {
  border: none; background: #1e2230; color: #cfd6e6;
  width: 30px; height: 30px; border-radius: 50%; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.news-modal-articles {
  overflow-y: auto;
  max-height: calc(80vh - 70px);
  -webkit-overflow-scrolling: touch;
}

/* 관련기사 한 줄 */
.news-article-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 2px;
  border-bottom: 1px solid #14171f;
  cursor: pointer;
}
.news-article-item:active { background: #10131b; }
.news-mini-thumb {
  flex: 0 0 62px; width: 62px; height: 62px;
  border-radius: 9px; overflow: hidden; background: #0f1219;
}
.news-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nai-body { flex: 1; min-width: 0; }
.news-article-title {
  font-size: 14px; font-weight: 600; color: #eef1f7; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nai-meta { font-size: 11.5px; color: #8a93a6; margin-top: 4px; }
.nai-go { color: #4a5266; font-size: 20px; font-weight: 700; flex: 0 0 auto; }

/* =========================================================
   뉴스 기사 뷰어 모달 (기사 자체를 모달로)
========================================================= */
.news-viewer-header {
  height: 52px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: #0b0c14;
  border-bottom: 1px solid #1b1e28;
}
.news-viewer-header #news-viewer-close {
  border: none; background: #1e2230; color: #cfd6e6;
  width: 30px; height: 30px; border-radius: 50%; font-size: 13px; cursor: pointer;
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
}
#news-viewer-title {
  flex: 1; min-width: 0; color: #fff; font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#news-viewer-ext {
  flex: 0 0 auto; color: #6d8bff; font-size: 13px; font-weight: 700; text-decoration: none;
}
.news-viewer-stage { position: relative; width: 100%; height: calc(100vh - 52px); background: #0b0c14; }
#news-viewer-iframe { width: 100%; height: 100%; border: none; }
.news-viewer-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 32px; text-align: center;
}
.news-viewer-fallback .nvf-title { color: #eef1f7; font-size: 16px; font-weight: 800; line-height: 1.4; }
.news-viewer-fallback .nvf-desc { color: #8a93a6; font-size: 13px; }
.news-viewer-fallback .nvf-btn {
  margin-top: 6px; padding: 13px 22px; border-radius: 12px;
  background: linear-gradient(90deg, #3356ff, #6d4bff); color: #fff;
  font-size: 14px; font-weight: 800; text-decoration: none;
}

/* 기사 리더 (엣지 함수로 긁어온 본문을 우리 포맷으로) */
.news-viewer-reader {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #0b0c14; padding: 20px 18px 64px;
}
.reader-loading { color: #8a93a6; text-align: center; padding: 64px 0; font-size: 14px; }
.reader { max-width: 680px; margin: 0 auto; }
.reader-title { font-size: 22px; font-weight: 900; line-height: 1.35; color: #fff; margin: 0 0 8px; word-break: keep-all; }
.reader-sub { font-size: 12.5px; color: #8a93a6; margin-bottom: 16px; }
.reader-hero { width: 100%; border-radius: 12px; margin-bottom: 18px; display: block; }
.reader p { font-size: 16px; line-height: 1.75; color: #dfe4ee; margin: 0 0 16px; word-break: keep-all; }
.reader-origin { display: inline-block; margin-top: 10px; color: #6d8bff; font-weight: 700; font-size: 14px; text-decoration: none; }

/* hidden 속성이 display:flex/absolute 규칙에 먹히던 문제 — 명시적으로 숨김 */
.news-viewer-fallback[hidden], .news-viewer-reader[hidden] { display: none !important; }

/* 리더 본문 속 사진(문단 사이) */
.reader-img { width: 100%; border-radius: 10px; margin: 6px 0 18px; display: block; }

/* =========================================================
   갈라뉴스 (AI 종합)
========================================================= */
.galla-badge {
  align-self: flex-start;      /* flex 아이템 stretch 방지(카드 전체 폭으로 늘어나던 문제) */
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2px;
  color: #b7a6f0; background: rgba(120,90,240,.10);
  padding: 3px 9px; border-radius: 7px; margin-bottom: 7px;
}
.galla-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: linear-gradient(135deg, #8b6dff, #5b8cff); flex: 0 0 auto;
}
.reader-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .2px;
  color: #b7a6f0; background: rgba(120,90,240,.10);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 12px;
}
.reader-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #8b6dff, #5b8cff); flex: 0 0 auto;
}
.reader-disclaimer {
  margin-top: 24px; padding-top: 14px; border-top: 1px solid #1b1e28;
  font-size: 11.5px; color: #6b7488; line-height: 1.6;
}

/* 관련 기사(출처) */
.reader-sources { margin-top: 26px; }
.reader-sources-head { font-size: 13px; font-weight: 800; color: #aeb7c9; margin-bottom: 10px; }
.reader-src {
  display: flex; gap: 11px; align-items: center;
  padding: 10px; margin-bottom: 8px; border-radius: 12px;
  background: #12141c; border: 1px solid #1e2230; text-decoration: none;
}
.reader-src:active { border-color: #4a7bff; }
.reader-src-thumb {
  position: relative; flex: 0 0 56px; width: 56px; height: 56px;
  border-radius: 9px; overflow: hidden; background: #0f1219;
}
.reader-src-thumb img { width: 100%; height: 100%; object-fit: cover; }
.reader-src-body { min-width: 0; flex: 1; }
.reader-src-title {
  font-size: 13.5px; font-weight: 600; color: #e9edf5; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reader-src-press { font-size: 11.5px; color: #6d8bff; font-weight: 700; margin-top: 3px; }

/* =========================================================
   갈라뉴스 배틀 댓글
========================================================= */
.gn-comments { margin-top: 26px; padding-top: 18px; border-top: 1px solid #1b1e28; }
.gnc-title { font-size: 14px; font-weight: 800; color: #e9edf5; margin-bottom: 12px; }

.gnc-compose { display: flex; gap: 8px; margin-bottom: 16px; }
.gnc-compose.reply { margin: 8px 0 4px; }
.gnc-input {
  flex: 1; min-width: 0; background: #12141c; border: 1px solid #262a38; border-radius: 10px;
  color: #fff; padding: 10px 12px; font-size: 14px;
}
.gnc-input:focus { outline: none; border-color: #4a7bff; }
.gnc-send {
  flex: 0 0 auto; border: none; border-radius: 10px; padding: 0 16px; font-weight: 800; font-size: 13px;
  color: #fff; background: linear-gradient(90deg, #3356ff, #6d4bff); cursor: pointer;
}

.gnc-list { display: flex; flex-direction: column; gap: 4px; }
.gnc-empty { color: #6b7488; font-size: 13px; padding: 18px 0; text-align: center; }
.gnc-thread { padding: 10px 0; border-bottom: 1px solid #14171f; }

.gnc { display: flex; gap: 10px; }
.gnc.reply { margin-top: 10px; margin-left: 10px; padding-left: 10px; border-left: 2px solid #232838; }
.gnc-av {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #4a7bff, #6d4bff);
}
/* 프로필 사진 아바타 — 투명 이미지여도 원형 틀이 보이게 배경·테두리 */
img.gnc-av {
  object-fit: cover;
  background: #171923;
  border: 1px solid rgba(255, 255, 255, .1);
}
.gnc-main { flex: 1; min-width: 0; }
.gnc-head { display: flex; align-items: center; gap: 8px; }
.gnc-name { font-size: 13px; font-weight: 800; color: #eef1f7; }
.gnc-time { font-size: 11px; color: #6b7488; }
.gnc-text { font-size: 14px; color: #dfe4ee; line-height: 1.5; margin: 3px 0 6px; word-break: break-word; }
.gnc-mention { color: #6d8bff; font-weight: 700; }
.gnc-actions { display: flex; gap: 14px; }
.gnc-like, .gnc-reply {
  border: none; background: none; color: #8a93a6; font-size: 12px; font-weight: 700; cursor: pointer; padding: 0;
}
.gnc-like.on { color: #ff5470; }
.gnc-toggle {
  margin: 6px 0 2px 42px; border: none; background: none; color: #6d8bff; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0;
}
.gnc-more {
  width: 100%; margin-top: 12px; padding: 11px; border: 1px solid #262a38; border-radius: 10px;
  background: #12141c; color: #aeb7c9; font-size: 13px; font-weight: 700; cursor: pointer;
}

/* 갈라뉴스 카드 지표 */
/* 좋아요·싫어요·댓글·저장·공유를 전부 왼쪽에 붙여 한 줄로.
   버튼이 각자 좌우 패딩(7px)을 가지므로 gap은 0으로 두고,
   음수 마진으로 첫 아이콘을 제목과 좌측 정렬한다. */
.gn-cardstats {
  display: flex; align-items: center; gap: 2px;
  margin-top: 7px; margin-left: -7px;
  font-size: 12px; color: #8a93a6;
}
.gn-cardstats .gn-saved { color: #6d8bff; font-weight: 700; }

/* 갈라뉴스 리더 액션바 */
.gn-actions {
  display: flex; gap: 6px; flex-wrap: nowrap; justify-content: space-between;
  margin: 22px 0 4px; padding: 14px 0; border-top: 1px solid #1b1e28;
}
.gn-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid #262a38; background: #12141c; color: #cfd6e6;
  border-radius: 999px; padding: 8px 11px; font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap; flex: 0 1 auto; min-width: 0;
}
.gn-act.gn-icon { padding: 8px 10px; }   /* 아이콘만(저장·공유·갈비스) 더 좁게 */
.gn-act .gv-galvis { width: 17px; height: 17px; color: #5fd8ff; }
.gn-act span { font-variant-numeric: tabular-nums; }
.gn-act.on.like { border-color: #3356ff; color: #6d8bff; background: rgba(51,86,255,.12); }
.gn-act.on.dislike { border-color: #ff4f6e; color: #ff6f86; background: rgba(255,79,110,.12); }
.gn-act.on.save { border-color: #f5c518; color: #f5c518; background: rgba(245,197,24,.1); }
.gn-act.gn-icon { padding: 9px 13px; }
.gn-act .ic-bookmark, .gn-act .ic-share { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gn-act.on.save .ic-bookmark { fill: #f5c518; }

/* 지금 뜨는 — 갈라 그룹(예측/이슈) */
.tr-group { margin-bottom: 20px; }
.tr-group-head { font-size: 13.5px; font-weight: 800; color: #cfd6e6; margin: 0 2px 10px; }

/* 핫트렌드 섹션 더보기 */
.tr-more {
  width: 100%; margin: 4px 0 2px; padding: 10px;
  border: 1px solid #262a38; border-radius: 10px;
  background: #12141c; color: #aeb7c9; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.tr-more:active { border-color: #4a7bff; }

/* ============================================================
   🎬 핫영상 (유튜브 인기 급상승) — 카테고리 · 선반 · 플레이어
   ⚠️ .tabs-body 의 padding:16px 은 다른 CSS에 덮여 실제로 0이다.
      그러니 이 패널이 자기 좌우 패딩을 직접 갖고,
      히어로/선반/칩은 -16px 마진으로 가장자리까지 쓴다(풀블리드).
============================================================ */
.tab-panel[data-panel="hot"] { padding: 0 16px; }

.hv-sub { padding: 2px 2px 12px; font-size: 12px; color: #8a8f9a; }

/* ── 카테고리 칩 ── */
.hv-cats {
  display: flex; gap: 7px;
  margin: 0 -16px 16px; padding: 2px 16px 4px;
  overflow-x: auto; scrollbar-width: none;
}
.hv-cats::-webkit-scrollbar { display: none; }
.hv-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 0 13px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: #b9bfcb; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; cursor: pointer;
  touch-action: manipulation;
  transition: background .16s, color .16s, border-color .16s;
}
.hv-chip-e { font-size: 13px; }
.hv-chip:active { transform: scale(.95); }
.hv-chip.on {
  background: #fff; border-color: #fff; color: #0a0a0c;
}

/* ── 섹션 ── */
.hv-sec { margin: 0 0 22px; }
.hv-sec-h {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 2px 10px;
}
.hv-sec-t { font-size: 15.5px; font-weight: 900; letter-spacing: -.2px; }
.hv-sec-s { font-size: 11.5px; color: #6f757f; font-weight: 700; }
.hv-more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  min-height: 30px; padding: 0 4px;
  background: none; border: 0; color: #8a909c;
  font-size: 12px; font-weight: 700; cursor: pointer;
  touch-action: manipulation;
}
.hv-more svg { width: 13px; height: 13px; }
.hv-more:active { color: #fff; }

/* ── 히어로 (1위) ── */
.hv-hero {
  position: relative; display: block; width: calc(100% + 32px);
  margin: 0 -16px 22px; padding: 0;
  aspect-ratio: 16/9; overflow: hidden;
  background: #0d0f16; border: 0; cursor: pointer;
  text-align: left; touch-action: manipulation;
}
.hv-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-hero-sh {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.05) 100%);
}
.hv-hero-badge {
  position: absolute; top: 12px; left: 16px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,60,86,.92);
  font-size: 11px; font-weight: 900; color: #fff;
  backdrop-filter: blur(4px);
}
.hv-hero-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); border: 1.5px solid rgba(255,255,255,.5);
  backdrop-filter: blur(6px); color: #fff;
}
.hv-hero-play svg { width: 26px; height: 26px; margin-left: 2px; }
.hv-hero:active .hv-hero-play { transform: translate(-50%,-50%) scale(.9); }
.hv-hero-tx { position: absolute; left: 16px; right: 16px; bottom: 13px; display: block; }
.hv-hero-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 16px; font-weight: 800; line-height: 1.32; color: #fff;
}
.hv-hero-m { display: block; margin-top: 5px; font-size: 11.5px; color: rgba(255,255,255,.72); }

/* ── 가로 선반 ── */
.hv-shelf {
  display: flex; gap: 10px;
  padding: 0 0 4px;
  overflow-x: auto; scroll-snap-type: x proximity;
  /* scroll-snap은 타일을 스크롤포트 시작선에 붙여서 좌측 패딩을 먹어버린다.
     scroll-padding 을 줘야 첫 타일이 패딩 안쪽에 스냅된다. */
  scroll-padding-left: 16px;
  scrollbar-width: none;
}
/* 풀블리드는 핫영상 패널 안에서만 */
.tab-panel[data-panel="hot"] .hv-shelf { margin: 0 -16px; padding: 0 16px 4px; }
/* 핫트렌드 탭의 영상 선반 — 화면 끝에 붙지 않게 좌우 여백 */
#trending-videos .hv-sec-h { padding-left: 16px; padding-right: 16px; }
#trending-videos .hv-shelf { padding: 0 16px 4px; }
.hv-shelf::-webkit-scrollbar { display: none; }
.hv-tile {
  flex: 0 0 152px; scroll-snap-align: start;
  display: block; padding: 0; background: none; border: 0;
  text-align: left; cursor: pointer; touch-action: manipulation;
}
.hv-tile-th {
  position: relative; display: block; width: 100%; aspect-ratio: 16/9;
  border-radius: 10px; overflow: hidden; background: #12141c;
}
.hv-tile-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-tile:active .hv-tile-th { transform: scale(.97); }
.hv-tile-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 7px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: #e8eaef;
}
.hv-tile-m { display: block; margin-top: 3px; font-size: 11px; color: #6f757f; }

/* ── 목록 카드 ── */
.hv-list { display: flex; flex-direction: column; gap: 4px; }
.hv-card {
  display: flex; gap: 11px; width: 100%;
  padding: 8px 6px; background: none; border: 0; border-radius: 12px;
  text-align: left; cursor: pointer; touch-action: manipulation;
}
.hv-card:active { background: rgba(255,255,255,.06); }
.hv-thumb {
  position: relative; flex: 0 0 132px; height: 74px;
  border-radius: 10px; overflow: hidden; background: #12141c;
}
.hv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-rank {
  position: absolute; top: 5px; left: 5px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: rgba(0,0,0,.72);
  font-size: 11px; font-weight: 900; color: #fff;
  backdrop-filter: blur(3px);
}
.hv-dur {
  position: absolute; right: 5px; bottom: 5px;
  padding: 2px 5px; border-radius: 5px;
  background: rgba(0,0,0,.82);
  font-size: 10.5px; font-weight: 700; color: #fff;
}
.hv-meta { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.hv-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; font-weight: 700; line-height: 1.35; color: #eef0f4;
}
.hv-ch { display: block; margin-top: 4px; font-size: 11.5px; color: #9aa0ac; }
.hv-stat { display: flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 11px; color: #6f757f; }
.hv-stat-i { display: inline-flex; align-items: center; gap: 3px; }
.hv-ic { width: 13px; height: 13px; display: block; flex: 0 0 13px; }

.hv-empty { padding: 60px 20px; text-align: center; color: #8a8f9a; font-size: 13.5px; line-height: 1.7; }

/* 로딩 스켈레톤 */
.hv-skel { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.hv-skel span {
  display: block; height: 74px; border-radius: 10px;
  background: linear-gradient(90deg, #12141c 25%, #1a1d27 50%, #12141c 75%);
  background-size: 300% 100%;
  animation: hvShimmer 1.3s ease-in-out infinite;
}
@keyframes hvShimmer { to { background-position: -300% 0; } }

/* ============================================================
   플레이어 (바텀시트) + 갈라 소셜
============================================================ */
/* 🎬 유튜브식 시청 '페이지' — 전체화면(모달 아님), 위 플레이어 고정 느낌 + 아래 스크롤(정보·댓글·다음영상) */
.hv-player { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: stretch; justify-content: center; }
.hv-player.hidden { display: none; }
.hv-dim { position: absolute; inset: 0; background: #000; }
.hv-box {
  position: relative; width: 100%; max-width: 600px;
  height: 100dvh; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #0b0c11;
  border-radius: 0;
  border: 0;
  padding-top: env(safe-area-inset-top);
  animation: hvIn .26s cubic-bezier(.2,.85,.2,1);   /* 스택 페이지처럼 우→좌 슬라이드인(모달 느낌 제거) */
}
@keyframes hvIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
/* 🔙 닫힘(뒤로가기) — SPA 페이지처럼 우로 슬라이드 아웃 + 딤 페이드로 뒤 페이지가 드러난다. */
.hv-player.hv-out .hv-box { animation: hvOut .24s cubic-bezier(.4,0,.2,1) forwards; }
.hv-player.hv-out .hv-dim { animation: hvDimOut .24s ease forwards; }
@keyframes hvOut { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes hvDimOut { from { opacity: 1; } to { opacity: 0; } }
.hv-grab { display: none; }   /* 페이지化 — 시트 손잡이 제거(닫기 버튼이 출구) */

/* 플레이어는 스크롤해도 상단에 붙어있게(유튜브처럼) */
.hv-frame { position: sticky; top: 0; z-index: 2; width: 100%; aspect-ratio: 16/9; background: #000; }
.hv-frame iframe { width: 100%; height: 100%; display: block; border: 0; }

/* 🎬 핫튜브 시청 = 실 SPA 스택 페이지(watch.html). 오버레이가 아니라 라우터 레이어를 채운다.
   .hv-box 규칙(max-width·hvIn 애니)을 물려받으므로 여기서 라우터 슬라이드와 겹치는 애니를 끈다. */
.watch-box { animation: none !important; max-width: none; width: 100%; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #0b0c11; padding-top: 0 !important; }
/* ‹ 뒤로 = 영상 위 상단바(왼쪽 위). 영상 위에 얹으면 WKWebView가 크로스오리진 iframe으로 터치를
   가로채 안 눌린다 → 영상 '위쪽' 바로 빼서 항상 눌리게. 바와 영상 모두 sticky로 스크롤해도 고정. */
.watch-topbar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center;
  height: calc(46px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0; background: #0b0c11; }
.hv-back { width: 40px; height: 40px; border: 0; background: transparent; color: #fff; display: grid; place-items: center; }
.hv-back svg { width: 24px; height: 24px; }
.watch-box .hv-frame { top: calc(46px + env(safe-area-inset-top)); }
/* 🚫 임베드 차단(음원 Topic) 폴백 카드 — 흉한 유튜브 '오류 153' 대신 */
.hv-blocked { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; color: #aeb6c6; }
.hv-blocked svg { width: 40px; height: 40px; color: #5fd8ff; opacity: .9; }
.hv-blocked p { font-size: 14px; line-height: 1.5; color: #cfd6e6; margin: 0; }
.hv-blocked-go { margin-top: 4px; padding: 9px 16px; border-radius: 999px; background: #1e2532; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }

.hv-head { position: relative; padding: 13px 46px 11px 15px; }
.hv-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14.5px; font-weight: 800; line-height: 1.38; color: #fff;
}
.hv-chname { display: block; margin-top: 4px; font-size: 11.5px; color: #8a909c; }
.hv-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.07); color: #c9d1e0;
  cursor: pointer; touch-action: manipulation;
}
.hv-close svg { width: 15px; height: 15px; }
.hv-close:active { background: rgba(255,255,255,.16); }

/* 🎬 다음 영상 목록 — 유튜브식 썸네일+정보 행, 탭하면 제자리 교체 */
.hv-related { padding: 4px 12px calc(20px + env(safe-area-inset-bottom)); }
.hv-related-h { font-size: 13px; font-weight: 800; color: #cfd6e6; margin: 12px 4px 8px; }
.hv-rel { display: flex; gap: 10px; padding: 8px 4px; cursor: pointer; border-radius: 10px; }
.hv-rel:active { background: rgba(255,255,255,.05); }
.hv-rel-thumb { position: relative; flex: 0 0 140px; width: 140px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.hv-rel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hv-rel-dur { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.82); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 4px; }
.hv-rel-info { flex: 1 1 auto; min-width: 0; }
.hv-rel-t { font-size: 13px; font-weight: 700; color: #eef1f6; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hv-rel-m { margin-top: 4px; font-size: 11px; color: #8a909c; }

/* 좋아요 · 댓글 · 공유 */
.hv-social {
  display: flex; gap: 6px; padding: 4px 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hv-sb {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 8px;
  background: none; border: 0; border-radius: 11px;
  color: #aeb5c2; font-size: 12.5px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
  transition: color .15s, background .15s;
}
.hv-sb svg { width: 19px; height: 19px; }
.hv-sb:active { background: rgba(255,255,255,.06); }
.hv-sb.on { color: #ff4d67; }
.hv-sb.on svg { fill: #ff4d67; stroke: #ff4d67; }

/* 댓글 */
.hv-cmt-wrap { border-bottom: 1px solid rgba(255,255,255,.06); }
.hv-cmt-wrap.hidden { display: none; }
.hv-cmt-list { max-height: 38vh; overflow-y: auto; padding: 10px 14px 4px; }
.hv-cmt-empty { padding: 26px 10px; text-align: center; color: #6f757f; font-size: 12.5px; }
.hv-cmt { display: flex; gap: 9px; padding: 8px 0; }
.hv-cmt-av {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; background: #1a1d27;
}
.hv-cmt-av0 {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #8a909c;
}
.hv-cmt-b { flex: 1 1 auto; min-width: 0; }
.hv-cmt-h { display: flex; align-items: center; gap: 6px; }
.hv-cmt-n { font-size: 12.5px; font-weight: 800; color: #e8eaef; }
.hv-cmt-d { font-size: 11px; color: #6f757f; }
.hv-cmt-x {
  margin-left: auto; background: none; border: 0;
  color: #6f757f; font-size: 11px; cursor: pointer;
  min-height: 28px; padding: 0 4px; touch-action: manipulation;
}
.hv-cmt-x:active { color: #ff4d67; }
.hv-cmt-t { margin-top: 2px; font-size: 13px; line-height: 1.45; color: #c9d1e0; word-break: break-word; }

.hv-cmt-bar { display: flex; gap: 8px; padding: 8px 14px 12px; }
.hv-cmt-in {
  flex: 1 1 auto; min-width: 0; min-height: 40px;
  padding: 0 14px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  color: #fff; font-size: 13px;
}
.hv-cmt-in::placeholder { color: #6f757f; }
.hv-cmt-in:focus { outline: none; border-color: rgba(255,255,255,.28); }
.hv-cmt-send {
  flex: 0 0 auto; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 0; background: #3d6bff; color: #fff;
  font-size: 12.5px; font-weight: 800; cursor: pointer; touch-action: manipulation;
}
.hv-cmt-send:active { transform: scale(.95); }

/* 하단 액션 */
.hv-actions { display: flex; gap: 9px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); }
.hv-yt, .hv-galla {
  flex: 1 1 0; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 12px; font-size: 13px; font-weight: 800;
  cursor: pointer; text-decoration: none; touch-action: manipulation;
}
.hv-yt { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); color: #c9d1e0; }
.hv-yt:active { transform: scale(.96); }
/* 갈라는 발제 embed 연동 전까지 비활성 */
.hv-galla {
  background: rgba(255,77,103,.14); border: 1px solid rgba(255,77,103,.25);
  color: rgba(255,140,158,.8); cursor: not-allowed;
}
.hv-galla em { font-style: normal; font-size: 10.5px; opacity: .75; font-weight: 700; }

/* 토스트 */
.hv-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 10060; padding: 11px 18px; border-radius: 999px;
  background: rgba(255,255,255,.95); color: #0a0a0c;
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
  animation: hvToast .22s ease;
}
@keyframes hvToast { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ============================================================
   핫영상 2차 — 롱폼/쇼츠 토글 · 쇼츠 그리드 · 대댓글
============================================================ */

/* 롱폼 / 쇼츠 세그먼트 */
.hv-mode {
  display: flex; gap: 4px; margin: 0 0 14px; padding: 4px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
}
.hv-mode-btn {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; border: 0; border-radius: 10px;
  background: none; color: #8a909c;
  font-size: 13px; font-weight: 800; cursor: pointer;
  touch-action: manipulation;
  transition: background .16s, color .16s;
}
.hv-mode-btn svg { width: 17px; height: 17px; }
.hv-mode-btn.on { background: #fff; color: #0a0a0c; }

/* 쇼츠 배지 */
.hv-sbadge {
  position: absolute; right: 5px; bottom: 5px;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255,60,86,.92);
  font-size: 10px; font-weight: 900; color: #fff;
}

/* 쇼츠 타일(선반) — 9:16 */
.hv-tile-s { flex-basis: 118px; }
.hv-tile-s .hv-tile-th { aspect-ratio: 9/16; }

/* 쇼츠 그리드 */
.hv-sgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.hv-scell {
  display: block; padding: 0; background: none; border: 0;
  text-align: left; cursor: pointer; touch-action: manipulation;
}
.hv-scell-th {
  position: relative; display: block; width: 100%; aspect-ratio: 9/16;
  border-radius: 10px; overflow: hidden; background: #12141c;
}
.hv-scell-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-scell:active .hv-scell-th { transform: scale(.97); }
.hv-scell-v {
  position: absolute; left: 5px; bottom: 5px;
  font-size: 10.5px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.hv-scell-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 6px; font-size: 11.5px; font-weight: 700; line-height: 1.32; color: #e8eaef;
}
.hv-scell-c { display: block; margin-top: 2px; font-size: 10.5px; color: #6f757f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 댓글 액션 (좋아요 / 답글 / 삭제) */
.hv-cmt-a { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.hv-cl, .hv-cr, .hv-cx {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 30px; padding: 0 7px;
  background: none; border: 0; border-radius: 8px;
  color: #6f757f; font-size: 11.5px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
.hv-cl svg { width: 14px; height: 14px; }
.hv-cl:active, .hv-cr:active, .hv-cx:active { background: rgba(255,255,255,.07); }
.hv-cl.on { color: #ff4d67; }
.hv-cl.on svg { fill: #ff4d67; }
.hv-cx { margin-left: auto; }
.hv-cx:active { color: #ff4d67; }

/* 대댓글 — 들여쓰기 + 세로 가이드 */
.hv-cmt-r {
  margin-left: 22px; padding-left: 12px;
  border-left: 2px solid rgba(255,255,255,.08);
}
.hv-cmt-r .hv-cmt-av { flex-basis: 24px; width: 24px; height: 24px; }

/* 답글 대상 바 */
.hv-replyto {
  display: flex; align-items: center; gap: 8px;
  margin: 0 14px; padding: 8px 12px;
  border-radius: 10px; background: rgba(61,107,255,.12);
  border: 1px solid rgba(61,107,255,.22);
  font-size: 11.5px; color: #aeb5c2;
}
.hv-replyto[hidden] { display: none; }
.hv-replyto b { color: #7fa0ff; font-weight: 800; }
.hv-replyto button {
  margin-left: auto; min-width: 28px; min-height: 28px;
  background: none; border: 0; color: #8a909c;
  font-size: 13px; cursor: pointer; touch-action: manipulation;
}

/* ============================================================
   뉴스 뷰어 = 페이지 (모달 아님)
   상단 ✕ 대신 ← 뒤로가기. 노치/세이프에어리어 고려.
============================================================ */
.news-viewer-header {
  height: auto;
  min-height: 52px;
  padding: calc(6px + env(safe-area-inset-top)) 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: #08080b;
}
.news-viewer-header button#news-viewer-close {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%;
  color: #e8eaef; cursor: pointer;
  touch-action: manipulation;
}
#news-viewer-close svg { width: 19px; height: 19px; }
#news-viewer-close:active { background: rgba(255,255,255,.09); }
#news-viewer-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 800; color: #e8eaef;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   news.html — 기사 '페이지'
============================================================ */
body[data-page="news"] { background: #08080b; }
body[data-page="news"] #app { padding-bottom: 94px; }

.np-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: calc(6px + env(safe-area-inset-top)) 8px 6px;
  min-height: 52px;
  background: rgba(8,8,11,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.np-back {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border: 0; border-radius: 50%; background: none;
  color: #e8eaef; cursor: pointer; touch-action: manipulation;
}
.np-back svg { width: 19px; height: 19px; }
.np-back:active { background: rgba(255,255,255,.09); }
.np-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 800; color: #e8eaef;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-ext {
  flex: 0 0 auto; padding: 0 8px;
  font-size: 12px; font-weight: 700; color: #8a909c; text-decoration: none;
}
.np-main { padding: 0; }

/* .news-viewer-reader 는 옛 모달 무대용으로 position:absolute; inset:0 이다.
   페이지에선 그러면 헤더 밑으로 깔린다 → 일반 흐름으로 되돌린다. */
body[data-page="news"] .news-viewer-reader {
  position: static; inset: auto; overflow: visible;
  background: transparent;
  padding: 16px 16px 28px;
}
body[data-page="news"] .news-viewer-fallback {
  position: static; inset: auto;
  min-height: 60vh;
}

/* 탭 아이콘 — 4개 탭 모두 SVG (이모지는 기기마다 크기가 달라 정렬이 흔들린다) */
.tab-item {
  display: inline-flex; align-items: center; gap: 5px;
}
.tab-ic { width: 16px; height: 16px; flex: 0 0 16px; display: block; }
/* 유튜브만 브랜드 컬러(빨강)라 살짝 크게 잡아 광학 무게를 맞춘다 */
.tab-yt .yt-ic { width: 17px; height: 17px; flex: 0 0 17px; }

/* 검색 결과 — 핫유튜브 섹션 */
.sr-sec-head.sr-yt { display: flex; align-items: center; gap: 6px; }
.sr-sec-head .yt-ic { width: 17px; height: 17px; flex: 0 0 17px; }
.sr-badge-short {
  position: absolute; right: 5px; bottom: 5px;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255,60,86,.92);
  font-size: 10px; font-weight: 900; color: #fff;
}

/* 뉴스 카드 통계 아이콘 (이모지 → SVG) */
.st-ic {
  width: 14px; height: 14px; display: block; flex: 0 0 14px;
}
.sr-stats { display: flex; align-items: center; gap: 10px; }
.sr-stats span { display: inline-flex; align-items: center; gap: 4px; }
.gn-cardstats span { display: inline-flex; align-items: center; gap: 4px; }

/* 갈라뉴스 카드 — 저장 / 공유 버튼 */
.gn-cardstats .gnc-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: none; border: 0; border-radius: 8px;
  color: #8a93a6; cursor: pointer; touch-action: manipulation;
}
.gn-cardstats .gnc-act:active { background: rgba(255,255,255,.07); }
.gn-cardstats .gn-save-btn.on { color: #f5c518; }
.gn-cardstats .gn-save-btn.on .st-ic { fill: #f5c518; }

/* 갈라뉴스 상세 액션바 아이콘 (이모지 → SVG) */
.gn-act .ic-like, .gn-act .ic-dislike, .gn-act .ic-comment,
.gn-act .ic-bookmark, .gn-act .ic-share {
  width: 17px; height: 17px; display: block; flex: 0 0 17px;
}
.gn-act.on.like .ic-like { fill: rgba(109,139,255,.25); }
.gn-act.on.dislike .ic-dislike { fill: rgba(255,111,134,.25); }
.gn-act.on.save .ic-bookmark { fill: #f5c518; }
.gnc-title { display: flex; align-items: center; gap: 6px; }
.gnc-title .ic-comment { width: 16px; height: 16px; flex: 0 0 16px; }

/* 갈라뉴스 카드 — 좋아요/싫어요 (카드에서 바로 누를 수 있다) */
.gn-cardstats .gnc-cnt {
  display: inline-flex; align-items: center; gap: 4px;
  width: auto; min-width: 30px; height: 30px; padding: 0 7px;
  font-size: 12px; color: #8a93a6;
}
.gn-cardstats .gnc-cnt b { font-weight: 700; font-variant-numeric: tabular-nums; }
.gn-cardstats .gn-like-btn.on { color: #6d8bff; }
.gn-cardstats .gn-like-btn.on .st-ic { fill: rgba(109,139,255,.25); }
.gn-cardstats .gn-dislike-btn.on { color: #ff6f86; }
.gn-cardstats .gn-dislike-btn.on .st-ic { fill: rgba(255,111,134,.25); }

/* 섹션 제목 아이콘 (이모지 → SVG). 탭 아이콘과 같은 도형·규약. */
.section-title, .tr-group-head, .hv-sec-t {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sec-ic { width: 17px; height: 17px; flex: 0 0 17px; display: block; }
/* 큰 제목(핫트렌드 키워드, 18px)은 아이콘도 그만큼 키운다 */
.section-title .sec-ic { width: 19px; height: 19px; flex: 0 0 19px; }

/* ============================================================
   갈라뉴스 홈 (섹션형 재편)
============================================================ */
/* 속보 티커 — 왼쪽으로 계속 흐른다 */
.nh-break {
  display: flex; align-items: center; gap: 8px;
  margin: 0 -16px 14px; padding: 9px 16px;
  background: linear-gradient(90deg, rgba(255,60,86,.14), rgba(255,60,86,.03));
  border-top: 1px solid rgba(255,60,86,.22); border-bottom: 1px solid rgba(255,60,86,.22);
}
.nh-break-tag {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 900; color: #ff5b6e;
}
.nh-break-tag svg { width: 13px; height: 13px; }
.nh-break-mask { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.nh-break-flow { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: nhFlow linear infinite; }
.nh-break-flow:hover { animation-play-state: paused; }
.nh-break-seg { display: inline-flex; align-items: center; }
@keyframes nhFlow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.nh-break-item {
  flex: 0 0 auto; background: none; border: 0; padding: 0 2px;
  color: #e8eaef; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.nh-break-item:active { color: #ff8a97; }
.nh-break-dot { color: #ff5b6e; padding: 0 10px; font-size: 10px; }

/* 섹션 헤더 */
.nh-sec { margin: 0 0 24px; }
.nh-sec-h { display: flex; align-items: center; gap: 6px; padding: 0 2px 12px; }
.nh-sec-h .sec-ic { width: 17px; height: 17px; }
.nh-sec-t { font-size: 16px; font-weight: 900; letter-spacing: -.2px; }
.nh-sec-s { font-size: 11.5px; color: #6f757f; font-weight: 700; }
.nh-live {
  width: 7px; height: 7px; border-radius: 50%; background: #ff3c56;
  box-shadow: 0 0 0 0 rgba(255,60,86,.7); animation: nhLive 1.6s infinite;
}
@keyframes nhLive { 70%,100% { box-shadow: 0 0 0 6px rgba(255,60,86,0); } }

/* 히어로 */
.nh-block { margin: 0 -16px 20px; }
.nh-hero {
  position: relative; display: block; width: 100%; aspect-ratio: 16/10;
  padding: 0; border: 0; background: #0d0f16; cursor: pointer; overflow: hidden;
  text-align: left; touch-action: manipulation;
}
.nh-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nh-hero-sh { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.35) 48%, rgba(0,0,0,.05) 100%); }
.nh-hero-badge {
  position: absolute; top: 12px; left: 16px; padding: 5px 10px; border-radius: 999px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 900; color: #fff;
}
.nh-hero-tx { position: absolute; left: 16px; right: 16px; bottom: 14px; display: block; }
.nh-hero-cat { font-size: 11px; font-weight: 800; color: #7fa0ff; }
.nh-hero-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 4px; font-size: 18px; font-weight: 800; line-height: 1.32; color: #fff;
}
.nh-hero-m { display: block; margin-top: 6px; font-size: 11.5px; color: rgba(255,255,255,.72); }

/* 가로 선반(미니 카드) */
.nh-shelf { display: flex; gap: 11px; margin: 0 -16px; padding: 0 16px 4px;
  overflow-x: auto; scrollbar-width: none; scroll-padding-left: 16px; }
.nh-shelf::-webkit-scrollbar { display: none; }
.nh-mini {
  flex: 0 0 190px; scroll-snap-align: start; display: block; padding: 0;
  background: none; border: 0; text-align: left; cursor: pointer; touch-action: manipulation;
}
.nh-mini-th { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 10px;
  overflow: hidden; background: #12141c; }
.nh-mini-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nh-mini:active .nh-mini-th { transform: scale(.97); }
.nh-mini-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 8px; font-size: 13px; font-weight: 700; line-height: 1.35; color: #e8eaef;
}
.nh-mini-m { display: block; margin-top: 3px; font-size: 11px; color: #6f757f; }

/* 랭킹 리스트 */
.nh-ranklist { display: flex; flex-direction: column; }
.nh-rank {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 2px;
  background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.05);
  text-align: left; cursor: pointer; touch-action: manipulation;
}
.nh-rank:active { background: rgba(255,255,255,.04); }
.nh-rank-no {
  flex: 0 0 22px; font-size: 16px; font-weight: 900; color: #5c6270; text-align: center;
}
.nh-rank-no.hot { color: #ff3c56; }
.nh-rank-b { flex: 1 1 auto; min-width: 0; }
.nh-rank-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; font-weight: 700; line-height: 1.35; color: #e8eaef;
}
.nh-rank-m { display: block; margin-top: 2px; font-size: 11px; color: #6f757f; }
.nh-rank-th { flex: 0 0 62px; width: 62px; height: 44px; border-radius: 8px;
  overflow: hidden; background: #12141c; }
.nh-rank-th img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 카테고리 더보기 */
.nh-more {
  margin-top: 10px; padding: 8px 0; width: 100%;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; color: #aeb5c2; font-size: 12.5px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
.nh-more:active { background: rgba(255,255,255,.08); }

/* 뉴스 패널: 좌우 16px 여백(카드 폭을 다른 페이지와 통일). 히어로/선반은 -16px로 풀블리드 */
.tab-panel[data-panel="news"] { padding: 0 16px; }
.tab-panel[data-panel="news"] .news-card { padding-left: 0; padding-right: 0; }

/* ============================================================
   핫트렌드 고도화 — 실시간 급상승 모멘텀 보드 + 가로 캐러셀
============================================================ */
.tm-board { display: flex; flex-direction: column; gap: 2px; }
.tm-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 4px; background: none; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-align: left; cursor: pointer; touch-action: manipulation;
}
.tm-row:active { background: rgba(255,255,255,.04); }
.tm-rank {
  flex: 0 0 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #5c6270;
}
.tm-rank.r1 { color: #ff3c56; } .tm-rank.r2 { color: #ff7a3c; } .tm-rank.r3 { color: #ffb03c; }
.tm-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tm-kw { font-size: 14px; font-weight: 800; color: #e8eaef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.tm-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ff3c56, #ff8a3c);
  transform-origin: left; animation: tmGrow .6s cubic-bezier(.2,.8,.3,1);
}
@keyframes tmGrow { from { transform: scaleX(0); } }
.tm-cnt { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #8a909c; font-variant-numeric: tabular-nums; }
.tm-board .tr-more { margin-top: 10px; }

/* 가로 캐러셀 카드 (통합 트렌드) */
.tt-shelf {
  display: flex; gap: 11px; margin: 0 -16px; padding: 0 16px 4px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: 16px;
}
.tt-shelf::-webkit-scrollbar { display: none; }
.tt-card {
  flex: 0 0 190px; scroll-snap-align: start;
  display: flex; flex-direction: column; padding: 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  text-decoration: none; touch-action: manipulation;
}
.tt-th {
  position: relative; display: block; width: 100%; aspect-ratio: 16/9;
  border-radius: 10px; overflow: hidden; background: #12141c;
}
.tt-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-card:active .tt-th { transform: scale(.97); }
.tt-rk {
  position: absolute; top: 6px; left: 6px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #fff; background: rgba(0,0,0,.7); backdrop-filter: blur(3px);
}
.tt-rk.r1 { background: #ff3c56; } .tt-rk.r2 { background: #ff7a3c; } .tt-rk.r3 { background: #ffa53c; }
.tt-tag { margin-top: 8px; font-size: 11px; font-weight: 700; color: #7fa0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 3px; font-size: 13px; font-weight: 700; line-height: 1.35; color: #e8eaef;
}
.tt-meta { display: flex; gap: 10px; margin-top: 5px; font-size: 11px; color: #6f757f; }
.tt-meta span { display: inline-flex; align-items: center; gap: 3px; }
.tt-meta .st-ic { width: 12px; height: 12px; }
/* 이슈 진영 바 */
.tt-bar { height: 4px; margin-top: 6px; border-radius: 999px; background: #ff4d6733; overflow: hidden; }
.tt-bar-pro { display: block; height: 100%; background: #4a7bff; border-radius: 999px; }
/* 예측 카드 — 썸네일 대신 확률 그라디언트 */
.tt-pred-th {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(61,107,255,.28), rgba(109,139,255,.1));
  border: 1px solid rgba(61,107,255,.25);
}
.tt-pred-pct { font-size: 30px; font-weight: 900; color: #9db6ff; letter-spacing: -1px; }

/* ============================================================
   핫트렌드 — 타임스퀘어 라이브 이펙트
============================================================ */
/* LIVE 배지 */
.tm-live {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 2px 0 12px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,60,90,.12); border: 1px solid rgba(255,60,90,.3);
  font-size: 11px; font-weight: 900; letter-spacing: .5px; color: #ff5b6e;
}
.tm-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ff3c56;
  box-shadow: 0 0 0 0 rgba(255,60,86,.7); animation: tmLive 1.5s infinite;
}
@keyframes tmLive { 70%,100% { box-shadow: 0 0 0 6px rgba(255,60,86,0); } }

/* 모멘텀 행 순차 등장 */
.tm-row { opacity: 0; transform: translateY(8px); animation: tmIn .5s ease forwards; animation-delay: calc(var(--i) * 55ms); }
@keyframes tmIn { to { opacity: 1; transform: none; } }

/* 상위 막대 빛 스윕(네온 스캔) */
.tm-fill { position: relative; overflow: hidden; }
.tm-fill.shine::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform: translateX(-100%); animation: tmSweep 2.2s ease-in-out infinite;
}
@keyframes tmSweep { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(320%); } }

/* 카운트 숫자 — 시세판 느낌 */
.tm-cnt { color: #ff8a3c; font-variant-numeric: tabular-nums; }
.tm-row:nth-child(1) .tm-cnt, .tm-board .tm-row:nth-child(2) .tm-cnt { color: #ff5b6e; }

/* 상위 3위 순위 네온 펄스 */
.tm-rank.r1, .tm-rank.r2, .tm-rank.r3 { animation: tmRankGlow 2s ease-in-out infinite; }
@keyframes tmRankGlow { 0%,100% { text-shadow: none; } 50% { text-shadow: 0 0 8px currentColor; } }

/* 도메인 카드 순차 등장 */
.tt-card.tt-in { opacity: 0; transform: translateY(10px) scale(.98); animation: ttIn .5s cubic-bezier(.2,.8,.3,1) forwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes ttIn { to { opacity: 1; transform: none; } }

/* 예측 확률 카드 — 은은한 글로우 맥동 */
.tt-pred-th { animation: ttPredGlow 3.5s ease-in-out infinite; }
@keyframes ttPredGlow { 0%,100% { box-shadow: inset 0 0 0 0 rgba(109,139,255,0); } 50% { box-shadow: inset 0 0 26px 0 rgba(109,139,255,.28); } }

@media (prefers-reduced-motion: reduce) {
  .tm-row, .tt-card.tt-in { opacity: 1; transform: none; animation: none; }
  .tm-fill.shine::after, .tm-rank.r1, .tm-rank.r2, .tm-rank.r3, .tt-pred-th, .tm-live-dot { animation: none; }
}

/* 광장 트렌드 카드 — 제목 중심(썸네일 없어도 멋지게) */
.tt-talk .tt-talk-body {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%; aspect-ratio: 16/11; border-radius: 10px; overflow: hidden;
  padding: 11px 12px; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.08);
}
.tt-talk .tt-quote {
  position: absolute; top: 2px; left: 9px;
  font-size: 44px; line-height: 1; color: rgba(255,255,255,.16); font-weight: 900;
}
.tt-talk .tt-talk-title {
  position: relative;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; font-weight: 800; line-height: 1.3; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.tt-talk:active .tt-talk-body { transform: scale(.97); }

/* ═══ 탭 개편: 기본 라인 SVG ↔ 선택 시 컬러 SVG (유튜브 문법 전 탭 통일) ═══ */
.tab-item .ic-color { display: none; }
.tab-item.active .ic-color { display: block; }
.tab-item.active .ic-line { display: none; }
/* 5탭이 한눈에 — 라벨 축약에 맞춰 여백 타이트 */
.tabs-header { gap: 4px; }
.tab-item { padding: 8px 9px; font-size: 12.5px; gap: 5px; }
.tab-ic { width: 15px; height: 15px; flex: 0 0 15px; }

/* ═══ 5탭 폭 맞춤(2026-07-22, 사장님) — 가로 스크롤 금지, 화면 폭에 균등 분할.
   좁은 기기에선 폰트·아이콘·간격이 자동으로 살짝 줄어 항상 한 줄에 다 보인다.
   ⚠️ 안드로이드 웹뷰는 폰트 부스팅(text autosizing)으로 글자를 몰래 키워
   탭 밖으로 삐져나온다(아이폰은 정상) — text-size-adjust:100%와
   max-height 지정으로 부스팅을 무력화한다. */
.tabs-header { overflow-x: hidden; gap: 3px; padding-left: 8px; padding-right: 8px; }
.tab-item {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; justify-content: center; align-items: center;
  padding: 8px 1px; gap: 3px;
  font-size: clamp(10px, 2.9vw, 12px);
  letter-spacing: -0.3px;
  white-space: nowrap; overflow: hidden;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  max-height: 34px;   /* 안드로이드 폰트 부스팅은 max-height 있는 요소를 건너뛴다 */
}
.tab-ic { width: 13px; height: 13px; flex: 0 0 13px; }

/* ═══ 🔥 트민남·트민녀 히어로 + 앱 유도 (핫트렌드 상단) ═══ */
.trd-hero{position:relative;overflow:hidden;margin:2px 0 18px;padding:18px 16px 16px;border-radius:18px;
  background:linear-gradient(140deg,#1a1410,#120d0a 60%,#0d0a08);border:1px solid rgba(255,120,60,.22)}
.trd-hero-glow{position:absolute;top:-40%;right:-20%;width:60%;height:180%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,92,43,.28),transparent 70%);animation:trdGlow 3.4s ease-in-out infinite}
@keyframes trdGlow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
.trd-hero-badge{position:relative;display:inline-block;font-size:12px;font-weight:900;color:#ff8a3d;
  padding:5px 11px;border-radius:999px;background:rgba(255,92,43,.14);border:1px solid rgba(255,92,43,.32);margin-bottom:10px}
.trd-hero-title{position:relative;margin:0 0 6px;font-size:20px;font-weight:950;letter-spacing:-.5px;color:#fff;line-height:1.3}
.trd-hero-title b{color:#ff7a3d}
.trd-hero-sub{position:relative;margin:0;font-size:13px;line-height:1.6;color:#b7bdc9}
.trd-app-cta{position:relative;display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:13px 15px;
  border:0;border-radius:14px;cursor:pointer;text-align:left;
  background:linear-gradient(135deg,#ff6a3d,#ff3d67);box-shadow:0 10px 26px rgba(255,61,103,.32);
  animation:trdCtaPulse 1.8s ease-in-out infinite}
.trd-app-cta:active{transform:scale(.98)}
@keyframes trdCtaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.trd-app-cta .tac-ic{font-size:22px;line-height:1}
.trd-app-cta .tac-tx{flex:1;display:flex;flex-direction:column;min-width:0}
.trd-app-cta .tac-tx b{font-size:14.5px;font-weight:900;color:#fff}
.trd-app-cta .tac-tx small{font-size:11.5px;color:rgba(255,255,255,.82);margin-top:2px}
.trd-app-cta .tac-go{font-size:20px;font-weight:900;color:#fff}
@media (prefers-reduced-motion:reduce){.trd-hero-glow,.trd-app-cta{animation:none}}

/* 🔎 영역 검색(뉴스·핫튜브 패널 상단) — 리스트 텍스트 필터 (2026-07-27) */
.area-search { display: flex; align-items: center; gap: 8px; margin: 6px 16px 10px;
  background: #12141c; border: 1px solid #232634; border-radius: 12px; padding: 12px 12px;
  min-height: 46px; cursor: text; }
.area-search svg { width: 17px; height: 17px; color: #8b93a7; flex: 0 0 auto; }
/* font-size 16px 미만이면 iOS가 포커스 시 자동 확대 → 반드시 16px */
.area-search input { flex: 1; min-width: 0; background: transparent; border: none;
  color: #fff; font-size: 16px; outline: none; padding: 0;
  -webkit-appearance: none; appearance: none; }
.area-search input::-webkit-search-cancel-button { display: none; }
.area-search input::placeholder { color: #6b7280; }
.area-search-clear { flex: 0 0 auto; background: #2a2e3c; color: #cfd6e6; border: none;
  width: 20px; height: 20px; border-radius: 50%; font-size: 10px; cursor: pointer; line-height: 1; }
.area-empty { text-align: center; color: #8b909b; font-size: 13px; padding: 40px 20px; }