/* ═══════════════════════════════════════════════════════════════
   Recommendations v2 Intelligence Override — recommendations-v2.css
   AL2 디자인 시스템 적용 (기존 recommendations.css 위에 오버라이드)
   ═══════════════════════════════════════════════════════════════ */

/* ── Base ── */
.al2-app body,.al2-app{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif}
.al2-app .rec-page{padding-top:0;min-height:auto}

/* ── Hero → AL2 Page Header ── */
.al2-app .rec-hero{
  background:#fff;background-image:none;
  padding:20px 24px 14px;margin:0;border-radius:0;
  border-bottom:1px solid #e5e7eb;
}
.al2-app .rec-hero::before,.al2-app .rec-hero::after{display:none}
.al2-app .rec-hero-inner{max-width:100%;padding:0}
.al2-app .rec-hero-text h1{font-size:1.15rem;font-weight:800;color:#111827;text-shadow:none}
.al2-app .rec-hero-text p{font-size:.78rem;color:#6b7280;text-shadow:none}
.al2-app .rec-hero-text p strong{color:#6c3ae0}
.al2-app .rec-hero-cta{
  background:#6c3ae0;border:none;border-radius:8px;color:#fff;
  font-size:.78rem;font-weight:600;padding:8px 18px;cursor:pointer;
}
.al2-app .rec-hero-cta:hover{background:#5b2ec7}

/* 뷰 토글 */
.al2-app .rec-view-toggle{margin-top:10px}
.al2-app .rec-view-btn{
  padding:5px 14px;border:1px solid #e5e7eb;background:#fff;
  color:#4b5563;font-size:.72rem;font-weight:500;border-radius:100px;
  cursor:pointer;transition:all .12s;font-family:inherit;
}
.al2-app .rec-view-btn:hover{border-color:#d1d5db}
.al2-app .rec-view-btn.active{background:#f3eeff;border-color:#6c3ae0;color:#6c3ae0;font-weight:600}

/* 신뢰 배지 */
.al2-app .rec-trust-badges{margin-top:10px}
.al2-app .trust-badge{
  padding:4px 10px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;
  font-size:.68rem;color:#6b7280;
}
.al2-app .trust-badge i{color:#6c3ae0;font-size:.6rem}

/* 통계 */
.al2-app .rec-hero-stats{
  background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;
  padding:10px 16px;display:flex;gap:16px;margin-top:10px;
}
.al2-app .hero-stat-value{font-family:'JetBrains Mono',monospace;font-size:1.1rem;font-weight:700;color:#111827}
.al2-app .hero-stat-label{font-size:.62rem;color:#9ca3af}

/* ── HOT 섹션 ── */
.al2-app .rec-hot-section{background:#fff;padding:16px 24px;border-bottom:1px solid #e5e7eb}
.al2-app .rec-container{max-width:100%;padding:0}
.al2-app .rec-section-header h2{font-size:.88rem;font-weight:700;color:#111827}
.al2-app .rec-section-sub{font-size:.68rem;color:#9ca3af}

/* ── 메인 ── */
.al2-app .rec-main-section{padding:16px 24px 40px;background:transparent}
.al2-app .rec-main-grid{max-width:100%;padding:0;gap:16px}

/* 피드 헤더 */
.al2-app .rec-feed-header h2{font-size:.88rem;font-weight:700;color:#111827}

/* 검색 */
.al2-app .rec-search-wrap{
  background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;
}
.al2-app .rec-search-wrap input{font-size:.75rem;color:#111827;font-family:inherit}

/* 필터 칩 */
.al2-app .rec-filter-btn{
  padding:4px 12px;border:1px solid #e5e7eb;background:#fff;
  color:#4b5563;font-size:.7rem;font-weight:500;border-radius:100px;
  cursor:pointer;transition:all .12s;font-family:inherit;
}
.al2-app .rec-filter-btn:hover{border-color:#d1d5db}
.al2-app .rec-filter-btn.active{background:#f3eeff;border-color:#6c3ae0;color:#6c3ae0;font-weight:600}

/* 피드 카드 */
.al2-app .rec-feed-list{gap:8px}
.al2-app .rec-feed-item,.al2-app .rec-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:10px;
  box-shadow:none;transition:border-color .12s;
}
.al2-app .rec-feed-item:hover,.al2-app .rec-card:hover{border-color:#d1d5db;box-shadow:0 2px 8px rgba(0,0,0,.04)}

/* 더 보기 */
.al2-app .rec-more-btn{
  padding:8px 24px;border:1px solid #e5e7eb;border-radius:8px;
  background:#fff;color:#4b5563;font-size:.75rem;font-weight:600;
  cursor:pointer;font-family:inherit;
}
.al2-app .rec-more-btn:hover{border-color:#6c3ae0;color:#6c3ae0}

/* ── 사이드바 카드 ── */
.al2-app .rec-sidebar-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:10px;
  box-shadow:none;margin-bottom:12px;
}
.al2-app .rec-sidebar-header h3{font-size:.82rem;font-weight:700;color:#111827}
.al2-app .rec-sidebar-period{font-size:.62rem;color:#9ca3af}
.al2-app .rec-sidebar-link{font-size:.72rem;color:#6c3ae0;font-weight:600}

/* AI CTA */
.al2-app .rec-ai-cta-card{text-align:center}
.al2-app .rec-ai-cta-btn{
  background:#6c3ae0;color:#fff;border-radius:8px;
  font-size:.75rem;font-weight:600;padding:8px 16px;text-decoration:none;
}

/* 로그인 안내 */
.al2-app .rec-login-prompt{text-align:center;padding:20px 16px}
.al2-app .rec-login-prompt h4{font-size:.82rem;font-weight:700;color:#111827}
.al2-app .rec-login-prompt p{font-size:.72rem;color:#9ca3af}
.al2-app .rec-login-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:8px 18px;background:#6c3ae0;color:#fff;border-radius:8px;
  font-size:.75rem;font-weight:600;text-decoration:none;margin-top:8px;
}

/* 리뷰 유형 카드 */
.al2-app .rec-info-card h4{font-size:.82rem;font-weight:700;color:#111827}
.al2-app .info-badge{font-size:.62rem;font-weight:600;padding:2px 7px;border-radius:4px}

/* ── 모달 ── */
.al2-app .rec-modal-content{border-radius:14px;border:1px solid #e5e7eb;box-shadow:0 16px 48px rgba(0,0,0,.12)}
.al2-app .rec-modal-header{border-bottom:1px solid #e5e7eb}
.al2-app .rec-modal-header h3{font-size:.9rem;font-weight:700;color:#111827}
.al2-app .rec-modal-btn.primary{background:#6c3ae0;border-color:#6c3ae0;border-radius:8px;color:#fff}
.al2-app .rec-modal-btn.secondary{border-color:#e5e7eb;color:#4b5563;border-radius:8px}

/* 모바일 FAB */
.al2-app .rec-mobile-fab{background:#6c3ae0;box-shadow:0 4px 12px rgba(108,58,224,.3)}

/* 토스트 */
.al2-app .rec-toast{border-radius:8px;font-size:.78rem}

/* 스켈레톤 */
.al2-app .rec-feed-skeleton,.al2-app .rec-hot-skeleton,.al2-app .rec-leader-skeleton{
  background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);
  background-size:400px 100%;animation:al2-rec-shimmer 1.5s ease-in-out infinite;
  border-radius:8px;
}
@keyframes al2-rec-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}

/* ── 반응형 ── */
@media(max-width:900px){
  .al2-app .rec-hero{padding:14px 16px 10px}
  .al2-app .rec-hot-section{padding:12px 16px}
  .al2-app .rec-main-section{padding:12px 16px 32px}
  .al2-app .rec-main-grid{grid-template-columns:1fr}
}