/* 유어스튜브 메인 (유튜브 스타일) – home/content.html 전용. 2026-10-17 완성본
   줄 수 고정: 열은 콘텐츠 영역 폭에 맞춰 auto-fill, 정해진 행만 높이(auto), 나머지 행은 높이 0 + 넘침 숨김.
   → 창 크기가 아니라 콘텐츠 영역 폭으로 계산되므로 왼쪽 메뉴를 열고 닫아도 저절로 다시 맞춰진다(JS 불필요). */
.ytx-home { --ytx-gap: 16px; max-width: 2400px; margin: 0 auto; padding: 12px 24px 48px; color: inherit; }
.ytx-home a { color: inherit; text-decoration: none; }
.ytx-home img { display: block; max-width: 100%; }

/* 카테고리 칩 */
.ytx-chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 16px; scrollbar-width: none; }
.ytx-chips::-webkit-scrollbar { display: none; }
.ytx-chip { flex: 0 0 auto; padding: 7px 14px; border-radius: 9px; font-size: 14px; font-weight: 500; white-space: nowrap; background: rgba(127, 127, 127, .16); transition: background .15s; }
.ytx-chip:hover { background: rgba(127, 127, 127, .28); }
.ytx-chip.active { background: #f1f1f1; color: #0f0f0f !important; }

/* 큰 배너 + 오른쪽 정보 */
.ytx-hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 24px; align-items: start; margin: 0 0 36px; }
.ytx-hero-media { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: rgba(127, 127, 127, .15); }
.ytx-hero-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ytx-hero-media:hover img { transform: scale(1.015); }
.ytx-hero-media .ytx-dur { font-size: 13px; right: 10px; bottom: 10px; }
.ytx-hero-info h1 { font-size: 24px; line-height: 1.35; margin: 2px 0 14px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ytx-hero-ch { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ytx-hero-ch img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ytx-hero-ch span { display: flex; flex-direction: column; }
.ytx-hero-ch strong { font-size: 15px; }
.ytx-hero-ch em, .ytx-hero-stat { font-style: normal; font-size: 13px; opacity: .7; }
.ytx-hero-stat { margin: 0 0 8px; }
.ytx-hero-desc { font-size: 14px; line-height: 1.55; opacity: .85; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ytx-play { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; border-radius: 20px; background: #f1f1f1; color: #0f0f0f !important; font-weight: 600; }
.ytx-play:hover { background: #fff; }
.ytx-next { margin-top: 20px; border-top: 1px solid rgba(127, 127, 127, .25); padding-top: 14px; }
.ytx-next h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.ytx-next-item { display: flex; gap: 10px; padding: 6px 0; }
.ytx-next-thumb { position: relative; flex: 0 0 168px; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; background: rgba(127, 127, 127, .15); }
.ytx-next-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ytx-next-thumb .ytx-dur { right: 4px; bottom: 4px; font-size: 11px; }
.ytx-next-text { display: flex; flex-direction: column; min-width: 0; }
.ytx-next-text strong { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ytx-next-text em { font-style: normal; font-size: 12px; opacity: .7; margin-top: 2px; }

/* 섹션 */
.ytx-section { margin: 0 0 28px; }
.ytx-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.ytx-head h2 { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 700; margin: 0; }
.ytx-more { font-size: 14px; font-weight: 500; color: #3ea6ff !important; }

/* 줄 수 고정 그리드 */
.ytx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 0; column-gap: var(--ytx-gap); row-gap: 0; overflow: hidden; }
.ytx-grid > * { min-width: 0; padding-bottom: 28px; }
.ytx-rows-1 { grid-template-rows: auto; }
.ytx-rows-2 { grid-template-rows: auto auto; }
.ytx-grid-shorts { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ytx-grid-channels { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* 영상 카드 */
.ytx-thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: rgba(127, 127, 127, .15); }
.ytx-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ytx-thumb:hover img { transform: scale(1.03); }
.ytx-dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .8); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.5; }
.ytx-meta { display: flex; gap: 12px; margin-top: 12px; }
.ytx-avatar { flex: 0 0 36px; }
.ytx-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ytx-text { display: flex; flex-direction: column; min-width: 0; }
.ytx-title { font-size: 16px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ytx-channel, .ytx-stat { font-size: 14px; opacity: .7; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ytx-channel:hover { opacity: 1; }

/* 쇼츠 */
.ytx-short { display: block; }
.ytx-short-img { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 9 / 16; background: rgba(127, 127, 127, .15); }
.ytx-short-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ytx-short:hover .ytx-short-img img { transform: scale(1.03); }
.ytx-short-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; margin-top: 8px; line-height: 1.35; }
.ytx-short-stat { font-size: 13px; opacity: .7; }

/* 추천 채널 */
.ytx-channel-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 6px; border-radius: 14px; transition: background .15s; }
.ytx-channel-card:hover { background: rgba(127, 127, 127, .12); }
.ytx-channel-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; }
.ytx-channel-card strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ytx-channel-card span { font-size: 12px; opacity: .7; }
.ytx-empty { text-align: center; padding: 80px 0; opacity: .7; }

/* 반응형 */
@media (max-width: 1100px) {
  .ytx-hero { grid-template-columns: 1fr; }
  .ytx-hero-info h1 { font-size: 21px; }
  .ytx-next { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 16px; }
  .ytx-next h3 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ytx-home { padding: 8px 12px 40px; }
  .ytx-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .ytx-grid-shorts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ytx-grid-channels { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .ytx-channel-card img { width: 72px; height: 72px; }
  .ytx-hero { gap: 14px; margin-bottom: 26px; }
  .ytx-hero-media { border-radius: 12px; }
  .ytx-hero-info h1 { font-size: 18px; }
  .ytx-next-thumb { flex-basis: 140px; }
  .ytx-head h2 { font-size: 18px; }
}