:root{
  --bg:#F3F5F2; --surface:#FFFFFF; --ink:#1A2420; --muted:#5B6862; --line:#CBD4CE;
  --accent:#0B5C48; --accent-ink:#FFFFFF; --accent-soft:#DDF0E8;
  --sat:#2F5FA8; --sun:#B23A31; --chip:#F5F8F6; --shadow:0 8px 28px rgba(26,36,32,.10);
  --sans:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#131917; --surface:#1C2421; --ink:#EEF2EF; --muted:#A5B2AA; --line:#3A4842;
    --accent:#5DD0AE; --accent-ink:#0B1A14; --accent-soft:#1F3A31;
    --sat:#8FB4F0; --sun:#F09088; --chip:#222C28; --shadow:0 8px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#131917; --surface:#1C2421; --ink:#EEF2EF; --muted:#A5B2AA; --line:#3A4842;
  --accent:#5DD0AE; --accent-ink:#0B1A14; --accent-soft:#1F3A31;
  --sat:#8FB4F0; --sun:#F09088; --chip:#222C28; --shadow:0 8px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wrap{max-width:460px;margin:0 auto;padding:12px 10px 150px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.head{padding:20px 18px 16px;border-bottom:1px solid var(--line)}
.step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);letter-spacing:.04em;margin:0 0 8px}
.step i{display:inline-block;width:26px;height:6px;border-radius:3px;background:var(--line)}
.step i.on{background:var(--accent)}
.sec{padding:14px 14px 6px}
.back{background:none;border:0;color:var(--muted);font-size:15px;padding:8px}
.co{font-size:15px;color:var(--muted);margin:0 0 6px}
h1{font-size:24px;line-height:1.35;margin:0;font-weight:700;text-wrap:balance}
.lead{margin:8px 0 0;font-size:17px;color:var(--muted)}
.lead b{color:var(--accent)}
/* 候補日ブロック */
.slots{padding:12px 12px 4px;display:flex;flex-direction:column;gap:12px}
.slot{border:2px solid var(--line);border-radius:14px;overflow:hidden}
.slot.done{border-color:var(--accent)}
.slot .hd{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--chip);min-height:56px}
.slot .hd .tag{flex:none;font-size:14px;font-weight:700;color:var(--accent-ink);background:var(--accent);border-radius:8px;padding:3px 9px;letter-spacing:.04em}
.slot.pick .hd .tag{background:var(--muted)}
.slot .hd .d{font-size:19px;font-weight:700;flex:none}
.slot .hd .sm{flex:1;font-size:15px;color:var(--accent);font-weight:700;line-height:1.3;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot.time .hd{flex-wrap:wrap}
.slot.time .hd .sm{flex:1 0 100%;order:9;margin-top:2px}
h1.one{font-size:22px;white-space:nowrap}
h1 .one{display:block;font-size:22px;white-space:nowrap;letter-spacing:-.01em}
.note{margin:-6px 0 16px;font-size:14px;color:var(--muted);line-height:1.6}
.slot .hd .sm.todo{color:var(--sun)}
.slot .hd .lk{flex:none;background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:13px;padding:5px 9px;white-space:nowrap}
.slot .hd .opt{flex:1;font-size:15px;color:var(--muted);line-height:1.35}
.slot .hd .opt .paren{margin-left:-.5em}
.slot .body{padding:10px 12px 12px}
.dates{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mlabel{grid-column:1/-1;font-size:14px;color:var(--muted);padding:2px 2px 0;font-weight:700}
.date{border:2px solid var(--line);background:var(--chip);border-radius:12px;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;line-height:1.1;min-height:66px;justify-content:center}
.date .d{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.date .w{font-size:14px;color:var(--muted);margin-top:3px}
.date.sat .w{color:var(--sat)}.date.sun .w{color:var(--sun)}
.date:disabled{opacity:.3;cursor:not-allowed}
.hours{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.hr{border:2px solid var(--line);background:var(--chip);border-radius:12px;min-height:54px;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 2px}
.hr[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.hr[aria-pressed="true"]::before{content:'✓';font-size:11px;margin-right:2px;vertical-align:1px}
.hr:disabled,.band:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.quick{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.quick .ql{font-size:14px;color:var(--muted);margin:0 0 6px}
.bands{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.band{border:2px solid var(--line);background:var(--surface);border-radius:10px;min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;padding:4px 2px}
.band .b{font-size:15px;font-weight:700}
.band .s{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap}
.band[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.band[aria-pressed="true"] .b::before{content:'✓ '}
.bands.big{grid-template-columns:1fr 1fr;gap:10px}
.bands.big .band{min-height:72px;background:var(--chip);border-radius:14px}
.bands.big .band .b{font-size:20px}
.bands.big .band .s{font-size:14px;white-space:normal}
.bands.big .band[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.bands.big .band[aria-pressed="true"] .s{color:var(--accent-ink);opacity:.85}
.slot .rm{margin-top:12px;background:none;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:14px;padding:8px 12px;width:100%}
.meta{font-size:14px;color:var(--muted);padding:10px 18px 14px;border-top:1px solid var(--line)}
/* 下部固定バー */
.bar{position:fixed;left:0;right:0;bottom:0;padding:10px 10px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 75%,transparent)}
.bar .in{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.count{text-align:center;font-size:17px;margin:0;color:var(--ink);font-weight:500}
.count b{color:var(--accent);font-size:20px}
.count.need{background:var(--surface);border:2px solid var(--accent);border-radius:12px;padding:8px 10px}
.ask{position:fixed;inset:0;background:rgba(26,36,32,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px;z-index:10}
.ask .box{background:var(--surface);border-radius:18px;padding:22px 18px;max-width:440px;width:100%;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.ask .at{margin:0 0 6px;font-size:19px;line-height:1.5;text-align:center}
.ask .at b{color:var(--accent);font-size:24px}
.ghost{width:100%;border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:12px;font-size:16px;color:var(--ink)}
.submit{width:100%;border:0;border-radius:14px;padding:18px;background:var(--accent);color:var(--accent-ink);font-size:20px;font-weight:700;box-shadow:var(--shadow)}
.submit:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
/* 完了 */
.done-card{padding:26px 20px}
.done-card h2{font-size:24px;margin:0 0 8px}
.done-card p{margin:0 0 16px;font-size:17px}
.sum{border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:17px}
.sum div{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.sum div:last-child{border-bottom:0}
.sum small{color:var(--muted);font-size:14px;text-align:right}
.sum .h{background:var(--chip);font-size:14px;color:var(--muted);font-weight:700}
/* 3ページ目: 情報入力(第2弾 2026-09-07) */
.fields{padding:6px 12px 10px;display:flex;flex-direction:column;gap:12px}
.field{border:2px solid var(--line);border-radius:14px;overflow:hidden}
.field.done{border-color:var(--accent)}
.field .hd{display:flex;align-items:center;gap:10px;padding:12px 14px 6px}
.field .hd .tag{flex:none;font-size:14px;font-weight:700;color:var(--accent-ink);background:var(--accent);border-radius:8px;padding:3px 9px}
.field .hd h2{font-size:20px;margin:0;font-weight:700;flex:1}
.field .hd .sm{font-size:15px;color:var(--accent);font-weight:700;white-space:nowrap}
.field .body{padding:6px 12px 14px}
.field .bands.big .band .s{white-space:normal}
.dob{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px}
.dob label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.sel{width:100%;font:inherit;font-size:20px;font-weight:700;color:var(--ink);background:var(--chip);border:2px solid var(--line);border-radius:12px;min-height:58px;padding:0 10px;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.sel:focus{outline:3px solid var(--accent);outline-offset:1px}
.txt{width:100%;font:inherit;font-size:19px;color:var(--ink);background:var(--chip);border:2px solid var(--line);border-radius:12px;min-height:58px;padding:0 14px}
.txt:focus{outline:3px solid var(--accent);outline-offset:1px}
.skip{width:100%;border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:12px;font-size:16px;color:var(--muted)}
body.on-s3 .wrap{padding-bottom:240px}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){.date,.band,.hr{transition:background .1s,border-color .1s}}
@media (max-width:360px){.date .d{font-size:15px}.hr{font-size:15px}.band .s{display:none}}

.err{padding:28px 20px}
.err h2{font-size:24px;margin:0 0 10px}
.err p{margin:0;font-size:18px}
