:root {
  color-scheme: light dark;   /* 다크 시 네이티브 스크롤바·range input·폼 컨트롤이 테마 따라감 */
  /* 크림 정체성(라이트): 회백 → 따뜻한 종이톤. 텍스트는 잉크빛으로 대비 확보 */
  --bg: #f3ede0;
  --surface: #fdfbf6;
  --border: #e4d9c4;
  --border-soft: #ece3d2;
  --text: #201e19;
  --text-soft: #4a4640;
  --muted: #635e54;   /* AA: #f3ede0 배경 대비 4.5:1 확보 (기존 #6f6a5f는 4.3:1로 미달) */
  /* 브랜드 파랑 — 사이트의 파랑은 이 토큰 하나다(2026-07-21 색 감사: docs/key-color-audit.html).
     기본 용도 = 인터랙션(누르는 것)·선택 상태·로고.
     정보 표시(평가 라벨·할인 배지·언어 배지·지원 아이콘)에도 쓰되 꼭 필요한 곳만 제한적으로 —
     한 화면에서 파랑이 시선을 여러 갈래로 쪼개지 않는 선을 지킨다.
     평가 전용 색(--rl-* 4단계)과 하드코딩 스팀색(#66c0f4 계열)은 폐기됐다.
     색 대비상 --accent는 카드/서피스 위에서만 소형 텍스트에 쓴다(--bg 직상 4.47:1 → --accent-strong 사용). */
  --accent: #1a6dc4;
  --accent-soft: rgba(26, 109, 196, 0.10);
  --accent-strong: #14559e;
  --positive: #5a8f6a;
  --header-h: 60px;
  --radius: 14px;
  /* 그림자는 실제로 떠 있는 것(모달·스낵바·툴팁)에만 쓴다. 피드 카드처럼 흐름 안에 있는 면은
     보더로만 구분한다 — 은은한 그림자는 스크롤 중 얼룩처럼 보였다. */
  --shadow-lg: 0 1px 2px rgba(31, 30, 28, 0.06), 0 12px 28px rgba(31, 30, 28, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1b19;
    --surface: #26241f;
    /* 보더 대비 미세 상향 — 미디어가 서피스 위로 더 떠오르게 */
    --border: #3a3529;
    --border-soft: #302d26;
    --text: #ece6d5;
    --text-soft: #c0bba9;
    --muted: #8a8473;
    --accent: #5aa9e6;
    --accent-soft: rgba(90, 169, 230, 0.16);
    --accent-strong: #7dbdf0;
    --positive: #7eb191;
    --shadow-lg: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.25);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }

/* 탭 즉시 반응 (모바일 더블탭 확대 지연 300ms 제거) */
button, a, [role="button"], .vol-range, input[type="range"] { touch-action: manipulation; }

/* 스크린리더 전용 (시각적으로 숨김) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* 본문 바로가기 — 평소 숨김, 키보드 포커스 시 노출 */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 16px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  transform: translateY(-150%); transition: transform 0.15s ease;
}
.skip-link:focus-visible { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }

/* 헤더 */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(243, 237, 224, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
@media (prefers-color-scheme: dark) {
  .header { background: rgba(28, 27, 25, 0.82); }
}

.header-inner {
  max-width: 600px;
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.5px;
}
.logo-mark {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-soft);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  font-family: inherit;
}
.icon-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.icon-btn:active { transform: scale(0.95); }
.icon-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}
.icon-btn[disabled]:hover { background: transparent; color: var(--text-soft); }
.icon-btn svg { width: 20px; height: 20px; stroke-width: 1.8; }

/* 피드 */
.feed {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.feed-intro {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  letter-spacing: -0.1px;
}
.feed-intro b { color: var(--accent); font-weight: 700; }
.feed-intro .intro-em { color: var(--text-soft); font-weight: 600; }
.feed-relax-note {
  margin: 2px auto 2px;
  max-width: 540px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-soft);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 9px 16px;
  letter-spacing: -0.1px;
}
.feed-relax-note b { color: var(--accent); font-weight: 700; }
.feed-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 4px;
}
.feed-divider::before, .feed-divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--border-soft);
}
.feed-divider span {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: -0.1px;
  text-align: center;
  flex: 0 1 auto;
}
.feed-divider b { color: var(--accent); font-weight: 700; }
.feed-divider.is-loop span { color: var(--text-soft); }
#feedCards { display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 600px) { #feedCards { gap: 20px; } }
/* DOM 윈도잉 스페이서: 뷰포트에서 멀리 벗어나 DOM에서 회수한 카드들의 높이를 대신 차지
   (스크롤바·문서 높이 보존). height 0일 땐 display:none으로 flex gap에서도 제외. */
.feed-spacer { display: none; flex: 0 0 auto; }
.intro-filter {
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}
.intro-filter:hover { border-bottom-color: var(--accent); }

/* 카드 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  /* 무한 스크롤 성능 방어: 화면 밖 카드는 렌더 건너뜀. contain-intrinsic-size로 스크롤바 튐 방지
     추정 높이는 실제 카드에 근접해야 위로 스크롤 시 문서 높이 출렁임(앵커 보정 연쇄)이 없다
     — 데스크톱(폭 600px) 실측 ≈ 620px, 모바일은 아래 미디어쿼리에서 480px */
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}
@media (max-width: 600px) { .card { contain-intrinsic-size: auto 480px; } }

.card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--border);
  overflow: hidden;
  /* 미디어를 종이(서피스) 위 인쇄물처럼 프레이밍 — 본문과의 경계 헤어라인 */
  border-bottom: 1px solid var(--border-soft);
}
/* 캐러셀 트랙: 슬라이드(영상 1 + 스크린샷 N)를 가로로 늘어놓고 transform으로 이동 */
.carousel-track {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
.slide img,
.slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease, filter 0.4s ease, transform 0.4s ease;
}
.slide video {
  opacity: 0;
  pointer-events: none;
}
/* 영상이 활성(재생 중이거나 일시정지로 멈춘 프레임 포함)이면 영상 표시, 썸네일 숨김.
   media-ready는 영상의 첫 프레임이 실제로 준비된 뒤에만 붙는다 → HLS 로딩 중 빈 화면 대신 썸네일이 계속 보이다가 크로스페이드 */
.card-media.has-video.media-ready .slide-video video { opacity: 1; }
.card-media.has-video.media-ready .slide-video img { opacity: 0; }

/* 영상 로딩 중(영상 요소는 생겼지만 첫 프레임 아직) — 회색+기본 재생버튼 대신
   이미 떠 있는 썸네일을 블러 + 미세한 밝기 호흡으로 "불러오는 중"을 알린다(요즘 SNS 방식).
   자동재생 대상이 아닌 카드/트레일러 없는 카드는 has-video가 없어 선명하게 유지된다. */
.card-media.has-video:not(.media-ready) .slide-video img {
  transform: scale(1.08);   /* 블러 가장자리 비침 방지 */
  animation: trailer-loading 2.2s ease-in-out infinite;
}
@keyframes trailer-loading {
  0%, 100% { filter: blur(14px) brightness(0.85); }
  50%      { filter: blur(14px) brightness(1.08); }
}
/* 모션 최소화 선호 시: 호흡은 끄고 정적 블러만 유지 */
@media (prefers-reduced-motion: reduce) {
  .card-media.has-video:not(.media-ready) .slide-video img {
    animation: none;
    filter: blur(14px) brightness(0.95);
  }
}

/* 영상 재생 중에만 상단 평가/언어 라벨 숨김 (이미지 슬라이드에선 계속 보임) */

/* 좌/우 클릭 영역 (PC). 모바일은 스와이프가 주 동작 */
.car-zone {
  position: absolute;
  top: 0;
  bottom: 24px;
  width: 26%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 3;
  padding: 0 8px;
  -webkit-tap-highlight-color: transparent;
}
.car-zone.prev { left: 0; justify-content: flex-start; }
.car-zone.next { right: 0; justify-content: flex-end; }
.car-zone svg {
  width: 30px; height: 30px;
  padding: 5px;
  border-radius: 50%;
  background: rgba(0,0,0,0.42);
  color: #fff;
  stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.card:hover .car-zone { opacity: 1; }
@media (hover: none) {
  .car-zone { width: 22%; }   /* 터치 기기: 화살표는 숨기되 탭 영역은 유지 */
  .car-zone svg { display: none; }
}
/* 미디어 영역 키보드 조작(←/→ 넘기기, Enter 재생/일시정지, M 소리) — 포커스 링은 안쪽으로 */
.card-media:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* 페이지 점 */
.car-dots {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}
/* 영상 재생 중엔 점 숨김 → PC는 호버 시, 모바일은 영상을 멈추면(=재생 해제) 다시 보임 */
.card-media.playing .car-dots { opacity: 0; }
@media (hover: hover) {
  .card-media.playing:hover .car-dots { opacity: 1; }
}
.car-dots .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  transition: background 0.2s ease, transform 0.2s ease;
}
.car-dots .dot.on { background: #fff; transform: scale(1.25); }

/* 영상 오디오 컨트롤 (우측 하단). 재생 중에만 표시 */
.vol-control {
  display: none;
  position: absolute;
  right: 8px; bottom: 8px;
  z-index: 4;
  flex-direction: column;
  align-items: center;
}
.card-media.playing .vol-control { display: flex; }
.vol-btn {
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.vol-btn:hover { background: rgba(0,0,0,0.72); }
.vol-btn svg { width: 17px; height: 17px; }
.vol-panel {
  display: none;
  position: absolute;
  bottom: 36px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  border-radius: 999px;
  padding: 10px 7px;
}
@media (hover: hover) { .vol-control:hover .vol-panel { display: block; } }
@media (hover: none) { .vol-control[data-muted="0"] .vol-panel { display: block; } }
.vol-range {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px; height: 72px;
  accent-color: var(--accent);
  cursor: pointer;
}

.media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 30%, transparent 65%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

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

/* 제목 + 평가/언어 배지를 한 줄에. 배지는 우측 정렬 + 제목 전체 높이의 세로 중앙 정렬
   (1줄이면 그 줄과, 2줄 이상이면 제목 블록 중앙과 정렬) */
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.card-title {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-badges {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 제목 첫 줄 높이(17px * 1.35)에 맞춰 세로 중앙 정렬 — 제목이 1줄이든 2줄이든 첫 줄과 정렬 */
  min-height: calc(17px * 1.35);
}
/* 평가 라벨. 등급별 색 차등은 폐기(2026-07-21) — 4단계의 대비 간격이 4.09~5.98에 몰려 육안 구분이 안 됐고,
   홈은 CSS(.overwhelming/.very/.positive/.mostly)와 마크업(REVIEW_TIERS의 positive/mixed/negative)의
   클래스명이 어긋나 차등이 작동하지도 않았다(긍정 4등급 단일색화 + 부정이 더 진한 파랑). 색은 키컬러 하나로,
   등급 구분은 라벨 텍스트가 담당한다. 클래스명은 전역 .review와 충돌 피하려 .rl. */
.card-badges .rl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.1px;
  white-space: nowrap;
  color: var(--accent);
}
/* 리뷰 수: 평가 라벨 옆 신뢰 신호. 라벨보다 한 톤 낮게(muted) 위계 부여 */
.card-badges .rl .rl-count {
  color: var(--muted);
  font-weight: 600;
}
/* 접속 언어 지원 배지 — 2상태. 지원=accent 글자+실선(스팀덱/컨트롤러와 동일 위계), 미지원=muted 글자+점선. */
.card-badges .lang {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.1px;
  white-space: nowrap;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  padding: 1px 7px;
  border-radius: 999px;
  cursor: default;
}

.card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-desc.expanded {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
/* 자동번역 표시 — 눈에 띄되 과하지 않게 (은은한 muted 톤) */
.mt-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-soft);
  padding: 0 5px;
  border-radius: 999px;
  vertical-align: 2px;
}
/* AI 한 줄 소개 + 더 보기 액션 라인 — flex 정렬 (AI 소개 좌측, 버튼 우측) */
.desc-action {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 9px;
}
.ai-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
/* 한 줄 AI 소개는 '더 보기' 펼침 후에도 유지(상세 페이지와 동일). [hidden]은 방어용 규칙만 남김 */
.ai-line[hidden] { display: none; }
/* AI 배지 = 정보(읽는 것). 브랜드 알약 → 중립 모노톤. 크게 안 외치게 */
.ai-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-soft);
  padding: 0 5px;
  border-radius: 999px;
}
.ai-tagline {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}
/* '더 보기'로 펼친 AI 종합 요약 (스팀 상세 소개글 아래, 장르/출시일/가격 위) */
.card-ai-summary {
  font-size: 13px;
  line-height: 1.72;
  color: var(--text-soft);
  margin: 2px 0 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border-soft);
}
.card-ai-summary[hidden] { display: none; }
.card-ai-summary .ai-badge { margin-right: 6px; }
/* 설명 더 보기/접기 (긴 설명만 노출). 텍스트만 펼침. desc-action 라인의 우측 끝에 배치 */
.desc-more {
  display: inline-block;
  flex-shrink: 0;
  margin-left: auto; /* AI 소개 유무와 무관하게 항상 우측 정렬 */
  padding: 2px 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  cursor: pointer;
  white-space: nowrap;
}
.desc-more:hover { color: var(--accent); }
.desc-more[hidden] { display: none; }
/* 더 보기로 펼친 스팀 '게임 정보' 텍스트 */
.card-about {
  font-size: 13px;
  line-height: 1.72;
  color: var(--text-soft);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 2px 0 14px;
  padding-top: 11px;
  border-top: 1px solid var(--border-soft);
}
.card-about[hidden] { display: none; }
.card-about .about-loading { color: var(--muted); }

.card-bottom {
  display: flex;
  align-items: center;
  /* 좁은 폭(모바일)에서 할인 가격 블록이 넓어지면, 좌측 메타(장르·출시일)를 쪼개는 대신
     가격 블록을 통째로 다음 줄로 떨어뜨린다. → 장르·출시일 한 줄 유지. (row-gap 8 / col-gap 12)
     정렬은 .price의 margin-left:auto가 담당 — 한 줄이든 래핑되든 가격을 항상 우측에 붙인다.
     (space-between은 래핑 시 홀로 남은 가격을 좌측(flex-start)으로 보내 고아처럼 보였다.) */
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: -0.1px;
  flex-wrap: wrap;
}
.card-meta .sep {
  width: 3px;
  height: 3px;
  background: var(--muted);
  border-radius: 50%;
  opacity: 0.5;
}
.card-meta .genre { color: var(--text-soft); font-weight: 500; }
.card-meta .genre.more:not(.expanded) { cursor: pointer; }
.card-meta .genre.more:not(.expanded):hover { color: var(--accent); }

/* 컨트롤러 / Steam Deck 지원 아이콘 스트립 — card-meta 좌측. 지원 시에만 렌더됨(우측 card-badges와 위계 분리) */
.card-caps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 2px;
}
.cap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  color: var(--accent);          /* 지원(강조) = 키컬러 */
  cursor: default;
}
.cap.cap-partial { color: var(--muted); }   /* 일부 지원 / Playable = 한 톤 낮게 */
.cap svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
  white-space: nowrap;
  flex-shrink: 0;      /* 좁은 폭에서 가격을 찌그러뜨리지 않고 통째로 다음 줄로(card-bottom flex-wrap과 짝) */
  margin-left: auto;   /* 남는 가로 공간을 흡수 → 같은 줄이면 우측 끝, 래핑되면 그 줄에서도 우측 정렬 */
}
.price .original {
  font-size: 11.5px;
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 500;
}
.price .discount-tag {
  background: var(--accent);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.price.free { color: var(--positive); }
/* 할인 가격은 누르면 할인 상세(종류·종료일) 모달을 연다 */
.price.clickable { cursor: pointer; }
.price.clickable .price-info {
  width: 13px; height: 13px; flex-shrink: 0;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.55; transition: stroke 0.15s ease, opacity 0.15s ease;
}
.price.clickable:hover .price-info,
.price.clickable:focus-visible .price-info { stroke: var(--accent); opacity: 1; }
.price.clickable:hover .discount-tag { background: var(--accent-strong); }
.price.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* 평가 라벨 (이미지 위, 스팀 색상) */
/* 카드 링크: 앵커가 카드 전체를 감싸면 내부 버튼(컨트롤·더보기)이 앵커에 중첩돼 무효 HTML이 된다.
   → 미디어 위 오버레이 링크(마우스용) + 제목 링크(키보드/AT용)로 분리해 유효화. */
.media-link { position: absolute; inset: 0; z-index: 1; }   /* 컨트롤(car-zone z3·vol z4)이 상위라 그 위에서 클릭 가능 */
.title-link { color: inherit; text-decoration: none; }
.title-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* 액션 바 */
.card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  /* 좌우 = card-body 인셋(18px) − .act 버튼 좌우 패딩(10px) → 양끝 아이콘이 본문과 세로 정렬 */
  padding: 6px 8px 8px;
  border-top: 1px solid var(--border-soft);
}
.act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  letter-spacing: -0.2px;
}
.act svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.act:hover { background: var(--accent-soft); color: var(--accent); }
.act:active { transform: scale(0.93); }
.act.fav { margin-left: auto; }
.act.fav.on { color: var(--accent); }
.act.fav.on svg { fill: var(--accent); }
.act[data-act="similar"].on { color: var(--accent); background: var(--accent-soft); }

/* Games Like X: 인라인 "비슷한 게임" 스트립 (전용 페이지와 같은 물리 엔진) */
.sim-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.sim-panel.open { grid-template-rows: 1fr; }
.sim-inner { overflow: hidden; border-top: 1px solid var(--border-soft); }
.sim-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px 0; }
.sim-label { font-size: 13px; font-weight: 700; color: var(--text-soft); letter-spacing: -.2px; }
.sim-label .n { color: var(--accent); }
/* "더 보기"(.desc-more)와 동일 톤 — muted 텍스트 버튼, hover 시 accent */
.sim-all { margin-left: auto; padding: 2px 0; font-size: 12.5px; font-weight: 600; letter-spacing: -0.2px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.sim-all:hover { color: var(--accent); }
.sim-stage { position: relative; overflow: hidden; height: 176px; margin: 10px 0 0; touch-action: pan-y; cursor: grab; }
.sim-stage.dragging { cursor: grabbing; }
.sim-card { position: absolute; left: 50%; top: 0; width: 168px; margin-left: -84px; display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; will-change: transform; user-select: none; -webkit-user-drag: none; }
.sim-card img { -webkit-user-drag: none; }
.sim-thumb { width: 100%; aspect-ratio: 460/215; object-fit: cover; background: var(--border); border-bottom: 1px solid var(--border-soft); }
.sim-b { padding: 8px 10px 10px; }
.sim-t { font-size: 12.5px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-rl { font-size: 11px; font-weight: 700; color: var(--accent); }
.sim-rl .cnt { color: var(--muted); font-weight: 600; }
/* 소개는 항상 2줄 높이 확보 → 카드 높이 균일(1줄짜리도 빈 줄로 채워 정렬) */
.sim-g { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(11.5px * 1.45 * 2); }
.sim-dots { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 8px 0 12px; }
.sim-dots .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--border); border: 0; padding: 0; cursor: pointer; flex-shrink: 0; transition: width .25s ease, background .25s ease; }
.sim-dots .dot.on { width: 18px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sim-panel { transition: none; } .sim-dots .dot { transition: none; } }

/* Games Like X: "전체 보기" 오버레이 — 홈과 동일한 세로 카드 피드(홈 헤더 아래 원테이크).
   카드 목록은 홈 .feed/.card 클래스를 그대로 재사용하므로 여기엔 앵커 헤더만 정의한다. */
#glxOverlay { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 90; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; outline: none; }
#glxOverlay[hidden] { display: none; }
#glxOverlay .anchor { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 28px 20px 0; }
#glxOverlay .anchor-thumb { width: min(300px,72vw); aspect-ratio: 460/215; object-fit: cover; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--border); }
#glxOverlay .anchor-h1 { font-size: clamp(21px,5vw,26px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin: 0 0 6px; }
/* keep-all: 한글은 기본값(normal)이면 글자 단위로 끊겨 "매우 긍정적"이 "매/우 긍정적"으로 갈린다 → 어절 단위로 */
#glxOverlay .anchor-lead { font-size: 14px; line-height: 1.6; color: var(--text-soft); margin: 16px 0 0; max-width: 520px; word-break: keep-all; }
#glxOverlay .anchor-lead b { color: var(--accent-strong); font-weight: 700; }   /* --bg 직상 13~14px 볼드 — 라이트 --accent는 AA 4.5 미달(4.468)이라 strong 사용 */
#glxOverlay .anchor-lead .lead-tags { display: block; margin-top: 6px; }   /* 공유 태그 절만 줄바꿈 — 통계 문장과 시각 분리 */
#glxOverlay .anchor-meta { font-size: 12px; line-height: 1.6; color: var(--text-soft); margin: 0 0 14px; max-width: 520px; }
#glxOverlay .glx-item { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border-soft); padding-top: 20px; }
#glxOverlay .glx-card-head { text-align: center; }
#glxOverlay .glx-card-head h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; margin: 0; }
#glxOverlay .glx-card-head .glx-card-meta { font-size: 12px; line-height: 1.5; color: var(--text-soft); margin: 2px 0 0; }
#glxOverlay .glx-card-head .glx-card-why { font-size: 13px; line-height: 1.5; color: var(--text-soft); margin: 4px 0 0; }
#glxOverlay .glx-card-head .glx-card-why b { color: var(--accent-strong); font-weight: 700; }

/* 모달 (리뷰/태그 팝업) */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--surface);
  width: 100%; max-width: 600px; max-height: 82vh;
  border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(16px); transition: transform 0.22s ease;
  box-shadow: var(--shadow-lg);
}
.modal-backdrop.open .modal { transform: translateY(0); }
@media (min-width: 600px) {
  .modal-backdrop { align-items: center; padding: 20px; }
  .modal { border-radius: 16px; }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0;
}
.modal-title {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 필터 초기화 (헤더 X 왼쪽) — '더 보기'처럼 무채색 텍스트, hover 시 키 컬러. 필터 모달에서만 표시 */
.modal-reset {
  border: none; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 4px 2px; border-radius: 8px; flex-shrink: 0; white-space: nowrap; transition: color 0.15s;
}
.modal-reset:hover { color: var(--accent); }
.modal-reset[hidden] { display: none; }
.modal-close {
  border: none; background: transparent; color: var(--muted);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 8px; flex-shrink: 0;
}
.modal-close:hover { background: var(--accent-soft); color: var(--accent); }
/* 모달 내 뒤로(목록으로) — 사이트 정보 문서 뷰에서만 표시 */
.modal-back {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px;   /* 터치 타깃 확보 */
  border: none; background: transparent; color: var(--muted);
  cursor: pointer; padding: 2px 6px; border-radius: 8px; flex-shrink: 0;
}
.modal-back[hidden] { display: none; }
.modal-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modal-back:hover { background: var(--accent-soft); color: var(--accent); }
/* 사이트 정보 모달 문서 뷰 (독립 페이지 본문을 그대로 표시) */
.info-doc { padding: 4px 2px 14px; }
.info-doc .updated { color: var(--muted); font-size: 12.5px; margin: 10px 0 14px; }
.info-doc h2 { font-size: 15px; color: var(--text); margin: 22px 0 7px; }
.info-doc p, .info-doc li { color: var(--text-soft); font-size: 13.5px; line-height: 1.7; }
.info-doc p { margin: 6px 0; }
.info-doc ul { padding-left: 20px; margin: 6px 0; }
.info-doc li { margin: 4px 0; }
.info-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.modal-body { padding: 4px 18px 20px; overflow-y: auto; }

.reviews-head { font-size: 12.5px; color: var(--muted); font-weight: 700; padding: 12px 0 2px; letter-spacing: -0.1px; }
.reviews-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 8px; }
.rf-toggle {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text-soft); cursor: pointer; transition: all 0.15s;
}
.rf-toggle:not(.on):hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rf-toggle.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rf-toggle:disabled { opacity: 0.45; cursor: default; }
.reviews-note { font-size: 12px; color: var(--muted); padding: 2px 0 6px; }
.review { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.review:last-child { border-bottom: none; }
.review-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 12.5px; color: var(--muted); }
.review-vote { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
/* 찬성만 키컬러, 반대는 무채색 — 색은 긍정에만 쓴다(2026-07-21). 옛 하드코딩 스팀색은 다크 기준으로 고른
   값이라 라이트 크림 배경에서 대비 1.73:1 / 2.22:1로 읽히지 않았다(토큰화 대신 무채색으로 정리). */
.review-vote.up { color: var(--accent); }
.review-vote.down { color: var(--muted); }
.review-vote svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.review-hours { margin-left: auto; }
.review-text { font-size: 13.5px; line-height: 1.65; color: var(--text-soft); white-space: pre-wrap; word-break: break-word; }
.rev-translate { margin-top: 8px; background: none; border: none; padding: 0; font-size: 12.5px; color: var(--accent); cursor: pointer; }
.rev-translate:hover { text-decoration: underline; }
.rev-translate[disabled] { opacity: .5; cursor: default; text-decoration: none; }
.review-helpful { margin-top: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 4px; }
.tag-chip { display: inline-block; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.tag-chip:hover { border-color: var(--accent); color: var(--accent); }

/* 할인 상세 모달 */
.discount-detail { padding: 16px 0 8px; }
/* 할인명 + 종료일: 같은 톤의 칩으로 한 줄에 나란히 */
.dc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: 14px; font-weight: 600; letter-spacing: -0.2px;
}
.dc-chip.muted { background: var(--border-soft); color: var(--muted); font-weight: 500; }
.dc-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* 가격 행 */
.dc-price { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.dc-price .discount-tag {
  background: var(--accent); color: #fff; padding: 4px 10px; border-radius: 6px;
  font-size: 15px; font-weight: 800; letter-spacing: 0;
}
.dc-orig { color: var(--muted); text-decoration: line-through; font-size: 15px; font-weight: 500; }
.dc-arrow { color: var(--muted); font-size: 15px; }
.dc-final { color: var(--text); font-size: 21px; font-weight: 800; letter-spacing: -0.3px; }

/* 헤더 즐겨찾기 카운트 */
.icon-btn { position: relative; }
.fav-count {
  position: absolute; top: 1px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px;
  border-radius: 999px; text-align: center; pointer-events: none;
}

/* 평가 요약 팝업 (따봉) */
.summary { padding: 16px 0 6px; }
.summary + .summary { border-top: 1px solid var(--border); margin-top: 6px; }
.summary-heading { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; }
.summary-label { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.summary-label.positive { color: var(--accent); }
.summary-label.mixed { color: var(--muted); }
.summary-label.negative { color: var(--muted); }
.summary-text { font-size: 13.5px; color: var(--text-soft); line-height: 1.65; margin-bottom: 18px; }
.summary-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--border); }
.summary-bar .pos { background: var(--accent); }
.summary-bar .neg { background: var(--muted); }
.summary-split { display: flex; justify-content: space-between; margin-top: 9px; font-size: 12px; color: var(--muted); font-weight: 600; }

/* 즐겨찾기 목록 */
.fav-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.fav-item:last-child { border-bottom: none; }
.fav-item img { width: 96px; height: 45px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--border); }
.fav-item .fav-t { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* 북마크 항목 가격 */
.fav-price-wrap { flex-shrink: 0; display: inline-flex; align-items: center; }
.fav-price { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; white-space: nowrap; }
.fav-price .original { font-size: 11px; color: var(--muted); text-decoration: line-through; font-weight: 500; }
.fav-price .discount-tag { background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.fav-price.free { color: var(--positive); }
.fav-remove { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 19px; line-height: 1; padding: 4px 9px; border-radius: 8px; flex-shrink: 0; }
.fav-remove:hover { background: var(--accent-soft); color: var(--accent); }
.fav-empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.7; }
.inline-bm { width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 새로 들어온 게임 (헤더 ✦ → 편입일별 원장 모달) */
.nw-day { display: flex; align-items: baseline; gap: 7px; padding: 16px 2px 4px; }
.nw-day h4 { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.6px; text-transform: uppercase; }
.nw-day .nw-n { font-size: 12px; font-weight: 700; color: var(--accent); }
.nw-item { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid var(--border-soft); color: inherit; text-decoration: none; border-radius: 10px; }
.nw-item:last-of-type { border-bottom: none; }
.nw-item:hover { background: var(--accent-soft); }
.nw-item img { width: 96px; height: 45px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--border); }
.nw-body { display: block; flex: 1; min-width: 0; }
.nw-t { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 600; color: var(--text); }
.nw-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-meta .positive { color: var(--accent); font-weight: 700; }
.nw-meta .mixed, .nw-meta .negative { color: var(--muted); font-weight: 700; }
.nw-tagline { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 12px; color: var(--text-soft); }
.nw-cap { padding: 14px 2px 6px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.nw-empty { padding: 40px 8px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* 필터 */
.filter-section { padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.filter-section:last-child { border-bottom: none; }
.filter-section h4 { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 11px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text-soft); font-family: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 한 줄 접힘 (장르·인기 태그). 접힘 시 첫 줄만 노출, '더 보기'로 펼침 */
.filter-chips.clamp { max-height: 34px; overflow: hidden; }
.filter-more {
  margin-top: 9px; padding: 2px 0; background: none; border: none;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer;
}
.filter-more:hover { text-decoration: underline; }

/* 알약·태그·칩 눌림 피드백 (icon-btn·act와 촉각 통일) */
.filter-chip:active, .rf-toggle:not(:disabled):active, .tag-chip:active { transform: scale(0.96); }
/* 통일 포커스 링 (skip-link·price.clickable와 동일 스타일 — 키보드 접근성) */
.icon-btn:focus-visible, .act:focus-visible, .rf-toggle:focus-visible, .tag-chip:focus-visible,
.filter-chip:focus-visible, .filter-more:focus-visible, .modal-reset:focus-visible, .modal-close:focus-visible, .modal-back:focus-visible,
.fav-remove:focus-visible, .desc-more:focus-visible, .snackbar-undo:focus-visible,
.vol-btn:focus-visible, .info-links a:focus-visible, .nw-item:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px;
}

/* 사이트 정보 모달 (헤더 ⓘ) — 무한 피드라 푸터가 없어서 전역 진입점은 헤더 버튼이 담당 */
.info-about { padding: 14px 2px 4px; color: var(--text-soft); font-size: 14px; line-height: 1.65; }
.info-links { display: flex; flex-direction: column; padding: 6px 0 12px; }
.info-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 4px; border-bottom: 1px solid var(--border-soft); color: var(--text); font-size: 14.5px; font-weight: 600; }
.info-links a:last-child { border-bottom: none; }
.info-links a:hover { color: var(--accent); }
.info-links .chev { color: var(--muted); font-weight: 600; }
/* 언어 전환 (사이트 정보 모달 상단) */
.info-lang { display: flex; gap: 6px; padding: 10px 0 2px; }
.info-lang a, .info-lang span { flex: 1; text-align: center; padding: 9px 0; border-radius: 10px; font-size: 13.5px; font-weight: 700; border: 1px solid var(--border); }
.info-lang a { color: var(--text-soft); background: var(--surface); }
.info-lang a:hover { color: var(--accent); border-color: var(--accent); }
.info-lang span.on { color: #fff; background: var(--accent); border-color: var(--accent); }

/* 상태 */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  gap: 14px;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}
.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 되돌리기 스낵바 — 화면 하단 중앙, 모달 위. 노치 기기 하단 안전영역 반영 */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px 12px 18px;
  background: var(--text);
  color: var(--bg);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.snackbar.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
/* 되돌리기 스낵바 안내 문구는 한 줄 유지 — 한국어(CJK)는 글자 단위 줄바꿈이 허용돼 좁은 폭에서 "…뺐어/요"로 쪼개지므로 방지. */
#snackbar > span { white-space: nowrap; }
.snackbar-undo {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
}
.snackbar-undo:hover { background: var(--accent-soft); }
@media (prefers-color-scheme: dark) {
  .snackbar-undo { color: var(--accent-strong); }
}

/* 기간 전환 토스트 — 스낵바 위치/모양 재사용하되 색은 액센트(파랑) 알약. 토스 톤 알림 인상.
   본체 background=var(--accent)라 라이트 #1a6dc4 / 다크 #5aa9e6 자동 전환. 텍스트만 테마별로 뒤집는다
   (다크 액센트는 밝아서 흰 글자면 대비 깨짐 → 잉크로). 아이콘은 currentColor라 텍스트색을 따라감. */
.feed-toast { padding: 12px 18px; background: var(--accent); color: #fff; }
.feed-toast::before {
  content: "";
  flex-shrink: 0;
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  .feed-toast { color: #1c1b19; }   /* 밝은 파랑 위 잉크 텍스트 (~7:1) */
}
.feed-toast.is-loop::before {
  /* 순환은 새로고침 원형 화살표 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4M21 3v6h-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4M21 3v6h-6'/%3E%3C/svg%3E");
}

/* 모바일 배지 툴팁 — 정보 배지(.rl/.lang/.cap) 탭 시 뜨는 팝오버. 네이티브 title은 hover 전용이라
   터치 기기서 안 뜬다. 그 title 내용을 여기로 옮겨 보여준다. 화살표는 --arrow-x로 배지 중앙을 가리키고,
   위 공간이 부족하면 .below로 아래에 뜨며 화살표도 뒤집힌다. (데스크톱은 기존 hover title 유지) */
.badge-pop {
  position: fixed;
  z-index: 250;   /* 카드 위, 모달(open 시 피드 가림)보다 아래 */
  max-width: min(260px, calc(100vw - 16px));
  padding: 8px 11px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.2px;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;   /* 팝오버 자체 탭은 바깥 탭으로 처리(닫힘) */
}
.badge-pop.show { opacity: 1; transform: translateY(0); }
.badge-pop::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  bottom: -5px; border-top: none; border-left: none;   /* 기본=위쪽 표시 → 화살표 하단 */
}
.badge-pop.below::after { bottom: auto; top: -5px; border-bottom: none; border-right: none; }

@media (max-width: 600px) {
  .feed { padding: 16px 12px 80px; gap: 20px; }
  .card-body { padding: 14px 16px 16px; }
  .card-actions { padding: 6px 6px 8px; }  /* 본문 인셋(16px) − .act 패딩(10px) */
  .card-title { font-size: 16px; }
}

/* 모션 최소화 선호 존중 — 스피너·카드 hover·캐러셀·모달 트랜지션을 즉시 처리.
   (트레일러 영상 재생은 사이트 핵심 콘텐츠라 유지) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}