/* 스레드 전용 — 임베드 · 댓글 · 컴포저 · 싱크 · 타임스탬프. 공통은 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; }
  .thread-side { order: -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: 2px; }
/* 텍스트는 위 칩·탭과 좌측 정렬(레일 패딩 기준), 호버 배경만 음수 마진으로 살짝 넓힘 */
.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__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); }
/* 상단 툴바 — 왼쪽 '홈으로'(+모바일 목록), 오른쪽 원본보기·임베드 */
.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: "←"; }
.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: #000; box-shadow: var(--shadow-1); margin-bottom: var(--sp-4); }
.embed-wrap:empty { display: none; }
.embed-wrap iframe, .embed-wrap > div { width: 100%; border: 0; display: block; }
.embed-fallback { padding: var(--sp-5); }
.embed-fallback a { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--accent); word-break: break-all; }

/* --- 외부반응 요약 카드 — 사람 댓글과 구분되는 액센트 정보 패널. 접기 가능 --- */
.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: left; }
.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; }

/* --- 광고 --- */
.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)); left: 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; }

/* --- 컴포저 --- */
.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-right: 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-left: var(--sp-4); border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-3); }
.msg.reply { margin: 0; }

/* 답글 입력 */
.reply-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); }

/* 접힘 */
.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: left; 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: 2px; 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-right: 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-radius: var(--r-full) 0 0 var(--r-full); }
.ts-chip-x { border-left: none; border-radius: 0 var(--r-full) var(--r-full) 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); }

@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; left: 0; z-index: 50;
    width: min(320px, 86vw); height: 100dvh; overflow-y: auto;
    background: var(--bg-1); border-right: 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); }
  .rail-backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .5); }
  .rail-backdrop[hidden] { display: none; }
}

/* 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);
}