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

.tf {
  /* T-A피드: warm kraft + 코랄 팔레트(사용자규칙, 티옴타 UI 표준).
     예외 2건만 다크 유지 — --tf-stage-*(영상 무대 배경)·--tf-ink(영상 위 큰자막 흰 글씨):
     어두운 영상 위 흰 글씨 오버레이는 가독성 위해 유지한다(명문화). 그 외 전부 웜 크래프트. */
  --tf-bg:      #FBF7EE;
  --tf-panel:   #F4EFE2;
  --tf-line:    #E3D8C3;
  --tf-text:    #2B2018;
  --tf-dim:     #8A7B65;
  --tf-gold:    #B58A4A;
  --tf-gold2:   #9C7239;
  --tf-coral:   #B5524A;
  --tf-green:   #4E8C5A;
  --tf-violet:  #6E6A8C;
  --tf-stage-a: #2a2620;   /* 오버레이 예외: 영상 무대 배경(가독성) */
  --tf-stage-b: #17140f;   /* 오버레이 예외: 영상 무대 배경(가독성) */
  --tf-ink:     #ffffff;   /* 오버레이 예외: 영상 위 큰자막 흰 글씨(가독성) */
  --tf-brown:   #E4D2AC;
  --tf-on-accent: #ffffff; /* 골드/코랄 채움 버튼 위 글씨 — 배경 밝기와 무관하게 항상 밝게 */

  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-on-accent); 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(181,138,74,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-on-accent); 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-on-accent); 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-on-accent); 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-on-accent); 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-on-accent); 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; }

/* ── R5: 상세보기 · 더보기 (토큰만 사용, 색 하드코딩 금지) ── */
.tf-more-link { margin: 0 16px 12px; padding: 7px 12px; border-radius: 10px; background: transparent; border: 0.5px solid var(--tf-line); color: var(--tf-gold); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.tf-morebtn { display: block; width: calc(100% - 32px); margin: 4px 16px 28px; padding: 12px; border-radius: 12px; background: var(--tf-panel); border: 0.5px solid var(--tf-line); color: var(--tf-text); font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.tf-morebtn:disabled { opacity: .55; cursor: default; }
.tf-detail { flex: 1; overflow-y: auto; padding: 4px 16px 24px; }
.tf-detail-t { font-size: 19px; font-weight: 800; line-height: 1.4; color: var(--tf-text); }
.tf-detail-meta { margin-top: 6px; font-size: 12px; color: var(--tf-dim); }
.tf-detail-b { margin-top: 16px; font-size: 14.5px; line-height: 1.75; color: var(--tf-text); white-space: normal; word-break: break-word; }

/* ── T-A2: 피드 혼합 상품 카드 (ProductCard.dc.html 팔레트 이식) ──
   데이터 색(hue/hue2)은 --ch1/--ch2 인라인 변수로만 주입 — 이 파일은 var()만 참조, hex 하드코딩 0. */
.tf-card { display: flex; flex-direction: column; border-bottom: 0.5px solid var(--tf-line); background: var(--tf-bg); cursor: pointer; }
.tf-card-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
.tf-card-brand { font-size: 13px; font-weight: 700; color: var(--tf-text); }
.tf-card-sponsor { padding: 2px 8px; border-radius: 999px; background: rgba(181,138,74,0.15); border: 0.5px solid var(--ch1, var(--tf-gold)); color: var(--ch1, var(--tf-gold)); font-size: 10px; font-weight: 800; }
.tf-card-stage { position: relative; min-height: 220px; background: linear-gradient(150deg, var(--ch1, var(--tf-stage-a)), var(--ch2, var(--tf-stage-b))); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.tf-card-cat { position: absolute; top: 14px; left: 16px; padding: 4px 10px; border-radius: 999px; background: rgba(27,25,22,0.55); color: var(--tf-text); font-size: 10.5px; }
.tf-card-round { position: absolute; top: 14px; right: 16px; padding: 4px 10px; border-radius: 999px; background: rgba(27,25,22,0.7); border: 0.5px solid var(--ch1, var(--tf-gold)); color: var(--tf-ink); font-size: 10.5px; font-weight: 700; }
.tf-card-txt { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 6px; }
.tf-card-title { font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--tf-ink); text-shadow: 0 2px 10px rgba(0,0,0,0.5); white-space: pre-line; }
.tf-card-sub { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.5; }
.tf-card-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 6px; gap: 10px; }
.tf-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.tf-card-badge { padding: 3px 8px; border-radius: 6px; background: var(--tf-panel); border: 0.5px solid var(--tf-line); color: var(--tf-dim); font-size: 10.5px; }
.tf-card-cta { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--ch1, var(--tf-gold)); color: var(--tf-on-accent); font-size: 12.5px; font-weight: 800; white-space: nowrap; }

/* ── 다크 파리티 (테마 엔진 data-theme=dark) — 오버레이 예외(stage/ink/on-accent)는 유지 ── */
:root[data-theme="dark"] {
  --tf-bg:      #211711;
  --tf-panel:   #2A1F17;
  --tf-line:    rgba(244,236,224,0.12);
  --tf-text:    #F4ECE0;
  --tf-dim:     #B79E86;
  --tf-gold:    #C6A264;
  --tf-gold2:   #D8BE86;
  --tf-coral:   #C56A62;
  --tf-green:   #6BA877;
  --tf-violet:  #9A96B4;
  --tf-brown:   #4C3829;
}

/* 크라우니 뉴스 카드 — 토큰만 사용(하드코딩 색 없음) */
.tf-news { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-bottom: 0.5px solid var(--tf-line); background: var(--tf-panel); }
.tf-news-head { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--tf-dim); }
.tf-news-sec { padding: 2px 9px; border-radius: 999px; background: var(--tf-gold); color: var(--tf-on-accent); font-weight: 800; font-size: 10.5px; }
.tf-news-brand { font-weight: 700; color: var(--tf-text); }
.tf-news-date { margin-left: auto; }
.tf-news-title { font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--tf-text); }
.tf-news-sum { font-size: 13px; line-height: 1.55; color: var(--tf-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tf-news-hook { font-size: 12.5px; font-weight: 600; color: var(--tf-gold2); border-left: 2px solid var(--tf-gold); padding-left: 8px; }
.tf-news-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tf-news-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tf-news-tag { padding: 2px 8px; border-radius: 6px; background: var(--tf-bg); border: 0.5px solid var(--tf-line); color: var(--tf-dim); font-size: 10.5px; }
.tf-news-go { padding: 7px 13px; border-radius: 999px; border: 0.5px solid var(--tf-gold); color: var(--tf-gold2); font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }