/* 사연 카드 한 모양(2026-10-17, 대표 GV130 장점 1) — 홈 두 줄·/stories 목록·견본이 모두 이 한 모양이다.
   사진 칸(가로세로 4:3 — 카드의 60% 안팎) · 분야·지역 · 제목 두 줄 · 진행 한 줄('응원 n / 목표' + 짧은 상태 글).
   카드 안에 단추가 없고, 제목 링크의 ::after 가 카드 전체를 덮어 카드 전체가 링크 하나다(packages/render/src/components/story_card.ts). 색·간격은 tokens.css 토큰만 쓴다. */
/* 휴대폰 2열 — 칸 최소 폭을 rem 으로 둬서 글자를 크게 키우면(200%) 저절로 1열이 된다(글이 잘리지 않게). 기본 글자 크기에서는 320~767 모두 2열이다. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--sp-5) var(--sp-3); }
.gcard { position: relative; display: grid; grid-template-rows: auto 1fr; gap: var(--sp-2); min-width: 0; }
.gcard .ph { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--surface); }
.gcard .ph > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.gcard .ph > img { transition: transform .3s; }
.gcard:hover .ph > img { transform: scale(1.03); }
.gcard .b { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.gcard .b > * { max-width: none; }

/* 분야 · 지역 */
.gcard .m { margin: 0; font-size: var(--fs-caption); color: var(--muted); line-height: var(--lh-ui); }

/* 제목은 세 줄까지(넘치면 …, 2026-10-18 DF: 두 줄에서 핵심 낱말이 잘렸다) — 낱말 단위 줄바꿈 + 줄 길이 고르기(text-wrap: balance). 한두 줄짜리도 두 줄 높이를 비우고, 제목 아래 여백을 auto 로 받아 진행 줄이 카드 바닥에 붙어 같은 줄의 카드끼리 높이가 맞는다. */
.gcard .t { margin: 0 0 auto; font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); word-break: keep-all; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * var(--lh-heading) * 1em); }
.gcard .t a { color: inherit; text-decoration: none; display: inline; min-height: 0; }
.gcard .t a::after { content: ""; position: absolute; inset: 0; }
.gcard:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }

/* 진행 한 줄: 얇은 막대 + '응원 n / 목표'(왼쪽, 숫자는 강조색) + 짧은 상태 글(오른쪽). 응원이 0 이면 막대 자리만 비우고 목표만 적는다(0 은 보이지 않는다). */
.gcard .goal-thin { appearance: none; background: var(--line); border: 0; border-radius: var(--radius-pill); display: block; height: 4px; margin-top: var(--sp-1); overflow: hidden; width: 100%; }
.gcard .goal-thin::-webkit-progress-bar { background: var(--line); }
.gcard .goal-thin::-webkit-progress-value { background: var(--progress-fill); border-radius: var(--radius-pill); }
.gcard .goal-thin::-moz-progress-bar { background: var(--progress-fill); border-radius: var(--radius-pill); }
.gcard .goal-gap { display: block; height: 4px; margin-top: var(--sp-1); }
.gcard .pr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--sp-2); margin: 0; font-size: var(--fs-caption); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
.gcard .pr .n { color: var(--ink); }
.gcard .pr .n b { color: var(--action); font-weight: var(--fw-bold); }
.gcard .pr .s { color: var(--muted); margin-left: auto; }

/* 가린 사진(신고로 가림·민감한 사진·가린 사연): 분야 색 블록(.story-ph-block, site.css) 위에 가림막과 안내 글만. 단추는 없다 — 사진은 사연 상세에서 본다. */
.gcard .veil { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; padding: var(--sp-3); background: rgba(26, 22, 19, .62); color: var(--bg); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: var(--lh-ui); text-align: center; }
.gcard.is-masked .t { display: block; overflow: visible; min-height: 0; font-size: var(--fs-small); font-weight: var(--fw-regular); }

/* 견본 카드(사연 0건일 때만): 제목은 링크가 아니라 글자이고 '예시라 열리지 않아요' 한 줄이 먼저 말한다 — 카드 전체가 눌리는 것처럼 보이지 않게 손가락 모양을 끈다. */
.gcard.is-example { cursor: default; }
.gcard .example-label { font-size: var(--fs-caption); letter-spacing: 0; margin-right: var(--sp-1); }
.gcard .example-title { color: inherit; }
.gcard .example-note { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-ui); color: var(--muted); }

/* 임시 사례 카드(2026-10-17 TS, 대표 문구 '임시사례입니다. 사연을 제보해주세요!'): 사진 칸 바로 아래 한 줄 표지. 진행 줄·숫자는 없다. 카드 전체는 제목 링크 하나로 상세에 간다.
   2026-10-18 DF(레드팀: 빨간 막대가 사연 제목보다 세다): 꽉 찬 빨간 막대 → 글자 크기만큼의 옅은 배지(--warm-blush 바탕 · --link 글자 = 5.8:1, 베타 칩과 같은 조합). 글자는 그대로이고 카드마다 보인다(예시임을 알리는 일은 그대로). 빨간 실단추는 상세 아래 [사연 제보하기] 하나뿐이다. */
.gcard .sample-band { align-self: flex-start; margin: 0 0 var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--radius); background: var(--warm-blush); color: var(--link); font-size: var(--fs-caption); font-weight: var(--fw-strong); line-height: var(--lh-ui); text-align: left; word-break: keep-all; }

/* 임시 사례 상세(/c/sample-…): 사진 칸 → 제목 → 분류 → 대표 문구 한 줄 안내(통째로 /tip 링크, 2026-10-18 DF: 제목 위 빨간 띠였다) → 한 문장 → 사연 내용 → 필요한 것 → [사연 제보하기] 하나. 응원·후원·공유·신고·진행 막대 없음. */
.sample-page { display: grid; gap: var(--sp-3); margin-inline: auto; max-width: var(--read-max); padding: var(--sp-2) var(--page-gutter) var(--sp-6); }
.sample-page > * { margin-block: 0; max-width: none; }
.sample-crumb-link { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; color: var(--ink); font-size: var(--fs-small); text-decoration: none; }
.sample-crumb-link .ic { width: 20px; height: 20px; }
.sample-hero { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.sample-band--detail { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--warm-blush); color: var(--link); font-size: var(--fs-small); font-weight: var(--fw-strong); line-height: var(--lh-ui); text-align: left; text-decoration: none; word-break: keep-all; }
.sample-band--detail::after { content: "\203A"; flex: none; }
.sample-band--detail:hover { background: var(--warm-cream-line); }
.sample-band--detail:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sample-title { font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); word-break: keep-all; overflow-wrap: anywhere; }
.sample-meta { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-ui); }
.sample-lead { font-size: var(--fs-title); font-weight: var(--fw-strong); line-height: var(--lh-heading); word-break: keep-all; }
.sample-sec { display: grid; gap: var(--sp-2); }
.sample-sec .sec-h { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); }
.sample-sec .body-text { margin: 0; max-width: none; line-height: var(--lh-body); word-break: keep-all; }
.sample-needs { display: grid; gap: var(--sp-1); margin: 0; padding-left: var(--sp-5); }
.sample-rough { margin: 0; font-weight: var(--fw-strong); }
.sample-not-real { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-ui); }
.sample-act { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .gcard .ph > img { transition: none; }
  .gcard:hover .ph > img { transform: none; }
}