/* kaigoFormFixes.css — kaigoForm.css への後付け上書き（スマートフォン表示の可読性）
 *
 * 本体の kaigoForm.css は 14px を基準に、バッジ 11px / 住所 12.5px / 事業所番号 11.5px /
 * 出典 10.5px の固定サイズで、画面幅による切り替えを持たない。スマートフォンでは
 * これが小さすぎるため、640px 以下でサイズと余白を上げる。
 *
 * 色は本体（ダークモード対応を含む）に任せ、ここではサイズと余白だけを変える。
 * 置き方: kaigoForm.css より後ろで読み込む。
 */

@media (max-width: 640px) {
  /* iOS は 16px 未満の入力欄にフォーカスすると画面を自動拡大するため、入力欄も 16px にする */
  .kf-input {
    font-size: 16px;
  }

  .kf-dropdown {
    font-size: 16px;
    line-height: 1.5;
    /* 画面の高さに対して開きすぎないようにする。EFO のステップは縦が短い */
    max-height: min(60vh, 420px);
    border-radius: 12px;
  }

  /* 指で押せる大きさを確保する */
  .kf-item {
    padding: 13px 14px;
  }

  .kf-name {
    font-size: 16px;
  }

  .kf-line1 {
    gap: 6px;
  }

  .kf-badge {
    font-size: 12.5px;
    padding: 3px 8px;
  }

  /* 住所 */
  .kf-line2 {
    font-size: 14px;
    margin-top: 3px;
  }

  /* 事業所番号・法人名 */
  .kf-line3 {
    font-size: 13px;
    gap: 10px;
    margin-top: 3px;
  }

  /* フォーカス時の案内。本体は 12.5px 固定なのでスマートフォンでは上げる */
  .kf-hint {
    font-size: 13.5px;
    padding: 10px 12px;
  }

  .kf-empty {
    font-size: 15px;
    padding: 14px;
  }

  .kf-empty small {
    font-size: 13px;
  }

  /* 出典表記。ライセンス条件のため常時表示（position: sticky）を維持する */
  .kf-footer {
    font-size: 12px;
    padding: 8px 14px;
  }

  /*
   * 出典表記は position: sticky で常時表示される（ライセンス条件）。
   * スマートフォン幅では2行になるが、最下部までスクロールした状態で
   * 最後の項目のテキストは隠れないことを実測で確認済み。
   */

  .sf_status {
    font-size: 14px;
  }
}

/* 特に狭い端末では横に詰まりやすいので、1行目を折り返し優先にする */
@media (max-width: 380px) {
  .kf-line1 {
    flex-wrap: wrap;
  }

  .kf-line3 {
    flex-direction: column;
    gap: 2px;
  }
}