:root{
  --bg:#F3F5F8; --surface:#FFFFFF; --surface-2:#E9EDF2; --line:#D3D9E2; --line-strong:#AEB7C4;
  --ink:#1B2330; --ink-2:#4A5568; --ink-3:#7B8794;
  --open:#FFFFFF; --open-line:#C9D2DE; --open-hover:#EEF3FF;
  --first:#2F5BEA; --first-ink:#FFFFFF; --first-soft:#DCE5FF;
  --off:#E4E8EE; --off-ink:#7B8794; --off-hatch:#D6DCE5;
  --booked:#F0B429; --booked-ink:#3A2A00; --booked-soft:#FFF1CC;
  --booked-first:#1F9D55; --booked-first-ink:#FFFFFF;
  --accent:#2F5BEA; --danger:#D64545; --ok:#1F9D55;
  --priv:#7A4FCF; --priv-bg:#F1EAFF;   /* 仕事＆プライベート */
  --rise:#C2410C; --rise-bg:#FFEDD5;   /* RISEイベント */
  --shadow:0 1px 2px rgba(27,35,48,.06),0 8px 24px rgba(27,35,48,.08);
  --radius:12px;
}
/* ダークモードは使わない：スマホのダーク配色が見づらいのでライト固定（2026-09-09 りょうや） */
:root{color-scheme:light only}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{color:var(--ink);font-family:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP",sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;margin:0}
.mono{font-family:"IBM Plex Mono","SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}

.wrap{max-width:1120px;margin:0 auto;padding:18px 20px 110px}
.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}
.top h1{font-size:22px;font-weight:700}
.top .sub{color:var(--ink-2);margin-top:2px}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}

.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:0 0 12px}
.weeknav{display:inline-flex;align-items:center;gap:6px}
.weeknav button{border:1px solid var(--line);background:var(--surface);border-radius:8px;height:34px;padding:0 10px;font-weight:700;white-space:nowrap}
.weeknav button.arrow{width:34px;padding:0;font-size:16px}
.weeknav .range{font-weight:700;padding:0 8px;font-size:15px}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;color:var(--ink-2);font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .sw.priv{background:var(--priv-bg);border-color:var(--priv)}
.sw{width:20px;height:14px;border-radius:4px;border:1px solid var(--line)}
.sw.open{background:var(--open);border-color:var(--open-line)}
.sw.first{background:var(--first);border-color:var(--first)}
.sw.off{background:repeating-linear-gradient(135deg,var(--off) 0 4px,var(--off-hatch) 4px 6px)}
.sw.booked{background:var(--booked);border-color:var(--booked)}
.sw.bookedfirst{background:var(--booked-first);border-color:var(--booked-first)}
.hint{color:var(--ink-3);font-size:12.5px}

/* ---- モード切替 ---- */
.tabs{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.tabs button{border:0;background:transparent;border-radius:8px;height:32px;padding:0 16px;font-weight:700;color:var(--ink-2)}
.tabs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.dayswitch{display:none}.dayswitch button{height:28px;padding:0 10px;font-size:12.5px}
body:not([data-mode="plan"]) .only-plan{display:none!important}
body:not([data-mode="slot"]) .only-slot{display:none!important}
body:not([data-mode="month"]) .only-month{display:none!important}
body:not([data-mode="tpl"]) .only-tpl{display:none!important}
body[data-mode="tpl"] .hide-tpl{display:none!important}
body[data-mode="slot"] .not-slot{display:none!important}

/* ---- 月モード ---- */
.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid var(--line)}
.month .mh{padding:8px 0 6px;text-align:center;font-size:11px;color:var(--ink-3);letter-spacing:.06em;border-bottom:1px solid var(--line-strong);border-right:1px solid var(--line)}
.month .mh.sat{color:#3B6FD9}.month .mh.sun{color:#D64545}
.month .mc{min-height:96px;padding:4px 4px 6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.month .mc:hover{background:var(--open-hover)}
.month .mc.out{background:var(--surface-2);color:var(--ink-3)}
.month .mc.past{opacity:.5}
.month .mc.sel{box-shadow:inset 0 0 0 2px var(--accent);background:var(--open-hover)}
.month .mc .n{font-size:13px;font-weight:700;font-family:"Zen Kaku Gothic New",sans-serif;line-height:1.3;display:flex;align-items:center;gap:4px}
.month .mc.sat .n{color:#3B6FD9}.month .mc.sun .n,.month .mc.hol .n{color:#D64545}
.month .mc.today .n b{background:var(--accent);color:#fff;border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.month .mc.tue .n:after{content:"休";font-size:9px;color:var(--ink-3);font-weight:400}
.month .mi{font-size:10.5px;line-height:1.25;border-radius:4px;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.month .mi.reservation{background:#DDF3E6;color:#155D33}
.month .mi.firstonly{background:var(--first-soft);color:var(--first)}
.month .mi.private{background:var(--priv-bg);color:var(--priv)}
.month .mi.holiday{background:rgba(214,69,69,.12);color:var(--danger)}
.month .mi.more{background:transparent;color:var(--ink-3);font-weight:400}
/* スマホの月：日付を押すとその日の予定リストが下に出る（Googleカレンダーのスマホ版と同じ動き） */
.daylist{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.daylist .dh{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:700;font-family:"Zen Kaku Gothic New",sans-serif}
.daylist .dh button{font:inherit;font-size:12px;font-weight:600;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);border-radius:8px;padding:5px 10px;cursor:pointer}
.daylist .row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;min-width:0}
.daylist .row:last-child{border-bottom:0}
.daylist .row:active{background:var(--open-hover)}
.daylist .row .tm{flex:0 0 78px;font-size:11.5px;color:var(--ink-3);font-family:"JetBrains Mono",ui-monospace,monospace;line-height:1.3}
.daylist .row .bar{flex:0 0 4px;height:26px;border-radius:2px;background:var(--line-strong)}
.daylist .row .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:13.5px}
.daylist .row .tt small{display:block;font-weight:400;font-size:11px;color:var(--ink-3);white-space:normal}
.daylist .row.reservation .bar{background:#3FA96C}.daylist .row.firstonly .bar{background:var(--first)}
.daylist .row.openslot .bar{background:#8E9BB0}.daylist .row.openslot .tt{color:#3B4656}
.daylist .row.private .bar{background:var(--priv)}.daylist .row.rise .bar{background:var(--rise)}
.daylist .row.holiday .bar{background:var(--danger)}.daylist .row.block .bar{background:var(--line-strong)}
.daylist .empty{padding:14px 12px;color:var(--ink-3);font-size:13px}
/* 面談以外の予定：終日は塗りつぶし（白文字）、時間ありは色つきの点＋文字（Googleカレンダー風） */
.month .mi.private.ad{background:var(--priv);color:#fff}
.month .mi.rise.ad{background:var(--rise);color:#fff}
.month .mi.block.ad{background:var(--line-strong);color:var(--ink-2)}
.month .mi.tm{background:transparent;padding:1px 2px;display:flex;align-items:center;gap:4px;min-width:0}
.month .mi.tm:before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:currentColor}
.month .mi.tm.private{color:var(--priv)}.month .mi.tm.rise{color:var(--rise)}
.month .mi.tm .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.month .mi.tm .tt small{font-weight:400;opacity:.75;margin-left:3px}
/* Zoom面談は1行にまとめる：予約N・初回N・通常N */
.month .mi.zoom{background:transparent;padding:0;display:flex;gap:3px;flex-wrap:nowrap}
.month .mi.zoom b{font-weight:700;border-radius:4px;padding:1px 4px;font-size:10px;line-height:1.3;white-space:nowrap}
.month .mi.zoom .zr{background:#DDF3E6;color:#155D33}
.month .mi.zoom .zf{background:var(--first-soft);color:var(--first)}
.month .mi.zoom .zo{background:#F3F6FB;color:#3B4656;border:1px solid #8E9BB0}

/* ---- 型（週テンプレート） ---- */
.tplbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.tplbar .wk{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.tplbar .wk button{border:0;background:transparent;border-radius:8px;height:30px;padding:0 12px;font-weight:700;color:var(--ink-2)}
.tplbar .wk button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.tplbar .sp{flex:1}
.tplbar .btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;height:32px;padding:0 12px;font-weight:700}
.tplbar .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.tplgrid{display:grid;grid-template-columns:72px repeat(7,minmax(0,1fr))}
.tplgrid .th{padding:8px 4px;text-align:center;font-size:12px;font-weight:700;color:var(--ink-2);border-bottom:1px solid var(--line-strong);border-left:1px solid var(--line)}
.tplgrid .th.sat{color:#3B6FD9}.tplgrid .th.sun{color:#D64545}.tplgrid .th.corner{border-left:0}
.tplgrid .rh{padding:8px 6px;text-align:right;font-size:11.5px;color:var(--ink-3);border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.tplcell{min-height:46px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;cursor:pointer;user-select:none}
.tplcell.open{background:var(--open);color:var(--ink-3)}
.tplcell.first{background:var(--first);color:var(--first-ink)}
.tplcell.off{background:repeating-linear-gradient(135deg,var(--off) 0 4px,var(--off-hatch) 4px 6px);color:var(--off-ink)}
.tplcell.tue{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed;font-weight:400}
@media (max-width:760px){
  .tplgrid{grid-template-columns:44px repeat(7,minmax(38px,1fr));min-width:max-content}
  .tplcell{min-height:38px;font-size:9.5px}
  .tplgrid .th{font-size:10px}.tplgrid .rh{font-size:9.5px;padding:6px 3px}
  .tplwrap{overflow-x:auto}
}

/* ---- 予定モード（時間軸） ---- */
.schedwrap{overflow:auto;max-height:calc(100vh - 250px);min-height:420px;position:relative}
.sched{display:grid;grid-template-columns:50px repeat(var(--n,7),minmax(0,1fr));position:relative;min-width:0}
.sched .sh{position:sticky;top:0;z-index:4;background:var(--surface);border-bottom:1px solid var(--line-strong)}
.sched .sh.corner{border-right:1px solid var(--line)}
.sched .sh .dow{font-size:11px;color:var(--ink-3);letter-spacing:.06em}
.sched .sh .d{font-size:17px;font-weight:700;font-family:"Zen Kaku Gothic New",sans-serif;line-height:1.2}
.sched .sh{padding:8px 4px 6px;text-align:center;border-left:1px solid var(--line)}
.sched .sh.sat .d,.sched .sh.sat .dow{color:#3B6FD9}.sched .sh.sun .d,.sched .sh.sun .dow{color:#D64545}
.sched .sh.today .d{color:var(--accent)}
.sched .sh .ad{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.sched .sh .nores.has{background:#DDF3E6;color:#155D33;border-color:#8FD1A8}
.sched .sh .nores{margin-top:4px;font-size:11px;line-height:1.35;border-radius:4px;padding:2px 5px;font-weight:700;background:rgba(214,69,69,.12);color:var(--danger);border:1px solid rgba(214,69,69,.38);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched .sh .ad span{font-size:10.5px;line-height:1.3;border-radius:4px;padding:1px 5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;text-align:left}
.sched .sh .ad span.tm{font-weight:600;background:transparent;border:1px solid currentColor}
.sched .sh .ad span.tm small{font-weight:700;opacity:.8;margin-right:3px}
.sched .tc{position:relative;border-right:1px solid var(--line)}
.sched .tc .h{position:absolute;right:6px;transform:translateY(-50%);font-size:10.5px;color:var(--ink-3)}
.sched .dc{position:relative;border-left:1px solid var(--line);cursor:pointer}
.sched .dc .hl{position:absolute;left:0;right:0;border-top:1px solid var(--line);pointer-events:none}
.sched .dc .hl.half{border-top-style:dashed;opacity:.5}
.sched .dc.today{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.sched .now{position:absolute;left:0;right:0;border-top:2px solid var(--danger);z-index:2;pointer-events:none}
.sched .now:before{content:"";position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--danger)}
.ev{position:absolute;border-radius:6px;padding:3px 6px;font-size:11.5px;line-height:1.3;overflow:hidden;cursor:pointer;
  border:1px solid transparent;box-shadow:0 1px 1px rgba(0,0,0,.06);z-index:1}
.ev:hover{filter:brightness(.97);z-index:3}
.ev .et{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev .ew{font-size:10.5px;opacity:.8;white-space:nowrap}
.ev.short .ew{display:none}
.ev.short{padding:1px 6px;font-size:11px}
.ev.reservation{background:#DDF3E6;color:#155D33;border-color:#8FD1A8}
.ev.reservation.kfirst{background:#1F9D55;color:#fff;border-color:#1F9D55}
.ev.firstonly{background:var(--first-soft);color:var(--first);border-color:var(--first)}
.ev.block{background:var(--surface-2);color:var(--ink-2);border-color:var(--line-strong);
  background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.035) 6px 8px)}
.ev.private{background:var(--priv-bg);color:var(--priv);border-color:var(--priv)}
.ev.rise{background:var(--rise-bg);color:var(--rise);border-color:var(--rise)}
.ev.openslot{background:#F3F6FB;border:1.5px solid #8E9BB0;color:#3B4656;box-shadow:none;pointer-events:none;z-index:0}
.ev.openslot .et{font-weight:700}
.sw.evo{border:1.5px solid #8E9BB0;background:#F3F6FB}
.ev.noted{border-left:5px solid #E0A526;padding-left:5px;background-image:linear-gradient(to bottom,rgba(224,165,38,.18),rgba(224,165,38,.18))}
.ev .en{font-size:10.5px;line-height:1.3;color:#6B4A00;background:#FFF3C4;border-radius:4px;padding:1px 5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot.noted{box-shadow:inset 5px 0 0 #E0A526}
.slot .en{display:block;font-size:10.5px;line-height:1.25;color:#6B4A00;background:#FFF3C4;border-radius:4px;padding:0 4px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tip{position:fixed;z-index:60;max-width:300px;background:#2A2000;color:#FFF3C4;padding:8px 11px;border-radius:9px;font-size:12.5px;line-height:1.5;white-space:pre-wrap;box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:none;display:none}
.tip:before{content:"📝 メモ";display:block;font-size:10.5px;font-weight:700;color:#E0A526;margin-bottom:2px}
.ev .nb{display:inline-block;background:#E0A526;color:#1F1600;font-size:10px;font-weight:700;border-radius:4px;padding:0 5px;margin-right:4px;vertical-align:1px}
.month .mi.noted{background:#FFF3C4;color:#6B4A00;border-left:3px solid #E0A526}
.slot .nb{position:absolute;top:4px;right:4px;background:#E0A526;color:#1F1600;font-size:10px;font-weight:700;border-radius:4px;padding:0 5px;z-index:2}
.ad .rise{background:var(--rise-bg);color:var(--rise)}
.sw.evrise{background:var(--rise-bg);border-color:var(--rise)}
.month .mi.rise{background:var(--rise-bg);color:var(--rise)}
.ev.ref{background:transparent;color:var(--priv);border:1px dashed var(--priv)}
.ad .ref{color:var(--priv);border:1px dashed var(--priv)}
.sw.evref{border:1px dashed var(--priv);background:transparent}
.ev.holiday{background:rgba(214,69,69,.12);color:var(--danger)}
.ad .private{background:var(--priv-bg);color:var(--priv)}
.ad .holiday{background:rgba(214,69,69,.12);color:var(--danger)}
.ad .block{background:var(--surface-2);color:var(--ink-2)}
.ad .reservation{background:#DDF3E6;color:#155D33}
.sw.evr{background:#DDF3E6;border-color:#8FD1A8}
.sw.evb{background:var(--surface-2);border-color:var(--line-strong)}
.sw.evh{background:rgba(214,69,69,.12);border-color:var(--danger)}
.dl dt{font-size:11px;color:var(--ink-3);letter-spacing:.06em;margin-top:10px}.dl dd{margin:2px 0 0}
.dl dd.pre{white-space:pre-wrap;font-size:12.5px;color:var(--ink-2)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:relative}
.loading{position:absolute;inset:0;background:color-mix(in srgb,var(--surface) 70%,transparent);display:none;align-items:center;justify-content:center;z-index:3;font-weight:700;color:var(--ink-2)}
.panel.busy .loading{display:flex}
.auditbar{display:none;margin:0 0 12px;padding:10px 14px;border-radius:10px;background:rgba(214,69,69,.12);border:1px solid rgba(214,69,69,.45);color:#8E1F1F;font-size:13px;line-height:1.55}
.auditbar b{display:block;margin-bottom:2px}.auditbar.show{display:block}
.rpill{position:absolute;top:8px;right:10px;z-index:4;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;color:var(--ink-3);box-shadow:var(--shadow);display:none;pointer-events:none}
.panel.reading .rpill{display:block}
.ev.pending,.daylist .row.pending{opacity:.55}

.boardwrap{overflow-x:auto}
.board{display:grid;grid-template-columns:72px repeat(7,minmax(118px,1fr));min-width:900px}
.board .corner{border-bottom:1px solid var(--line-strong)}
.board .dh{padding:10px 6px 8px;text-align:center;border-bottom:1px solid var(--line-strong);border-left:1px solid var(--line)}
.board .dh .dow{font-size:11px;color:var(--ink-3);letter-spacing:.06em}
.board .dh .d{font-size:17px;font-weight:700;font-family:"Zen Kaku Gothic New",sans-serif;line-height:1.2}
.board .dh.sat .dow,.board .dh.sat .d{color:#2F6FD6}
.board .dh.sun .dow,.board .dh.sun .d{color:#D64545}
.board .dh.today .d{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px;text-decoration-color:var(--accent)}
.board .dh .cnt{font-size:11px;color:var(--ink-3);margin-top:2px;display:flex;justify-content:center;gap:6px}
.board .dh .cnt b{color:var(--first);font-weight:700}
.board .rh{padding:0 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;font-size:13px;color:var(--ink-2)}
.board .rh .end{font-size:11px;color:var(--ink-3)}
.slot{min-height:58px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px 9px;display:flex;flex-direction:column;justify-content:center;gap:1px;user-select:none;position:relative;transition:background .08s,transform .06s;cursor:pointer}
.slot .t{font-weight:700;font-size:13px}
.slot .s{font-size:12px}
.slot.open{background:var(--open)}
.slot.open .t{color:var(--ink)}.slot.open .s{color:var(--ink-3)}
.slot.open:hover{background:var(--open-hover)}
.slot.first{background:var(--first)}
.slot.first .t,.slot.first .s{color:var(--first-ink)}
.slot.off{background:repeating-linear-gradient(135deg,var(--off) 0 4px,var(--off-hatch) 4px 6px)}
.slot.off .t,.slot.off .s{color:var(--off-ink)}
.slot.off.tpl{opacity:.6}
.slot.booked{background:var(--booked)}
.slot.booked .t,.slot.booked .s{color:var(--booked-ink)}
.slot.booked.kfirst{background:var(--booked-first)}
.slot.booked.kfirst .t,.slot.booked.kfirst .s{color:var(--booked-first-ink)}
.slot.booked .s{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .k{position:absolute;top:6px;right:7px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.85);color:#1B2330}
.slot:not(.booked):active{transform:scale(.98)}
.slot.changed::after{content:"";position:absolute;inset:3px;border:2px solid var(--ink);border-radius:6px;opacity:.5;pointer-events:none}
.slot.first.changed::after{border-color:#fff;opacity:.8}
.slot.past{opacity:.45;cursor:default}

.daychips{display:none;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);overflow-x:auto}
.daychips button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;white-space:nowrap;font-weight:700;color:var(--ink-2)}
.daychips button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}

.savebar{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.08);padding:12px 20px;z-index:5}
.savebar .in{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between}
.savebar .cnt{display:flex;align-items:center;gap:10px}
.badge{display:inline-block;background:var(--first-soft);color:var(--first);font-weight:700;border-radius:999px;padding:2px 10px;font-size:12px}
.badge.zero{background:var(--surface-2);color:var(--ink-3)}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 16px;font-weight:700}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent}

.modal{position:fixed;inset:0;background:rgba(10,14,20,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:20}
.modal[open]{display:flex}
.sheet{background:var(--surface);border-radius:14px;max-width:720px;width:100%;max-height:85vh;overflow:auto;box-shadow:var(--shadow);border:1px solid var(--line)}
.sheet header{padding:16px 20px;border-bottom:1px solid var(--line)}
.sheet header h2{font-size:17px}
.sheet header p{margin:4px 0 0;color:var(--ink-2)}
.sheet .body{padding:16px 20px;display:grid;gap:14px}
.slot.off .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet footer{padding:12px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.note{font-size:12.5px;color:var(--ink-3);border-left:3px solid var(--line-strong);padding:6px 10px;margin:0}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:999px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30;max-width:90vw;text-align:center}
.toast.show{opacity:1}
.toast.err{background:var(--danger);color:#fff}

/* 予約詳細 */
.bk{display:grid;gap:10px}
.bk .who{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bk .who h3{font-size:18px}
.pill{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--booked);color:var(--booked-ink)}
.pill.first{background:var(--booked-first);color:var(--booked-first-ink)}
.bk dl{margin:0;display:grid;grid-template-columns:96px 1fr;gap:6px 12px}
.bk dt{color:var(--ink-3);font-size:12.5px}
.bk dd{margin:0;white-space:pre-wrap;word-break:break-word}
.bk .raw{font-size:12px;color:var(--ink-3);white-space:pre-wrap;border-top:1px dashed var(--line);padding-top:8px}
.bk .actions{display:flex;gap:8px;flex-wrap:wrap}

/* 他カレンダーの参考表示（予約は塞がない） */
.slot .ext{display:block;font-size:10.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;
  border-radius:4px;padding:0 4px;font-weight:600}
.slot .ext.private{color:var(--priv);background:var(--priv-bg)}
.slot .ext.holiday{color:var(--danger);background:rgba(214,69,69,.10)}
.slot.warned{box-shadow:inset 0 0 0 2px var(--danger)}
.slot .warn{position:absolute;top:4px;left:5px;font-size:11px;line-height:1}
.board .dh .ad{margin-top:4px;display:flex;flex-direction:column;gap:2px}
.board .dh .nores{margin-top:4px;font-size:11px;line-height:1.35;border-radius:4px;padding:2px 5px;font-weight:700;background:rgba(214,69,69,.12);color:var(--danger);border:1px solid rgba(214,69,69,.38);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .dh .nores.has{background:#DDF3E6;color:#155D33;border-color:#8FD1A8}
.board .dh .ad span{font-size:10.5px;line-height:1.3;border-radius:4px;padding:1px 5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;text-align:left}
.board .dh .ad span.tm{font-weight:600;background:transparent;border:1px solid currentColor}
.board .dh .ad span.tm small{font-weight:700;opacity:.8;margin-right:3px}
.board .dh .ad span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .dh .ad .holiday{color:#D64545;font-weight:700}
.board .dh .ad .private{color:var(--priv);background:var(--priv-bg);border-radius:4px;padding:0 4px;font-weight:600}
.board .dh .ad .block{color:var(--ink-2);background:var(--surface-2);border-radius:4px;padding:0 4px;font-weight:600}
.board .dh .ad .gap{color:#B26A00;font-weight:700}

/* 予定追加フォーム */
.frow{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:center}
.frow label{color:var(--ink-2);font-size:13px}
.frow input,.frow select{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;width:100%;max-width:320px}

/* スマホ：7日を横に並べたまま画面に収める */
@media (max-width:760px){
  .sched{grid-template-columns:42px repeat(var(--n,7),minmax(96px,1fr));min-width:max-content}
  .sched .tc{position:sticky;left:0;z-index:3;background:var(--surface)}
  .sched .sh.corner{position:sticky;left:0;z-index:6}
  .dayswitch{display:inline-flex}
  .sched .tc .h{font-size:9.5px;right:4px}
  .sched .sh{padding:6px 2px 4px}.sched .sh .d{font-size:15px}
  .sched .sh .ad span{font-size:9.5px;padding:0 3px}
  .ev{font-size:10.5px;padding:2px 4px}.ev .ew{font-size:9.5px}
  .schedwrap{max-height:calc(100vh - 230px)}
  .tabs button{padding:0 12px;height:30px}
  .month .mc{min-height:76px;padding:3px 2px 4px}
  .month .mc .n{font-size:12px}
  .month .mi{font-size:9px;padding:0 3px}
  /* スマホの月：Googleカレンダーのスマホ版に寄せて、時間ありの予定も塗りつぶしの帯にする（点と時刻は省いて名前を優先） */
  .month .mi.tm{display:block;padding:0 3px}
  .month .mi.tm:before{display:none}
  .month .mi.tm .tt small{display:none}
  .month .mi.tm.private{background:var(--priv-bg);color:var(--priv);border-left:2px solid var(--priv)}
  .month .mi.tm.rise{background:var(--rise-bg);color:var(--rise);border-left:2px solid var(--rise)}
  .month .mi.zoom{flex-wrap:wrap;gap:2px}
  .month .mi.zoom b{font-size:9px;padding:0 3px}
  .wrap{padding:12px 10px 118px}
  .top h1{font-size:19px}
  .top .sub{font-size:12px}
  .legend{font-size:11.5px;gap:6px 10px}
  .bar{gap:8px 10px}
  .weeknav{width:100%;flex-wrap:nowrap;gap:4px}
  .weeknav button{height:32px;padding:0 8px;font-size:12.5px}
  .weeknav button.arrow{width:28px;font-size:15px}
  .weeknav .range{font-size:13px;padding:0 2px;white-space:nowrap;flex:1;text-align:center}
  .board{min-width:0}
  .daychips{display:none!important}
  .boardwrap{overflow-x:hidden}
  .board .dh{padding:7px 1px 6px}
  .board .dh .dow{font-size:9px;letter-spacing:0}
  .board .dh .d{font-size:14px}
  .board .dh .cnt{font-size:9.5px;gap:5px;margin-top:1px}
  .board .rh{padding:0 3px;font-size:10.5px}
  .board .rh .end{display:none}
  .slot{min-height:56px;padding:4px 2px;justify-content:flex-start;gap:0}
  .slot .t{display:none}
  .slot .s{font-size:10px;line-height:1.3;white-space:normal;word-break:break-all;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .slot.booked .s,.slot.off .s{white-space:normal;text-overflow:clip}
  .slot .k{position:static;display:block;margin:0 0 2px;font-size:8.5px;padding:0 3px;border-radius:3px;text-align:center;background:rgba(255,255,255,.9)}
  .slot .ext{font-size:9px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .slot .warn{top:2px;left:2px;font-size:9.5px}
  .board .dh .ad{font-size:8.5px}
  .frow{grid-template-columns:1fr}
  .bk dl{grid-template-columns:1fr}
}
@media (max-width:400px){
  .board .rh{font-size:9.5px;padding:0 2px}
  .slot .s{font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}