/* =========================================================================
   FAQタグ検索モーダル SP表示 改善パッチ（試作）
   対象: secure.okbiz.jp/7card/ の #faq_tag_search_overlay 配下
   目的:
     1) 実機iOS Safariでの自動ズーム対策（input系 font-size を16px以上に）
     2) タグ候補エリアを「決まった高さでスクロールする箱」に固定
     3) FAQ結果一覧エリアの最低表示高さを死守
     4) SP幅でのタグチップを詰めて1行あたりの表示数を増やす
   注意:
     - 実際のクラス名・親子構造は今回の実機調査時点のものです。
       本番へ入れる前に最新DOMで class 名・階層のズレがないか必ず確認してください。
     - 既存スタイルの詳細度によっては !important が必要になる場合があります。
   ========================================================================= */

/* ---------------------------------------------------------------------
   1) 実機の自動ズーム対策
      iOS Safariは focus した要素の font-size が 16px 未満だと
      ページ全体を自動的に拡大表示する仕様がある。
      PCのDevTools端末シミュレーターでは再現されないため要注意。
   --------------------------------------------------------------------- */
#faq_tag_search_overlay .faq_tag_search_input_field input,
#faq_tag_search_overlay .tagify__input {
  font-size: 16px !important;
}

/* ---------------------------------------------------------------------
   2) タグ候補エリアを固定高さ＋スクロールに変更
      「タグは全部見えなくてよい。スクロールできる決まった高さの箱に入れる」
      という要望への対応。目安として 2〜3行ぶん（約110px）を確保。
      実際の行高に応じて調整してください。
   --------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  #faq_tag_search_overlay .faq_tag_search_tag_area {
    max-height: 112px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* スクロール可能であることが視覚的にもわかるように余白を調整 */
    margin: 10px 15px;
    border-radius: 8px;
    box-shadow: 0px 2px 18px rgba(33, 33, 33, 0.32);
  }

  /* スクロールバー分の見切れ対策（任意） */
  #faq_tag_search_overlay .faq_tags_area {
    padding-bottom: 4px;
  }
}

/* ---------------------------------------------------------------------
   3) FAQ結果一覧エリアの最低高さを確保
      上部（header + 検索欄 + タグ候補）がどれだけ伸びても、
      結果一覧が潰れて見えなくなることを防ぐ。
      30dvh は目安値。実機での見え方を見ながら調整してください。
   --------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  #faq_tag_search_overlay .faq_tag_search_result_area {
    min-height: 30dvh;
    margin-top: 0;
  }
}

/* ---------------------------------------------------------------------
   4) SP幅ではタグチップをコンパクトに
      見た目のチップは小さくしつつ、タップ判定は行間(line-height)や
      余白で44px相当を維持することを意識。
   --------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  #faq_tag_search_overlay .faq_tags_area {
    gap: 8px 6px;
  }

  #faq_tag_search_overlay .faq_tags_area .keyword_tag,
  #faq_tag_search_overlay .tagify__tag {
    line-height: 1.6;
    /* 見た目は小さくしてもタップ領域を確保 */
  }
}

/* ---------------------------------------------------------------------
   その他追加調整
   --------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  #faq_tag_search_overlay .tagify {
    flex-flow: row wrap;
    gap: 7.5px;
  }

  #faq_tag_search_overlay .faq_tag_search_overlay_inner,
  #faq_show .faq_tags_modal_wrapper {
    height: calc(100% - 30px);
    width: calc(100vw - 30px);
    margin: 0;
  }

  #faq_tag_search_overlay .tagify__tag {
    padding: 4px 12px;
  }

  #faq_tag_search_overlay .faq_tag_search_more_page {
    margin-bottom: 24px;
  }

}