/* 홈 뉴스피드 v2 스타일 — 단일책임: 프롬프트 컴포저·리치 임베드 포스트·액션바·댓글·활동 카드·트렌드 캐러셀·상세 모달의 레이아웃/표면.
 * buildfeed 디자인 언어 이식 + aidra 다크글래스/토큰(tokens.css) 정합(팔레트 리테마 아님). gd-* 모달 셸은 components.css 상속.
 * WS5: #292 "박스형 다크 사각형" 탈피 — 텍스트 임베드·활동·위젯·댓글의 border+background 박스를 제거하고 헤어라인 흐름으로,
 * 미디어(캐릭터·영상)만 카드의 유일한 단일 프레임으로 승격(대형·상단배치). 아바타는 베벨로 존재감, 배지는 텍스트라벨로 축소.
 * 키·모델명·원문 없음 — 순수 CSS. */

/* 피드 로컬 토큰 — 전역 tokens.css 에 대응값이 없는 2개만 피드 스코프로 정의(응원 코랄·프롬프트 라운드). */
.feed-wrap {
  --like: #e0704f;          /* 응원(하트) 활성색 — 액센트 블루와 구분되는 따뜻한 톤 */
  --r-composer: 22px;       /* 프롬프트 박스 라운드(--r-lg 18보다 크게) */
  max-width: 600px; margin: 0 auto;
  padding: var(--sp-md) var(--sp-md) var(--sp-section);
  gap: 0;
}

/* ── 컴포저(prompt-kit PromptInput: 둥근 박스 + autosize textarea + 내부 액션바) ── */
.feed-composer {
  margin: var(--sp-xs) 0 var(--sp-sm);
  padding: var(--sp-xs);
  border: 1px solid var(--hairline);
  border-radius: var(--r-composer);
  background: var(--parchment);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  transition: border-color var(--t-fast) var(--ease);
}
.feed-composer:focus-within { border-color: var(--accent-ring); }
.feed-composer-input {
  width: 100%; resize: none; min-height: 28px; max-height: 200px;
  padding: var(--sp-xs) var(--sp-sm) var(--sp-xxs);
  background: transparent; border: 0; outline: none;
  color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.55;
}
.feed-composer-input::placeholder { color: var(--ink-48); }
.feed-composer-bar { display: flex; align-items: center; gap: var(--sp-xxs); padding: 2px 4px 2px var(--sp-xxs); }
.feed-composer-tool {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-48); font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.feed-composer-tool:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.feed-composer-hint { font-size: var(--fs-fine); color: var(--ink-48); margin-left: 2px; }
.feed-composer-spacer { flex: 1; }
.feed-composer-send {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.feed-composer-send:hover { transform: translateY(-1px); }
.feed-composer-send:disabled { opacity: 0.4; transform: none; cursor: default; }
.feed-composer-send svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 아바타 이니셜 칩(AC-A2 — 베벨 하이라이트로 평면 스티커 느낌 탈피, 사람이 카드의 주인공) ── */
.feed-avatar {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 15px; font-weight: 750; line-height: 1; letter-spacing: -0.01em;
  color: #fff; background: var(--pearl); user-select: none; overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), inset 0 -1px 2px rgba(0, 0, 0, 0.22);
}
.feed-avatar--me { background: var(--accent); color: var(--on-accent); }
.feed-avatar--sm { width: 32px; height: 32px; font-size: 13px; }

/* ── 섹션 라벨(feed-activity 와 동일한 헤어라인 흐름 — 박스·좌측 액센트바 없음, 일관된 리스트 언어) ── */
.feed-section-label {
  font-size: var(--fs-caption); font-weight: 600; color: var(--ink-48);
  letter-spacing: var(--ls-caption); margin: var(--sp-lg) 0 var(--sp-xs);
}
/* '최신소식' — 피드 최상단(히어로 하단 피크에 걸침). 첫 요소라 상단 여백을 줄여 피크 높이 안에 라벨+카드 머리가 다 들어오게 한다. */
.feed-latest-head { margin-top: var(--sp-xs); }

/* ── 타임라인 ── */
.feed-timeline { display: flex; flex-direction: column; gap: 0; margin-top: var(--sp-xs); }

/* 홈 피드(body.iv-mode) — 투명 배경 위에 글라스 카드. 하단 orb 그라데이션이 카드 사이로 비치고 콘텐츠는 카드로 띄운다(오너 요청 2026-07-23).
   기본 피드는 헤어라인 흐름(#292)이지만 홈 피크/피드는 그라데이션 위라 카드 표면이 필요. body.iv-mode 스코프 = 홈 피드 전용(전용 피드 탭 없음). */
body.iv-mode .feed-timeline { gap: var(--sp-sm); }
body.iv-mode .feed-card,
body.iv-mode .feed-activity,
body.iv-mode .feed-widget {
  padding: var(--sp-md);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: rgba(15, 15, 23, 0.55);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
body.iv-mode .feed-card:hover,
body.iv-mode button.feed-activity:hover { background: rgba(28, 26, 46, 0.62); }

/* 첫 카드 진입 애니메이션 — react-bits AnimatedContent 프리셋(distance 100·vertical·0.8s·power3.out·opacity 0→1·scale 1=no-op)을
   바닐라 CSS 키프레임으로 포팅(이 SPA 는 무빌드 — React/GSAP 미도입). 첫 카드는 하단 피크로 로드 시 이미 보이므로
   스크롤 진입 트리거 ≡ 로드 시 재생. power3.out ≈ easeOutQuart cubic-bezier. 홈 재진입마다 1회 재생. */
@keyframes feed-first-rise-in {
  from { transform: translateY(100px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
body.iv-mode .feed-timeline > :first-child { animation: feed-first-rise-in 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) both; }
@media (prefers-reduced-motion: reduce) { body.iv-mode .feed-timeline > :first-child { animation: none; } }

/* 포스트 행 = 아바타 + 콘텐츠 2열. div(중첩 버튼 회피) · 아래 hairline · hover 배경(박스 아님, 유일한 경계는 hairline). */
.feed-card {
  display: flex; gap: var(--sp-sm); width: 100%;
  padding: var(--sp-lg) 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent; color: var(--ink); font-family: var(--font-sans);
  transition: background var(--t-fast) var(--ease);
}
.feed-card:hover { background: rgba(255, 255, 255, 0.02); }
.feed-post { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-xs); padding-top: 1px; }
.feed-post-head { display: flex; align-items: center; gap: 6px; }
.feed-post-author { min-width: 0; flex: 0 1 auto; font-size: 16px; font-weight: 750; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.feed-post-time { flex: none; margin-left: auto; font-size: 13px; color: var(--ink-48); font-variant-numeric: tabular-nums; }

/* ── 유형 라벨(배지 박스 제거 — 저자명 뒤 텍스트 라벨, kind 색상만 유지·정보위계는 색으로) ── */
.feed-badge { flex: none; font-size: var(--fs-fine); font-weight: 600; color: var(--ink-48); }
.feed-badge::before { content: '·'; margin-right: 6px; font-weight: 400; color: var(--ink-48); }
.feed-badge--plan { color: var(--accent-focus); }
.feed-badge--episode { color: #7fd0a8; }
.feed-badge--character { color: #d0a0e8; }
.feed-badge--video { color: #e8b078; }
.feed-badge--storyboard { color: #6cc6d0; }
.feed-badge--insight { color: #9aa8ee; }

/* ── 임베드(AC-A1·A3) — 텍스트는 무테두리 플로우(hover 시 제목만 액센트로), 미디어는 카드의 유일한 프레임(대형·상단배치). ── */
.feed-embed { margin-top: 2px; cursor: pointer; border-radius: var(--r-sm); }
.feed-embed:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 4px; }
.feed-embed--text .feed-embed-title { transition: color var(--t-fast) var(--ease); }
.feed-embed--text:hover .feed-embed-title { color: var(--accent-focus); }
.feed-embed--media { display: flex; flex-direction: column; gap: var(--sp-xs); }
.feed-embed-pad { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.feed-embed-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-48); }
.feed-embed-title { font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-embed-logline { font-size: 14px; line-height: 1.5; color: var(--ink-80); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-embed-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.feed-chip { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: var(--r-pill); background: var(--pearl); color: var(--ink-80); }

/* 미디어 프레임 — 캐릭터=포트레이트(3:4), 영상=랜드스케이프(16:9)+재생 어포던스(순수 CSS 원·삼각형, SVG 없음). */
.feed-embed-media {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--pearl);
  border: 1px solid var(--hairline);
  transition: filter var(--t-fast) var(--ease);
}
.feed-embed:hover .feed-embed-media { filter: brightness(1.06); }
.feed-embed-media--character { aspect-ratio: 1 / 1; } /* 정사각 풀너비 — AC-A1 "컬럼 폭 활용 대형" 준수(3:4 캡은 영상과 달리 반쪽만 차지해 기준 이탈) */
.feed-embed-media--video::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 58px; height: 58px;
  border-radius: 50%; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(1px);
  transform: translate(-50%, -50%);
}
.feed-embed-media--video::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 19px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-38%, -50%);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

/* ── 액션바(리액션·댓글·조회) — 광장의 시각적 주인공, 유일하게 진하게 강조 ── */
.feed-actions { display: flex; align-items: center; gap: var(--sp-lg); margin-top: var(--sp-xs); flex-wrap: wrap; }
.feed-act {
  display: inline-flex; align-items: center; gap: var(--sp-xs); background: none; border: 0; padding: 0;
  color: var(--ink-48); font-size: 13px; font-family: var(--font-sans); cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.feed-act:hover { color: var(--ink); }
.feed-act svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.feed-act-n { font-variant-numeric: tabular-nums; }
.feed-act--view { cursor: default; }
.feed-act--view:hover { color: var(--ink-48); }
/* feed-act--liked 은 이모지 리액션(feed-act--reacted)로 대체되어 사용 안 함(제거됨) */

/* ── 맥락 CTA(딥링크) — 소셜 액션바보다 시각 우선순위 낮게(작고·부차·아이콘/배경 없음, 광장 정체성) ── */
/* 형태·색·hover 는 .btn--secondary(button.css)가 소유 — 여기엔 배치만. */
.btn.feed-cta { align-self: flex-start; margin-top: var(--sp-xxs); }

/* ── 이모지 리액션(트리거·피커·카운트 칩) — 피커는 오버레이 팝오버라 박스 유지가 맞음(스트림 요소 아님) ── */
.feed-react-group { position: relative; display: inline-flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap; }
.feed-act--react { gap: 4px; }
.feed-react-trigger-emoji { font-size: 15px; line-height: 1; display: inline-block; }
/* 리액션 → pulse(매핑). 이모지 기반이라 .btn 아이콘 슬롯이 없어 여기서 직접 준다. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .feed-act--react:hover .feed-react-trigger-emoji,
  .feed-act--react:focus-visible .feed-react-trigger-emoji { animation: btn-pulse 0.4s var(--ease); }
}
.feed-act--reacted { color: var(--like); }
.feed-react-picker {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20;
  display: flex; gap: 2px; padding: 6px;
  background: var(--parchment); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.feed-react-picker[hidden] { display: none; }
.feed-react-opt {
  border: 0; background: transparent; cursor: pointer; font-size: 20px; line-height: 1;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.feed-react-opt:hover { background: rgba(255, 255, 255, 0.08); transform: scale(1.15); }
.feed-react-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04); color: var(--ink-80); cursor: pointer;
  font-family: var(--font-sans); font-size: 12px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.feed-react-chip:hover { border-color: var(--divider-soft); }
.feed-react-chip.is-mine { border-color: var(--like); background: rgba(224, 112, 79, 0.12); color: var(--ink); }
.feed-react-chip-emoji { font-size: 13px; line-height: 1; }

/* 알림 벨 — 사이드바 하단(검색 버튼 옆에, glass.css .sidebar-actions)에 위치. 우측 상단 고정 클러스터는 우측 드로어와 겹쳐(오너 지적) 폐기됨.
   벨 자체는 자체 고정/pill 없음(사이드바가 담당), 버튼 스타일만 유지. 검색 버튼(.sidebar-action-btn)은 glass.css 소유. */
.feed-notif { position: relative; }
.feed-notif-bell {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-48); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.feed-notif-bell:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.feed-notif-bell.has-unread { color: var(--ink); }
.feed-notif-bell svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feed-notif-badge {
  position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--like); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.feed-notif-badge[hidden] { display: none; }
.feed-notif-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  width: 300px; max-width: 84vw; max-height: 60vh; overflow-y: auto;
  background: var(--parchment); border: 1px solid var(--hairline); border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.feed-notif-panel[hidden] { display: none; }
/* 사이드바 하단은 화면 아래쪽이라 기본(아래로 열림)은 뷰포트 밖으로 나갈 수 있음 — 위로 열리게 오버라이드. */
.sidebar-actions .feed-notif-panel { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.feed-notif-head { padding: var(--sp-sm) var(--sp-md); font-size: var(--fs-caption); font-weight: 700; color: var(--ink-48); border-bottom: 1px solid var(--hairline); }
.feed-notif-empty { padding: var(--sp-lg) var(--sp-md); text-align: center; color: var(--ink-48); font-size: 13px; }
.feed-notif-item { display: flex; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--hairline); }
.feed-notif-item:last-child { border-bottom: 0; }
.feed-notif-item.is-unread { background: var(--accent-soft); }
/* 클릭 가능한 알림(대상 게시물 있음) — 눌러서 그 게시물로 간다는 어포던스. itemId 없는 레거시 알림엔 미부여(죽은 클릭 방지). */
.feed-notif-item.is-linkable { cursor: pointer; transition: background var(--t-fast) var(--ease); }
.feed-notif-item.is-linkable:hover { background: rgba(255, 255, 255, 0.07); }
.feed-notif-item.is-linkable.is-unread:hover { background: var(--accent-soft); filter: brightness(1.25); }
.feed-notif-item.is-linkable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.feed-notif-body { flex: 1; min-width: 0; }
.feed-notif-text { font-size: 13px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.feed-notif-time { margin-top: 2px; font-size: 11px; color: var(--ink-48); }

/* ── 댓글 스레드(박스 제거 — 위 액션바에서 이어지는 헤어라인 구분만) ── */
.feed-comments-host[hidden] { display: none; }
.feed-comments { margin-top: var(--sp-sm); padding-top: var(--sp-sm); border-top: 1px solid var(--hairline); }
.feed-comments-status { font-size: 12px; color: var(--ink-48); padding: var(--sp-xxs) 0; }
.feed-comment { display: flex; gap: 9px; padding: var(--sp-xs) 0; }
.feed-comment.is-pending { opacity: 0.6; }
.feed-comment.is-deleting { opacity: 0.4; }
.feed-comment-body { flex: 1; min-width: 0; }
.feed-comment-head { font-size: 12px; color: var(--ink-48); display: flex; align-items: center; gap: 4px; }
.feed-comment-head b { color: var(--ink-80); font-weight: 600; }
/* 형태·색은 .btn--danger 가 소유 — 배치만. */
.btn.feed-comment-del { margin-left: auto; }
.feed-comment-text { font-size: 13px; line-height: 1.5; color: var(--ink-80); margin-top: 1px; overflow-wrap: anywhere; }
.feed-comment-composer { display: flex; gap: 9px; align-items: center; margin-top: var(--sp-xs); padding-top: var(--sp-sm); border-top: 1px solid var(--hairline); }
.feed-comment-input { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); background: transparent; border: 0; outline: none; font-family: var(--font-sans); }
.feed-comment-input::placeholder { color: var(--ink-48); }
/* 형태·색은 .btn--primary 가 소유 — 배치만. */
.btn.feed-comment-send { flex: none; }

/* ── 활동·축하 카드 — feed-card 와 동일한 헤어라인 흐름으로 평탄화(박스 아님, 사람이 주인공). ── */
.feed-activity {
  display: flex; gap: var(--sp-sm); align-items: flex-start; width: 100%; text-align: left;
  padding: var(--sp-lg) 0; border-bottom: 1px solid var(--hairline);
  background: transparent; color: var(--ink); font-family: var(--font-sans);
}
button.feed-activity { cursor: pointer; transition: background var(--t-fast) var(--ease); }
button.feed-activity:hover { background: rgba(255, 255, 255, 0.02); }
.feed-activity--celebrate { border-left: 3px solid rgba(224, 180, 90, 0.55); padding-left: calc(var(--sp-md) - 3px); }
.feed-activity-spark { flex: none; width: 44px; height: 44px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; background: var(--pearl); font-size: 19px; }
.feed-activity-body { flex: 1; min-width: 0; padding-top: 2px; }
.feed-activity-text { font-size: 15px; color: var(--ink); }
.feed-activity-text b { font-weight: 750; }
.feed-activity-time { font-size: 13px; color: var(--ink-48); margin-top: 2px; font-variant-numeric: tabular-nums; }
.feed-activity-cta { display: inline-block; margin-top: 4px; font-size: var(--fs-fine); font-weight: 500; color: var(--ink-48); }
button.feed-activity:hover .feed-activity-cta { color: var(--accent); }
.feed-activity-thumb { flex: none; width: 52px; height: 52px; border-radius: var(--r-sm); background-size: cover; background-position: center; background-color: var(--pearl); align-self: center; }

/* ── 트렌드 위젯(캐러셀) — 박스 제거, 위 섹션과 헤어라인으로만 구분(포스터 타일 자체는 캐러셀 관례상 프레임 유지). ── */
.feed-widget { margin: var(--sp-lg) 0; padding-top: var(--sp-md); border-top: 1px solid var(--hairline); }
.feed-widget-head { display: flex; align-items: baseline; gap: var(--sp-xs); margin-bottom: var(--sp-sm); }
.feed-widget-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.feed-widget-sub { font-size: var(--fs-fine); color: var(--ink-48); }
/* 형태·색은 .btn--ghost 가 소유 — 배치만. */
.btn.feed-widget-more { margin-left: auto; color: var(--accent); }
.feed-carousel { display: flex; gap: var(--sp-sm); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-xs); scrollbar-width: none; }
.feed-carousel::-webkit-scrollbar { display: none; }
.feed-poster { flex: none; width: 132px; scroll-snap-align: start; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font-family: var(--font-sans); }
.feed-poster-img { width: 132px; height: 176px; border-radius: var(--r-sm); background-size: cover; background-position: center; position: relative; overflow: hidden; border: 1px solid var(--hairline); background-color: var(--pearl); }
.feed-poster-img--empty { background-image: linear-gradient(150deg, #1b1f27, #14171d); }
.feed-poster-rank { position: absolute; top: 6px; left: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, 0.55); padding: 1px 7px; border-radius: var(--r-pill); }
.feed-poster-play { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; }
.feed-poster-name { font-size: 12px; font-weight: 600; color: var(--ink); margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-poster-metric { font-size: 11px; color: var(--ink-48); font-family: var(--font-mono); font-variant-numeric: tabular-nums; margin-top: 1px; }
.feed-pager { display: flex; gap: 5px; justify-content: center; padding: 2px 0 var(--sp-xs); }
.feed-pager i { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--ink-48); transition: width var(--t-fast) var(--ease); }
.feed-pager i.on { width: 16px; background: var(--accent); }

/* ── 무한 스크롤 sentinel ── */
.feed-sentinel { height: 1px; }

/* ── 상세 모달(gd-* 셸 재사용, 내부 타이포·여백만 다듬음 — 기능 불변) ── */
.feed-modal-panel { max-width: 860px; width: min(92vw, 860px); }
.feed-modal-body { max-height: 80vh; overflow-y: auto; }
.feed-modal-doc { white-space: pre-wrap; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-80); }
.feed-modal-summary { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); margin: 0 0 var(--sp-md); }
.feed-modal-caption { font-size: var(--fs-caption); color: var(--ink-48); line-height: var(--lh-caption); margin: var(--sp-md) 0 0; }
.feed-modal-video { width: 100%; border-radius: var(--r-md); background: #000; display: block; }
.feed-modal-metrics { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-sm); }
.feed-modal-metric { font-size: var(--fs-fine); padding: 3px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.06); color: var(--ink-80); }

/* ── 알림 딥링크 오버레이(게시물 1건) — 카드 부품은 그대로 재사용하고, 타임라인 전제(하단 헤어라인·홈 글라스 표면)만 걷어낸다.
   패널이 이미 표면이므로 카드는 평탄하게. body.iv-mode 글라스 규칙(0,2,1)을 이기려고 .feed-modal-body 를 앞에 둔다. */
.feed-modal-body .feed-post-overlay > .feed-card,
.feed-modal-body .feed-post-overlay > .feed-activity {
  padding: 0; border: 0; border-radius: 0; background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.feed-post-overlay-status { padding: var(--sp-lg) 0; font-size: 13px; color: var(--ink-48); }

/* ── 반응형: 좁은 화면(≤560px) ── */
@media (max-width: 560px) {
  .feed-wrap { padding-left: var(--sp-sm); padding-right: var(--sp-sm); }
  .feed-avatar { width: 36px; height: 36px; font-size: 13px; }
  /* 캐릭터 미디어는 풀너비 유지(캐핑 없음) — 모바일은 전체 컨텐츠 폭이 좁아져 자연 축소됨 */
  .feed-actions { gap: var(--sp-md); }
}

/* ── 반응형: 사이드바가 상단 스티키 바로 전환되는 폭(≤720px, glass.css .shell-sidebar 브레이크포인트와 정합) ── */
@media (max-width: 720px) {
  /* 의도: 상단 사이드바 높이만큼 내려 겹침 방지(고정값 — 실측 보정, 사이드바 높이 변경 시 같이 조정) */
  .feed-notif { top: 60px; right: var(--sp-sm); }
}