/* ==========================================================================
   Seesar Front Page Layout — .seesar-front-page scope
   ========================================================================== */

/* ---------- Card Grid ---------- */
.seesar-front-page .card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.seesar-front-page .card-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

/* ---------- Horizontal Scroll ---------- */
.seesar-front-page .scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--seesar-border) transparent;
  padding-bottom: 8px;
}

.seesar-front-page .scroll-wrapper::-webkit-scrollbar { height: 6px; }
.seesar-front-page .scroll-wrapper::-webkit-scrollbar-track { background: transparent; }
.seesar-front-page .scroll-wrapper::-webkit-scrollbar-thumb { background-color: var(--seesar-border); border-radius: 3px; }

.seesar-front-page .scroll-list {
  display: flex;
  gap: 16px;
  padding: 4px 0;
}

/* ---------- Ranking List ---------- */
.seesar-front-page .ranking-list {
  display: flex;
  flex-direction: column;
}

/* ---------- Channel Tags ---------- */
.seesar-front-page .channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---------- Video/SNS Grid ---------- */
.seesar-front-page .video-sns-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ---------- Articles List ---------- */
.seesar-front-page .articles-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}