/*
*
 * NurseLink — forms.css
 * ============================================================
 * フォームがあるページにのみ読み込む専用ファイル。
 * common.css の後、utilities.css の前に読み込むこと。
 *
 * 目次:
 *   1.  フォームグループ・ラベル
 *   2.  インプット・セレクト・テキストエリア
 *   3.  アイコン付きインプット
 *   4.  ヒント・エラー
 *   5.  Segmented ラジオ（区分切替）
 *   6.  ファイルアップロード
 *   7.  サジェスト候補
 *   8.  送信エリア（固定フッター）
 *   9.  セクション区切り
 * ============================================================
 */


/* ============================================================
   1. フォームグループ・ラベル
============================================================ */

/* セクションラベル（フォームブロックの上部見出し） */
.form-section-label {
    font-size: var(--text-caption-1);
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-mono);
    margin-bottom: 12px;
}

/* フォームフィールド単体のラッパー */
.form-field {
    margin-bottom: 20px;
}
.form-field:last-child {
    margin-bottom: 0;
}

/*
 * .field-label — フォーム専用のラベル
 *
 * NOTE: common.css の .info-label（情報グリッドのキャプション）とは別物。
 *   .info-label  → 12px・モノスペース・muted （読み取り専用の表示）
 *   .field-label → 13px・サンセリフ・通常色   （入力フォームのラベル）
 */
.field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-footnote);
    font-weight: 600;
    color: var(--ui-text);
    margin-bottom: 6px;
}

/* 必須マーク */
.field-label .required {
    font-size: var(--text-caption-2);
    font-weight: 700;
    color: #fff;
    background: var(--ui-danger);
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

/* 任意マーク */
.field-label .optional {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    font-weight: 400;
}


/* ============================================================
   2. インプット・セレクト・テキストエリア
============================================================ */
.ui-input,
.ui-select,
.ui-textarea {
    width: 100%;
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border-2);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text);
    font-family: inherit;
    font-size: var(--text-subheadline);
    transition: all var(--ui-transition);
    outline: none;
    box-shadow: var(--ui-shadow-xs);
}

.ui-input    { height: 40px; padding: 0 14px; }
.ui-select   {
    height: 40px;
    padding: 0 36px 0 14px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aeaeb2' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.ui-textarea {
    padding: 12px 14px;
    resize: vertical;
    min-height: 96px;
    line-height: 1.6;
}

.ui-input::placeholder,
.ui-textarea::placeholder { color: var(--ui-text-placeholder); }

/* ホバー */
.ui-input:hover,
.ui-select:hover,
.ui-textarea:hover { border-color: var(--ui-text-sub);  /* hover: #6e6e73 */ }

/* フォーカス */
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14), var(--ui-shadow-xs);
}

/* エラー状態 */
.ui-input.is-error,
.ui-select.is-error,
.ui-textarea.is-error {
    border-color: var(--ui-danger);
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.12);
    background-color: rgba(255, 59, 48, 0.04);
}

/* 有効状態 */
.ui-input.is-valid,
.ui-select.is-valid {
    border-color: var(--ui-success);
}


/* ============================================================
   3. アイコン付きインプット
============================================================ */
.input-with-icon { position: relative; }
.input-with-icon .input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-text-muted);
    font-size: var(--text-subheadline);
    pointer-events: none;
}
.input-with-icon .ui-input { padding-left: 36px; }


/* ============================================================
   4. ヒント・エラー
============================================================ */
.field-hint {
    font-size: var(--text-caption-1);
    color: var(--ui-text-sub);
    margin-top: 5px;
    line-height: 1.5;
}

.field-error {
    font-size: var(--text-caption-1);
    color: var(--ui-danger);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}


/* ============================================================
   5. Segmented ラジオ（区分切替）
   ─ iOS の UISegmentedControl 風
============================================================ */
.seg-group {
    display: flex;
    background: rgba(118, 118, 128, 0.1);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.seg-group input[type="radio"] { display: none; }
.seg-group label {
    flex: 1;
    text-align: center;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: var(--text-footnote);
    font-weight: 500;
    color: var(--ui-text-sub);
    cursor: pointer;
    transition: all var(--ui-transition);
    user-select: none;
}
.seg-group input[type="radio"]:checked + label {
    background: var(--ui-surface);
    color: var(--ui-text);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}


/* ============================================================
   6. ファイルアップロード（ドロップゾーン）
============================================================ */
.file-drop {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1.5px dashed rgba(0, 0, 0, 0.14);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--ui-transition);
}
.file-drop:hover {
    border-color: #0071e3;
    background: rgba(0, 113, 227, 0.03);
}
.file-drop i {
    font-size: var(--text-title-2);
    color: var(--ui-text-muted);
    margin-bottom: 8px;
    display: block;
}
.file-drop p {
    font-size: var(--text-footnote);
    color: var(--ui-text-sub);
    margin: 0;
    line-height: 1.55;
}
.file-drop .file-hint {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    margin-top: 4px;
}


/* ============================================================
   7. サジェスト候補（インライン検索補完）
============================================================ */
.suggest-card {
    background: var(--ui-surface);
    border-radius: var(--ui-radius-sm);
    border: 0.5px solid var(--ui-border-2);
    box-shadow: var(--ui-shadow-md);
    overflow: hidden;
}
.suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 0.5px solid var(--ui-border);
    transition: background var(--ui-transition);
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover      { background: rgba(0, 113, 227, 0.05); }
.suggest-item.selected   { background: rgba(0, 113, 227, 0.06); }

.suggest-name {
    font-size: var(--text-footnote);
    font-weight: 600;
    color: var(--ui-text);
}
.suggest-sub {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    font-family: var(--font-mono);
}


/* ============================================================
   8. 送信エリア（固定フッター）
============================================================ */
.submit-area {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--ui-border);
    position: sticky;
    bottom: 0;
    z-index: 100;
}


/* ============================================================
   9. セクション区切り
============================================================ */
/* .form-divider — 共通の基底（フォーム全般で使用、余白 28px）。
 * [第2弾] 管理画面では admin-edit.css の .aedit-editor .form-divider が
 *         余白 18px に上書きする（責務分離: 基底=共通 / 上書き=管理画面固有）。 */
.form-divider {
    height: 0.5px;
    background: var(--ui-border);
    margin: 28px 0;
}

/* ============================================================
   10. チェックボックス・ラジオ（ui-check / ui-radio）
============================================================ */
.ui-check-wrap,
.ui-radio-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.ui-check-wrap input[type="checkbox"],
.ui-radio-wrap input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1.5px solid var(--ui-border-2);
    background: var(--ui-surface);
    cursor: pointer;
    transition: all var(--ui-transition);
    position: relative;
}

/* チェックボックスは角丸 */
.ui-check-wrap input[type="checkbox"] {
    border-radius: 5px;
}

/* ラジオは円形 */
.ui-radio-wrap input[type="radio"] {
    border-radius: 50%;
}

/* ホバー */
.ui-check-wrap input[type="checkbox"]:hover,
.ui-radio-wrap input[type="radio"]:hover {
    border-color: var(--ui-accent);
}

/* チェック済み */
.ui-check-wrap input[type="checkbox"]:checked {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
}
.ui-check-wrap input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: translate(-50%, -60%) rotate(45deg);
}

/* ラジオ選択済み */
.ui-radio-wrap input[type="radio"]:checked {
    border-color: var(--ui-accent);
    border-width: 5px;
    background: var(--ui-surface);
}

/* ラベル */
.ui-check-wrap label,
.ui-radio-wrap label {
    font-size: var(--text-footnote);
    color: var(--ui-text);
    cursor: pointer;
    line-height: 1.4;
}

/* 無効状態 */
.ui-check-wrap input:disabled,
.ui-radio-wrap input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ui-check-wrap input:disabled + label,
.ui-radio-wrap input:disabled + label {
    opacity: 0.4;
    cursor: not-allowed;
}

/* フォーカスリング */
.ui-check-wrap input:focus-visible,
.ui-radio-wrap input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}


/* ============================================================
   11. スイッチ（ui-switch）— iOS風トグル
============================================================ */
.ui-switch-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.ui-switch-wrap input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 100px;
    background: var(--ui-surface-3);
    border: none;
    cursor: pointer;
    transition: background var(--ui-transition);
    position: relative;
}
.ui-switch-wrap input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    transition: transform var(--ui-transition);
}
.ui-switch-wrap input[type="checkbox"]:checked {
    background: var(--ui-accent);
}
.ui-switch-wrap input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}
.ui-switch-wrap input[type="checkbox"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ui-switch-wrap label {
    font-size: var(--text-footnote);
    color: var(--ui-text);
    cursor: pointer;
}
.ui-switch-wrap input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

/* サイズ修飾子 — small */
.ui-switch-wrap.sm input[type="checkbox"] {
    width: 34px;
    height: 20px;
}
.ui-switch-wrap.sm input[type="checkbox"]::after {
    width: 14px;
    height: 14px;
    top: 3px;
    left: 3px;
}
.ui-switch-wrap.sm input[type="checkbox"]:checked::after {
    transform: translateX(14px);
}


/* ============================================================
   12. Range スライダー（ui-range）
============================================================ */
.ui-range-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ui-range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ui-range-label {
    font-size: var(--text-footnote);
    font-weight: 600;
    color: var(--ui-text);
}
.ui-range-val {
    font-size: var(--text-footnote);
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--ui-accent);
    min-width: 32px;
    text-align: right;
}

input[type="range"].ui-range {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 100px;
    background: var(--ui-surface-3);
    outline: none;
    cursor: pointer;
}
input[type="range"].ui-range::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ui-accent);
    box-shadow: 0 1px 4px rgba(0, 113, 227, 0.35);
    cursor: pointer;
    transition: transform var(--ui-transition);
}
input[type="range"].ui-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
input[type="range"].ui-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ui-accent);
    border: none;
    box-shadow: 0 1px 4px rgba(0, 113, 227, 0.35);
    cursor: pointer;
}
input[type="range"].ui-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}


/* ============================================================
   13. タグ入力（tag-input）— 複数選択
============================================================ */
.tag-input-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 10px;
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border-2);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-xs);
    cursor: text;
    transition: all var(--ui-transition);
}
.tag-input-wrap:focus-within {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14), var(--ui-shadow-xs);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px 0 10px;
    border-radius: 100px;
    background: rgba(0, 113, 227, 0.1);
    color: var(--ui-accent);
    font-size: var(--text-caption-1);
    font-weight: 600;
    white-space: nowrap;
}
.tag-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ui-accent);
    font-size: var(--text-caption-2);
    cursor: pointer;
    padding: 0;
    opacity: 0.6;
    transition: all var(--ui-transition);
    font-family: inherit;
}
.tag-chip-remove:hover {
    opacity: 1;
    background: rgba(0, 113, 227, 0.15);
}

.tag-input-field {
    flex: 1;
    min-width: 80px;
    height: 24px;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-footnote);
    color: var(--ui-text);
    font-family: inherit;
}
.tag-input-field::placeholder { color: var(--ui-text-placeholder); }


/* ============================================================
   14. 日付インプット統一（ui-input[type=date]）
============================================================ */
input[type="date"].ui-input,
input[type="time"].ui-input,
input[type="datetime-local"].ui-input {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
input[type="date"].ui-input::-webkit-calendar-picker-indicator,
input[type="time"].ui-input::-webkit-calendar-picker-indicator {
    opacity: 0.4;
    cursor: pointer;
    filter: none;
}
input[type="date"].ui-input::-webkit-calendar-picker-indicator:hover,
input[type="time"].ui-input::-webkit-calendar-picker-indicator:hover {
    opacity: 0.8;
}

/* ============================================================
   15. メール確認ウィジェット（email-verify / ev-code）
   使用例: 新規登録・本人確認フローのメールアドレス検証
============================================================ */

/* ラッパー — 中央揃えの縦並び */
.email-verify-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px;
}

/* アイコン円形バッジ */
.ev-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 113, 227, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-title-2);
    margin-bottom: 14px;
}

/* タイトル */
.ev-title {
    font-size: var(--text-title-3);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

/* 説明文 */
.ev-desc {
    font-size: var(--text-footnote);
    color: var(--ui-text-sub);
    line-height: 1.7;
    margin-bottom: 20px;
    max-width: 400px;
}

/* メール入力 + 送信ボタン行 */
.ev-input-row {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 420px;
}

/* コードエリアラッパー */
.ev-code-wrap {
    margin-top: 16px;
    width: 100%;
    max-width: 380px;
}

/* 6桁コード入力欄の行 */
.ev-code-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
}

/* 1桁インプット */
.ev-code-inp {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: var(--text-title-3);
    font-weight: 700;
    font-family: var(--font-mono);
    border: 1.5px solid var(--ui-border-2);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-text);
    outline: none;
    transition: all var(--ui-transition);
    caret-color: var(--ui-accent);
}
.ev-code-inp:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14);
}
/* 入力済みは青塗りに */
.ev-code-inp.filled {
    border-color: var(--ui-accent);
    background: rgba(0, 113, 227, 0.06);
    color: var(--ui-accent);
}
/* エラー状態 */
.ev-code-inp.is-error {
    border-color: var(--ui-danger);
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.12);
    animation: ev-shake 0.3s ease;
}
@keyframes ev-shake {
    0%,100%{ transform:translateX(0) }
    25%    { transform:translateX(-4px) }
    75%    { transform:translateX(4px) }
}

/* 通知テキスト */
.ev-notice {
    font-size: var(--text-caption-1);
    color: var(--ui-text-muted);
    line-height: 1.6;
    margin-bottom: 12px;
}
.ev-notice strong { color: var(--ui-text); }

/* 再送リンク */
.ev-resend {
    font-size: var(--text-caption-1);
    color: var(--ui-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 10px;
    font-family: inherit;
    transition: opacity var(--ui-transition);
}
.ev-resend:hover { opacity: 0.7; }
.ev-resend:disabled { color: var(--ui-text-muted); cursor: not-allowed; }

/* ============================================================
   16. ピルラジオ / ピルチェックボックス（radio-group / check-group）
   input を非表示にして label をボタン風に見せる。
   使用例: 性別・同居/別居・担当スタッフ複数選択など
============================================================ */
.radio-group,
.check-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* input は非表示 */
.radio-option,
.check-option { display: none; }

/* ラベルをピル形ボタンに */
.radio-label,
.check-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 0.5px solid var(--ui-border-2);
    border-radius: var(--ui-radius-pill);
    font-size: var(--text-footnote);
    font-weight: 500;
    color: var(--ui-text-sub);
    cursor: pointer;
    transition: all var(--ui-transition);
    background: var(--ui-surface);
    user-select: none;
}
.radio-label:hover,
.check-label:hover {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
    background: rgba(0, 113, 227, .04);
}

/* 選択済み（フォーム部品は常にデフォルトの青。サイト全体のボタンカラー設定には連動させない） */
.radio-option:checked + .radio-label,
.check-option:checked  + .check-label {
    background: #0071e3;
    border-color: #0071e3;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 113, 227, .25);
}


/* ============================================================
   17. 要介護度セレクター（care-radio-group）
   正方形カードに「要介護」+「数字」を縦並びで表示。
   選択時はオレンジ系でハイライト。
   使用例: 利用者の要介護度選択
============================================================ */
.care-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* input は非表示 */
.care-radio { display: none; }

/* カード型ラベル */
.care-radio-label {
    width: 56px;
    height: 52px;
    border-radius: var(--ui-radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0.5px solid var(--ui-border-2);
    cursor: pointer;
    transition: all var(--ui-transition);
    background: var(--ui-surface);
    user-select: none;
}
.care-radio-label:hover {
    border-color: var(--ui-warning);
    background: rgba(255, 149, 0, .04);
}

/* 選択済み */
.care-radio:checked + .care-radio-label {
    border-color: var(--ui-warning);
    background: rgba(255, 149, 0, .1);
    box-shadow: 0 2px 8px rgba(255, 149, 0, .2);
}

/* カード内テキスト */
.care-level-name {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    font-weight: 600;
    line-height: 1;
}
.care-level-num {
    font-size: var(--text-title-3);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1;
}
.care-radio:checked + .care-radio-label .care-level-name { color: #b85c00; }
.care-radio:checked + .care-radio-label .care-level-num  { color: #b85c00; }

/* ── 画像プレビューグリッド（Livewire 3 temporaryUrl + 削除ボタン対応）── */
.image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.preview-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.preview-thumb {
    aspect-ratio: 1;
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    background: var(--ui-surface-2);
    border: 0.5px solid var(--ui-border);
    position: relative;
}
.preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}
/* 削除ボタン（画像プレビュー右上に重ねる×アイコン。全ての画像削除UIで統一） */
.preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    opacity: 0;
    transition: opacity var(--ui-transition), background var(--ui-transition);
    z-index: 2;
    padding: 0;
}
.preview-thumb:hover .preview-remove,
.preview-thumb:focus-within .preview-remove { opacity: 1; }
.preview-remove:hover { background: var(--ui-danger); }

/* タッチデバイスではhoverが効かないため、常時薄く表示しておく */
@media (hover: none) {
    .preview-remove { opacity: 0.85; }
}

.preview-name {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview-size {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    font-family: var(--font-mono);
}

/* 複数選択リスト（高さを確保して選択肢を見せる） */
.ui-select--multi { height: auto; min-height: 140px; padding: 8px; }


/* ============================================================
   15. チェックアウト型フォーム（floating label + 右hint 2カラム）
   ------------------------------------------------------------
   Apple系チェックアウト風レイアウト。
   ・入力枠は大ぶりにせず、ラベルが枠内に浮く floating label
   ・右側に hint カラム（文字数制限などのTIPS）を逃がす
   ・エラーは枠を赤＋下に赤メッセージ（既存 .is-error / .field-error 流用）
   ・モバイル（640px以下）は1カラムに段落ち（hintは入力の下へ）

   構造:
     .co-field                     … 1項目の行（入力列 + hint列のグリッド）
       .co-control                 … 入力列
         .co-float                 … floating label ラッパ
           input.co-input.ui-input … 入力欄（placeholder=" " 必須）
           label.co-label          … 浮くラベル
         .field-error              … エラー文（任意・既存クラス流用）
       .co-hint                    … 右のヒント列（任意）

   ※ floating label は placeholder=" "（半角スペース1個）が必須。
     :placeholder-shown を判定に使うため。
============================================================ */

/* 行: 入力列 + 右hint列の2カラム */
.co-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 8px 28px;
    align-items: start;
    margin-bottom: 18px;
}

/* 入力列 */
.co-control { min-width: 0; }

/* floating label ラッパ */
.co-float { position: relative; }

/* 入力欄: 既存 .ui-input を継承しつつ、ラベル分の上余白を確保 */
.co-input.ui-input,
.co-input.ui-select,
.co-input.ui-textarea {
    height: 56px;
    padding: 22px 14px 6px;
    font-size: var(--text-callout);
}
.co-input.ui-textarea {
    height: auto;
    min-height: 96px;
    padding-top: 26px;
}

/* 浮くラベル（既定はプレースホルダー位置） */
.co-label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-text-muted);
    font-size: var(--text-callout);
    pointer-events: none;
    transition: all var(--ui-transition);
}

/* 入力済み or フォーカス時にラベルが上へ縮小して浮く */
.co-input:focus + .co-label,
.co-input:not(:placeholder-shown) + .co-label {
    top: 11px;
    transform: translateY(0);
    font-size: var(--text-caption-2);
    color: var(--ui-text-sub);
}

/* select は :placeholder-shown が効かないので data-filled 属性で制御 */
.co-float--select .co-label { top: 11px; transform: translateY(0); font-size: var(--text-caption-2); color: var(--ui-text-sub); }

/* エラー時はラベルも赤く */
.co-input.is-error:focus + .co-label,
.co-input.is-error:not(:placeholder-shown) + .co-label,
.co-input.is-error + .co-label {
    color: var(--ui-danger);
}

/* 右hint列: 入力の高さに対して上端を少し下げて視覚的に揃える */
.co-hint {
    font-size: var(--text-footnote);
    color: var(--ui-text-sub);
    line-height: 1.6;
    padding-top: 18px;
}
.co-hint--top { padding-top: 0; }   /* 上揃えにしたい場合 */

/* 横並び2項目（姓・名 / 郵便番号・都道府県 など） */
.co-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* セクション見出し（「お客様の連絡先情報を…」） */
.co-heading {
    font-size: var(--text-title-3);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ui-text);
    margin: 28px 0 16px;
}

/* 区切り線 */
.co-divider {
    height: 0.5px;
    background: var(--ui-border);
    border: none;
    margin: 28px 0;
}

/* 送信ボタン（全幅・大きめ） */
.co-submit {
    width: 100%;
    height: 52px;
    font-size: var(--text-headline);
    margin-top: 8px;
}

/* --- モバイル: 1カラム段落ち（hintは入力の下へ回り込む） --- */
@media (max-width: 640px) {
    .co-field {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .co-hint { padding-top: 2px; }
    .co-row2 { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   自動で高さが広がるテキストエリア（js-autogrow）
   高さの制御は public/js/autogrow.js が行う。ここは見た目だけ。
============================================================ */
textarea.js-autogrow {
    /* 自動で広がるので、手で引っ張る必要がない。
       resize を残すと、広げたそばから入力時に戻されて操作感が悪い。 */
    resize: none;
    /* 初期状態でスクロールバーが出ないように。JSが必要に応じて auto に変える */
    overflow-y: hidden;
    /* 長文のときに、保存ボタンが画面外へ押し出されないようにする上限 */
    max-height: 50vh;
    /* .ui-textarea の既定は 96px。中身に合わせて縮むこの欄には高すぎるので下げる。
       1行だけの入力欄と並んだときに低く見えない程度に留める。 */
    min-height: 62px;
}