/* 목업 37판 feed 화면 전용 CSS — 이 파일은 그 화면 담당 에이전트만 고친다(10/16 목업 구현 계약). 화면 파일에서 page({ styles: ['/assets/screens/feed.css'] }) 로 붙인다.
   390 폭 기준(휴대폰 767 이하는 그대로). 768 이상은 사진 카드 3열, 1080 이상은 4열, 내용 폭 최대 1200px(좌우 24·32px). 색·여백은 tokens.css 의 기존 토큰만 쓴다. */
[hidden] { display: none !important; }
svg.ic { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; flex: none; }

/* 앱 바: ‹ 뒤로 · 사연 · 돋보기 */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 60px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 3; }
.top.nav { padding-left: var(--sp-1); }
.top .brand { flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; max-width: none; font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: var(--fs-title); text-decoration: none; cursor: pointer; flex: none; }

/* 본문 틀 — site.css 의 main 여백·최소 높이 대신 목업처럼 구역마다 안쪽 여백 */
.feed-page { max-width: none; padding: 0 0 var(--sp-6); }
.feed-page .sec { padding: var(--sp-4) var(--sp-4) var(--sp-3); }

/* 분야 칩 한 줄 */
.pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pill { position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; padding: 0 var(--sp-3); border: 0; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: var(--fs-caption); font-weight: var(--fw-strong); text-decoration: none; white-space: nowrap; }
.pill.on, .pill[aria-current="true"] { background: var(--ink); color: var(--bg); }

/* 2열 사진 카드 */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3); }
.gcard { position: relative; min-width: 0; }
.gcard .ph { position: relative; overflow: hidden; height: 132px; border-radius: var(--radius); background: var(--surface); }
.gcard .ph svg { display: block; width: 100%; height: 100%; max-width: none; }
.gcard .ph.story-card-photo--blurred { display: block; padding: 0; min-height: 0; background: var(--surface); }
.gcard .ph.story-card-photo--blurred svg { filter: blur(14px) saturate(.6); transform: scale(1.1); }
.gcard .veil { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: var(--sp-2); text-align: center; color: var(--bg); font-size: var(--fs-caption); font-weight: var(--fw-bold); padding: var(--sp-3); background: rgba(0, 0, 0, .55); }
.gcard .veil button { justify-self: center; min-height: 44px; border: 1px solid var(--bg); background: transparent; color: var(--bg); border-radius: var(--radius-pill); padding: 0 var(--sp-4); cursor: pointer; font-size: var(--fs-caption); font-weight: var(--fw-strong); }
/* 사진을 연 뒤에는 흐림·가림막을 벗기고 안내 글자는 화면 읽기용으로만 남긴다 */
.gcard .ph:not(.story-card-photo--blurred) .veil { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; background: none; }
.gcard .b { display: grid; gap: var(--sp-1); padding-top: var(--sp-2); }
.gcard .t { margin: 0; max-width: none; font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); word-break: keep-all; }
.gcard .t a { color: inherit; text-decoration: none; display: inline; min-height: 0; }
.gcard .t a::after { content: ""; position: absolute; inset: 0; }
.gcard .m { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-1); max-width: none; font-size: var(--fs-caption); color: var(--muted); }
.gcard .st { min-width: 0; }
.gcard .st > div { display: inline; max-width: none; }
.gcard .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gcard .more { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3)) calc(-1 * var(--sp-2)) 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: var(--fs-title); text-decoration: none; cursor: pointer; flex: none; }
.gcard .example-label { font-size: var(--fs-caption); letter-spacing: 0; }
.gcard:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }

/* 빈 화면 안내·견본 위 한 줄 */
.empty { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--muted); font-size: var(--fs-caption); max-width: none; }
.feed-page .notice { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-4); max-width: none; font-size: var(--fs-caption); line-height: var(--lh-ui); color: var(--muted); background: var(--surface); border-radius: var(--radius); padding: var(--sp-3); }
.feed-page .notice a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink); font-weight: var(--fw-strong); }

/* 시트 안: 찾기 칸 · 찾은 사연 줄 · 신고 이유 단추 */
.feed-sheet .help { margin: 0; max-width: none; font-size: var(--fs-caption); color: var(--muted); line-height: var(--lh-ui); }
.feed-sheet form { display: grid; gap: var(--sp-2); margin: 0; }
.feed-sheet .field { display: grid; gap: var(--sp-1); border: 0; padding: 0; margin: 0; min-width: 0; }
.feed-sheet .lbl { display: block; margin: 0; max-width: none; font-weight: var(--fw-strong); color: var(--ink); }
.feed-sheet input[type="search"] { width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); }
.feed-sheet input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
.rank { margin-top: var(--sp-2); }
.rank > div { display: grid; grid-template-columns: 24px 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 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: var(--fw-strong); text-decoration: none; }
.rank .none { max-width: none; color: var(--muted); font-size: var(--fs-caption); padding: var(--sp-4) 0; text-align: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--ink); border-radius: var(--radius-pill); background: var(--ink); color: var(--bg); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-ui); text-align: center; cursor: pointer; }
.btn.ghost { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.feed-sheet .shout { justify-content: flex-start; text-align: left; font-weight: var(--fw-strong); }

/* 태블릿 768 이상: 카드 3열 · 앱 바 안쪽을 내용 폭(1200, 좌우 24)에 맞춤. 앱 바 단추(44px)는 안쪽 아이콘이 내용 가장자리에 오도록 12px 안으로 둔다. */
@media (min-width: 768px) {
  .feed-page, .top { --wg: var(--sp-5); }
  .top, .top.nav { padding-inline: max(calc(var(--wg) - 12px), calc((100% - 1200px) / 2 + var(--wg) - 12px)); }
  .feed-page { max-width: 1200px; margin-inline: auto; padding-bottom: var(--sp-6); }
  .feed-page .sec { padding: var(--sp-5) var(--wg) var(--sp-3); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  .gcard .ph { height: auto; aspect-ratio: 4 / 3; }
}

/* PC 1080 이상: 카드 4열 · 좌우 여백 32 */
@media (min-width: 1080px) {
  .feed-page, .top { --wg: calc(var(--sp-5) + var(--sp-2)); }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 으샤으샤 커뮤니티(G6): 사연 카드 아래 얇은 응원 막대(글 없이 막대만). */
.gcard .goal-thin { appearance: none; background: var(--line); border: 0; border-radius: var(--radius-pill); display: block; height: 4px; margin-top: var(--sp-2); overflow: hidden; width: 100%; }
.gcard .goal-thin::-webkit-progress-bar { background: var(--line); }
.gcard .goal-thin::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-pill); }
.gcard .goal-thin::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-pill); }