/* 새 셸 화면별 완성도 층 — feed(피드 페이지·카드·위젯). DESIGN.md(Framer) 준수 · body.shell-v2 스코프 */
/*   ⚠️ 덮어쓰기 대상: shell2.css(.feed-page-*) · framer.css(카드 표면 — .feed-card/.feed-post) · feed/feed.css(피드 v1 흐름). 원본은 읽기 전용.
 *   library.css 에서 옮겨 온 규칙이다(선언 순서 그대로 — index.html 이 library.css 바로 뒤에 링크한다). */

/* ════════ 피드 ════════ */
/* 폭: 머리와 타임라인이 같은 열(680) — shell2 의 900 머리 + feed.css 의 600 본문이 어긋나던 것 */
body.shell-v2 .feed-page-wrap { max-width: 680px; padding: var(--sp-xl) var(--sp-lg) var(--sp-section); }
body.shell-v2 .feed-page-wrap > .hub-section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: var(--sp-md); }
body.shell-v2 .feed-page-wrap > .hub-section-head .hub-title { margin: 0; }
body.shell-v2 .feed-page-wrap .feed-wrap { max-width: none; padding: 0; }
body.shell-v2 .feed-page-wrap .feed-timeline { gap: 10px; margin-top: 0; }
body.shell-v2 .feed-page-empty { padding: var(--sp-xxl) var(--sp-lg); background: var(--surface-1); border-radius: var(--r-xl); color: var(--ink-48); }

/* 카드 — 표면은 바깥 .feed-card 하나(framer.css ⑥). 아바타+머리 한 줄 아래로 본문을 카드 전폭에 편다(.feed-post 는 display:contents). */
body.shell-v2 .feed-page-wrap .feed-card {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 12px; align-items: center;
  padding: var(--sp-lg); border: 0; border-radius: var(--r-xl); background: var(--surface-1);
}
body.shell-v2 .feed-page-wrap .feed-card:hover { background: var(--surface-1); }
body.shell-v2 .feed-page-wrap .feed-card > .feed-avatar { grid-column: 1; grid-row: 1; }
body.shell-v2 .feed-page-wrap .feed-card > .feed-post { display: contents; }
body.shell-v2 .feed-page-wrap .feed-card > .feed-post > * { grid-column: 1 / -1; min-width: 0; }
body.shell-v2 .feed-page-wrap .feed-card > .feed-post > .feed-post-head { grid-column: 2; grid-row: 1; }

/* 트렌드 캐러셀(FEED_INLINE 광고와 번갈아 타임라인에 섞인다 — feedPage.js·feedTrendCarousel.js, 오너 지시 2026-09-17).
   표면은 .feed-card 와 같게(카드 한 벌처럼 보이게) · 안쪽 트렌드 줄(trow)은 home.css 규칙을 그대로 물려받는다. */
body.shell-v2 .feed-page-wrap .feed-trend-carousel {
  padding: var(--sp-lg); border-radius: var(--r-xl); background: var(--surface-1);
}

/* 아바타 — 중립 표면(작성자 해시색 대신). feedAvatar.js 는 새 셸에서 인라인 색을 박지 않는다(v1 홈 피드는 해시색 유지). */
body.shell-v2 .feed-avatar { background-color: var(--surface-3); color: var(--ink-80); box-shadow: none; }
body.shell-v2 .feed-avatar--me { background-color: var(--ink); color: var(--canvas); }
body.shell-v2 .feed-page-wrap .feed-avatar { width: 40px; height: 40px; font-size: 14px; font-weight: 600; letter-spacing: 0; }
body.shell-v2 .feed-page-wrap .feed-avatar--sm { width: 32px; height: 32px; font-size: 12px; }

/* 머리 — 작성자 · 종류(중립 칩) · 시간 */
body.shell-v2 .feed-page-wrap .feed-post-head { gap: 8px; min-width: 0; }
body.shell-v2 .feed-page-wrap .feed-post-author { font-size: var(--fs-body); font-weight: 600; letter-spacing: var(--ls-body); }
body.shell-v2 .feed-page-wrap .feed-post-head .feed-badge {
  padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-80);
  font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap;
}
body.shell-v2 .feed-page-wrap .feed-post-head .feed-badge::before { content: none; }
body.shell-v2 .feed-page-wrap .feed-post-head .feed-badge:empty { display: none; }
body.shell-v2 .feed-page-wrap .feed-post-time { font-size: var(--fs-fine); }

/* 임베드 — 이벤트 라벨(작게·회색) → 제목 → 로그라인 → 태그 */
body.shell-v2 .feed-page-wrap .feed-embed { margin: 0; border-radius: var(--r-md); }
body.shell-v2 .feed-page-wrap .feed-embed:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .feed-page-wrap .feed-embed-pad { gap: 4px; }
body.shell-v2 .feed-page-wrap .feed-embed-eyebrow { font-size: var(--fs-fine); font-weight: 500; letter-spacing: var(--ls-caption); text-transform: none; color: var(--ink-48); }
body.shell-v2 .feed-page-wrap .feed-embed-title {
  font-size: var(--fs-title-3); font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; color: var(--ink);
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;
}
body.shell-v2 .feed-page-wrap .feed-embed--text:hover .feed-embed-title { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-48); text-underline-offset: 3px; }
body.shell-v2 .feed-page-wrap .feed-embed-logline { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-80); word-break: keep-all; }
body.shell-v2 .feed-page-wrap .feed-embed-tags { gap: 6px; margin-top: 6px; }
body.shell-v2 .feed-page-wrap .feed-chip { padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-80); font-size: var(--fs-fine); font-weight: 500; }

/* 미디어 — 비율 고정 · 최대 높이 · 중립 바탕. 캐릭터는 세로 초상 · 콘티는 정사각 · 영상은 16:9 */
body.shell-v2 .feed-page-wrap .feed-embed--media { gap: 12px; }
body.shell-v2 .feed-page-wrap .feed-embed-media { border: 0; border-radius: var(--r-lg); background-color: var(--surface-2); aspect-ratio: 16 / 9; max-height: 340px; }
body.shell-v2 .feed-page-wrap .feed-card--character .feed-embed-media { aspect-ratio: 4 / 5; width: min(100%, 240px); max-height: none; }
body.shell-v2 .feed-page-wrap .feed-card--storyboard .feed-embed-media { aspect-ratio: 1 / 1; width: min(100%, 300px); max-height: none; }
body.shell-v2 .feed-page-wrap .feed-embed:hover .feed-embed-media { filter: brightness(1.08); }
body.shell-v2 .feed-page-wrap .feed-embed-media--video::before { width: 64px; height: 64px; background: color-mix(in srgb, var(--canvas) 62%, transparent); backdrop-filter: blur(4px); }
body.shell-v2 .feed-page-wrap .feed-embed-media--video::after { border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--ink); filter: none; }

/* 액션 — 응원·댓글(같은 아이콘 계열) · 오른쪽 끝 이동 링크 */
body.shell-v2 .feed-page-wrap .feed-actions { gap: 2px; margin: 0 0 0 -10px; }
body.shell-v2 .feed-page-wrap .feed-act {
  height: 36px; padding: 0 10px; gap: 6px; border-radius: var(--r-pill);
  color: var(--ink-48); font-size: var(--fs-fine); font-weight: 500;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
body.shell-v2 .feed-page-wrap .feed-act:hover { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .feed-page-wrap .feed-act:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .feed-page-wrap .feed-act--view:hover { background: transparent; color: var(--ink-48); }
body.shell-v2 .feed-page-wrap .feed-act svg { stroke-width: 2; }
body.shell-v2 .feed-page-wrap .feed-react-trigger-emoji { display: inline-flex; align-items: center; justify-content: center; width: 16px; font-size: 15px; }
body.shell-v2 .feed-page-wrap .feed-act--reacted { color: var(--ink); }
body.shell-v2 .feed-page-wrap .feed-react-group { gap: 4px; }
body.shell-v2 .feed-page-wrap .feed-react-chip { height: 28px; padding: 0 10px; gap: 4px; border: 0; background: var(--surface-2); color: var(--ink-80); }
body.shell-v2 .feed-page-wrap .feed-react-chip:hover { background: var(--surface-3); }
body.shell-v2 .feed-page-wrap .feed-react-chip.is-mine { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
body.shell-v2 .feed-page-wrap .feed-react-chip:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .feed-page-wrap .feed-react-picker { padding: 4px; border: 0; background: var(--surface-2); box-shadow: var(--shadow-float); }
body.shell-v2 .feed-page-wrap .feed-react-opt { width: 40px; height: 40px; }
body.shell-v2 .feed-page-wrap .feed-react-opt:hover { background: var(--surface-3); }
body.shell-v2 .feed-page-wrap .feed-react-opt:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* 이동 링크 — 홈의 '전체 보기'(.hub-more · .trow-more)와 같은 문법: 회색 글자 · 테두리 없음 · hover 에만 표면 알약.
 *   2026-09-17 전엔 파랑 글자 + secondary 테두리라 홈과 다른 버튼처럼 보였다(오너 신고). 카드가 surface-1 이라 hover 는 한 단 위. */
body.shell-v2 .feed-page-wrap .btn.feed-cta {
  align-self: auto; margin: 0 -10px 0 auto; min-height: 32px; height: auto; padding: 0 10px;
  border: 0; border-radius: var(--r-pill); background: transparent; box-shadow: none;
  color: var(--ink-80); font-size: 14px; font-weight: 500;
}
body.shell-v2 .feed-page-wrap .btn.feed-cta:hover { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .feed-page-wrap .btn.feed-cta:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .feed-page-wrap .feed-post > .btn.feed-cta { justify-self: start; margin: 0 0 0 -10px; }

/* 댓글 */
body.shell-v2 .feed-page-wrap .feed-comments { margin-top: 0; padding-top: 12px; border-top-color: var(--hairline-soft); }
body.shell-v2 .feed-page-wrap .feed-comment-composer { border-top-color: var(--hairline-soft); }
body.shell-v2 .feed-page-wrap .feed-comment-input { height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface-2); }
body.shell-v2 .feed-page-wrap .feed-comment-input:focus-visible { box-shadow: var(--ring-focus); }

/* 활동·축하 카드 — 같은 표면 카드 언어(좌측 금색 바·이모지 없음) */
body.shell-v2 .feed-page-wrap .feed-activity {
  gap: 12px; padding: 14px var(--sp-lg); border: 0; border-radius: var(--r-xl); background: var(--surface-1);
}
body.shell-v2 .feed-page-wrap .feed-activity--celebrate { border-left: 0; padding-left: var(--sp-lg); }
body.shell-v2 .feed-page-wrap .feed-activity-spark { width: 32px; height: 32px; background: var(--surface-3); color: var(--ink-80); }
body.shell-v2 .feed-page-wrap .feed-activity-body { padding-top: 0; }
body.shell-v2 .feed-page-wrap .feed-activity-text { font-size: var(--fs-caption); line-height: 1.45; color: var(--ink-80); word-break: keep-all; }
body.shell-v2 .feed-page-wrap .feed-activity-text b { font-weight: 600; color: var(--ink); }
body.shell-v2 .feed-page-wrap .feed-activity-time { font-size: 12px; }
body.shell-v2 .feed-page-wrap .feed-activity .feed-actions { margin-top: 6px; }
body.shell-v2 .feed-page-wrap .feed-activity-thumb { border-radius: var(--r-md); background-color: var(--surface-2); }

/* 트렌드 데이터 카드(kind=trend) — 같은 카드 표면 · 중립 순위 번호 · 썸네일은 중립 바탕. 파랑은 포커스에만(DESIGN.md). */
body.shell-v2 .feed-page-wrap .feed-trend-body { gap: 12px; margin-top: 8px; }
body.shell-v2 .feed-page-wrap .feed-trend-rows { gap: 8px; }
body.shell-v2 .feed-page-wrap .feed-trend-row { font-size: var(--fs-caption); }
body.shell-v2 .feed-page-wrap .feed-trend-rank { font-family: var(--font-sans); color: var(--ink-48); }
body.shell-v2 .feed-page-wrap .feed-trend-title { color: var(--ink); word-break: keep-all; }
body.shell-v2 .feed-page-wrap .feed-trend-sub, body.shell-v2 .feed-page-wrap .feed-trend-value { font-size: var(--fs-fine); }
body.shell-v2 .feed-page-wrap .feed-trend-thumb { border-radius: var(--r-md); background-color: var(--surface-2); }
body.shell-v2 .feed-page-wrap .feed-trend-thumb--landscape { width: 168px; }
body.shell-v2 .feed-page-wrap .feed-trend-thumb--portrait { width: 96px; }
body.shell-v2 .feed-page-wrap .feed-trend[role='button']:hover .feed-embed-title { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-48); text-underline-offset: 3px; }
body.shell-v2 .feed-page-wrap .feed-card--trend .feed-post-head .feed-badge { color: var(--ink-80); }

/* 트렌드 위젯 — 카드 표면 · 포스터는 중립 바탕 */
body.shell-v2 .feed-page-wrap .feed-widget { margin: 0; padding: var(--sp-lg); border: 0; border-radius: var(--r-xl); background: var(--surface-1); }
body.shell-v2 .feed-page-wrap .feed-widget-head { align-items: center; flex-wrap: wrap; row-gap: 4px; margin-bottom: 12px; }
body.shell-v2 .feed-page-wrap .feed-widget-title { font-size: var(--fs-body); font-weight: 600; white-space: nowrap; }
body.shell-v2 .feed-page-wrap .btn.feed-widget-more { min-height: 32px; margin-right: -10px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-80); font-size: 14px; font-weight: 500; }
body.shell-v2 .feed-page-wrap .btn.feed-widget-more:hover { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .feed-page-wrap .btn.feed-widget-more:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .feed-page-wrap .feed-carousel { margin: 0 calc(-1 * var(--sp-lg)); padding: 0 var(--sp-lg) 4px; scroll-padding-inline: var(--sp-lg); }
body.shell-v2 .feed-page-wrap .feed-poster { width: 128px; border-radius: var(--r-md); }
body.shell-v2 .feed-page-wrap .feed-poster:focus-visible { outline: none; }
body.shell-v2 .feed-page-wrap .feed-poster:focus-visible .feed-poster-img { box-shadow: var(--ring-focus); }
body.shell-v2 .feed-page-wrap .feed-poster-img { width: 128px; height: 170px; border: 0; border-radius: var(--r-md); background-color: var(--surface-2); }
body.shell-v2 .feed-page-wrap .feed-poster-img--empty { background-image: none; }
body.shell-v2 .feed-page-wrap .feed-poster-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-48); }
body.shell-v2 .feed-page-wrap .feed-poster-ph > svg { position: absolute; right: 8px; bottom: 8px; }
body.shell-v2 .feed-page-wrap .feed-poster-initial { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-3); color: var(--ink-80); font-size: 16px; font-weight: 600; }
body.shell-v2 .feed-page-wrap .feed-poster-rank { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--canvas) 70%, transparent); }
body.shell-v2 .feed-page-wrap .feed-poster-play { color: var(--ink); background: color-mix(in srgb, var(--canvas) 62%, transparent); }
body.shell-v2 .feed-page-wrap .feed-poster-name { font-size: var(--fs-fine); font-weight: 500; margin-top: 8px; }
body.shell-v2 .feed-page-wrap .feed-poster-metric { font-family: var(--font-sans); font-size: 12px; }
body.shell-v2 .feed-page-wrap .feed-pager i { background: var(--surface-3); }
body.shell-v2 .feed-page-wrap .feed-pager i.on { background: var(--ink-48); }

@media (max-width: 810px) {
  body.shell-v2 .feed-page-wrap { padding: var(--sp-lg) var(--sp-md) var(--sp-section); }
  body.shell-v2 .feed-page-wrap .feed-card { grid-template-columns: 36px minmax(0, 1fr); padding: var(--sp-md); column-gap: 10px; }
  body.shell-v2 .feed-page-wrap .feed-card > .feed-avatar { width: 36px; height: 36px; font-size: 13px; }
  body.shell-v2 .feed-page-wrap .feed-activity { padding: 12px var(--sp-md); }
  body.shell-v2 .feed-page-wrap .feed-widget { padding: var(--sp-md); }
  body.shell-v2 .feed-page-wrap .feed-carousel { margin: 0 calc(-1 * var(--sp-md)); padding: 0 var(--sp-md) 4px; scroll-padding-inline: var(--sp-md); }
  body.shell-v2 .feed-page-wrap .feed-embed-title { font-size: var(--fs-body); }
  body.shell-v2 .feed-page-wrap .feed-embed-media { max-height: 220px; }
  body.shell-v2 .feed-page-wrap .feed-card--character .feed-embed-media { width: min(100%, 200px); }
  body.shell-v2 .feed-page-wrap .feed-card--storyboard .feed-embed-media { width: min(100%, 240px); }
  body.shell-v2 .feed-page-wrap .feed-actions { gap: 8px; }
  body.shell-v2 .feed-page-wrap .feed-act, body.shell-v2 .feed-page-wrap .btn.feed-cta, body.shell-v2 .feed-page-wrap .btn.feed-widget-more { height: 44px; }
  body.shell-v2 .feed-page-wrap .feed-react-chip { height: 36px; }
  body.shell-v2 .feed-page-wrap .feed-poster { width: 116px; }
  body.shell-v2 .feed-page-wrap .feed-poster-img { width: 116px; height: 154px; }
  body.shell-v2 .feed-page-wrap .feed-trend-thumb--landscape { width: 128px; }
  body.shell-v2 .feed-page-wrap .feed-trend-thumb--portrait { width: 72px; }
}