/* ==========================================================================
   mobile.css - スマートフォン向けレイアウト共通調整
   --------------------------------------------------------------------------
   全ページで読み込む共通レイヤー。
   Tailwind(CDN) は実行時に <style> を head の末尾へ差し込むため、
   Tailwind ユーティリティを上書きしたい箇所は
   .bento-card.p-6 のようにセレクタを重ねて詳細度を上げている。
   ブレークポイントは Tailwind に合わせて sm=640px / md=768px。
   ========================================================================== */

html {
    /* 横向きにしたときに iOS が勝手に文字を拡大するのを防ぐ */
    -webkit-text-size-adjust: 100%;
    /* 固定ヘッダー(h-16)の下にアンカー先が潜り込まないようにする */
    scroll-padding-top: 5rem;
}

/* --------------------------------------------------------------------------
   1. ベース (〜767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* 意図しない横スクロールを防ぐ。
       overflow-x: hidden と違い clip はスクロールコンテナを作らないので
       稼働管理表などの position: sticky を壊さない。 */
    html,
    body {
        overflow-x: clip;
    }

    body {
        /* 長い URL やチーム名で画面がはみ出さないように */
        overflow-wrap: break-word;
    }

    /* iOS Safari はフォント 16px 未満の入力欄にフォーカスすると
       画面を自動ズームするため、下限を 16px にそろえる */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea {
        font-size: max(16px, 1em);
    }

    /* メディアがカードからはみ出さないように */
    img,
    video,
    iframe {
        max-width: 100%;
    }

    /* 横スクロールする領域は慣性スクロールを有効にする */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   2. カード / ボタン / フォーム (〜639px)
   -------------------------------------------------------------------------- */
@media (max-width: 639.98px) {

    /* カードの余白を詰めて本文の表示幅を稼ぐ */
    .bento-card.p-10 {
        padding: 1.5rem;
    }

    .bento-card.p-8 {
        padding: 1.25rem;
    }

    .bento-card.p-6 {
        padding: 1rem;
    }

    .bento-card {
        border-radius: 1rem;
    }

    /* カードのホバー浮き上がりはタップ端末では邪魔になるので無効化 */
    .bento-card:hover {
        transform: none;
    }

    /* タップしやすい高さを確保 */
    .bento-btn {
        min-height: 44px;
        padding: 0.625rem 1rem;
    }

    .bento-input {
        padding: 0.625rem 0.75rem;
    }

    /* ヘッダー右上のアイコンボタンもタップ領域を確保 */
    .header-icon-btn {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   3. モーダル (〜639px)
   画面いっぱいに広げ、あふれた分は内部スクロールにする
   -------------------------------------------------------------------------- */
@media (max-width: 639.98px) {

    .mobile-modal-overlay {
        padding: 0.75rem;
    }

    .mobile-modal-panel {
        max-width: 100%;
        max-height: 88vh;
        max-height: 88dvh;
        overflow-y: auto;
    }

    .mobile-modal-panel.p-8 {
        padding: 1.25rem;
    }

    .mobile-modal-panel.p-6 {
        padding: 1rem;
    }
}