/* 홈 전용 — 히어로 · 붙여넣기 · 디스커버. 공통은 components.css. */
.home { max-width: 860px; padding: var(--sp-7) clamp(var(--sp-4), 5vw, var(--sp-8)) var(--sp-6); }

/* --- 히어로 --- */
.hero { margin-bottom: var(--sp-7); }
.hero__title { font-size: var(--fs-display); line-height: var(--lh-tight); margin-bottom: var(--sp-2); }
.hero__accent { color: var(--accent); }
.hero__sub { color: var(--text-2); font-size: var(--fs-md); margin-bottom: var(--sp-5); }

/* --- 붙여넣기 --- */
.paste { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.paste__input { height: 44px; font-size: var(--fs-md); }
.paste .btn { height: 44px; padding: 0 var(--sp-5); }
.paste__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.paste__err { color: var(--danger); font-size: var(--fs-ui); margin-top: var(--sp-2); min-height: 18px; }
.paste__hint { color: var(--text-3); font-size: var(--fs-ui); margin-top: var(--sp-2); }

/* --- 디스커버 --- */
.discover__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.discover__plats { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.disc-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.disc-card__plat { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-caption); font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .3px; }
.disc-card__title {
  font-size: var(--fs-ui); font-weight: 600; line-height: var(--lh-base); color: var(--text-1);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.disc-card__meta { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-small); color: var(--text-2); margin-top: auto; }
.disc-empty { grid-column: 1 / -1; color: var(--text-2); font-size: var(--fs-body); padding: var(--sp-5) var(--sp-1); }
.side__hint { color: var(--text-3); font-size: var(--fs-ui); padding: var(--sp-2); line-height: var(--lh-base); }

@media (max-width: 820px) {
  .home { padding: var(--sp-5) var(--sp-4) var(--sp-4); max-width: none; }
  .hero__title { font-size: 28px; }
  .paste { flex-direction: column; }
  .paste .btn { height: 44px; }
}