/* PC 층: public/shared/user-home-lists.css 위에 얹는 넓은 화면 배치 */

/* 목록은 넓은 폭을 격자로. 사례 분석(글 한 편)은 읽기 폭 그대로 */
.pc-main { --pc-main-width: 1200px; }
.pc-main:has(> .hl-case) { --pc-main-width: var(--pc-reading-width); }

/* 물건 행 2단. 넓은 폭에서 행은 줄로 이어지는 장부 모양(PC 층 user-item-row.css)이므로 틈 없이 한 장으로 묶고 단 사이는 가는 줄 */
.hl-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: var(--radius-box);
  background: var(--color-bg-surface);
}
.hl-rows > li { display: flex; min-width: 0; }
.hl-rows > li:nth-child(even) { border-left: 1px solid var(--color-border-default); }
.hl-rows > li:nth-child(2) > .item-row { border-top: 0; }
/* 묶음이 모서리를 자르므로 초점 표시는 행 안쪽에 */
.hl-rows .item-row:focus-visible { outline-offset: -2px; }

/* 예측 사례 3단: 공통 부품의 세로 목록을 격자로 */
.hl-cases__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.hl-cases__list > li { display: flex; min-width: 0; }
.hl-cases__list .home-case { width: 100%; }

/* 동영상 강의 4단: 썸네일을 위로. 분류 칩은 가로 넘김 대신 줄바꿈 */
.hl-vids__cats { flex-wrap: wrap; overflow-x: visible; }
.hl-vids__list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}
.hl-vid { flex-direction: column; gap: var(--space-2); }
.hl-vid__thumb { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.hl-vid__tx { width: 100%; }