/* 홈 하위 목록 화면 — H-06 더보기 · 소액으로 가능한 물건 · H-10 예측 성공 사례 목록 · H-11 예측 사례 분석 (화면설계서 H 홈 v0.13, 시안 v15)
 * - 레이아웃 user-app-head 의 stylesheets 로 이 화면들에서만 읽음(user-tokens → user-fonts → user-home → user-app → (user-item-row) → 이 파일).
 * - 시안 v15 값: 설명 .mlds(12.5px 보조 글자) · 목록 끝 .mlft/.mlbtn · 사례 .pcl/.pcz/.pcv/.pccp/.pcs/.pcln. 색은 토큰만(잉크 · 빨강 · 회색).
 * - 접두어 hl-. 공통 부품(app-sh · app-box · app-pill-tabs · item-row · home-case · home-placeholder)은 그대로 쓰고 여기서는 화면 배치만.
 * - 인라인 style 없음(CSP style-src 'self'). 누르는 영역 48px(2-6). 시안과 다르게 정한 값은 "(제안)". */

.hl {
  padding-bottom: var(--space-6);
}

/* 3 설명 문구 (시안 .mlds) */
.hl-desc {
  margin: var(--space-1_5) 0 var(--space-2_5);
  color: var(--color-text-secondary);
  font-size: 0.78125rem;                      /* 12.5px */
  line-height: 1.5;
  word-break: keep-all;
}

.hl-desc__stats {
  white-space: nowrap;
}

/* 4 총 ○건 + 정렬 (시안 .rh2) — 정렬은 알약 링크 (제안: 스크립트 없이 동작) */
.hl-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2_5);
}

.hl-total {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.hl-total b {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.hl-sort {
  flex: 0 1 auto;
}

.hl-sort .app-pill-tab {
  flex: 0 0 auto;
  padding-inline: var(--space-2_5);
}

/* 5 목록 행 (시안 v15 mlCard: 이름 줄 굵게 16px) — 모양은 /static/shared/user-item-row.css */
.hl-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hl-row__name {
  display: block;
  margin: 3px 0 1px;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heavy);
  line-height: var(--font-leading-compact);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 목록 끝 (시안 .mlft · .mlbtn) */
.hl-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2_5);
  margin-top: 18px;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.hl-foot__btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-hit-min);
  padding: 0 22px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.hl-foot__btn:active {
  background: var(--color-brand-primary-pressed);
}

/* H-10 사례 세로 목록 (시안 .pcl: 간격 10, 카드 폭 = 화면 폭) */
.hl-cases__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2_5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hl-cases__list .home-case {
  width: auto;
}

/* H-10 쪽 넘김 (제안: "아래로 내리면 20개씩"의 스크립트 없는 대체) */
.hl-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
}

.hl-pager__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-hit-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-chip-border);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.hl-pager__link.is-off {
  border-color: var(--color-border-default);
  color: var(--color-text-disabled);
}

.hl-pager__now {
  color: var(--color-text-secondary);
}

/* ---------- H-11 예측 사례 분석 ---------- */
/* 2 사건 요약 (시안 .pcz) */
.hl-case__sum {
  margin: var(--space-2) 0 var(--space-3);
}

.hl-case__name {
  font-family: var(--font-family-title);
  font-size: var(--font-size-lg_5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-compact);
  word-break: keep-all;
}

.hl-case__area {
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.hl-case__meta {
  margin-top: 3px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-compact);
}

/* 3 예측 vs 실제 두 칸 (시안 .pcv) */
.hl-case__vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.hl-case__vs-cell {
  padding: var(--space-3);
  border-radius: var(--radius-box);
  background: var(--color-bg-surface);
}

.hl-case__vs-label {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.hl-case__vs-value {
  display: block;
  margin-top: 2px;
  font-size: 1.0625rem;                       /* 17px */
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-bold);
}

/* 4 오차 · 적중 알약 (시안 .pccp · .ok 빨강) */
.hl-case__pill {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 3px 10px;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-size: 0.78125rem;
  font-weight: var(--font-weight-bold);
}

.hl-case__pill.is-hit {
  background: var(--color-brand-primary-subtle);
  color: var(--color-money-gain);
}

/* 5 예측값 구하는 과정 4단계 (시안 .pcs: 잉크 동그라미 번호) */
.hl-steps {
  margin: 0;
  list-style: none;
}

.hl-step {
  display: flex;
  gap: var(--space-2_5);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-default);
}

.hl-step:last-child {
  border-bottom: 0;
}

.hl-step__no {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.hl-step__tx {
  flex: 1;
  min-width: 0;
}

.hl-step__title {
  display: block;
  font-size: 0.84375rem;                      /* 13.5px */
}

.hl-step__desc {
  display: block;
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 0.78125rem;
  line-height: 1.5;
  word-break: keep-all;
}

/* 6 · 7 입찰 결과 · 권리분석 (시안 kv) */
.hl-kv {
  margin: 0;
}

.hl-kv__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-default);
  font-size: var(--font-size-sm);
}

.hl-kv__row:last-child {
  border-bottom: 0;
}

.hl-kv__row dt {
  flex: none;
  color: var(--color-text-secondary);
}

.hl-kv__row dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  text-align: right;
  word-break: keep-all;
}

.hl-notes {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

/* 8 원문 링크 (시안 .pcln: 빨강 밑줄) */
.hl-case__src {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-hit-min);
  margin: var(--space-3) 0 var(--space-2);
  color: var(--color-brand-primary-pressed);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- L-04 동영상 강의 (화면설계서 L v0.2 L-04, 시안 v15 V.videos) ----------
 * 30 분류 칩: 알약 링크 가로 넘김(칩 수가 많아도 한 줄 — 넘치면 가로 스크롤). 31 줄: 검은 썸네일 자리(home-video__thumb 재사용, 폭 112px) + 제목 · "분류 · 길이".
 * 외부 썸네일 · 플레이어 없음(CSP 그대로). 줄은 누르는 곳이 아님 — "재생 준비 중" 줄. */
.hl-vids__cats {
  margin: var(--space-1_5) 0 var(--space-3);
  overflow-x: auto;
}

.hl-vids__cats .app-pill-tab {
  flex: 0 0 auto;
  padding-inline: var(--space-2_5);
}

.hl-vids__list {
  display: grid;
  gap: var(--space-2_5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hl-vid {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.hl-vid__thumb {
  flex: 0 0 112px;
  height: 63px;
}

.hl-vid__tx {
  flex: 1 1 auto;
  min-width: 0;
}

.hl-vid__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  word-break: keep-all;
}

.hl-vid__meta,
.hl-vid__note {
  margin-top: 2px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs_5);
  line-height: var(--font-leading-compact);
}