/* 목업 37판 home 화면 전용 CSS — 이 파일은 그 화면 담당 에이전트만 고친다(10/16 목업 구현 계약). 화면 파일에서 page({ styles: ['/assets/screens/home.css'] }) 로 붙인다. */
.home-main { max-width: none; padding: 0; }
.home-main section { border-top: 0; }
.home-main h2 { margin: 0 0 var(--sp-3); letter-spacing: var(--ls-heading); }
.home-main .sec-row h2 { margin: 0; }
.home-main .sec-row .help { white-space: nowrap; }

/* 띠 */
.scam-band { border-bottom: 0; }
.band a { color: var(--link); font-weight: var(--fw-strong); }

/* 첫 줄 */
.hero { padding-top: var(--sp-4); padding-bottom: var(--sp-4); display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: var(--sp-3); row-gap: var(--sp-2); align-items: center; }
.hero h1 { font-size: var(--fs-heading); font-weight: var(--fw-bold); margin: 0; max-width: none; text-wrap: balance; line-height: var(--lh-heading); }
.hero p { line-height: var(--lh-body); margin: 0; max-width: none; }
.hero .kicker { font-size: var(--fs-small); color: var(--muted); }
/* 첫 줄 그림(hero_art.ts): 사람들이 서로 감싸안는 따뜻한 색 원 하나. 휴대폰(≤767)은 84px 로 줄여 제목 옆 왼쪽에 두고(첫 화면 844px 안에 첫 사연 카드 그림이 들어오게),
   768 이상은 오른쪽 열에 크게 둔다. 장식 그라데이션·물결은 쓰지 않는다. */
.hero-art { margin: 0; width: 84px; }
.hero-art svg { display: block; width: 100%; height: auto; }
.hero > .hero-art { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.hero > .kicker { grid-column: 2; grid-row: 1; }
.hero > h1 { grid-column: 2; grid-row: 2; }
.hero > p, .hero > .hero-actions { grid-column: 1 / -1; }
/* 첫 줄의 행동은 작은 글자 링크 둘뿐이다(2물결 버튼 정리 — 홈의 주 행동은 사연 카드). 눌리는 칸 높이는 .linkish.block 의 44px 를 그대로 쓴다. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-5); }
.hero-actions .linkish { font-size: var(--fs-small); }

/* 정렬·조건 패널: 평소엔 접혀 있고, 알약을 누르거나 조건 링크로 오면(#sortpanel) 열린다 */
.sortpanel { display: none; background: var(--surface); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-3); gap: var(--sp-2); }
.sortpanel:target, .sortpanel[data-open] { display: grid; }
.grp-l { font-size: var(--fs-small); color: var(--muted); font-weight: var(--fw-strong); }
[data-sort-toggle] .ic { width: 16px; height: 16px; }

/* 가로로 넘기는 카드: 다음 카드 끝이 보인다 */
.track { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4) var(--sp-1); scroll-padding: 0 var(--sp-4); min-height: 0; }
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 86%; scroll-snap-align: start; min-width: 0; }
.card { position: relative; cursor: pointer; }
/* 카드 한 장은 얇은 따뜻한 선 하나로 감싼다(그림자 없음). 사진은 윗변에 붙고, [응원하기] 알약은 이 선 안쪽 맨 아래에 있다. */
.slide > .card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.card .ph { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--sp-2); height: 200px; min-height: 0; padding: var(--sp-3); border-radius: 0; background: var(--surface); color: var(--muted); font-size: var(--fs-caption); text-align: center; }
.card .ph button { position: relative; z-index: 2; min-height: 44px; }
.card .body { display: grid; gap: var(--sp-1); padding: var(--sp-3); }
.card .body p { margin: 0; max-width: none; }
.card .title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.card .title a { color: inherit; text-decoration: none; display: inline; min-height: 0; }
.card .title a::after { content: ""; position: absolute; inset: 0; }
.card .ph button, .card .ph { z-index: auto; }
/* 카드 분류 줄('분야 · 지역')은 작은 보조 글, 상태는 칩 한 줄('모금 준비 중 · 지금은 응원만' / '해외 사연 · 지금은 응원만') */
.card .meta-line { font-size: var(--fs-caption); color: var(--muted); }
.card .status { align-self: flex-start; margin-top: var(--sp-1); padding: 2px var(--sp-3); border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font-size: var(--fs-caption); font-weight: var(--fw-strong); line-height: 1.5; }
.react { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-small); color: var(--muted); align-items: center; }
.react span { display: inline-flex; gap: var(--sp-1); align-items: center; }
.react .ic { width: 16px; height: 16px; color: var(--heart); }
.empty { background: var(--surface); border-radius: var(--radius); padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--muted); font-size: var(--fs-small); display: grid; gap: var(--sp-2); justify-items: center; }
.empty p { margin: 0; }

/* 실시간: 아바타 원 + 이름·내용 두 줄. 칸이 좁아도 글이 한 글자씩 꺾이지 않는다 */
.live-panel { border: 0; border-radius: 0; padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.live-panel .sec-row { flex-wrap: wrap; }
.live-panel .sec-row .help { flex: 1; min-width: 0; }
.feed { display: grid; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--sp-2); align-items: center; padding: var(--sp-1) 0; max-width: none; line-height: var(--lh-ui); }
.feed li::before { content: ""; grid-row: 1 / span 2; grid-column: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--warm-blush); }
.feed li > span { grid-column: 2; min-width: 0; overflow-wrap: break-word; }
.feed li > [data-live-name] { font-weight: var(--fw-strong); }
.feed li > span:not([data-live-name]) { color: var(--muted); font-size: var(--fs-small); }
.handle, .live-all summary.handle { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--line); margin-top: var(--sp-2); background: transparent; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-strong); cursor: pointer; border-radius: 0; list-style: none; }
.live-all { border: 0; padding: 0; max-width: none; }
.live-all summary::-webkit-details-marker { display: none; }
.live-all .feed { padding-top: var(--sp-2); }

/* 지금까지 · 사람 · 랭킹 */
.participation-count-line { margin: 0; max-width: none; }
.people { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.people::-webkit-scrollbar { display: none; }
.home-ranking .tabs { margin-top: 0; }
.home-ranking .tab { font-size: var(--fs-small); }
.home-ranking-who { margin-top: var(--sp-3); }
.rank { margin-top: var(--sp-2); }
.rank > div { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.rank b { color: var(--muted); font-weight: var(--fw-strong); }
.rank .namebtn { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.rank .none { color: var(--muted); font-size: var(--fs-small); padding: var(--sp-4) 0; text-align: center; margin: 0; max-width: none; }
.example-label { font-size: var(--fs-caption); margin-right: var(--sp-1); }
/* 기준 시각은 13px 보조 글 */
.home-main .month-goal-asof, .home-main .participation-asof { font-size: var(--fs-caption); }

/* 견본·사진 없는 카드의 분야 그림은 카드 칸을 꽉 채운다(목업 37판 .ph svg — 0번 13:4x 캡처 대조: 회색 상자 안에 작게 들어가 있었음). */
.card .ph > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }

/* ===== 반응형 웹(RW1): 휴대폰(767px 이하)은 위 규칙 그대로, 태블릿 768px 이상·PC 1080px 이상만 아래가 덧씌운다. ===== */
/* 실시간·지금까지·최근 참여한 사람·랭킹 네 묶음. 휴대폰은 위에서 아래로 한 줄(그냥 블록), 768 이상은 두 열 다단으로 흘러 브라우저가 두 열 높이를 맞춘다. */
.home-cols { display: block; }

@media (min-width: 768px) {
  /* 내용은 최대 1200px 가운데, 좌우 여백은 태블릿 24px·PC 32px(--page-gutter). 구역 안쪽 좌우 여백은 main 이 대신 준다. */
  .home-main { max-width: calc(var(--content-max) + 2 * var(--page-gutter)); margin-inline: auto; padding-inline: var(--page-gutter); }
  .home-main section { padding-inline: 0; padding-block: var(--sp-5); }

  /* 첫 줄: 제목·한 문장은 읽기 좋은 폭으로, 그 아래 작은 글자 링크 둘 */
  .hero { padding-top: var(--sp-6); padding-bottom: var(--sp-5); gap: var(--sp-3); }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); column-gap: var(--sp-6); align-items: center; }
  .hero > .kicker, .hero > h1, .hero > p, .hero > .hero-actions { grid-column: 1; grid-row: auto; }
  .hero > .hero-art { grid-column: 2; grid-row: 1 / span 5; justify-self: end; width: 100%; max-width: 260px; }
  .hero h1 { max-width: 18em; font-size: var(--fs-display); }
  .hero p { max-width: 38em; }

  /* 사연 카드: 가로 넘김 대신 격자(태블릿 2열 — 네 장이 3열이면 넷째가 혼자 한 줄을 차지해 2열로 맞춘다, PC 는 4열) */
  .track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; scroll-padding: 0; }
  .track > .slide { min-width: 0; }
  .track > .slide:only-child { grid-column: 1 / -1; }
  /* 외톨이 카드 없애기(carousel.ts trackShapeClass): 태블릿 2열은 짝수 장만, 1장은 한 줄 가로 카드. 감춘 카드는 '사연 모두 보기 (N)' 로 본다. */
  .track.odd > .slide:last-child { display: none; }
  .track.cols-1 { grid-template-columns: minmax(0, 1fr); }
  .track.cols-1 .slide > .card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .track.cols-1 .card .ph { height: auto; min-height: 240px; grid-row: 1 / span 2; }
  .track.cols-1 .card .body { padding: var(--sp-5); align-content: center; }
  .story-all { justify-content: flex-end; }

  /* 네 묶음을 두 열로 흘린다(태블릿부터). 묶음은 열 사이에서 쪼개지지 않는다 — 한쪽 열만 길어 아래가 비는 일이 없게 다단으로 맞춘다. */
  .home-cols { display: block; column-count: 2; column-gap: var(--sp-5); }
  .home-cols > * { break-inside: avoid; }
  .people { flex-wrap: wrap; overflow: visible; }
}

@media (min-width: 1080px) {
  .home-main section { padding-block: var(--sp-5); }
  .hero { grid-template-columns: minmax(0, 1fr) 340px; }

  /* 사연 카드 4열: 4의 배수만 보이게 남는 끝 카드를 감춘다. 3장 이하는 장 수만큼 열. */
  .track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .track.odd > .slide:last-child { display: flex; }
  .track.rem-1 > .slide:last-child, .track.rem-2 > .slide:nth-last-child(-n+2), .track.rem-3 > .slide:nth-last-child(-n+3) { display: none; }
  .track.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .track.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-cols { column-gap: var(--sp-6); }
}

/* 으샤으샤 커뮤니티(G6): 홈 실시간 위 '함께 해냈어요' 한 줄과 사연 카드 얇은 막대. 돈 숫자 없이 응원 횟수만. */
.home-milestone { background: var(--warm-blush); border-radius: var(--radius); font-weight: var(--fw-strong); line-height: var(--lh-ui); margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.home-main .home-milestone a { color: var(--link); display: inline; min-height: 0; text-decoration: none; }
.goal-thin { appearance: none; background: var(--line); border: 0; border-radius: var(--radius-pill); display: block; height: 4px; overflow: hidden; width: 100%; }
.goal-thin::-webkit-progress-bar { background: var(--line); }
.goal-thin::-webkit-progress-value { background: var(--progress-fill); border-radius: var(--radius-pill); }
.goal-thin::-moz-progress-bar { background: var(--progress-fill); border-radius: var(--radius-pill); }
.card .body .goal-thin { margin-top: var(--sp-1); }
@media (min-width: 768px) {
  .home-milestone { padding: var(--sp-3) var(--sp-5); }
}
@media (min-width: 1080px) {
  .home-milestone { margin-bottom: var(--sp-4); }
}

/* 이달 응원 목표(2물결, 비금전): 사연 카드 위 한 줄 막대. 폭은 style 이 아니라 <progress> 의 value 로 정한다. 0 이면 막대 없이 '첫 응원자가 되어 주세요'. */
.home-main .month-goal { display: grid; gap: var(--sp-2); margin: 0 var(--sp-4) var(--sp-3); padding: var(--sp-4); border-radius: var(--radius-lg); background: var(--warm-blush); }
.month-goal-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); }
.home-main .month-goal-h { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); }
.month-goal-count { margin: 0; max-width: none; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.month-goal-count b { color: var(--ink); font-size: var(--fs-title); font-weight: var(--fw-bold); }
.month-goal-bar { appearance: none; background: var(--bg); border: 0; border-radius: var(--radius-pill); display: block; height: 12px; overflow: hidden; width: 100%; }
.month-goal-bar::-webkit-progress-bar { background: var(--bg); border-radius: var(--radius-pill); }
.month-goal-bar::-webkit-progress-value { background: var(--progress-fill); border-radius: var(--radius-pill); }
.month-goal-bar::-moz-progress-bar { background: var(--progress-fill); border-radius: var(--radius-pill); }
.month-goal-first, .month-goal-done { margin: 0; max-width: none; font-weight: var(--fw-bold); }
.month-goal-done { color: var(--link); }
.month-goal .help { margin: 0; max-width: none; }
.participation-asof { margin: var(--sp-1) 0 0; max-width: none; }

/* 카드 높이를 한 줄에서 맞추고 [응원하기 N] 을 카드 맨 아래에 모은다 — 제목이 한 줄·두 줄인 카드가 섞여도 단추 줄이 같다. */
.slide { display: flex; }
.slide > .card { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.card .body { display: flex; flex: 1 1 auto; flex-direction: column; }
.slide > .empty { flex: 1 1 auto; }
.card .body .goal-thin { margin-bottom: var(--sp-2); }
/* 알약 바로 위 줄은 늘 12px 띄운다(카드 높이가 같아 알약이 맨 아래로 내려가도 위 줄에 붙지 않는다). */
.card .body > :nth-last-child(2) { margin-bottom: var(--sp-3); }

/* 카드 안 [응원하기]: 작은 알약. 카드 전체 링크(제목 ::after) 위로 올려 따로 눌린다. 눌리는 칸은 위아래 2px 더해 44px. */
.card .body .cheer-link { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 40px; margin-top: auto; padding: 0 var(--sp-4); border: 0; border-radius: var(--radius-pill); background: var(--warm-blush); color: var(--link); font-size: var(--fs-small); font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap; }
.card .body .cheer-link::after { content: ""; position: absolute; inset: -2px 0; }
.card .body .cheer-link:hover, .card .body .cheer-link:focus-visible { background: var(--action); color: var(--bg); }

@media (min-width: 768px) {
  .home-main .month-goal { margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-5); }
}

/* '사연 모두 보기 (N)': 휴대폰은 카드 줄 아래 왼쪽, 태블릿·PC 는 오른쪽 */
.story-all { display: flex; margin: var(--sp-2) 0 0; max-width: none; }
.story-all .linkish { font-size: var(--fs-small); }

/* 빈 상태(지어낸 사람 없이 사실만): 실시간·최근 참여한 사람·랭킹 */
.feed-empty, .people-empty { margin: 0; max-width: none; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-ui); }
.feed:has(> [data-live-seq]) + .feed-empty { display: none; }
.live-panel:not(:has([data-live-seq])) .live-all { display: none; }
.rank > .rank-empty { display: grid; justify-items: start; gap: 0; grid-template-columns: none; min-height: 0; padding: var(--sp-3) 0 var(--sp-1); border-bottom: 0; }
.rank-empty p { margin: 0; max-width: none; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-ui); }

/* 팀 후원 칸: 왜 후원받는지 한 문장 + (있을 때만) 서포터 수 + 보조 단추 하나. 옅은 바탕 상자, 테두리 없음. */
.home-main .home-support { display: grid; gap: var(--sp-3); margin: var(--sp-4); padding: var(--sp-4); border-radius: var(--radius-lg); background: var(--surface); }
.home-support-text { display: grid; gap: var(--sp-1); }
.home-main .home-support .sec-h { margin: 0; font-size: var(--fs-title); }
.home-support p { margin: 0; max-width: none; line-height: var(--lh-body); }
.home-support .home-support-count { color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-strong); }
.home-support .home-support-link { width: auto; justify-self: start; text-decoration: none; }
@media (min-width: 768px) {
  .home-main .home-support { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-5); margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); }
}