/**
 * fee-ledger.css — 公式料金台帳（A3 独立プロトタイプ, /tools/fees/ 予定）。
 *
 * 方針
 *   A2.1のブランドトーン（クリーム地・白カード・角丸・細い枠線・落ち着いた文字）に合わせるが、
 *   profit-calculator.css は丸ごとコピーしない。このファイルだけで完結させる。
 *   スマホ優先。「なぜ信用できるか」を説明するページなので、派手な演出は使わない。
 *
 * 表示階層（守ること）
 *   料金 → 条件 → 公式確認日 → 出典
 *   公式確認日を埋もれさせないが、料金より強調しない。
 *
 * ここにある数値はすべてレイアウトのためのもので、料金とは無関係。
 */

.fl-root {
  --fl-bg: #faf7f2;
  --fl-card: #ffffff;
  --fl-ink: #2b2622;
  --fl-ink-soft: #5f574f;
  /* 白地・クリーム地のどちらでも 4.5:1 を満たす濃さ。これより薄くしない。 */
  --fl-ink-faint: #6f665d;
  --fl-line: #e6ded3;
  --fl-line-strong: #d5c9ba;
  --fl-accent: #3f6b52;
  --fl-accent-soft: #eef3ef;
  --fl-warn: #8a5a17;
  --fl-warn-soft: #fbf1df;
  --fl-expired: #9c3227;
  --fl-expired-soft: #fdf1ef;
  --fl-radius: 12px;

  background: var(--fl-bg);
  color: var(--fl-ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.7;
  padding: 20px 16px 48px;
  max-width: 880px;
  margin: 0 auto;
  overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
  .fl-root {
    --fl-bg: #1c1a18;
    --fl-card: #26231f;
    --fl-ink: #eee8e0;
    --fl-ink-soft: #bdb4aa;
    --fl-ink-faint: #a99f95;
    --fl-line: #3a3530;
    --fl-line-strong: #4a443d;
    --fl-accent: #93c4a8;
    --fl-accent-soft: #23302a;
    --fl-warn: #e0b567;
    --fl-warn-soft: #332a17;
    --fl-expired: #ea9e93;
    --fl-expired-soft: #33211e;
  }
}

.fl-root * { box-sizing: border-box; }

/* hidden 属性を必ず効かせる（アコーディオンに display:grid/flex を当てるため）。 */
.fl-root [hidden] { display: none !important; }

.fl-root :focus-visible {
  outline: 3px solid var(--fl-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- ヘッダー ---------- */

.fl-head { margin-bottom: 20px; }
.fl-head h1 { font-size: 1.35rem; line-height: 1.5; margin: 0 0 10px; }
.fl-lead { color: var(--fl-ink-soft); margin: 0 0 6px; font-size: 0.95rem; }
.fl-fine { color: var(--fl-ink-faint); margin: 0; font-size: 0.82rem; }
.fl-generated { color: var(--fl-ink-faint); margin: 10px 0 0; font-size: 0.82rem; }

.fl-global-error {
  background: var(--fl-expired-soft);
  color: var(--fl-expired);
  border: 1px solid var(--fl-expired);
  border-radius: var(--fl-radius);
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 0.9rem;
}

/* ---------- サービスの節 ---------- */

.fl-service {
  margin: 0 0 32px;
}

.fl-service h2 {
  font-size: 1.1rem;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fl-line-strong);
}

.fl-feetype {
  margin: 0 0 18px;
}

.fl-feetype h3 {
  font-size: 0.92rem;
  color: var(--fl-ink-soft);
  margin: 0 0 10px;
  font-weight: 600;
}

.fl-cards {
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .fl-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 料金カード ---------- */

.fl-card {
  /* grid item は既定で min-width:auto のため、中の表(min-width:480px)が
     カードごと画面幅を突き破って右側が切れる(grid blowout)。
     0にして初めて .fl-table-wrap の overflow-x:auto が内側で効くようになる。 */
  min-width: 0;
  background: var(--fl-card);
  border: 1px solid var(--fl-line);
  border-radius: var(--fl-radius);
  padding: 14px 16px;
}

/* 過去の料金は「退かせる」が、文字のコントラストは落とさない。
   以前は opacity: 0.72 で薄くしていたが、カード内の文字まで一緒に薄まり、
   適用期間・注記が実効3.1:1、バッジが2.6:1とAA(4.5:1)未達だった（2026-09-14 監査で実測）。
   背景を地の色へ寄せて退かせ、状態そのものは「過去の料金」バッジの文字で伝える。 */
.fl-card--past { background: var(--fl-bg); }
.fl-card--upcoming { border-style: dashed; }
.fl-card--expired { border-color: var(--fl-expired); }

.fl-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.fl-card-title {
  font-weight: 600;
  font-size: 0.98rem;
}

.fl-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.fl-badge--current { background: var(--fl-accent-soft); color: var(--fl-accent); }
.fl-badge--upcoming { background: var(--fl-line); color: var(--fl-ink-soft); }
/* ink-faint では line 地に対し 4.22:1 でAA未達だったため ink-soft（5.32:1）にする。
   「適用開始前」と同じ配色になるが、状態は色ではなくバッジの文言で区別している。 */
.fl-badge--past { background: var(--fl-line); color: var(--fl-ink-soft); }

.fl-badge--fresh { background: var(--fl-accent-soft); color: var(--fl-accent); }
.fl-badge--stale { background: var(--fl-warn-soft); color: var(--fl-warn); }
.fl-badge--expired { background: var(--fl-expired-soft); color: var(--fl-expired); }

/* 色だけに頼らない: staleにはアイコン文字、expiredには明示テキストを常に添える（下のfl-freshness参照）。 */

.fl-freshness {
  font-size: 0.78rem;
  margin: 0 0 8px;
}
.fl-freshness--stale { color: var(--fl-warn); }
.fl-freshness--expired { color: var(--fl-expired); font-weight: 600; }

.fl-condition {
  font-size: 0.82rem;
  color: var(--fl-ink-soft);
  margin: 0 0 8px;
}

/* ---------- 料率・段階・表の整形 ---------- */

.fl-structure { margin: 8px 0; font-size: 0.88rem; }

.fl-rate-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}
.fl-rate-row + .fl-rate-row { border-top: 1px dashed var(--fl-line); }
.fl-rate-value { font-weight: 600; }

.fl-parts {
  margin: 4px 0 0 14px;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--fl-line);
}
.fl-parts li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0 3px 10px;
  font-size: 0.85rem;
  color: var(--fl-ink-soft);
}

.fl-table-wrap {
  overflow-x: auto;
  margin: 8px 0;
  border: 1px solid var(--fl-line);
  border-radius: 8px;
}
.fl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 480px;
}
.fl-table th, .fl-table td {
  padding: 6px 8px;
  text-align: right;
  border-bottom: 1px solid var(--fl-line);
  white-space: nowrap;
}
.fl-table th:first-child, .fl-table td:first-child { text-align: left; }
.fl-table thead th {
  background: var(--fl-accent-soft);
  color: var(--fl-ink);
  font-weight: 600;
}

.fl-note {
  font-size: 0.8rem;
  color: var(--fl-ink-faint);
  margin: 6px 0;
}

/* ---------- 出典（内訳の折りたたみ） ---------- */

.fl-detail-toggle {
  appearance: none;
  background: none;
  border: 1px solid var(--fl-line-strong);
  border-radius: 999px;
  color: var(--fl-ink-soft);
  font-size: 0.8rem;
  padding: 6px 14px;
  /* タップ領域は約44px以上を目標にする（A3 FINAL QA）。見た目の高さは変えず、
     paddingで確保する。 */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.fl-detail-toggle:hover { background: var(--fl-accent-soft); }

.fl-source {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--fl-line);
  font-size: 0.78rem;
  color: var(--fl-ink-faint);
}
.fl-source dt { font-weight: 600; margin-top: 6px; }
.fl-source dd { margin: 2px 0 0; }
.fl-source blockquote {
  margin: 4px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--fl-line);
  font-style: normal;
}
.fl-source a {
  color: var(--fl-accent);
  word-break: break-all;
  /* リンクは文字サイズのまま、当たり判定だけを44px近くまで広げる。
     paddingと同量の負のmarginで相殺し、レイアウトは変えない。 */
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}

/* ---------- 適用期間 ---------- */

.fl-period { font-size: 0.8rem; color: var(--fl-ink-faint); margin: 2px 0 8px; }

/* ---------- 送料の節 ---------- */

.fl-shipping-group h3 { font-size: 0.98rem; margin: 0 0 8px; }
.fl-shipping-group { margin: 0 0 16px; }
.fl-shipping-meta { font-size: 0.82rem; color: var(--fl-ink-soft); margin: 0 0 6px; }

@media (prefers-reduced-motion: reduce) {
  .fl-root * { transition: none !important; animation: none !important; }
}