/* 스레드 전용 — 임베드 · 댓글 · 컴포저 · 싱크 · 타임스탬프. 공통은 components.css. */
/* 와이드: 왼쪽 세로 레일(같은 카테고리 다음 글) + 본문. 좁으면 레일이 아래로.
   홈과 동일한 중앙 컨테이너(.main, 1280) 안에 두어 헤더·정렬을 홈과 일치시킨다. */
.thread-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.thread {
  width: 100%; max-width: 900px; margin-inline: auto; min-width: 0;
  padding-block: var(--sp-5) var(--sp-6);
}
@media (min-width: 1040px) {
  .thread-layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
  /* 열을 명시한다 — 레일(#threadSide)은 JS가 데이터를 받은 뒤에야 hidden을 푼다.
     자동 배치에 맡기면 레일이 display:none인 첫 페인트에 본문이 260px 레일 트랙으로
     들어가 '좁게 떴다가 늘어나는' 점프가 생긴다(2026-07-15 운영 증상). */
  .thread { grid-column: 2; }
  .thread-side { grid-column: 1; grid-row: 1; } /* 본문보다 DOM 뒤에 있지만 화면상 왼쪽으로 */
}

/* --- 왼쪽 레일: 같은 카테고리 다음 글 --- */
.thread-side { padding-block: var(--sp-5) var(--sp-6); }
@media (min-width: 1040px) {
  .thread-side {
    margin-top: var(--sp-5);                        /* 본문 상단 여백과 동일하게 맞춤 */
    position: sticky; top: calc(61px + var(--sp-4)); align-self: start;  /* 상단 헤더(61) 아래로 고정 */
    max-height: calc(100vh - 61px - var(--sp-5)); overflow-y: auto;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: var(--sp-4);
  }
}
.side-card { background: none; border: none; padding: 0; }
/* 플랫폼 스위처 — 레일에서 카테고리 전환 */
.side-plats { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.side-plats .chip { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-small); }
.side-head { margin-bottom: var(--sp-2); }
.side-title {
  font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: var(--text-2); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2);
}
.side-tabs { gap: var(--sp-3); margin-bottom: var(--sp-2); }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
/* 카테고리 전환 중: 새 목록이 오기 전까지 옛 목록을 흐리게 — 로딩 중임을 즉시 알린다 */
.side-list[aria-busy="true"] { opacity: .4; transition: opacity .12s ease; pointer-events: none; }
/* 텍스트는 위 칩·탭과 좌측 정렬(레일 패딩 기준), 호버 배경만 음수 마진으로 살짝 넓힘 */
.side-item { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2); margin-inline: calc(-1 * var(--sp-2)); border-radius: var(--r-sm); }
.side-item:hover { background: var(--bg-2); }
.side-item__title {
  font-size: var(--fs-ui); font-weight: 600; line-height: var(--lh-base); color: var(--text-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.side-item:hover .side-item__title { color: var(--accent); }
.side-item__plat {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px; margin-inline-end: var(--sp-1); vertical-align: -2px;
}
.side-item__plat .icon { display: block; }
.side-item__meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--text-2); }
.side-empty { color: var(--text-3); font-size: var(--fs-small); padding: var(--sp-3); }
/* 레일 하단 — '더 보기' + 카테고리 허브 링크 */
.side-foot { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.side-more { width: 100%; font-size: var(--fs-small); }
.side-all { font-size: var(--fs-small); color: var(--text-2); text-align: center; }
.side-all::after { content: " →"; }
[dir="rtl"] .side-all::after { content: " ←"; } /* RTL에선 '더 안쪽으로'가 반대 방향 */
.side-all:hover { color: var(--accent); }
/* 상단 툴바 — 왼쪽 '홈으로'(+모바일 목록), 오른쪽 원본보기·임베드 */
.thread-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.thread-toolbar__left { display: flex; align-items: center; gap: var(--sp-2); }
.thread-actions { display: flex; align-items: center; gap: var(--sp-1); }
.thread__back { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-ui); color: var(--text-2); }
.thread__back::before { content: "←"; }
/* RTL에선 '뒤로'가 반대 방향이다 — 화살표를 뒤집지 않으면 앞으로 가는 것처럼 읽힌다. */
[dir="rtl"] .thread__back::before { content: "→"; }
.thread-rail-toggle { display: none; } /* 데스크톱은 레일 상시 노출 → 목록 버튼 불필요 */
.rail-backdrop { display: none; }

/* --- 헤더: 뱃지(플랫폼·트렌딩) 한 줄 위, 제목 아래 --- */
.thread-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.thread-tags { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.thread-plat { text-transform: uppercase; letter-spacing: .3px; }
.thread-title { font-size: var(--fs-lg); font-weight: 800; line-height: var(--lh-tight); }
/* 아이콘 전용 버튼 — 헤더 아이콘과 동일한 36px 히트영역 */
.thread-link, .thread-embed {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  color: var(--text-2); background: none; border: none; padding: 0; cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.thread-link:hover, .thread-embed:hover { background: var(--bg-2); color: var(--accent); }
/* 잠김 안내(댓글 막힌 원본 게시물) — main #12 */
.thread-notice {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--r-sm); color: var(--warn); font-size: var(--fs-ui); line-height: 1.4;
}
.thread-notice svg { flex: none; }

/* --- 임베드 --- */
.embed-wrap { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--embed-bg); box-shadow: var(--shadow-1); margin-bottom: var(--sp-4); }
/* 로딩 중엔 검은 박스가 그대로 자리(aspect-ratio)를 잡아 시프트를 막는다. 임베드 없는 링크형만 접는다. */
.embed-wrap--collapsed { display: none; }
/* Bluesky 임베드 카드는 내부 최대 폭이 600px(실측) — 풀와이드로 두면 남는 폭이 흰 배경으로만 드러난다. */
.embed-wrap--narrow { max-width: 600px; }
.embed-wrap iframe, .embed-wrap > div { width: 100%; border: 0; display: block; }
/* 링크 카드 — 임베드가 없는 원본(기사·VK)과 외부 노출이 막힌 원본의 본문 자리.
   예전엔 URL 문자열 한 줄이었다. 기사 스레드가 전부 이 경로라 "본문에 링크만 있는" 화면이
   됐다 — og 썸네일·요약을 이미 받아 저장해 두고도 안 쓰고 있었다.
   서버(lib/seo.js)와 클라이언트(public/thread.js)가 같은 마크업을 낸다. */
.link-card { display: flex; gap: var(--sp-4); align-items: stretch; text-decoration: none; color: inherit; }
.link-card:hover .link-card__cta { text-decoration: underline; }
/* 커버는 카드 높이를 지배하지 않게 고정 비율 + 폭 상한. 세로로 긴 og:image가 와도 안 늘어난다. */
.link-card__cover { flex: 0 0 min(38%, 260px); aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.link-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 요약이 없는 원본(hankyung 등 og:description 미제공)도 있다 — 세로 가운데로 모아
   커버 옆이 휑하게 비지 않게 한다. */
.link-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); padding: var(--sp-4); }
.link-card__host { font-size: var(--fs-small); color: var(--text-2); }
/* 요약은 매체가 링크 프리뷰용으로 내놓은 og:description이다(본문 아님). 두 줄에서 자른다. */
.link-card__desc { font-size: var(--fs-ui); color: var(--text-1); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-card__cta { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--accent); font-size: var(--fs-small); }
/* 좁은 화면에선 커버를 위로 — 옆에 두면 요약이 두세 글자 폭으로 눌린다. */
@media (max-width: 560px) {
  .link-card { flex-direction: column; gap: 0; }
  .link-card__cover { flex: none; width: 100%; }
}

/* --- 외부반응 요약 카드 — 사람 댓글과 구분되는 액센트 정보 패널. 접기 가능 --- */
.echo-card { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: var(--accent-soft); border-radius: var(--r-md); margin-bottom: var(--sp-4); overflow: hidden; }
.echo-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: none; border: none; cursor: pointer; text-align: start; }
.echo-title { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-ui); font-weight: 700; color: var(--accent); }
.echo-meta { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-small); color: var(--text-2); }
.echo-meta .icon { transition: transform var(--dur-2) var(--ease); }
.echo-card.is-collapsed .echo-meta .icon { transform: rotate(-90deg); }
.echo-body { padding: 0 var(--sp-4) var(--sp-4); }
.echo-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.echo-tag {
  display: inline-flex; align-items: center; font-size: var(--fs-small); font-weight: 600; color: var(--text-1);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
}
.echo-line { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--text-1); }
.echo-card.is-collapsed .echo-body { display: none; }

/* 크롤러용 본문 요약 한 줄(seo.js 프리렌더). 하이드레이션 전 잠깐만 보이고 thread.js가 #posts를 덮으며 사라진다. */
.seo-summary { font-size: var(--fs-small); color: var(--text-2); margin-bottom: var(--sp-3); }

/* --- 광고 --- */
.ad { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); cursor: pointer; position: relative; }
.ad-tag { position: absolute; top: calc(-1 * var(--sp-2)); inset-inline-start: var(--sp-3); }
.ad-body { flex: 1; min-width: 0; }
.ad-title { font-size: var(--fs-body); font-weight: 700; }
.ad-desc { font-size: var(--fs-small); color: var(--text-2); margin-top: 2px; }
.ad-adv { font-size: var(--fs-caption); color: var(--accent); margin-top: var(--sp-1); }
.ad-x { flex: none; }

/* --- 댓글 헤더 · 정렬 --- */
.cmt-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.cmt-count { font-size: var(--fs-md); font-weight: 700; }

/* 원탭 반응 — 댓글보다 부담이 낮은 첫 행동. 스레드별 숫자만 보이고 신원은 남지 않는다. */
.quick-reaction { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4); margin-bottom: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-1); }
.quick-reaction__copy { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.quick-reaction__copy strong { font-size: var(--fs-ui); color: var(--text-1); overflow-wrap: anywhere; }
.quick-reaction__copy span { font-size: var(--fs-small); color: var(--text-3); }
.quick-reaction__buttons { flex: none; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.reaction-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg-2); color: var(--text-2); font-size: var(--fs-small); font-weight: 700; cursor: pointer; }
.reaction-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.reaction-btn.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.reaction-btn:disabled:not(.is-on) { opacity: .48; cursor: default; }
.reaction-btn b { color: inherit; font-variant-numeric: tabular-nums; }
@media (max-width: 680px) {
  .quick-reaction { align-items: stretch; flex-direction: column; }
  .quick-reaction__buttons { flex: none; }
}

/* --- 컴포저 --- */
.composer-top { margin-bottom: var(--sp-5); }
.composer-bar { display: flex; align-items: flex-end; gap: var(--sp-2); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.composer-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer-input { flex: 1; background: none; color: var(--text-1); border: none; outline: none; font-size: var(--fs-body); font-family: inherit; line-height: var(--lh-base); resize: none; padding: var(--sp-2) 0; max-height: 160px; }
.composer-input::placeholder { color: var(--text-3); }
.send-btn { flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); border: none; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent); transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.send-btn:hover { background: var(--accent-hi); }
.send-btn:active { transform: scale(.94); }
.send-btn:disabled { opacity: .5; }
.composer-foot { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--text-2); margin: var(--sp-3) var(--sp-1) 0; }
.foot-note { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* 프라이버시 표시 도트 — 켜진 LED처럼 은은한 글로우가 맥동('불 들어오는' 느낌) */
.composer-foot .dot {
  background: var(--ok);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--ok) 65%, transparent); /* 모션 꺼도 켜진 LED로 보이게 */
  animation: dot-glow 2.4s ease-in-out infinite;
}
@keyframes dot-glow {
  0%, 100% { box-shadow: 0 0 4px 0 color-mix(in srgb, var(--ok) 55%, transparent); opacity: 1; }
  50%      { box-shadow: 0 0 10px 2px color-mix(in srgb, var(--ok) 85%, transparent); opacity: .9; }
}
.ts-attach { margin-inline-end: auto; display: inline-flex; align-items: center; gap: var(--sp-1); background: none; border: 1px solid var(--border); color: var(--accent); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-small); font-weight: 600; }
.ts-attach:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }

/* --- 싱크 --- */
.sync-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.sync-btn { display: inline-flex; align-items: center; gap: var(--sp-2); background: none; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); font-size: var(--fs-ui); font-weight: 700; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full); }
.sync-btn::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: currentColor; }
.sync-btn:hover { background: var(--accent-soft); }
.sync-btn.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.sync-btn.on::before { animation: pulse 1.6s ease-in-out infinite; }
.sync-hint { font-size: var(--fs-small); color: var(--text-2); }

/* --- 댓글 목록 --- */
.posts { display: flex; flex-direction: column; gap: var(--sp-4); }
.msg { display: flex; gap: var(--sp-3); position: relative; }
.msg-avatar { flex: none; margin-top: 2px; }
.msg-col { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.msg-top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); font-size: var(--fs-ui); }
.msg-top .handle { font-weight: 700; color: var(--text-1); }
.msg-top .time { color: var(--text-3); font-size: var(--fs-small); }
.bubble { font-size: var(--fs-body); }
.bubble-text { line-height: var(--lh-base); white-space: pre-wrap; word-break: break-word; }
.bubble:has(.ts-jump) .bubble-text:not(.orig-view) { display: inline; }
.msg-bottom { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-small); }
.msg-bottom button { background: none; border: none; padding: 0; color: var(--text-2); font-size: var(--fs-small); }
.msg-bottom button:hover { color: var(--text-1); }

/* 내 댓글 강조 — accent 링 + 은은한 배경(글로우 없음) */
.msg.mine > .msg-avatar .avatar { box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 3px var(--accent); border-radius: var(--r-sm); }
.msg.mine::before { content: ""; position: absolute; inset: -8px -12px; border-radius: var(--r-md); background: var(--accent-soft); z-index: -1; }

/* 좋아요 */
.like-btn { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--text-2) !important; transition: color var(--dur-1) var(--ease); }
.like-btn:hover { color: var(--danger) !important; }
.like-btn.on { color: var(--danger) !important; }
.like-n { font-variant-numeric: tabular-nums; }

/* 원문 토글 */
.orig-toggle { display: inline-flex; align-items: center; gap: var(--sp-1); }
.orig-view { display: none; }
.msg.show-orig .bubble-text.tr-view { display: none; }
.msg.show-orig .orig-view { display: inline; }

/* 답글 */
.replies-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); background: none; border: none; color: var(--accent) !important; font-weight: 600; font-size: var(--fs-ui); padding: var(--sp-1) 0; }
.replies { margin: var(--sp-3) 0 var(--sp-1); padding-inline-start: var(--sp-4); border-inline-start: 2px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-3); }
/* 답글 접힘 표시(chevron-right)는 '펼치면 이쪽으로 간다'는 방향을 가리키므로 RTL에서 뒤집는다.
   펼친 상태의 chevron-down은 좌우 대칭이라 같이 뒤집혀도 보이는 게 같다 — 그래서 아이콘을
   따로 만들지 않고 셀렉터 하나로 끝낸다. */
[dir="rtl"] .replies-toggle .icon { transform: scaleX(-1); }
.msg.reply { margin: 0; }

/* 답글 입력 · 본인 수정 입력 */
.reply-box, .edit-box { margin: var(--sp-3) 0 var(--sp-1); display: flex; flex-direction: column; gap: var(--sp-2); }
.reply-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.edit-box { margin-top: 0; }

/* 수정됨 표시 — 시간 옆 은은한 캡션. 유튜브식 투명 표기. */
.edited { color: var(--text-3); font-size: var(--fs-small); }

/* 본인 삭제 묘비 — 내용 없이 자리만. 답글이 있으면 그 아래로 이어진다. */
.msg.deleted .msg-avatar .avatar--ghost { display: grid; place-items: center; color: var(--text-3); background: var(--bg-2); border-radius: var(--r-sm); }
.msg-tomb { color: var(--text-3); font-size: var(--fs-ui); font-style: italic; padding: var(--sp-1) 0; }

/* 접힘 */
.msg.collapsed > .msg-avatar { opacity: .35; filter: grayscale(1); }
.msg.collapsed .msg-top, .msg.collapsed .bubble, .msg.collapsed .msg-bottom, .msg.collapsed .replies-toggle, .msg.collapsed .replies { display: none; }
.collapse-banner { display: none; }
.msg.collapsed .collapse-banner { display: flex; align-items: center; gap: var(--sp-3); width: 100%; background: none; border: 1px dashed var(--border); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); cursor: pointer; text-align: start; color: var(--text-2); font-size: var(--fs-ui); }
.msg.collapsed .collapse-banner:hover { border-color: var(--border-strong); }
.collapse-reason { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--sp-2); }
.collapse-show { color: var(--accent); font-weight: 700; flex: none; }

/* 신고 모달 사유 목록 */
.reason-list { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.reason { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-body); cursor: pointer; }
.reason:hover { background: var(--bg-2); }
.reason input { accent-color: var(--accent); }

/* 타임스탬프 칩 */
.ts-jump { display: inline-flex; align-items: center; gap: var(--sp-1); vertical-align: baseline; margin-inline-end: var(--sp-2); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent) !important; font-weight: 700; font-size: var(--fs-small); padding: 2px var(--sp-2); border-radius: var(--r-full); cursor: pointer; }
.ts-jump:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.ts-chiprow { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) var(--sp-1) 0; flex-wrap: wrap; }
.ts-chip { display: inline-flex; align-items: center; }
.ts-chip-jump, .ts-chip-x { display: inline-flex; align-items: center; gap: var(--sp-1); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); font-weight: 700; font-size: var(--fs-small); padding: var(--sp-1) var(--sp-2); cursor: pointer; }
.ts-chip-jump { border-start-start-radius: var(--r-full); border-end-start-radius: var(--r-full); border-start-end-radius: 0; border-end-end-radius: 0; }
.ts-chip-x { border-inline-start: none; border-start-end-radius: var(--r-full); border-end-end-radius: var(--r-full); border-start-start-radius: 0; border-end-start-radius: 0; color: var(--text-2); font-weight: 400; }
.ts-chip-x:hover { color: var(--danger); }
.ts-chip-note { font-size: var(--fs-small); color: var(--text-2); }

/* 싱크 부상 강조 — accent 틴트(글로우 없음) */
.msg.now::before { content: ""; position: absolute; inset: -8px -12px; border-radius: var(--r-md); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); z-index: -1; }
.msg.now .ts-jump { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* ============================================================
   빈/저활동 스레드 — 첫 발자국 유도 (thread.js loadPosts)
   ============================================================ */
/* 0개: 디스코드식 '이 스레드의 시작' 마커. 텅 빈 죄책감이 아니라 시작선으로 읽히게. */
.thread-start { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); text-align: center; }
/* 라인아트 일러스트 — 아이콘 세트와 같은 결(round join). 말풍선은 dim, 스파크만 accent. */
.ts-art-svg { margin-bottom: var(--sp-2); }
.ts-art-svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ts-art-line { color: var(--border-strong); }
.ts-art-accent { color: var(--accent); }
.ts-art-svg .ts-art-spark { color: var(--accent); fill: var(--accent-soft); stroke-width: 1.6; }
.ts-art-dim { color: var(--text-3); stroke-width: 1.6; }
.thread-start__line { display: flex; align-items: center; gap: var(--sp-3); width: 100%; max-width: 320px; }
.thread-start__line::before, .thread-start__line::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.thread-start__line span { color: var(--text-2); font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.thread-start__nudge { color: var(--text-3); font-size: var(--fs-ui); }
.thread-start__locked { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1); color: var(--accent); font-size: var(--fs-small); font-weight: 600; }
.thread-start__locked svg { flex: none; }
/* 1~2개: 이어달기 유도(약하게). */
.thread-more { padding: var(--sp-4) var(--sp-4) var(--sp-1); text-align: center; color: var(--text-3); font-size: var(--fs-small); }

/* 첫 발자국 보상 — 카피가 아니라 등장 애니메이션 + accent 링 1회로. .mine 헤일로 위에 얹힌다.
   transform/opacity만. reduced-motion은 motion.css 전역 규칙이 무력화한다. */
.msg.first { animation: footprintIn var(--dur-3) var(--ease) both; }
.msg.first::after { content: ""; position: absolute; inset: -8px -12px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; z-index: -1; animation: footprintRing 1.6s var(--ease) both; }
@keyframes footprintIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes footprintRing { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 820px) {
  .thread { padding-top: var(--sp-4); max-width: none; }
}

/* 모바일(<1040): 레일은 목록 버튼으로 여는 좌측 드로어.
   back은 숨긴다 — 좌상단 로고가 홈 링크이고 시스템 뒤로가기로 충분. */
@media (max-width: 1039px) {
  .thread__back { display: none; }

  .thread-rail-toggle {
    display: grid; place-items: center; width: 36px; height: 36px;
    border-radius: var(--r-sm); background: none; border: none; padding: 0; cursor: pointer;
    color: var(--text-2); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .thread-rail-toggle:hover, .thread-rail-toggle[aria-expanded="true"] { background: var(--bg-2); color: var(--text-1); }

  .thread-side {
    position: fixed; top: 0; inset-inline-start: 0; z-index: 50;
    width: min(320px, 86vw); height: 100dvh; overflow-y: auto;
    background: var(--bg-1); border-inline-end: 1px solid var(--border);
    padding: var(--sp-4); margin: 0;
    transform: translateX(-100%);
    transition: transform var(--dur-2) var(--ease);
  }
  .thread-side.is-open { transform: translateX(0); box-shadow: var(--shadow-2); }
  /* transform엔 logical 속성이 없다 — RTL에선 드로어가 오른쪽에 붙으므로(inset-inline-start)
     숨기는 방향도 반대(+100%)로 뒤집어야 화면 밖으로 나간다. */
  [dir="rtl"] .thread-side { transform: translateX(100%); }
  [dir="rtl"] .thread-side.is-open { transform: translateX(0); }
  .rail-backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .5); }
}

/* Echo(외부반응 요약) 전용 아바타 — 픽셀 아바타 대신 글로브. 기능임을 시각적으로 드러낸다. */
.avatar--echo {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(76, 194, 224, .35);
}