/**
 * 03-components.css — 写した部品（ドロップ枠）と確認の箱の中身
 * guide-maker:public/css/03-components.css:7-24 の写し（2026-11-03）。知らせ・確認の箱・入力欄は全アプリ共通の部品 ui-kit（ui-toast・ui-dialog・ui-input）＝ここには書かない。数値は送り手のまま（直書きの値は 01-variables.css に同じ値で名前を付けて移した）。
 * 送り手と違う所は、その規則の上に「変えた：」で書く。
 */

/* ===== 確認の箱の中身（箱・ボタン・暗幕は部品 ui-dialog＝ui-kit.css・2026-10-31 に載せ替え） ===== */
/* 名指しの行の箇条書き（showChoice の items）＝ 正本 sales-payroll-manager:css/main.css .custom-modal-items（値は送り手のまま） */
.dlg-items { margin: var(--sp-3) 0 0; padding: var(--modal-items-pad); text-align: left; color: var(--warning); background: var(--warning-dim); border-radius: var(--radius-sm); font-weight: 600; }
.dlg-items li { margin: var(--modal-items-li-gap) 0; }
/* 入力の箱（showPrompt）の欄：文の下に少し空け、打つ文字は左から */
.dlg-input { margin-top: var(--sp-3); text-align: left; }

/* ===== ドロップ枠 ＝ 正本 sales-payroll-manager:css/main.css:2757-2765,2921-2922 ===== */
.dz { border: var(--dz-border-w) dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface-2); padding: var(--sp-3) var(--sp-4); text-align: center;
  color: var(--text-secondary); cursor: pointer; min-height: var(--dz-min-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--dz-gap);
  transition: border-color .15s, background .15s, color .15s; margin-bottom: var(--sp-3); }
.dz:hover, .dz:focus-visible, .dz.dz-over { border-color: var(--accent); background: var(--accent-dim); color: var(--text-primary); outline: none; }
.dz-icon { font-size: var(--dz-icon-font); line-height: 1; }
.dz-main { font-weight: 700; font-size: var(--dz-main-font); }
.dz-sub { font-size: var(--dz-sub-font); color: var(--text-tertiary); }
.dz input[type="file"] { display: none; }
.dz.dz-has { border-style: solid; border-color: var(--accent); }
.dz.dz-has .dz-sub { color: var(--text-primary); font-weight: 600; }