/* 公開フォーム(入口・予約・問い合わせ)の共通様式。元は _shared/site/tpid.css(form/site/shared は sync.py の写し) */
:root{
  --bg:#f4f7fa; --card:#fff; --hover:#edf3f9; --active:#dceaf6; --inset:#f0f4f8;
  --border:#d4dce6; --border-soft:#e8edf3; --ink:#1a1f2e; --ink-2:#4a5568; --ink-3:#8a95a8;
  --primary:#2A2759; --primary-hover:#38346e; --primary-ink:#fff; --primary-soft:rgba(42,39,89,.08);
  --success:#16a34a; --success-soft:#ecfdf5; --danger:#dc2626; --danger-soft:#fef2f2; --warn:#d97706; --warn-soft:#fffbeb;
  --sun:#c0356b; --sat:#1f5fd0; --rest:#188038; --full-bg:#f4f5f7; --full-line:#e6e8ee; --full-ink:#98a0af; --full-mark:#6a7180;
  --shadow:0 2px 8px rgba(0,0,0,.07); --shadow-lg:0 8px 32px rgba(0,0,0,.10);
  --font:'Noto Sans JP','Inter',-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 var(--font);-webkit-font-smoothing:antialiased}
/* 見出し(店名)。旧ページと同じ、中央・上 */
.title{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 12px;margin:0;padding:24px 16px 8px;color:var(--ink);line-height:1.3;text-align:center}
.title .name{font-size:1.6rem;font-weight:700}
.title .what{font-size:1.05rem;font-weight:500;color:var(--ink-2)}
.wrap{max-width:560px;margin:0 auto;padding:16px}
.wrap.wide{max-width:760px}
/* 進み具合 */
.steps{display:flex;justify-content:space-between;margin:4px 0 16px;gap:4px;max-width:560px;margin-left:auto;margin-right:auto}
.step{flex:1;text-align:center;font-size:11px;color:var(--ink-3)}
.step .n{width:26px;height:26px;border-radius:50%;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--inset);color:var(--ink-3);border:1px solid var(--border)}
.step.active{color:var(--primary);font-weight:700}
.step.active .n{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.step.done .n{background:var(--success-soft);color:var(--success);border-color:transparent}
/* カード */
.panel{background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:20px}
.panel h2{font-size:15px;font-weight:700;margin:0 0 14px}
/* 入口(ご用件の一覧)。右端に式の札。左端の色線は付けない */
.kinds{display:grid;gap:12px}
.kind{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 18px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);text-decoration:none;transition:background .15s,border-color .15s;min-height:72px}
.kind:hover{background:var(--primary-soft);border-color:var(--primary)}
.kind .tx{flex:1;min-width:0}
.kind b{display:block;font-size:16px}
.kind span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.kind em{font-style:normal;font-size:11px;font-weight:600;color:var(--ink-3);border:1px solid var(--border);border-radius:12px;padding:2px 9px;white-space:nowrap}
.kind .go{color:var(--ink-3);font-size:18px}
.foot{text-align:center;font-size:12px;color:var(--ink-3);margin-top:14px}
.foot a{color:inherit;text-decoration:none}
/* 入口へ戻る(各ページの最初の画面) */
.back{font-size:12px;color:var(--ink-2);margin-bottom:12px}
.back a{color:var(--primary);text-decoration:none}
/* 入力 */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:4px}
.field label .req{color:var(--danger);margin-left:4px;font-weight:400}
.in,select.in,textarea.in{width:100%;height:44px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--ink);font:16px var(--font)}
textarea.in{height:auto;min-height:96px;padding:10px 12px;line-height:1.5;resize:vertical}
.in:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
.in.err{border-color:var(--danger)}
.ferr{font-size:12px;color:var(--danger);margin-top:4px}
/* ボタン */
.acts{display:flex;gap:10px;margin-top:18px}
.btn{height:44px;padding:0 20px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--ink);font:600 14px var(--font);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);flex:1}
.btn.primary:hover{background:var(--primary-hover)}
.btn.primary:disabled{opacity:.5;cursor:default}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff;flex:1}
.btn.danger:disabled{opacity:.5;cursor:default}
/* 日時(教室カルテ・予約管理が使う予約の選択部品 rsv-picker と同じ作法) */
.pick{display:grid;grid-template-columns:288px 1fr;gap:16px;align-items:start}
@media (max-width:660px){.pick{grid-template-columns:1fr}}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal-h .t{font-size:13px;font-weight:700}
.navb{border:1px solid var(--border);background:var(--card);border-radius:7px;width:28px;height:26px;cursor:pointer;font-size:13px;color:inherit}
.navb:disabled{opacity:.4;cursor:default}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dow{font-size:10px;font-weight:700;color:var(--ink-2);text-align:center;padding:2px 0}
.dow.sun{color:var(--sun)}.dow.sat{color:var(--sat)}
.d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:11.5px;border:1px solid var(--border);border-radius:6px;cursor:pointer;color:inherit;background:var(--card)}
.d.empty{border:none;background:transparent;cursor:default}
.d.past,.d.closed{opacity:.4;cursor:not-allowed;background:var(--bg)}
.d.today{outline:2px solid var(--primary)}
.d.sel{background:var(--primary);color:var(--primary-ink);border-color:var(--primary);font-weight:700}
.d.sun{color:var(--sun)}.d.sat{color:var(--sat)}
.cal-foot{margin-top:6px;font-size:11px;color:var(--ink-2);min-height:18px}
.slots-lb{font-size:11.5px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start}
@media (max-width:420px){.slots{grid-template-columns:repeat(2,1fr)}}
.slot{position:relative;border:1px solid var(--border);border-radius:8px;padding:7px 9px;background:var(--card);cursor:pointer;text-align:left;font-family:inherit;color:inherit;line-height:1.2;min-height:46px;display:flex;align-items:center;overflow:hidden}
.slot:hover:not(:disabled){border-color:var(--primary)}
.slot .tm{position:relative;z-index:1;font-size:12px;font-weight:700}
.slot .cnt{position:absolute;right:8px;bottom:-3px;display:flex;align-items:flex-end;gap:2px;line-height:1;pointer-events:none;z-index:0}
.slot .cnt b{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--rest);opacity:.2}
.slot .cnt i{font-size:10px;font-weight:800;font-style:normal;color:var(--rest);opacity:.2;letter-spacing:.04em;margin-bottom:5px}
.slot .cnt.full{right:8px;bottom:3px;font-size:22px;font-weight:700;color:var(--full-mark);opacity:.2;letter-spacing:.02em}
.slot.sel{background:var(--primary);border-color:var(--primary)}
.slot.sel .tm{color:var(--primary-ink)}
.slot.sel .cnt b,.slot.sel .cnt i{color:var(--primary-ink);opacity:.34}
.slot:disabled{cursor:not-allowed;background:var(--full-bg);border-color:var(--full-line)}
.slot:disabled .tm{color:var(--full-ink)}
.hint{grid-column:1/-1;text-align:center;color:var(--ink-2);font-size:12px;padding:14px 0}
.picked{font-size:13px;color:var(--ink-2);margin-bottom:10px}
.picked b{color:var(--ink);margin-right:10px}
/* 確認 */
.ctable{width:100%;border-collapse:collapse;font-size:14px}
.ctable th{width:110px;text-align:left;font-weight:500;color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--border-soft);vertical-align:top}
.ctable td{padding:10px 12px;border-bottom:1px solid var(--border-soft);white-space:pre-wrap}
.turnstile{margin:16px 0;display:flex;justify-content:center}
.turnstile:empty{margin:0}
/* 完了・停止 */
.done{text-align:center;padding:12px 0 4px}
.done .ck{width:52px;height:52px;border-radius:50%;background:var(--success-soft);color:var(--success);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:26px;font-weight:700}
.done h2{margin:0 0 10px;font-size:17px}
.done .num{font-size:12px;color:var(--ink-3)}
.done .num b{display:block;font-size:22px;color:var(--ink);letter-spacing:.06em;font-family:'JetBrains Mono',monospace}
.done p{font-size:13px;color:var(--ink-2);margin:12px 0 0}
.done p a{color:var(--primary)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1a1f2e;color:#fff;font-size:13px;font-weight:600;padding:10px 20px;box-shadow:0 4px 16px rgba(0,0,0,.3);z-index:99999}
.toast.error{background:var(--danger)}
.hide{display:none!important}
/* 添付(問い合わせ) */
.drop{border:2px dashed var(--border);border-radius:8px;min-height:64px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:var(--ink-2);font-size:13px;font-weight:600;background:var(--card)}
.drop:hover,.drop.over{border-color:var(--primary);background:var(--primary-soft)}
.drop b{font-size:20px;font-weight:400;line-height:1}
.files{margin-top:8px}
.file{display:grid;grid-template-columns:36px 1fr auto auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--border-soft);border-radius:8px;background:var(--inset);margin-bottom:6px;font-size:13px}
.file .pv{width:36px;height:36px;border-radius:4px;object-fit:cover;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--ink-2);overflow:hidden}
.file .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .sz{font-size:12px;color:var(--ink-3);white-space:nowrap}
.file .rm{border:none;background:none;color:var(--danger);font-size:18px;line-height:1;cursor:pointer;padding:0 4px;font-family:inherit}
.file .bar{grid-column:1/-1;height:6px;border-radius:3px;background:var(--border-soft);overflow:hidden}
.file .bar i{display:block;height:100%;width:0;background:var(--primary);transition:width .2s}
.file .bar.ok i{background:var(--success)}
.file .bar.ng i{background:var(--danger)}
@media (max-width:420px){.wrap{padding:12px}.panel{padding:16px}}