/* ════════════════════════════════════════════════════════
   design-v3.css — 통합 세련 디자인 개선
   ════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────
   전역 기본값 / 컴포넌트 개선
────────────────────────────────────────── */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* 커스텀 스크롤바 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* 선택 색상 */
::selection {
  background: rgba(255,75,43,0.16);
  color: var(--color-text-primary);
}

/* ──────────────────────────────────────────
   3. 사이드바 개선
────────────────────────────────────────── */
.site-sidebar {
  width: 248px !important;
  border-right: 1px solid var(--color-border-light) !important;
  background: var(--color-surface) !important;
}

.sidebar__logo {
  padding: 22px 18px 18px !important;
  border-bottom: 1px solid var(--color-border-light) !important;
}

.sidebar__brand-name {
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
}

.sidebar__nav {
  padding: 10px 10px !important;
  gap: 1px !important;
}

.sidebar__nav-item {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  gap: 11px !important;
  transition: background var(--transition-fast), color var(--transition-fast), transform 120ms ease !important;
}

.sidebar__nav-item:hover {
  background: var(--color-surface-2) !important;
  color: var(--color-text-primary) !important;
  transform: none !important;
}

.sidebar__nav-item.active {
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  position: relative;
}

.sidebar__nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 3px 3px 0;
}

.sidebar__write {
  padding: 10px 14px !important;
  border-top: 1px solid var(--color-border-light) !important;
}

.sidebar__write-btn {
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 13px 16px !important;
  box-shadow: 0 3px 12px rgba(255,75,43,0.28) !important;
  transition: transform 160ms cubic-bezier(0.34,1,0.64,1), box-shadow 160ms ease !important;
}

.sidebar__write-btn:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 24px rgba(255,75,43,0.40) !important;
}

.sidebar__write-btn:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(255,75,43,0.22) !important;
}

/* ──────────────────────────────────────────
   4. 헤더 개선 (모바일)
────────────────────────────────────────── */
.site-header {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(230,232,240,0.7) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 2px 12px rgba(20,14,40,0.04) !important;
}

[data-theme="dark"] .site-header {
  background: rgba(21,23,42,0.92) !important;
  border-bottom-color: rgba(54,58,96,0.6) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 2px 12px rgba(0,0,0,0.20) !important;
}

/* ──────────────────────────────────────────
   5. 하단 네비게이션 개선
────────────────────────────────────────── */
.bottom-nav {
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-top: 1px solid rgba(230,232,240,0.6) !important;
  box-shadow: 0 -2px 16px rgba(20,14,40,0.06) !important;
}

[data-theme="dark"] .bottom-nav {
  background: rgba(21,23,42,0.94) !important;
  border-top-color: rgba(54,58,96,0.5) !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.24) !important;
}

.bottom-nav__item {
  transition: transform 120ms cubic-bezier(0.34,1,0.64,1), opacity 120ms ease !important;
}

.bottom-nav__item:active {
  transform: scale(0.88) !important;
}

.bottom-nav__write {
  filter: drop-shadow(0 4px 12px rgba(255,75,43,0.35)) !important;
  transition: transform 140ms cubic-bezier(0.34,1,0.64,1), filter 140ms ease !important;
}

.bottom-nav__write:active {
  transform: scale(0.92) !important;
  filter: drop-shadow(0 2px 6px rgba(255,75,43,0.25)) !important;
}

/* ──────────────────────────────────────────
   6. 카드 전반 개선
────────────────────────────────────────── */
.card {
  background: var(--color-surface) !important;
  border-radius: var(--radius-base) !important;
  border: 1px solid var(--color-border-light) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base) !important;
}

.card:hover,
.card--hover:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-card-hover) !important;
  border-color: var(--color-border) !important;
}

.card--hover:active {
  transform: translateY(-1px) scale(0.99) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .card {
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="dark"] .card:hover {
  border-color: rgba(255,75,43,0.20) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

/* ──────────────────────────────────────────
   7. 피드 카드 개선
────────────────────────────────────────── */
.feed-card {
  border-radius: var(--radius-base) !important;
  border: 1px solid var(--color-border-light) !important;
  box-shadow: var(--shadow-card) !important;
  margin-bottom: 10px !important;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base) !important;
}

.feed-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

.feed-card:active {
  transform: translateY(0) scale(0.995) !important;
}

[data-theme="dark"] .feed-card {
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .feed-card:hover {
  border-color: rgba(255,75,43,0.18) !important;
}

.feed-card__header {
  padding: 16px 18px 10px !important;
}

.feed-card__title {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.38 !important;
}

.feed-card__desc {
  font-size: 13.5px !important;
  line-height: 1.58 !important;
  color: var(--color-text-secondary) !important;
}

.feed-card__meta {
  font-size: 11.5px !important;
  color: var(--color-text-muted) !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

.feed-card__type-badge {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 3px 9px !important;
  border-radius: 99px !important;
  letter-spacing: 0.1px !important;
}

/* 카드 왼쪽 컬러 바 — 더 얇고 세련되게 */
.feed-card--golra { border-left: 3px solid var(--color-golra) !important; }
.feed-card--usgyo { border-left: 3px solid var(--color-usgyo) !important; }
.feed-card--malhe { border-left: 3px solid var(--color-malhe) !important; }

/* ──────────────────────────────────────────
   8. 버튼 개선
────────────────────────────────────────── */
.btn {
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  border-radius: var(--radius-md) !important;
  transition: transform 140ms cubic-bezier(0.34,1,0.64,1),
              box-shadow 140ms ease,
              background 140ms ease !important;
}

.btn:active {
  transform: scale(0.94) !important;
}

.btn--primary {
  background: var(--gradient-brand) !important;
  box-shadow: 0 2px 10px rgba(255,75,43,0.26) !important;
}

.btn--primary:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 6px 22px rgba(255,75,43,0.40) !important;
}

.btn--primary:active {
  transform: translateY(0) scale(0.95) !important;
  box-shadow: 0 1px 6px rgba(255,75,43,0.20) !important;
}

.btn--secondary {
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary-border) !important;
}

.btn--secondary:hover {
  background: #FFE6DE !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-1px) !important;
}

.btn--ghost {
  background: transparent !important;
  border: 1.5px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

.btn--ghost:hover {
  background: var(--color-primary-bg) !important;
  border-color: var(--color-primary-border) !important;
  color: var(--color-primary) !important;
}

.btn--lg {
  border-radius: var(--radius-lg) !important;
  padding: 14px 30px !important;
}

/* ──────────────────────────────────────────
   9. 폼 개선
────────────────────────────────────────── */
.form-input,
.form-textarea,
.form-select {
  border-radius: 8px !important;
  border: 1.5px solid var(--color-border) !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3.5px rgba(255,75,43,0.10) !important;
  background: var(--color-surface) !important;
  outline: none !important;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select {
  background: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

.form-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.1px !important;
  margin-bottom: 7px !important;
}

/* ──────────────────────────────────────────
   10. 반응 바 개선
────────────────────────────────────────── */
.reaction-btn {
  border-radius: 99px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1.5px solid var(--color-border-light) !important;
  background: var(--color-surface-2) !important;
  color: var(--color-text-secondary) !important;
  transition: transform 130ms cubic-bezier(0.34,1,0.64,1),
              background 130ms ease,
              color 130ms ease,
              border-color 130ms ease,
              box-shadow 130ms ease !important;
}

.reaction-btn:hover {
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary-border) !important;
  transform: translateY(-1px) scale(1.03) !important;
}

.reaction-btn:active {
  transform: scale(0.94) !important;
}

.reaction-btn.active {
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2.5px rgba(255,75,43,0.12) !important;
}

/* ──────────────────────────────────────────
   11. 모달 개선
────────────────────────────────────────── */
.modal-overlay {
  background: rgba(10,10,30,0.52) !important;
  backdrop-filter: blur(6px) !important;
}

.modal {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--color-border-light) !important;
}

[data-theme="dark"] .modal {
  border-color: rgba(255,255,255,0.08) !important;
}

/* ──────────────────────────────────────────
   12. 섹션 타이틀 개선
────────────────────────────────────────── */
.section-title {
  font-size: var(--font-size-lg) !important;
  font-weight: 900 !important;
  letter-spacing: -0.4px !important;
  gap: 10px !important;
}

.section-title::before {
  width: 3.5px !important;
  height: 20px !important;
  border-radius: 2px !important;
  background: var(--gradient-brand) !important;
}

/* ──────────────────────────────────────────
   13. 배지 & 태그 개선
────────────────────────────────────────── */
.badge {
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  letter-spacing: 0.1px !important;
}

.badge--hot {
  background: var(--gradient-brand) !important;
  color: #fff !important;
}

.tag {
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all var(--transition-fast) !important;
}

/* ──────────────────────────────────────────
   14. 홈 히어로 개선
────────────────────────────────────────── */
.home-hero {
  border-radius: var(--radius-xl) !important;
  background: var(--gradient-hero) !important;
  box-shadow: 0 8px 32px rgba(255,75,43,0.24), 0 2px 8px rgba(255,75,43,0.14) !important;
  overflow: hidden;
}

.home-hero::before {
  background:
    radial-gradient(ellipse at 10% 55%, rgba(255,255,255,0.14) 0%, transparent 52%),
    radial-gradient(ellipse at 88% 10%, rgba(255,200,0,0.22) 0%, transparent 48%),
    radial-gradient(ellipse at 75% 88%, rgba(255,120,0,0.16) 0%, transparent 42%) !important;
}

.home-hero__title {
  font-size: clamp(26px, 4vw, 40px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.2px !important;
  line-height: 1.12 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.12) !important;
}

.home-hero__sub {
  font-size: clamp(13px, 1.5vw, 15px) !important;
  color: rgba(255,255,255,0.90) !important;
  line-height: 1.55 !important;
}

.home-hero__eyebrow {
  background: rgba(255,255,255,0.20) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  letter-spacing: 1px !important;
  font-size: 10.5px !important;
}

/* ──────────────────────────────────────────
   15. 카테고리 카드 개선
────────────────────────────────────────── */
.home-cat-card {
  border-radius: 12px !important;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base) !important;
}

.home-cat-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
}

.home-cat-card:active {
  transform: translateY(-2px) scale(0.99) !important;
}

.home-cat-card--golra {
  box-shadow: 0 4px 0 rgba(79,142,247,0.20), var(--shadow-sm) !important;
}

.home-cat-card--golra:hover {
  box-shadow: 0 6px 0 rgba(79,142,247,0.28), var(--shadow-golra) !important;
}

.home-cat-card--usgyo {
  box-shadow: 0 4px 0 rgba(255,75,43,0.20), var(--shadow-sm) !important;
}

.home-cat-card--usgyo:hover {
  box-shadow: 0 6px 0 rgba(255,75,43,0.28), var(--shadow-brand) !important;
}

.home-cat-card--malhe {
  box-shadow: 0 4px 0 rgba(18,182,122,0.20), var(--shadow-sm) !important;
}

.home-cat-card--malhe:hover {
  box-shadow: 0 6px 0 rgba(18,182,122,0.28), var(--shadow-malhe) !important;
}

.home-cat-card__name {
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: -0.6px !important;
}

.home-cat-card__hook {
  font-size: 12px !important;
  font-weight: 700 !important;
  opacity: 0.85;
}

.home-cat-card__icon-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.70) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

[data-theme="dark"] .home-cat-card__icon-wrap {
  background: rgba(255,255,255,0.10) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ──────────────────────────────────────────
   16. 아바타 개선
────────────────────────────────────────── */
.avatar {
  background: var(--gradient-brand) !important;
  box-shadow: 0 1px 4px rgba(255,75,43,0.22) !important;
}

/* ──────────────────────────────────────────
   17. 토스트 개선
────────────────────────────────────────── */
.toast {
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 13px 18px !important;
  backdrop-filter: blur(8px) !important;
}

/* ──────────────────────────────────────────
   18. 투표 옵션 개선
────────────────────────────────────────── */
.vote-option {
  border-radius: 8px !important;
  border: 2px solid var(--color-border) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 13px 16px !important;
  transition: border-color 160ms ease, background 160ms ease, transform 120ms cubic-bezier(0.34,1,0.64,1) !important;
}

.vote-option:hover {
  border-color: var(--color-primary-border) !important;
  background: var(--color-primary-bg) !important;
  transform: translateX(2px) !important;
}

.vote-option.selected {
  border-color: var(--color-primary) !important;
  background: var(--gradient-brand) !important;
  color: #fff !important;
}

/* ──────────────────────────────────────────
   19. 검색 입력 개선
────────────────────────────────────────── */
.search-input {
  border-radius: 99px !important;
  border: 1.5px solid var(--color-border) !important;
  background: var(--color-surface-2) !important;
  font-size: 14px !important;
  padding: 10px 16px 10px 38px !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

.search-input:focus {
  border-color: var(--color-primary) !important;
  background: var(--color-surface) !important;
  box-shadow: 0 0 0 3.5px rgba(255,75,43,0.10) !important;
}

/* ──────────────────────────────────────────
   20. 사이드바 위젯 개선
────────────────────────────────────────── */
.sidebar-widget {
  border-radius: var(--radius-base) !important;
  border: 1px solid var(--color-border-light) !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden;
}

/* ──────────────────────────────────────────
   21. 페이지 컨테이너 (PC)
────────────────────────────────────────── */
@media (min-width: 1024px) {
  body:not(:has(.admin-layout)) .page-container {
    padding: 28px 24px 56px !important;
    max-width: 740px !important;
  }
}

/* ──────────────────────────────────────────
   22. 빈 상태 개선
────────────────────────────────────────── */
.empty-state__icon {
  font-size: 52px !important;
  filter: grayscale(0.2) opacity(0.75);
}

.empty-state__title {
  font-size: var(--font-size-lg) !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}

.empty-state__desc {
  font-size: var(--font-size-sm) !important;
  line-height: 1.65 !important;
  color: var(--color-text-secondary) !important;
  max-width: 280px;
}

/* ──────────────────────────────────────────
   23. 카드 푸터 개선
────────────────────────────────────────── */
.card__footer {
  border-top: 1px solid var(--color-border-light) !important;
  background: var(--color-surface-2) !important;
  padding: 10px 16px !important;
}

/* ──────────────────────────────────────────
   24. 스크롤 컨테이너 스냅
────────────────────────────────────────── */
.feed-filter-tabs,
.home-cats {
  scroll-snap-type: x mandatory;
}

/* ──────────────────────────────────────────
   25. focus-visible 통일
────────────────────────────────────────── */
:focus-visible {
  outline: 2.5px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ──────────────────────────────────────────
   26. 히어로 버튼 개선
────────────────────────────────────────── */
.btn-hero-primary {
  border-radius: 99px !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  padding: 14px 30px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.16), 0 1px 4px rgba(0,0,0,0.10) !important;
  transition: transform 150ms cubic-bezier(0.34,1,0.64,1), box-shadow 150ms ease !important;
  letter-spacing: -0.3px !important;
}

.btn-hero-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.20) !important;
}

.btn-hero-secondary {
  border-radius: 99px !important;
  font-weight: 800 !important;
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(8px) !important;
  border: 1.5px solid rgba(255,255,255,0.42) !important;
  transition: all 150ms ease !important;
}

.btn-hero-secondary:hover {
  background: rgba(255,255,255,0.26) !important;
  border-color: rgba(255,255,255,0.65) !important;
}

/* ──────────────────────────────────────────
   27. 그라디언트 브랜드 패치
────────────────────────────────────────── */
.btn--primary,
.sidebar__write-btn,
.btn-hero-primary {
  background-image: var(--gradient-brand);
}

/* ──────────────────────────────────────────
   28. 다크모드 표면 개선
────────────────────────────────────────── */
[data-theme="dark"] .card__footer {
  background: var(--color-surface-alt) !important;
}

[data-theme="dark"] .sidebar-widget {
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .reaction-btn {
  background: var(--color-surface-2) !important;
  border-color: var(--color-border-light) !important;
}

[data-theme="dark"] .vote-option {
  background: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .vote-option:hover {
  background: var(--color-primary-bg) !important;
  border-color: var(--color-primary-border) !important;
}

/* ──────────────────────────────────────────
   29. 섹션 간격 / 홈 대시보드
────────────────────────────────────────── */
.home-cats {
  gap: 14px !important;
}

.home-cats-header__title {
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -0.4px !important;
}

/* ──────────────────────────────────────────
   30. 미니 인터랙션 — 링크/아이콘 버튼
────────────────────────────────────────── */
.sidebar__icon-btn {
  border-radius: 8px !important;
  width: 34px !important;
  height: 34px !important;
  transition: background 130ms ease, color 130ms ease, transform 120ms cubic-bezier(0.34,1,0.64,1) !important;
}

.sidebar__icon-btn:hover {
  background: var(--color-surface-alt) !important;
  transform: scale(1.08) !important;
}

.sidebar__icon-btn:active {
  transform: scale(0.92) !important;
}

/* ──────────────────────────────────────────
   31. 알림 배지 개선
────────────────────────────────────────── */
.sidebar__badge,
.sidebar__nav-badge {
  background: var(--color-danger) !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  box-shadow: 0 1px 4px rgba(240,55,56,0.30) !important;
}

/* ──────────────────────────────────────────
   32. 스피너 개선
────────────────────────────────────────── */
.spinner {
  border-color: var(--color-border) !important;
  border-top-color: var(--color-primary) !important;
  animation: spin 0.55s linear infinite !important;
}

/* ──────────────────────────────────────────
   33. 모바일 피드 카드 터치 개선
────────────────────────────────────────── */
@media (max-width: 767px) {
  .feed-card {
    border-radius: 12px !important;
    margin-bottom: 8px !important;
  }

  .home-cat-card {
    border-radius: 12px !important;
  }

  .card {
    border-radius: 12px !important;
  }

  .btn {
    -webkit-tap-highlight-color: transparent;
  }

  .bottom-nav__item,
  .feed-card,
  .card {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ──────────────────────────────────────────
   34. 페이드 / 스켈레톤 개선
────────────────────────────────────────── */
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-alt) 0%,
    var(--color-border-light) 50%,
    var(--color-surface-alt) 100%
  ) !important;
  background-size: 800px 100% !important;
  animation: shimmer 1.4s ease-in-out infinite !important;
  border-radius: var(--radius-sm) !important;
}

/* ──────────────────────────────────────────
   35. 최종 조화 — 글자 색상 일관성
────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.3px;
}

p {
  line-height: var(--line-height-base);
}

a {
  transition: color var(--transition-fast);
}