@charset "UTF-8";

/* =============================================================================
 *  c-form — Common Form Components (Phase 6-C)
 *  -----------------------------------------------------------------------------
 *  共通フォーム基盤。tokens.css 前提（assets/css/foundation/tokens.css）。
 *
 *  - 既存 .form-control / .form-group / .form-label / .form-hint / .f / .f_*
 *    とは衝突しないよう .c- プレフィックスで分離
 *  - HTML への <link> 適用はまだ行わない（並走配置のみ）
 *  - 金融サービスでの誤入力・誤操作リスクを低減する設計:
 *      * placeholder は label 代わりにしない（必ず .c-form__label を併用）
 *      * 必須/任意は色＋テキスト併用 (.c-form__required / .c-form__optional)
 *      * エラーは色＋アイコン＋テキスト併用 (.c-form__error)
 *      * 補足説明は .c-form__hint または .c-form__note
 *      * checkbox/radio はネイティブUIを accent-color で着色するだけ（壊さない）
 *
 *  ----- SP での挙動 -------------------------------------------------------
 *
 *  PC: 横並びレイアウト (.c-form__row, .c-form__grid--2/--3) を使用
 *  SP (max-width: 768px): 自動的に縦積みに切替
 *
 *  ----- 設計の主な変数 ----------------------------------------------------
 *
 *  入力高さ            : --form-h         (4.4rem = 44px)
 *  textarea 最小高さ   : --form-textarea-h (20rem = 200px)
 *  本文 font-size      : --font-md        (16px) -- 16px 未満は iOS Safari で
 *                                                  フォーカス時に拡大されてしまうため避ける
 *  背景                : --color-bg-muted (#F2F2F4)
 *  focus ring          : --shadow-focus   (緑)
 *  error ring          : --shadow-focus-err (赤)
 *
 *  参考:
 *    docs/design-audit/04-component-policy.md  §2 Form
 *    docs/design-audit/03-design-tokens.md     §2.7
 *
 *  使用例:
 *    <form class="c-form c-form--stacked" novalidate>
 *      <div class="c-form__group">
 *        <label class="c-form__label" for="email">
 *          メールアドレス
 *          <span class="c-form__required" aria-hidden="true">必須</span>
 *        </label>
 *        <input id="email" class="c-form-control" type="email"
 *               aria-required="true" placeholder="example@fundi.co.jp">
 *        <p class="c-form__hint">普段ご利用のメールアドレスをご入力ください。</p>
 *      </div>
 *
 *      <div class="c-form__group">
 *        <label class="c-form__label" for="password">
 *          パスワード
 *          <span class="c-form__required" aria-hidden="true">必須</span>
 *        </label>
 *        <input id="password" class="c-form-control" type="password"
 *               aria-required="true" aria-invalid="true"
 *               aria-describedby="password-error">
 *        <p id="password-error" class="c-form__error">
 *           パスワードは8文字以上で入力してください。
 *        </p>
 *      </div>
 *
 *      <div class="c-form__actions">
 *        <button class="c-btn c-btn--primary c-btn--lg c-btn--block">ログイン</button>
 *      </div>
 *    </form>
 *
 * ============================================================================= */

/* ==========================================================================
 * 1. Form root / structure
 * ========================================================================== */

.c-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);                  /* 24px - フォーム要素間 */
  width: 100%;
  box-sizing: border-box;
}

/* 1.1 グループ (label + input + hint/error) */
.c-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);                  /* 8px - label と input の間 */
  width: 100%;
}

/* 1.2 横並びの行（PC で複数 input を 1 行に） */
.c-form__row {
  display: flex;
  align-items: flex-end;                 /* hint がある時にラインを揃える */
  gap: var(--space-md);                  /* 16px */
  width: 100%;
}

/* 1.3 行内の個別フィールド */
.c-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1 1 0%;                          /* 等幅で並ぶ */
  min-width: 0;                          /* flex shrink の overflow 防止 */
}

/* 1.4 送信ボタン群 */
.c-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);                  /* 12px */
  margin-top: var(--space-md);
}

/* 1.5 SP では横並びを縦積みに */
@media (max-width: 768px) {
  .c-form__row {
    flex-direction: column;
    align-items: stretch;
  }
  .c-form__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
 * 2. Label / Required / Optional / Hint / Error / Note
 * ========================================================================== */

/* 2.1 ラベル */
.c-form__label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-family: var(--font-family-base);
  font-size: var(--font-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  cursor: default;
}

/* 2.2 必須マーク — 色＋テキスト併用 */
.c-form__required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--tag-padding-y) var(--tag-padding-x); /* 1px 6px */
  font-size: var(--tag-font-size);       /* 12px */
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-inverse);
  background-color: var(--color-error);
  border-radius: var(--radius-sm);
  letter-spacing: var(--tracking-base);
  user-select: none;
}

/* 2.3 任意マーク — 控えめ */
.c-form__optional {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--tag-padding-y) var(--tag-padding-x);
  font-size: var(--tag-font-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-muted);
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  letter-spacing: var(--tracking-base);
  user-select: none;
}

/* 2.4 補足説明 — 色は muted */
.c-form__hint {
  font-size: var(--font-base);           /* 14px */
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
  margin-top: var(--space-2xs);
}

/* 2.5 エラーメッセージ — 色＋アイコン＋テキスト併用 */
.c-form__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--font-base);           /* 14px */
  font-weight: var(--font-weight-bold);
  color: var(--color-error);
  line-height: var(--leading-base);
  margin-top: var(--space-2xs);
}
.c-form__error::before {
  content: "⚠";
  flex-shrink: 0;
  font-size: var(--font-md);
  line-height: 1.2;
  color: var(--color-error);
}

/* 2.6 注意文・補足ボックス — 注意事項用 */
.c-form__note {
  font-size: var(--font-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-subtle);
  border-left: var(--form-note-border-w) solid var(--color-border);
  border-radius: var(--radius-sm);
}
.c-form__note--warning {
  background-color: var(--color-warning-bg);
  border-left: var(--form-note-border-w) solid var(--color-warning);
  color: var(--color-text);
}
.c-form__note--error {
  background-color: var(--color-error-bg);
  border-left: var(--form-note-border-w) solid var(--color-error);
  color: var(--color-text);
}

/* 2.7 ステータスメッセージ — form-level live region 用 (role="status" + aria-live="polite")
 *      success / info 通知を画面内 polite に伝える。
 *      :empty で非表示にすることで初期描画時の余白を抑える。 */
.c-form__status {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--font-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  line-height: var(--leading-base);
}
.c-form__status:empty {
  display: none;
}
.c-form__status--success {
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}

/* ==========================================================================
 * 3. Input / Select / Textarea — .c-form-control 基底
 * ========================================================================== */

.c-form-control {
  display: block;
  width: 100%;
  height: var(--form-h);                 /* 44px */
  padding: 0 var(--space-sm);            /* 12px */
  font-family: var(--font-family-base);
  font-size: var(--font-md);             /* 16px — iOS Safari の auto zoom 防止 */
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-base);
  color: var(--color-text);
  background-color: var(--color-bg-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* hover (PC でホバー可能なポインタのときのみ) */
@media (hover: hover) {
  .c-form-control:hover:not(:disabled):not([readonly]) {
    background-color: var(--color-bg-subtle);
  }
}

/* focus */
.c-form-control:focus {
  outline: none;
}
.c-form-control:focus,
.c-form-control:focus-visible {
  outline: none;
  background-color: var(--color-bg);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
}

/* placeholder — label 代わりに使わない設計の前提だが、視認性は確保 */
.c-form-control::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

/* disabled / readonly — 操作不可の意図を視覚的に明示 */
.c-form-control:disabled,
.c-form-control[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
}
.c-form-control[readonly] {
  background-color: var(--color-bg-subtle);
  color: var(--color-text);
  cursor: default;
}

/* invalid 状態（HTML5 / aria-invalid） */
.c-form-control--error,
.c-form-control[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: var(--color-bg);
}
.c-form-control--error:focus,
.c-form-control--error:focus-visible,
.c-form-control[aria-invalid="true"]:focus,
.c-form-control[aria-invalid="true"]:focus-visible {
  box-shadow: var(--shadow-focus-err);
  border-color: var(--color-error);
}

/* success 状態（バリデーション成功表示） */
.c-form-control--success {
  border-color: var(--color-success);
}

/* ==========================================================================
 * 4. Variants — Textarea / Select
 * ========================================================================== */

/* 4.1 Textarea */
.c-form-control--textarea {
  height: auto;
  min-height: var(--form-textarea-h);    /* 200px */
  padding: var(--space-sm);              /* 12px */
  resize: vertical;
  line-height: var(--leading-base);
}

/* 4.2 Select — カスタム矢印 */
.c-form-control--select {
  padding-right: 3.2rem;                 /* 矢印分の余白 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23707070'><path d='M3 6l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 1.2rem 1.2rem;
  cursor: pointer;
}
.c-form-control--select[multiple] {
  background-image: none;
  padding-right: var(--space-sm);
  height: auto;
}

/* ==========================================================================
 * 5. Checkbox / Radio
 *
 *    ブラウザネイティブUIを破壊せず、accent-color で着色するだけ。
 *    accent-color: Chrome 93+, Firefox 92+, Safari 15.4+ で対応。
 *    A11y的にも label の for/id 関連付け、tabindex 維持が前提。
 * ========================================================================== */

.c-check,
.c-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);                  /* 8px */
  cursor: pointer;
  user-select: none;
  line-height: var(--leading-base);
  /* タップ領域確保のため上下に padding */
  min-height: var(--form-h);
  padding: var(--space-2xs) 0;
}

.c-check__input,
.c-radio__input {
  flex-shrink: 0;
  width: var(--check-size);
  height: var(--check-size);
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-brand);
}

.c-check__input:focus-visible,
.c-radio__input:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.c-check__input:disabled,
.c-radio__input:disabled {
  cursor: not-allowed;
}

.c-check__label,
.c-radio__label {
  font-size: var(--font-md);
  color: var(--color-text);
  cursor: pointer;
}

.c-check__input:disabled ~ .c-check__label,
.c-radio__input:disabled ~ .c-radio__label,
.c-check__input:disabled + .c-check__label,
.c-radio__input:disabled + .c-radio__label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 縦並びにしたい場合（複数 checkbox/radio の選択肢一覧） */
.c-form__group--choices {
  gap: var(--space-2xs);
}
.c-form__group--choices .c-check,
.c-form__group--choices .c-radio {
  display: flex;
}

/* ==========================================================================
 * 6. Layout variants
 * ========================================================================== */

/* 6.1 縦積み（デフォルト） */
.c-form--stacked {
  /* 既定の .c-form と同義。明示用 */
}

/* 6.2 水平（PC: ラベル左 / 入力右） */
.c-form--horizontal .c-form__group {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-md);
}
.c-form--horizontal .c-form__label {
  flex: 0 0 var(--form-label-w);         /* 180px - 固定ラベル幅 */
  padding-top: 1.2rem;                   /* input の中央に揃える */
}
.c-form--horizontal .c-form__group > .c-form-control,
.c-form--horizontal .c-form__group > .c-form__hint,
.c-form--horizontal .c-form__group > .c-form__error {
  flex: 1 1 auto;
}
@media (max-width: 768px) {
  .c-form--horizontal .c-form__group {
    flex-direction: column;
    align-items: stretch;
  }
  .c-form--horizontal .c-form__label {
    flex-basis: auto;
    padding-top: 0;
  }
}

/* 6.3 コンパクト（gap 詰め） */
.c-form--compact {
  gap: var(--space-md);
}
.c-form--compact .c-form__group {
  gap: var(--space-2xs);
}

/* 6.4 Grid — N 列 */
.c-form__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
.c-form__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.c-form__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .c-form__grid--2,
  .c-form__grid--3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
 * 7. A11y / Reduced motion
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .c-form-control {
    transition: none;
  }
}

/* High contrast (Windows ハイコントラスト): 枠線を強制 */
@media (forced-colors: active) {
  .c-form-control,
  .c-form-control--error,
  .c-form-control--success {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
  }
  .c-form__required,
  .c-form__optional {
    border: 1px solid CanvasText;
  }
}

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