/**
 * iPhone Safari: フォーカス時の自動ズームを防ぐ（viewport の maximum-scale は使わない）。
 *
 * 仕組み: 実フォントは 16px 以上にし、transform: scale() で見た目だけ UI に合わせる。
 * プレースホルダーは入力と同じ要素のため、一緒にスケールする。
 *
 * 使い方:
 *   <div class="nak-ios-zoom-safe min-w-0"> … input / textarea / select … </div>
 *   見た目が 12px 相当なら: class="nak-ios-zoom-safe nak-ios-zoom-safe--v12 …"
 *
 * 注意: type=range / checkbox / radio / file / hidden 等は対象外。
 *       横いっぱいの入力はラッパに overflow:hidden と min-w-0（flex 子なら）を推奨。
 *
 * <select>: iOS の開いたピッカーは OS UI のため CSS で完全には制御できない。
 *          text と同じ「16px + scale」にするとピッカー側だけ大きく見えやすいので、
 *          select だけ別経路（transform なし・--nak-ios-select-fz）にする。
 */
.nak-ios-zoom-safe {
    --nak-ios-input-scale: 0.6875; /* 16 * 0.6875 ≈ 11px 相当（一覧 body 11px に寄せる） */
    --nak-ios-select-fz: 12px; /* ネイティブ select 用（ピッカーに近いサイズ感・ズームは端末差あり） */
    overflow-x: hidden; /* scale で横にはみ出した描画をクリップ（縦 scroll は子の overflow-y に任せる） */
}

.nak-ios-zoom-safe--v10 {
    --nak-ios-input-scale: 0.625; /* 10px 相当 */
    --nak-ios-select-fz: 11px;
}

.nak-ios-zoom-safe--v12 {
    --nak-ios-input-scale: 0.75; /* 12px 相当 */
    --nak-ios-select-fz: 12px;
}

@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
    @media (prefers-reduced-motion: reduce) {
        .nak-ios-zoom-safe input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="image"]):not([type="hidden"]),
        .nak-ios-zoom-safe textarea {
            transform: none !important;
            width: 100% !important;
            max-width: none !important;
            font-size: 16px !important;
        }
    }

    .nak-ios-zoom-safe input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="image"]):not([type="hidden"]),
    .nak-ios-zoom-safe textarea {
        font-size: 16px !important;
        line-height: 1.25 !important;
        -webkit-text-size-adjust: 100%;
        transform: scale(var(--nak-ios-input-scale, 0.6875));
        transform-origin: left center;
        width: calc(100% / var(--nak-ios-input-scale, 0.6875));
        max-width: none;
        box-sizing: border-box;
    }

    .nak-ios-zoom-safe textarea {
        transform-origin: left top;
        min-height: calc(5rem / var(--nak-ios-input-scale, 0.6875));
    }

    .nak-ios-zoom-safe input::placeholder,
    .nak-ios-zoom-safe textarea::placeholder {
        opacity: 0.55;
    }

    /*
     * select は上記の 16px+scale を当てない（ピッカーだけ大きく見えるのを避ける）。
     * 12px 前後でも多くの iOS では text ほど強くズームしないが、端末・OS で差がある。
     */
    .nak-ios-zoom-safe select {
        font-size: var(--nak-ios-select-fz, 12px) !important;
        line-height: 1.25 !important;
        -webkit-text-size-adjust: 100%;
        transform: none !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}