/* === thai-forex.net Astro global.css — Phase 2A (2026-06-21) ===
 * Design tokens: --tfx-* (正本: tfx_final_design_tokens_20260621.md)
 * Mock reference: design/docs/static-migration/design/mock-phase1/
 * Status: local-only — 本番/preview/deploy禁止
 */

/* ================================================================
   1. Design Tokens (--tfx-* 正本)
   ================================================================ */
:root {
  /* Brand navy */
  --tfx-navy: #1B2D4F;
  --tfx-navy-600: #2A4170;
  --tfx-navy-700: #16243F;
  --tfx-navy-900: #0F1B33;

  /* Teal accent — fill/border/icon: #2E8B8B / TEXT: #1C6B6B (AA 6.2:1) */
  --tfx-teal: #2E8B8B;
  --tfx-teal-ink: #1C6B6B;
  --tfx-teal-600: #257575;
  --tfx-teal-tint: #E6F2F2;

  /* Gold accent */
  --tfx-gold: #B5892A;
  --tfx-gold-ink: #8A6516;
  --tfx-gold-tint: #F5ECD4;

  /* Surfaces */
  --tfx-bg: #F9F8F4;
  --tfx-surface: #FFFFFF;
  --tfx-surface-2: #F4F3EF;

  /* Ink */
  --tfx-ink: #1A1A1A;
  --tfx-ink-soft: #555550;
  --tfx-ink-muted: #6E6E68;
  --tfx-ink-on-dark: #E7ECF3;

  /* Lines */
  --tfx-border: #E2E1DC;
  --tfx-border-cool: #DDE3EC;
  --tfx-divider: #EEEDE7;

  /* Risk warning box (cream/gold) */
  --tfx-warn-bg: #FBF4E3;
  --tfx-warn-border: #D4A017;
  --tfx-warn-ink: #6B5320;

  /* Affiliate disclosure box (cool blue) */
  --tfx-disc-bg: #EEF3F9;
  --tfx-disc-border: #C2D2E6;
  --tfx-disc-ink: #2C4A6E;

  /* Caution box (terracotta) */
  --tfx-caution-bg: #FDF1EC;
  --tfx-caution-border: #D2795C;
  --tfx-caution-ink: #9A4B33;

  /* Semantic */
  --tfx-pos: #2F7D5B;
  --tfx-neg: #B05038;

  /* CTA button = navy (calm, non-hype) */
  --tfx-cta-affiliate: #1B2D4F;
  --tfx-cta-affiliate-hover: #16243F;

  /* Table */
  --tfx-table-head: #1B2D4F;
  --tfx-table-zebra: #F4F3EF;
  --tfx-table-hover: #E6F2F2;

  /* Typography */
  --tfx-font: "Noto Sans Thai", "Sarabun", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tfx-fs-micro: 0.78rem;
  --tfx-fs-small: 0.875rem;
  --tfx-fs-body: 1.0625rem;
  --tfx-fs-h3: 1.15rem;
  --tfx-fs-h2: 1.4rem;
  --tfx-fs-h1: 1.7rem;
  --tfx-lh-body: 1.85;
  --tfx-lh-tight: 1.35;

  /* Spacing (4px base) */
  --tfx-sp-1: 4px;  --tfx-sp-2: 8px;  --tfx-sp-3: 12px; --tfx-sp-4: 16px;
  --tfx-sp-5: 20px; --tfx-sp-6: 24px; --tfx-sp-8: 32px; --tfx-sp-10: 40px;
  --tfx-sp-12: 48px; --tfx-sp-16: 64px;

  /* Radius */
  --tfx-r-sm: 6px; --tfx-r-md: 10px; --tfx-r-lg: 14px; --tfx-r-xl: 20px; --tfx-r-pill: 999px;

  /* Shadow */
  --tfx-shadow-sm: 0 1px 2px rgba(27,45,79,.06);
  --tfx-shadow-md: 0 4px 14px rgba(27,45,79,.09);

  /* Layout */
  --tfx-w-content: 1120px;
  --tfx-w-article: 720px;
  --tfx-w-aside: 260px;
  --tfx-gutter: 20px;

  /* Focus ring */
  --tfx-focus-ring: 0 0 0 3px rgba(46,139,139,.5);
}

/* ================================================================
   2. Reset / base
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--tfx-font);
  font-size: var(--tfx-fs-body);
  line-height: var(--tfx-lh-body);
  color: var(--tfx-ink);
  background: var(--tfx-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--tfx-teal-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--tfx-teal-600); }

/* ================================================================
   3. A11y utilities
   ================================================================ */
:focus-visible {
  outline: none;
  box-shadow: var(--tfx-focus-ring);
  border-radius: var(--tfx-r-sm);
}

.tfx-skip {
  position: absolute; left: var(--tfx-sp-3); top: -60px; z-index: 300;
  background: var(--tfx-navy); color: #fff; padding: 10px 16px;
  border-radius: var(--tfx-r-sm); text-decoration: none;
  font-size: var(--tfx-fs-small); font-weight: 600; transition: top .15s;
}
.tfx-skip:focus { top: var(--tfx-sp-3); color: #fff; }

.tfx-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ================================================================
   4. Site Header
   ================================================================ */
.tfx-header {
  background: var(--tfx-navy); color: #fff;
  position: sticky; top: 0; z-index: 100; box-shadow: var(--tfx-shadow-md);
}
.tfx-header__inner {
  max-width: var(--tfx-w-content); margin: 0 auto;
  padding: 0 var(--tfx-gutter); height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--tfx-sp-4);
}
.tfx-logo {
  display: inline-flex; align-items: center; gap: var(--tfx-sp-2);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
}
.tfx-logo:hover { color: rgba(255,255,255,.9); }
.tfx-logo__mark { display: inline-flex; gap: 2px; align-items: flex-end; height: 20px; }
.tfx-logo__mark span { width: 4px; border-radius: 1px; display: block; }
.tfx-logo__mark span:nth-child(1) { height: 12px; background: #7FA8E0; }
.tfx-logo__mark span:nth-child(2) { height: 20px; background: #4C7BC4; }
.tfx-logo__mark span:nth-child(3) { height: 15px; background: #9CC4F0; }

.tfx-nav { display: none; }
@media (min-width: 880px) {
  .tfx-nav {
    display: flex; gap: 2px; list-style: none; align-items: center;
  }
  .tfx-nav a {
    color: rgba(255,255,255,.85); text-decoration: none; font-size: var(--tfx-fs-small);
    padding: 8px 12px; border-radius: var(--tfx-r-sm);
    display: inline-flex; align-items: center; min-height: 40px;
    transition: background .15s, color .15s;
  }
  .tfx-nav a:hover { color: #fff; background: rgba(255,255,255,.1); }
  .tfx-nav a[aria-current="page"] {
    color: #fff; box-shadow: inset 0 -2px 0 var(--tfx-teal); border-radius: 0;
  }
  .tfx-nav__risk { color: #F0C98A !important; }
}

.tfx-menu-btn {
  display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
  width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 10px;
  aria-label: "เมนู";
}
.tfx-menu-btn span { display: block; height: 2px; background: rgba(255,255,255,.9); border-radius: 2px; }
@media (min-width: 880px) { .tfx-menu-btn { display: none; } }

/* ================================================================
   5. Article Hero (no-eyecatch)
   ================================================================ */
.tfx-articlehero {
  background: var(--tfx-surface);
  border-bottom: 1px solid var(--tfx-border);
}
.tfx-articlehero__inner {
  max-width: var(--tfx-w-article); margin: 0 auto;
  padding: var(--tfx-sp-8) var(--tfx-gutter) var(--tfx-sp-6);
}
.tfx-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); margin-bottom: var(--tfx-sp-4);
}
.tfx-breadcrumb a { color: var(--tfx-ink-muted); text-decoration: none; }
.tfx-breadcrumb a:hover { color: var(--tfx-teal-ink); text-decoration: underline; }
.tfx-breadcrumb__sep { color: #B7B7B0; }
/* Page-level breadcrumb wrapper (ComparisonTemplate — outside hero) */
.tfx-pagebreadcrumb {
  background: var(--tfx-surface); border-bottom: 1px solid var(--tfx-border);
  padding: 0 var(--tfx-gutter);
}
.tfx-pagebreadcrumb .tfx-breadcrumb {
  max-width: var(--tfx-w-article); margin: 0 auto;
  padding-top: var(--tfx-sp-3); padding-bottom: var(--tfx-sp-3); margin-bottom: 0;
}

/* Category chip */
.tfx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tfx-teal-tint); color: var(--tfx-teal-ink);
  border: 1px solid #BFE0E0; border-radius: var(--tfx-r-pill);
  padding: 3px 12px; font-size: var(--tfx-fs-micro); font-weight: 700; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
}
a.tfx-chip:hover { background: #DBEDED; }
.tfx-chip--neutral { background: var(--tfx-surface-2); color: var(--tfx-ink-soft); border-color: var(--tfx-border); }
.tfx-chip--risk    { background: var(--tfx-warn-bg); color: var(--tfx-gold-ink); border-color: #E3CB8A; }
.tfx-chip--broker  { background: #EEF3F9; color: #2C4A6E; border-color: var(--tfx-disc-border); }
.tfx-chip--mt4     { background: var(--tfx-surface-2); color: var(--tfx-ink-soft); border-color: var(--tfx-border); }
.tfx-chip--fee     { background: #F5F1F9; color: #5C3D7A; border-color: #D4C4EC; }

.tfx-articlehero__h1 {
  font-size: clamp(1.375rem, 4.5vw, var(--tfx-fs-h1));
  line-height: var(--tfx-lh-tight); color: var(--tfx-navy); font-weight: 700;
  margin: var(--tfx-sp-4) 0; text-wrap: balance;
}
.tfx-articlehero__lead {
  font-size: var(--tfx-fs-body); color: var(--tfx-ink-soft); line-height: 1.75;
  border-left: 3px solid var(--tfx-teal); padding-left: var(--tfx-sp-4); margin-bottom: var(--tfx-sp-5);
}

/* AuthorByline */
.tfx-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tfx-sp-3) var(--tfx-sp-5);
  padding: var(--tfx-sp-4) 0; border-top: 1px solid var(--tfx-border);
}
.tfx-byline__id { display: flex; align-items: center; gap: var(--tfx-sp-3); }
.tfx-byline__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--tfx-navy); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--tfx-fs-small);
}
.tfx-byline__name { font-size: var(--tfx-fs-small); font-weight: 700; color: var(--tfx-ink); }
.tfx-byline__role { font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); }
.tfx-byline__meta {
  display: flex; flex-wrap: wrap; gap: var(--tfx-sp-2) var(--tfx-sp-4);
  font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); margin-left: auto;
}

/* ReviewedByBox */
.tfx-reviewed {
  display: flex; align-items: flex-start; gap: var(--tfx-sp-3);
  background: var(--tfx-teal-tint); border: 1px solid #CCE6E6; border-radius: var(--tfx-r-md);
  padding: var(--tfx-sp-3) var(--tfx-sp-4); margin-top: var(--tfx-sp-4);
}
.tfx-reviewed__icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--tfx-teal); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; margin-top: 1px;
}
.tfx-reviewed__text { font-size: var(--tfx-fs-small); color: var(--tfx-ink-soft); line-height: 1.65; }
.tfx-reviewed__text strong { color: var(--tfx-teal-ink); }

/* DataFreshnessBadge */
.tfx-freshness {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--tfx-surface-2); border: 1px solid var(--tfx-border);
  border-radius: var(--tfx-r-pill); padding: 6px 14px;
  font-size: var(--tfx-fs-micro); color: var(--tfx-ink-soft); margin-bottom: var(--tfx-sp-3);
}
.tfx-freshness__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tfx-teal); flex-shrink: 0; }
.tfx-freshness strong { color: var(--tfx-ink); font-weight: 700; }
.tfx-freshness__src { color: var(--tfx-ink-muted); }

/* ================================================================
   6. Article layout — outboard TOC (center axis fix)
   ================================================================ */
.tfx-layout {
  position: relative;
  padding: var(--tfx-sp-8) var(--tfx-gutter) var(--tfx-sp-12);
}
.tfx-article {
  max-width: var(--tfx-w-article);
  margin: 0 auto;
  min-width: 0;
  width: 100%;
}
.tfx-aside { display: none; }
@media (min-width: 1280px) {
  .tfx-aside {
    display: block;
    position: absolute;
    left: calc(50% + calc(var(--tfx-w-article) / 2) + var(--tfx-sp-4));
    top: var(--tfx-sp-8);
    width: 240px;
  }
  .tfx-aside__sticky {
    position: sticky; top: 72px;
    display: flex; flex-direction: column; gap: var(--tfx-sp-5);
  }
  .tfx-aside__toc {
    background: var(--tfx-surface); border: 1px solid var(--tfx-border);
    border-radius: var(--tfx-r-md); padding: var(--tfx-sp-5);
  }
  .tfx-aside__title {
    font-size: var(--tfx-fs-small); font-weight: 700; color: var(--tfx-navy);
    margin-bottom: var(--tfx-sp-3); padding-bottom: var(--tfx-sp-2); border-bottom: 1px solid var(--tfx-border);
  }
  .tfx-aside__list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
  .tfx-aside__list a {
    display: block; font-size: var(--tfx-fs-micro); color: var(--tfx-ink-soft);
    text-decoration: none; padding: 7px var(--tfx-sp-2); border-radius: var(--tfx-r-sm); line-height: 1.45;
  }
  .tfx-aside__list a:hover { background: var(--tfx-teal-tint); color: var(--tfx-teal-ink); }
}

/* ================================================================
   7. Functional boxes
   ================================================================ */
.tfx-disclosure {
  display: flex; gap: var(--tfx-sp-3); align-items: flex-start;
  background: var(--tfx-disc-bg); border: 1px solid var(--tfx-disc-border);
  border-radius: var(--tfx-r-md); padding: var(--tfx-sp-3) var(--tfx-sp-4); margin: var(--tfx-sp-5) 0;
}
.tfx-disclosure__icon { flex-shrink: 0; color: var(--tfx-disc-ink); margin-top: 1px; }
.tfx-disclosure__text { font-size: var(--tfx-fs-small); color: var(--tfx-disc-ink); line-height: 1.7; }
.tfx-disclosure__text strong { font-weight: 700; }

.tfx-warn {
  background: var(--tfx-warn-bg); border: 1px solid var(--tfx-warn-border);
  border-left-width: 4px; border-radius: var(--tfx-r-md);
  padding: var(--tfx-sp-4) var(--tfx-sp-5); margin: var(--tfx-sp-6) 0;
}
.tfx-warn__head { display: flex; align-items: center; gap: var(--tfx-sp-2); margin-bottom: var(--tfx-sp-2); }
.tfx-warn__title { font-size: var(--tfx-fs-small); font-weight: 700; color: var(--tfx-warn-ink); }
.tfx-warn__body { font-size: var(--tfx-fs-small); color: var(--tfx-warn-ink); line-height: 1.8; }
.tfx-warn__body ul { padding-left: var(--tfx-sp-5); margin-top: var(--tfx-sp-2); }

.tfx-caution {
  background: var(--tfx-caution-bg); border: 1px solid var(--tfx-caution-border);
  border-left-width: 4px; border-radius: var(--tfx-r-md);
  padding: var(--tfx-sp-3) var(--tfx-sp-4); margin: var(--tfx-sp-5) 0;
  font-size: var(--tfx-fs-small); line-height: 1.7; color: var(--tfx-ink);
}
.tfx-caution strong { color: var(--tfx-caution-ink); }

/* ================================================================
   8. Compact TOC (details/summary — collapsible on mobile)
   ================================================================ */
.tfx-toc {
  background: var(--tfx-surface-2); border: 1px solid var(--tfx-border);
  border-radius: var(--tfx-r-md); margin: var(--tfx-sp-4) 0 var(--tfx-sp-5); overflow: hidden;
}
.tfx-toc__summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--tfx-sp-2);
  padding: var(--tfx-sp-3) var(--tfx-sp-4); font-size: var(--tfx-fs-small); font-weight: 700;
  color: var(--tfx-navy); min-height: 44px;
}
.tfx-toc__summary::-webkit-details-marker { display: none; }
.tfx-toc__summary::after { content: "▾"; margin-left: auto; color: var(--tfx-ink-muted); transition: transform .15s; }
.tfx-toc[open] .tfx-toc__summary::after { transform: rotate(180deg); }
.tfx-toc__list {
  list-style: none; padding: 0 var(--tfx-sp-4) var(--tfx-sp-3);
  display: grid; gap: 2px;
}
.tfx-toc__list a {
  display: flex; align-items: baseline; gap: var(--tfx-sp-2); text-decoration: none;
  color: var(--tfx-ink-soft); font-size: var(--tfx-fs-small); line-height: 1.45;
  padding: 7px var(--tfx-sp-2); border-radius: var(--tfx-r-sm); min-height: 44px;
}
.tfx-toc__list a:hover { background: var(--tfx-teal-tint); color: var(--tfx-teal-ink); }
.tfx-toc__num { color: var(--tfx-teal-ink); font-weight: 700; font-size: var(--tfx-fs-micro); min-width: 1.4em; }
.tfx-toc__item--sub a { padding-left: var(--tfx-sp-6); font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); }

/* ================================================================
   9. Body typography (.tfx-prose + .entry-content for WP content)
   ================================================================ */
.tfx-prose,
.entry-content { color: var(--tfx-ink); }

.tfx-prose h2,
.entry-content h2 {
  font-size: clamp(1.2rem, 3.5vw, var(--tfx-fs-h2));
  color: var(--tfx-navy); font-weight: 700; line-height: 1.3;
  margin: var(--tfx-sp-12) 0 var(--tfx-sp-4);
  padding-bottom: var(--tfx-sp-3); border-bottom: 2px solid var(--tfx-teal);
  scroll-margin-top: 72px;
}
.tfx-prose h3,
.entry-content h3 {
  font-size: var(--tfx-fs-h3); color: var(--tfx-navy-600); font-weight: 700;
  margin: var(--tfx-sp-8) 0 var(--tfx-sp-3); scroll-margin-top: 72px;
}
.tfx-prose h4,
.entry-content h4 {
  font-size: var(--tfx-fs-body); color: var(--tfx-navy); font-weight: 700;
  margin: var(--tfx-sp-6) 0 var(--tfx-sp-2);
}
.tfx-prose p, .entry-content p { margin: 0 0 var(--tfx-sp-5); }
.tfx-prose ul, .tfx-prose ol,
.entry-content ul, .entry-content ol { padding-left: var(--tfx-sp-6); margin: 0 0 var(--tfx-sp-5); }
.tfx-prose li, .entry-content li { margin-bottom: var(--tfx-sp-2); line-height: 1.75; }
.tfx-prose strong, .entry-content strong { font-weight: 700; }
.tfx-note { font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); margin-top: calc(-1 * var(--tfx-sp-2)); }

/* ================================================================
   10. Responsive table (.tfx-tablewrap / .tfx-table)
   ================================================================ */
.tfx-tablewrap {
  position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--tfx-border); border-radius: var(--tfx-r-md);
  box-shadow: var(--tfx-shadow-sm); margin: var(--tfx-sp-4) 0;
  background:
    linear-gradient(to right, var(--tfx-surface) 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
    linear-gradient(to left,  var(--tfx-surface) 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,   rgba(27,45,79,.10), rgba(0,0,0,0)) left  / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(27,45,79,.10), rgba(0,0,0,0)) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.tfx-table {
  width: 100%; min-width: 640px; max-width: none;
  border-collapse: collapse; font-size: var(--tfx-fs-small);
}
.tfx-table caption {
  caption-side: top; text-align: left; font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted);
  padding: var(--tfx-sp-3) var(--tfx-sp-4) 0;
}
/* Thai/English wrap safety — do NOT use break-all / overflow-wrap:anywhere */
.tfx-table th, .tfx-table td { word-break: normal; overflow-wrap: normal; line-break: auto; hyphens: none; }
.tfx-table th {
  background: var(--tfx-table-head); color: #fff; font-weight: 600; text-align: left;
  padding: var(--tfx-sp-4) var(--tfx-sp-4); white-space: nowrap;
}
.tfx-table th[scope="row"] {
  background: var(--tfx-surface-2); color: var(--tfx-navy); position: sticky; left: 0;
  white-space: nowrap; box-shadow: 2px 0 4px rgba(27,45,79,.08);
}
.tfx-table td {
  padding: var(--tfx-sp-4) var(--tfx-sp-4); border-top: 1px solid var(--tfx-border-cool);
  vertical-align: top; line-height: 1.65;
}
.tfx-nowrap { white-space: nowrap; }
.tfx-table td.tfx-num { text-align: right; font-variant-numeric: tabular-nums; }
.tfx-table tbody tr:nth-child(even) td { background: var(--tfx-table-zebra); }
.tfx-table tbody tr:nth-child(even) th[scope="row"] { background: #ECEBE5; }
.tfx-scrollhint {
  display: block; text-align: center; font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); margin: 6px 0 0;
}
@media (min-width: 640px) { .tfx-scrollhint { display: none; } }

/* entry-content inline table fallback — only for bare tables not wrapped by wrapHtmlTables */
.entry-content table:not(.tfx-table) {
  width: 100%; border-collapse: collapse; font-size: var(--tfx-fs-small);
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  word-break: normal; overflow-wrap: normal;
}
.entry-content table:not(.tfx-table) th,
.entry-content table:not(.tfx-table) td {
  vertical-align: top; padding: var(--tfx-sp-2) var(--tfx-sp-3); border: 1px solid var(--tfx-border);
}
.entry-content table:not(.tfx-table) th { background: var(--tfx-table-head); color: #fff; font-weight: 600; }

/* ================================================================
   11. Affiliate CTA cluster
   ================================================================ */
.tfx-cta {
  background: var(--tfx-surface); border: 1px solid var(--tfx-border);
  border-top: 4px solid var(--tfx-navy); border-radius: var(--tfx-r-md);
  padding: var(--tfx-sp-5); margin: var(--tfx-sp-8) 0;
  display: flex; flex-direction: column; gap: var(--tfx-sp-4);
}
@media (min-width: 600px) { .tfx-cta__row { display: flex; align-items: center; gap: var(--tfx-sp-5); } }
.tfx-cta__broker { display: flex; align-items: center; gap: var(--tfx-sp-3); flex: 1; }
.tfx-cta__logo {
  width: 48px; height: 48px; border-radius: var(--tfx-r-md); flex-shrink: 0;
  background: var(--tfx-navy); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--tfx-fs-small); letter-spacing: .02em;
}
.tfx-cta__name { font-weight: 700; color: var(--tfx-navy); font-size: var(--tfx-fs-body); }
.tfx-cta__type { font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); }
.tfx-cta__action { display: flex; flex-direction: column; gap: var(--tfx-sp-2); }
@media (max-width: 599px) { .tfx-cta__action { width: 100%; } }
.tfx-btn-affiliate {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tfx-sp-2);
  min-height: 48px; padding: 0 var(--tfx-sp-6); border-radius: var(--tfx-r-sm); border: none;
  background: var(--tfx-cta-affiliate); color: #fff; font-family: var(--tfx-font);
  font-size: var(--tfx-fs-small); font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: var(--tfx-shadow-sm); transition: background .15s;
}
.tfx-btn-affiliate:hover { background: var(--tfx-cta-affiliate-hover); color: #fff; }
.tfx-cta__note { font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); line-height: 1.55; }
.tfx-cta__risk {
  font-size: var(--tfx-fs-micro); color: var(--tfx-warn-ink); background: var(--tfx-warn-bg);
  border-radius: var(--tfx-r-sm); padding: 8px 12px; line-height: 1.5;
}

/* ================================================================
   12. Suitability (pros / cons)
   ================================================================ */
.tfx-suit { display: grid; grid-template-columns: 1fr; gap: var(--tfx-sp-4); margin: var(--tfx-sp-6) 0; }
@media (min-width: 560px) { .tfx-suit { grid-template-columns: 1fr 1fr; } }
.tfx-suit__col { border-radius: var(--tfx-r-md); padding: var(--tfx-sp-5); border: 1px solid var(--tfx-border); }
.tfx-suit__col--ok { background: var(--tfx-teal-tint); border-color: #CCE6E6; }
.tfx-suit__col--ng { background: var(--tfx-caution-bg); border-color: #ECCFC4; }
.tfx-suit__head { font-size: var(--tfx-fs-small); font-weight: 700; margin-bottom: var(--tfx-sp-3); }
.tfx-suit__col--ok .tfx-suit__head { color: var(--tfx-teal-ink); }
.tfx-suit__col--ng .tfx-suit__head { color: var(--tfx-caution-ink); }
.tfx-suit__list { list-style: none; display: flex; flex-direction: column; gap: var(--tfx-sp-2); font-size: var(--tfx-fs-small); }
.tfx-suit__list li { display: flex; gap: var(--tfx-sp-2); align-items: flex-start; line-height: 1.6; }
.tfx-suit__list li::before { flex-shrink: 0; font-weight: 700; }
.tfx-suit__col--ok .tfx-suit__list li::before { content: "✔"; color: var(--tfx-pos); }
.tfx-suit__col--ng .tfx-suit__list li::before { content: "✘"; color: var(--tfx-neg); }

/* ================================================================
   13. Checklist / FAQ / NextPath / Related
   ================================================================ */
.tfx-checklist {
  list-style: none; display: flex; flex-direction: column; gap: var(--tfx-sp-2);
  background: var(--tfx-surface-2); border: 1px solid var(--tfx-border); border-radius: var(--tfx-r-md);
  padding: var(--tfx-sp-5); margin: var(--tfx-sp-4) 0;
}
.tfx-checklist__item { display: flex; align-items: flex-start; gap: var(--tfx-sp-3); font-size: var(--tfx-fs-small); line-height: 1.65; }
.tfx-checklist__box {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--tfx-teal); border-radius: var(--tfx-r-sm);
  display: flex; align-items: center; justify-content: center; color: var(--tfx-teal); font-size: 13px; font-weight: 700;
}

.tfx-faq { display: flex; flex-direction: column; gap: var(--tfx-sp-3); margin: var(--tfx-sp-4) 0; }
.tfx-faq__item {
  border: 1px solid var(--tfx-border); border-radius: var(--tfx-r-md);
  overflow: hidden; background: var(--tfx-surface);
}
.tfx-faq__q {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: var(--tfx-sp-3);
  padding: var(--tfx-sp-4) var(--tfx-sp-5); font-size: var(--tfx-fs-small); font-weight: 700;
  color: var(--tfx-navy); line-height: 1.5; min-height: 44px;
}
.tfx-faq__q::-webkit-details-marker { display: none; }
.tfx-faq__mark {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: var(--tfx-teal); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: var(--tfx-fs-micro); font-weight: 700;
}
.tfx-faq__q::after { content: "＋"; margin-left: auto; color: var(--tfx-ink-muted); font-weight: 400; }
.tfx-faq__item[open] .tfx-faq__q::after { content: "－"; }
.tfx-faq__a {
  padding: 0 var(--tfx-sp-5) var(--tfx-sp-4) calc(var(--tfx-sp-5) + 24px + var(--tfx-sp-3));
  font-size: var(--tfx-fs-small); color: var(--tfx-ink-soft); line-height: 1.8;
}

.tfx-nextpath {
  background: linear-gradient(135deg, var(--tfx-navy) 0%, var(--tfx-navy-600) 100%);
  border-radius: var(--tfx-r-lg); padding: var(--tfx-sp-6); color: #fff; margin: var(--tfx-sp-8) 0;
}
.tfx-nextpath__title { font-size: var(--tfx-fs-h3); font-weight: 700; margin-bottom: var(--tfx-sp-4); display: flex; align-items: center; gap: var(--tfx-sp-2); }
.tfx-nextpath__steps { display: flex; flex-direction: column; gap: var(--tfx-sp-2); }
.tfx-nextpath__step {
  display: flex; align-items: center; gap: var(--tfx-sp-4); min-height: 48px;
  padding: var(--tfx-sp-3) var(--tfx-sp-4); background: rgba(255,255,255,.08); border-radius: var(--tfx-r-sm);
  text-decoration: none; color: rgba(255,255,255,.9); font-size: var(--tfx-fs-small); transition: background .15s;
}
.tfx-nextpath__step:hover { background: rgba(255,255,255,.16); color: #fff; }
.tfx-nextpath__num {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: var(--tfx-teal); display: flex; align-items: center; justify-content: center;
  font-size: var(--tfx-fs-micro); font-weight: 700;
}
.tfx-nextpath__step::after { content: "→"; margin-left: auto; opacity: .6; }

.tfx-related { border-top: 1px solid var(--tfx-border); padding-top: var(--tfx-sp-8); margin-top: var(--tfx-sp-8); }
.tfx-related__title { font-size: var(--tfx-fs-h3); font-weight: 700; color: var(--tfx-navy); margin-bottom: var(--tfx-sp-4); }
.tfx-related__list { display: grid; grid-template-columns: 1fr; gap: var(--tfx-sp-3); }
@media (min-width: 560px) { .tfx-related__list { grid-template-columns: 1fr 1fr; } }
.tfx-related__card {
  display: block; padding: var(--tfx-sp-4); background: var(--tfx-surface);
  border: 1px solid var(--tfx-border); border-radius: var(--tfx-r-md);
  text-decoration: none; color: inherit; box-shadow: var(--tfx-shadow-sm);
  transition: box-shadow .15s, transform .15s;
}
.tfx-related__card:hover { box-shadow: var(--tfx-shadow-md); transform: translateY(-1px); }
.tfx-related__cat { font-size: var(--tfx-fs-micro); font-weight: 700; color: var(--tfx-teal-ink); letter-spacing: .03em; }
.tfx-related__h { font-size: var(--tfx-fs-small); font-weight: 700; color: var(--tfx-navy); line-height: 1.45; margin-top: 4px; }

/* ================================================================
   14. Site Footer
   ================================================================ */
.tfx-footer {
  background: var(--tfx-navy-900); color: rgba(255,255,255,.62);
  margin-top: var(--tfx-sp-16); padding: var(--tfx-sp-12) var(--tfx-gutter) var(--tfx-sp-8);
}
.tfx-footer__inner {
  max-width: var(--tfx-w-content); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: var(--tfx-sp-8);
}
@media (min-width: 768px) { .tfx-footer__inner { grid-template-columns: 2fr 1fr 1fr; } }
.tfx-footer__brand-title { font-size: var(--tfx-fs-body); font-weight: 700; color: #fff; margin-bottom: var(--tfx-sp-2); }
.tfx-footer__desc { font-size: var(--tfx-fs-micro); line-height: 1.8; color: rgba(255,255,255,.5); }
.tfx-footer__risk {
  background: rgba(217,160,23,.12); border-left: 3px solid var(--tfx-warn-border);
  border-radius: var(--tfx-r-sm); padding: var(--tfx-sp-3) var(--tfx-sp-4);
  font-size: var(--tfx-fs-micro); color: rgba(255,255,255,.72); line-height: 1.7; margin-top: var(--tfx-sp-4);
}
.tfx-footer__disc { font-size: var(--tfx-fs-micro); color: rgba(255,255,255,.5); line-height: 1.7; margin-top: var(--tfx-sp-3); }
.tfx-footer__navtitle {
  font-size: var(--tfx-fs-micro); font-weight: 700; color: rgba(255,255,255,.45);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--tfx-sp-3);
}
.tfx-footer__list { list-style: none; display: flex; flex-direction: column; gap: var(--tfx-sp-1); }
.tfx-footer__list a {
  color: rgba(255,255,255,.62); font-size: var(--tfx-fs-small); text-decoration: none;
  display: inline-flex; min-height: 36px; align-items: center;
}
.tfx-footer__list a:hover { color: #fff; }
.tfx-footer__bottom {
  max-width: var(--tfx-w-content); margin: var(--tfx-sp-8) auto 0;
  padding-top: var(--tfx-sp-5); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--tfx-sp-3); justify-content: space-between;
  font-size: var(--tfx-fs-micro); color: rgba(255,255,255,.72);
}
.tfx-footer__bottom a { color: rgba(255,255,255,.82); text-decoration: none; }
.tfx-footer__bottom a:hover { color: #fff; text-decoration: underline; }

/* ================================================================
   15. Scroll to top
   ================================================================ */
.tfx-totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tfx-border);
  background: var(--tfx-surface); color: var(--tfx-navy); box-shadow: var(--tfx-shadow-md);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  cursor: pointer; text-decoration: none; transition: color .15s;
}
.tfx-totop:hover { color: var(--tfx-teal-ink); }

/* ================================================================
   16. Backwards compat — table wrappers
   ================================================================ */
.tf-table-scroll,
.tfx-table-scroll {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: var(--tfx-sp-5) 0; display: block;
}
.tf-table-scroll table:not(.tfx-table),
.tfx-table-scroll table:not(.tfx-table) {
  min-width: 640px; width: max-content; max-width: none; border-collapse: collapse;
}
.tf-table-scroll th, .tf-table-scroll td,
.tfx-table-scroll th, .tfx-table-scroll td {
  white-space: normal; word-break: normal; overflow-wrap: normal;
  padding: var(--tfx-sp-2) var(--tfx-sp-3); vertical-align: top;
}
/* tfx-table 内は padding を .tfx-table th/td へ委ねる (specificity 0,2,1 > 0,1,1) */
.tf-table-scroll .tfx-table th,
.tfx-table-scroll .tfx-table th { padding: var(--tfx-sp-4) var(--tfx-sp-4); }
.tf-table-scroll .tfx-table td,
.tfx-table-scroll .tfx-table td { padding: var(--tfx-sp-4) var(--tfx-sp-4); line-height: 1.65; }
.tf-nowrap { white-space: nowrap; }

/* ================================================================
   17. Backwards compat — shortcode / SWELL / WP class overrides
   ================================================================ */

/* [tfx_aff_slot mode="block"] → navy CTA */
.tfx-info-check {
  background: var(--tfx-surface); border: 1px solid var(--tfx-border);
  border-top: 4px solid var(--tfx-navy); border-radius: var(--tfx-r-md);
  padding: var(--tfx-sp-4) var(--tfx-sp-5); margin: var(--tfx-sp-8) 0;
  text-align: center;
}
.tfx-info-check a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--tfx-sp-6); border-radius: var(--tfx-r-sm);
  background: var(--tfx-cta-affiliate); color: #fff; font-weight: 700;
  text-decoration: none; font-size: var(--tfx-fs-small); font-family: var(--tfx-font);
  transition: background .15s;
}
.tfx-info-check a:hover { background: var(--tfx-cta-affiliate-hover); color: #fff; }

/* SWELL block button (shortcode link_class=swell-block-button__link) */
.swell-block-button { display: block; margin: var(--tfx-sp-4) 0; text-align: center; }
.swell-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--tfx-sp-8); border-radius: var(--tfx-r-sm);
  background: var(--tfx-cta-affiliate); color: #fff; font-family: var(--tfx-font);
  font-size: var(--tfx-fs-small); font-weight: 700; text-decoration: none;
  box-shadow: var(--tfx-shadow-sm); transition: background .15s;
}
.swell-block-button__link:hover { background: var(--tfx-cta-affiliate-hover); color: #fff; }

/* Legacy WP risk warning class */
.tfx-risk-warning {
  background: var(--tfx-warn-bg); border: 1px solid var(--tfx-warn-border);
  border-left: 4px solid var(--tfx-warn-border); border-radius: var(--tfx-r-md);
  padding: var(--tfx-sp-4) var(--tfx-sp-5); margin: var(--tfx-sp-6) 0;
  font-size: var(--tfx-fs-small); color: var(--tfx-warn-ink); line-height: 1.8;
}

/* ================================================================
   18. HOME page components (Phase 2A-HOME-FIX — top-golden.html正本準拠)
   ================================================================ */

/* Hero */
.tfx-hero {
  background: linear-gradient(145deg, var(--tfx-navy-900) 0%, var(--tfx-navy) 55%, #1e3a6e 100%);
  color: #fff; padding: var(--tfx-sp-16) var(--tfx-gutter) var(--tfx-sp-12);
  position: relative; overflow: hidden;
}
.tfx-hero::before {
  content: ""; position: absolute; top: -80px; right: -100px;
  width: 440px; height: 440px; border-radius: 50%;
  background: rgba(46,139,139,.12); pointer-events: none;
}
.tfx-hero::after {
  content: ""; position: absolute; bottom: -60px; left: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(46,139,139,.07); pointer-events: none;
}
.tfx-hero__inner {
  position: relative; max-width: var(--tfx-w-content); margin: 0 auto; text-align: center;
}
.tfx-hero__kicker {
  display: inline-flex; align-items: center; gap: var(--tfx-sp-2);
  background: rgba(46,139,139,.2); color: #9FD4D4;
  border: 1px solid rgba(46,139,139,.35); border-radius: var(--tfx-r-pill);
  padding: 4px 16px; font-size: var(--tfx-fs-micro); letter-spacing: .05em; margin-bottom: var(--tfx-sp-5);
}
.tfx-hero__h1 {
  font-size: clamp(1.5rem, 5vw, 2.4rem); font-weight: 700; line-height: 1.3;
  margin-bottom: var(--tfx-sp-5); letter-spacing: -.01em; text-wrap: balance;
}
.tfx-hero__sub {
  font-size: var(--tfx-fs-body); color: rgba(255,255,255,.75); line-height: 1.75;
  max-width: 560px; margin: 0 auto var(--tfx-sp-8);
}
.tfx-hero__actions {
  display: flex; gap: var(--tfx-sp-4); justify-content: center; flex-wrap: wrap;
}
.tfx-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--tfx-sp-6); border-radius: var(--tfx-r-sm); border: none;
  background: var(--tfx-teal); color: #fff; font-family: var(--tfx-font);
  font-size: var(--tfx-fs-small); font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: var(--tfx-shadow-sm); transition: background .15s;
}
.tfx-btn-primary:hover { background: var(--tfx-teal-600); color: #fff; }
.tfx-btn-ghost-light {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--tfx-sp-6); border-radius: var(--tfx-r-sm);
  border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9); font-family: var(--tfx-font);
  font-size: var(--tfx-fs-small); font-weight: 600; text-decoration: none; transition: background .15s;
}
.tfx-btn-ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; }
.tfx-hero__stats {
  display: flex; gap: var(--tfx-sp-10); justify-content: center;
  margin-top: var(--tfx-sp-10); flex-wrap: wrap;
}
.tfx-hero__stat { text-align: center; }
.tfx-hero__stat-num { font-size: 1.5rem; font-weight: 700; color: #9FD4D4; }
.tfx-hero__stat-label { font-size: var(--tfx-fs-micro); color: rgba(255,255,255,.5); margin-top: var(--tfx-sp-1); }

/* Home sections */
.tfx-section { padding: var(--tfx-sp-16) var(--tfx-gutter); }
.tfx-section--alt { background: var(--tfx-surface); }
.tfx-section__wrap { max-width: var(--tfx-w-content); margin: 0 auto; }
.tfx-section__header { margin-bottom: var(--tfx-sp-10); }
.tfx-section__label {
  display: inline-block; color: var(--tfx-teal-ink); font-size: var(--tfx-fs-micro);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--tfx-sp-3);
}
.tfx-section__title {
  font-size: clamp(1.25rem, 3vw, 1.7rem); color: var(--tfx-navy); font-weight: 700;
  line-height: 1.3; margin-bottom: var(--tfx-sp-3);
}
.tfx-section__desc { color: var(--tfx-ink-soft); font-size: var(--tfx-fs-body); max-width: 560px; line-height: 1.7; }

/* Guide card grid (3-col) */
.tfx-guide-grid { display: grid; grid-template-columns: 1fr; gap: var(--tfx-sp-4); }
@media (min-width: 640px) { .tfx-guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tfx-guide-grid { grid-template-columns: repeat(3, 1fr); } }
.tfx-guide-card {
  background: var(--tfx-surface); border: 1px solid var(--tfx-border); border-radius: var(--tfx-r-lg);
  padding: var(--tfx-sp-6); box-shadow: var(--tfx-shadow-sm);
  transition: transform .18s, box-shadow .18s;
  display: flex; flex-direction: column; gap: var(--tfx-sp-3);
  text-decoration: none; color: inherit;
}
.tfx-guide-card:hover { transform: translateY(-2px); box-shadow: var(--tfx-shadow-md); }
.tfx-guide-card__icon {
  width: 44px; height: 44px; border-radius: var(--tfx-r-md);
  background: var(--tfx-teal-tint); display: flex; align-items: center;
  justify-content: center; font-size: 1.25rem; flex-shrink: 0;
}
.tfx-guide-card__label { font-size: var(--tfx-fs-micro); color: var(--tfx-teal-ink); font-weight: 700; letter-spacing: .06em; }
.tfx-guide-card__title { font-size: var(--tfx-fs-h3); font-weight: 700; color: var(--tfx-navy); line-height: 1.4; }
.tfx-guide-card__desc { font-size: var(--tfx-fs-small); color: var(--tfx-ink-soft); line-height: 1.7; flex: 1; }
.tfx-guide-card__link {
  display: inline-flex; align-items: center; gap: var(--tfx-sp-2);
  color: var(--tfx-teal-ink); font-size: var(--tfx-fs-small); font-weight: 600;
  text-decoration: none; margin-top: auto;
}
.tfx-guide-card__link::after { content: "→"; }
.tfx-guide-card__link:hover { color: var(--tfx-teal-600); }

/* Risk education panel */
.tfx-riskedu {
  background: linear-gradient(135deg, #152238 0%, var(--tfx-navy) 100%);
  border-radius: var(--tfx-r-xl); padding: var(--tfx-sp-10) var(--tfx-sp-8); color: #fff;
  max-width: var(--tfx-w-content); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: var(--tfx-sp-8);
}
@media (min-width: 768px) { .tfx-riskedu { grid-template-columns: 1fr 1fr; align-items: center; } }
.tfx-riskedu__title { font-size: var(--tfx-fs-h2); font-weight: 700; margin-bottom: var(--tfx-sp-4); line-height: 1.3; }
.tfx-riskedu__body { font-size: var(--tfx-fs-small); color: rgba(255,255,255,.75); line-height: 1.8; }
.tfx-riskedu__list { list-style: none; display: flex; flex-direction: column; gap: var(--tfx-sp-3); }
.tfx-riskedu__item { display: flex; align-items: flex-start; gap: var(--tfx-sp-3); font-size: var(--tfx-fs-small); color: rgba(255,255,255,.9); }
.tfx-riskedu__num {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(46,139,139,.25); border: 1px solid rgba(46,139,139,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--tfx-fs-small); font-weight: 700; color: #9FD4D4; flex-shrink: 0;
}

/* Article card grid (recommended section) */
.tfx-article-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--tfx-sp-4);
  max-width: var(--tfx-w-content); margin: 0 auto;
}
@media (min-width: 640px) { .tfx-article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tfx-article-grid { grid-template-columns: repeat(3, 1fr); } }
.tfx-article-card {
  background: var(--tfx-surface); border: 1px solid var(--tfx-border); border-radius: var(--tfx-r-md);
  padding: var(--tfx-sp-5); box-shadow: var(--tfx-shadow-sm);
  display: flex; flex-direction: column; gap: var(--tfx-sp-2);
  text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s; min-height: 44px;
}
.tfx-article-card:hover { box-shadow: var(--tfx-shadow-md); transform: translateY(-1px); }
.tfx-article-card__cat { font-size: var(--tfx-fs-micro); color: var(--tfx-teal-ink); font-weight: 700; letter-spacing: .04em; }
.tfx-article-card__title { font-size: var(--tfx-fs-body); font-weight: 700; color: var(--tfx-navy); line-height: 1.4; }
.tfx-article-card__excerpt {
  font-size: var(--tfx-fs-small); color: var(--tfx-ink-muted); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tfx-article-card__meta { font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); margin-top: var(--tfx-sp-1); }

/* Affiliate disclosure mini (home bottom) */
.tfx-disc-mini {
  max-width: var(--tfx-w-content); margin: 0 auto;
  display: flex; align-items: flex-start; gap: var(--tfx-sp-3);
  background: var(--tfx-disc-bg); border: 1px solid var(--tfx-disc-border);
  border-radius: var(--tfx-r-md); padding: var(--tfx-sp-3) var(--tfx-sp-4);
}
.tfx-disc-mini--section { margin-top: var(--tfx-sp-8); }
.tfx-disc-mini__icon { color: var(--tfx-disc-ink); flex-shrink: 0; }
.tfx-disc-mini__text { font-size: var(--tfx-fs-micro); color: var(--tfx-disc-ink); line-height: 1.7; }

/* ================================================================
   20. Phase 2B — Comparison + Account/Fee components
   (comparison-golden.css + account-fee-golden.css 正本準拠)
   ================================================================ */

/* ---- ComparisonHero (.tfx-cmphero) ---- */
.tfx-cmphero {
  background: linear-gradient(150deg, var(--tfx-navy-900) 0%, var(--tfx-navy) 60%, #1e3a6e 100%);
  padding: var(--tfx-sp-10) var(--tfx-gutter) var(--tfx-sp-8);
}
.tfx-cmphero__inner {
  max-width: var(--tfx-w-article); margin: 0 auto; text-align: center;
}
.tfx-cmphero__badge {
  display: inline-flex; align-items: center; gap: var(--tfx-sp-2);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--tfx-r-pill); padding: 4px 14px;
  font-size: var(--tfx-fs-micro); color: rgba(255,255,255,.85); margin-bottom: var(--tfx-sp-5);
}
.tfx-cmphero__vs {
  display: flex; align-items: center; justify-content: center;
  gap: var(--tfx-sp-8); margin-bottom: var(--tfx-sp-6); flex-wrap: wrap;
}
.tfx-cmphero__broker { display: flex; flex-direction: column; align-items: center; gap: var(--tfx-sp-2); }
.tfx-cmphero__logo {
  width: 72px; height: 72px; border-radius: var(--tfx-r-lg);
  background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: .04em;
}
.tfx-cmphero__bname { font-size: var(--tfx-fs-small); color: rgba(255,255,255,.80); font-weight: 600; }
.tfx-cmphero__divider { font-size: 2rem; font-weight: 700; color: rgba(255,255,255,.25); }
.tfx-cmphero__h1 {
  font-size: clamp(1.3rem, 3.5vw, 1.9rem); font-weight: 700; color: #fff;
  line-height: var(--tfx-lh-tight); margin-bottom: var(--tfx-sp-4); text-wrap: balance;
}
.tfx-cmphero__lead {
  font-size: var(--tfx-fs-small); color: rgba(255,255,255,.75); line-height: 1.75;
  max-width: 540px; margin: 0 auto;
}

/* ---- PriorityGuideGrid (.tfx-priority-grid / .tfx-priority-card) ---- */
.tfx-priority-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--tfx-sp-3); margin: var(--tfx-sp-6) 0;
}
@media (min-width: 560px) { .tfx-priority-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .tfx-priority-grid { grid-template-columns: repeat(3, 1fr); } }
.tfx-priority-card {
  background: var(--tfx-surface); border: 1px solid var(--tfx-border); border-radius: var(--tfx-r-md);
  padding: var(--tfx-sp-4) var(--tfx-sp-5); box-shadow: var(--tfx-shadow-sm);
  display: flex; flex-direction: column; gap: var(--tfx-sp-2);
}
.tfx-priority-card__cond {
  font-size: var(--tfx-fs-micro); font-weight: 700; color: var(--tfx-teal-ink); letter-spacing: .02em;
}
.tfx-priority-card__axis {
  font-size: var(--tfx-fs-small); font-weight: 700; color: var(--tfx-navy); line-height: 1.4;
}
.tfx-priority-card__rec { font-size: var(--tfx-fs-small); color: var(--tfx-ink-soft); line-height: 1.65; }
.tfx-priority-card__note {
  font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted);
  border-top: 1px solid var(--tfx-divider); padding-top: var(--tfx-sp-2); margin-top: auto;
}

/* ---- ProsConsBox — comparison 2-column (.tfx-prosCons) ---- */
.tfx-prosCons { display: grid; grid-template-columns: 1fr; gap: var(--tfx-sp-4); margin: var(--tfx-sp-6) 0; }
@media (min-width: 560px) { .tfx-prosCons { grid-template-columns: 1fr 1fr; } }
.tfx-prosCons__col {
  border-radius: var(--tfx-r-md); padding: var(--tfx-sp-5); border: 1px solid var(--tfx-border);
}
.tfx-prosCons__col--a { background: var(--tfx-teal-tint); border-color: #CCE6E6; }
.tfx-prosCons__col--b { background: var(--tfx-disc-bg); border-color: var(--tfx-disc-border); }
.tfx-prosCons__head { font-size: var(--tfx-fs-small); font-weight: 700; margin-bottom: var(--tfx-sp-3); }
.tfx-prosCons__head--secondary { margin-top: var(--tfx-sp-3); }
.tfx-prosCons__col--a .tfx-prosCons__head { color: var(--tfx-teal-ink); }
.tfx-prosCons__col--b .tfx-prosCons__head { color: var(--tfx-disc-ink); }
.tfx-prosCons__list {
  list-style: none; display: flex; flex-direction: column; gap: var(--tfx-sp-2); font-size: var(--tfx-fs-small);
}
.tfx-prosCons__list li { display: flex; gap: var(--tfx-sp-2); align-items: flex-start; line-height: 1.6; }
.tfx-prosCons__list li::before { flex-shrink: 0; font-weight: 700; }
.tfx-prosCons__col--a .tfx-prosCons__list li::before { content: "✓"; color: var(--tfx-pos); }
.tfx-prosCons__col--b .tfx-prosCons__list li::before { content: "✓"; color: var(--tfx-teal-ink); }
.tfx-prosCons__cons li::before { content: "–" !important; color: var(--tfx-ink-muted) !important; }

/* ---- DecisionGuide (.tfx-decision) ---- */
.tfx-decision {
  background: var(--tfx-surface); border: 1px solid var(--tfx-border); border-radius: var(--tfx-r-lg);
  padding: var(--tfx-sp-6); margin: var(--tfx-sp-8) 0;
}
.tfx-decision__title {
  font-size: var(--tfx-fs-h3); font-weight: 700; color: var(--tfx-navy);
  margin-bottom: var(--tfx-sp-5); display: flex; align-items: center; gap: var(--tfx-sp-3);
}
.tfx-decision__grid { display: grid; grid-template-columns: 1fr; gap: var(--tfx-sp-4); }
@media (min-width: 480px) { .tfx-decision__grid { grid-template-columns: 1fr 1fr; } }
.tfx-decision__col { border-top: 2px solid var(--tfx-border); padding-top: var(--tfx-sp-3); }
.tfx-decision__col-head {
  font-size: var(--tfx-fs-small); font-weight: 700; color: var(--tfx-navy-600); margin-bottom: var(--tfx-sp-3);
}
.tfx-decision__item {
  display: flex; align-items: flex-start; gap: var(--tfx-sp-2); font-size: var(--tfx-fs-small);
  padding: var(--tfx-sp-2) 0; border-bottom: 1px solid var(--tfx-divider); line-height: 1.6;
}
.tfx-decision__item::before { content: "▸"; color: var(--tfx-teal); flex-shrink: 0; }

/* ---- Dual AffiliateCTA (.tfx-cta-dual) ---- */
.tfx-cta-dual {
  display: grid; grid-template-columns: 1fr; gap: var(--tfx-sp-4); margin: var(--tfx-sp-8) 0;
}
@media (min-width: 600px) { .tfx-cta-dual { grid-template-columns: 1fr 1fr; } }
.tfx-cta-dual .tfx-cta { margin: 0; }
.tfx-dual-note {
  font-size: var(--tfx-fs-small); color: var(--tfx-ink-soft); text-align: center; margin-bottom: var(--tfx-sp-3);
}

/* ---- AccountTypeCard (.tfx-account-grid / .tfx-account-card) ---- */
.tfx-account-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--tfx-sp-5); margin: var(--tfx-sp-6) 0;
}
@media (min-width: 600px) { .tfx-account-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tfx-account-grid { grid-template-columns: repeat(3, 1fr); } }
.tfx-account-card {
  background: var(--tfx-surface); border: 1px solid var(--tfx-border);
  border-top: 4px solid var(--tfx-teal); border-radius: var(--tfx-r-md);
  padding: var(--tfx-sp-5); box-shadow: var(--tfx-shadow-sm);
  display: flex; flex-direction: column; gap: var(--tfx-sp-3);
}
.tfx-account-card--beginner { border-top-color: var(--tfx-teal); }
.tfx-account-card--pro      { border-top-color: var(--tfx-navy); }
.tfx-account-card--cost     { border-top-color: var(--tfx-gold); }
.tfx-account-card--caution  { border-top-color: var(--tfx-caution-border); }
.tfx-account-badge {
  display: inline-block; border-radius: var(--tfx-r-pill);
  padding: 3px 12px; font-size: var(--tfx-fs-micro); font-weight: 700; letter-spacing: .03em;
}
.tfx-account-badge--beginner { background: var(--tfx-teal-tint); color: var(--tfx-teal-ink); border: 1px solid #CCE6E6; }
.tfx-account-badge--pro      { background: #E8EDF5; color: var(--tfx-navy); border: 1px solid #C4D0E8; }
.tfx-account-badge--cost     { background: var(--tfx-gold-tint); color: var(--tfx-gold-ink); border: 1px solid #E0CB88; }
.tfx-account-badge--caution  { background: var(--tfx-caution-bg); color: var(--tfx-caution-ink); border: 1px solid #E5C0B0; }
.tfx-account-card__name { font-size: 1.2rem; font-weight: 700; color: var(--tfx-navy); }
.tfx-account-card__cost {
  background: var(--tfx-surface-2); border-radius: var(--tfx-r-sm); padding: var(--tfx-sp-3) var(--tfx-sp-4);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--tfx-sp-2);
}
.tfx-cost-item__label { font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); margin-bottom: 2px; }
.tfx-cost-item__value { font-size: var(--tfx-fs-body); font-weight: 700; color: var(--tfx-navy); }
.tfx-cost-item__note  { font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); }
.tfx-account-card__desc { font-size: var(--tfx-fs-small); color: var(--tfx-ink-soft); line-height: 1.7; }
.tfx-account-card__suit {
  list-style: none; display: flex; flex-direction: column; gap: var(--tfx-sp-2);
  border-top: 1px solid var(--tfx-border); padding-top: var(--tfx-sp-3);
}
.tfx-account-card__suit li {
  display: flex; align-items: flex-start; gap: var(--tfx-sp-2); font-size: var(--tfx-fs-small); line-height: 1.6;
}
.tfx-suit-ok::before { content: "✓"; color: var(--tfx-pos); font-weight: 700; flex-shrink: 0; }
.tfx-suit-ng::before { content: "✗"; color: var(--tfx-neg); font-weight: 700; flex-shrink: 0; }
.tfx-account-card__notforall {
  background: var(--tfx-gold-tint); border-left: 3px solid var(--tfx-gold);
  border-radius: var(--tfx-r-sm); padding: var(--tfx-sp-2) var(--tfx-sp-3);
  font-size: var(--tfx-fs-micro); color: var(--tfx-gold-ink); line-height: 1.6;
}

/* ---- CostVisualBar (.tfx-costbar) ---- */
.tfx-costbar { display: flex; flex-direction: column; gap: var(--tfx-sp-3); margin: var(--tfx-sp-5) 0; }
.tfx-costbar__row {
  display: grid; grid-template-columns: 120px 1fr 60px; align-items: center; gap: var(--tfx-sp-3);
}
.tfx-costbar__label { font-size: var(--tfx-fs-small); font-weight: 600; color: var(--tfx-ink-soft); }
.tfx-costbar__track {
  height: 16px; background: var(--tfx-surface-2); border-radius: var(--tfx-r-pill);
  overflow: hidden; border: 1px solid var(--tfx-border);
}
.tfx-costbar__fill { height: 100%; border-radius: var(--tfx-r-pill); opacity: .75; }
.tfx-costbar__fill--high  { width: 85%; background: var(--tfx-caution-border); opacity: .8; }
.tfx-costbar__fill--mid   { width: 55%; background: var(--tfx-gold); opacity: .8; }
.tfx-costbar__fill--low   { width: 28%; background: var(--tfx-teal); opacity: .8; }
.tfx-costbar__fill--mixed { width: 50%; background: linear-gradient(90deg, var(--tfx-teal) 50%, var(--tfx-gold) 100%); opacity: .75; }
.tfx-costbar__text { font-size: var(--tfx-fs-micro); font-weight: 700; color: var(--tfx-ink-soft); }
.tfx-costbar__note { font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); margin-top: var(--tfx-sp-2); }

/* ================================================================
   21. Archive UI (page-head / filter-bar / card-grid / acard / pagination)
   Design ref: archive-card-mini.html + archive-card-mini.css
   ================================================================ */

/* Page header */
.tfx-page-head {
  background: var(--tfx-surface); border-bottom: 1px solid var(--tfx-border);
  padding: var(--tfx-sp-8) var(--tfx-gutter) var(--tfx-sp-6);
}
.tfx-page-head__inner { max-width: var(--tfx-w-content); margin: 0 auto; }
.tfx-page-head__h1 {
  font-size: clamp(1.3rem, 3.5vw, 1.8rem); font-weight: 700; color: var(--tfx-navy);
  line-height: 1.3; margin-bottom: var(--tfx-sp-2);
}
.tfx-page-head__desc { font-size: var(--tfx-fs-small); color: var(--tfx-ink-soft); line-height: 1.7; }
.tfx-page-head__count { font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); margin-top: var(--tfx-sp-3); }

/* Filter chips bar */
.tfx-filter-bar {
  border-bottom: 1px solid var(--tfx-border); background: var(--tfx-surface); padding: 0 var(--tfx-gutter);
}
.tfx-filter-bar__inner {
  max-width: var(--tfx-w-content); margin: 0 auto;
  display: flex; gap: var(--tfx-sp-2); overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: var(--tfx-sp-3) 0; scrollbar-width: none;
}
.tfx-filter-bar__inner::-webkit-scrollbar { display: none; }
.tfx-filter-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--tfx-sp-4);
  border-radius: var(--tfx-r-pill); border: 1px solid var(--tfx-border);
  background: var(--tfx-surface); font-family: var(--tfx-font); font-size: var(--tfx-fs-small);
  font-weight: 600; color: var(--tfx-ink-soft); white-space: nowrap; text-decoration: none;
  transition: all .15s; cursor: default;
}
a.tfx-filter-chip { cursor: pointer; }
a.tfx-filter-chip:hover { border-color: var(--tfx-teal); color: var(--tfx-teal-ink); background: var(--tfx-teal-tint); }
.tfx-filter-chip--active, .tfx-filter-chip[aria-pressed="true"] {
  background: var(--tfx-navy); color: #fff; border-color: var(--tfx-navy);
}

/* Archive section wrapper */
.tfx-archive { padding: var(--tfx-sp-8) var(--tfx-gutter) var(--tfx-sp-16); }
.tfx-archive__inner { max-width: var(--tfx-w-content); margin: 0 auto; }

/* Article card grid (no-image 3-col) */
.tfx-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--tfx-sp-4); }
@media (min-width: 600px)  { .tfx-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .tfx-card-grid { grid-template-columns: repeat(3, 1fr); } }

/* Article card */
.tfx-acard {
  display: flex; flex-direction: column; gap: var(--tfx-sp-2);
  background: var(--tfx-surface); border: 1px solid var(--tfx-border);
  border-radius: var(--tfx-r-md); padding: var(--tfx-sp-5);
  text-decoration: none; color: inherit; box-shadow: var(--tfx-shadow-sm);
  transition: box-shadow .15s, transform .15s;
}
.tfx-acard:hover { box-shadow: var(--tfx-shadow-md); transform: translateY(-2px); }
.tfx-acard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--tfx-sp-2); }
.tfx-acard__date { font-size: var(--tfx-fs-micro); color: var(--tfx-ink-muted); white-space: nowrap; }
.tfx-acard__title {
  font-size: var(--tfx-fs-body); font-weight: 700; color: var(--tfx-navy); line-height: 1.4;
  margin-top: var(--tfx-sp-1);
}
.tfx-acard__excerpt {
  font-size: var(--tfx-fs-small); color: var(--tfx-ink-soft); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tfx-acard__arrow { margin-top: auto; font-size: var(--tfx-fs-small); color: var(--tfx-teal-ink); font-weight: 700; }

/* Pagination */
.tfx-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: var(--tfx-sp-2); margin-top: var(--tfx-sp-10); flex-wrap: wrap;
}
.tfx-pagination__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; border-radius: var(--tfx-r-sm);
  border: 1px solid var(--tfx-border); background: var(--tfx-surface);
  font-family: var(--tfx-font); font-size: var(--tfx-fs-small); font-weight: 600;
  color: var(--tfx-ink-soft); text-decoration: none; transition: all .15s;
}
a.tfx-pagination__btn:hover { border-color: var(--tfx-teal); color: var(--tfx-teal-ink); }
.tfx-pagination__btn[aria-current="page"] { background: var(--tfx-navy); color: #fff; border-color: var(--tfx-navy); }
.tfx-pagination__btn--prev, .tfx-pagination__btn--next { padding: 0 var(--tfx-sp-4); }

/* ================================================================
   22. Mobile Menu (overlay + drawer)
   Design ref: mobile-entry-menu.html + mobile-entry-menu.css
   ================================================================ */

/* Dim overlay */
.tfx-overlay {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(15,27,51,.55); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.tfx-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Slide-in drawer */
.tfx-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
  width: min(300px, 82vw); background: var(--tfx-navy);
  color: rgba(255,255,255,.88);
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(-100%); transition: transform .25s ease;
  box-shadow: 4px 0 24px rgba(15,27,51,.35);
}
.tfx-drawer.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .tfx-drawer { transition: none; }
  .tfx-overlay { transition: none; }
}

/* Drawer header row */
.tfx-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--tfx-sp-5); height: 56px;
  border-bottom: 1px solid rgba(255,255,255,.12); flex-shrink: 0;
}
.tfx-drawer__logo { font-weight: 700; font-size: .95rem; color: #fff; }
.tfx-drawer__close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: rgba(255,255,255,.72); cursor: pointer;
  font-size: 1.1rem; border-radius: var(--tfx-r-sm); flex-shrink: 0;
}
.tfx-drawer__close:hover { color: #fff; background: rgba(255,255,255,.10); }

/* Section label */
.tfx-drawer__section-label {
  display: block; padding: var(--tfx-sp-4) var(--tfx-sp-5) var(--tfx-sp-2);
  font-size: var(--tfx-fs-micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}

/* Nav items — 52px tap target */
.tfx-drawer__item {
  display: flex; align-items: center; gap: var(--tfx-sp-3);
  min-height: 52px; padding: 0 var(--tfx-sp-5);
  text-decoration: none; color: rgba(255,255,255,.82); font-size: var(--tfx-fs-small);
  transition: background .12s;
}
.tfx-drawer__item:hover { background: rgba(255,255,255,.08); color: #fff; }
.tfx-drawer__icon { font-size: 1.1rem; flex-shrink: 0; width: 24px; text-align: center; }

/* Persistent risk note at bottom */
.tfx-drawer__risk {
  margin-top: auto; padding: var(--tfx-sp-4) var(--tfx-sp-5);
  border-top: 1px solid rgba(255,255,255,.10); flex-shrink: 0;
}
.tfx-drawer__risk-text { font-size: var(--tfx-fs-micro); color: rgba(255,255,255,.50); line-height: 1.7; }

/* Hide drawer on desktop — hardware-accelerated via GPU */
@media (min-width: 880px) {
  .tfx-drawer, .tfx-overlay { display: none !important; }
}

/* ================================================================
   19. Small screen overrides (≤ 430px)
   ================================================================ */
@media (max-width: 430px) {
  .tfx-articlehero__inner { padding: var(--tfx-sp-6) var(--tfx-sp-4) var(--tfx-sp-5); }
  .tfx-layout { padding: var(--tfx-sp-6) var(--tfx-sp-4) var(--tfx-sp-10); }
  .tfx-cta, .tfx-warn, .tfx-checklist, .tfx-nextpath { padding: var(--tfx-sp-4); }
  .tfx-byline__meta { margin-left: 0; }
  .tfx-footer__inner { gap: var(--tfx-sp-6); }
  /* HOME */
  .tfx-hero { padding: var(--tfx-sp-10) var(--tfx-sp-4) var(--tfx-sp-8); }
  .tfx-hero__actions { flex-direction: column; align-items: stretch; }
  .tfx-hero__actions a { justify-content: center; }
  .tfx-section { padding: var(--tfx-sp-10) var(--tfx-sp-4); }
  .tfx-riskedu { padding: var(--tfx-sp-6) var(--tfx-sp-5); }
  /* Phase 2B */
  .tfx-cmphero { padding: var(--tfx-sp-8) var(--tfx-sp-4) var(--tfx-sp-6); }
  .tfx-cmphero__vs { gap: var(--tfx-sp-4); }
  .tfx-cmphero__logo { width: 56px; height: 56px; font-size: 1rem; }
  .tfx-decision { padding: var(--tfx-sp-5); }
  .tfx-account-card { padding: var(--tfx-sp-4); }
  .tfx-costbar__row { grid-template-columns: 100px 1fr 50px; gap: var(--tfx-sp-2); }
  /* Archive */
  .tfx-page-head { padding: var(--tfx-sp-6) var(--tfx-sp-4); }
  .tfx-archive { padding: var(--tfx-sp-6) var(--tfx-sp-4) var(--tfx-sp-12); }
}