/* ═══════════════════════════════════════════════════════════
   티옴타 피드 — 인스타형 피드 + 위버스형 크리에이터 허브 + 큰글씨 자막 오버레이
   M150 / T1031. 클로드디자인 확정 시안(Main/Creator/Subtitle.dc.html) 이식본.
   디자인=뷰 파일 / 데이터=JSON API 분리. 색은 전부 아래 토큰(var)만 소비 — 하드코딩 hex 금지.
   ═══════════════════════════════════════════════════════════ */

.tf {
  /* 확정 시안 팔레트 (다크 고정 — 몰입형 콘텐츠 표면) */
  --tf-bg:      #1b1916;
  --tf-panel:   #232019;
  --tf-line:    #35302a;
  --tf-text:    #ece4d6;
  --tf-dim:     #98917f;
  --tf-gold:    #c79a3e;
  --tf-gold2:   #B58A4A;
  --tf-coral:   #B5524A;
  --tf-green:   #4E8C5A;
  --tf-violet:  #6E6A8C;
  --tf-stage-a: #2a2620;
  --tf-stage-b: #17140f;
  --tf-ink:     #ffffff;
  --tf-brown:   #3B2A1D;

  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  flex-direction: column;
  background: var(--tf-bg);
  color: var(--tf-text);
  font-family: -apple-system, 'Apple SD Gothic Neo', system-ui, sans-serif;
  overflow: hidden;
}
.tf.on { display: flex; }
.tf * { box-sizing: border-box; }
.tf a { color: var(--tf-gold); }
.tf a:hover { color: var(--tf-gold2); }

/* 390px 시안 폭을 데스크톱에서도 중앙 정렬로 유지 */
.tf-frame {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--tf-bg);
}

/* ── 상단바 ── */
.tf-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); flex-shrink: 0; }
.tf-logo { font-family: Georgia, 'Apple SD Gothic Neo', serif; font-size: 22px; font-weight: 600; color: var(--tf-text); letter-spacing: -0.01em; }
.tf-top-acts { display: flex; gap: 16px; align-items: center; }
.tf-iconbtn { background: none; border: none; padding: 0; cursor: pointer; display: flex; color: inherit; }

/* ── 스토리 행 ── */
.tf-stories { display: flex; gap: 14px; padding: 6px 16px 12px; overflow-x: auto; flex-shrink: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tf-stories::-webkit-scrollbar { display: none; }
.tf-story { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; }
.tf-story-ring { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--tf-gold), var(--tf-coral)); padding: 2.5px; }
.tf-story-ring.seen { background: none; border: 1.5px solid var(--tf-line); padding: 0; }
.tf-story-av { width: 100%; height: 100%; border-radius: 50%; background: var(--tf-panel); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.tf-story-nm { font-size: 11px; color: var(--tf-dim); max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 피드 ── */
.tf-feed { flex: 1 1 0%; display: flex; flex-direction: column; overflow-y: auto; border-top: 0.5px solid var(--tf-line); -webkit-overflow-scrolling: touch; }
.tf-post { display: flex; flex-direction: column; border-bottom: 0.5px solid var(--tf-line); }
.tf-post-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.tf-post-av { width: 34px; height: 34px; border-radius: 50%; background: var(--tf-line); display: flex; align-items: center; justify-content: center; color: var(--tf-gold); font-size: 15px; font-weight: 700; flex-shrink: 0; cursor: pointer; }
.tf-post-who { display: flex; flex-direction: column; }
.tf-post-nm { font-size: 14px; font-weight: 600; color: var(--tf-text); cursor: pointer; }
.tf-post-meta { font-size: 11px; color: var(--tf-dim); }

/* ── 무대(영상) + 큰글씨 자막 오버레이 ── */
.tf-stage { position: relative; height: 430px; background: linear-gradient(160deg, var(--tf-stage-a), var(--tf-stage-b)); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.tf-stage.tall { height: 500px; }
.tf-stage-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tf-play { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.tf-langchips { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 3; }
.tf-chip { padding: 4px 10px; border-radius: 999px; background: rgba(27,25,22,0.65); color: var(--tf-text); font-size: 12px; border: 0.5px solid var(--tf-line); cursor: pointer; font-family: inherit; }
.tf-chip.on { background: var(--tf-gold); color: var(--tf-bg); font-weight: 700; border-color: transparent; }

/* 자막 레이어 — 영상에 굽지 않고 데이터로 렌더 */
.tf-subs { padding: 0 20px 46px; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; }
.tf-subs.top { position: absolute; top: 0; left: 0; right: 0; padding: 56px 20px 0; }
.tf-subs-badge { align-self: flex-start; padding: 3px 9px; background: rgba(199,154,62,0.18); border: 0.5px solid var(--tf-gold); border-radius: 6px; color: var(--tf-gold); font-size: 11px; font-weight: 700; }
.tf-sub-title { font-size: 30px; font-weight: 800; line-height: 1.25; color: var(--tf-ink); text-shadow: 0 2px 10px rgba(0,0,0,0.6); white-space: pre-line; }
.tf-sub-line { font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.85); text-shadow: 0 1px 6px rgba(0,0,0,0.6); white-space: pre-line; }
.tf-sub-title.xl { font-size: 34px; line-height: 1.28; }
.tf-sub-line.xl { font-size: 19px; line-height: 1.4; }

/* 더블탭 하트 펄스 */
.tf-heartpop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.4); opacity: 0; pointer-events: none; z-index: 5; }
.tf-heartpop.pop { animation: tf-pop .8s ease-out; }
@keyframes tf-pop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.4); }
  22%  { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
  55%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.3); }
}

/* ── 액션 바 ── */
.tf-acts { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.tf-acts-left { display: flex; gap: 18px; align-items: center; }
.tf-act { display: flex; gap: 6px; align-items: center; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; color: var(--tf-text); }
.tf-act-n { font-size: 13px; color: var(--tf-text); }
.tf-act-n.b { font-weight: 600; }
.tf-cheer { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--tf-gold), var(--tf-coral)); color: var(--tf-bg); font-size: 13px; font-weight: 800; border: none; cursor: pointer; font-family: inherit; }
.tf-cheer:disabled { opacity: .55; cursor: default; }
.tf-hint { padding: 0 16px 12px; font-size: 12px; color: var(--tf-dim); }
.tf-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--tf-panel); border: 0.5px solid var(--tf-line); color: var(--tf-text); padding: 10px 16px; border-radius: 999px; font-size: 13px; z-index: 1000; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; text-align: center; }
.tf-toast.on { opacity: 1; }

/* ── 하단 5탭 ── */
.tf-tabs { display: flex; justify-content: space-around; align-items: center; padding: 10px 8px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 0.5px solid var(--tf-line); background: var(--tf-panel); flex-shrink: 0; }
.tf-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--tf-dim); background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }
.tf-tab.on { color: var(--tf-gold); }
.tf-tab-nm { font-size: 10px; }
.tf-tab.on .tf-tab-nm { font-weight: 700; }

/* ── 크리에이터 허브 (위버스형) ── */
.tf-cr-cover { height: 148px; background: linear-gradient(150deg, var(--tf-brown), var(--tf-panel) 70%); position: relative; flex-shrink: 0; }
.tf-cr-back { position: absolute; top: 14px; left: 14px; background: none; border: none; cursor: pointer; padding: 0; display: flex; }
.tf-cr-av { position: absolute; bottom: -34px; left: 20px; width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, var(--tf-gold), var(--tf-coral)); padding: 3px; }
.tf-cr-av-in { width: 100%; height: 100%; border-radius: 50%; background: var(--tf-panel); display: flex; align-items: center; justify-content: center; color: var(--tf-gold); font-size: 34px; font-weight: 800; }
.tf-cr-head { padding: 42px 20px 14px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.tf-cr-row { display: flex; align-items: flex-end; justify-content: space-between; }
.tf-cr-nm { font-family: Georgia, 'Apple SD Gothic Neo', serif; font-size: 24px; font-weight: 700; }
.tf-cr-sub { font-size: 13px; color: var(--tf-dim); }
.tf-cr-sub-btn { padding: 9px 18px; border-radius: 999px; background: var(--tf-gold); color: var(--tf-bg); font-size: 13px; font-weight: 800; border: none; cursor: pointer; font-family: inherit; }
.tf-cr-stats { display: flex; gap: 10px; }
.tf-cr-stat { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 0; background: var(--tf-panel); border: 0.5px solid var(--tf-line); border-radius: 14px; }
.tf-cr-stat-v { font-size: 18px; font-weight: 800; }
.tf-cr-stat-v.mam { color: var(--tf-coral); }
.tf-cr-stat-v.cheer { color: var(--tf-gold); }
.tf-cr-stat-v.cnt { color: var(--tf-green); }
.tf-cr-stat-k { font-size: 11px; color: var(--tf-dim); }
.tf-cr-cheer { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 0; border-radius: 14px; background: linear-gradient(135deg, var(--tf-gold), var(--tf-coral)); color: var(--tf-bg); font-size: 15px; font-weight: 800; border: none; cursor: pointer; font-family: inherit; width: 100%; }
.tf-cr-note { font-size: 11.5px; color: var(--tf-dim); text-align: center; }
.tf-cr-tabs { display: flex; border-bottom: 0.5px solid var(--tf-line); padding: 0 20px; flex-shrink: 0; }
.tf-cr-tab { padding: 10px 14px; font-size: 14px; color: var(--tf-dim); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; }
.tf-cr-tab.on { color: var(--tf-gold); font-weight: 700; border-bottom-color: var(--tf-gold); }
.tf-cr-body { flex: 1 1 0%; display: flex; flex-direction: column; gap: 12px; padding: 14px 20px; overflow-y: auto; }
.tf-moment { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--tf-panel); border: 0.5px solid var(--tf-line); border-radius: 14px; }
.tf-moment.locked { border-color: var(--tf-gold); }
.tf-moment-head { display: flex; align-items: center; gap: 8px; }
.tf-moment-av { width: 30px; height: 30px; border-radius: 50%; background: var(--tf-line); display: flex; align-items: center; justify-content: center; color: var(--tf-gold); font-size: 13px; font-weight: 700; }
.tf-moment-when { font-size: 12px; color: var(--tf-dim); }
.tf-moment-txt { font-size: 14.5px; line-height: 1.55; }
.tf-moment-txt.dim { color: var(--tf-dim); }
.tf-moment-foot { display: flex; gap: 14px; align-items: center; }
.tf-lock-head { display: flex; align-items: center; justify-content: space-between; }
.tf-lock-tag { font-size: 12px; font-weight: 700; color: var(--tf-gold); }

/* ── 자막 설정 패널 (Subtitle 시안) ── */
.tf-subpanel { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; overflow-y: auto; }
.tf-subpanel-t { font-size: 13px; font-weight: 700; color: var(--tf-dim); }
.tf-langrow { display: flex; gap: 8px; flex-wrap: wrap; }
.tf-langbtn { padding: 9px 16px; border-radius: 999px; background: var(--tf-panel); color: var(--tf-text); font-size: 14px; border: 0.5px solid var(--tf-line); cursor: pointer; font-family: inherit; }
.tf-langbtn.on { background: var(--tf-gold); color: var(--tf-bg); font-weight: 800; border-color: transparent; }
.tf-stylecard { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--tf-panel); border: 0.5px solid var(--tf-line); border-radius: 14px; }
.tf-stylecard-t { font-size: 12px; font-weight: 700; color: var(--tf-gold); }
.tf-styrow { display: flex; gap: 10px; align-items: center; }
.tf-styk { font-size: 12px; color: var(--tf-dim); width: 56px; flex-shrink: 0; }
.tf-bar { flex: 1 1 0%; height: 3px; background: var(--tf-line); border-radius: 2px; }
.tf-bar-fill { height: 100%; background: var(--tf-gold); border-radius: 2px; }
.tf-styv { font-size: 12px; color: var(--tf-text); font-weight: 700; }
.tf-pos { display: flex; gap: 6px; }
.tf-posbtn { padding: 5px 12px; border-radius: 8px; background: var(--tf-line); color: var(--tf-dim); font-size: 12px; border: none; cursor: pointer; font-family: inherit; }
.tf-posbtn.on { background: var(--tf-gold); color: var(--tf-bg); font-weight: 700; }
.tf-note { font-size: 11.5px; color: var(--tf-dim); line-height: 1.6; }
.tf-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tf-progress .tf-bar { background: rgba(255,255,255,0.25); }
.tf-time { font-size: 11px; color: rgba(255,255,255,0.7); }
.tf-view-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; flex-shrink: 0; }
.tf-view-title { font-size: 17px; font-weight: 700; }
.tf-empty { padding: 40px 20px; text-align: center; color: var(--tf-dim); font-size: 13.5px; line-height: 1.7; }