/* SHIFUKU 依頼システム 共通スタイル（フェーズ4）
   settings.html で確定した意匠を全画面で共有する。 */
:root {
  --ink:#2b2b2b; --sub:#6b6b6b; --line:#e2ddd4; --bg:#faf8f4;
  --accent:#8a6d3b; --accent2:#a63a2e; --soft:#f3efe7;
}
* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  line-height:1.8; -webkit-font-smoothing:antialiased;
}
.wrap { max-width:520px; margin:0 auto; padding:32px 20px 64px; }
h1 { font-size:1.35rem; font-weight:600; margin:8px 0 4px; }
.lead { color:var(--sub); font-size:.95rem; margin:0 0 24px; }
.card {
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:22px; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.card + .card { margin-top:16px; }
.section-title { font-weight:600; margin:0 0 12px; }
.hr { height:1px; background:var(--line); margin:24px 0; border:0; }

/* 選択肢 */
label.opt {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; margin:8px 0;
  cursor:pointer; transition:border-color .15s, background .15s;
}
label.opt:hover { border-color:var(--accent); }
label.opt input { width:18px; height:18px; accent-color:var(--accent); flex:none; }

/* 入力 */
label.field { display:block; font-weight:600; margin:18px 0 6px; }
label.field .sub { display:block; font-weight:400; color:var(--sub); font-size:.85rem; }
input[type=email], input[type=text], textarea {
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink); font-size:1rem; font-family:inherit; line-height:1.7;
}
input:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
textarea { min-height:110px; resize:vertical; }
.hint { color:var(--sub); font-size:.85rem; margin:6px 0 0; }

/* ボタン */
button {
  width:100%; margin-top:22px; padding:14px; font-size:1rem; font-weight:600;
  color:#fff; background:var(--accent); border:0; border-radius:10px; cursor:pointer;
}
button:disabled { opacity:.5; cursor:default; }

/* 状態表示 */
.saved { text-align:center; color:var(--accent); font-weight:600; margin-top:16px; min-height:1.4em; }
.error { text-align:center; color:var(--accent2); margin-top:16px; }
.loading { text-align:center; color:var(--sub); padding:40px 0; }
.hidden { display:none; }

/* 残回数 */
.counts { background:var(--soft); border-radius:10px; padding:14px 16px; margin:0 0 4px; }
.counts .row { display:flex; justify-content:space-between; padding:3px 0; }
.counts .row span:last-child { font-variant-numeric:tabular-nums; }
.counts .cap { color:var(--sub); font-size:.82rem; margin-top:8px; }

/* 完了画面 */
.done-title { font-size:1.2rem; font-weight:600; margin:0 0 12px; }
.done-body { color:var(--sub); }