@charset "UTF-8";

/* =============================================================================
 *  c-btn — Common Button Component (Phase 6-A)
 *  -----------------------------------------------------------------------------
 *  共通ボタン基盤。tokens.css 前提（assets/css/foundation/tokens.css）。
 *
 *  - 既存 .btn / .btn-primary / .btn--primary / .btn--outline 等とは衝突しないよう
 *    .c- プレフィックスで分離
 *  - HTML への <link> 適用はまだ行わない（並走配置のみ）
 *  - icon 付きボタン・loading 表示・aria-disabled に対応
 *  - 主要サイズ (.c-btn / .c-btn--md) は SP タップ領域 44px を確保
 *
 *  参考:
 *    docs/design-audit/04-component-policy.md  §1 Button
 *    docs/design-audit/11-phase5-tokens-report.md
 *
 *  使用例:
 *    <button class="c-btn c-btn--primary">送信</button>
 *    <a class="c-btn c-btn--outline c-btn--block">詳細を見る</a>
 *    <button class="c-btn c-btn--primary c-btn--lg">
 *      <span class="c-btn__icon"><svg ...></svg></span>
 *      <span class="c-btn__text">追加入金</span>
 *    </button>
 *    <button class="c-btn c-btn--primary is-loading" aria-busy="true">送信中</button>
 *
 * ============================================================================= */

/* ==========================================================================
 * 1. Base (= .c-btn / .c-btn--md 相当)
 *
 *    - inline-flex で icon と text を gap 配置
 *    - min-height で 44px (--btn-h-md) を保証 → SP タップ領域確保
 *    - font は tokens.css のスケールに準拠
 *    - 全 variant の共通土台
 * ========================================================================== */
.c-btn {
  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);                  /* icon ↔ text 8px */

  /* size (default = md) */
  min-height: var(--btn-h-md);           /* 44px */
  padding: 0 var(--space-md);            /* 16px */

  /* typography */
  font-family: var(--font-family-base);
  font-size: var(--font-md);             /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-base);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;

  /* surface */
  background-color: transparent;
  color: inherit;
  border: 1px solid transparent;
  border-radius: var(--radius-md);       /* 8px */

  /* interaction */
  cursor: pointer;
  transition: var(--transition-base);
  user-select: none;

  /* reset */
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* a 要素として使う場合の補正（visited 等で色が変わらないようにする） */
a.c-btn,
a.c-btn:visited {
  color: inherit;
}

/* ==========================================================================
 * 2. Internal Elements
 * ========================================================================== */
.c-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-md);   /* 16px - 標準アイコンサイズ */
  height: var(--icon-md);
  line-height: 0;
}
.c-btn__icon > svg,
.c-btn__icon > img,
.c-btn__icon > i {
  width: 100%;
  height: 100%;
  display: block;
}

.c-btn__text {
  display: inline-block;
}

/* ==========================================================================
 * 3. Variants — 用途別の見た目
 * ========================================================================== */

/* 3.1 Primary — 主要 CTA（緑ベース） */
.c-btn--primary {
  /* 白文字コントラスト確保: brand(#56B25D)=2.65:1 は不足のため brand-dark(4.63:1) を地色に */
  background-color: var(--color-brand-dark);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-dark);
}
.c-btn--primary:hover {
  background-color: var(--color-brand-darker);
  border-color: var(--color-brand-darker);
}

/* 3.2 Outline — 緑アウトライン（副次 CTA） */
.c-btn--outline {
  background-color: var(--color-bg);
  color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}
.c-btn--outline:hover {
  background-color: var(--color-brand-bg);
  color: var(--color-brand-dark);
}

/* 3.3 Ghost — 装飾なし（テキストリンク風） */
.c-btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: transparent;
}
.c-btn--ghost:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-text);
}

/* 3.4 Danger — 退会・解約・削除 */
.c-btn--danger {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
}
.c-btn--danger:hover {
  background-color: var(--color-error);
  border-color: var(--color-error);
  filter: brightness(0.92);
}
.c-btn--danger:focus-visible {
  box-shadow: var(--shadow-focus-err);
}

/* 3.5 Muted — 非優先操作（キャンセル・「あとで」など） */
.c-btn--muted {
  background-color: var(--color-bg-muted);
  color: var(--color-text-muted);
  border-color: var(--color-bg-muted);
}
.c-btn--muted:hover {
  background-color: var(--color-border-soft);
  border-color: var(--color-border-soft);
  color: var(--color-text);
}

/* ==========================================================================
 * 3.6 Phase 6-G 追補 — fund-card 5 種ボタンの色差別化を表現する variant
 *
 *    既存 .fund-btn / .fund-btn_2 / .fund-btn_3 / .fund-btn_4 / .fund-btn_5 を
 *    将来 c-btn--* で表現するための受け皿。HTML へはまだ適用しない。
 *
 *    fund-btn   (ファンド詳細・solid dark-blue)  → .c-btn--info
 *    fund-btn_2 (成立前/時書面・outline dark-blue) → .c-btn--outline-info
 *    fund-btn_3 (＋追加投資・solid orange)        → .c-btn--warning
 *    fund-btn_4 (変更・取消・solid gray-light)    → .c-btn--muted （既存）
 *    fund-btn_5 (セカトレ・solid sky)             → .c-btn--info （info を共用、または将来 --info-sky を別添）
 * ========================================================================== */

/* 3.6.1 Info — 解説/補足/注目（青系 solid） */
.c-btn--info {
  background-color: var(--color-info);
  color: var(--color-text-inverse);
  border-color: var(--color-info);
}
.c-btn--info:hover {
  background-color: var(--color-info);
  border-color: var(--color-info);
  filter: brightness(0.92);
}
.c-btn--info:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* 3.6.2 Warning — 注意/期間限定/追加投資（橙系 solid） */
.c-btn--warning {
  background-color: var(--color-warning);
  color: var(--color-text-inverse);
  border-color: var(--color-warning);
}
.c-btn--warning:hover {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  filter: brightness(0.92);
}

/* 3.6.3 Outline Info — 副次的 info CTA（fund-btn_2 想定） */
.c-btn--outline-info {
  background-color: var(--color-bg);
  color: var(--color-info);
  border-color: var(--color-info);
}
.c-btn--outline-info:hover {
  background-color: var(--color-info-bg);
  color: var(--color-info);
  border-color: var(--color-info);
}

/* 3.6.4 Phase 6-G2 追補 — Info Sky (明水色 solid)
 *   .c-btn--info (#2F6DD0 明青) と区別が必要なケース用。
 *   fund-list の .fund-btn_5 (セカトレ) が .fund-btn (ファンド詳細) と
 *   同色になる問題を解消するために追加。
 *   tokens.css の既存 --color-sky (#39B6D9) を使用、追加トークンなし。
 */
.c-btn--info-sky {
  background-color: var(--color-sky);
  color: var(--color-text-inverse);
  border-color: var(--color-sky);
}
.c-btn--info-sky:hover {
  background-color: var(--color-sky);
  border-color: var(--color-sky);
  filter: brightness(0.92);
}

/* 3.6.5 Phase 6-G2 追補 — Muted Dark (淡灰 bg + 濃色テキスト)
 *   .c-btn--muted は color が --color-text-muted (#707070) で
 *   文字視認性が低い問題を解消するため、濃色テキスト版を追加。
 *   fund-list の .fund-btn_4 (変更・取消) で使用想定。
 *   tokens.css 既存の --color-text (#192C3C、= 旧 --color-dark-blue) を使用、
 *   追加トークンなし。
 */
.c-btn--muted-dark {
  background-color: var(--color-bg-muted);
  color: var(--color-text);
  border-color: var(--color-border-soft);
}
.c-btn--muted-dark:hover {
  background-color: var(--color-border-soft);
  border-color: var(--color-border-soft);
  color: var(--color-text);
}

/* ==========================================================================
 * 3.7 Phase 6-G 追補 — Ghost variants（色付きテキストリンク風）
 *
 *    背景は通常 transparent、hover で淡色 bg。
 *    fund-card のような密度の高いアクション群で、視覚的に「主役以外」を
 *    弱く差別化したい場合に使う。
 *
 *    既存 .c-btn--ghost (中立 hover bg-subtle) と区別するため、色付き派生を別添。
 * ========================================================================== */

/* 3.7.1 Ghost Brand — 緑系の控えめアクション */
.c-btn--ghost-brand {
  background-color: transparent;
  color: var(--color-brand-dark);
  border-color: transparent;
}
.c-btn--ghost-brand:hover {
  background-color: var(--color-brand-bg);
  color: var(--color-brand-dark);
}

/* 3.7.2 Ghost Info — 青系の控えめアクション */
.c-btn--ghost-info {
  background-color: transparent;
  color: var(--color-info);
  border-color: transparent;
}
.c-btn--ghost-info:hover {
  background-color: var(--color-info-bg);
  color: var(--color-info);
}

/* 3.7.3 Ghost Warning — 橙系の控えめアクション */
.c-btn--ghost-warning {
  background-color: transparent;
  color: var(--color-warning);
  border-color: transparent;
}
.c-btn--ghost-warning:hover {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

/* 3.7.4 Ghost Danger — 退会・解約系の控えめ表示 */
.c-btn--ghost-danger {
  background-color: transparent;
  color: var(--color-error);
  border-color: transparent;
}
.c-btn--ghost-danger:hover {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}
.c-btn--ghost-danger:focus-visible {
  box-shadow: var(--shadow-focus-err);
}

/* 3.7.5 Ghost Muted — 完全に弱いアクション（リンク並み） */
.c-btn--ghost-muted {
  background-color: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}
.c-btn--ghost-muted:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-text);
}

/* ==========================================================================
 * 3.8 Task 9F-1 追補 — Success variant
 *
 *    旧 .btn--green (#0C8816) を c-btn 体系に取り込むための semantic 分離 variant。
 *    .c-btn--primary (#56B25D brand bright) と色を区別して、
 *    「追加入金」「入金確定」「申請送信」などの positive action / success state を表現する。
 *    色は tokens.css の --color-success (#0C8816、= --color-brand-dark) を流用。
 * ========================================================================== */
.c-btn--success {
  background-color: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}
.c-btn--success:hover {
  background-color: var(--color-success);
  border-color: var(--color-success);
  filter: brightness(0.92);
}
.c-btn--success:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* ==========================================================================
 * 3.9 Task 9F-4-b 追補 — Accent variant
 *
 *    旧 .btn--accent (#F08428 orange) を c-btn 体系に取り込むための accent variant。
 *    point-history の「ポイントを貯める」のような promotion / highlight CTA を想定。
 *    色は tokens.css の --color-orange (#F08428) を流用。
 *    .c-btn--warning (--color-warning #B7791F golden brown) とは色相を区別する。
 * ========================================================================== */
.c-btn--accent {
  background-color: var(--color-orange);
  color: var(--color-text-inverse);
  border-color: var(--color-orange);
}
.c-btn--accent:hover {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
  filter: brightness(0.92);
}
.c-btn--accent:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* ==========================================================================
 * 3.10 Task 9F-button-fix 追補 — a 要素の solid variant color governance
 *
 *    section 1 の `a.c-btn, a.c-btn:visited { color: inherit; }` (specificity 0,1,1)
 *    が solid variants の color: var(--color-text-inverse) (specificity 0,1,0) を
 *    上書きしてしまい、<a class="c-btn c-btn--success"> の text が white ではなく
 *    body inherit (#192C3C) になる問題が Task 9F-2/9F-3/9F-5 で観測された。
 *
 *    本 rule は variant 別の a 要素 override (default + :visited 両方) で
 *    specificity (0,1,2) を確保し、a.c-btn:visited (0,1,2) と同 specificity
 *    に source order 後勝ちで variant color を govern する。
 *
 *    a 要素として現在使われている variants: c-btn--success / c-btn--muted-dark
 *    (c-btn--muted-dark は color: var(--color-text) = body inherit と同色のため
 *    上書き不要、本 rule は white text を期待する solid variants のみを対象とする)
 * ========================================================================== */
a.c-btn--primary,
a.c-btn--primary:visited,
a.c-btn--success,
a.c-btn--success:visited,
a.c-btn--info,
a.c-btn--info:visited,
a.c-btn--info-sky,
a.c-btn--info-sky:visited,
a.c-btn--warning,
a.c-btn--warning:visited,
a.c-btn--danger,
a.c-btn--danger:visited,
a.c-btn--accent,
a.c-btn--accent:visited {
  color: var(--color-text-inverse);
}

/* ==========================================================================
 * 4. Sizes — min-height ベースのスケール
 *
 *    .c-btn--md は base と同値（明示指定したい場合のため定義）
 *    .c-btn--hero は LP Hero CTA 専用（影あり）
 * ========================================================================== */
/* Phase 6-G 追補 — fund-card のような密集アクション行での超小型サイズ。
 *   SP タップ領域の最小推奨 (32px) を下回らないように設計。
 *   主に二次アクション・小型バッジ風ボタンを想定。
 */
.c-btn--xs {
  min-height: var(--btn-h-xs, 3.2rem);   /* 32px (フォールバック付き) */
  padding: 0 var(--space-xs);            /* 8px */
  font-size: var(--font-xs);             /* 12px */
  gap: var(--space-2xs);                 /* 4px */
  border-radius: var(--radius-sm);       /* 4px - xs は angle を少し弱め */
}
.c-btn--xs .c-btn__icon {
  width: var(--icon-xs);                 /* 12px */
  height: var(--icon-xs);
}

.c-btn--sm {
  min-height: var(--btn-h-sm);           /* 36px */
  padding: 0 var(--space-sm);            /* 12px */
  font-size: var(--font-base);           /* 14px */
  gap: var(--space-2xs);                 /* 4px */
}
.c-btn--sm .c-btn__icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.c-btn--md {
  min-height: var(--btn-h-md);           /* 44px (= base) */
  padding: 0 var(--space-md);            /* 16px */
  font-size: var(--font-md);             /* 16px */
}

.c-btn--lg {
  min-height: var(--btn-h-lg);           /* 48px */
  padding: 0 var(--space-xl);            /* 24px */
  font-size: var(--font-lg);             /* 18px */
}
.c-btn--lg .c-btn__icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.c-btn--xl {
  min-height: var(--btn-h-xl);           /* 56px */
  padding: 0 var(--space-2xl);           /* 32px */
  font-size: var(--font-lg);             /* 18px */
}

.c-btn--hero {
  min-height: var(--btn-h-hero);         /* 64px */
  padding: 0 var(--space-3xl);           /* 40px */
  font-size: var(--font-xl);             /* 20px */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.c-btn--hero:hover {
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
 * 5. Layout — 幅 / インライン制御
 * ========================================================================== */
.c-btn--block {
  display: flex;
  width: 100%;
}

.c-btn--inline {
  display: inline-flex;
  width: auto;
}

/* icon-only — 正方形、padding 0 で center 配置 */
.c-btn--icon-only {
  width: var(--btn-h-md);                /* 44px */
  min-width: var(--btn-h-md);
  min-height: var(--btn-h-md);
  padding: 0;
  gap: 0;
}
.c-btn--icon-only.c-btn--xs {
  width: var(--btn-h-xs, 3.2rem);
  min-width: var(--btn-h-xs, 3.2rem);
  min-height: var(--btn-h-xs, 3.2rem);
}
.c-btn--icon-only.c-btn--sm {
  width: var(--btn-h-sm);
  min-width: var(--btn-h-sm);
  min-height: var(--btn-h-sm);
}
.c-btn--icon-only.c-btn--lg {
  width: var(--btn-h-lg);
  min-width: var(--btn-h-lg);
  min-height: var(--btn-h-lg);
}
.c-btn--icon-only.c-btn--xl {
  width: var(--btn-h-xl);
  min-width: var(--btn-h-xl);
  min-height: var(--btn-h-xl);
}

/* ==========================================================================
 * 6. States — :focus-visible / :disabled / aria-disabled / .is-loading
 * ========================================================================== */

/* 6.1 Focus — キーボード操作時のリング */
.c-btn:focus {
  outline: none;
}
.c-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  z-index: var(--z-base);
}

/* 6.2 Disabled — disabled / [aria-disabled="true"] / .is-loading */
.c-btn:disabled,
.c-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* 6.3 Loading — ボタン押下後の処理中表示 */
.c-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
  cursor: progress;
}
.c-btn.is-loading > .c-btn__icon,
.c-btn.is-loading > .c-btn__text {
  visibility: hidden;
}
.c-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--icon-md);
  height: var(--icon-md);
  margin-top: -0.8rem;
  margin-left: -0.8rem;
  border: 0.2rem solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--color-text-inverse);
  animation: c-btn-spinner 0.6s linear infinite;
}

/* 透過 variant は dark spinner を使う */
.c-btn--ghost.is-loading::after,
.c-btn--outline.is-loading::after,
.c-btn--outline-info.is-loading::after,
.c-btn--muted.is-loading::after,
.c-btn--ghost-brand.is-loading::after,
.c-btn--ghost-info.is-loading::after,
.c-btn--ghost-warning.is-loading::after,
.c-btn--ghost-danger.is-loading::after,
.c-btn--ghost-muted.is-loading::after {
  color: var(--color-text);
}

@keyframes c-btn-spinner {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* prefers-reduced-motion: スピナーアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  .c-btn {
    transition: none;
  }
  .c-btn.is-loading::after {
    animation: none;
  }
}

/* =============================================================================
 *  END OF FILE
 *  -----------------------------------------------------------------------------
 *  既存 .btn / .btn-primary / .btn--primary 等は本ファイルでは扱わない。
 *  別 PR で代表画面から段階的に .c-btn へ移行する想定。
 * ============================================================================= */