/* ════════════════════════════════════════════════════════════════
   home-toss.css — 홈 Toss(TDS) 프리뷰 전면 재설계 스킨
   근거: Toss DESIGN.md (verified 2026-07-11)

   게이팅: 전 규칙이 html[data-home-skin="toss"] 로 시작 → ?home=toss 때만 매칭.
   구조: home-toss.js 가 플래그 시 기존 훅 노드(#home-report-bar/#home-hero/
   React island/.home-tiles/#kr-flow)를 .tsx-root Toss "답먼저" 구조로 재배치.
   데이터 바인딩·island 은 노드 이동만(불변).

   Toss 토큰: primary #ff6f0f / weak var(--tk-tint)·#ff6f0f / canvas #fff / fg var(--tk-fg)
   / body var(--tk-body) / muted var(--tk-sub) / surface var(--tk-surface) / border var(--tk-border).
   TDS 버튼 radius 16. spacing 4·8·16·24·32. flat. 등락 빨강/파랑 유지.
   Toss Product Sans 배포권 없음 → Pretendard 폴백.
   ════════════════════════════════════════════════════════════════ */

/* ── 토큰 override(홈 범위, 전역 오염 없음) ── */
html[data-home-skin="toss"] #home-view {
  --accent: #ff6f0f;
  --accent-soft: var(--tk-tint);
  --card: var(--tk-card);
  --bg: var(--tk-bg);
  --sep: var(--tk-border);
  --fg: var(--tk-fg);
  --text: var(--tk-fg);
  --text-primary: var(--tk-fg);
  --sub: var(--tk-sub);
  --text-secondary: var(--tk-sub);
  background: var(--tk-bg);
}

/* ══ Toss 재배치 루트 ══ */
html[data-home-skin="toss"] .tsx-root {
  padding: 8px 16px 40px;
  background: var(--tk-bg);
  font-feature-settings: "tnum";
}

/* ── 에디토리얼 헤더(신규 챙) ── */

/* ── 섹션 래퍼 + 큰 섹션 타이틀 ── */
html[data-home-skin="toss"] .tsx-sec { margin-top: 32px; }
html[data-home-skin="toss"] .tsx-sec-h {
  display: flex; align-items: center; gap: 8px; margin: 0 4px 12px;
}
html[data-home-skin="toss"] .tsx-sec-t {
  font-size: 24px; font-weight: 700; color: var(--tk-fg); letter-spacing: -0.5px;
}

/* ══ 답먼저: AI 종합판단 = 확대 히어로(weak-blue 카드) ══ */
html[data-home-skin="toss"] .tsx-answer { margin-top: 16px; }
html[data-home-skin="toss"] .tsx-answer .report-card {
  width: 100%;
  margin: 0;
  background: var(--tk-tint);
  border: 1px solid var(--tk-tint-bd);
  border-radius: 20px;
  box-shadow: none;
  color: var(--tk-fg);
  padding: 24px 22px 20px;
  /* 목업식 답먼저 — 문장(근거)을 히어로로 앞세움 */
  display: flex; flex-direction: column;
}
html[data-home-skin="toss"] .tsx-answer .rc-top   { order: 1; }
html[data-home-skin="toss"] .tsx-answer .rc-desc  { order: 2; -webkit-line-clamp: 3; }
html[data-home-skin="toss"] .tsx-answer .rc-score { order: 3; }
html[data-home-skin="toss"] .tsx-answer .rc-bar   { order: 4; }
html[data-home-skin="toss"] .tsx-answer .rc-cta   { order: 5; }
/* 리드 문장 크게, 점수는 보조로 */
html[data-home-skin="toss"] .tsx-answer .rc-desc {
  font-size: 22px; font-weight: 700; color: var(--tk-fg); line-height: 1.4;
  margin: 12px 0 16px;
}
html[data-home-skin="toss"] .tsx-answer .rc-score .n { font-size: 34px; }
html[data-home-skin="toss"] .report-card { box-shadow: none; }
html[data-home-skin="toss"] .rc-eyebrow { color: #ff6f0f; font-size: 13px; }
html[data-home-skin="toss"] .rc-title   { color: var(--tk-fg); font-size: 21px; }
html[data-home-skin="toss"] .rc-score .n   { color: #ff6f0f; }
html[data-home-skin="toss"] .rc-score .pct { color: #ff6f0f; }
html[data-home-skin="toss"] .rc-score .lab { color: var(--tk-body); }
html[data-home-skin="toss"] .rc-bar   { background: var(--tk-tint-bd); }
html[data-home-skin="toss"] .rc-bar i { background: #ff6f0f; }
html[data-home-skin="toss"] .rc-desc  { color: var(--tk-body); font-size: 14.5px; }
/* CTA = TDS fill primary */
html[data-home-skin="toss"] .rc-cta {
  background: #ff6f0f; color: #fff; border-radius: 20px;
  padding: 16px; font-size: 15px; font-weight: 600;
}

/* ══ 지수 히어로 = 큰 숫자 위계 ══ */
html[data-home-skin="toss"] .home-hero { background: var(--tk-card); margin: 0; }
html[data-home-skin="toss"] .hh-index { border-bottom-color: var(--tk-border); }
html[data-home-skin="toss"] .hh-pair .hh-index:first-child { border-right-color: var(--tk-border); }
html[data-home-skin="toss"] .hh-nm { color: var(--tk-sub); }
html[data-home-skin="toss"] .hh-px { color: var(--tk-fg); font-size: 32px; }
html[data-home-skin="toss"] .hh-pair .hh-px { font-size: 27px; }
html[data-home-skin="toss"] .hh-metrics .k { color: var(--tk-sub); }
html[data-home-skin="toss"] .hh-metrics .v { color: var(--tk-fg); }
html[data-home-skin="toss"] .hh-mini3,
html[data-home-skin="toss"] .hh-flow2 { border-top-color: var(--tk-border); }

/* ══ 근거(뉴스 한줄 + analyst) — flat ══ */
html[data-home-skin="toss"] #home-news-oneliner,
html[data-home-skin="toss"] #home-analyst {
  background: var(--tk-surface); border: 1px solid var(--tk-border); border-radius: 20px;
}

/* ══ 더 알아보기: 타일 → 세로 단일 컬럼 flat 흰행 ══ */
html[data-home-skin="toss"] .home-tiles {
  display: flex; flex-direction: column; gap: 8px; margin: 0;
}
html[data-home-skin="toss"] .home-tile {
  flex-direction: row; align-items: center; gap: 12px;
  min-height: 0; padding: 16px;
  background: var(--tk-card); border: 1px solid var(--tk-border); border-radius: 20px;
}
html[data-home-skin="toss"] .home-tile:not(:disabled):hover {
  border-color: #ff6f0f; background: var(--tk-tint);
}
html[data-home-skin="toss"] .home-tile .ht-icon {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tk-tint); border-radius: 12px; color: #ff6f0f;
}
html[data-home-skin="toss"] .home-tile .ht-title { color: var(--tk-fg); font-weight: 600; }
html[data-home-skin="toss"] .home-tile .ht-sub   { color: var(--tk-sub); }
html[data-home-skin="toss"] .home-tile .ht-badge { background: var(--tk-tint); color: #ff6f0f; }

/* ══ island 컨테이너 여백 ══ */
html[data-home-skin="toss"] .tsx-sec [data-react-island] { margin: 0; }

/* ══ 국내 매매동향 — flat 카드 ══ */
html[data-home-skin="toss"] .kr-flow {
  background: var(--tk-card); border: 1px solid var(--tk-border); border-radius: 20px;
  box-shadow: none; margin: 0;
}
html[data-home-skin="toss"] .kr-flow-title { color: var(--tk-fg); }
html[data-home-skin="toss"] .kr-flow-more  { color: #ff6f0f; }

/* ══ 섹션 '더보기' 버튼 ══ */
/* 섹션 액션 = 토스뱅크 docs-outline pill(radius 40, 보더, var(--tk-body)) */
html[data-home-skin="toss"] .tsx-more {
  margin-left: auto; border: 1px solid #d1d6db; background: transparent;
  font-size: 12px; font-weight: 600; color: var(--tk-body); cursor: pointer;
  font-family: inherit; border-radius: 40px; padding: 5px 13px;
}
html[data-home-skin="toss"] .tsx-more:active { background: var(--tk-surface); }

/* ══ 커스텀 렌더 리스트(랭킹·뉴스·섹터·포트폴리오) ══ */
html[data-home-skin="toss"] .tsx-list {
  background: var(--tk-card); border: 1px solid var(--tk-border); border-radius: 20px;
  padding: 4px 16px; overflow: hidden;
}
/* 공통 행 */
html[data-home-skin="toss"] .tsx-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 0; background: transparent; border: 0;
  border-top: 1px solid var(--tk-line); text-align: left; cursor: pointer;
  font-family: inherit;
}
html[data-home-skin="toss"] .tsx-row:first-child { border-top: 0; }
html[data-home-skin="toss"] .tsx-row:active { background: var(--tk-tint); }

/* 뉴스 = 대표 1건 크게 + 나머지 한 줄 리스트 */
html[data-home-skin="toss"] .tsx-nwf {
  display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: transparent; border: 0; padding: 14px 0 16px; border-bottom: 1px solid var(--tk-border);
}
html[data-home-skin="toss"] .tsx-nwf-t {
  font-size: 18px; font-weight: 700; color: var(--tk-fg); line-height: 1.4; letter-spacing: -0.3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-home-skin="toss"] .tsx-nwf-s { font-size: 12px; color: var(--tk-sub); margin-top: 8px; }
html[data-home-skin="toss"] .tsx-nwl {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; background: transparent; border: 0; border-top: 1px solid var(--tk-surface2); padding: 13px 0;
}
html[data-home-skin="toss"] .tsx-nwl:first-of-type { border-top: 0; }
html[data-home-skin="toss"] .tsx-nwl-dot {
  width: 5px; height: 5px; border-radius: 9999px; background: #ff6f0f; flex: none; margin-top: 7px;
}
html[data-home-skin="toss"] .tsx-nwl-t {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--tk-body); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 섹터 모멘텀 = 2열 타일 그리드(랭크 + 이름 + 큰 %) */
html[data-home-skin="toss"] .tsx-secg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html[data-home-skin="toss"] .tsx-sect {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--tk-surface); border: 0; border-radius: 16px; padding: 16px 16px 14px;
}
html[data-home-skin="toss"] .tsx-sect:active { background: var(--tk-border); }
html[data-home-skin="toss"] .tsx-sect-rk {
  position: absolute; top: 12px; right: 14px; font-size: 12px; font-weight: 800; color: #b0b5bd;
}
html[data-home-skin="toss"] .tsx-sect-nm { font-size: 14px; font-weight: 600; color: var(--tk-fg); line-height: 1.35; padding-right: 18px; }
html[data-home-skin="toss"] .tsx-sect-c { font-size: 20px; font-weight: 800; margin-top: 10px; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
/* 포트폴리오 아바타 */
html[data-home-skin="toss"] .tsx-pf-av {
  width: 40px; height: 40px; flex: none; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ff6f0f; color: #fff; font-size: 16px; font-weight: 700;
}
/* 스켈레톤 / 빈 상태 */
html[data-home-skin="toss"] .tsx-skel {
  height: 20px; margin: 16px 0; border-radius: 8px;
  background: linear-gradient(90deg, var(--tk-surface) 25%, #e9edf1 50%, var(--tk-surface) 75%);
  background-size: 200% 100%; animation: tsxShimmer 1.2s infinite;
}
@keyframes tsxShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* 홈 전체 노출 대기판 — 조립된 홈이 완성될 때까지 같은 자리를 지키는 스켈레톤.
   #home-view 는 .tsx-root 만 보여주므로 대기판에도 그 클래스를 함께 준다(home-toss.js gateReveal). */
html[data-home-skin="toss"] .tsx-loadmask { padding-top: 4px; }
html[data-home-skin="toss"] .tsx-loadmask .tsx-skel:nth-child(3n+1) { height: 28px; }
html[data-home-skin="toss"] .tsx-empty { padding: 20px 0; text-align: center; font-size: 13px; color: var(--tk-sub); }

/* ── 면책 ── */
html[data-home-skin="toss"] .tsx-foot {
  margin-top: 28px; font-size: 12px; color: var(--tk-sub);
  text-align: center; line-height: 1.6;
}

/* ── 재배치 완료 후 홈에 남은 숨김 잔여(fav/cats/label)는 그대로 hidden ── */
html[data-home-skin="toss"] #home-view > .fav-section,
html[data-home-skin="toss"] #home-view > .home-section-label,
/* 원래 홈 레이아웃(직계 자식) 을 처음부터 숨김 → 리로드 시 옛 UI 플래시 방지.
   build() 가 필요한 노드를 .tsx-root 로 재배치하면 tsx-root 만 노출된다. */
html[data-home-skin="toss"] #home-view > *:not(.tsx-root) { display: none !important; }

/* ══ pill 필터 칩 행(토스식) ══ */

html[data-home-skin="toss"] .tsx-chip.on { background: #ff6f0f; border-color: #ff6f0f; color: #fff; }

/* ══ AI 종합판단 = 토스식(답 먼저 큰 문장 + surface 스탯 패널 + 텍스트 액션) ══ */
/* 검색바 바로 아래 첫 섹션 — 검색바 자체의 아래 여백(8px)과 겹쳐 벌어져 보였다.
   위 59행에도 같은 선언이 있으나 나중에 오는 이 규칙이 실제로 적용된다. */
html[data-home-skin="toss"] .tsx-answer { margin-top: 6px; }
/* 카드·박스 없이 배경 위에 바로 얹는 히어로(답 먼저). 구분은 여백·타이포만. */
html[data-home-skin="toss"] .tsx-ai {
  background: transparent; border: 0; border-radius: 0; padding: 4px 2px 10px;
  color: var(--tk-fg); cursor: pointer;
}
html[data-home-skin="toss"] .tsx-ai:active { opacity: .7; }
/* 섹션 타이틀 — 다른 섹션(.tsx-sec-t 24/700)과 같은 위계로 강조. */
html[data-home-skin="toss"] .tsx-ai-eb {
  font-size: 24px; font-weight: 700; color: var(--tk-fg); letter-spacing: -0.5px;
}
/* 좌우 2단 — 왼쪽 점수(답), 오른쪽 문장+액션(근거). 오른쪽 여백 없이 폭을 꽉 채움. */
/* 좌우 2단을 풀고 세로로 쌓는다 — 점수를 카드 폭 한가운데 두려면 옆에 문장이 있으면 안 된다.
   2단일 때는 히어로가 제 글자 폭만큼만 차지해, 안을 가운데로 맞춰도 카드 왼쪽에 갇혔다. */
html[data-home-skin="toss"] .tsx-ai-split {
  display: flex; flex-direction: column; align-items: stretch; gap: 16px;
  margin-top: 12px; width: 100%;
}
html[data-home-skin="toss"] .tsx-ai-right {
  min-width: 0;   /* 문장은 왼쪽에 서야 읽힌다 — 정렬은 그대로 두고 폭만 전부 쓴다 */
}
/* 히어로 — 64px 숫자 왼쪽, 딸린 세 줄(지표명·상태·어제대비) 오른쪽. 그 쌍을 카드 폭
   한가운데 세운다. 아래로 쌓으면 숫자 밑이 세 줄이나 길어져 카드가 세로로 늘어졌다.
   숫자는 두 열 중 왼쪽에서 세 줄 전체 높이에 걸쳐 가운데 선다.
   어제대비 줄은 값이 없으면 아예 안 그려진다 — grid-auto-rows: min-content 라
   남는 행이 0 높이가 되어 두 줄만 있어도 어긋나지 않는다. */
html[data-home-skin="toss"] .tsx-ai-hero {
  /* 왼쪽 정렬 — 카드의 다른 글(헤드라인·요약)이 전부 왼쪽에서 시작하는데 이 블록만
     가운데 서 있어 눈이 한 번 옆으로 갔다 돌아와야 했다(2026-09-01). 오른쪽 칸은
     1fr 로 남은 폭을 다 받아 문구가 길어져도 줄이 자연스럽게 넘어간다. */
  display: grid; grid-template-columns: auto 1fr; grid-auto-rows: min-content;
  justify-content: start; column-gap: 14px; row-gap: 0;
  margin: 0; width: 100%; text-align: left;
  /* 물통 — 수면은 이 상자 안에서만 논다. isolation 으로 z-index:-1 이 카드 배경을
     뚫고 내려가지 않게 가둔다(안 가두면 흰 카드 뒤로 숨어 안 보인다). */
  position: relative; isolation: isolate; overflow: hidden;
  padding: 20px 16px; border-radius: 16px; background: var(--tk-inset, #f7f8fa);
}

/* ── 수면 ─────────────────────────────────────────────────────────────
   높이 = 점수(JS 가 % 로 넣는다). 파형 세 겹의 주기가 서로 안 맞아 같은 그림이
   반복되지 않고, 움직이는 것은 전부 transform 이라 매 프레임 레이아웃을 다시 재지 않는다. */
/* 상태별 물색.
   글자에 쓰는 빨강(#eb445a)을 물에 그대로 깔면 같은 투명도에서도 파랑보다 훨씬 무겁게
   앉아 화면이 붉게 잠긴다(2026-09-01 '피바다' 지적). 색조를 옅은 로즈로 낮추고,
   투명도까지 --k 로 한 번 더 눌러 파랑과 눈에 보이는 무게를 맞춘다. */
html[data-home-skin="toss"] .tsx-sea-up  { --w: 244,150,158; --k: .62; }
html[data-home-skin="toss"] .tsx-sea-dn  { --w: 59,130,246;  --k: 1; }
html[data-home-skin="toss"] .tsx-sea-mid { --w: 126,146,168; --k: 1; }

html[data-home-skin="toss"] .tsx-sea {
  position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; pointer-events: none;
  animation: tsxSwell 6.5s ease-in-out infinite;   /* 너울 — 수면이 통째로 오르내린다 */
}
@keyframes tsxSwell { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-3px); } }
html[data-home-skin="toss"] .tsx-sea-l { position: absolute; inset: 0; overflow: hidden; }
html[data-home-skin="toss"] .tsx-sea svg {
  position: absolute; left: 0; top: 0; width: 200%; height: 28px; display: block;
  color: rgb(var(--w));            /* 파형은 currentColor 로 이 색을 받는다 */
}
/* 겹마다 투명도만 다르다(뒤에서 앞으로 진해진다). --k 는 색별 무게 보정. */
html[data-home-skin="toss"] .tsx-sea-p1 { fill-opacity: calc(.13 * var(--k)); }
html[data-home-skin="toss"] .tsx-sea-p2 { fill-opacity: calc(.23 * var(--k)); }
html[data-home-skin="toss"] .tsx-sea-p3 { fill-opacity: calc(.30 * var(--k)); }
/* 가로 2배 파형을 절반만큼 밀면 이음매 없이 순환한다. */
@keyframes tsxFlow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[data-home-skin="toss"] .tsx-w-a { animation: tsxFlow 9s linear infinite; }
html[data-home-skin="toss"] .tsx-w-b { animation: tsxFlow 13s linear infinite reverse; }
html[data-home-skin="toss"] .tsx-w-c { animation: tsxFlow 6.5s linear infinite; }
/* 물 속 — 아래로 갈수록 진해야 고인 물로 보인다(단색이면 회색 띠로 읽힌다). */
html[data-home-skin="toss"] .tsx-sea-body {
  position: absolute; left: 0; right: 0; bottom: 0; top: 18px;
  background: linear-gradient(180deg,
    rgba(var(--w), calc(.10 * var(--k))), rgba(var(--w), calc(.26 * var(--k))));
}
/* 물빛 줄무늬 — 빛이 굴절돼 생기는 무늬. 좌우로 아주 조금만 흔들린다. */
html[data-home-skin="toss"] .tsx-sea-cau { position: absolute; left: 0; right: 0; top: 18px; bottom: 0; overflow: hidden; }
html[data-home-skin="toss"] .tsx-sea-cau i {
  position: absolute; left: -30%; width: 160%; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  filter: blur(2px);
}
html[data-home-skin="toss"] .tsx-sea-cau i:nth-child(1) { top: 22%; animation: tsxCau 8s ease-in-out infinite; }
html[data-home-skin="toss"] .tsx-sea-cau i:nth-child(2) { top: 52%; animation: tsxCau 11s ease-in-out infinite reverse; }
html[data-home-skin="toss"] .tsx-sea-cau i:nth-child(3) { top: 76%; animation: tsxCau 14s ease-in-out infinite; }
@keyframes tsxCau { 0%, 100% { transform: translateX(-14%); } 50% { transform: translateX(14%); } }
/* 기포 — 바닥에서 수면으로. 셋이면 충분하다(많으면 카드가 분주해진다). */
html[data-home-skin="toss"] .tsx-sea-bub { position: absolute; left: 0; right: 0; top: 18px; bottom: 0; overflow: hidden; }
html[data-home-skin="toss"] .tsx-sea-bub i {
  position: absolute; bottom: -8px; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.55); opacity: 0;
}
html[data-home-skin="toss"] .tsx-sea-bub i:nth-child(1) { left: 18%; animation: tsxRise 7s ease-in 1s infinite; }
html[data-home-skin="toss"] .tsx-sea-bub i:nth-child(2) { left: 46%; width: 4px; height: 4px; animation: tsxRise 9s ease-in 3.5s infinite; }
html[data-home-skin="toss"] .tsx-sea-bub i:nth-child(3) { left: 74%; width: 6px; height: 6px; animation: tsxRise 8s ease-in 5.5s infinite; }
@keyframes tsxRise {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: .9; }
  70% { opacity: .55; }
  100% { opacity: 0; transform: translateY(-104px) translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-home-skin="toss"] .tsx-sea,
  html[data-home-skin="toss"] .tsx-w-a,
  html[data-home-skin="toss"] .tsx-w-b,
  html[data-home-skin="toss"] .tsx-w-c,
  html[data-home-skin="toss"] .tsx-sea-cau i { animation: none; }
  html[data-home-skin="toss"] .tsx-sea-bub { display: none; }
}
html[data-home-skin="toss"] .tsx-ai-num {
  grid-column: 1; grid-row: 1 / span 3; align-self: center;
  font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
/* 첫 줄 = 상태(중립·상승 우세·하락 우세). 카드 제목이 이미 지표명을 말하므로
   이 자리는 답이 차지한다(2026-09-01 리뉴얼). */
html[data-home-skin="toss"] .tsx-ai-cap { grid-column: 2; font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
/* 둘째 줄 = 그 상태의 뜻풀이. 숫자를 안 읽어도 답이 되게. */
html[data-home-skin="toss"] .tsx-ai-state { grid-column: 2; font-size: 12px; font-weight: 500; color: var(--tk-body, #4e5968); margin-top: 4px; line-height: 1.45; }
/* 어제 같은 시간대 대비 점수 변화 — 상태 라벨 바로 아래, 한 단계 작은 보조 정보. 색은 JS 가 지정. */
html[data-home-skin="toss"] .tsx-ai-delta { grid-column: 2; font-size: 11px; font-weight: 700; margin-top: 2px; letter-spacing: -0.01em; }
/* 판단 문장 — 우측단 헤드라인. */
html[data-home-skin="toss"] .tsx-ai-lead {
  font-size: 20px; font-weight: 700; color: var(--tk-fg); line-height: 1.34; letter-spacing: -0.5px;
  margin: 0 0 6px; word-break: keep-all;       /* 한국어 어절 단위 줄바꿈 */
  /* 3줄 제한 — 생성 프롬프트는 40자 이내를 지시하지만 LLM 이 지키지 않아 70자짜리가
     내려와 카드가 6줄로 늘어난 적이 있다(2026-08-09). 아래 요약(.tsx-ai-sum)이 2줄이라
     그보다 한 줄 더 주는 선에서 끊고, 전문은 '리포트 자세히'가 받는다. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* 종합 판단 요약 — 헤드라인이 짧을 때 남는 우측 공간을 채우는 본문(2줄까지). */
html[data-home-skin="toss"] .tsx-ai-sum {
  font-size: 13px; font-weight: 500; color: var(--tk-sub); line-height: 1.5; letter-spacing: -0.2px;
  margin: 0 0 10px; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 점수 밴드 pill(단기/중장기) — 앞세움 */

html[data-home-skin="toss"] .tsx-ai-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 9999px; padding: 6px 11px;
}
html[data-home-skin="toss"] .tsx-ai-pill-l { font-style: normal; font-size: 11px; font-weight: 600; color: var(--tk-sub); }
html[data-home-skin="toss"] .tsx-ai-pill-b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* 텍스트 액션 */
html[data-home-skin="toss"] .tsx-ai-link { font-size: 14px; font-weight: 600; color: #ff6f0f; }

/* ══ fresh 지수 = 가로 스크롤 스트립(divergent) ══ */
html[data-home-skin="toss"] .tsx-idx-grid {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
html[data-home-skin="toss"] .tsx-idx-grid::-webkit-scrollbar { display: none; }
html[data-home-skin="toss"] .tsx-idx { cursor: pointer;
  flex: 1 0 150px; border: 1px solid var(--tk-border); border-radius: 20px; padding: 16px;
}
html[data-home-skin="toss"] .tsx-idx-nm { font-size: 13px; font-weight: 600; color: var(--tk-sub); }
html[data-home-skin="toss"] .tsx-idx-px {
  font-size: 24px; font-weight: 700; color: var(--tk-fg); letter-spacing: -0.6px;
  margin-top: 6px; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-home-skin="toss"] .tsx-idx-ch { font-size: 13px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
/* 지수 세션 태그(프리장/넥스트장) */
html[data-home-skin="toss"] .tsx-idx-sess { font-size: 11px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* 보조 지표 칩 스트립 */
html[data-home-skin="toss"] .tsx-metric-strip {
  display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none;
}
html[data-home-skin="toss"] .tsx-metric-strip::-webkit-scrollbar { display: none; }
html[data-home-skin="toss"] .tsx-metric {
  flex: 1; min-width: 92px; background: var(--tk-tint); border: 1px solid var(--tk-tint);
  border-radius: 12px; padding: 12px; text-align: center;
}
html[data-home-skin="toss"] .tsx-metric-k { font-size: 11px; font-weight: 600; color: var(--tk-sub); }
html[data-home-skin="toss"] .tsx-metric-v { font-size: 15px; font-weight: 700; color: var(--tk-fg); margin-top: 4px; }

/* ════════ 추가 리뉴얼(이전 잔상 제거) ════════ */
/* 헤더 더 크게 */

html[data-home-skin="toss"] .tsx-sec { margin-top: 36px; }

/* 답먼저 히어로 카드 더 강하게 */
html[data-home-skin="toss"] .tsx-answer .report-card { padding: 28px 24px 22px; border-radius: 24px; }
html[data-home-skin="toss"] .rc-score .n { font-size: 52px; }

/* 지수 히어로 = 흰 카드 안 셀 그리드(큰 숫자) */
html[data-home-skin="toss"] #home-view .home-hero {
  border: 1px solid var(--tk-border); border-radius: 20px; overflow: hidden;
}
html[data-home-skin="toss"] .hh-nm { font-size: 13px; }
/* 지수 카드(min-width 130px 스크롤러) — 숫자 잘림 방지: 카드폭 넓히고 숫자 카드폭에 맞춤 */
html[data-home-skin="toss"] .hh-pair .hh-index,
html[data-home-skin="toss"] .hh-pair-4 .hh-index { min-width: 150px; border-color: var(--tk-border); }
html[data-home-skin="toss"] .hh-pair .hh-px,
html[data-home-skin="toss"] .hh-pair-4 .hh-px { font-size: 20px; letter-spacing: -0.5px; }
/* 단일 지수(카드 아님)는 크게 */
html[data-home-skin="toss"] .home-hero > .hh-index .hh-px { font-size: 30px; }
html[data-home-skin="toss"] .hh-metrics {
  background: var(--tk-tint); border-top: 1px solid var(--tk-border); padding: 16px 8px;
}
html[data-home-skin="toss"] .hh-metrics .v { font-size: 17px; }

/* 근거 카드 여백 */
html[data-home-skin="toss"] #home-news-oneliner,
html[data-home-skin="toss"] #home-analyst { padding: 16px; }

/* 타일 = Toss chevron 행(우측 화살표) */
html[data-home-skin="toss"] .home-tile { position: relative; padding-right: 40px; }
html[data-home-skin="toss"] .home-tile::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid #c4ccd4; border-top: 2px solid #c4ccd4;
  transform: translateY(-50%) rotate(45deg);
}
html[data-home-skin="toss"] .home-tile .ht-badge {
  position: static; margin-left: 6px; padding: 2px 8px; border-radius: 9999px; font-size: 10px;
}

/* ════════ 전역 챙(상단 네비·region 토글·하단 탭바) Toss 화 ════════
   #home-view 밖이지만 플래그는 <html data-home-skin> 이라 스코프됨. 오렌지 accent → 브랜드 블루. */
/* 탭바 활성 표시는 아래 하단탭바 블록에서 색으로만 처리한다(밑줄 규칙 제거 —
   하단 고정 바에서는 밑줄이 화면 밖으로 잘리고, 레퍼런스 iOS 탭바에도 선이 없다). */
/* region 토글 = 토스 세그먼트 컨트롤(뉴트럴 surface + 흰 활성 pill + 다크 텍스트) */
html[data-home-skin="toss"] .region-seg { background: var(--tk-surface); border-radius: 9999px; }
html[data-home-skin="toss"] .region-seg-ind { background: var(--tk-card); border-radius: 9999px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
html[data-home-skin="toss"] .region-seg-opt { color: var(--tk-sub); font-weight: 700; }
html[data-home-skin="toss"] .region-seg.region-mode-us .region-opt-us,
html[data-home-skin="toss"] .region-seg.region-mode-kr .region-opt-kr { color: var(--tk-fg); }

/* ════════ 오늘의 마켓 = 세그 토글 + 풀폭 단일 리스트(여유) ════════ */
html[data-home-skin="toss"] .tsx-mk {
  background: var(--tk-card); border: 1px solid var(--tk-border); border-radius: 20px; padding: 8px 16px 6px;
}
/* 세그 토글(시총 상위 / 거래대금) */
html[data-home-skin="toss"] .tsx-mk-seg { display: flex; gap: 6px; padding: 8px 0 4px; }
html[data-home-skin="toss"] .tsx-mk-tab {
  border: 0; background: transparent; font-family: inherit; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--tk-sub); padding: 7px 14px; border-radius: 9999px;
}
html[data-home-skin="toss"] .tsx-mk-tab.on { background: var(--tk-tint); color: #ff6f0f; }
/* 관심종목 게이팅 카드(미로그인/빈목록) */
html[data-home-skin="toss"] .tsx-wl-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 28px 16px; text-align: center;
}
html[data-home-skin="toss"] .tsx-wl-msg { font-size: 14px; font-weight: 600; color: var(--tk-sub); }
html[data-home-skin="toss"] .tsx-wl-btn {
  border: 0; background: #ff6f0f; color: #fff; font-size: 14px; font-weight: 700;
  border-radius: 12px; padding: 11px 22px; cursor: pointer; font-family: inherit;
}
/* 풀폭 여유 행 */
html[data-home-skin="toss"] .tsx-mk-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 2px; background: transparent; border: 0; border-top: 1px solid var(--tk-line);
  cursor: pointer; font-family: inherit; text-align: left;
}
html[data-home-skin="toss"] .tsx-mk-row:first-child { border-top: 0; }
html[data-home-skin="toss"] .tsx-mk-row:active { background: var(--tk-surface); }
html[data-home-skin="toss"] .tsx-mk-logo {
  width: 38px; height: 38px; border-radius: 9999px; flex: none; object-fit: contain; background: #fff;
}
html[data-home-skin="toss"] .tsx-mk-logo-ph {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tk-surface); color: var(--tk-sub); font-size: 15px; font-weight: 800;
}
html[data-home-skin="toss"] .tsx-mk-bd { flex: 1; min-width: 0; }
html[data-home-skin="toss"] .tsx-mk-nmrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
html[data-home-skin="toss"] .tsx-mk-nm {
  font-size: 16px; font-weight: 600; color: var(--tk-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 세션 태그(프리장/넥스트장) */
html[data-home-skin="toss"] .tsx-mk-sess {
  flex: none; font-size: 10px; font-weight: 800; color: #ff6f0f;
  background: var(--tk-tint); border-radius: 9999px; padding: 2px 7px;
}
html[data-home-skin="toss"] .tsx-mk-px { font-size: 13px; color: var(--tk-sub); font-variant-numeric: tabular-nums; margin-top: 3px; }
/* 세션(프리/넥) 가격 보조줄 */
html[data-home-skin="toss"] .tsx-mk-sesspx { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
/* 우측 등락 세로(정규 위 · 세션 아래) */
html[data-home-skin="toss"] .tsx-mk-cwrap { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
html[data-home-skin="toss"] .tsx-mk-c { flex: none; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-home-skin="toss"] .tsx-mk-sessc { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* 타일 = 가로 스크롤 카드 */
html[data-home-skin="toss"] .home-tiles.tsx-hscroll {
  flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 10px; padding-bottom: 2px;
}
html[data-home-skin="toss"] .home-tiles.tsx-hscroll::-webkit-scrollbar { display: none; }
html[data-home-skin="toss"] .home-tiles.tsx-hscroll .home-tile {
  flex: none; width: 150px; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px;
}
html[data-home-skin="toss"] .home-tiles.tsx-hscroll .home-tile::after { display: none; }

/* 포트폴리오 = 가로 스크롤 아바타 카드 */
/* 분석 = 7지표 가로 스크롤 칩(지표명 + 값). 브리핑 설명 없음 */
html[data-home-skin="toss"] .tsx-av-track {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
html[data-home-skin="toss"] .tsx-av-track::-webkit-scrollbar { display: none; }
html[data-home-skin="toss"] .tsx-av-chip {
  flex: none; min-width: 108px; background: var(--tk-card); border: 1px solid var(--tk-border);
  border-radius: 14px; padding: 12px 14px; text-align: left; cursor: pointer; font-family: inherit;
}
html[data-home-skin="toss"] .tsx-av-k { font-size: 11px; font-weight: 700; color: var(--tk-sub); margin-bottom: 4px; }
html[data-home-skin="toss"] .tsx-av-v { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
html[data-home-skin="toss"] .tsx-pf-scroll {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
html[data-home-skin="toss"] .tsx-pf-scroll::-webkit-scrollbar { display: none; }
html[data-home-skin="toss"] .tsx-pf-card {
  flex: none; width: 120px; background: var(--tk-card); border: 1px solid var(--tk-border); border-radius: 20px;
  padding: 16px 12px; text-align: center; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
html[data-home-skin="toss"] .tsx-pf-card .tsx-pf-av {
  width: 48px; height: 48px; border-radius: 9999px; background: #ff6f0f; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
}
/* 실사진 아바타 = 원형 크롭 */
html[data-home-skin="toss"] .tsx-pf-card img.tsx-pf-av {
  object-fit: cover; background: var(--tk-surface);
}
html[data-home-skin="toss"] .tsx-pf-nm { font-size: 14px; font-weight: 600; color: var(--tk-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
html[data-home-skin="toss"] .tsx-pf-sub { font-size: 12px; color: var(--tk-sub); }

/* ════════ 하단 탭바(nav4) 레이아웃 → 토스 텍스트 탭 ════════
   아이콘 없는 텍스트 탭 결은 유지하되, 바가 화면 하단 고정이라 정렬·표시선 방향만 맞춘다. */
/* 6개 짧은 항목이라 스크롤 불필요 → overflow 제거(세로 클립 원천 차단), 자연 높이. */
html[data-home-skin="toss"] .nav4 {
  /* 탭을 균등 분할해 아이콘이 가로 중앙에 오게 한다. */
  justify-content: space-between; gap: 2px;
  /* 떠 있는 알약형 — 안쪽은 6px 균일, 바깥 여백은 margin 이 맡는다(안전영역 포함). */
  padding: 6px;
  align-items: stretch;
}
html[data-home-skin="toss"] .nav4 .n4-tab {
  /* 아이콘 위 · 라벨 아래 세로 스택, 탭마다 동일 너비. */
  flex: 1; gap: 3px;
  flex-direction: column; align-items: center; justify-content: center;
  /* 탭 자체가 알약 — 선택 시 아이콘·라벨이 한 덩어리로 감싸인다. */
  padding: 8px 0 7px; min-height: 52px; border-radius: 999px;
  border-bottom: 0; border-top: 0;
}
/* 아이콘 — 알약 배경은 탭(.n4-tab)이 갖는다. 여기선 크기·색만. */
html[data-home-skin="toss"] .nav4 .n4-ic { display: block; width: 22px; height: 22px; color: var(--tk-sub);
  background: transparent; }
html[data-home-skin="toss"] .nav4 .n4-tab span { font-size: 10.5px; font-weight: 600; color: var(--tk-sub); line-height: 1.25; }
/* 활성 라벨 = 브랜드 오렌지 + 굵게. */
html[data-home-skin="toss"] .nav4 .n4-tab.on span { color: #ff6f0f; font-weight: 800; }
/* 활성 탭 = 아이콘·라벨을 함께 감싸는 옅은 오렌지 알약. */
html[data-home-skin="toss"] .nav4 .n4-tab.on { background: rgba(255, 111, 15, .14); }
html[data-home-skin="toss"] .nav4 .n4-tab.on .n4-ic { color: #ff6f0f; stroke-width: 2.2; }
/* ⋯더보기도 다른 탭과 같은 폭을 차지해야 5칸이 균등하게 나뉜다. */
html[data-home-skin="toss"] .nav4 .n4-more-wrap { flex: 1; display: flex; align-items: stretch; }

/* ════════ 검색 진입 — 헤더 돋보기 아이콘 하나로 통일 ════════ */
/* 헤더 아래 풀폭 검색 바를 없앴다(같은 동작을 두 곳에 두면서 홈 첫 화면 한 줄을 통째로 썼다).
   그래서 이전에 '중복'이라며 숨겼던 헤더 아이콘을 다시 살린다 — 시장 선택(미국/국내) 왼쪽에 놓인다.
   아이콘 크기·색은 stocks.html 의 .search-btn 규칙이 그대로 맡는다. */
html[data-home-skin="toss"] .app-header .search-btn { display: flex; }

/* ════════ 뉴스 탭 페이지(커스텀, 억제한 newsTab island 대체) ════════ */
html[data-home-skin="toss"] .tsxn-root {
  padding: 8px 4px 16px;
  font-family: "Toss Product Sans", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --tsxn-primary: #ff6f0f;

  --tsxn-weak: #fff5f0;
  --tsxn-weak-fg: #ff6f0f;
  --tsxn-fg: #212124;
  --tsxn-body: #4e5968;
  --tsxn-sub: #868b94;
  --tsxn-surface: #f7f8fa;
  --tsxn-border: #eaebee;
}
html[data-theme="dark"][data-home-skin="toss"] .tsxn-root {
  --tsxn-fg: var(--tk-fg);
  --tsxn-body: var(--tk-body);
  --tsxn-sub: var(--tk-sub);
  --tsxn-surface: var(--tk-surface);
  --tsxn-border: var(--tk-border);
}
html[data-home-skin="toss"] .tsxn-brief {
  background: var(--tk-card);
  border: 1px solid var(--tsxn-border);
  border-radius: 16px;
  padding: 18px;
}
html[data-home-skin="toss"] .tsxn-kicker {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 8px;
  background: var(--tsxn-weak); color: var(--tsxn-weak-fg); font-size: 12px; font-weight: 700;
}
html[data-home-skin="toss"] .tsxn-brief-h {
  font-size: 24px; font-weight: 700; color: var(--tsxn-fg); line-height: 1.38;
  letter-spacing: 0; margin: 16px 0 0; word-break: keep-all; overflow-wrap: anywhere;
}
html[data-home-skin="toss"] .tsxn-brief-sum {
  display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none;
}
html[data-home-skin="toss"] .tsxn-brief-sum li {
  position: relative; padding-left: 14px; font-size: 15px; color: var(--tsxn-body); line-height: 1.55;
}
html[data-home-skin="toss"] .tsxn-brief-sum li::before {
  content: ""; position: absolute; top: .72em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--tsxn-primary);
}
html[data-home-skin="toss"] .tsxn-sent {
  margin-top: 8px; padding: 16px; border-radius: 16px; background: var(--tsxn-surface);
}
html[data-home-skin="toss"] .tsxn-sent-head {
  display: flex; align-items: center; justify-content: space-between; color: var(--tsxn-fg); font-size: 13px; font-weight: 700;
}
html[data-home-skin="toss"] .tsxn-sent-head span:last-child { color: var(--tsxn-sub); font-size: 12px; font-weight: 600; }
html[data-home-skin="toss"] .tsxn-sent-bar {
  display: flex; height: 8px; margin-top: 12px; overflow: hidden; border-radius: 6px; background: var(--tsxn-border);
}
html[data-home-skin="toss"] .tsxn-sent-leg {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; color: var(--tsxn-sub); font-size: 12px; font-weight: 700;
}
html[data-home-skin="toss"] .tsxn-sent-leg .pos { color: #1aa174; }
html[data-home-skin="toss"] .tsxn-sent-leg .neg { color: #fa2314; }
html[data-home-skin="toss"] .tsxn-sent-note { margin-top: 8px; color: var(--tsxn-sub); font-size: 11px; line-height: 1.5; }
html[data-home-skin="toss"] .tsxn-sec-head { margin: 24px 0 8px; }
html[data-home-skin="toss"] .tsxn-sec-lab {
  margin: 0; font-size: 18px; font-weight: 700; color: var(--tsxn-fg); letter-spacing: 0; line-height: 1.35;
}
html[data-home-skin="toss"] .tsxn-sec-sub { margin-top: 4px; color: var(--tsxn-sub); font-size: 13px; line-height: 1.45; }
html[data-home-skin="toss"] .tsxn-top-list { display: grid; gap: 8px; }
html[data-home-skin="toss"] .tsxn-topic {
  position: relative; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px;
  min-height: 0; padding: 14px 0; margin: 0; border: 0; border-bottom: 1px solid var(--tsxn-border);
  background: transparent; border-radius: 0; cursor: pointer;
}
html[data-home-skin="toss"] .tsxn-topic-main {
  grid-template-columns: 32px minmax(0,1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--tsxn-border);
}
html[data-home-skin="toss"] .tsxn-rank {
  position: static; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; background: rgba(25,31,40,.82); color: #fff; font-size: 14px; font-weight: 700;
}
html[data-home-skin="toss"] .tsxn-topic-main .tsxn-rank { background: var(--tsxn-primary); }
html[data-home-skin="toss"] .tsxn-topic-copy { min-width: 0; }
html[data-home-skin="toss"] .tsxn-topic-main .tsxn-topic-copy { padding-top: 0; }
html[data-home-skin="toss"] .tsxn-topic-t {
  font-size: 15px; font-weight: 700; color: var(--tsxn-fg); line-height: 1.42; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-home-skin="toss"] .tsxn-topic-main .tsxn-topic-t { font-size: 16px; -webkit-line-clamp: 2; }
html[data-home-skin="toss"] .tsxn-topic-b {
  font-size: 13px; color: var(--tsxn-body); line-height: 1.5; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-home-skin="toss"] .tsxn-topic-main .tsxn-topic-b { margin-top: 4px; font-size: 13px; }
html[data-home-skin="toss"] .tsxn-topic-m {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 8px;
  background: var(--tsxn-surface); color: var(--tsxn-body); font-size: 12px; font-weight: 700; margin-top: 8px;
}
html[data-home-skin="toss"] .tsxn-srclist { border-top: 1px solid var(--tsxn-border); background: transparent; padding: 0; }
html[data-home-skin="toss"] .tsxn-src {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 0; text-align: left; cursor: pointer;
  font-family: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--tsxn-border); padding: 14px 0;
}
html[data-home-skin="toss"] .tsxn-src:active { opacity: .72; }
html[data-home-skin="toss"] .tsxn-src-bd { flex: 1; min-width: 0; }
html[data-home-skin="toss"] .tsxn-src-t {
  font-size: 15px; font-weight: 700; color: var(--tsxn-fg); line-height: 1.42; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-home-skin="toss"] .tsxn-src-s {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--tsxn-sub); line-height: 1.35; margin-top: 6px;
}
html[data-home-skin="toss"] .tsxn-outlets {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 7px;
  background: var(--tsxn-weak); color: var(--tsxn-weak-fg); font-size: 11px; font-weight: 700;
}
html[data-home-skin="toss"] .tsxn-empty-soft {
  margin-top: 8px; padding: 20px; border-radius: 16px; background: var(--tsxn-surface); color: var(--tsxn-body); font-size: 14px;
}
html[data-home-skin="toss"] .tsxn-skel-brief,
html[data-home-skin="toss"] .tsxn-skel-card {
  margin-top: 8px; padding: 16px; border: 1px solid var(--tsxn-border); border-radius: 16px; background: var(--tk-card);
}
html[data-home-skin="toss"] .tsxn-skel-row {
  display: flex; align-items: center; gap: 10px; min-height: 0; padding: 12px 0; border-bottom: 1px solid var(--tsxn-border);
}
html[data-home-skin="toss"] .tsxn-skeleton {
  display: block; border-radius: 8px; background: linear-gradient(90deg,#eef1f4 0%,#f7f8fa 42%,#eef1f4 78%);
  background-size: 220% 100%; animation: tsxnSkeleton 1.2s ease-in-out infinite;
}
html[data-home-skin="toss"] .tsxn-skel-chip { width: 116px; height: 28px; }
html[data-home-skin="toss"] .tsxn-skel-line { width: 84%; height: 16px; margin-top: 12px; }
html[data-home-skin="toss"] .tsxn-skel-line-lg { width: 92%; height: 26px; margin-top: 16px; }
html[data-home-skin="toss"] .tsxn-skel-line-sm { width: 58%; }
html[data-home-skin="toss"] .tsxn-skel-copy { flex: 1; height: 44px; }
@keyframes tsxnSkeleton { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
  html[data-home-skin="toss"] .tsxn-skeleton { animation: none; }
}

/* ════════ AI차트 목록 → Toss/Karrot 2열 타일 그리드 리뉴얼(플래그 스코프) ════════
   #home-view 밖 chart list. var 재정의(Karrot) + 리스트 행 → 타일 그리드로 형태 변경. */
html[data-home-skin="toss"] .ai-chart-list-view {
  --accent: #ff6f0f; --card: var(--tk-card); --sep: var(--tk-border); --text: var(--tk-fg); --sub: var(--tk-sub); --bg: var(--tk-card);
}
/* 헤더 필/정렬 = Karrot */
html[data-home-skin="toss"] .ai-chart-list-view .cb-filter-pill.active,
html[data-home-skin="toss"] .ai-chart-list-view .cb-sort-menu li.on { background: #ff6f0f; color: #fff; border-color: #ff6f0f; }
/* 리스트 = 풀폭 단일 컬럼 클린 행(스파크 숨김, 가격 강조) */
html[data-home-skin="toss"] .ai-chart-list-view .cb-ticker-list { display: block; padding: 2px 0 14px; }
html[data-home-skin="toss"] .ai-chart-list-view .cb-tk {
  flex-direction: row; align-items: center; gap: 14px;
  background: transparent; border-radius: 0; border-bottom: 1px solid var(--tk-surface2); padding: 16px 6px; margin: 0;
}
html[data-home-skin="toss"] .ai-chart-list-view .cb-tk:hover { background: var(--tk-surface); }
/* 아이콘 = 라운드 사각(44) */
html[data-home-skin="toss"] .ai-chart-list-view .cb-ico { width: 44px; height: 44px; border-radius: 14px; flex: none; }
/* 이름 = 좌측 flex, 종목명 크게 */
html[data-home-skin="toss"] .ai-chart-list-view .cb-nm { flex: 1; min-width: 0; }
html[data-home-skin="toss"] .ai-chart-list-view .cb-nm .cb-t { font-size: 16px; font-weight: 700; color: var(--tk-fg); }
html[data-home-skin="toss"] .ai-chart-list-view .cb-nm .cb-s { font-size: 12.5px; color: var(--tk-sub); margin-top: 2px; }
/* 스파크 숨김 → 넘버릭 포커스 */
html[data-home-skin="toss"] .ai-chart-list-view .cb-spark { display: none; }
/* 가격 = 우측 세로(큰 값 + 등락) */
html[data-home-skin="toss"] .ai-chart-list-view .cb-price { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
html[data-home-skin="toss"] .ai-chart-list-view .cb-price .cb-p { font-size: 17px; font-weight: 800; color: var(--tk-fg); font-variant-numeric: tabular-nums; }
html[data-home-skin="toss"] .ai-chart-list-view .cb-price .cb-d { font-size: 13px; font-weight: 700; margin-top: 2px; }

/* 국내 매매동향 행 — 이름 + 순매수(억) */
html[data-home-skin="toss"] .tsx-flow-nm { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--tk-fg); }
html[data-home-skin="toss"] .tsx-flow-v { flex: none; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

html[data-home-skin="toss"] .tsxn-topic { cursor: pointer; }

/* ════════ 뉴스 팝업 = 화면 정중앙 카드 모달 ════════ */
html[data-home-skin="toss"] .tsx-newsmodal {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
html[data-home-skin="toss"] .tsx-newsmodal-card {
  width: min(88vw, 360px); max-height: 80vh; overflow-y: auto;
  background: var(--tk-card); color: var(--tk-fg); border-radius: 16px; padding: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28); box-sizing: border-box; -webkit-overflow-scrolling: touch;
}
html[data-home-skin="toss"] .tsx-nm-title { font-size: 17px; font-weight: 800; line-height: 1.4; word-break: break-word; }
html[data-home-skin="toss"] .tsx-nm-meta { font-size: 12px; color: var(--tk-sub); margin-top: 8px; }
html[data-home-skin="toss"] .tsx-nm-body { font-size: 14px; line-height: 1.65; color: var(--tk-body); word-break: break-word; margin-top: 12px; }
html[data-home-skin="toss"] .tsx-nm-metric { font-size: 13px; font-weight: 700; color: #ff6f0f; margin-top: 10px; }
html[data-home-skin="toss"] .tsx-nm-open { display: inline-block; font-size: 14px; font-weight: 600; color: #ff6f0f; margin-top: 14px; }
html[data-home-skin="toss"] .tsx-nm-close {
  display: block; width: 100%; margin-top: 18px; padding: 13px 0; border: 0; border-radius: 12px;
  background: #ff6f0f; color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
}

/* ════════ 라이트/다크 팔레트 토큰(Toss 스킨) ════════ */
html[data-home-skin="toss"] {
  --tk-card: #ffffff; --tk-bg: #ffffff;
  --tk-fg: #212124; --tk-body: #4e5968; --tk-sub: #868b94;
  --tk-border: #eaebee; --tk-surface: #f7f8fa; --tk-surface2: #f2f3f6; --tk-line: #eef0f2;
  --tk-tint: #fff5f0; --tk-tint-bd: #ffe0cc;
}
html[data-theme="dark"][data-home-skin="toss"] {
  --tk-card: #131316; --tk-bg: #000000;
  --tk-fg: #f2f2f7; --tk-body: #c7c9d1; --tk-sub: #8e8e93;
  --tk-border: rgba(255,255,255,.09); --tk-surface: #1c1c20; --tk-surface2: #24242a; --tk-line: rgba(255,255,255,.07);
  --tk-tint: rgba(255,111,15,.15); --tk-tint-bd: rgba(255,111,15,.34);
}
/* region 세그 인디케이터 — 다크선 raised 밝은 pill */
html[data-theme="dark"][data-home-skin="toss"] .region-seg-ind { background: #3a3a40; }

/* 분석 허브 탭 — 앱이 하드코딩한 흰 배경(#tab-analysis-hub background:#fff)을 다크서 다크로 */
html[data-theme="dark"][data-home-skin="toss"] #tab-analysis-hub { background: var(--tk-bg); }

/* ════════ 증권가 리포트 섹션 ════════ */
html[data-home-skin="toss"] .tsx-rep { padding: 14px 16px; cursor: pointer; }
html[data-home-skin="toss"] .tsx-rep-t {
  font-size: 15px; font-weight: 600; color: var(--tk-fg); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-home-skin="toss"] .tsx-rep-bar {
  display: flex; height: 8px; border-radius: 9999px; overflow: hidden; margin: 14px 0 8px; background: var(--tk-surface);
}
html[data-home-skin="toss"] .tsx-rep-bar i { display: block; height: 100%; }
html[data-home-skin="toss"] .tsx-rep-leg { display: flex; gap: 14px; font-size: 12px; font-weight: 600; color: var(--tk-sub); }

/* ══ 홈 신규 섹션 3종 — 투자의견 · 검색 트렌드 · 종목 군집 ══
   구조·간격·타이포는 Toss(답 먼저 → 근거, 플랫, 헤어라인으로만 구분),
   색은 Karrot 팔레트를 담은 기존 --tk-* 토큰을 그대로 쓴다(다크모드 자동 대응). */

/* 답 먼저 — 각 섹션 첫 줄에 결론을 한 문장으로. */
html[data-home-skin="toss"] .tsx-cs-lead {
  font-size: 15px; font-weight: 700; color: var(--tk-fg);
  letter-spacing: -0.2px; margin: 2px 4px 10px;
}
/* 제3자 집계임을 밝히는 문구 — 작게 두되 항상 보이게. */
html[data-home-skin="toss"] .tsx-cs-note {
  margin: 10px 4px 0; font-size: 11px; line-height: 1.55; color: var(--tk-sub);
}

/* 검색 트렌드 — 가로 스크롤 칩. 순위 배지 + 이름 + 평소 대비 배수. */
html[data-home-skin="toss"] .tsx-ht-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 4px 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
html[data-home-skin="toss"] .tsx-ht-row::-webkit-scrollbar { display: none; }
html[data-home-skin="toss"] .tsx-ht-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 9px 13px; border-radius: 9999px;
  background: var(--tk-card); border: 1px solid var(--tk-line);
  font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html[data-home-skin="toss"] .tsx-ht-chip:active { transform: scale(.97); }
html[data-home-skin="toss"] .tsx-ht-rk {
  min-width: 16px; height: 16px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tk-tint); color: #ff6f0f; font-size: 10px; font-weight: 800;
}
html[data-home-skin="toss"] .tsx-ht-nm {
  font-size: 13.5px; font-weight: 700; color: var(--tk-fg); white-space: nowrap;
}
html[data-home-skin="toss"] .tsx-ht-x { font-size: 11.5px; font-weight: 700; color: var(--tk-sub); }

/* 종목 군집 — 큰 무리 3개를 가로로. 군집 색은 군집 화면 팔레트를 공유한다. */
html[data-home-skin="toss"] .tsx-cl-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 4px 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
html[data-home-skin="toss"] .tsx-cl-row::-webkit-scrollbar { display: none; }
html[data-home-skin="toss"] .tsx-cl-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: 0 0 auto;
  min-width: 148px; padding: 13px 15px; border-radius: 16px;
  background: var(--tk-card); border: 1px solid var(--tk-line);
  text-align: left; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html[data-home-skin="toss"] .tsx-cl-card:active { transform: scale(.99); }
html[data-home-skin="toss"] .tsx-cl-key { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
html[data-home-skin="toss"] .tsx-cl-nm {
  font-size: 14px; font-weight: 800; color: var(--tk-fg); letter-spacing: -0.2px;
}
html[data-home-skin="toss"] .tsx-cl-sz { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--tk-sub); }
/* 대표 섹터 — 둘째 줄 전체. 길면 말줄임. */
html[data-home-skin="toss"] .tsx-cl-top {
  flex: 0 0 100%; font-size: 11px; font-weight: 600; color: var(--tk-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 캘린더 — 날짜 그룹 세로 목록.
   가로 스크롤 칩이던 것을 갈아엎었다. 종목명이 길면 칩 하나가 화면 폭을 다 먹어
   한 건밖에 안 보였고, 같은 날짜가 칩마다 반복돼 훑을 수가 없었다.
   왼쪽 날짜 칸을 고정 폭으로 두고 같은 날짜는 한 번만 적어 달력처럼 읽히게 한다. */
html[data-home-skin="toss"] .tsx-cal-list {
  background: var(--tk-card); border: 1px solid var(--tk-border); border-radius: 20px;
  padding: 4px 16px; overflow: hidden;
}
html[data-home-skin="toss"] .tsx-cal-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 0; background: transparent; border: 0;
  border-top: 1px solid var(--tk-line); text-align: left; cursor: pointer;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}
html[data-home-skin="toss"] .tsx-cal-row:first-child { border-top: 0; }
/* 같은 날짜가 이어지는 행 — 구분선을 지워 한 날짜 묶음으로 보이게 한다. */
html[data-home-skin="toss"] .tsx-cal-row.same-day { border-top: 0; padding-top: 0; }
html[data-home-skin="toss"] .tsx-cal-row:active { background: var(--tk-tint); }
/* 날짜 칸 — 고정 폭이라 오른쪽 이름들이 세로로 가지런히 맞는다. */
html[data-home-skin="toss"] .tsx-cal-date {
  width: 46px; flex: none; display: flex; align-items: baseline; gap: 4px;
}
html[data-home-skin="toss"] .tsx-cal-md {
  font-size: 13px; font-weight: 800; color: var(--tk-fg); font-variant-numeric: tabular-nums;
}
html[data-home-skin="toss"] .tsx-cal-wd { font-size: 11px; font-weight: 600; color: var(--tk-sub); }
/* 유형 점 — 실적·배당·지표를 색으로 가른다. */
html[data-home-skin="toss"] .tsx-cal-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
/* 종목명 — 남는 폭을 다 쓰고 길면 말줄임(칩 시절 폭 독점 문제의 직접 해결). */
html[data-home-skin="toss"] .tsx-cal-name {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--tk-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-home-skin="toss"] .tsx-cal-tag {
  flex: none; padding: 2px 8px; border-radius: 9999px; background: var(--tk-surface);
  font-size: 10.5px; font-weight: 700; color: var(--tk-sub);
}

/* 요약이 짧은 이유 안내 — 본문보다 작고 옅게. 정보는 주되 시선은 안 뺏는다. */
.wb-m-thin{font-size:11.5px;color:var(--sub,#868b94);margin-top:6px}

/* ── 홈 화면 편집 ─────────────────────────────────────────────
   홈 맨 위 진입 버튼 + 전체화면 편집 목록.
   오렌지는 이 화면에서 저장 버튼 한 곳에만 쓴다. */
html[data-home-skin="toss"] .tsx-ai-edit {
  flex: 0 0 auto; padding: 4px 10px; font-size: 12px; font-weight: 700;
  color: var(--tk-sub, #8b95a1); background: transparent;
  border: 1px solid var(--tk-border, #e5e8eb); border-radius: 999px; cursor: pointer;
}
.hse-ov {
  position: fixed; inset: 0; z-index: 10000; overflow-y: auto;
  background: var(--tk-bg, #fff); color: var(--tk-fg, #191f28);
  padding: 0 0 96px;
}
.hse-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; }
.hse-back { width: 32px; height: 32px; border: 0; background: none; font-size: 20px;
  color: var(--tk-fg, #191f28); cursor: pointer; }
.hse-title { font-size: 18px; font-weight: 800; }
.hse-lead { margin: 0 16px 14px; font-size: 13px; line-height: 1.5; color: var(--tk-sub, #8b95a1); }
.hse-list { margin: 0 16px; }
.hse-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 12px; margin-bottom: 8px;
  border: 1px solid var(--tk-border, #e5e8eb); border-radius: 14px;
  background: var(--tk-card, #fff); touch-action: pan-y; user-select: none;
}
.hse-row.grab { border-color: #ff6f0f; box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.hse-row.off { opacity: .45; }
/* 손잡이만 스크롤을 내주지 않는다(touch-action:none) — 드래그는 여기서만 시작되고
   행의 나머지 부분은 그대로 세로 스크롤이 된다. 관심종목 목록과 같은 규칙. */
.hse-grip { color: var(--tk-sub, #8b95a1); font-size: 18px; line-height: 1;
  padding: 6px 10px; margin: -6px -4px -6px -6px; cursor: grab;
  touch-action: none; user-select: none; }
.hse-grip:active { cursor: grabbing; }
.hse-nm { flex: 1; font-size: 15px; font-weight: 600; }
.hse-eye { padding: 5px 10px; font-size: 12px; font-weight: 700; border-radius: 999px;
  border: 1px solid var(--tk-border, #e5e8eb); background: none;
  color: var(--tk-sub, #8b95a1); cursor: pointer; }
.hse-save {
  position: fixed; left: 16px; right: 16px; bottom: 20px; padding: 16px;
  border: 0; border-radius: 16px; background: #ff6f0f; color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
/* 홈 편집 진입 줄 — 섹션이 아니라 홈 맨 위 고정. 오른쪽 정렬 작은 버튼 하나. */
html[data-home-skin="toss"] .tsx-edit-row {
  display: flex; justify-content: flex-end; padding: 4px 0 2px;
}
/* 맨 위 섹션 제목 + 홈 편집 버튼 한 줄. 제목이 늘어나도 버튼은 오른쪽에 붙어 있는다. */
html[data-home-skin="toss"] .tsx-tt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
html[data-home-skin="toss"] .tsx-tt-row > .tsx-sec-t,
html[data-home-skin="toss"] .tsx-tt-row > .tsx-ai-eb { flex: 1; min-width: 0; }
/* 맨 위 섹션의 윗 간격 — 예전엔 항상 AI 카드(.tsx-answer, 6px)가 첫 요소였다.
   순서를 바꿀 수 있게 되면서 일반 섹션(.tsx-sec, 36px)이 맨 위로 올 수 있어
   헤더와의 간격이 종류에 따라 달라졌다. 첫 요소면 무엇이든 같은 간격으로 맞춘다. */
html[data-home-skin="toss"] .tsx-root > :first-child { margin-top: 6px; }