/* 스레드 전용 — 임베드 · 댓글 · 컴포저 · 싱크 · 타임스탬프. 공통은 components.css. */
.thread { max-width: 760px; padding: var(--sp-5) clamp(var(--sp-4), 4vw, var(--sp-6)) var(--sp-6); }
.thread__back { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-ui); color: var(--text-2); margin-bottom: var(--sp-4); }
.thread__back::before { content: "←"; }

/* --- 헤더 --- */
.thread-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.thread-plat { text-transform: uppercase; letter-spacing: .3px; }
.thread-title { font-size: var(--fs-lg); font-weight: 800; }
.thread-sub { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.thread-link, .thread-embed { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-ui); color: var(--text-2); background: none; border: none; padding: 0; }
.thread-link:hover, .thread-embed:hover { color: var(--accent); }

/* --- 임베드 --- */
.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; }

/* --- 광고 --- */
.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); }
.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: var(--sp-4) var(--sp-4) var(--sp-5); max-width: 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);
}