/* tweets.css — 멤버 트윗 시트(ui_spec.md) · 보드 트윗 배지 · X 공식 카드(소식 팝업과 공용).
   시트 색: 바탕 = 멤버 색(--m · 레인 색을 tweets.js 가 넣는다), 글자 = --mi(검정 · 흰색 중 대비 큰 쪽, tweetlogic.js).
   그 밖의 색은 아래 --tw-* 토큰(어둡게 값, 밝게 = theme.css). 새 토큰(--t-*)은 :root 에 둔다. */

/* 색 전환이 부드럽도록 멤버 색 두 개를 등록한다(시트 바탕 · 글자색 500ms) */
@property --m { syntax: "<color>"; inherits: true; initial-value: #3a3a3e; }
@property --mi { syntax: "<color>"; inherits: true; initial-value: #ffffff; }

:root {
  --tw-badge-bg: var(--color-live);   /* 안 읽은 트윗 배지 (v4.9.6 청록 → 빨강, 최종 색은 화면 보고 정함) */
  --tw-badge-fg: #ffffff;
  --tw-xcard-bg: #000000;   /* X 카드 자리 바탕 */
  /* 움직임 속도 — tweets.js 의 EASE 와 같은 곡선 */
  --t-fast: 120ms; --t-face: 260ms; --t-open: 320ms; --t-close: 210ms; --t-color: 500ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── 헤더 우측 이동 레일 — YouTube · X (render.js buildHeader 가 .lane__link 다음에 .lane__nav 를 넣는다) ── */
.lane__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lane__link {
  flex: 1;
  min-width: 0;
}
.lane__nav {
  position: relative;   /* 헤더 ::before 그라데이션 위로 */
  z-index: 11;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--color-border);
}
.lane__nav-btn {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
}
.lane__nav-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}
.lane__nav-btn:hover {
  background: var(--color-hover-veil);
}
.lane__nav-yt:hover {
  color: #ff5a5a;   /* YouTube 이동 — LIVE 빨강(--color-live)과 구분되는 저채도 */
}
.lane__nav-x:hover {
  color: var(--color-text);
}
.lane__nav-btn:focus-visible {
  outline: 2px solid var(--color-text-muted);
  outline-offset: 1px;
}
@media (max-width: 767px) {
  .lane__nav-btn { width: 26px; height: 26px; }   /* 터치 타깃 */
}

/* ── 트윗 배지 (아바타 우상단, 살짝 겹침) ───────────────────────────────
   같은 크기의 원: 안 읽음 1건 = 빈 원, 2건 이상 = 숫자 원, 모두 읽음 = 표시 없음(.is-read) */
.lane__tw {
  position: absolute;
  /* 위치 = 아바타(44px) 오른쪽 위 모서리 바깥: 중심이 아바타 가로 87.5% · 세로 6% 지점 */
  left: 44.5px;
  top: calc(50% - 29px);
  z-index: 12;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid #ffffff;      /* (v4.9.9) 테두리는 어둡게 · 밝게 모두 흰색 — 전엔 카드 바탕색이라 어둡게에서 까맣게 보였다 */
  border-radius: 999px;
  background: var(--tw-badge-bg);
  color: var(--tw-badge-fg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
}
.lane__tw.is-read {
  display: none;                  /* 모두 읽으면 표시를 남기지 않는다 */
}
.lane__tw:focus-visible {
  outline: 2px solid var(--tw-badge-bg);
  outline-offset: 2px;
}
/* 안 읽음: 글로우 펄스 + 아주 약간 콩콩 점프 (주기적) */
.lane__tw.is-unread {
  animation: tw-pulse 2.8s ease-in-out infinite, tw-hop 2.8s ease-in-out infinite;
}
@keyframes tw-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 0 transparent);
  }
  50% {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 5px color-mix(in srgb, var(--tw-badge-bg) 80%, transparent));
  }
}
@keyframes tw-hop {
  0%, 20%, 100% { transform: translateY(0); }
  5%  { transform: translateY(-3px); }
  10% { transform: translateY(0); }
  14% { transform: translateY(-1.5px); }
  18% { transform: translateY(0); }
}

/* ── 트윗 시트 (ui_spec.md §4) ─────────────────────────────────────────
   폰(767px 이하) = 아래에서 올라오는 시트(폭 전체 · 높이 86% · 위 모서리 22px · 끌어 닫기),
   PC(768px 이상) = 가운데 뜨는 팝업 보드(폭 540px · 높이 = 창의 90% 또는 사용자가 정한 높이, v4.9.1). 속 구성 · 조작은 같다. */
body.tw-modal-open {
  overflow: hidden;
}
/* (v4.9.1) 잠그는 동안 스크롤바 자리를 비워 둔다 — 배경이 오른쪽으로 밀리지 않게(tweets.js _lock, 스크롤바가 보일 때만) */
/* 비워 둔 자리는 바깥 어둠(.tws-scrim)이 덮지 못하므로 어둠이 덮은 바탕과 같은 색으로 칠한다(밝게 테마에서 띠가 보이지 않게) */
html.tw-gutter { scrollbar-gutter: stable; background-color: color-mix(in srgb, var(--color-bg) 45%, #000); }
body.no-select { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.no-select.tw-ns { cursor: ns-resize; }   /* 팝업 높이를 바꾸는 동안 */

.tws-scrim {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-face) var(--ease);
}
.tws-scrim.is-on { opacity: 1; pointer-events: auto; }
.tws-scrim.is-drag { transition: none; }   /* 끄는 동안은 손가락을 그대로 따른다(sheetdrag.js) */

.tws, .tws * { box-sizing: border-box; }
.tws {
  --m: #3a3a3e;
  --mi: #ffffff;
  --paper: rgba(0, 0, 0, 0.2);   /* 번역 칸 바탕 — 글자와 반대쪽으로 섞는다(JS 가 글자색 따라 넣는다) */
  --s1: color-mix(in srgb, var(--mi) 14%, transparent);
  --s2: color-mix(in srgb, var(--mi) 22%, transparent);
  --ln: color-mix(in srgb, var(--mi) 26%, transparent);
  --sub: color-mix(in srgb, var(--mi) 84%, var(--m));
  position: fixed;
  z-index: 901;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 460px;
  height: 86%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(172deg, color-mix(in srgb, var(--m) 88%, #fff) 0%, var(--m) 48%, color-mix(in srgb, var(--m) 90%, #000) 100%);
  color: var(--mi);
  font-size: 14px;
  line-height: 1.55;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, 0.5);
  transform: translateY(103%);
  visibility: hidden;
  transition: transform var(--t-close) var(--ease), --m var(--t-color) ease, --mi var(--t-color) ease;
}
/* B2: 열기 320ms · 닫기 210ms */
.tws.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--t-open) var(--ease), --m var(--t-color) ease, --mi var(--t-color) ease;
}
.tws.is-dragging { transition: none; }                                /* B3: 끄는 동안 */
.tws.is-spring { transition: transform 0.44s cubic-bezier(0.25, 1.55, 0.45, 1); }   /* 놓고 제자리로 튕김 */
.tws:focus { outline: none; }
.tws__rz { display: none; }   /* (v4.9.1) PC 높이 손잡이 — 폰 시트엔 없다(아래 PC 블록이 켠다) */

@media (min-width: 768px) {
  /* (v4.9.1) --tx · --ty = 머리 줄로 옮긴 거리, 높이 = tweets.js _geom(아래 90vh 는 JS 전 기본값).
     가운데 기준이라 높이만 바꾸면 위아래가 같이 늘어난다 */
  .tws {
    --tx: 0px;
    --ty: 0px;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    margin: 0;
    width: 540px;
    max-width: calc(100% - 48px);
    height: 90vh;
    border-radius: 20px;
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--mi) 12%, transparent);
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-47% + var(--ty))) scale(0.8);
    transition: transform var(--t-close) var(--ease), opacity var(--t-close) ease, --m var(--t-color) ease, --mi var(--t-color) ease;
  }
  .tws.is-open {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)));
    transition: transform var(--t-open) var(--ease), opacity var(--t-open) ease, --m var(--t-color) ease, --mi var(--t-color) ease;
  }
  .tws.is-open.is-geo { transition: --m var(--t-color) ease, --mi var(--t-color) ease; }   /* 옮기기 · 늘이기 중엔 손을 그대로 따른다 */
  .tws .tws__grab { display: none; }
  .tws .tws__head { padding-top: 14px; cursor: grab; }
  .tws.is-moving .tws__head { cursor: grabbing; }

  /* 위 · 아래 가장자리 손잡이 — 올리면 가운데에 짧은 막대가 보인다 */
  .tws__rz { display: block; position: absolute; left: 24px; right: 24px; height: 12px; z-index: 6; cursor: ns-resize; touch-action: none; }
  .tws__rz--t { top: -6px; }
  .tws__rz--b { bottom: -6px; }
  .tws__rz::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 4px; margin: -2px 0 0 -22px; border-radius: 2px;
    background: var(--mi); opacity: 0; transform: scaleX(0.6); transition: opacity var(--t-fast), transform var(--t-face) var(--ease);
  }
  .tws__rz:hover::after, .tws__rz.is-on::after { opacity: 0.75; transform: none; }
  /* 끄는 동안 오른쪽에 「높이 812px · 창의 88%」 */
  .tws__hread {
    position: absolute; right: -8px; top: 50%; transform: translate(100%, -50%); pointer-events: none; white-space: nowrap;
    background: var(--color-raised); color: var(--color-text); border: 1px solid var(--color-raised-edge); border-radius: 8px;
    padding: 4px 8px; font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--t-fast);
  }
  .tws.is-sizing .tws__hread { opacity: 1; }
}

.tws__grab { height: 22px; display: grid; place-items: center; cursor: grab; touch-action: none; flex: none; }
.tws__grab i { width: 40px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--mi) 45%, transparent); transition: width var(--t-fast); }
.tws.is-armed .tws__grab i { width: 56px; }   /* B3: 닫힘 선을 넘은 표시 */

/* (v4.9.5) 머리 줄 한 줄 = 멤버 칩 줄(지금 멤버만 얼굴 + 이름) + 번역 · 원문 (운영자 D안, 닫기 단추 없음) */
.tws__head { display: flex; align-items: center; gap: 8px; padding: 0 12px 6px 8px; flex: none; touch-action: none; cursor: grab; }
.tws__nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 화면 낭독용 시트 이름 */

/* 머리 줄 「번역 · 원문」 탭 = 모든 글 한꺼번에(A4 알약이 미끄러진다) */
.tws__seg {
  position: relative; display: inline-flex; padding: 2px; border-radius: 9px;
  background: var(--s1); border: 1px solid var(--ln); flex: none;
}
.tws__seg-b {
  position: relative; z-index: 1; border: 0; background: transparent; color: var(--sub);
  font: inherit; font-size: 12px; white-space: nowrap; padding: 4px 9px; min-height: 28px;
  border-radius: 7px; cursor: pointer;
}
.tws__seg-b[aria-pressed="true"] { color: var(--m); font-weight: 800; }
.tws__seg-pill {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 7px; background: var(--mi);
  pointer-events: none; transition: all var(--t-face) var(--ease);
}

/* 멤버 칩 줄: 마우스 · 펜은 JS 끌기, 터치는 브라우저 가로 스크롤(pan-x). 넘칠 때만 양 끝 16px 흐림 */
.tws__members {
  --ml: 16px; --mr: 16px;
  position: relative; display: flex; align-items: center; gap: 8px; padding: 4px; overflow-x: auto; flex: 1; min-width: 0;
  scrollbar-width: none; cursor: grab; touch-action: pan-x;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ml), #000 calc(100% - var(--mr)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--ml), #000 calc(100% - var(--mr)), transparent 100%);
}
.tws__members::-webkit-scrollbar { display: none; }
.tws__members.at-l { --ml: 0px; }
.tws__members.at-r { --mr: 0px; }
.tws__members.is-grabbing { cursor: grabbing; }
.tws__chip {   /* 다른 멤버 = 얼굴만(이름은 aria-label · title), 지금 멤버 = 얼굴 + 이름 알약 */
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; flex: none;
  border: 0; background: transparent; color: inherit; border-radius: 999px;
  padding: 2px; cursor: pointer; font: inherit; font-size: 14px; white-space: nowrap; min-height: 36px;
  transition: opacity var(--t-fast);
}
.tws__chip-nm { display: none; }
.tws__chip[aria-current="true"] { padding-right: 14px; }
.tws__chip[aria-current="true"] .tws__chip-nm { display: inline; }
.tws__chip:not([aria-current="true"]):hover .tws__chip-av { box-shadow: 0 0 0 2px var(--mi); }
/* (v4.9.1) 왼쪽 원 = 예고판 네임플레이트 아바타(.lane__avatar)와 같은 이미지 + 레인 색(--lc) 테두리 */
.tws__chip-av {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--color-img, #111) center / cover no-repeat;
  border: 1.5px solid var(--lc, #888); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.tws__chip[aria-current="true"] { background: transparent; color: var(--m); font-weight: 800; border-color: var(--mi); }
.tws__chip[aria-disabled="true"] { opacity: 0.4; cursor: default; }   /* 트윗 없는 멤버: 흐리게 · 누를 수 없게 */
.tws__chip[aria-disabled="true"] .tws__chip-av { filter: grayscale(0.6); }
.tws__chip b {   /* 새 글 수 — 얼굴 오른쪽 위에 */
  position: absolute; right: -4px; top: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e5484d; color: #fff;
  font-size: 10px; display: grid; place-items: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--m);
}
/* A5: 선택 알약 — 칩 사이를 미끄러진다(위치 · 크기는 JS) */
.tws__mpill {
  position: absolute; left: 0; top: 0; height: 36px; border-radius: 999px; background: var(--mi);
  pointer-events: none; transition: all var(--t-face) var(--ease);
}

/* 피드 — 위 · 아래 끝 흐림(C3). 끝에 닿은 쪽은 at-top / at-bottom 으로 끈다 */
.tws__feed {
  --ft: 12px; --fb: 16px;
  position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 14px 22px; display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: var(--ln) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
}
.tws__feed.at-top { --ft: 0px; }
.tws__feed.at-bottom { --fb: 0px; }
.tws__feed.is-swapping { animation: tws-swap 0.32s var(--ease); }   /* 멤버를 바꾸면 칩 방향에서 */
@keyframes tws-swap { from { opacity: 0; transform: translateX(var(--from, 0px)); } to { opacity: 1; transform: none; } }

/* 「여기부터 새 글」 구분선(B4: 열면 양쪽 선이 왼쪽에서 그어진다) */
.tws__new { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; }
.tws__new::before, .tws__new::after { content: ""; flex: 1; height: 1.5px; background: var(--mi); opacity: 0.55; }
.tws__new.draw::before, .tws__new.draw::after { transform-origin: left center; animation: tws-nl 420ms var(--ease) both; }
@keyframes tws-nl { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 글타래(C1: 세로줄이 처음 보일 때 위에서 아래로 한 번) */
.tws-chain { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 18px; }
.tws-chain::before {
  content: ""; position: absolute; left: 6px; top: 16px; bottom: 30px; width: 2px; border-radius: 1px;
  background: var(--mi); opacity: 0.5; transform-origin: top center;
}
.tws-chain.wait::before { transform: scaleY(0); }
.tws-chain.draw::before { animation: tws-chain 480ms var(--ease) both; }
@keyframes tws-chain { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* (v4.9.3) 날짜 구분선 — 메신저처럼 가운데 작은 알약 */
.tws__day {
  align-self: center; font-size: 11.5px; font-weight: 700; color: var(--sub); background: var(--s1);
  border-radius: 999px; padding: 2px 10px; font-variant-numeric: tabular-nums;
}

/* 글 하나 */
.tws-tw { position: relative; display: flex; flex-direction: column; gap: 4px; }
.tws-tw:focus-visible { outline: 2px solid var(--mi); outline-offset: 3px; border-radius: 12px; }   /* C4 */
.tws-chain .tws-tw::before {
  content: ""; position: absolute; left: -15px; top: 18px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mi); box-shadow: 0 0 0 3px var(--m);
}
.tws-chain .tws-tw.is-root::before { background: var(--m); border: 2px solid var(--mi); }
.tws-tw__open {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 6px;
  color: var(--sub); text-decoration: none; font-size: 12px; font-weight: 700; flex: none;
}
.tws-tw__open:hover { background: var(--s1); color: var(--mi); }
.tws-tw__open svg { width: 12px; height: 12px; }
.tws-tw__open.is-disabled { pointer-events: none; opacity: 0.4; }

/* (v4.9.3) 두 면 겹쳐 밀기: 같은 칸(grid)에 겹친다. 높이 = 큰 쪽(U3). 뒤 면은 투명하게 제자리 — 옆으로 밀어 두면 X 카드가 그려지지 않는다.
   바꿀 때 앞 면만 옆으로 밀려 나가며 흐려진다(tweets.js 가 transform · opacity 를 넣고 300ms 뒤 앞 · 뒤를 바꾼다) */
.tws-tw__track { display: grid; border-radius: 14px; overflow: hidden; cursor: grab; touch-action: pan-y; }
.tws-tw__track.is-grabbing { cursor: grabbing; }
.tws-tw__face {
  grid-area: 1 / 1; min-width: 0; position: relative; display: flex; flex-direction: column;
  transition: transform var(--t-face) var(--ease), opacity var(--t-face) ease;
}
.tws-tw__face.is-front { z-index: 1; }
.tws-tw__face.is-back { opacity: 0; pointer-events: none; transform: scale(0.985); }
.tws-tw__face.is-spring { transition: transform 0.42s cubic-bezier(0.25, 1.4, 0.45, 1), opacity var(--t-face) ease; }
.tws-tw__track.is-grabbing .tws-tw__face { transition: none; }

/* (v4.9.3) 번역 면 = X 카드와 같은 뼈대 · 치수(tweetlogic XM — 테두리 1 · 위 12 · 옆 16 · 머리 줄 48 · 사이 12 · 시각 줄 앞 8).
   본문 · 인용 본문 칸의 높이(min-height)는 tweets.js 가 원문 높이에 맞춘다 — 넘겨도 사진 · 인용 · 시각이 같은 자리 */
.tws-ko {
  flex: 1; display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--ln); border-radius: 12px; padding: 12px 16px 12px;
}
.tws-ko__head { height: 48px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.tws-ko__av {
  width: 40px; height: 40px; border-radius: 50%; flex: none; margin: 0 4px;
  background: var(--color-img, #111) center / cover no-repeat; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mi) 40%, transparent);
}
.tws-ko__id { flex: 1; min-width: 0; line-height: 20px; }
.tws-ko__nm { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tws-ko__hd { font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tws-ko__tag { flex: none; font-size: 11px; font-weight: 800; border: 1px solid var(--ln); border-radius: 6px; padding: 0 6px; line-height: 18px; }
.tws-ko__re {   /* X 카드의 「@핸들 님에게 보내는 답글」 줄 자리(24px) */
  margin-top: 12px; height: 24px; display: flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}
.tws-ko__re svg { width: 13px; height: 13px; flex: none; }
.tws-ko__txt {
  margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; word-break: keep-all;
  overflow-wrap: anywhere; line-break: strict;
}
.tws-ko__re + .tws-ko__txt { margin-top: 0; }
.tws-ko > .tws-md { margin-top: 12px; }
.tws-ko__q { margin-top: 12px; border: 1px solid var(--ln); border-radius: 12px; overflow: hidden; }
.tws-ko__qi { padding: 12px; }
.tws-ko__qh { display: block; height: 20px; line-height: 20px; font-size: 12px; font-weight: 800; }
.tws-ko__qt {
  margin-top: 6px; font-size: 14px; line-height: 20px; white-space: pre-wrap; word-break: keep-all;
  overflow-wrap: anywhere; line-break: strict;
}
.tws-ko__foot { margin-top: 8px; height: 20px; display: flex; align-items: center; gap: 8px; }
.tws-ko__time { font-size: 12.5px; color: var(--sub); font-variant-numeric: tabular-nums; }

/* (v4.9.3) 미디어 격자 — X 카드 실측: 2~4칸 = 16:9 묶음 · 1칸 = 원래 비율(세로는 정사각형, tweets.js 가 aspect-ratio) ·
   칸 사이 2px · 테두리 1px · 모서리 12px. 인용 상자 안은 아래에 가장자리까지 붙인다.
   내려받기 막기: <img> 대신 배경 그림, 선택 · iOS 길게 누르기 메뉴 끔(우클릭 · 끌기는 tweets.js) */
.tws-md {
  display: grid; gap: 2px; aspect-ratio: 16 / 9; border: 1px solid var(--ln); border-radius: 12px; overflow: hidden;
  background: color-mix(in srgb, var(--mi) 10%, transparent);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tws-ko__q .tws-md { border: 0; border-radius: 0; }
.tws-md.g2 { grid-template-columns: 1fr 1fr; }
.tws-md.g3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tws-md.g3 > :first-child { grid-row: 1 / 3; }
.tws-md.g4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tws-md__cell {
  position: relative; min-width: 0; min-height: 0; border: 0; padding: 0; margin: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--mi) 12%, transparent) center / cover no-repeat; color: #fff; font: inherit;
}
button.tws-md__cell { cursor: pointer; }
button.tws-md__cell:focus-visible { outline: 2px solid var(--mi); outline-offset: -3px; }
.tws-md__play {   /* 영상 ▶ — 시트 톤(멤버 색을 어둡게 + 흰 테) */
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--m) 70%, #000); box-shadow: 0 0 0 2px #fff; transition: transform var(--t-fast) var(--ease);
}
.tws-md__play svg { width: 18px; height: 18px; margin-left: 3px; }
button.tws-md__cell:hover .tws-md__play { transform: scale(1.06); }
button.tws-md__cell:active .tws-md__play { transform: scale(0.94); }
.tws-md__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); font-size: 20px; font-weight: 800; }

/* (v4.9.3) 영상 칸을 누르면 원문 카드의 같은 영상 칸 자리에 글로우 한 번(멤버 색 · 약하게). 카드 위에 겹치고 누름은 통과 */
.tws-glow {
  position: absolute; z-index: 4; pointer-events: none; border-radius: 4px; opacity: 0;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--m) 80%, #fff), 0 0 8px 1px color-mix(in srgb, var(--m) 60%, transparent);
  animation: tws-glow 650ms ease-out forwards;
}
@keyframes tws-glow { 0% { opacity: 0; } 35% { opacity: 0.8; } 100% { opacity: 0; } }

/* (v4.9.3) 원문 높이를 재는 숨은 칸 — X 카드 본문과 같은 시스템 글꼴 · 크기(본문 20/24 · 인용 15/20). 화면에 그리지 않는다 */
.tws__measure {
  position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; contain: layout style;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px; line-height: 24px; white-space: pre-wrap; overflow-wrap: break-word;
}
.tws__measure.is-quote { font-size: 15px; line-height: 20px; }

/* 면 점 2개(끌기 손잡이 겸 — A2: 끄는 동안 폭이 따라간다) */
.tws-tw__dots { display: flex; justify-content: center; align-items: center; gap: 5px; height: 20px; touch-action: pan-y; cursor: grab; }
.tws-tw__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--mi); opacity: 0.35; transition: width var(--t-fast), opacity var(--t-fast); }
.tws-tw__dots i.on { width: 14px; border-radius: 3px; opacity: 0.9; }
.tws-tw__dots.is-drag i { transition: none; }

/* 안내 한 줄(원문 면으로 처음 밀었을 때, 세션당 한 번) */
.tws__hint {
  position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 14px; margin: 0 auto; max-width: 420px; width: fit-content;
  text-align: center; background: var(--color-raised); color: var(--color-text); border: 1px solid var(--color-raised-edge);
  font-size: 12.5px; line-height: 1.45; padding: 8px 12px; border-radius: 10px;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.tws__hint.is-on { opacity: 0.96; }

/* C2: 「새 글 N개 ↓」 칩 — 새 글 자리가 화면 아래에 있을 때만 */
.tws__newchip {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 12px; margin: 0 auto; width: fit-content;
  border: 0; border-radius: 999px; padding: 6px 14px; background: var(--mi); color: var(--m); font: inherit;
  font-size: 12.5px; font-weight: 800; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5); cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity var(--t-fast), transform var(--t-fast) var(--ease);
}
.tws__newchip.is-on { opacity: 1; pointer-events: auto; transform: none; }
.tws :focus-visible { outline: 2px solid var(--mi); outline-offset: 2px; }

/* ── (v4.9.1) 새 글 도착 — tweets.js _arrive ──────────────────────────────
   맨 아래에 있었으면 아래에서 떠오르며 들어오고(.is-arriving), 아니면 오른쪽 아래 ↓ 동그라미(.tws__fab)가 뜬다.
   동그라미는 2.8초마다 한 번 약하게 흔들리고(테가 옅게 퍼지고 화살표가 아래로 툭), 올리면 멈춘다.
   눌러 내려가거나 직접 맨 아래까지 오면 기다리던 새 글 테두리가 한 번 빛나고(.is-fresh) 동그라미는 사라진다. */
.tws-tw.is-arriving { animation: tws-rise 560ms cubic-bezier(0.2, 1.15, 0.3, 1) both; }
@keyframes tws-rise { from { opacity: 0; transform: translateY(36px) scale(0.98); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
.tws-tw.is-fresh { animation: tws-fresh 1400ms ease-out; border-radius: 14px; }
@keyframes tws-fresh {
  0% { box-shadow: 0 0 0 0 transparent; }
  18% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mi) 70%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.tws__fab {
  position: absolute; z-index: 4; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  opacity: 0; pointer-events: none; transform: scale(0.4) translateY(12px);
  transition: opacity 180ms ease, transform 180ms var(--ease);
}
.tws__fab.is-on { opacity: 1; pointer-events: auto; transform: none; transition: opacity 220ms ease, transform 460ms cubic-bezier(0.25, 1.4, 0.45, 1); }
.tws__fab-in {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--mi); color: var(--m);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--m) 25%, transparent);
  transform-origin: 50% 40%; transition: transform var(--t-fast) var(--ease);
}
.tws__fab-in::before {   /* 흔들릴 때 같이 퍼지는 옅은 테 */
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mi); opacity: 0; pointer-events: none;
}
.tws__fab-in svg { width: 20px; height: 20px; }
.tws__fab-in svg path { stroke-width: 2.2; }
/* (v4.9.3) 흔들기 · 숫자는 기다리는 새 글이 있을 때만(.is-count). 그냥 올렸을 때는 조용한 「맨 아래로」 */
.tws__fab.is-on.is-count .tws__fab-in { animation: tws-wobble 2.8s ease-in-out 0.7s infinite; }
.tws__fab.is-on.is-count .tws__fab-in::before { animation: tws-halo 2.8s ease-out 0.7s infinite; }
.tws__fab.is-on.is-count .tws__fab-in svg { animation: tws-nudge 2.8s ease-in-out 0.7s infinite; }
.tws__fab:hover .tws__fab-in, .tws__fab:focus-visible .tws__fab-in,
.tws__fab:hover .tws__fab-in::before, .tws__fab:hover .tws__fab-in svg { animation-play-state: paused; }
.tws__fab:hover .tws__fab-in { transform: scale(1.07); }
.tws__fab:active .tws__fab-in { transform: scale(0.94); }
.tws__fab:focus-visible { outline: none; }
.tws__fab:focus-visible .tws__fab-in { outline: 2px solid var(--mi); outline-offset: 3px; }
.tws__fab-n {
  position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #e5484d; color: #fff; font-size: 11px; font-weight: 800; display: none; place-items: center;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--m);
}
.tws__fab.is-count .tws__fab-n { display: grid; }
@keyframes tws-wobble {
  0%, 44%, 100% { transform: none; }
  6% { transform: translateY(2px) rotate(-8deg); }
  14% { transform: translateY(-1px) rotate(7deg); }
  22% { transform: translateY(1px) rotate(-4deg); }
  30% { transform: rotate(2deg); }
  38% { transform: none; }
}
@keyframes tws-halo { 0% { opacity: 0.45; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes tws-nudge { 0%, 44%, 100% { transform: none; } 10% { transform: translateY(3px); } 22% { transform: translateY(0); } 30% { transform: translateY(1.5px); } }
.tws__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── (v4.9.1) X 카드 덮개 — (v4.9.4) PC · 폰 모두 ──────────────
   카드 머리(작성자 줄, --xhead)를 뺀 나머지를 투명하게 덮어 밀기 손잡이로 쓴다(손가락은 세로로 밀면 피드 스크롤 — pan-y).
   한 번 누르면 비켜 카드 조작(.is-live), 마우스가 카드를 벗어나거나 카드 밖을 누르면 다시 덮인다. 「X에서 보기」 대체 링크가 떠 있으면 덮지 않는다. */
.tws .lane__thread__xcard { --xhead: 64px; }   /* X 카드 머리 줄 = 위 13 + 48 (10-28 실측) */
.tws-xcover { display: block; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; top: var(--xhead); cursor: grab; touch-action: pan-y; }
.tws-tw__track.is-grabbing .tws-xcover { cursor: grabbing; }
.lane__thread__xcard.is-live .tws-xcover { pointer-events: none; }
.lane__thread__xcard:has(.lane__thread__xlink) .tws-xcover { display: none; }
.tws-xcover::after {
  content: "카드 조작 중 · 카드 밖으로 나가면 다시 밀 수 있어요"; position: absolute; left: 50%; top: -12px;
  transform: translate(-50%, -4px); white-space: nowrap; pointer-events: none; font-size: 11.5px; font-weight: 700;
  background: var(--mi); color: var(--m); border-radius: 999px; padding: 2px 10px;
  opacity: 0; transition: opacity var(--t-fast), transform var(--t-face) var(--ease);
}
@media (hover: none) { .tws-xcover::after { content: "카드 조작 중 · 카드 밖을 누르면 다시 밀 수 있어요"; } }
.lane__thread__xcard.is-live .tws-xcover::after { opacity: 1; transform: translate(-50%, 0); }
.tws .lane__thread__xcard.is-live { box-shadow: inset 0 0 0 2px var(--mi); }

/* ── X 공식 카드 (소식 팝업 notices.js 와 공용 · 트윗 시트의 원문 면) ──────────────────────
   카드 높이는 X 임베드가 알려주는 값을 JS 가 wrap 에 적용한다(iframe 은 wrap 을 꽉 채움). */
.lane__thread__xcard {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-width: 250px;                                          /* X 임베드 최소 폭 — 이보다 좁으면 렌더링이 안 된다(실측) */
  border-radius: 12px;
  overflow: hidden;
  background: var(--tw-xcard-bg);
}
.lane__thread__xcard.is-plain { height: auto; background: transparent; overflow: visible; }
.lane__thread__xskel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #71767b;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%) 0 0 / 200% 100%;
  animation: tw-shim 1.6s linear infinite;
}
@keyframes tw-shim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.lane__thread__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  color-scheme: inherit;   /* 사이트 테마를 따른다 — X 카드도 같은 테마로 불러온다(tweets.js _embedSrc) */
  background: transparent;
}
.lane__thread__xlink {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.75);
}
.lane__thread__xcard.is-plain .lane__thread__xlink {
  position: static;
  display: block;
  color: inherit;
  background: rgba(255, 255, 255, 0.17);
}
.lane__thread__xlink.is-disabled { pointer-events: none; opacity: 0.6; }

/* ── (마이크로 인터랙션) 트윗 없는 네임플레이트를 눌렀을 때 — js/tweets.js _noTweet ── */
.is-nope { animation: tw-nope-shake 0.42s; }
@keyframes tw-nope-shake {
  0%, 100% { translate: 0; rotate: 0deg; }
  20% { translate: -5px 0; rotate: -3deg; }
  40% { translate: 5px 0; rotate: 3deg; }
  60% { translate: -3px 0; rotate: -1.5deg; }
  80% { translate: 2px 0; rotate: 0deg; }
}
.tw-nope {
  position: fixed; z-index: 950; left: 0; top: 0; pointer-events: none; opacity: 0; visibility: hidden;
  background: var(--color-raised); color: var(--color-text); border: 1px solid var(--color-raised-edge);
  border-radius: 8px; padding: 6px 10px; font-size: 0.78rem; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.tw-nope::after {   /* 꼬리 — 네임플레이트 가운데를 가리킨다 */
  content: ""; position: absolute; left: calc(var(--tail-x, 50%) - 5px); bottom: -6px;
  border: 5px solid transparent; border-top-color: var(--color-raised-edge); border-bottom: 0;
}
.tw-nope.below::after { bottom: auto; top: -6px; border-top: 0; border-bottom: 5px solid var(--color-raised-edge); }
.tw-nope.on { visibility: visible; animation: tw-nope-tip 1.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes tw-nope-tip { 0% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.tw-nope.below.on { animation-name: tw-nope-tip-b; }
@keyframes tw-nope-tip-b { 0% { opacity: 0; transform: translateY(-6px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ── 움직임 줄이기: 이동 · 크기는 끄고 색 · 투명도만(A1 · A3 은 JS 에서 안 함) ── */
@media (prefers-reduced-motion: reduce) {
  .lane__tw.is-unread { animation: none; }
  .lane__thread__xskel { animation: none; }
  .tws, .tws.is-open, .tws.is-dragging, .tws.is-spring {
    transition: opacity var(--t-fast), --m var(--t-color) ease, --mi var(--t-color) ease !important;
  }
  .tws-scrim, .tws__hint { transition: opacity var(--t-fast) !important; }
  .tws-tw__dots i, .tws__grab i, .tws__seg-pill, .tws__mpill { transition: none !important; }
  .tws__newchip { transition: opacity var(--t-fast) !important; transform: none !important; }
  .tws-tw.is-arriving { animation: tws-fade 200ms ease both; }   /* (v4.9.1) 떠오르기 · 흔들기 · 빛내기 대신 투명도만 */
  @keyframes tws-fade { from { opacity: 0; } to { opacity: 1; } }
  .tws-tw.is-fresh { animation: none; }
  .tws__fab, .tws__fab.is-on { transform: none; transition: opacity var(--t-fast); }
  .tws__fab.is-on .tws__fab-in, .tws__fab.is-on .tws__fab-in::before, .tws__fab.is-on .tws__fab-in svg { animation: none; }
  .tws__rz::after, .tws-xcover::after { transition: opacity var(--t-fast); }
  .tws-tw__face, .tws-tw__face.is-spring { transition: opacity var(--t-fast) !important; transform: none !important; }   /* (v4.9.3) 겹쳐 밀기 = 투명도만 */
  .tws-glow { animation-duration: 900ms; }
  button.tws-md__cell:hover .tws-md__play, button.tws-md__cell:active .tws-md__play { transform: none; }
  .tws__feed.is-swapping { animation: none; }
  .tws__new.draw::before, .tws__new.draw::after, .tws-chain.draw::before { animation: none; }
  .lane__thread__xcard, .tw-nope { transition: none; }
}