/* feecalc.css — ChainGain Fee Calculator widget (Trust Teal / BEM / mobile-first)
 * scope: 全クラスは .cg-feecalc 配下。色は CSS 変数で上書き可（サイト本体トークンに合わせて再スキン）。
 * dark mode: ファイル末尾で data-theme="dark"/.dark-theme/.dark-mode/prefers-color-scheme に対応（変数再定義）。
 */
.cg-feecalc {
  --cg-fc-teal: #0fb5a8;
  --cg-fc-teal-dark: #0a8f85;
  --cg-fc-gold: #e8b14c;
  --cg-fc-navy: #0e1b2a;
  --cg-fc-ink: #1f2d3d;
  --cg-fc-muted: #5b6b7a;
  --cg-fc-bg: #ffffff;
  --cg-fc-bg-alt: #f3f7f8;
  --cg-fc-border: #d8e3e3;
  --cg-fc-good: #1c8c5a;
  --cg-fc-good-bg: #e6f5ec;
  --cg-fc-warn: #b1442f;
  --cg-fc-warn-bg: #fbeae6;

  font-family: inherit;
  color: var(--cg-fc-ink);
  background: var(--cg-fc-bg);
  border: 1px solid var(--cg-fc-border);
  border-radius: 14px;
  padding: clamp(14px, 3vw, 22px);
  margin: 1.5rem 0;
  box-shadow: 0 2px 12px rgba(14, 27, 42, .06);
}
.cg-feecalc *, .cg-feecalc *::before, .cg-feecalc *::after { box-sizing: border-box; }

.cg-feecalc__title { font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 700; color: var(--cg-fc-navy); margin: 0 0 .25rem; }
.cg-feecalc__sub { font-size: .85rem; color: var(--cg-fc-muted); margin: 0 0 1rem; }

.cg-feecalc__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem 1rem; align-items: end; }
.cg-feecalc__field { display: flex; flex-direction: column; gap: .3rem; }
.cg-feecalc__label { font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--cg-fc-muted); }
.cg-feecalc__input, .cg-feecalc__select {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--cg-fc-border); border-radius: 8px;
  background: var(--cg-fc-bg); color: var(--cg-fc-ink); width: 100%;
}
.cg-feecalc__input:focus, .cg-feecalc__select:focus { outline: 2px solid var(--cg-fc-teal); outline-offset: 1px; border-color: var(--cg-fc-teal); }

.cg-feecalc__toggle { display: inline-flex; border: 1px solid var(--cg-fc-border); border-radius: 8px; overflow: hidden; }
.cg-feecalc__toggle-btn { font: inherit; font-size: .82rem; font-weight: 600; padding: .5rem .7rem; border: 0; background: var(--cg-fc-bg); color: var(--cg-fc-muted); cursor: pointer; }
.cg-feecalc__toggle-btn--active { background: var(--cg-fc-teal); color: #fff; }

.cg-feecalc__advanced { margin-top: .9rem; }
.cg-feecalc__advanced > summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--cg-fc-teal-dark); }
.cg-feecalc__advanced[open] > summary { margin-bottom: .75rem; }

.cg-feecalc__results { margin-top: 1.1rem; }
.cg-feecalc__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cg-feecalc__table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--cg-fc-muted); padding: .4rem .55rem; border-bottom: 2px solid var(--cg-fc-border); }
.cg-feecalc__table td { padding: .6rem .55rem; border-bottom: 1px solid var(--cg-fc-border); vertical-align: middle; color: var(--cg-fc-ink); }
.cg-feecalc__row--cheapest { background: var(--cg-fc-good-bg); }
.cg-feecalc__row--cheapest td:first-child { box-shadow: inset 3px 0 0 var(--cg-fc-good); }

.cg-feecalc__ex { font-weight: 700; color: var(--cg-fc-navy); }
.cg-feecalc__cost { font-weight: 700; color: var(--cg-fc-navy); white-space: nowrap; }
.cg-feecalc__cost-pct { font-size: .78rem; color: var(--cg-fc-muted); }
.cg-feecalc__headline { font-size: .82rem; color: var(--cg-fc-muted); white-space: nowrap; }

.cg-feecalc__badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; line-height: 1.5; white-space: nowrap; }
.cg-feecalc__badge--nokyc { background: var(--cg-fc-good-bg); color: var(--cg-fc-good); }
.cg-feecalc__badge--kyc { background: var(--cg-fc-warn-bg); color: var(--cg-fc-warn); }
.cg-feecalc__badge--dex { background: #eef0fb; color: #4a4fb0; }
.cg-feecalc__badge--partner { background: #fff5e2; color: #9a6a12; border: 1px solid var(--cg-fc-gold); margin-left: .3rem; }
.cg-feecalc__limit { display: block; font-size: .72rem; color: var(--cg-fc-muted); margin-top: .15rem; }
.cg-feecalc__cheapest-tag { font-size: .66rem; font-weight: 700; color: var(--cg-fc-good); text-transform: uppercase; margin-left: .35rem; }

.cg-feecalc__disclaimer { margin-top: 1rem; font-size: .76rem; line-height: 1.5; color: var(--cg-fc-muted); border-top: 1px dashed var(--cg-fc-border); padding-top: .7rem; }
.cg-feecalc__updated { font-size: .72rem; color: var(--cg-fc-muted); }
.cg-feecalc__note { font-size: .72rem; color: var(--cg-fc-muted); }

/* mobile: テーブル → 積層カード（th を data-label で代替） */
@media (max-width: 560px) {
  .cg-feecalc__table thead { position: absolute; left: -9999px; }
  .cg-feecalc__table, .cg-feecalc__table tbody, .cg-feecalc__row, .cg-feecalc__table td { display: block; width: 100%; }
  .cg-feecalc__row { border: 1px solid var(--cg-fc-border); border-radius: 10px; margin-bottom: .7rem; padding: .3rem .2rem; }
  .cg-feecalc__row--cheapest { border-color: var(--cg-fc-good); }
  .cg-feecalc__table td { border-bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .35rem .7rem; }
  .cg-feecalc__table td::before { content: attr(data-label); font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--cg-fc-muted); font-weight: 600; }
}

/* =============================================================
 * Dark mode — サイトは data-theme="dark" / .dark-theme / .dark-mode / OS設定 で切替。
 * 白カード固定をやめ、ダーク時はカードもダーク＋文字を明色へ（変数を再定義＝全 var 駆動スタイルが自動追従）。
 * td/th は明示色でサイトのグローバル dark ルール（色の上書き）に勝つ。
 * ============================================================= */
body[data-theme="dark"] .cg-feecalc,
html[data-theme="dark"] .cg-feecalc,
.dark-theme .cg-feecalc,
body.dark-mode .cg-feecalc {
  --cg-fc-teal: #2dd4bf;
  --cg-fc-teal-dark: #14b8a6;
  --cg-fc-navy: #f1f5f9;
  --cg-fc-ink: #e8edf2;
  --cg-fc-muted: #a3b1c2;
  --cg-fc-bg: #131f2e;
  --cg-fc-bg-alt: #1b2a3b;
  --cg-fc-border: #2d3f52;
  --cg-fc-good: #5fd39a;
  --cg-fc-good-bg: rgba(34, 197, 94, .18);
  --cg-fc-warn: #f0857a;
  --cg-fc-warn-bg: rgba(240, 133, 122, .18);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
body[data-theme="dark"] .cg-feecalc__table td,
html[data-theme="dark"] .cg-feecalc__table td,
.dark-theme .cg-feecalc__table td,
body.dark-mode .cg-feecalc__table td { color: var(--cg-fc-ink); }
body[data-theme="dark"] .cg-feecalc__table th,
html[data-theme="dark"] .cg-feecalc__table th,
.dark-theme .cg-feecalc__table th,
body.dark-mode .cg-feecalc__table th { color: var(--cg-fc-muted); }
body[data-theme="dark"] .cg-feecalc__badge--dex,
html[data-theme="dark"] .cg-feecalc__badge--dex,
.dark-theme .cg-feecalc__badge--dex,
body.dark-mode .cg-feecalc__badge--dex { background: rgba(99, 102, 241, .22); color: #b9bdf7; }

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]):not(.light-theme) .cg-feecalc {
    --cg-fc-teal: #2dd4bf; --cg-fc-teal-dark: #14b8a6; --cg-fc-navy: #f1f5f9;
    --cg-fc-ink: #e8edf2; --cg-fc-muted: #a3b1c2;
    --cg-fc-bg: #131f2e; --cg-fc-bg-alt: #1b2a3b; --cg-fc-border: #2d3f52;
    --cg-fc-good: #5fd39a; --cg-fc-good-bg: rgba(34, 197, 94, .18);
    --cg-fc-warn: #f0857a; --cg-fc-warn-bg: rgba(240, 133, 122, .18);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  }
  body:not([data-theme="light"]):not(.light-theme) .cg-feecalc__table td { color: var(--cg-fc-ink); }
  body:not([data-theme="light"]):not(.light-theme) .cg-feecalc__table th { color: var(--cg-fc-muted); }
  body:not([data-theme="light"]):not(.light-theme) .cg-feecalc__badge--dex { background: rgba(99, 102, 241, .22); color: #b9bdf7; }
}