/* 홈 전용 — 히어로 · 붙여넣기 · 디스커버. 공통은 components.css. */
.home { padding-top: var(--sp-7); }

/* --- 히어로 --- */
.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-1); }
.hero__sub:last-of-type { margin-bottom: var(--sp-5); }

/* --- 붙여넣기 --- */
.paste { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.paste__field {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; height: 44px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; cursor: text;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.paste__field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.paste__prefix {
  flex: none; display: inline-flex; align-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 600;
  letter-spacing: -0.01em; user-select: none;
  padding: 0 var(--sp-3); border-inline-end: 1px solid var(--border);
}
.paste__input {
  flex: 1; min-width: 0; height: 100%; border: none; background: none;
  color: var(--text-1); font-size: var(--fs-md); outline: none;
  padding: 0 var(--sp-3);
}
.paste__input::placeholder { color: var(--text-3); }
.paste .btn { height: 44px; padding: 0 var(--sp-5); }
.paste__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; }
/* 지원 플랫폼 안내 — 클릭 불가 라벨(버튼 아님). 배경·테두리·hover 없음. */
.plat-hint { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--text-3); font-size: var(--fs-small); font-weight: 500; }
/* 예약된 min-height가 붙여넣기와 칩 사이 간격을 겸한다 — 에러가 떠도 이 자리를 채울 뿐 칩을 밀지 않는다. */
.paste__err { color: var(--danger); font-size: var(--fs-ui); min-height: 18px; }

/* --- 디스커버 --- */
.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; }
.discover__langs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.discover__langs:empty { display: none; }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); min-height: 196px; align-content: start; }
.disc-card {
  display: flex; flex-direction: column; gap: var(--sp-2); min-height: 196px;
  border-inline-start-width: 3px; border-inline-start-color: var(--plat);
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}
/* 커버 슬롯 — 모든 카드 동일 높이. 유튜브는 실제 썸네일, 나머지는 아이콘 커버. */
.disc-card__cover { display: block; height: 84px; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-2); }
.disc-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.disc-card__cover--icon {
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--plat) var(--cover-mix), var(--bg-2));
  color: var(--plat);
}
/* 플랫폼 색은 카드 로컬 --plat 하나로 받고, 좌측 바·커버·hover가 전부 그것만 참조한다.
   --plat / --cover-mix / --plat-mix 는 home.js가 카드에 인라인으로 심는다(플랫폼별 규칙 불필요).
   아래는 그 값이 없을 때의 기본값 — 인라인 var()의 폴백과 같은 값으로 맞춰둔다. */
.disc-card { --plat: var(--border-strong); --cover-mix: 14%; --plat-mix: 7%; }
/* components.css의 a.card:hover가 4면 border-color를 덮어 좌측 바를 회색으로 만든다.
   같은 특정도 + 나중 로드로 되찾는다(마지막 줄이 좌측 바 유지). */
a.disc-card:hover {
  background: color-mix(in srgb, var(--plat) var(--plat-mix), var(--bg-1));
  border-color: color-mix(in srgb, var(--plat) 30%, var(--border));
  border-inline-start-color: var(--plat);
}
a.disc-card:hover .disc-card__plat { color: var(--plat); }
.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; transition: color var(--dur-1) var(--ease); }
.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); }

/* 플랫폼 허브(/p/:platform) 제목 — 서버가 그린다. 홈(/)엔 없다. */
.hub-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.hub-head__title { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: 700; color: var(--text-1); }
.hub-head__title svg { flex: none; }
.hub-head__sub { font-size: var(--fs-small); color: var(--text-2); }
.hub-head__all { margin-inline-start: auto; font-size: var(--fs-small); color: var(--text-2); }

/* 크롤러용 페이지 이동 — JS가 뜨면 home.js가 제거한다(무한스크롤이 대신). */
.disc-pagenav { display: flex; justify-content: center; gap: var(--sp-4); padding: var(--sp-5) 0; font-size: var(--fs-small); }

/* 목록의 끝 — 예전엔 50번째 카드 뒤가 그냥 여백이라 더 있는지조차 알 수 없었다.
   더 있으면 '더 보기', 없으면 종료 문구(+필터 해제)를 반드시 하나 보여준다. */
.disc-more { display: flex; justify-content: center; padding: var(--sp-5) 0 var(--sp-1); }
.disc-more[hidden] { display: none; }
.disc-end {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  flex-wrap: wrap; padding: var(--sp-5) var(--sp-1) var(--sp-2);
  color: var(--text-2); font-size: var(--fs-small);
}
.disc-end[hidden] { display: none; }
.disc-sentinel { height: 1px; }

/* 잠김 우선 섹션(B 방식) — 원본 댓글이 막힌 화제글을 상단에 먼저 드러낸다.
   잠김 스레드가 있을 때만 home.js가 채워 노출한다(없으면 hidden). 다크 네온 톤 = --warn. */
.disc-locked { margin-bottom: var(--sp-5); }
.disc-locked[hidden] { display: none; }
.disc-locked__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); color: var(--warn); }
.disc-locked__head svg { flex: none; }
.disc-locked__title { font-size: var(--fs-ui); font-weight: 700; letter-spacing: .01em; }
.disc-locked__sub { font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }

@media (max-width: 820px) {
  .home { padding-top: var(--sp-5); }
  .hero__title { font-size: var(--fs-xl); }
  .paste { flex-direction: column; }
  .paste .btn { height: 44px; }
  .paste__prefix { padding: 0 var(--sp-2); }
  .paste__input { padding: 0 var(--sp-2); }
}